Add Directional Motion options

* Not everyone uses paru or yay on Arch: Support pacman command
* Handle sudo properly when using pacman
* Move pacman to bottom per Purian23
* Remote duplicate which -- thanks Purian23!

core/.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/golangci/golangci-lint
-    rev: v2.9.0
+    rev: v2.10.1
     hooks:
       - id: golangci-lint-fmt
         require_serial: true

quickshell/Common/AnimVariants.qml

@@ -0,0 +1,174 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Common
+
+// AnimVariants — Central tuning for animation and Motion Effects variants
+// (Material/Fluent/Dynamic) (Standard/Directional/Depth)
+
+Singleton {
+    id: root
+
+    readonly property list<real> variantEnterCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.expressiveDefaultSpatial;
+        switch (SettingsData.animationVariant) {
+        case 1:
+            return Anims.standardDecel;
+        case 2:
+            return Anims.expressiveFastSpatial;
+        default:
+            return Anims.expressiveDefaultSpatial;
+        }
+    }
+
+    readonly property list<real> variantExitCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.emphasized;
+        switch (SettingsData.animationVariant) {
+        case 1:
+            return Anims.standard;
+        case 2:
+            return Anims.emphasized;
+        default:
+            return Anims.emphasized;
+        }
+    }
+
+    // Modal-specific entry curve
+    readonly property list<real> variantModalEnterCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.expressiveDefaultSpatial;
+        if (isDirectionalEffect) {
+            if (SettingsData.animationVariant === 1)
+                return Anims.standardDecel;
+            if (SettingsData.animationVariant === 2)
+                return Anims.expressiveFastSpatial;
+        }
+        return variantEnterCurve;
+    }
+
+    readonly property list<real> variantModalExitCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.emphasized;
+        if (isDirectionalEffect) {
+            if (SettingsData.animationVariant === 1)
+                return Anims.emphasizedAccel;
+            if (SettingsData.animationVariant === 2)
+                return Anims.emphasizedAccel;
+        }
+        return variantExitCurve;
+    }
+
+    // Popout-specific entry curve
+    readonly property list<real> variantPopoutEnterCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.expressiveDefaultSpatial;
+        if (isDirectionalEffect) {
+            if (SettingsData.animationVariant === 1)
+                return Anims.standardDecel;
+            if (SettingsData.animationVariant === 2)
+                return Anims.expressiveFastSpatial;
+            return Anims.standardDecel;
+        }
+        return variantEnterCurve;
+    }
+
+    readonly property list<real> variantPopoutExitCurve: {
+        if (typeof SettingsData === "undefined")
+            return Anims.emphasized;
+        if (isDirectionalEffect) {
+            if (SettingsData.animationVariant === 1)
+                return Anims.emphasizedAccel;
+            if (SettingsData.animationVariant === 2)
+                return Anims.emphasizedAccel;
+        }
+        return variantExitCurve;
+    }
+
+    readonly property real variantEnterDurationFactor: {
+        if (typeof SettingsData === "undefined")
+            return 1.0;
+        switch (SettingsData.animationVariant) {
+        case 1:
+            return 0.9;
+        case 2:
+            return 1.08;
+        default:
+            return 1.0;
+        }
+    }
+
+    readonly property real variantExitDurationFactor: {
+        if (typeof SettingsData === "undefined")
+            return 1.0;
+        switch (SettingsData.animationVariant) {
+        case 1:
+            return 0.85;
+        case 2:
+            return 0.92;
+        default:
+            return 1.0;
+        }
+    }
+
+    // Fluent: opacity at ~55% of duration; Material/Dynamic: 1:1 with position
+    readonly property real variantOpacityDurationScale: {
+        if (typeof SettingsData === "undefined")
+            return 1.0;
+        return SettingsData.animationVariant === 1 ? 0.55 : 1.0;
+    }
+
+    function variantDuration(baseDuration, entering) {
+        const factor = entering ? variantEnterDurationFactor : variantExitDurationFactor;
+        return Math.max(0, Math.round(baseDuration * factor));
+    }
+
+    function variantExitCleanupPadding() {
+        if (typeof SettingsData === "undefined")
+            return 50;
+        switch (SettingsData.motionEffect) {
+        case 1:
+            return 8;
+        case 2:
+            return 24;
+        default:
+            return 50;
+        }
+    }
+
+    function variantCloseInterval(baseDuration) {
+        return variantDuration(baseDuration, false) + variantExitCleanupPadding();
+    }
+
+    readonly property bool isDirectionalEffect: typeof SettingsData !== "undefined" && SettingsData.motionEffect === 1
+    readonly property bool isDepthEffect: typeof SettingsData !== "undefined" && SettingsData.motionEffect === 2
+
+    readonly property real effectScaleCollapsed: {
+        if (typeof SettingsData === "undefined")
+            return 0.96;
+        switch (SettingsData.motionEffect) {
+        case 1:
+            return 1.0;
+        case 2:
+            return 0.88;
+        default:
+            return 0.96;
+        }
+    }
+
+    readonly property real effectAnimOffset: {
+        if (typeof SettingsData === "undefined")
+            return 16;
+        switch (SettingsData.motionEffect) {
+        case 1:
+            return 144;
+        case 2:
+            return 56;
+        default:
+            return 16;
+        }
+    }
+}

quickshell/Common/Anims.qml

@@ -22,4 +22,9 @@ Singleton {
     readonly property var standard: [0.20, 0.00, 0.00, 1.00, 1.00, 1.00]
     readonly property var standardDecel: [0.00, 0.00, 0.00, 1.00, 1.00, 1.00]
     readonly property var standardAccel: [0.30, 0.00, 1.00, 1.00, 1.00, 1.00]
+
+    // Used by AnimVariants for variant/effect logic
+    readonly property var expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
+    readonly property var expressiveFastSpatial: [0.34, 1.5, 0.2, 1.0, 1.0, 1.0]
+    readonly property var expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
 }

quickshell/Common/SettingsData.qml

@@ -37,6 +37,18 @@ Singleton {
         Custom
     }
 
+    enum AnimationVariant {
+        Material,
+        Fluent,
+        Dynamic
+    }
+
+    enum AnimationEffect {
+        Standard,     // 0 — M3: scale-in, rises from below
+        Directional,  // 1 — pure large slide, no scale
+        Depth         // 2 — medium slide with deep depth scale pop
+    }
+
     enum SuspendBehavior {
         Suspend,
         Hibernate,
@@ -166,6 +178,12 @@ Singleton {
     property int modalCustomAnimationDuration: 150
     property bool enableRippleEffects: true
     onEnableRippleEffectsChanged: saveSettings()
+    property int animationVariant: SettingsData.AnimationVariant.Material
+    onAnimationVariantChanged: saveSettings()
+    property int motionEffect: SettingsData.AnimationEffect.Standard
+    onMotionEffectChanged: saveSettings()
+    property int directionalAnimationMode: 0
+    onDirectionalAnimationModeChanged: saveSettings()
     property bool m3ElevationEnabled: true
     onM3ElevationEnabledChanged: saveSettings()
     property int m3ElevationIntensity: 12

quickshell/Common/Theme.qml

@@ -960,6 +960,24 @@ Singleton {
         "expressiveEffects": [0.34, 0.8, 0.34, 1, 1, 1]
     }
 
+    // Delegates to AnimVariants.qml for curves, timing, scale, and offsets.
+    readonly property list<real> variantEnterCurve: AnimVariants.variantEnterCurve
+    readonly property list<real> variantExitCurve: AnimVariants.variantExitCurve
+    readonly property list<real> variantModalEnterCurve: AnimVariants.variantModalEnterCurve
+    readonly property list<real> variantModalExitCurve: AnimVariants.variantModalExitCurve
+    readonly property list<real> variantPopoutEnterCurve: AnimVariants.variantPopoutEnterCurve
+    readonly property list<real> variantPopoutExitCurve: AnimVariants.variantPopoutExitCurve
+    readonly property real variantEnterDurationFactor: AnimVariants.variantEnterDurationFactor
+    readonly property real variantExitDurationFactor: AnimVariants.variantExitDurationFactor
+    readonly property real variantOpacityDurationScale: AnimVariants.variantOpacityDurationScale
+    readonly property bool isDirectionalEffect: AnimVariants.isDirectionalEffect
+    readonly property bool isDepthEffect: AnimVariants.isDepthEffect
+    readonly property real effectScaleCollapsed: AnimVariants.effectScaleCollapsed
+    readonly property real effectAnimOffset: AnimVariants.effectAnimOffset
+    function variantDuration(baseDuration, entering) { return AnimVariants.variantDuration(baseDuration, entering); }
+    function variantExitCleanupPadding() { return AnimVariants.variantExitCleanupPadding(); }
+    function variantCloseInterval(baseDuration) { return AnimVariants.variantCloseInterval(baseDuration); }
+
     readonly property var animationPresetDurations: {
         "none": 0,
         "short": 250,

quickshell/Common/settings/SettingsSpec.js

@@ -47,6 +47,9 @@ var SPEC = {
     modalAnimationSpeed: { def: 1 },
     modalCustomAnimationDuration: { def: 150 },
     enableRippleEffects: { def: true },
+    animationVariant: { def: 0 },
+    motionEffect: { def: 0 },
+    directionalAnimationMode: { def: 0 },
     m3ElevationEnabled: { def: true },
     m3ElevationIntensity: { def: 12 },
     m3ElevationOpacity: { def: 30 },

quickshell/DMSShellIPC.qml

@@ -21,11 +21,37 @@ Item {
     required property var workspaceRenameModalLoader
     required property var windowRuleModalLoader
 
-    function getFirstBar() {
+    function getPreferredBar(refPropertyName) {
         if (!root.dankBarRepeater || root.dankBarRepeater.count === 0)
             return null;
-        const firstLoader = root.dankBarRepeater.itemAt(0);
+
-        return firstLoader ? firstLoader.item : null;
+        const focusedScreenName = BarWidgetService.getFocusedScreenName();
+
+        const loaders = Array.from({
+            length: root.dankBarRepeater.count
+        }, (_, i) => root.dankBarRepeater.itemAt(i));
+
+        let currentBar = null;
+
+        for (const loader of loaders) {
+            const instances = loader?.item?.barVariants?.instances || [];
+            for (const bar of instances) {
+                if (!bar)
+                    continue;
+
+                const onFocusedScreen = focusedScreenName && bar.modelData?.name === focusedScreenName;
+                const hasRef = !refPropertyName || !!bar[refPropertyName];
+
+                if (hasRef) {
+                    currentBar = bar;
+
+                    if (onFocusedScreen)
+                        break;
+                }
+            }
+        }
+
+        return currentBar;
     }
 
     IpcHandler {
@@ -97,9 +123,9 @@ Item {
 
     IpcHandler {
         function open(): string {
-            const bar = root.getFirstBar();
+            const bar = root.getPreferredBar("controlCenterButtonRef");
             if (bar) {
-                bar.triggerControlCenterOnFocusedScreen();
+                bar.triggerControlCenter();
                 return "CONTROL_CENTER_OPEN_SUCCESS";
             }
             return "CONTROL_CENTER_OPEN_FAILED";
@@ -114,9 +140,14 @@ Item {
         }
 
         function toggle(): string {
-            const bar = root.getFirstBar();
+            if (root.controlCenterLoader.item?.shouldBeVisible) {
+                root.controlCenterLoader.item.close();
+                return "CONTROL_CENTER_TOGGLE_SUCCESS";
+            }
+
+            const bar = root.getPreferredBar("controlCenterButtonRef");
             if (bar) {
-                bar.triggerControlCenterOnFocusedScreen();
+                bar.triggerControlCenter();
                 return "CONTROL_CENTER_TOGGLE_SUCCESS";
             }
             return "CONTROL_CENTER_TOGGLE_FAILED";
@@ -131,27 +162,37 @@ Item {
 
     IpcHandler {
         function open(tab: string): string {
-            root.dankDashPopoutLoader.active = true;
+            const bar = root.getPreferredBar("clockButtonRef");
-            if (root.dankDashPopoutLoader.item) {
+            if (!bar)
-                switch (tab.toLowerCase()) {
+                return "DASH_OPEN_FAILED";
-                case "media":
+
-                    root.dankDashPopoutLoader.item.currentTabIndex = 1;
+            const dash = root.dankDashPopoutLoader.item;
-                    break;
+            const onSameScreen = dash && dash.shouldBeVisible && dash.triggerScreen?.name === bar.screen?.name;
-                case "wallpaper":
+
-                    root.dankDashPopoutLoader.item.currentTabIndex = 2;
+            if (!onSameScreen) {
-                    break;
+                bar.triggerWallpaperBrowser();
-                case "weather":
-                    root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 3 : 0;
-                    break;
-                default:
-                    root.dankDashPopoutLoader.item.currentTabIndex = 0;
-                    break;
-                }
-                root.dankDashPopoutLoader.item.setTriggerPosition(Screen.width / 2, Theme.barHeight + Theme.spacingS, 100, "center", Screen);
-                root.dankDashPopoutLoader.item.dashVisible = true;
-                return "DASH_OPEN_SUCCESS";
             }
-            return "DASH_OPEN_FAILED";
+
+            if (!root.dankDashPopoutLoader.item)
+                return "DASH_OPEN_FAILED";
+
+            switch (tab.toLowerCase()) {
+            case "media":
+                root.dankDashPopoutLoader.item.currentTabIndex = 1;
+                break;
+            case "wallpaper":
+                root.dankDashPopoutLoader.item.currentTabIndex = 2;
+                break;
+            case "weather":
+                root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 3 : 0;
+                break;
+            default:
+                root.dankDashPopoutLoader.item.currentTabIndex = 0;
+                break;
+            }
+
+            root.dankDashPopoutLoader.item.dashVisible = true;
+            return "DASH_OPEN_SUCCESS";
         }
 
         function close(): string {
@@ -163,8 +204,14 @@ Item {
         }
 
         function toggle(tab: string): string {
-            const bar = root.getFirstBar();
+            if (root.dankDashPopoutLoader.item?.dashVisible) {
-            if (bar && bar.triggerWallpaperBrowserOnFocusedScreen()) {
+                root.dankDashPopoutLoader.item.dashVisible = false;
+                return "DASH_TOGGLE_SUCCESS";
+            }
+
+            const bar = root.getPreferredBar("clockButtonRef");
+            if (bar) {
+                bar.triggerWallpaperBrowser();
                 if (root.dankDashPopoutLoader.item) {
                     switch (tab.toLowerCase()) {
                     case "media":
@@ -521,8 +568,9 @@ Item {
 
     IpcHandler {
         function wallpaper(): string {
-            const bar = root.getFirstBar();
+            const bar = root.getPreferredBar("clockButtonRef");
-            if (bar && bar.triggerWallpaperBrowserOnFocusedScreen()) {
+            if (bar) {
+                bar.triggerWallpaperBrowser();
                 return "SUCCESS: Toggled wallpaper browser";
             }
             return "ERROR: Failed to toggle wallpaper browser";

quickshell/Modals/Common/DankModal.qml

@@ -26,10 +26,10 @@ Item {
     property bool closeOnBackgroundClick: true
     property string animationType: "scale"
     property int animationDuration: Theme.modalAnimationDuration
-    property real animationScaleCollapsed: 0.96
+    property real animationScaleCollapsed: Theme.effectScaleCollapsed
-    property real animationOffset: Theme.spacingL
+    property real animationOffset: Theme.effectAnimOffset
-    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+    property list<real> animationEnterCurve: Theme.variantModalEnterCurve
-    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
+    property list<real> animationExitCurve: Theme.variantModalExitCurve
     property color backgroundColor: Theme.surfaceContainer
     property color borderColor: Theme.outlineMedium
     property real borderWidth: 0
@@ -44,11 +44,13 @@ Item {
     property bool keepPopoutsOpen: false
     property var customKeyboardFocus: null
     property bool useOverlayLayer: false
+    property real frozenMotionOffsetX: 0
+    property real frozenMotionOffsetY: 0
     readonly property alias contentWindow: contentWindow
     readonly property alias clickCatcher: clickCatcher
     readonly property bool useHyprlandFocusGrab: CompositorService.useHyprlandFocusGrab
     readonly property bool useBackground: showBackground && SettingsData.modalDarkenBackground
-    readonly property bool useSingleWindow: CompositorService.isHyprland || useBackground
+    readonly property bool useSingleWindow: CompositorService.isHyprland
 
     signal opened
     signal dialogClosed
@@ -58,19 +60,34 @@ Item {
 
     function open() {
         closeTimer.stop();
+        animationsEnabled = false;
+        frozenMotionOffsetX = modalContainer ? modalContainer.offsetX : 0;
+        frozenMotionOffsetY = modalContainer ? modalContainer.offsetY : animationOffset;
+
         const focusedScreen = CompositorService.getFocusedScreen();
         if (focusedScreen) {
             contentWindow.screen = focusedScreen;
             if (!useSingleWindow)
                 clickCatcher.screen = focusedScreen;
         }
+
+        if (Theme.isDirectionalEffect || root.useBackground) {
+            if (!useSingleWindow)
+                clickCatcher.visible = true;
+            contentWindow.visible = true;
+        }
         ModalManager.openModal(root);
-        shouldBeVisible = true;
+
-        if (!useSingleWindow)
+        Qt.callLater(() => {
-            clickCatcher.visible = true;
+            animationsEnabled = true;
-        contentWindow.visible = true;
+            shouldBeVisible = true;
-        shouldHaveFocus = false;
+            if (!useSingleWindow && !clickCatcher.visible)
-        Qt.callLater(() => shouldHaveFocus = Qt.binding(() => shouldBeVisible));
+                clickCatcher.visible = true;
+            if (!contentWindow.visible)
+                contentWindow.visible = true;
+            shouldHaveFocus = false;
+            Qt.callLater(() => shouldHaveFocus = Qt.binding(() => shouldBeVisible));
+        });
     }
 
     function close() {
@@ -131,7 +148,7 @@ Item {
 
     Timer {
         id: closeTimer
-        interval: animationDuration + 50
+        interval: Theme.variantCloseInterval(animationDuration)
         onTriggered: {
             if (shouldBeVisible)
                 return;
@@ -145,7 +162,17 @@ Item {
     readonly property var shadowLevel: Theme.elevationLevel3
     readonly property real shadowFallbackOffset: 6
     readonly property real shadowRenderPadding: (root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, Theme.elevationLightDirection, shadowFallbackOffset, 8, 16) : 0
-    readonly property real shadowMotionPadding: animationType === "slide" ? 30 : Math.max(0, animationOffset)
+    readonly property real shadowMotionPadding: {
+        if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode > 0 && Theme.isDirectionalEffect)
+            return 0; // Wayland native overlap mask
+        if (animationType === "slide")
+            return 30;
+        if (Theme.isDirectionalEffect)
+            return Math.max(Math.max(0, animationOffset), Math.max(alignedWidth, alignedHeight) * 0.9);
+        if (Theme.isDepthEffect)
+            return Math.max(Math.max(0, animationOffset), Math.max(alignedWidth, alignedHeight) * 0.35);
+        return Math.max(0, animationOffset);
+    }
     readonly property real shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
     readonly property real alignedWidth: Theme.px(modalWidth, dpr)
     readonly property real alignedHeight: Theme.px(modalHeight, dpr)
@@ -205,9 +232,26 @@ Item {
 
         MouseArea {
             anchors.fill: parent
-            enabled: root.closeOnBackgroundClick && root.shouldBeVisible
+            enabled: !root.useSingleWindow && root.closeOnBackgroundClick && root.shouldBeVisible
             onClicked: root.backgroundClicked()
         }
+
+        Rectangle {
+            anchors.fill: parent
+            z: -1
+            color: "black"
+            opacity: (!root.useSingleWindow && root.useBackground) ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+            visible: opacity > 0
+
+            Behavior on opacity {
+                enabled: root.animationsEnabled && !Theme.isDirectionalEffect
+                NumberAnimation {
+                    duration: Math.round(Theme.variantDuration(root.animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+        }
     }
 
     PanelWindow {
@@ -250,9 +294,12 @@ Item {
             bottom: root.useSingleWindow
         }
 
+        readonly property real actualMarginLeft: root.useSingleWindow ? 0 : Math.max(0, Theme.snap(root.alignedX - shadowBuffer, dpr))
+        readonly property real actualMarginTop: root.useSingleWindow ? 0 : Math.max(0, Theme.snap(root.alignedY - shadowBuffer, dpr))
+
         WlrLayershell.margins {
-            left: root.useSingleWindow ? 0 : Math.max(0, Theme.snap(root.alignedX - shadowBuffer, dpr))
+            left: actualMarginLeft
-            top: root.useSingleWindow ? 0 : Math.max(0, Theme.snap(root.alignedY - shadowBuffer, dpr))
+            top: actualMarginTop
             right: 0
             bottom: 0
         }
@@ -282,13 +329,14 @@ Item {
             anchors.fill: parent
             z: -1
             color: "black"
-            opacity: root.useBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+            opacity: (root.useSingleWindow && root.useBackground) ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
-            visible: root.useBackground
+            visible: opacity > 0
 
             Behavior on opacity {
-                enabled: root.animationsEnabled
+                enabled: root.animationsEnabled && !Theme.isDirectionalEffect
-                DankAnim {
+                NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Math.round(Theme.variantDuration(root.animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
@@ -296,8 +344,8 @@ Item {
 
         Item {
             id: modalContainer
-            x: root.useSingleWindow ? root.alignedX : shadowBuffer
+            x: (root.useSingleWindow ? root.alignedX : (root.alignedX - contentWindow.actualMarginLeft)) + Theme.snap(animX, root.dpr)
-            y: root.useSingleWindow ? root.alignedY : shadowBuffer
+            y: (root.useSingleWindow ? root.alignedY : (root.alignedY - contentWindow.actualMarginTop)) + Theme.snap(animY, root.dpr)
 
             width: root.alignedWidth
             height: root.alignedHeight
@@ -313,45 +361,117 @@ Item {
             }
 
             readonly property bool slide: root.animationType === "slide"
-            readonly property real offsetX: slide ? 15 : 0
+            readonly property bool directionalEffect: Theme.isDirectionalEffect
-            readonly property real offsetY: slide ? -30 : root.animationOffset
+            readonly property bool depthEffect: Theme.isDepthEffect
-
+            readonly property real directionalTravel: Math.max(root.animationOffset, Math.max(root.alignedWidth, root.alignedHeight) * 0.8)
-            property real animX: 0
+            readonly property real depthTravel: Math.max(root.animationOffset * 0.8, 36)
-            property real animY: 0
+            readonly property real customAnchorX: root.alignedX + root.alignedWidth * 0.5
-            property real scaleValue: root.animationScaleCollapsed
+            readonly property real customAnchorY: root.alignedY + root.alignedHeight * 0.5
-
+            readonly property real customDistLeft: customAnchorX
-            onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
+            readonly property real customDistRight: root.screenWidth - customAnchorX
-            onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
+            readonly property real customDistTop: customAnchorY
-
+            readonly property real customDistBottom: root.screenHeight - customAnchorY
-            Connections {
+            readonly property real offsetX: {
-                target: root
+                if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect)
-                function onShouldBeVisibleChanged() {
+                    return 0;
-                    modalContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetX, root.dpr);
+                if (slide && !directionalEffect && !depthEffect)
-                    modalContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetY, root.dpr);
+                    return 15;
-                    modalContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed;
+                if (directionalEffect) {
+                    switch (root.positioning) {
+                    case "top-right":
+                        return 0;
+                    case "custom":
+                        if (customDistLeft <= customDistRight && customDistLeft <= customDistTop && customDistLeft <= customDistBottom)
+                            return -directionalTravel;
+                        if (customDistRight <= customDistTop && customDistRight <= customDistBottom)
+                            return directionalTravel;
+                        return 0;
+                    default:
+                        return 0;
+                    }
                 }
+                if (depthEffect) {
+                    switch (root.positioning) {
+                    case "top-right":
+                        return 0;
+                    case "custom":
+                        if (customDistLeft <= customDistRight && customDistLeft <= customDistTop && customDistLeft <= customDistBottom)
+                            return -depthTravel;
+                        if (customDistRight <= customDistTop && customDistRight <= customDistBottom)
+                            return depthTravel;
+                        return 0;
+                    default:
+                        return 0;
+                    }
+                }
+                return 0;
             }
+            readonly property real offsetY: {
+                if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect)
+                    return 0;
+                if (slide && !directionalEffect && !depthEffect)
+                    return -30;
+                if (directionalEffect) {
+                    switch (root.positioning) {
+                    case "top-right":
+                        return -Math.max(directionalTravel * 0.65, 96);
+                    case "custom":
+                        if (customDistTop <= customDistBottom && customDistTop <= customDistLeft && customDistTop <= customDistRight)
+                            return -directionalTravel;
+                        if (customDistBottom <= customDistLeft && customDistBottom <= customDistRight)
+                            return directionalTravel;
+                        return 0;
+                    default:
+                        // Default to sliding down from top when centered
+                        return -Math.max(directionalTravel, root.screenHeight * 0.24);
+                    }
+                }
+                if (depthEffect) {
+                    switch (root.positioning) {
+                    case "top-right":
+                        return -depthTravel * 0.75;
+                    case "custom":
+                        if (customDistTop <= customDistBottom && customDistTop <= customDistLeft && customDistTop <= customDistRight)
+                            return -depthTravel;
+                        if (customDistBottom <= customDistLeft && customDistBottom <= customDistRight)
+                            return depthTravel;
+                        return depthTravel * 0.45;
+                    default:
+                        return -depthTravel;
+                    }
+                }
+                return root.animationOffset;
+            }
+
+            property real animX: root.shouldBeVisible ? 0 : root.frozenMotionOffsetX
+            property real animY: root.shouldBeVisible ? 0 : root.frozenMotionOffsetY
+
+            readonly property real computedScaleCollapsed: (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect) ? 0.0 : root.animationScaleCollapsed
+            property real scaleValue: root.shouldBeVisible ? 1.0 : computedScaleCollapsed
 
             Behavior on animX {
                 enabled: root.animationsEnabled
-                DankAnim {
+                NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
 
             Behavior on animY {
                 enabled: root.animationsEnabled
-                DankAnim {
+                NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
 
             Behavior on scaleValue {
                 enabled: root.animationsEnabled
-                DankAnim {
+                NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
@@ -367,15 +487,14 @@ Item {
                     id: animatedContent
                     anchors.fill: parent
                     clip: false
-                    opacity: root.shouldBeVisible ? 1 : 0
+                    opacity: Theme.isDirectionalEffect ? 1 : (root.shouldBeVisible ? 1 : 0)
                     scale: modalContainer.scaleValue
-                    x: Theme.snap(modalContainer.animX, root.dpr) + (parent.width - width) * (1 - modalContainer.scaleValue) * 0.5
+                    transformOrigin: Item.Center
-                    y: Theme.snap(modalContainer.animY, root.dpr) + (parent.height - height) * (1 - modalContainer.scaleValue) * 0.5
 
                     Behavior on opacity {
-                        enabled: root.animationsEnabled
+                        enabled: root.animationsEnabled && !Theme.isDirectionalEffect
                         NumberAnimation {
-                            duration: animationDuration
+                            duration: Math.round(Theme.variantDuration(animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
                             easing.type: Easing.BezierSpline
                             easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                         }

quickshell/Modals/DankLauncherV2/Controller.qml

@@ -51,6 +51,15 @@ Item {
         }
     }
 
+    onSearchModeChanged: {
+        if (searchMode === "apps") {
+            _loadAppCategories();
+        } else {
+            appCategory = "";
+            appCategories = [];
+        }
+    }
+
     Connections {
         target: SettingsData
         function onSortAppsAlphabeticallyChanged() {
@@ -65,8 +74,12 @@ Item {
             if (!active)
                 return;
             _clearModeCache();
-            if (!searchQuery && searchMode === "all")
+            if (searchMode === "apps") {
+                _loadAppCategories();
                 performSearch();
+            } else if (!searchQuery && searchMode === "all") {
+                performSearch();
+            }
         }
     }
 
@@ -171,6 +184,8 @@ Item {
     property string activePluginName: ""
     property var activePluginCategories: []
     property string activePluginCategory: ""
+    property string appCategory: ""
+    property var appCategories: []
 
     function getSectionViewMode(sectionId) {
         if (sectionId === "browse_plugins")
@@ -364,6 +379,8 @@ Item {
         activePluginName = "";
         activePluginCategories = [];
         activePluginCategory = "";
+        appCategory = "";
+        appCategories = [];
         pluginFilter = "";
         collapsedSections = {};
         _clearModeCache();
@@ -408,6 +425,19 @@ Item {
         performSearch();
     }
 
+    function setAppCategory(category) {
+        if (appCategory === category)
+            return;
+        appCategory = category;
+        _queryDrivenSearch = true;
+        _clearModeCache();
+        performSearch();
+    }
+
+    function _loadAppCategories() {
+        appCategories = AppSearchService.getAllCategories();
+    }
+
     function setFileSearchType(type) {
         if (fileSearchType === type)
             return;
@@ -592,8 +622,9 @@ Item {
         }
 
         if (searchMode === "apps") {
+            var isCategoryFiltered = appCategory && appCategory !== I18n.tr("All");
             var cachedSections = AppSearchService.getCachedDefaultSections();
-            if (cachedSections && !searchQuery) {
+            if (cachedSections && !searchQuery && !isCategoryFiltered) {
                 var modeCache = _getCachedModeData("apps");
                 if (modeCache) {
                     _applyHighlights(modeCache.sections, "");
@@ -623,9 +654,23 @@ Item {
                 return;
             }
 
-            var apps = searchApps(searchQuery);
+            if (isCategoryFiltered) {
-            for (var i = 0; i < apps.length; i++) {
+                var rawApps = AppSearchService.getAppsInCategory(appCategory);
-                allItems.push(apps[i]);
+                for (var i = 0; i < rawApps.length; i++) {
+                    allItems.push(getOrTransformApp(rawApps[i]));
+                }
+                // Also include core apps (DMS Settings etc.) that match this category
+                var allCoreApps = AppSearchService.getCoreApps("");
+                for (var i = 0; i < allCoreApps.length; i++) {
+                    var coreAppCats = AppSearchService.getCategoriesForApp(allCoreApps[i]);
+                    if (coreAppCats.indexOf(appCategory) !== -1)
+                        allItems.push(transformCoreApp(allCoreApps[i]));
+                }
+            } else {
+                var apps = searchApps(searchQuery);
+                for (var i = 0; i < apps.length; i++) {
+                    allItems.push(apps[i]);
+                }
             }
 
             var scoredItems = Scorer.scoreItems(allItems, searchQuery, getFrecencyForItem);

quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml

@@ -14,6 +14,7 @@ Item {
     property bool spotlightOpen: false
     property bool keyboardActive: false
     property bool contentVisible: false
+    readonly property bool launcherMotionVisible: Theme.isDirectionalEffect ? spotlightOpen : _motionActive
     property var spotlightContent: launcherContentLoader.item
     property bool openedFromOverview: false
     property bool isClosing: false
@@ -23,8 +24,14 @@ Item {
     property string _pendingMode: ""
     readonly property bool unloadContentOnClose: SettingsData.dankLauncherV2UnloadOnClose
 
+    // Animation state — matches DankPopout/DankModal pattern
+    property bool animationsEnabled: true
+    property bool _motionActive: false
+    property real _frozenMotionX: 0
+    property real _frozenMotionY: 0
+
     readonly property bool useHyprlandFocusGrab: CompositorService.useHyprlandFocusGrab
-    readonly property var effectiveScreen: launcherWindow.screen
+    readonly property var effectiveScreen: contentWindow.screen
     readonly property real screenWidth: effectiveScreen?.width ?? 1920
     readonly property real screenHeight: effectiveScreen?.height ?? 1080
     readonly property real dpr: effectiveScreen ? CompositorService.getScreenScale(effectiveScreen) : 1
@@ -78,6 +85,34 @@ Item {
     }
     readonly property int borderWidth: SettingsData.dankLauncherV2BorderEnabled ? SettingsData.dankLauncherV2BorderThickness : 0
 
+    // Shadow padding for the content window (render padding only, no motion padding)
+    readonly property var shadowLevel: Theme.elevationLevel3
+    readonly property real shadowFallbackOffset: 6
+    readonly property real shadowRenderPadding: (Theme.elevationEnabled && SettingsData.modalElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, Theme.elevationLightDirection, shadowFallbackOffset, 8, 16) : 0
+    readonly property real shadowPad: Theme.snap(shadowRenderPadding, dpr)
+    readonly property real alignedWidth: Theme.px(modalWidth, dpr)
+    readonly property real alignedHeight: Theme.px(modalHeight, dpr)
+    readonly property real alignedX: Theme.snap(modalX, dpr)
+    readonly property real alignedY: Theme.snap(modalY, dpr)
+
+    // For directional/depth: window extends from screen top (content slides within)
+    // For standard: small window tightly around the modal + shadow padding
+    readonly property bool _needsExtendedWindow: Theme.isDirectionalEffect || Theme.isDepthEffect
+    // Content window geometry
+    readonly property real _cwMarginLeft: Theme.snap(alignedX - shadowPad, dpr)
+    readonly property real _cwMarginTop: _needsExtendedWindow ? 0 : Theme.snap(alignedY - shadowPad, dpr)
+    readonly property real _cwWidth: alignedWidth + shadowPad * 2
+    readonly property real _cwHeight: {
+        if (Theme.isDirectionalEffect)
+            return screenHeight + shadowPad;
+        if (Theme.isDepthEffect)
+            return alignedY + alignedHeight + shadowPad;
+        return alignedHeight + shadowPad * 2;
+    }
+    // Where the content container sits inside the content window
+    readonly property real _ccX: shadowPad
+    readonly property real _ccY: _needsExtendedWindow ? alignedY : shadowPad
+
     signal dialogClosed
 
     function _ensureContentLoadedAndInitialize(query, mode) {
@@ -97,7 +132,8 @@ Item {
         if (!spotlightContent)
             return;
         contentVisible = true;
-        spotlightContent.searchField.forceActiveFocus();
+        // NOTE: forceActiveFocus() is deliberately NOT called here.
+        // It is deferred to after animation starts to avoid compositor IPC stalls.
 
         if (spotlightContent.searchField) {
             spotlightContent.searchField.text = query;
@@ -130,40 +166,59 @@ Item {
         }
     }
 
-    function show() {
+    function _openCommon(query, mode) {
         closeCleanupTimer.stop();
         isClosing = false;
         openedFromOverview = false;
 
-        var focusedScreen = CompositorService.getFocusedScreen();
+        // Disable animations so the snap is instant
-        if (focusedScreen)
+        animationsEnabled = false;
-            launcherWindow.screen = focusedScreen;
 
-        spotlightOpen = true;
+        // Freeze the collapsed offsets (they depend on height which could change)
-        keyboardActive = true;
+        _frozenMotionX = contentContainer ? contentContainer.collapsedMotionX : 0;
+        _frozenMotionY = contentContainer ? contentContainer.collapsedMotionY : (Theme.isDirectionalEffect ? Math.max(root.screenHeight - root._ccY + root.shadowPad, Theme.effectAnimOffset * 1.1) : -Theme.effectAnimOffset);
+
+        var focusedScreen = CompositorService.getFocusedScreen();
+        if (focusedScreen) {
+            backgroundWindow.screen = focusedScreen;
+            contentWindow.screen = focusedScreen;
+        }
+
+        // _motionActive = false ensures motionX/Y snap to frozen collapsed position
+        _motionActive = false;
+
+        // Make windows visible but do NOT request keyboard focus yet
         ModalManager.openModal(root);
+        spotlightOpen = true;
+        backgroundWindow.visible = true;
+        contentWindow.visible = true;
         if (useHyprlandFocusGrab)
             focusGrab.active = true;
 
-        _ensureContentLoadedAndInitialize("", "");
+        // Load content and initialize (but no forceActiveFocus — that's deferred)
+        _ensureContentLoadedAndInitialize(query || "", mode || "");
+
+        // Frame 1: enable animations and trigger enter motion
+        Qt.callLater(() => {
+            root.animationsEnabled = true;
+            root._motionActive = true;
+
+            // Frame 2: request keyboard focus + activate search field
+            // Double-deferred to avoid compositor IPC competing with animation frames
+            Qt.callLater(() => {
+                root.keyboardActive = true;
+                if (root.spotlightContent && root.spotlightContent.searchField)
+                    root.spotlightContent.searchField.forceActiveFocus();
+            });
+        });
+    }
+
+    function show() {
+        _openCommon("", "");
     }
 
     function showWithQuery(query) {
-        closeCleanupTimer.stop();
+        _openCommon(query, "");
-        isClosing = false;
-        openedFromOverview = false;
-
-        var focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen)
-            launcherWindow.screen = focusedScreen;
-
-        spotlightOpen = true;
-        keyboardActive = true;
-        ModalManager.openModal(root);
-        if (useHyprlandFocusGrab)
-            focusGrab.active = true;
-
-        _ensureContentLoadedAndInitialize(query, "");
     }
 
     function hide() {
@@ -171,13 +226,17 @@ Item {
             return;
         openedFromOverview = false;
         isClosing = true;
-        contentVisible = false;
+        // For directional effects, defer contentVisible=false so content stays rendered during exit slide
+        if (!Theme.isDirectionalEffect)
+            contentVisible = false;
+
+        // Trigger exit animation — Behaviors will animate motionX/Y to frozen collapsed position
+        _motionActive = false;
 
         keyboardActive = false;
         spotlightOpen = false;
         focusGrab.active = false;
         ModalManager.closeModal(root);
-
         closeCleanupTimer.start();
     }
 
@@ -186,21 +245,7 @@ Item {
     }
 
     function showWithMode(mode) {
-        closeCleanupTimer.stop();
+        _openCommon("", mode);
-        isClosing = false;
-        openedFromOverview = false;
-
-        var focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen)
-            launcherWindow.screen = focusedScreen;
-
-        spotlightOpen = true;
-        keyboardActive = true;
-        ModalManager.openModal(root);
-        if (useHyprlandFocusGrab)
-            focusGrab.active = true;
-
-        _ensureContentLoadedAndInitialize("", mode);
     }
 
     function toggleWithMode(mode) {
@@ -221,10 +266,13 @@ Item {
 
     Timer {
         id: closeCleanupTimer
-        interval: Theme.modalAnimationDuration + 50
+        interval: Theme.variantCloseInterval(Theme.modalAnimationDuration)
         repeat: false
         onTriggered: {
             isClosing = false;
+            contentVisible = false;
+            contentWindow.visible = false;
+            backgroundWindow.visible = false;
             if (root.unloadContentOnClose)
                 launcherContentLoader.active = false;
             dialogClosed();
@@ -242,7 +290,7 @@ Item {
 
     HyprlandFocusGrab {
         id: focusGrab
-        windows: [launcherWindow]
+        windows: [contentWindow]
         active: false
 
         onCleared: {
@@ -267,7 +315,7 @@ Item {
             if (Quickshell.screens.length === 0)
                 return;
 
-            const screen = launcherWindow.screen;
+            const screen = contentWindow.screen;
             const screenName = screen?.name;
 
             let needsReset = !screen || !screenName;
@@ -289,35 +337,31 @@ Item {
                 return;
 
             root._windowEnabled = false;
-            launcherWindow.screen = newScreen;
+            backgroundWindow.screen = newScreen;
+            contentWindow.screen = newScreen;
             Qt.callLater(() => {
                 root._windowEnabled = true;
             });
         }
     }
 
+    // ── Background window: fullscreen, handles darkening + click-to-dismiss ──
     PanelWindow {
-        id: launcherWindow
+        id: backgroundWindow
-        visible: root._windowEnabled && (spotlightOpen || isClosing)
+        visible: false
         color: "transparent"
-        exclusionMode: ExclusionMode.Ignore
 
-        WlrLayershell.namespace: "dms:spotlight"
+        WlrLayershell.namespace: "dms:spotlight:bg"
-        WlrLayershell.layer: {
+        WlrLayershell.layer: WlrLayershell.Top
-            switch (Quickshell.env("DMS_MODAL_LAYER")) {
+        WlrLayershell.exclusiveZone: -1
-            case "bottom":
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-                console.error("DankModal: 'bottom' layer is not valid for modals. Defaulting to 'top' layer.");
+
-                return WlrLayershell.Top;
+        WlrLayershell.margins {
-            case "background":
+            top: contentContainer.dockTop ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 0 ? Theme.px(42, root.dpr) : 0)
-                console.error("DankModal: 'background' layer is not valid for modals. Defaulting to 'top' layer.");
+            bottom: contentContainer.dockBottom ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 1 ? Theme.px(42, root.dpr) : 0)
-                return WlrLayershell.Top;
+            left: contentContainer.dockLeft ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 2 ? Theme.px(42, root.dpr) : 0)
-            case "overlay":
+            right: contentContainer.dockRight ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 3 ? Theme.px(42, root.dpr) : 0)
-                return WlrLayershell.Overlay;
-            default:
-                return WlrLayershell.Top;
-            }
         }
-        WlrLayershell.keyboardFocus: keyboardActive ? (root.useHyprlandFocusGrab ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.Exclusive) : WlrKeyboardFocus.None
 
         anchors {
             top: true
@@ -327,11 +371,11 @@ Item {
         }
 
         mask: Region {
-            item: spotlightOpen ? fullScreenMask : null
+            item: (spotlightOpen || isClosing) ? bgFullScreenMask : null
         }
 
         Item {
-            id: fullScreenMask
+            id: bgFullScreenMask
             anchors.fill: parent
         }
 
@@ -339,13 +383,14 @@ Item {
             id: backgroundDarken
             anchors.fill: parent
             color: "black"
-            opacity: contentVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
+            opacity: launcherMotionVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
-            visible: contentVisible || opacity > 0
+            visible: launcherMotionVisible || opacity > 0
 
             Behavior on opacity {
+                enabled: root.animationsEnabled && !Theme.isDirectionalEffect
                 DankAnim {
-                    duration: Theme.modalAnimationDuration
+                    duration: Math.round(Theme.variantDuration(Theme.modalAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
-                    easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                    easing.bezierCurve: launcherMotionVisible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                 }
             }
         }
@@ -353,88 +398,240 @@ Item {
         MouseArea {
             anchors.fill: parent
             enabled: spotlightOpen
-            onClicked: mouse => {
+            onClicked: root.hide()
-                var contentX = modalContainer.x;
+        }
-                var contentY = modalContainer.y;
+    }
-                var contentW = modalContainer.width;
-                var contentH = modalContainer.height;
 
-                if (mouse.x < contentX || mouse.x > contentX + contentW || mouse.y < contentY || mouse.y > contentY + contentH) {
+    // ── Content window: SMALL, positioned with margins — only renders the modal area ──
-                    root.hide();
+    PanelWindow {
-                }
+        id: contentWindow
+        visible: false
+        color: "transparent"
+
+        WlrLayershell.namespace: "dms:spotlight"
+        WlrLayershell.layer: {
+            switch (Quickshell.env("DMS_MODAL_LAYER")) {
+            case "bottom":
+                console.error("DankLauncherV2Modal: 'bottom' layer is not valid for modals. Defaulting to 'top' layer.");
+                return WlrLayershell.Top;
+            case "background":
+                console.error("DankLauncherV2Modal: 'background' layer is not valid for modals. Defaulting to 'top' layer.");
+                return WlrLayershell.Top;
+            case "overlay":
+                return WlrLayershell.Overlay;
+            default:
+                return WlrLayershell.Top;
             }
         }
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: keyboardActive ? (root.useHyprlandFocusGrab ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.Exclusive) : WlrKeyboardFocus.None
+
+        anchors {
+            left: true
+            top: true
+        }
+
+        WlrLayershell.margins {
+            left: root._cwMarginLeft
+            top: root._cwMarginTop
+        }
+
+        implicitWidth: root._cwWidth
+        implicitHeight: root._cwHeight
+
+        mask: Region {
+            item: contentInputMask
+        }
 
         Item {
-            id: modalContainer
+            id: contentInputMask
-            x: root.modalX
+            visible: false
-            y: root.modalY
+            x: contentContainer.x + contentWrapper.x
-            width: root.modalWidth
+            y: contentContainer.y + contentWrapper.y
-            height: root.modalHeight
+            width: root.alignedWidth
-            visible: contentVisible || opacity > 0
+            height: root.alignedHeight
-
-            opacity: contentVisible ? 1 : 0
-            scale: contentVisible ? 1 : 0.96
-            transformOrigin: Item.Center
-
-            Behavior on opacity {
-                DankAnim {
-                    duration: Theme.modalAnimationDuration
-                    easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                }
-            }
-
-            Behavior on scale {
-                DankAnim {
-                    duration: Theme.modalAnimationDuration
-                    easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                }
-            }
-
-            ElevationShadow {
-                id: launcherShadowLayer
-                anchors.fill: parent
-                level: Theme.elevationLevel3
-                fallbackOffset: 6
-                targetColor: root.backgroundColor
-                borderColor: root.borderColor
-                borderWidth: root.borderWidth
-                targetRadius: root.cornerRadius
-                shadowEnabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onPressed: mouse => mouse.accepted = true
-            }
-
-            FocusScope {
-                anchors.fill: parent
-                focus: keyboardActive
-
-                Loader {
-                    id: launcherContentLoader
-                    anchors.fill: parent
-                    active: !root.unloadContentOnClose || root.spotlightOpen || root.isClosing || root.contentVisible || root._pendingInitialize
-                    asynchronous: false
-                    sourceComponent: LauncherContent {
-                        focus: true
-                        parentModal: root
-                    }
-
-                    onLoaded: {
-                        if (root._pendingInitialize) {
-                            root._initializeAndShow(root._pendingQuery, root._pendingMode);
-                            root._pendingInitialize = false;
-                        }
-                    }
-                }
-
-                Keys.onEscapePressed: event => {
-                    root.hide();
-                    event.accepted = true;
-                }
-            }
         }
-    }
+
+        Item {
+            id: contentContainer
+
+            // For directional/depth: contentContainer is at alignedY from window top (window starts at screen top)
+            // For standard: contentContainer is at shadowPad from window top (window starts near modal)
+            x: root._ccX
+            y: root._ccY
+            width: root.alignedWidth
+            height: root.alignedHeight
+
+            readonly property int dockEdge: typeof SettingsData !== "undefined" ? SettingsData.dockPosition : 1
+            readonly property bool dockTop: dockEdge === 0
+            readonly property bool dockBottom: dockEdge === 1
+            readonly property bool dockLeft: dockEdge === 2
+            readonly property bool dockRight: dockEdge === 3
+
+            readonly property real dockThickness: typeof SettingsData !== "undefined" && SettingsData.showDock ? Theme.px(SettingsData.dockIconSize + (SettingsData.dockMargin * 2) + SettingsData.dockSpacing + 8, root.dpr) : Theme.px(60, root.dpr)
+
+            readonly property bool directionalEffect: Theme.isDirectionalEffect
+            readonly property bool depthEffect: Theme.isDepthEffect
+            readonly property real collapsedMotionX: {
+                if (directionalEffect) {
+                    if (dockLeft)
+                        return -(root._ccX + root.alignedWidth + Theme.effectAnimOffset);
+                    if (dockRight)
+                        return root.screenWidth - root._ccX + Theme.effectAnimOffset;
+                }
+                if (depthEffect)
+                    return Theme.effectAnimOffset * 0.25;
+                return 0;
+            }
+            readonly property real collapsedMotionY: {
+                if (directionalEffect) {
+                    if (dockTop)
+                        return -(root._ccY + root.alignedHeight + Theme.effectAnimOffset);
+                    if (dockBottom)
+                        return root.screenHeight - root._ccY + root.shadowPad + Theme.effectAnimOffset;
+                    return 0;
+                }
+                if (depthEffect)
+                    return -Math.max(Theme.effectAnimOffset * 0.85, 34);
+                return -Math.max((root.shadowPad || 0) + Theme.effectAnimOffset, 40);
+            }
+
+            // animX/animY are Behavior-animated — DankPopout pattern
+            property real animX: 0
+            property real animY: 0
+            property real scaleValue: Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 ? Theme.effectScaleCollapsed : (Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed)
+
+            Component.onCompleted: {
+                animX = Theme.snap(root._motionActive ? 0 : collapsedMotionX, root.dpr);
+                animY = Theme.snap(root._motionActive ? 0 : collapsedMotionY, root.dpr);
+                scaleValue = root._motionActive ? 1.0 : (Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 ? Theme.effectScaleCollapsed : (Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed));
+            }
+
+            Connections {
+                target: root
+                function on_MotionActiveChanged() {
+                    contentContainer.animX = Theme.snap(root._motionActive ? 0 : root._frozenMotionX, root.dpr);
+                    contentContainer.animY = Theme.snap(root._motionActive ? 0 : root._frozenMotionY, root.dpr);
+                    contentContainer.scaleValue = root._motionActive ? 1.0 : (Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 ? Theme.effectScaleCollapsed : (Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed));
+                }
+            }
+
+            Behavior on animX {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: Theme.variantDuration(Theme.modalAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                }
+            }
+
+            Behavior on animY {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: Theme.variantDuration(Theme.modalAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                }
+            }
+
+            Behavior on scaleValue {
+                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2))
+                DankAnim {
+                    duration: Theme.variantDuration(Theme.modalAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                }
+            }
+
+            Item {
+                id: directionalClipMask
+                readonly property bool shouldClip: Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode > 0
+                readonly property real clipOversize: 2000
+
+                clip: shouldClip
+
+                x: shouldClip ? (contentContainer.dockRight ? -clipOversize : (contentContainer.dockLeft ? contentContainer.dockThickness - root._ccX : -clipOversize)) : 0
+                y: shouldClip ? (contentContainer.dockBottom ? -clipOversize : (contentContainer.dockTop ? contentContainer.dockThickness - root._ccY : -clipOversize)) : 0
+
+                width: shouldClip ? parent.width + clipOversize + (contentContainer.dockRight ? (root.screenWidth - contentContainer.dockThickness - root._ccX - parent.width) : (contentContainer.dockLeft ? clipOversize : clipOversize)) : parent.width
+                height: shouldClip ? parent.height + clipOversize + (contentContainer.dockBottom ? (root.screenHeight - contentContainer.dockThickness - root._ccY - parent.height) : (contentContainer.dockTop ? clipOversize : clipOversize)) : parent.height
+
+                Item {
+                    id: aligner
+                    x: directionalClipMask.x !== 0 ? -directionalClipMask.x : 0
+                    y: directionalClipMask.y !== 0 ? -directionalClipMask.y : 0
+                    width: contentContainer.width
+                    height: contentContainer.height
+
+                    // Shadow mirrors contentWrapper position/scale/opacity
+                    ElevationShadow {
+                        id: launcherShadowLayer
+                        width: parent.width
+                        height: parent.height
+                        opacity: contentWrapper.opacity
+                        scale: contentWrapper.scale
+                        x: contentWrapper.x
+                        y: contentWrapper.y
+                        level: root.shadowLevel
+                        fallbackOffset: root.shadowFallbackOffset
+                        targetColor: root.backgroundColor
+                        borderColor: root.borderColor
+                        borderWidth: root.borderWidth
+                        targetRadius: root.cornerRadius
+                        shadowEnabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+                    }
+
+                    // contentWrapper moves inside static contentContainer — DankPopout pattern
+                    Item {
+                        id: contentWrapper
+                        width: parent.width
+                        height: parent.height
+                        opacity: Theme.isDirectionalEffect ? 1 : (launcherMotionVisible ? 1 : 0)
+                        visible: opacity > 0
+                        scale: contentContainer.scaleValue
+                        x: Theme.snap(contentContainer.animX + (parent.width - width) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
+                        y: Theme.snap(contentContainer.animY + (parent.height - height) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
+
+                        Behavior on opacity {
+                            enabled: root.animationsEnabled && !Theme.isDirectionalEffect
+                            DankAnim {
+                                duration: Math.round(Theme.variantDuration(Theme.modalAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
+                                easing.bezierCurve: launcherMotionVisible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onPressed: mouse => mouse.accepted = true
+                        }
+
+                        FocusScope {
+                            anchors.fill: parent
+                            focus: keyboardActive
+
+                            Loader {
+                                id: launcherContentLoader
+                                anchors.fill: parent
+                                active: !root.unloadContentOnClose || root.spotlightOpen || root.isClosing || root.contentVisible || root._pendingInitialize
+                                asynchronous: false
+                                sourceComponent: LauncherContent {
+                                    focus: true
+                                    parentModal: root
+                                }
+
+                                onLoaded: {
+                                    if (root._pendingInitialize) {
+                                        root._initializeAndShow(root._pendingQuery, root._pendingMode);
+                                        root._pendingInitialize = false;
+                                    }
+                                }
+                            }
+
+                            Keys.onEscapePressed: event => {
+                                root.hide();
+                                event.accepted = true;
+                            }
+                        }
+                    } // contentWrapper
+                } // aligner
+            } // directionalClipMask
+        } // contentContainer
+    } // PanelWindow
 }

quickshell/Modals/DankLauncherV2/LauncherContent.qml

@@ -86,7 +86,7 @@ FocusScope {
 
     Controller {
         id: controller
-        active: root.parentModal?.spotlightOpen ?? true
+        active: root.parentModal ? (root.parentModal.spotlightOpen || root.parentModal.isClosing) : true
         viewModeContext: root.viewModeContext
 
         onItemExecuted: {
@@ -462,7 +462,7 @@ FocusScope {
                     showClearButton: true
                     textColor: Theme.surfaceText
                     font.pixelSize: Theme.fontSizeLarge
-                    enabled: root.parentModal ? root.parentModal.spotlightOpen : true
+                    enabled: root.parentModal ? (root.parentModal.spotlightOpen || root.parentModal.isClosing) : true
                     placeholderText: ""
                     ignoreUpDownKeys: true
                     ignoreTabKeys: true
@@ -496,8 +496,9 @@ FocusScope {
             Row {
                 id: categoryRow
                 width: parent.width
-                height: controller.activePluginCategories.length > 0 ? 36 : 0
+                readonly property bool showPluginCategories: controller.activePluginCategories.length > 0
-                visible: controller.activePluginCategories.length > 0
+                height: showPluginCategories ? 36 : 0
+                visible: showPluginCategories
                 spacing: Theme.spacingS
 
                 clip: true
@@ -511,6 +512,7 @@ FocusScope {
 
                 DankDropdown {
                     id: categoryDropdown
+                    visible: categoryRow.showPluginCategories
                     width: Math.min(200, parent.width)
                     compactMode: true
                     dropdownWidth: 200
@@ -694,7 +696,13 @@ FocusScope {
             Item {
                 width: parent.width
                 height: parent.height - searchField.height - categoryRow.height - fileFilterRow.height - actionPanel.height - Theme.spacingXS * ((categoryRow.visible ? 1 : 0) + (fileFilterRow.visible ? 1 : 0) + 2)
-                opacity: root.parentModal?.isClosing ? 0 : 1
+                opacity: {
+                    if (!root.parentModal)
+                        return 1;
+                    if (Theme.isDirectionalEffect && root.parentModal.isClosing)
+                        return 1;
+                    return root.parentModal.isClosing ? 0 : 1;
+                }
 
                 ResultsList {
                     id: resultsList

quickshell/Modals/DankLauncherV2/SectionHeader.qml

@@ -1,7 +1,9 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import QtQuick.Controls
 import qs.Common
+import qs.Services
 import qs.Widgets
 
 Rectangle {
@@ -35,21 +37,190 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         spacing: Theme.spacingS
 
+        // Whether the apps category picker should replace the plain title
+        readonly property bool hasAppCategories: root.section?.id === "apps" && (root.controller?.appCategories?.length ?? 0) > 0
+
         DankIcon {
             anchors.verticalCenter: parent.verticalCenter
+            // Hide section icon when the category chip already shows one
+            visible: !leftContent.hasAppCategories
             name: root.section?.icon ?? "folder"
             size: 16
             color: Theme.surfaceVariantText
         }
 
+        // Plain title — hidden when the category chip is shown
         StyledText {
             anchors.verticalCenter: parent.verticalCenter
+            visible: !leftContent.hasAppCategories
             text: root.section?.title ?? ""
             font.pixelSize: Theme.fontSizeSmall
             font.weight: Font.Medium
             color: Theme.surfaceVariantText
         }
 
+        // Compact inline category chip — only visible on the apps section
+        Item {
+            id: categoryChip
+            visible: leftContent.hasAppCategories
+            anchors.verticalCenter: parent.verticalCenter
+            // Size to content with a fixed-min width so it doesn't jump around
+            width: chipRow.implicitWidth + Theme.spacingM * 2
+            height: 24
+
+            readonly property string currentCategory: root.controller?.appCategory || (root.controller?.appCategories?.length > 0 ? root.controller.appCategories[0] : "")
+            readonly property var iconMap: {
+                const cats = root.controller?.appCategories ?? [];
+                const m = {};
+                cats.forEach(c => { m[c] = AppSearchService.getCategoryIcon(c); });
+                return m;
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                radius: Theme.cornerRadius
+                color: chipArea.containsMouse || categoryPopup.visible ? Theme.surfaceContainerHigh : "transparent"
+                border.color: categoryPopup.visible ? Theme.primary : Theme.outlineMedium
+                border.width: categoryPopup.visible ? 2 : 1
+            }
+
+            Row {
+                id: chipRow
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    name: categoryChip.iconMap[categoryChip.currentCategory] ?? "apps"
+                    size: 14
+                    color: Theme.surfaceText
+                }
+
+                StyledText {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: categoryChip.currentCategory
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                }
+
+                DankIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    name: categoryPopup.visible ? "expand_less" : "expand_more"
+                    size: 14
+                    color: Theme.surfaceVariantText
+                }
+            }
+
+            MouseArea {
+                id: chipArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (categoryPopup.visible) {
+                        categoryPopup.close();
+                    } else {
+                        const pos = categoryChip.mapToItem(Overlay.overlay, 0, 0);
+                        categoryPopup.x = pos.x;
+                        categoryPopup.y = pos.y + categoryChip.height + 4;
+                        categoryPopup.open();
+                    }
+                }
+            }
+
+            Popup {
+                id: categoryPopup
+                parent: Overlay.overlay
+                width: Math.max(categoryChip.width, 180)
+                padding: 0
+                modal: true
+                dim: false
+                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+                background: Rectangle { color: "transparent" }
+
+                contentItem: Rectangle {
+                    radius: Theme.cornerRadius
+                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
+                    border.color: Theme.primary
+                    border.width: 2
+
+                    ElevationShadow {
+                        anchors.fill: parent
+                        z: -1
+                        level: Theme.elevationLevel2
+                        fallbackOffset: 4
+                        targetRadius: parent.radius
+                        targetColor: parent.color
+                        borderColor: parent.border.color
+                        borderWidth: parent.border.width
+                        shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                    }
+
+                    ListView {
+                        id: categoryList
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingS
+                        model: root.controller?.appCategories ?? []
+                        spacing: 2
+                        clip: true
+                        interactive: contentHeight > height
+                        implicitHeight: contentHeight
+
+                        delegate: Rectangle {
+                            id: catDelegate
+                            required property string modelData
+                            required property int index
+                            width: categoryList.width
+                            height: 32
+                            radius: Theme.cornerRadius
+                            readonly property bool isCurrent: categoryChip.currentCategory === modelData
+                            color: isCurrent ? Theme.primaryHover : catArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+
+                            Row {
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.leftMargin: Theme.spacingS
+                                anchors.rightMargin: Theme.spacingS
+                                spacing: Theme.spacingS
+
+                                DankIcon {
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    name: categoryChip.iconMap[catDelegate.modelData] ?? "apps"
+                                    size: 16
+                                    color: catDelegate.isCurrent ? Theme.primary : Theme.surfaceText
+                                }
+
+                                StyledText {
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    text: catDelegate.modelData
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: catDelegate.isCurrent ? Theme.primary : Theme.surfaceText
+                                    font.weight: catDelegate.isCurrent ? Font.Medium : Font.Normal
+                                }
+                            }
+
+                            MouseArea {
+                                id: catArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    if (root.controller)
+                                        root.controller.setAppCategory(catDelegate.modelData);
+                                    categoryPopup.close();
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Size to list content, cap at 10 visible items
+                height: Math.min((root.controller?.appCategories?.length ?? 0) * 34, 10 * 34) + Theme.spacingS * 2 + 4
+            }
+        }
+
         StyledText {
             anchors.verticalCenter: parent.verticalCenter
             text: root.section?.items?.length ?? 0

quickshell/Modules/AppDrawer/AppDrawerPopout.qml

@@ -106,7 +106,7 @@ DankPopout {
             QtObject {
                 id: modalAdapter
                 property bool spotlightOpen: appDrawerPopout.shouldBeVisible
-                property bool isClosing: false
+                property bool isClosing: appDrawerPopout.isClosing
 
                 function hide() {
                     appDrawerPopout.close();

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -126,9 +126,11 @@ DankPopout {
                 z: 5000
 
                 Behavior on opacity {
+                    enabled: !Theme.isDirectionalEffect
                     NumberAnimation {
-                        duration: 200
+                        duration: Theme.shortDuration
-                        easing.type: Easing.OutCubic
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: root.shouldBeVisible ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
                     }
                 }
             }

quickshell/Modules/DankBar/DankBarContent.qml

@@ -1117,6 +1117,7 @@ Item {
                 if (!notificationCenterLoader.item) {
                     return;
                 }
+                notificationCenterLoader.item.triggerScreen = barWindow.screen;
                 const effectiveBarConfig = topBarContent.barConfig;
                 const barPosition = barWindow.axis?.edge === "left" ? 2 : (barWindow.axis?.edge === "right" ? 3 : (barWindow.axis?.edge === "top" ? 0 : 1));
                 if (notificationCenterLoader.item.setBarContext) {

quickshell/Modules/DankBar/DankBarWindow.qml

@@ -566,8 +566,9 @@ PanelWindow {
     readonly property var _leftSection: topBarContent ? (barWindow.isVertical ? topBarContent.vLeftSection : topBarContent.hLeftSection) : null
     readonly property var _centerSection: topBarContent ? (barWindow.isVertical ? topBarContent.vCenterSection : topBarContent.hCenterSection) : null
     readonly property var _rightSection: topBarContent ? (barWindow.isVertical ? topBarContent.vRightSection : topBarContent.hRightSection) : null
+    readonly property real _revealProgress: topBarSlide.x + topBarSlide.y
 
-    function sectionRect(section, isCenter) {
+    function sectionRect(section, isCenter, _dep) {
         if (!section)
             return {
                 "x": 0,
@@ -596,7 +597,7 @@ PanelWindow {
         item: clickThroughEnabled ? null : inputMask
 
         Region {
-            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._leftSection, false) : {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._leftSection, false, barWindow._revealProgress) : {
                 "x": 0,
                 "y": 0,
                 "w": 0,
@@ -609,7 +610,7 @@ PanelWindow {
         }
 
         Region {
-            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._centerSection, true) : {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._centerSection, true, barWindow._revealProgress) : {
                 "x": 0,
                 "y": 0,
                 "w": 0,
@@ -622,7 +623,7 @@ PanelWindow {
         }
 
         Region {
-            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._rightSection, false) : {
+            readonly property var r: barWindow.clickThroughEnabled ? barWindow.sectionRect(barWindow._rightSection, false, barWindow._revealProgress) : {
                 "x": 0,
                 "y": 0,
                 "w": 0,
@@ -633,6 +634,14 @@ PanelWindow {
             width: r.w
             height: r.h
         }
+
+        Region {
+            readonly property bool active: barWindow.clickThroughEnabled && !inputMask.showing
+            x: active ? inputMask.x : 0
+            y: active ? inputMask.y : 0
+            width: active ? inputMask.width : 0
+            height: active ? inputMask.height : 0
+        }
     }
 
     Item {
@@ -645,7 +654,7 @@ PanelWindow {
 
         Timer {
             id: revealHold
-            interval: barConfig?.autoHideDelay ?? 250
+            interval: barWindow.clickThroughEnabled ? Math.max((barConfig?.autoHideDelay ?? 250) * 6, 1500) : (barConfig?.autoHideDelay ?? 250)
             repeat: false
             onTriggered: {
                 if (!topBarMouseArea.containsMouse && !topBarCore.hasActivePopout) {
@@ -703,7 +712,6 @@ PanelWindow {
         Connections {
             function onBarConfigChanged() {
                 topBarCore.autoHide = barConfig?.autoHide ?? false;
-                revealHold.interval = barConfig?.autoHideDelay ?? 250;
             }
 
             target: rootWindow

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -16,7 +16,6 @@ DankPopout {
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 500
     triggerWidth: 80
     screen: triggerScreen
-    shouldBeVisible: dashVisible
 
     property bool __focusArmed: false
     property bool __contentReady: false

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -44,6 +44,43 @@ Item {
 
     property int __volumeHoverCount: 0
 
+    readonly property bool directionalEffect: Theme.isDirectionalEffect
+    readonly property bool depthEffect: Theme.isDepthEffect
+
+    function panelMotionX(panelWidth, active) {
+        if (active)
+            return 0;
+        if (directionalEffect) {
+            const travel = Math.max(Theme.effectAnimOffset, panelWidth * 0.85);
+            return isRightEdge ? -travel : travel;
+        }
+        if (depthEffect) {
+            const travel = Math.max(Theme.effectAnimOffset * 0.7, panelWidth * 0.32);
+            return isRightEdge ? -travel : travel;
+        }
+        return 0;
+    }
+
+    function panelMotionY(panelType, panelHeight, active) {
+        if (active)
+            return 0;
+        if (directionalEffect) {
+            if (panelType === 2)
+                return panelHeight * 0.08;
+            if (panelType === 3)
+                return -panelHeight * 0.08;
+            return 0;
+        }
+        if (depthEffect) {
+            if (panelType === 2)
+                return panelHeight * 0.04;
+            if (panelType === 3)
+                return -panelHeight * 0.04;
+            return 0;
+        }
+        return 0;
+    }
+
     function volumeAreaEntered() {
         __volumeHoverCount++;
         panelEntered();
@@ -62,30 +99,47 @@ Item {
         visible: dropdownType === 1 && volumeAvailable
         width: 60
         height: 180
-        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 1)
-        y: anchorPos.y - height / 2
+        y: anchorPos.y - height / 2 + panelMotionY(1, height, dropdownType === 1)
         radius: Theme.cornerRadius * 2
         color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
         border.width: 1
 
-        opacity: dropdownType === 1 ? 1 : 0
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : 0)
-        scale: dropdownType === 1 ? 1 : 0.96
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
+            enabled: !Theme.isDirectionalEffect
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            DankAnim {
-                easing.type: Easing.BezierSpline
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1) * Theme.variantOpacityDurationScale)
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on x {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on y {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
@@ -197,33 +251,50 @@ Item {
 
     Rectangle {
         id: audioDevicesPanel
-        visible: dropdownType === 2
+        visible: dropdownType === 2 && activePlayer !== null
         width: 280
         height: Math.max(200, Math.min(280, availableDevices.length * 50 + 100))
-        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 2)
-        y: anchorPos.y - height / 2
+        y: anchorPos.y - height / 2 + panelMotionY(2, height, dropdownType === 2)
         radius: Theme.cornerRadius * 2
         color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
         border.width: 2
 
-        opacity: dropdownType === 2 ? 1 : 0
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : 0)
-        scale: dropdownType === 2 ? 1 : 0.96
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
+            enabled: !Theme.isDirectionalEffect
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            DankAnim {
-                easing.type: Easing.BezierSpline
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2) * Theme.variantOpacityDurationScale)
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on x {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on y {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
@@ -354,30 +425,47 @@ Item {
         visible: dropdownType === 3
         width: 240
         height: Math.max(180, Math.min(240, (allPlayers?.length || 0) * 50 + 80))
-        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 3)
-        y: anchorPos.y - height / 2
+        y: anchorPos.y - height / 2 + panelMotionY(3, height, dropdownType === 3)
         radius: Theme.cornerRadius * 2
         color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
         border.width: 2
 
-        opacity: dropdownType === 3 ? 1 : 0
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : 0)
-        scale: dropdownType === 3 ? 1 : 0.96
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
+            enabled: !Theme.isDirectionalEffect
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            DankAnim {
-                easing.type: Easing.BezierSpline
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3) * Theme.variantOpacityDurationScale)
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on x {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            }
+        }
+
+        Behavior on y {
+            NumberAnimation {
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3)
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 

quickshell/Modules/Dock/Dock.qml

@@ -447,9 +447,8 @@ Variants {
 
                 height: {
                     if (dock.isVertical) {
-                        if (!dock.reveal)
+                        // Keep the taller hit area regardless of the reveal state to prevent shrinking loop
-                            return Math.min(Math.max(dockBackground.height + 64, 200), screenHeight * 0.5);
+                        return Math.min(Math.max(dockBackground.height + 64, 200), screenHeight * 0.5);
-                        return Math.min(dockBackground.height + 8 + dock.borderThickness, maxDockHeight);
                     }
                     return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
                 }
@@ -457,8 +456,7 @@ Variants {
                     if (dock.isVertical) {
                         return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
                     }
-                    if (!dock.reveal)
+                    // Keep the wider hit area regardless of the reveal state to prevent shrinking loop
-                        return Math.min(Math.max(dockBackground.width + 64, 200), screenWidth * 0.5);
                     return Math.min(dockBackground.width + 8 + dock.borderThickness, maxDockWidth);
                 }
                 anchors {

quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -39,11 +39,9 @@ DankPopout {
         }
     }
 
-    popupWidth: triggerScreen ? Math.min(500, Math.max(380, triggerScreen.width - 48)) : 400
+    popupWidth: 400
     popupHeight: stablePopupHeight
     positioning: ""
-    animationScaleCollapsed: 0.94
-    animationOffset: 0
     suspendShadowWhileResizing: false
 
     screen: triggerScreen

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -24,6 +24,29 @@ PanelWindow {
     property real _lastReportedAlignedHeight: -1
     property real _storedTopMargin: 0
     property real _storedBottomMargin: 0
+    readonly property bool directionalEffect: Theme.isDirectionalEffect
+    readonly property bool depthEffect: Theme.isDepthEffect
+    readonly property real entryTravel: {
+        const base = Math.abs(Theme.effectAnimOffset);
+        if (directionalEffect) {
+            if (isCenterPosition)
+                return Math.max(base, Math.round(content.height * 1.1));
+            return Math.max(base, Math.round(content.width * 0.95));
+        }
+        if (depthEffect)
+            return Math.max(base, 44);
+        return base;
+    }
+    readonly property real exitTravel: {
+        if (directionalEffect) {
+            if (isCenterPosition)
+                return content.height + entryTravel;
+            return content.width + entryTravel;
+        }
+        if (depthEffect)
+            return Math.round(entryTravel * 1.35);
+        return Anims.slidePx;
+    }
     readonly property string clearText: I18n.tr("Dismiss")
     property bool descriptionExpanded: false
     readonly property bool hasExpandableBody: (notificationData?.htmlBody || "").replace(/<[^>]*>/g, "").trim().length > 0
@@ -137,9 +160,9 @@ PanelWindow {
         enabled: !exiting && !_isDestroying
         NumberAnimation {
             id: implicitHeightAnim
-            duration: descriptionExpanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration
+            duration: Theme.variantDuration(descriptionExpanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration, descriptionExpanded)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasized
+            easing.bezierCurve: descriptionExpanded ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
         }
     }
 
@@ -911,9 +934,9 @@ PanelWindow {
                     if (isCenterPosition)
                         return 0;
                     const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-                    return isLeft ? -Anims.slidePx : Anims.slidePx;
+                    return isLeft ? -entryTravel : entryTravel;
                 }
-                y: isTopCenter ? -Anims.slidePx : isBottomCenter ? Anims.slidePx : 0
+                y: isTopCenter ? -entryTravel : isBottomCenter ? entryTravel : 0
             }
         ]
     }
@@ -925,16 +948,16 @@ PanelWindow {
         property: isCenterPosition ? "y" : "x"
         from: {
             if (isTopCenter)
-                return -Anims.slidePx;
+                return -entryTravel;
             if (isBottomCenter)
-                return Anims.slidePx;
+                return entryTravel;
             const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-            return isLeft ? -Anims.slidePx : Anims.slidePx;
+            return isLeft ? -entryTravel : entryTravel;
         }
         to: 0
-        duration: Theme.notificationEnterDuration
+        duration: Theme.variantDuration(Theme.notificationEnterDuration, true)
         easing.type: Easing.BezierSpline
-        easing.bezierCurve: isCenterPosition ? Theme.expressiveCurves.standardDecel : Theme.expressiveCurves.emphasizedDecel
+        easing.bezierCurve: Theme.variantPopoutEnterCurve
         onStopped: {
             if (!win.exiting && !win._isDestroying) {
                 if (isCenterPosition) {
@@ -959,35 +982,35 @@ PanelWindow {
             from: 0
             to: {
                 if (isTopCenter)
-                    return -Anims.slidePx;
+                    return -exitTravel;
                 if (isBottomCenter)
-                    return Anims.slidePx;
+                    return exitTravel;
                 const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-                return isLeft ? -Anims.slidePx : Anims.slidePx;
+                return isLeft ? -exitTravel : exitTravel;
             }
-            duration: Theme.notificationExitDuration
+            duration: Theme.variantDuration(Theme.notificationExitDuration, false)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
 
         NumberAnimation {
             target: content
             property: "opacity"
             from: 1
-            to: 0
+            to: Theme.isDirectionalEffect ? 1 : 0
-            duration: Theme.notificationExitDuration
+            duration: Theme.variantDuration(Theme.notificationExitDuration, false)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.standardAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
 
         NumberAnimation {
             target: content
             property: "scale"
             from: 1
-            to: 0.98
+            to: Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed
-            duration: Theme.notificationExitDuration
+            duration: Theme.variantDuration(Theme.notificationExitDuration, false)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
     }
 

quickshell/Modules/OSD/MediaPlaybackOSD.qml

@@ -27,11 +27,11 @@ DankOSD {
         let icon = "music_note";
         switch (player.playbackState) {
         case MprisPlaybackState.Playing:
-            icon = "play_arrow";
+            icon = "pause";
             break;
         case MprisPlaybackState.Paused:
         case MprisPlaybackState.Stopped:
-            icon = "pause";
+            icon = "play_arrow";
             break;
         }
         if (icon === _displayIcon)

quickshell/Modules/Settings/TypographyMotionTab.qml

@@ -55,6 +55,180 @@ Item {
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: Theme.spacingXL
 
+            SettingsCard {
+                tab: "typography"
+                tags: ["animation", "variant", "style", "slide", "fluent", "dynamic", "motion"]
+                title: I18n.tr("Animation Style")
+                settingKey: "animationVariant"
+                iconName: "auto_awesome_motion"
+
+                Item {
+                    width: parent.width
+                    height: animVariantGroup.implicitHeight
+                    clip: true
+
+                    DankButtonGroup {
+                        id: animVariantGroup
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        buttonPadding: parent.width < 480 ? Theme.spacingS : Theme.spacingL
+                        minButtonWidth: parent.width < 480 ? 64 : 96
+                        textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
+                        model: [I18n.tr("Material"), I18n.tr("Fluent"), I18n.tr("Dynamic")]
+                        selectionMode: "single"
+                        currentIndex: SettingsData.animationVariant
+                        onSelectionChanged: (index, selected) => {
+                            if (!selected)
+                                return;
+                            SettingsData.set("animationVariant", index);
+                        }
+
+                        Connections {
+                            target: SettingsData
+                            function onAnimationVariantChanged() {
+                                animVariantGroup.currentIndex = SettingsData.animationVariant;
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.15
+                }
+
+                Item {
+                    width: parent.width
+                    height: variantDescription.implicitHeight + Theme.spacingS * 2
+
+                    StyledText {
+                        id: variantDescription
+                        x: Theme.spacingM
+                        y: Theme.spacingS
+                        width: parent.width - Theme.spacingM * 2
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                        text: {
+                            switch (SettingsData.animationVariant) {
+                            case 1:
+                                return I18n.tr("Fluent: Smooth cubic deceleration in, quick snap out — clean, elegant curves.");
+                            case 2:
+                                return I18n.tr("Dynamic: Spring bezier with overshoot — entry briefly exceeds its target then settles. Expressive and alive.");
+                            default:
+                                return I18n.tr("Material: Material Design 3 Expressive bezier curves. The DMS default feel.");
+                            }
+                        }
+                    }
+                }
+            }
+
+            SettingsCard {
+                tab: "typography"
+                tags: ["animation", "motion", "effect", "slide", "directional", "depth", "spring", "physics"]
+                title: I18n.tr("Motion Effects")
+                settingKey: "motionEffect"
+                iconName: "motion_photos_on"
+
+                Item {
+                    width: parent.width
+                    height: motionEffectGroup.implicitHeight
+                    clip: true
+
+                    DankButtonGroup {
+                        id: motionEffectGroup
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        buttonPadding: parent.width < 480 ? Theme.spacingS : Theme.spacingL
+                        minButtonWidth: parent.width < 480 ? 64 : 96
+                        textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
+                        model: [I18n.tr("Standard"), I18n.tr("Directional"), I18n.tr("Depth")]
+                        selectionMode: "single"
+                        currentIndex: SettingsData.motionEffect
+                        onSelectionChanged: (index, selected) => {
+                            if (!selected)
+                                return;
+                            SettingsData.set("motionEffect", index);
+                        }
+
+                        Connections {
+                            target: SettingsData
+                            function onMotionEffectChanged() {
+                                motionEffectGroup.currentIndex = SettingsData.motionEffect;
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.15
+                }
+
+                Item {
+                    width: parent.width
+                    height: motionEffectDescription.implicitHeight + Theme.spacingS * 2
+
+                    StyledText {
+                        id: motionEffectDescription
+                        x: Theme.spacingM
+                        y: Theme.spacingS
+                        width: parent.width - Theme.spacingM * 2
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                        text: {
+                            switch (SettingsData.motionEffect) {
+                            case 1:
+                                return I18n.tr("Directional: Panels glide in from a larger distance at full size — no scale change, pure clean motion.");
+                            case 2:
+                                return I18n.tr("Depth: Panels scale up from small as they slide in — a dramatic pop-forward depth effect.");
+                            default:
+                                return I18n.tr("Standard: Classic Material Design 3 — panels rise from below with a subtle scale. The DMS default.");
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 1
+                    color: Theme.outline
+                    opacity: 0.15
+                    visible: SettingsData.motionEffect === 1
+                }
+
+                SettingsDropdownRow {
+                    visible: SettingsData.motionEffect === 1
+                    tab: "typography"
+                    tags: ["animation", "directional", "behavior", "overlap", "sticky", "roll"]
+                    settingKey: "directionalAnimationMode"
+                    text: I18n.tr("Directional Behavior")
+                    description: I18n.tr("How the popout emerges from the DankBar")
+                    options: [I18n.tr("Overlap"), I18n.tr("Slide"), I18n.tr("Roll")]
+                    currentValue: {
+                        switch (SettingsData.directionalAnimationMode) {
+                        case 1:
+                            return I18n.tr("Slide");
+                        case 2:
+                            return I18n.tr("Roll");
+                        default:
+                            return I18n.tr("Overlap");
+                        }
+                    }
+                    onValueChanged: value => {
+                        if (value === I18n.tr("Slide"))
+                            SettingsData.set("directionalAnimationMode", 1);
+                        else if (value === I18n.tr("Roll"))
+                            SettingsData.set("directionalAnimationMode", 2);
+                        else
+                            SettingsData.set("directionalAnimationMode", 0);
+                    }
+                }
+            }
+
             SettingsCard {
                 tab: "typography"
                 tags: ["font", "family", "text", "typography"]

quickshell/Modules/WorkspaceOverlays/HyprlandOverview.qml

@@ -121,9 +121,9 @@ Scope {
 
                 Behavior on opacity {
                     NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
                         easing.type: Easing.BezierSpline
-                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                     }
                 }
 
@@ -154,45 +154,69 @@ Scope {
                     id: scaleTransform
                     origin.x: contentContainer.width / 2
                     origin.y: contentContainer.height / 2
-                    xScale: overviewScope.overviewOpen ? 1 : 0.96
+                    xScale: overviewScope.overviewOpen ? 1 : Theme.effectScaleCollapsed
-                    yScale: overviewScope.overviewOpen ? 1 : 0.96
+                    yScale: overviewScope.overviewOpen ? 1 : Theme.effectScaleCollapsed
 
                     Behavior on xScale {
                         NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                         }
                     }
 
                     Behavior on yScale {
                         NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                         }
                     }
                 }
 
                 Translate {
                     id: motionTransform
-                    x: 0
+                    x: {
-                    y: overviewScope.overviewOpen ? 0 : Theme.spacingL
+                        if (overviewScope.overviewOpen)
+                            return 0;
+                        if (Theme.isDirectionalEffect)
+                            return 0;
+                        if (Theme.isDepthEffect)
+                            return Theme.effectAnimOffset * 0.25;
+                        return 0;
+                    }
+                    y: {
+                        if (overviewScope.overviewOpen)
+                            return 0;
+                        if (Theme.isDirectionalEffect)
+                            return -Math.max(contentContainer.height * 0.8, Theme.effectAnimOffset * 1.1);
+                        if (Theme.isDepthEffect)
+                            return Math.max(Theme.effectAnimOffset * 0.85, 28);
+                        return Theme.effectAnimOffset;
+                    }
+
+                    Behavior on x {
+                        NumberAnimation {
+                            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                        }
+                    }
 
                     Behavior on y {
                         NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                         }
                     }
                 }
 
                 Behavior on opacity {
                     NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
                         easing.type: Easing.BezierSpline
-                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                     }
                 }
 

quickshell/Modules/WorkspaceOverlays/NiriOverviewOverlay.qml

@@ -202,8 +202,18 @@ Scope {
 
                 Item {
                     id: spotlightContainer
-                    x: Theme.snap((parent.width - width) / 2, overlayWindow.dpr)
+                    readonly property bool directionalEffect: Theme.isDirectionalEffect
-                    y: Theme.snap((parent.height - height) / 2, overlayWindow.dpr)
+                    readonly property bool depthEffect: Theme.isDepthEffect
+                    readonly property real collapsedMotionX: depthEffect ? Theme.effectAnimOffset * 0.25 : 0
+                    readonly property real collapsedMotionY: {
+                        if (directionalEffect)
+                            return Math.max(height * 0.85, Theme.effectAnimOffset * 1.1);
+                        if (depthEffect)
+                            return Math.max(Theme.effectAnimOffset * 0.8, 30);
+                        return 0;
+                    }
+                    x: Theme.snap((parent.width - width) / 2 + (overlayWindow.shouldShowSpotlight ? 0 : collapsedMotionX), overlayWindow.dpr)
+                    y: Theme.snap((parent.height - height) / 2 + (overlayWindow.shouldShowSpotlight ? 0 : collapsedMotionY), overlayWindow.dpr)
 
                     readonly property int baseWidth: {
                         switch (SettingsData.dankLauncherV2Size) {
@@ -234,8 +244,8 @@ Scope {
 
                     readonly property bool animatingOut: niriOverviewScope.isClosing && overlayWindow.isSpotlightScreen
 
-                    scale: overlayWindow.shouldShowSpotlight ? 1.0 : 0.96
+                    scale: Theme.isDirectionalEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1.0 : Theme.effectScaleCollapsed)
-                    opacity: overlayWindow.shouldShowSpotlight ? 1 : 0
+                    opacity: Theme.isDirectionalEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1 : 0)
                     visible: overlayWindow.shouldShowSpotlight || animatingOut
                     enabled: overlayWindow.shouldShowSpotlight
 
@@ -245,10 +255,11 @@ Scope {
 
                     Behavior on scale {
                         id: scaleAnimation
+                        enabled: !Theme.isDirectionalEffect
                         NumberAnimation {
-                            duration: Theme.expressiveDurations.fast
+                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                             onRunningChanged: {
                                 if (running || !spotlightContainer.animatingOut)
                                     return;
@@ -258,10 +269,27 @@ Scope {
                     }
 
                     Behavior on opacity {
+                        enabled: !Theme.isDirectionalEffect
                         NumberAnimation {
-                            duration: Theme.expressiveDurations.fast
+                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                        }
+                    }
+
+                    Behavior on x {
+                        NumberAnimation {
+                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                        }
+                    }
+
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                         }
                     }
 

quickshell/Modules/WorkspaceOverlays/OverviewWindow.qml

@@ -62,30 +62,30 @@ Item {
 
     Behavior on x {
         NumberAnimation {
-            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            easing.bezierCurve: Theme.variantModalEnterCurve
         }
     }
     Behavior on y {
         NumberAnimation {
-            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            easing.bezierCurve: Theme.variantModalEnterCurve
         }
     }
     Behavior on width {
         NumberAnimation {
-            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            easing.bezierCurve: Theme.variantModalEnterCurve
         }
     }
     Behavior on height {
         NumberAnimation {
-            duration: Theme.expressiveDurations.expressiveDefaultSpatial
+            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+            easing.bezierCurve: Theme.variantModalEnterCurve
         }
     }
 
@@ -124,16 +124,16 @@ Item {
 
                 Behavior on width {
                     NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
                         easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+                        easing.bezierCurve: Theme.variantModalEnterCurve
                     }
                 }
                 Behavior on height {
                     NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                        duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewOpen)
                         easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
+                        easing.bezierCurve: Theme.variantModalEnterCurve
                     }
                 }
             }

quickshell/Services/AppSearchService.qml

@@ -687,6 +687,12 @@ Singleton {
             appCategories.forEach(cat => categories.add(cat));
         }
 
+        // Include categories from core apps (e.g. DMS Settings)
+        for (const app of coreApps) {
+            const appCategories = getCategoriesForApp(app);
+            appCategories.forEach(cat => categories.add(cat));
+        }
+
         const pluginCategories = getPluginCategories();
         pluginCategories.forEach(cat => categories.add(cat));
 

quickshell/Services/NotificationService.qml

@@ -19,6 +19,7 @@ Singleton {
     readonly property string historyFile: Paths.strip(Paths.cache) + "/notification_history.json"
     readonly property string imageCacheDir: Paths.strip(Paths.cache) + "/notification_images"
     property bool historyLoaded: false
+    property int historyEntryCounter: 0
 
     property list<NotifWrapper> notificationQueue: []
     property list<NotifWrapper> visibleNotifications: []
@@ -73,6 +74,12 @@ Singleton {
         onTriggered: root.performSaveHistory()
     }
 
+    function _makeHistoryEntryId(sourceId, timestamp) {
+        historyEntryCounter += 1;
+        const safeSource = sourceId && sourceId !== "" ? sourceId : "notification";
+        return safeSource + "_" + (timestamp || Date.now()) + "_" + historyEntryCounter;
+    }
+
     function getImageCachePath(wrapper) {
         const ts = wrapper.time ? wrapper.time.getTime() : Date.now();
         const id = wrapper.notification?.id?.toString() || "0";
@@ -80,12 +87,13 @@ Singleton {
     }
 
     function updateHistoryImage(wrapperId, imagePath) {
-        const idx = historyList.findIndex(n => n.id === wrapperId);
+        const idx = historyList.findIndex(n => n.sourceNotificationId === wrapperId || n.id === wrapperId);
         if (idx < 0)
             return;
         const item = historyList[idx];
         const updated = {
             id: item.id,
+            sourceNotificationId: item.sourceNotificationId || item.id,
             summary: item.summary,
             body: item.body,
             htmlBody: item.htmlBody,
@@ -113,8 +121,11 @@ Singleton {
         } else if (imageUrl && !imageUrl.startsWith("image://qsimage/")) {
             persistableImage = imageUrl;
         }
+        const sourceNotificationId = wrapper.notification?.id?.toString() || "";
+        const timestamp = wrapper.time.getTime();
         const data = {
-            id: wrapper.notification?.id?.toString() || Date.now().toString(),
+            id: _makeHistoryEntryId(sourceNotificationId, timestamp),
+            sourceNotificationId: sourceNotificationId,
             summary: wrapper.summary || "",
             body: wrapper.body || "",
             htmlBody: wrapper.htmlBody || wrapper.body || "",
@@ -122,7 +133,7 @@ Singleton {
             appIcon: wrapper.appIcon || "",
             image: persistableImage,
             urgency: urg,
-            timestamp: wrapper.time.getTime(),
+            timestamp: timestamp,
             desktopEntry: wrapper.desktopEntry || ""
         };
         let newList = [data, ...historyList];
@@ -152,6 +163,8 @@ Singleton {
             const now = Date.now();
             const maxAgeMs = maxAgeDays > 0 ? maxAgeDays * 24 * 60 * 60 * 1000 : 0;
             const loaded = [];
+            const seenIds = {};
+            let needsRewrite = false;
 
             for (const item of historyAdapter.notifications || []) {
                 if (maxAgeMs > 0 && (now - item.timestamp) > maxAgeMs)
@@ -162,8 +175,18 @@ Singleton {
                 if (htmlBody) {
                     htmlBody = htmlBody.replace(/<img\b[^>]*>/gi, "");
                 }
+                const sourceNotificationId = (item.sourceNotificationId || item.id || "").toString();
+                let historyId = (item.id || "").toString();
+                if (!historyId || seenIds[historyId]) {
+                    historyId = _makeHistoryEntryId(sourceNotificationId, item.timestamp || now);
+                    needsRewrite = true;
+                }
+                if (!item.sourceNotificationId)
+                    needsRewrite = true;
+                seenIds[historyId] = true;
                 loaded.push({
-                    id: item.id || "",
+                    id: historyId,
+                    sourceNotificationId: sourceNotificationId,
                     summary: item.summary || "",
                     body: body,
                     htmlBody: htmlBody,
@@ -177,7 +200,7 @@ Singleton {
             }
             historyList = loaded;
             historyLoaded = true;
-            if (maxAgeMs > 0 && loaded.length !== (historyAdapter.notifications || []).length)
+            if ((maxAgeMs > 0 && loaded.length !== (historyAdapter.notifications || []).length) || needsRewrite)
                 saveHistory();
         } catch (e) {
             console.warn("NotificationService: load history failed:", e);

quickshell/Services/SystemUpdateService.qml

@@ -44,24 +44,26 @@ Singleton {
         }
     }
 
-    readonly property var archBasedPMSettings: {
+    readonly property var archBasedPMSettings: function(requiresSudo) {
-        "listUpdatesSettings": {
+        return {
-            "params": ["-Qu"],
+            "listUpdatesSettings": {
-            "correctExitCodes": [0, 1]   // Exit code 0 = updates available, 1 = no updates
+                "params": ["-Qu"],
-        },
+                "correctExitCodes": [0, 1]   // Exit code 0 = updates available, 1 = no updates
-        "upgradeSettings": {
+            },
-            "params": ["-Syu"],
+            "upgradeSettings": {
-            "requiresSudo": false
+                "params": ["-Syu"],
-        },
+                "requiresSudo": requiresSudo
-        "parserSettings": {
+            },
-            "lineRegex": /^(\S+)\s+([^\s]+)\s+->\s+([^\s]+)$/,
+            "parserSettings": {
-            "entryProducer": function (match) {
+                "lineRegex": /^(\S+)\s+([^\s]+)\s+->\s+([^\s]+)$/,
-                return {
+                "entryProducer": function (match) {
-                    "name": match[1],
+                    return {
-                    "currentVersion": match[2],
+                        "name": match[1],
-                    "newVersion": match[3],
+                        "currentVersion": match[2],
-                    "description": `${match[1]} ${match[2]} → ${match[3]}`
+                        "newVersion": match[3],
-                };
+                        "description": `${match[1]} ${match[2]} → ${match[3]}`
+                    };
+                }
             }
         }
     }
@@ -92,8 +94,9 @@ Singleton {
         "checkupdates": archBasedUCSettings
     }
     readonly property var packageManagerParams: {
-        "yay": archBasedPMSettings,
+        "yay": archBasedPMSettings(false),
-        "paru": archBasedPMSettings,
+        "paru": archBasedPMSettings(false),
+        "pacman": archBasedPMSettings(true),
         "dnf": fedoraBasedPMSettings
     }
     readonly property list<string> supportedDistributions: ["arch", "artix", "cachyos", "manjaro", "endeavouros", "fedora"]
@@ -182,7 +185,7 @@ Singleton {
 
     Process {
         id: pkgManagerDetection
-        command: ["sh", "-c", "which paru || which yay || which dnf"]
+        command: ["sh", "-c", "which paru || which yay || which pacman || which dnf"]
 
         onExited: exitCode => {
             if (exitCode === 0) {

quickshell/Widgets/DankPopout.qml

@@ -20,10 +20,10 @@ Item {
     property string triggerSection: ""
     property string positioning: "center"
     property int animationDuration: Theme.popoutAnimationDuration
-    property real animationScaleCollapsed: 0.96
+    property real animationScaleCollapsed: Theme.effectScaleCollapsed
-    property real animationOffset: Theme.spacingL
+    property real animationOffset: Theme.effectAnimOffset
-    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+    property list<real> animationEnterCurve: Theme.variantPopoutEnterCurve
-    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
+    property list<real> animationExitCurve: Theme.variantPopoutExitCurve
     property bool suspendShadowWhileResizing: false
     property bool shouldBeVisible: false
     property var customKeyboardFocus: null
@@ -74,6 +74,7 @@ Item {
     signal backgroundClicked
 
     property var _lastOpenedScreen: null
+    property bool isClosing: false
 
     property int effectiveBarPosition: 0
     property real effectiveBarBottomGap: 0
@@ -156,10 +157,14 @@ Item {
         }
     }
 
+    property bool animationsEnabled: true
+
     function open() {
         if (!screen)
             return;
         closeTimer.stop();
+        isClosing = false;
+        animationsEnabled = false;
 
         // Snapshot mask geometry
         _frozenMaskX = maskX;
@@ -174,12 +179,22 @@ Item {
         }
         _lastOpenedScreen = screen;
 
-        shouldBeVisible = true;
+        if (contentContainer) {
+            contentContainer.animX = Theme.snap(contentContainer.offsetX, root.dpr);
+            contentContainer.animY = Theme.snap(contentContainer.offsetY, root.dpr);
+            contentContainer.scaleValue = root.animationScaleCollapsed;
+        }
+
         if (useBackgroundWindow) {
             _surfaceMarginLeft = alignedX - shadowBuffer;
             _surfaceW = alignedWidth + shadowBuffer * 2;
+            backgroundWindow.visible = true;
         }
+        contentWindow.visible = true;
+
         Qt.callLater(() => {
+            animationsEnabled = true;
+            shouldBeVisible = true;
             if (shouldBeVisible && screen) {
                 if (useBackgroundWindow)
                     backgroundWindow.visible = true;
@@ -191,6 +206,7 @@ Item {
     }
 
     function close() {
+        isClosing = true;
         shouldBeVisible = false;
         _primeContent = false;
         PopoutManager.popoutChanged();
@@ -222,9 +238,10 @@ Item {
 
     Timer {
         id: closeTimer
-        interval: animationDuration
+        interval: Theme.variantCloseInterval(animationDuration)
         onTriggered: {
             if (!shouldBeVisible) {
+                isClosing = false;
                 contentWindow.visible = false;
                 if (useBackgroundWindow)
                     backgroundWindow.visible = false;
@@ -241,7 +258,16 @@ Item {
     readonly property var shadowLevel: Theme.elevationLevel3
     readonly property real shadowFallbackOffset: 6
     readonly property real shadowRenderPadding: (Theme.elevationEnabled && SettingsData.popoutElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, effectiveShadowDirection, shadowFallbackOffset, 8, 16) : 0
-    readonly property real shadowMotionPadding: Math.max(0, animationOffset)
+    readonly property real shadowMotionPadding: {
+        if (Theme.isDirectionalEffect) {
+            if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode !== 0)
+                return 16; // Slide Behind and Roll Out do not add animationOffset, enabling strict Wayland clipping.
+            return Math.max(0, animationOffset) + 16;
+        }
+        if (Theme.isDepthEffect)
+            return Math.max(0, animationOffset) + 8;
+        return Math.max(0, animationOffset);
+    }
     readonly property real shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
     readonly property real alignedWidth: Theme.px(popupWidth, dpr)
     readonly property real alignedHeight: Theme.px(popupHeight, dpr)
@@ -353,6 +379,10 @@ Item {
 
         mask: Region {
             item: maskRect
+            Region {
+                item: contentExclusionRect
+                intersection: Intersection.Subtract
+            }
         }
 
         Rectangle {
@@ -361,26 +391,70 @@ Item {
             color: "transparent"
             x: root._frozenMaskX
             y: root._frozenMaskY
-            width: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskWidth : 0
+            width: (backgroundWindow.visible && backgroundInteractive) ? root._frozenMaskWidth : 0
-            height: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskHeight : 0
+            height: (backgroundWindow.visible && backgroundInteractive) ? root._frozenMaskHeight : 0
         }
 
-        MouseArea {
+        Item {
+            id: contentExclusionRect
+            visible: false
+            x: root.alignedX
+            y: root.alignedY
+            width: root.alignedWidth
+            height: root.alignedHeight
+        }
+
+        Item {
+            id: outsideClickCatcher
             x: root._frozenMaskX
             y: root._frozenMaskY
             width: root._frozenMaskWidth
             height: root._frozenMaskHeight
-            hoverEnabled: false
+            enabled: root.shouldBeVisible && root.backgroundInteractive
-            enabled: shouldBeVisible && backgroundInteractive
-            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-            onClicked: mouse => {
-                const clickX = mouse.x + root._frozenMaskX;
-                const clickY = mouse.y + root._frozenMaskY;
-                const outsideContent = clickX < root.alignedX || clickX > root.alignedX + root.alignedWidth || clickY < root.alignedY || clickY > root.alignedY + root.alignedHeight;
 
-                if (!outsideContent)
+            readonly property real contentLeft: Math.max(0, root.alignedX - x)
-                    return;
+            readonly property real contentTop: Math.max(0, root.alignedY - y)
-                backgroundClicked();
+            readonly property real contentRight: Math.min(width, contentLeft + root.alignedWidth)
+            readonly property real contentBottom: Math.min(height, contentTop + root.alignedHeight)
+
+            MouseArea {
+                x: 0
+                y: 0
+                width: outsideClickCatcher.width
+                height: Math.max(0, outsideClickCatcher.contentTop)
+                enabled: parent.enabled
+                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                onClicked: root.backgroundClicked()
+            }
+
+            MouseArea {
+                x: 0
+                y: outsideClickCatcher.contentBottom
+                width: outsideClickCatcher.width
+                height: Math.max(0, outsideClickCatcher.height - outsideClickCatcher.contentBottom)
+                enabled: parent.enabled
+                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                onClicked: root.backgroundClicked()
+            }
+
+            MouseArea {
+                x: 0
+                y: outsideClickCatcher.contentTop
+                width: Math.max(0, outsideClickCatcher.contentLeft)
+                height: Math.max(0, outsideClickCatcher.contentBottom - outsideClickCatcher.contentTop)
+                enabled: parent.enabled
+                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                onClicked: root.backgroundClicked()
+            }
+
+            MouseArea {
+                x: outsideClickCatcher.contentRight
+                y: outsideClickCatcher.contentTop
+                width: Math.max(0, outsideClickCatcher.width - outsideClickCatcher.contentRight)
+                height: Math.max(0, outsideClickCatcher.contentBottom - outsideClickCatcher.contentTop)
+                enabled: parent.enabled
+                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                onClicked: root.backgroundClicked()
             }
         }
 
@@ -425,7 +499,6 @@ Item {
         }
 
         readonly property bool _fullHeight: useBackgroundWindow && root.fullHeightSurface
-
         anchors {
             left: true
             top: true
@@ -483,12 +556,70 @@ Item {
             readonly property bool barBottom: effectiveBarPosition === SettingsData.Position.Bottom
             readonly property bool barLeft: effectiveBarPosition === SettingsData.Position.Left
             readonly property bool barRight: effectiveBarPosition === SettingsData.Position.Right
-            readonly property real offsetX: barLeft ? root.animationOffset : (barRight ? -root.animationOffset : 0)
+            readonly property bool directionalEffect: Theme.isDirectionalEffect
-            readonly property real offsetY: barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0)
+            readonly property bool depthEffect: Theme.isDepthEffect
+            readonly property real directionalTravelX: Math.max(root.animationOffset, root.alignedWidth + Theme.spacingL)
+            readonly property real directionalTravelY: Math.max(root.animationOffset, root.alignedHeight + Theme.spacingL)
+            readonly property real depthTravel: Math.max(root.animationOffset * 0.7, 28)
+            readonly property real sectionTilt: (triggerSection === "left" ? -1 : (triggerSection === "right" ? 1 : 0))
+            readonly property real offsetX: {
+                if (directionalEffect) {
+                    if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2)
+                        return 0;
+                    if (barLeft)
+                        return -directionalTravelX;
+                    if (barRight)
+                        return directionalTravelX;
+                    if (barTop || barBottom)
+                        return 0;
+                    return sectionTilt * directionalTravelX * 0.2;
+                }
+                if (depthEffect) {
+                    if (barLeft)
+                        return -depthTravel;
+                    if (barRight)
+                        return depthTravel;
+                    if (barTop || barBottom)
+                        return 0;
+                    return sectionTilt * depthTravel * 0.2;
+                }
+                return barLeft ? root.animationOffset : (barRight ? -root.animationOffset : 0);
+            }
+            readonly property real offsetY: {
+                if (directionalEffect) {
+                    if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2)
+                        return 0;
+                    if (barBottom)
+                        return directionalTravelY;
+                    if (barTop)
+                        return -directionalTravelY;
+                    if (barLeft || barRight)
+                        return 0;
+                    return directionalTravelY;
+                }
+                if (depthEffect) {
+                    if (barBottom)
+                        return depthTravel;
+                    if (barTop)
+                        return -depthTravel;
+                    if (barLeft || barRight)
+                        return 0;
+                    return depthTravel;
+                }
+                return barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0);
+            }
 
             property real animX: 0
             property real animY: 0
-            property real scaleValue: root.animationScaleCollapsed
+
+            readonly property real computedScaleCollapsed: (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect) ? 0.0 : root.animationScaleCollapsed
+            property real scaleValue: computedScaleCollapsed
+
+            Component.onCompleted: {
+                animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr);
+                animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr);
+                scaleValue = root.shouldBeVisible ? 1.0 : computedScaleCollapsed;
+            }
 
             onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
             onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
@@ -498,89 +629,131 @@ Item {
                 function onShouldBeVisibleChanged() {
                     contentContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : contentContainer.offsetX, root.dpr);
                     contentContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : contentContainer.offsetY, root.dpr);
-                    contentContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed;
+                    contentContainer.scaleValue = root.shouldBeVisible ? 1.0 : contentContainer.computedScaleCollapsed;
                 }
             }
 
             Behavior on animX {
+                enabled: root.animationsEnabled
                 NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
 
             Behavior on animY {
+                enabled: root.animationsEnabled
                 NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
 
             Behavior on scaleValue {
+                enabled: root.animationsEnabled
                 NumberAnimation {
-                    duration: root.animationDuration
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
 
-            ElevationShadow {
-                id: shadowSource
-                width: parent.width
-                height: parent.height
-                opacity: contentWrapper.opacity
-                scale: contentWrapper.scale
-                x: contentWrapper.x
-                y: contentWrapper.y
-                level: root.shadowLevel
-                direction: root.effectiveShadowDirection
-                fallbackOffset: root.shadowFallbackOffset
-                targetRadius: Theme.cornerRadius
-                targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
-            }
-
             Item {
-                id: contentWrapper
+                id: directionalClipMask
-                anchors.centerIn: parent
-                width: parent.width
-                height: parent.height
-                opacity: shouldBeVisible ? 1 : 0
-                visible: opacity > 0
-                scale: contentContainer.scaleValue
-                x: Theme.snap(contentContainer.animX + (parent.width - width) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
-                y: Theme.snap(contentContainer.animY + (parent.height - height) * (1 - contentContainer.scaleValue) * 0.5, root.dpr)
 
-                layer.enabled: contentWrapper.opacity < 1
+                readonly property bool shouldClip: typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode > 0 && Theme.isDirectionalEffect
-                layer.smooth: false
+                readonly property real clipOversize: 1000
-                layer.textureSize: root.dpr > 1 ? Qt.size(Math.ceil(width * root.dpr), Math.ceil(height * root.dpr)) : Qt.size(0, 0)
 
-                Behavior on opacity {
+                clip: shouldClip
-                    NumberAnimation {
-                        duration: animationDuration
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                    }
-                }
 
-                Rectangle {
+                // Bound the clipping strictly to the bar side, allowing massive overflow on the other 3 sides for shadows
-                    anchors.fill: parent
+                x: shouldClip ? (contentContainer.barRight ? -clipOversize : (contentContainer.barLeft ? 0 : -clipOversize)) : 0
-                    radius: Theme.cornerRadius
+                y: shouldClip ? (contentContainer.barBottom ? -clipOversize : (contentContainer.barTop ? 0 : -clipOversize)) : 0
-                    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                    border.color: Theme.outlineMedium
-                    border.width: 0
-                }
 
-                Loader {
+                width: shouldClip ? parent.width + clipOversize + (contentContainer.barLeft || contentContainer.barRight ? 0 : clipOversize) : parent.width
-                    id: contentLoader
+                height: shouldClip ? parent.height + clipOversize + (contentContainer.barTop || contentContainer.barBottom ? 0 : clipOversize) : parent.height
-                    anchors.fill: parent
+
-                    active: root._primeContent || shouldBeVisible || contentWindow.visible
+                Item {
-                    asynchronous: false
+                    id: aligner
-                }
+                    readonly property real baseWidth: contentContainer.width
-            }
+                    readonly property real baseHeight: contentContainer.height
-        }
+                    readonly property bool isRollOut: typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect
+
+                    x: (directionalClipMask.x !== 0 ? -directionalClipMask.x : 0) + (isRollOut && contentContainer.barRight ? baseWidth * (1 - contentContainer.scaleValue) : 0)
+                    y: (directionalClipMask.y !== 0 ? -directionalClipMask.y : 0) + (isRollOut && contentContainer.barBottom ? baseHeight * (1 - contentContainer.scaleValue) : 0)
+                    width: isRollOut && (contentContainer.barLeft || contentContainer.barRight) ? Math.max(0, baseWidth * contentContainer.scaleValue) : baseWidth
+                    height: isRollOut && (contentContainer.barTop || contentContainer.barBottom) ? Math.max(0, baseHeight * contentContainer.scaleValue) : baseHeight
+
+                    clip: isRollOut
+
+                    Item {
+                        id: unrollCounteract
+                        x: aligner.isRollOut && contentContainer.barRight ? -(aligner.baseWidth * (1 - contentContainer.scaleValue)) : 0
+                        y: aligner.isRollOut && contentContainer.barBottom ? -(aligner.baseHeight * (1 - contentContainer.scaleValue)) : 0
+                        width: aligner.baseWidth
+                        height: aligner.baseHeight
+
+                        ElevationShadow {
+                            id: shadowSource
+                            width: parent.width
+                            height: parent.height
+                            opacity: contentWrapper.opacity
+                            scale: contentWrapper.scale
+                            x: contentWrapper.x
+                            y: contentWrapper.y
+                            level: root.shadowLevel
+                            direction: root.effectiveShadowDirection
+                            fallbackOffset: root.shadowFallbackOffset
+                            targetRadius: Theme.cornerRadius
+                            targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                            shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+                        }
+
+                        Item {
+                            id: contentWrapper
+                            width: parent.width
+                            height: parent.height
+                            opacity: Theme.isDirectionalEffect ? 1 : (shouldBeVisible ? 1 : 0)
+                            visible: opacity > 0
+
+                            scale: aligner.isRollOut ? 1.0 : contentContainer.scaleValue
+                            x: Theme.snap(contentContainer.animX + (parent.width - width) * (1 - scale) * 0.5, root.dpr)
+                            y: Theme.snap(contentContainer.animY + (parent.height - height) * (1 - scale) * 0.5, root.dpr)
+
+                            layer.enabled: contentWrapper.opacity < 1
+                            layer.smooth: false
+                            layer.textureSize: root.dpr > 1 ? Qt.size(Math.ceil(width * root.dpr), Math.ceil(height * root.dpr)) : Qt.size(0, 0)
+
+                            Behavior on opacity {
+                                enabled: !Theme.isDirectionalEffect
+                                NumberAnimation {
+                                    duration: Math.round(Theme.variantDuration(animationDuration, shouldBeVisible) * Theme.variantOpacityDurationScale)
+                                    easing.type: Easing.BezierSpline
+                                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                                }
+                            }
+
+                            Rectangle {
+                                anchors.fill: parent
+                                radius: Theme.cornerRadius
+                                color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                                border.color: Theme.outlineMedium
+                                border.width: 0
+                            }
+
+                            Loader {
+                                id: contentLoader
+                                anchors.fill: parent
+                                active: root._primeContent || shouldBeVisible || contentWindow.visible
+                                asynchronous: false
+                            }
+                        } // closes contentWrapper
+                    } // closes unrollCounteract
+                } // closes aligner
+            } // closes directionalClipMask
+        } // closes contentContainer
 
         Item {
             id: focusHelper