(frame): Update connected mode & opacity connection settings

core/.pre-commit-config.yaml

@@ -1,26 +1,13 @@
 repos:
-  - repo: local
+  - repo: https://github.com/golangci/golangci-lint
+    rev: v2.10.1
     hooks:
       - id: golangci-lint-fmt
-        name: golangci-lint-fmt
-        entry: go run github.com/golangci/golangci-lint/v2/cmd/golangci-lint@v2.11.3 fmt
-        language: system
         require_serial: true
-        types: [go]
-        pass_filenames: false
       - id: golangci-lint-full
-        name: golangci-lint-full
-        entry: go run github.com/golangci/golangci-lint/v2/cmd/golangci-lint@v2.11.3 run --fix
-        language: system
-        require_serial: true
-        types: [go]
-        pass_filenames: false
       - id: golangci-lint-config-verify
-        name: golangci-lint-config-verify
-        entry: go run github.com/golangci/golangci-lint/v2/cmd/golangci-lint@v2.11.3 config verify
-        language: system
-        files: \.golangci\.(?:yml|yaml|toml|json)
-        pass_filenames: false
+  - repo: local
+    hooks:
       - id: go-test
         name: go test
         entry: go test ./...

quickshell/Common/AnimVariants.qml

@@ -0,0 +1,179 @@
+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: isConnectedEffect
+        || (typeof SettingsData !== "undefined" && SettingsData.motionEffect === 1)
+    readonly property bool isDepthEffect: typeof SettingsData !== "undefined" && SettingsData.motionEffect === 2
+    readonly property bool isConnectedEffect: typeof SettingsData !== "undefined"
+        && SettingsData.frameEnabled
+        && SettingsData.motionEffect === 1
+        && SettingsData.directionalAnimationMode === 3
+
+    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/ElevationShadow.qml

@@ -13,8 +13,13 @@ Item {
 
     property color targetColor: "white"
     property real targetRadius: Theme.cornerRadius
+    property real topLeftRadius: targetRadius
+    property real topRightRadius: targetRadius
+    property real bottomLeftRadius: targetRadius
+    property real bottomRightRadius: targetRadius
     property color borderColor: "transparent"
     property real borderWidth: 0
+    property bool useCustomSource: false
 
     property bool shadowEnabled: Theme.elevationEnabled
     property real shadowBlurPx: level && level.blurPx !== undefined ? level.blurPx : 0
@@ -46,7 +51,11 @@ Item {
     Rectangle {
         id: sourceRect
         anchors.fill: parent
-        radius: root.targetRadius
+        visible: !root.useCustomSource
+        topLeftRadius: root.topLeftRadius
+        topRightRadius: root.topRightRadius
+        bottomLeftRadius: root.bottomLeftRadius
+        bottomRightRadius: root.bottomRightRadius
         color: root.targetColor
         border.color: root.borderColor
         border.width: root.borderWidth

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,
@@ -168,6 +180,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
@@ -217,6 +235,8 @@ Singleton {
     onFrameShowOnOverviewChanged: saveSettings()
     property bool frameBlurEnabled: true
     onFrameBlurEnabledChanged: saveSettings()
+    property int previousDirectionalMode: 1
+    onPreviousDirectionalModeChanged: saveSettings()
 
     readonly property color effectiveFrameColor: {
         const fc = frameColor;
@@ -1571,35 +1591,37 @@ Singleton {
         const spacing = barSpacing !== undefined ? barSpacing : (defaultBar?.spacing ?? 4);
         const position = barPosition !== undefined ? barPosition : (defaultBar?.position ?? SettingsData.Position.Top);
         const rawBottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : (defaultBar?.bottomGap ?? 0)) : (defaultBar?.bottomGap ?? 0);
-        const bottomGap = Math.max(0, rawBottomGap);
+        const isConnected = frameEnabled && motionEffect === 1 && directionalAnimationMode === 3;
+        const bottomGap = isConnected ? 0 : Math.max(0, rawBottomGap);
 
         const useAutoGaps = (barConfig && barConfig.popupGapsAuto !== undefined) ? barConfig.popupGapsAuto : (defaultBar?.popupGapsAuto ?? true);
         const manualGapValue = (barConfig && barConfig.popupGapsManual !== undefined) ? barConfig.popupGapsManual : (defaultBar?.popupGapsManual ?? 4);
-        const popupGap = useAutoGaps ? Math.max(4, spacing) : manualGapValue;
+        const popupGap = isConnected ? 0 : (useAutoGaps ? Math.max(4, spacing) : manualGapValue);
+        const edgeSpacing = isConnected ? 0 : spacing;
 
         switch (position) {
         case SettingsData.Position.Left:
             return {
-                "x": barThickness + spacing + popupGap,
+                "x": barThickness + edgeSpacing + popupGap,
                 "y": relativeY,
                 "width": widgetWidth
             };
         case SettingsData.Position.Right:
             return {
-                "x": (screen?.width || 0) - (barThickness + spacing + popupGap),
+                "x": (screen?.width || 0) - (barThickness + edgeSpacing + popupGap),
                 "y": relativeY,
                 "width": widgetWidth
             };
         case SettingsData.Position.Bottom:
             return {
                 "x": relativeX,
-                "y": (screen?.height || 0) - (barThickness + spacing + bottomGap + popupGap),
+                "y": (screen?.height || 0) - (barThickness + edgeSpacing + bottomGap + popupGap),
                 "width": widgetWidth
             };
         default:
             return {
                 "x": relativeX,
-                "y": barThickness + spacing + bottomGap + popupGap,
+                "y": barThickness + edgeSpacing + bottomGap + popupGap,
                 "width": widgetWidth
             };
         }
@@ -1693,7 +1715,9 @@ Singleton {
         const screenWidth = screen.width;
         const screenHeight = screen.height;
         const position = barPosition !== undefined ? barPosition : (defaultBar?.position ?? SettingsData.Position.Top);
-        const bottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : (defaultBar?.bottomGap ?? 0)) : (defaultBar?.bottomGap ?? 0);
+        const isConnected = frameEnabled && motionEffect === 1 && directionalAnimationMode === 3;
+        const rawBottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : (defaultBar?.bottomGap ?? 0)) : (defaultBar?.bottomGap ?? 0);
+        const bottomGap = isConnected ? 0 : rawBottomGap;
 
         let topOffset = 0;
         let bottomOffset = 0;
@@ -1715,7 +1739,7 @@ Singleton {
                 const otherSpacing = other.spacing !== undefined ? other.spacing : (defaultBar?.spacing ?? 4);
                 const otherPadding = other.innerPadding !== undefined ? other.innerPadding : (defaultBar?.innerPadding ?? 4);
                 const otherThickness = Math.max(26 + otherPadding * 0.6, Theme.barHeight - 4 - (8 - otherPadding)) + otherSpacing + wingSize;
-                const otherBottomGap = other.bottomGap !== undefined ? other.bottomGap : (defaultBar?.bottomGap ?? 0);
+                const otherBottomGap = isConnected ? 0 : (other.bottomGap !== undefined ? other.bottomGap : (defaultBar?.bottomGap ?? 0));
 
                 switch (other.position) {
                 case SettingsData.Position.Top:

quickshell/Common/Theme.qml

@@ -960,6 +960,40 @@ 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 bool isConnectedEffect: AnimVariants.isConnectedEffect
+    readonly property real connectedCornerRadius: {
+        if (typeof SettingsData === "undefined") return 12;
+        return SettingsData.frameEnabled ? SettingsData.frameRounding : cornerRadius;
+    }
+    readonly property color connectedSurfaceColor: {
+        if (typeof SettingsData === "undefined")
+            return withAlpha(surfaceContainer, popupTransparency);
+        return isConnectedEffect
+            ? Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity)
+            : withAlpha(surfaceContainer, popupTransparency);
+    }
+    readonly property real connectedSurfaceRadius: isConnectedEffect ? connectedCornerRadius : cornerRadius
+    readonly property bool connectedSurfaceBlurEnabled: (typeof SettingsData === "undefined")
+        ? true
+        : (!isConnectedEffect || SettingsData.frameBlurEnabled)
+    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,
@@ -1125,7 +1159,13 @@ Singleton {
     property real iconSizeLarge: 32
 
     property real panelTransparency: 0.85
-    property real popupTransparency: typeof SettingsData !== "undefined" && SettingsData.popupTransparency !== undefined ? SettingsData.popupTransparency : 1.0
+    property real popupTransparency: {
+        if (typeof SettingsData === "undefined")
+            return 1.0;
+        if (isConnectedEffect)
+            return SettingsData.frameOpacity !== undefined ? SettingsData.frameOpacity : 1.0;
+        return SettingsData.popupTransparency !== undefined ? SettingsData.popupTransparency : 1.0;
+    }
 
     function screenTransition() {
         if (CompositorService.isNiri) {
@@ -1824,6 +1864,12 @@ Singleton {
         return Qt.rgba(c.r, c.g, c.b, a);
     }
 
+    function popupLayerColor(baseColor) {
+        if (isConnectedEffect)
+            return connectedSurfaceColor;
+        return withAlpha(baseColor, popupTransparency);
+    }
+
     function blendAlpha(c, a) {
         return Qt.rgba(c.r, c.g, c.b, c.a * a);
     }

quickshell/Common/settings/SettingsSpec.js

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

quickshell/Modals/Common/DankModal.qml

@@ -27,14 +27,20 @@ Item {
     property bool closeOnBackgroundClick: true
     property string animationType: "scale"
     property int animationDuration: Theme.modalAnimationDuration
-    property real animationScaleCollapsed: 0.96
-    property real animationOffset: Theme.spacingL
-    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
-    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
-    property color backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    property real animationScaleCollapsed: Theme.effectScaleCollapsed
+    property real animationOffset: Theme.effectAnimOffset
+    property list<real> animationEnterCurve: Theme.variantModalEnterCurve
+    property list<real> animationExitCurve: Theme.variantModalExitCurve
+    property color backgroundColor: Theme.surfaceContainer
     property color borderColor: Theme.outlineMedium
     property real borderWidth: 0
     property real cornerRadius: Theme.cornerRadius
+    readonly property bool connectedSurfaceOverride: Theme.isConnectedEffect
+    readonly property color effectiveBackgroundColor: connectedSurfaceOverride ? Theme.connectedSurfaceColor : backgroundColor
+    readonly property color effectiveBorderColor: connectedSurfaceOverride ? "transparent" : borderColor
+    readonly property real effectiveBorderWidth: connectedSurfaceOverride ? 0 : borderWidth
+    readonly property real effectiveCornerRadius: connectedSurfaceOverride ? Theme.connectedSurfaceRadius : cornerRadius
+    readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
     property bool enableShadow: true
     property alias modalFocusScope: focusScope
     property bool shouldBeVisible: false
@@ -45,11 +51,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
@@ -59,33 +67,34 @@ Item {
 
     function open() {
         closeTimer.stop();
-        const focusedScreen = CompositorService.getFocusedScreen();
-        const screenChanged = focusedScreen && contentWindow.screen !== focusedScreen;
-        if (focusedScreen) {
-            if (screenChanged)
-                contentWindow.visible = false;
-            contentWindow.screen = focusedScreen;
-            if (!useSingleWindow) {
-                if (screenChanged)
-                    clickCatcher.visible = false;
-                clickCatcher.screen = focusedScreen;
-            }
-        }
-        if (screenChanged) {
-            Qt.callLater(() => root._finishOpen());
-        } else {
-            _finishOpen();
-        }
-    }
+        animationsEnabled = false;
+        frozenMotionOffsetX = modalContainer ? modalContainer.offsetX : 0;
+        frozenMotionOffsetY = modalContainer ? modalContainer.offsetY : animationOffset;
 
-    function _finishOpen() {
+        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)
-            clickCatcher.visible = true;
-        contentWindow.visible = true;
-        shouldHaveFocus = false;
-        Qt.callLater(() => shouldHaveFocus = Qt.binding(() => shouldBeVisible));
+
+        Qt.callLater(() => {
+            animationsEnabled = true;
+            shouldBeVisible = true;
+            if (!useSingleWindow && !clickCatcher.visible)
+                clickCatcher.visible = true;
+            if (!contentWindow.visible)
+                contentWindow.visible = true;
+            shouldHaveFocus = false;
+            Qt.callLater(() => shouldHaveFocus = Qt.binding(() => shouldBeVisible));
+        });
     }
 
     function close() {
@@ -146,7 +155,7 @@ Item {
 
     Timer {
         id: closeTimer
-        interval: animationDuration + 50
+        interval: Theme.variantCloseInterval(animationDuration)
         onTriggered: {
             if (shouldBeVisible)
                 return;
@@ -160,7 +169,19 @@ 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 (Theme.isConnectedEffect)
+            return 0;
+        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)
@@ -220,9 +241,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 || Theme.isConnectedEffect)
+                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 {
@@ -232,12 +270,13 @@ Item {
 
         WindowBlur {
             targetWindow: contentWindow
+            blurEnabled: root.effectiveBlurEnabled
             readonly property real s: Math.min(1, modalContainer.scaleValue)
             blurX: modalContainer.x + modalContainer.width * (1 - s) * 0.5 + Theme.snap(modalContainer.animX, root.dpr)
             blurY: modalContainer.y + modalContainer.height * (1 - s) * 0.5 + Theme.snap(modalContainer.animY, root.dpr)
-            blurWidth: (shouldBeVisible && animatedContent.opacity > 0) ? modalContainer.width * s : 0
-            blurHeight: (shouldBeVisible && animatedContent.opacity > 0) ? modalContainer.height * s : 0
-            blurRadius: root.cornerRadius
+            blurWidth: (root.shouldBeVisible && animatedContent.opacity > 0) ? modalContainer.width * s : 0
+            blurHeight: (root.shouldBeVisible && animatedContent.opacity > 0) ? modalContainer.height * s : 0
+            blurRadius: root.effectiveCornerRadius
         }
 
         WlrLayershell.namespace: root.layerNamespace
@@ -275,9 +314,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))
-            top: root.useSingleWindow ? 0 : Math.max(0, Theme.snap(root.alignedY - shadowBuffer, dpr))
+            left: actualMarginLeft
+            top: actualMarginTop
             right: 0
             bottom: 0
         }
@@ -307,13 +349,14 @@ Item {
             anchors.fill: parent
             z: -1
             color: "black"
-            opacity: root.useBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
-            visible: root.useBackground
+            opacity: (root.useSingleWindow && root.useBackground) ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+            visible: opacity > 0
 
             Behavior on opacity {
-                enabled: root.animationsEnabled
-                DankAnim {
-                    duration: root.animationDuration
+                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
+                NumberAnimation {
+                    duration: Math.round(Theme.variantDuration(root.animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
@@ -321,8 +364,8 @@ Item {
 
         Item {
             id: modalContainer
-            x: root.useSingleWindow ? root.alignedX : shadowBuffer
-            y: root.useSingleWindow ? root.alignedY : shadowBuffer
+            x: (root.useSingleWindow ? root.alignedX : (root.alignedX - contentWindow.actualMarginLeft)) + Theme.snap(animX, root.dpr)
+            y: (root.useSingleWindow ? root.alignedY : (root.alignedY - contentWindow.actualMarginTop)) + Theme.snap(animY, root.dpr)
 
             width: root.alignedWidth
             height: root.alignedHeight
@@ -338,45 +381,117 @@ Item {
             }
 
             readonly property bool slide: root.animationType === "slide"
-            readonly property real offsetX: slide ? 15 : 0
-            readonly property real offsetY: slide ? -30 : root.animationOffset
-
-            property real animX: 0
-            property real animY: 0
-            property real scaleValue: root.animationScaleCollapsed
-
-            onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
-            onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
-
-            Connections {
-                target: root
-                function onShouldBeVisibleChanged() {
-                    modalContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetX, root.dpr);
-                    modalContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetY, root.dpr);
-                    modalContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed;
+            readonly property bool directionalEffect: Theme.isDirectionalEffect
+            readonly property bool depthEffect: Theme.isDepthEffect
+            readonly property real directionalTravel: Math.max(root.animationOffset, Math.max(root.alignedWidth, root.alignedHeight) * 0.8)
+            readonly property real depthTravel: Math.max(root.animationOffset * 0.8, 36)
+            readonly property real customAnchorX: root.alignedX + root.alignedWidth * 0.5
+            readonly property real customAnchorY: root.alignedY + root.alignedHeight * 0.5
+            readonly property real customDistLeft: customAnchorX
+            readonly property real customDistRight: root.screenWidth - customAnchorX
+            readonly property real customDistTop: customAnchorY
+            readonly property real customDistBottom: root.screenHeight - customAnchorY
+            readonly property real offsetX: {
+                if (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 && Theme.isDirectionalEffect)
+                    return 0;
+                if (slide && !directionalEffect && !depthEffect)
+                    return 15;
+                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 {
-                    duration: root.animationDuration
+                NumberAnimation {
+                    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 {
-                    duration: root.animationDuration
+                NumberAnimation {
+                    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 {
-                    duration: root.animationDuration
+                NumberAnimation {
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
+                    easing.type: Easing.BezierSpline
                     easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
                 }
             }
@@ -392,15 +507,14 @@ Item {
                     id: animatedContent
                     anchors.fill: parent
                     clip: false
-                    opacity: root.shouldBeVisible ? 1 : 0
+                    opacity: (Theme.isDirectionalEffect && !Theme.isConnectedEffect) ? 1 : (root.shouldBeVisible ? 1 : 0)
                     scale: modalContainer.scaleValue
-                    x: Theme.snap(modalContainer.animX, root.dpr) + (parent.width - width) * (1 - modalContainer.scaleValue) * 0.5
-                    y: Theme.snap(modalContainer.animY, root.dpr) + (parent.height - height) * (1 - modalContainer.scaleValue) * 0.5
+                    transformOrigin: Item.Center
 
                     Behavior on opacity {
-                        enabled: root.animationsEnabled
+                        enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
                         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
                         }
@@ -411,19 +525,19 @@ Item {
                         anchors.fill: parent
                         level: root.shadowLevel
                         fallbackOffset: root.shadowFallbackOffset
-                        targetRadius: root.cornerRadius
-                        targetColor: root.backgroundColor
-                        borderColor: root.borderColor
-                        borderWidth: root.borderWidth
+                        targetRadius: root.effectiveCornerRadius
+                        targetColor: root.effectiveBackgroundColor
+                        borderColor: root.effectiveBorderColor
+                        borderWidth: root.effectiveBorderWidth
                         shadowEnabled: root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
                     }
 
                     Rectangle {
                         anchors.fill: parent
-                        radius: root.cornerRadius
+                        radius: root.effectiveCornerRadius
                         color: "transparent"
-                        border.color: BlurService.borderColor
-                        border.width: BlurService.borderWidth
+                        border.color: root.connectedSurfaceOverride ? "transparent" : BlurService.borderColor
+                        border.width: root.connectedSurfaceOverride ? 0 : BlurService.borderWidth
                         z: 100
                     }
 

quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Hyprland
@@ -14,16 +15,24 @@ 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
+    property bool _windowEnabled: true
     property bool _pendingInitialize: false
     property string _pendingQuery: ""
     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
@@ -57,8 +66,9 @@ Item {
     readonly property real modalX: (screenWidth - modalWidth) / 2
     readonly property real modalY: (screenHeight - modalHeight) / 2
 
-    readonly property color backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-    readonly property real cornerRadius: Theme.cornerRadius
+    readonly property bool connectedSurfaceOverride: Theme.isConnectedEffect
+    readonly property color backgroundColor: connectedSurfaceOverride ? Theme.connectedSurfaceColor : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    readonly property real cornerRadius: connectedSurfaceOverride ? Theme.connectedSurfaceRadius : Theme.cornerRadius
     readonly property color borderColor: {
         if (!SettingsData.dankLauncherV2BorderEnabled)
             return Theme.outlineMedium;
@@ -76,6 +86,37 @@ Item {
         }
     }
     readonly property int borderWidth: SettingsData.dankLauncherV2BorderEnabled ? SettingsData.dankLauncherV2BorderThickness : 0
+    readonly property color effectiveBorderColor: connectedSurfaceOverride ? "transparent" : borderColor
+    readonly property int effectiveBorderWidth: connectedSurfaceOverride ? 0 : borderWidth
+    readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
+
+    // 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.isConnectedEffect) || 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 && !Theme.isConnectedEffect)
+            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
 
@@ -96,18 +137,11 @@ Item {
         if (!spotlightContent)
             return;
         contentVisible = true;
-        spotlightContent.searchField.forceActiveFocus();
-
-        var targetQuery = "";
-
-        if (query) {
-            targetQuery = query;
-        } else if (SettingsData.rememberLastQuery) {
-            targetQuery = SessionData.launcherLastQuery || "";
-        }
+        // 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 = targetQuery;
+            spotlightContent.searchField.text = query;
         }
         if (spotlightContent.controller) {
             var targetMode = mode || SessionData.launcherLastMode || "all";
@@ -122,10 +156,12 @@ Item {
             spotlightContent.controller.collapsedSections = {};
             spotlightContent.controller.selectedFlatIndex = 0;
             spotlightContent.controller.selectedItem = null;
-            spotlightContent.controller.historyIndex = -1;
-            spotlightContent.controller.searchQuery = targetQuery;
-
-            spotlightContent.controller.performSearch();
+            if (query) {
+                spotlightContent.controller.setSearchQuery(query);
+            } else {
+                spotlightContent.controller.searchQuery = "";
+                spotlightContent.controller.performSearch();
+            }
         }
         if (spotlightContent.resetScroll) {
             spotlightContent.resetScroll();
@@ -135,47 +171,59 @@ Item {
         }
     }
 
-    function _finishShow(query, mode) {
-        spotlightOpen = true;
+    function _openCommon(query, mode) {
+        closeCleanupTimer.stop();
         isClosing = false;
         openedFromOverview = false;
 
-        keyboardActive = true;
+        // Disable animations so the snap is instant
+        animationsEnabled = false;
+
+        // Freeze the collapsed offsets (they depend on height which could change)
+        _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;
 
+        // 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() {
-        closeCleanupTimer.stop();
-
-        var focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen && launcherWindow.screen !== focusedScreen) {
-            spotlightOpen = false;
-            isClosing = false;
-            launcherWindow.screen = focusedScreen;
-            Qt.callLater(() => root._finishShow("", ""));
-            return;
-        }
-
-        _finishShow("", "");
+        _openCommon("", "");
     }
 
     function showWithQuery(query) {
-        closeCleanupTimer.stop();
-
-        var focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen && launcherWindow.screen !== focusedScreen) {
-            spotlightOpen = false;
-            isClosing = false;
-            launcherWindow.screen = focusedScreen;
-            Qt.callLater(() => root._finishShow(query, ""));
-            return;
-        }
-
-        _finishShow(query, "");
+        _openCommon(query, "");
     }
 
     function hide() {
@@ -183,13 +231,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();
     }
 
@@ -198,27 +250,7 @@ Item {
     }
 
     function showWithMode(mode) {
-        closeCleanupTimer.stop();
-
-        var focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen && launcherWindow.screen !== focusedScreen) {
-            spotlightOpen = false;
-            isClosing = false;
-            launcherWindow.screen = focusedScreen;
-            Qt.callLater(() => root._finishShow("", mode));
-            return;
-        }
-
-        spotlightOpen = true;
-        isClosing = false;
-        openedFromOverview = false;
-
-        keyboardActive = true;
-        ModalManager.openModal(root);
-        if (useHyprlandFocusGrab)
-            focusGrab.active = true;
-
-        _ensureContentLoadedAndInitialize("", mode);
+        _openCommon("", mode);
     }
 
     function toggleWithMode(mode) {
@@ -239,10 +271,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();
@@ -251,7 +286,6 @@ Item {
 
     Connections {
         target: spotlightContent?.controller ?? null
-
         function onModeChanged(mode) {
             if (spotlightContent.controller.autoSwitchedToFiles)
                 return;
@@ -261,7 +295,7 @@ Item {
 
     HyprlandFocusGrab {
         id: focusGrab
-        windows: [launcherWindow]
+        windows: [contentWindow]
         active: false
 
         onCleared: {
@@ -286,55 +320,53 @@ Item {
             if (Quickshell.screens.length === 0)
                 return;
 
-            const screenName = launcherWindow.screen?.name;
-            if (screenName) {
+            const screen = contentWindow.screen;
+            const screenName = screen?.name;
+
+            let needsReset = !screen || !screenName;
+            if (!needsReset) {
+                needsReset = true;
                 for (let i = 0; i < Quickshell.screens.length; i++) {
-                    if (Quickshell.screens[i].name === screenName)
-                        return;
+                    if (Quickshell.screens[i].name === screenName) {
+                        needsReset = false;
+                        break;
+                    }
                 }
             }
 
-            if (spotlightOpen)
-                hide();
+            if (!needsReset)
+                return;
 
             const newScreen = CompositorService.getFocusedScreen() ?? Quickshell.screens[0];
-            if (newScreen)
-                launcherWindow.screen = newScreen;
+            if (!newScreen)
+                return;
+
+            root._windowEnabled = false;
+            backgroundWindow.screen = newScreen;
+            contentWindow.screen = newScreen;
+            Qt.callLater(() => {
+                root._windowEnabled = true;
+            });
         }
     }
 
+    // ── Background window: fullscreen, handles darkening + click-to-dismiss ──
     PanelWindow {
-        id: launcherWindow
-        visible: spotlightOpen || isClosing
+        id: backgroundWindow
+        visible: false
         color: "transparent"
-        exclusionMode: ExclusionMode.Ignore
 
-        WindowBlur {
-            targetWindow: launcherWindow
-            readonly property real s: Math.min(1, modalContainer.scale)
-            blurX: root.modalX + root.modalWidth * (1 - s) * 0.5
-            blurY: root.modalY + root.modalHeight * (1 - s) * 0.5
-            blurWidth: (contentVisible && modalContainer.opacity > 0) ? root.modalWidth * s : 0
-            blurHeight: (contentVisible && modalContainer.opacity > 0) ? root.modalHeight * s : 0
-            blurRadius: root.cornerRadius
-        }
+        WlrLayershell.namespace: "dms:spotlight:bg"
+        WlrLayershell.layer: WlrLayershell.Top
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
 
-        WlrLayershell.namespace: "dms:spotlight"
-        WlrLayershell.layer: {
-            switch (Quickshell.env("DMS_MODAL_LAYER")) {
-            case "bottom":
-                console.error("DankModal: 'bottom' layer is not valid for modals. Defaulting to 'top' layer.");
-                return WlrLayershell.Top;
-            case "background":
-                console.error("DankModal: 'background' layer is not valid for modals. Defaulting to 'top' layer.");
-                return WlrLayershell.Top;
-            case "overlay":
-                return WlrLayershell.Overlay;
-            default:
-                return WlrLayershell.Top;
-            }
+        WlrLayershell.margins {
+            top: contentContainer.dockTop ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 0 ? Theme.px(42, root.dpr) : 0)
+            bottom: contentContainer.dockBottom ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 1 ? Theme.px(42, root.dpr) : 0)
+            left: contentContainer.dockLeft ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 2 ? Theme.px(42, root.dpr) : 0)
+            right: contentContainer.dockRight ? contentContainer.dockThickness : (typeof SettingsData !== "undefined" && SettingsData.barPosition === 3 ? Theme.px(42, root.dpr) : 0)
         }
-        WlrLayershell.keyboardFocus: keyboardActive ? (root.useHyprlandFocusGrab ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.Exclusive) : WlrKeyboardFocus.None
 
         anchors {
             top: true
@@ -344,11 +376,11 @@ Item {
         }
 
         mask: Region {
-            item: spotlightOpen ? fullScreenMask : null
+            item: (spotlightOpen || isClosing) ? bgFullScreenMask : null
         }
 
         Item {
-            id: fullScreenMask
+            id: bgFullScreenMask
             anchors.fill: parent
         }
 
@@ -356,13 +388,14 @@ Item {
             id: backgroundDarken
             anchors.fill: parent
             color: "black"
-            opacity: contentVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
-            visible: contentVisible || opacity > 0
+            opacity: launcherMotionVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
+            visible: launcherMotionVisible || opacity > 0
 
             Behavior on opacity {
+                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
                 DankAnim {
-                    duration: Theme.modalAnimationDuration
-                    easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                    duration: Math.round(Theme.variantDuration(Theme.modalAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
+                    easing.bezierCurve: launcherMotionVisible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
                 }
             }
         }
@@ -370,96 +403,251 @@ Item {
         MouseArea {
             anchors.fill: parent
             enabled: spotlightOpen
-            onClicked: mouse => {
-                var contentX = modalContainer.x;
-                var contentY = modalContainer.y;
-                var contentW = modalContainer.width;
-                var contentH = modalContainer.height;
+            onClicked: root.hide()
+        }
+    }
 
-                if (mouse.x < contentX || mouse.x > contentX + contentW || mouse.y < contentY || mouse.y > contentY + contentH) {
-                    root.hide();
-                }
+    // ── Content window: SMALL, positioned with margins — only renders the modal area ──
+    PanelWindow {
+        id: contentWindow
+        visible: false
+        color: "transparent"
+
+        WindowBlur {
+            targetWindow: contentWindow
+            blurEnabled: root.effectiveBlurEnabled
+            readonly property real s: Math.min(1, contentContainer.scaleValue)
+            blurX: root._ccX + root.alignedWidth * (1 - s) * 0.5 + Theme.snap(contentContainer.animX, root.dpr)
+            blurY: root._ccY + root.alignedHeight * (1 - s) * 0.5 + Theme.snap(contentContainer.animY, root.dpr)
+            blurWidth: (root.spotlightOpen || root.isClosing) && contentWrapper.opacity > 0 ? root.alignedWidth * s : 0
+            blurHeight: (root.spotlightOpen || root.isClosing) && contentWrapper.opacity > 0 ? root.alignedHeight * s : 0
+            blurRadius: root.cornerRadius
+        }
+
+        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
-            x: root.modalX
-            y: root.modalY
-            width: root.modalWidth
-            height: root.modalHeight
-            visible: contentVisible || opacity > 0
-
-            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;
-                }
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: root.cornerRadius
-                color: "transparent"
-                border.color: BlurService.borderColor
-                border.width: BlurService.borderWidth
-            }
+            id: contentInputMask
+            visible: false
+            x: contentContainer.x + contentWrapper.x
+            y: contentContainer.y + contentWrapper.y
+            width: root.alignedWidth
+            height: root.alignedHeight
         }
-    }
+
+        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.effectiveBorderColor
+                        borderWidth: root.effectiveBorderWidth
+                        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 && !Theme.isConnectedEffect) ? 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 || Theme.isConnectedEffect)
+                            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

@@ -41,7 +41,6 @@ FocusScope {
         editCommentField.text = existing?.comment || "";
         editEnvVarsField.text = existing?.envVars || "";
         editExtraFlagsField.text = existing?.extraFlags || "";
-        editDgpuToggle.checked = existing?.launchOnDgpu || false;
         editMode = true;
         Qt.callLater(() => editNameField.forceActiveFocus());
     }
@@ -65,8 +64,6 @@ FocusScope {
             override.envVars = editEnvVarsField.text.trim();
         if (editExtraFlagsField.text.trim())
             override.extraFlags = editExtraFlagsField.text.trim();
-        if (editDgpuToggle.checked)
-            override.launchOnDgpu = true;
         SessionData.setAppOverride(editAppId, override);
         closeEditMode();
     }
@@ -89,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: {
@@ -149,18 +146,10 @@ FocusScope {
             event.accepted = false;
             return;
         case Qt.Key_Down:
-            if (hasCtrl) {
-                controller.navigateHistory("down");
-            } else {
-                controller.selectNext();
-            }
+            controller.selectNext();
             return;
         case Qt.Key_Up:
-            if (hasCtrl) {
-                controller.navigateHistory("up");
-            } else {
-                controller.selectPrevious();
-            }
+            controller.selectPrevious();
             return;
         case Qt.Key_PageDown:
             controller.selectPageDown(8);
@@ -169,10 +158,6 @@ FocusScope {
             controller.selectPageUp(8);
             return;
         case Qt.Key_Right:
-            if (hasCtrl) {
-                controller.cycleMode();
-                return;
-            }
             if (controller.getCurrentSectionViewMode() !== "list") {
                 controller.selectRight();
                 return;
@@ -180,25 +165,12 @@ FocusScope {
             event.accepted = false;
             return;
         case Qt.Key_Left:
-            if (hasCtrl) {
-                const reverse = true;
-                controller.cycleMode(reverse);
-                return;
-            }
             if (controller.getCurrentSectionViewMode() !== "list") {
                 controller.selectLeft();
                 return;
             }
             event.accepted = false;
             return;
-        case Qt.Key_H:
-            if (hasCtrl) {
-                const reverse = true;
-                controller.cycleMode(reverse);
-                return;
-            }
-            event.accepted = false;
-            return;
         case Qt.Key_J:
             if (hasCtrl) {
                 controller.selectNext();
@@ -213,13 +185,6 @@ FocusScope {
             }
             event.accepted = false;
             return;
-        case Qt.Key_L:
-            if (hasCtrl) {
-                controller.cycleMode();
-                return;
-            }
-            event.accepted = false;
-            return;
         case Qt.Key_N:
             if (hasCtrl) {
                 controller.selectNextSection();
@@ -235,19 +200,13 @@ FocusScope {
             event.accepted = false;
             return;
         case Qt.Key_Tab:
-            if (hasCtrl && actionPanel.hasActions) {
+            if (actionPanel.hasActions) {
                 actionPanel.expanded ? actionPanel.cycleAction() : actionPanel.show();
-                return;
             }
-            controller.selectNext();
             return;
         case Qt.Key_Backtab:
-            if (hasCtrl && actionPanel.expanded) {
-                const reverse = true;
-                actionPanel.expanded ? actionPanel.cycleAction(reverse) : actionPanel.show();
-                return;
-            }
-            controller.selectPrevious();
+            if (actionPanel.expanded)
+                actionPanel.hide();
             return;
         case Qt.Key_Return:
         case Qt.Key_Enter:
@@ -311,7 +270,7 @@ FocusScope {
 
     Item {
         anchors.fill: parent
-        visible: !editMode && !(root.parentModal?.isClosing ?? false)
+        visible: !editMode
 
         Item {
             id: footerBar
@@ -429,7 +388,7 @@ FocusScope {
 
                 StyledText {
                     anchors.verticalCenter: parent.verticalCenter
-                    text: "Ctrl-Tab " + I18n.tr("actions")
+                    text: "Tab " + I18n.tr("actions")
                     font.pixelSize: Theme.fontSizeSmall - 1
                     color: Theme.surfaceVariantText
                     visible: actionPanel.hasActions
@@ -503,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
@@ -737,6 +696,14 @@ 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: {
+                    if (!root.parentModal)
+                        return 1;
+                    if (Theme.isDirectionalEffect && root.parentModal.isClosing)
+                        return 1;
+                    return root.parentModal.isClosing ? 0 : 1;
+                }
+
                 ResultsList {
                     id: resultsList
                     anchors.fill: parent
@@ -769,7 +736,6 @@ FocusScope {
         }
         function onSearchQueryRequested(query) {
             searchField.text = query;
-            searchField.cursorPosition = query.length;
         }
         function onModeChanged() {
             extFilterField.text = "";
@@ -980,15 +946,6 @@ FocusScope {
                             keyNavigationBacktab: editEnvVarsField
                         }
                     }
-
-                    DankToggle {
-                        id: editDgpuToggle
-                        width: parent.width
-                        text: I18n.tr("Launch on dGPU by default")
-                        visible: SessionService.nvidiaCommand.length > 0
-                        checked: false
-                        onToggled: checked => editDgpuToggle.checked = checked
-                    }
                 }
             }
 

quickshell/Modules/AppDrawer/AppDrawerPopout.qml

@@ -8,9 +8,6 @@ DankPopout {
 
     layerNamespace: "dms:app-launcher"
 
-    readonly property real screenWidth: screen?.width ?? 1920
-    readonly property real screenHeight: screen?.height ?? 1080
-
     property string _pendingMode: ""
     property string _pendingQuery: ""
 
@@ -44,35 +41,8 @@ DankPopout {
         openWithQuery(query);
     }
 
-    readonly property int _baseWidth: {
-        switch (SettingsData.dankLauncherV2Size) {
-        case "micro":
-            return 500;
-        case "medium":
-            return 720;
-        case "large":
-            return 860;
-        default:
-            return 620;
-        }
-    }
-
-    readonly property int _baseHeight: {
-        switch (SettingsData.dankLauncherV2Size) {
-        case "micro":
-            return 480;
-        case "medium":
-            return 720;
-        case "large":
-            return 860;
-        default:
-            return 600;
-        }
-    }
-
-    popupWidth: Math.min(_baseWidth, screenWidth - 100)
-    popupHeight: Math.min(_baseHeight, screenHeight - 100)
-
+    popupWidth: 560
+    popupHeight: 640
     triggerWidth: 40
     positioning: ""
     contentHandlesKeys: contentLoader.item?.launcherContent?.editMode ?? false
@@ -90,7 +60,7 @@ DankPopout {
         if (!lc)
             return;
 
-        const query = _pendingQuery || (SettingsData.rememberLastQuery ? SessionData.launcherLastQuery : "") || "";
+        const query = _pendingQuery;
         const mode = _pendingMode || SessionData.appDrawerLastMode || "apps";
         _pendingMode = "";
         _pendingQuery = "";
@@ -102,9 +72,12 @@ DankPopout {
         if (lc.controller) {
             lc.controller.searchMode = mode;
             lc.controller.pluginFilter = "";
-            lc.controller.searchQuery = query;
-
-            lc.controller.performSearch();
+            lc.controller.searchQuery = "";
+            if (query) {
+                lc.controller.setSearchQuery(query);
+            } else {
+                lc.controller.performSearch();
+            }
         }
         lc.resetScroll?.();
         lc.actionPanel?.hide();
@@ -133,7 +106,7 @@ DankPopout {
             QtObject {
                 id: modalAdapter
                 property bool spotlightOpen: appDrawerPopout.shouldBeVisible
-                readonly property bool isClosing: !appDrawerPopout.shouldBeVisible
+                property bool isClosing: appDrawerPopout.isClosing
 
                 function hide() {
                     appDrawerPopout.close();

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

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

quickshell/Modules/DankBar/DankBarContent.qml

@@ -1184,6 +1184,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

@@ -661,7 +661,7 @@ PanelWindow {
     anchors.left: !isVertical ? true : (barPos === SettingsData.Position.Left)
     anchors.right: !isVertical ? true : (barPos === SettingsData.Position.Right)
 
-    exclusiveZone: (!(barConfig?.visible ?? true) || topBarCore.autoHide) ? -1 : (barWindow.effectiveBarThickness + effectiveSpacing + (barConfig?.bottomGap ?? 0))
+    exclusiveZone: (!(barConfig?.visible ?? true) || topBarCore.autoHide) ? -1 : (barWindow.effectiveBarThickness + effectiveSpacing + (Theme.isConnectedEffect ? 0 : (barConfig?.bottomGap ?? 0)))
 
     Item {
         id: inputMask

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
-        y: anchorPos.y - height / 2
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 1)
+        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
-        scale: dropdownType === 1 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+            enabled: !Theme.isDirectionalEffect
+            DankAnim {
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1) * Theme.variantOpacityDurationScale)
+                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
-        y: anchorPos.y - height / 2
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 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
-        scale: dropdownType === 2 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+            enabled: !Theme.isDirectionalEffect
+            DankAnim {
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2) * Theme.variantOpacityDurationScale)
+                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
-        y: anchorPos.y - height / 2
+        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 3)
+        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
-        scale: dropdownType === 3 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+            enabled: !Theme.isDirectionalEffect
+            DankAnim {
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3) * Theme.variantOpacityDurationScale)
+                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

@@ -19,11 +19,12 @@ Variants {
 
         WindowBlur {
             targetWindow: dock
-            blurX: dockBackground.x + dockContainer.x + dockMouseArea.x + dockCore.x + dockSlide.x
-            blurY: dockBackground.y + dockContainer.y + dockMouseArea.y + dockCore.y + dockSlide.y
-            blurWidth: dock.hasApps && dock.reveal ? dockBackground.width : 0
-            blurHeight: dock.hasApps && dock.reveal ? dockBackground.height : 0
-            blurRadius: Theme.cornerRadius
+            blurEnabled: dock.effectiveBlurEnabled
+            blurX: dockBackground.x + dockContainer.x + dockMouseArea.x + dockCore.x + dockSlide.x - dock.horizontalConnectorExtent
+            blurY: dockBackground.y + dockContainer.y + dockMouseArea.y + dockCore.y + dockSlide.y - dock.verticalConnectorExtent
+            blurWidth: dock.hasApps && dock.reveal ? dockBackground.width + dock.horizontalConnectorExtent * 2 : 0
+            blurHeight: dock.hasApps && dock.reveal ? dockBackground.height + dock.verticalConnectorExtent * 2 : 0
+            blurRadius: dock.surfaceRadius
         }
 
         WlrLayershell.namespace: "dms:dock"
@@ -42,6 +43,29 @@ Variants {
         property real backgroundTransparency: SettingsData.dockTransparency
         property bool groupByApp: SettingsData.dockGroupByApp
         readonly property int borderThickness: SettingsData.dockBorderEnabled ? SettingsData.dockBorderThickness : 0
+        readonly property string connectedBarSide: SettingsData.dockPosition === SettingsData.Position.Top ? "top"
+            : SettingsData.dockPosition === SettingsData.Position.Bottom ? "bottom"
+            : SettingsData.dockPosition === SettingsData.Position.Left ? "left" : "right"
+        readonly property bool connectedBarActiveOnEdge: Theme.isConnectedEffect
+            && !!(dock.screen || modelData)
+            && SettingsData.getActiveBarEdgesForScreen(dock.screen || modelData).includes(connectedBarSide)
+        readonly property real connectedJoinInset: {
+            if (!Theme.isConnectedEffect)
+                return 0;
+            return connectedBarActiveOnEdge ? SettingsData.frameBarSize : SettingsData.frameThickness;
+        }
+        readonly property real surfaceRadius: Theme.connectedSurfaceRadius
+        readonly property color surfaceColor: Theme.isConnectedEffect
+            ? Theme.connectedSurfaceColor
+            : Theme.withAlpha(Theme.surfaceContainer, backgroundTransparency)
+        readonly property color surfaceBorderColor: Theme.isConnectedEffect ? "transparent" : BlurService.borderColor
+        readonly property real surfaceBorderWidth: Theme.isConnectedEffect ? 0 : BlurService.borderWidth
+        readonly property real surfaceTopLeftRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Left) ? 0 : surfaceRadius
+        readonly property real surfaceTopRightRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Right) ? 0 : surfaceRadius
+        readonly property real surfaceBottomLeftRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Bottom || SettingsData.dockPosition === SettingsData.Position.Left) ? 0 : surfaceRadius
+        readonly property real surfaceBottomRightRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Bottom || SettingsData.dockPosition === SettingsData.Position.Right) ? 0 : surfaceRadius
+        readonly property real horizontalConnectorExtent: Theme.isConnectedEffect && !isVertical ? Theme.connectedCornerRadius : 0
+        readonly property real verticalConnectorExtent: Theme.isConnectedEffect && isVertical ? Theme.connectedCornerRadius : 0
 
         readonly property int hasApps: dockApps.implicitWidth > 0 || dockApps.implicitHeight > 0
 
@@ -113,13 +137,57 @@ Variants {
             return getBarHeight(leftBar);
         }
 
-        readonly property real dockMargin: SettingsData.dockSpacing
-        readonly property real positionSpacing: barSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin
+        readonly property real dockMargin: SettingsData.dockMargin
+        readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
+        readonly property real effectiveDockBottomGap: Theme.isConnectedEffect ? 0 : SettingsData.dockBottomGap
+        readonly property real effectiveDockMargin: Theme.isConnectedEffect ? 0 : SettingsData.dockMargin
+        readonly property real positionSpacing: barSpacing + effectiveDockBottomGap + effectiveDockMargin
+        readonly property real joinedEdgeMargin: Theme.isConnectedEffect ? 0 : (barSpacing + effectiveDockMargin + 1 + dock.borderThickness)
         readonly property real _dpr: (dock.screen && dock.screen.devicePixelRatio) ? dock.screen.devicePixelRatio : 1
         function px(v) {
             return Math.round(v * _dpr) / _dpr;
         }
 
+        function connectorWidth(spacing) {
+            return dock.isVertical ? (spacing + Theme.connectedCornerRadius) : Theme.connectedCornerRadius;
+        }
+
+        function connectorHeight(spacing) {
+            return dock.isVertical ? Theme.connectedCornerRadius : (spacing + Theme.connectedCornerRadius);
+        }
+
+        function connectorSeamX(baseX, bodyWidth, placement) {
+            if (!dock.isVertical)
+                return placement === "left" ? baseX : baseX + bodyWidth;
+            return SettingsData.dockPosition === SettingsData.Position.Left ? baseX : baseX + bodyWidth;
+        }
+
+        function connectorSeamY(baseY, bodyHeight, placement) {
+            if (SettingsData.dockPosition === SettingsData.Position.Top)
+                return baseY;
+            if (SettingsData.dockPosition === SettingsData.Position.Bottom)
+                return baseY + bodyHeight;
+            return placement === "left" ? baseY : baseY + bodyHeight;
+        }
+
+        function connectorX(baseX, bodyWidth, placement, spacing) {
+            const seamX = connectorSeamX(baseX, bodyWidth, placement);
+            const width = connectorWidth(spacing);
+            if (!dock.isVertical)
+                return placement === "left" ? seamX - width : seamX;
+            return SettingsData.dockPosition === SettingsData.Position.Left ? seamX : seamX - width;
+        }
+
+        function connectorY(baseY, bodyHeight, placement, spacing) {
+            const seamY = connectorSeamY(baseY, bodyHeight, placement);
+            const height = connectorHeight(spacing);
+            if (SettingsData.dockPosition === SettingsData.Position.Top)
+                return seamY;
+            if (SettingsData.dockPosition === SettingsData.Position.Bottom)
+                return seamY - height;
+            return placement === "left" ? seamY - height : seamY;
+        }
+
         property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData)
         property bool revealSticky: false
 
@@ -130,7 +198,7 @@ Variants {
                 return false;
 
             const screenName = dock.modelData?.name ?? "";
-            const dockThickness = effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin;
+            const dockThickness = dock.connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin;
             const screenWidth = dock.screen?.width ?? 0;
             const screenHeight = dock.screen?.height ?? 0;
 
@@ -302,13 +370,13 @@ Variants {
                 return -1;
             if (barSpacing > 0)
                 return -1;
-            return px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin);
+            return px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockBottomGap + effectiveDockMargin);
         }
 
         property real animationHeadroom: Math.ceil(SettingsData.dockIconSize * 0.35)
 
-        implicitWidth: isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
-        implicitHeight: !isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+        implicitWidth: isVertical ? (px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+        implicitHeight: !isVertical ? (px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
 
         Item {
             id: maskItem
@@ -318,17 +386,17 @@ Variants {
             x: {
                 const baseX = dockCore.x + dockMouseArea.x;
                 if (isVertical && SettingsData.dockPosition === SettingsData.Position.Right)
-                    return baseX - (expanded ? animationHeadroom + borderThickness : 0);
-                return baseX - (expanded ? borderThickness : 0);
+                    return baseX - (expanded ? animationHeadroom + borderThickness + dock.horizontalConnectorExtent : 0);
+                return baseX - (expanded ? borderThickness + dock.horizontalConnectorExtent : 0);
             }
             y: {
                 const baseY = dockCore.y + dockMouseArea.y;
                 if (!isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom)
-                    return baseY - (expanded ? animationHeadroom + borderThickness : 0);
-                return baseY - (expanded ? borderThickness : 0);
+                    return baseY - (expanded ? animationHeadroom + borderThickness + dock.verticalConnectorExtent : 0);
+                return baseY - (expanded ? borderThickness + dock.verticalConnectorExtent : 0);
             }
-            width: dockMouseArea.width + (isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 : 0)
-            height: dockMouseArea.height + (!isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 : 0)
+            width: dockMouseArea.width + (isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 + dock.horizontalConnectorExtent * 2 : 0)
+            height: dockMouseArea.height + (!isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 + dock.verticalConnectorExtent * 2 : 0)
         }
 
         mask: Region {
@@ -388,7 +456,7 @@ Variants {
             const screenHeight = dock.screen ? dock.screen.height : 0;
 
             const gap = Theme.spacingS;
-            const bgMargin = barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness;
+            const bgMargin = dock.joinedEdgeMargin + dock.connectedJoinInset;
             const btnW = dock.hoveredButton.width;
             const btnH = dock.hoveredButton.height;
 
@@ -459,11 +527,11 @@ Variants {
                         // Keep the taller hit area regardless of the reveal state to prevent shrinking loop
                         return Math.min(Math.max(dockBackground.height + 64, 200), maxDockHeight);
                     }
-                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
+                    return dock.reveal ? px(dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin) : 1;
                 }
                 width: {
                     if (dock.isVertical) {
-                        return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
+                        return dock.reveal ? px(dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin) : 1;
                     }
                     // Keep the wider hit area regardless of the reveal state to prevent shrinking loop
                     return Math.min(dockBackground.width + 8 + dock.borderThickness, maxDockWidth);
@@ -505,7 +573,7 @@ Variants {
                                 return 0;
                             if (dock.reveal)
                                 return 0;
-                            const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10;
+                            const hideDistance = dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin + 10;
                             if (SettingsData.dockPosition === SettingsData.Position.Right) {
                                 return hideDistance;
                             } else {
@@ -517,7 +585,7 @@ Variants {
                                 return 0;
                             if (dock.reveal)
                                 return 0;
-                            const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10;
+                            const hideDistance = dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin + 10;
                             if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
                                 return hideDistance;
                             } else {
@@ -528,16 +596,26 @@ Variants {
                         Behavior on x {
                             NumberAnimation {
                                 id: slideXAnimation
-                                duration: Theme.shortDuration
-                                easing.type: Easing.OutCubic
+                                duration: Theme.isConnectedEffect
+                                    ? Theme.variantDuration(Theme.popoutAnimationDuration, dock.reveal)
+                                    : Theme.shortDuration
+                                easing.type: Theme.isConnectedEffect ? Easing.BezierSpline : Easing.OutCubic
+                                easing.bezierCurve: Theme.isConnectedEffect
+                                    ? (dock.reveal ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve)
+                                    : []
                             }
                         }
 
                         Behavior on y {
                             NumberAnimation {
                                 id: slideYAnimation
-                                duration: Theme.shortDuration
-                                easing.type: Easing.OutCubic
+                                duration: Theme.isConnectedEffect
+                                    ? Theme.variantDuration(Theme.popoutAnimationDuration, dock.reveal)
+                                    : Theme.shortDuration
+                                easing.type: Theme.isConnectedEffect ? Easing.BezierSpline : Easing.OutCubic
+                                easing.bezierCurve: Theme.isConnectedEffect
+                                    ? (dock.reveal ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve)
+                                    : []
                             }
                         }
                     }
@@ -553,47 +631,76 @@ Variants {
                             right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
                             verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
                         }
-                        anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
+                        anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
 
                         implicitWidth: dock.isVertical ? (dockApps.implicitHeight + SettingsData.dockSpacing * 2) : (dockApps.implicitWidth + SettingsData.dockSpacing * 2)
                         implicitHeight: dock.isVertical ? (dockApps.implicitWidth + SettingsData.dockSpacing * 2) : (dockApps.implicitHeight + SettingsData.dockSpacing * 2)
                         width: implicitWidth
                         height: implicitHeight
 
-                        layer.enabled: true
+                        // Avoid an offscreen texture seam where the connected dock meets the frame.
+                        layer.enabled: !Theme.isConnectedEffect
                         clip: false
 
                         Rectangle {
                             anchors.fill: parent
-                            color: Theme.withAlpha(Theme.surfaceContainer, backgroundTransparency)
-                            radius: Theme.cornerRadius
+                            color: dock.surfaceColor
+                            topLeftRadius: dock.surfaceTopLeftRadius
+                            topRightRadius: dock.surfaceTopRightRadius
+                            bottomLeftRadius: dock.surfaceBottomLeftRadius
+                            bottomRightRadius: dock.surfaceBottomRightRadius
                         }
 
                         Rectangle {
                             anchors.fill: parent
                             color: "transparent"
-                            radius: Theme.cornerRadius
-                            border.color: BlurService.borderColor
-                            border.width: BlurService.borderWidth
+                            topLeftRadius: dock.surfaceTopLeftRadius
+                            topRightRadius: dock.surfaceTopRightRadius
+                            bottomLeftRadius: dock.surfaceBottomLeftRadius
+                            bottomRightRadius: dock.surfaceBottomRightRadius
+                            border.color: dock.surfaceBorderColor
+                            border.width: dock.surfaceBorderWidth
                             z: 100
                         }
                     }
 
+                    ConnectedCorner {
+                        visible: Theme.isConnectedEffect && dock.reveal
+                        barSide: dock.connectedBarSide
+                        placement: "left"
+                        spacing: 0
+                        connectorRadius: Theme.connectedCornerRadius
+                        color: dock.surfaceColor
+                        x: Theme.snap(dock.connectorX(dockBackground.x, dockBackground.width, placement, spacing), dock._dpr)
+                        y: Theme.snap(dock.connectorY(dockBackground.y, dockBackground.height, placement, spacing), dock._dpr)
+                    }
+
+                    ConnectedCorner {
+                        visible: Theme.isConnectedEffect && dock.reveal
+                        barSide: dock.connectedBarSide
+                        placement: "right"
+                        spacing: 0
+                        connectorRadius: Theme.connectedCornerRadius
+                        color: dock.surfaceColor
+                        x: Theme.snap(dock.connectorX(dockBackground.x, dockBackground.width, placement, spacing), dock._dpr)
+                        y: Theme.snap(dock.connectorY(dockBackground.y, dockBackground.height, placement, spacing), dock._dpr)
+                    }
+
                     Shape {
                         id: dockBorderShape
                         x: dockBackground.x - borderThickness
                         y: dockBackground.y - borderThickness
                         width: dockBackground.width + borderThickness * 2
                         height: dockBackground.height + borderThickness * 2
-                        visible: SettingsData.dockBorderEnabled && dock.hasApps
+                        visible: SettingsData.dockBorderEnabled && dock.hasApps && !Theme.isConnectedEffect
                         preferredRendererType: Shape.CurveRenderer
 
                         readonly property real borderThickness: Math.max(1, dock.borderThickness)
                         readonly property real i: borderThickness / 2
-                        readonly property real cr: Theme.cornerRadius
+                        readonly property real cr: dock.surfaceRadius
                         readonly property real w: dockBackground.width
                         readonly property real h: dockBackground.height
 

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

@@ -32,6 +32,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
@@ -145,9 +168,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
         }
     }
 
@@ -929,9 +952,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
             }
         ]
     }
@@ -943,16 +966,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) {
@@ -977,35 +1000,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
-            duration: Theme.notificationExitDuration
+            to: Theme.isDirectionalEffect ? 1 : 0
+            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
-            duration: Theme.notificationExitDuration
+            to: Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed
+            duration: Theme.variantDuration(Theme.notificationExitDuration, false)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
     }
 

quickshell/Modules/Settings/DockTab.qml

@@ -7,6 +7,9 @@ import qs.Modules.Settings.Widgets
 
 Item {
     id: root
+    readonly property bool connectedFrameModeActive: SettingsData.frameEnabled
+        && SettingsData.motionEffect === 1
+        && SettingsData.directionalAnimationMode === 3
 
     FileBrowserModal {
         id: dockLogoFileBrowser
@@ -544,6 +547,8 @@ Item {
 
                 SettingsSliderRow {
                     text: I18n.tr("Exclusive Zone Offset")
+                    enabled: !root.connectedFrameModeActive
+                    opacity: root.connectedFrameModeActive ? 0.5 : 1.0
                     value: SettingsData.dockBottomGap
                     minimum: -100
                     maximum: 100
@@ -553,6 +558,8 @@ Item {
 
                 SettingsSliderRow {
                     text: I18n.tr("Margin")
+                    enabled: !root.connectedFrameModeActive
+                    opacity: root.connectedFrameModeActive ? 0.5 : 1.0
                     value: SettingsData.dockMargin
                     minimum: 0
                     maximum: 100
@@ -561,11 +568,42 @@ Item {
                 }
             }
 
+            Item {
+                visible: root.connectedFrameModeActive
+                width: parent.width
+                implicitHeight: dockConnectedNote.implicitHeight + Theme.spacingS * 2
+
+                Row {
+                    id: dockConnectedNote
+                    x: Theme.spacingM
+                    width: parent.width - Theme.spacingM * 2
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    DankIcon {
+                        name: "frame_source"
+                        size: Theme.fontSizeMedium
+                        color: Theme.primary
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Connected Frame mode manages dock edge offset, transparency, blur, and border styling")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                        width: parent.width - Theme.fontSizeMedium - Theme.spacingS
+                    }
+                }
+            }
+
             SettingsCard {
                 width: parent.width
                 iconName: "opacity"
                 title: I18n.tr("Transparency")
                 settingKey: "dockTransparency"
+                enabled: !root.connectedFrameModeActive
+                opacity: root.connectedFrameModeActive ? 0.5 : 1.0
 
                 SettingsSliderRow {
                     text: I18n.tr("Dock Transparency")
@@ -585,6 +623,8 @@ Item {
                 settingKey: "dockBorder"
                 collapsible: true
                 expanded: false
+                enabled: !root.connectedFrameModeActive
+                opacity: root.connectedFrameModeActive ? 0.5 : 1.0
 
                 SettingsToggleRow {
                     text: I18n.tr("Border")

quickshell/Modules/Settings/FrameTab.qml

@@ -115,8 +115,9 @@ Item {
                 SettingsSliderRow {
                     id: opacitySlider
                     settingKey: "frameOpacity"
-                    tags: ["frame", "border", "opacity", "transparency"]
-                    text: I18n.tr("Frame Opacity")
+                    tags: ["frame", "border", "surface", "popup", "opacity", "transparency"]
+                    text: I18n.tr("Surface Opacity")
+                    description: I18n.tr("Frame border opacity. Controls all surface opacity globally when Connected Mode is active")
                     unit: "%"
                     minimum: 0
                     maximum: 100
@@ -261,7 +262,7 @@ Item {
                 title: I18n.tr("Bar Integration")
                 settingKey: "frameBarIntegration"
                 collapsible: true
-                expanded: false
+                expanded: true
                 visible: SettingsData.frameEnabled
 
                 SettingsToggleRow {
@@ -273,6 +274,31 @@ Item {
                     checked: SettingsData.frameShowOnOverview
                     onToggled: checked => SettingsData.set("frameShowOnOverview", checked)
                 }
+
+                SettingsToggleRow {
+                    visible: SettingsData.frameEnabled
+                    settingKey: "directionalAnimationMode"
+                    tags: ["frame", "connected", "popout", "corner", "animation"]
+                    text: I18n.tr("Connected Mode")
+                    description: I18n.tr("Popouts emerge flush from the bar edge as one continuous piece (based on Slide)")
+                    checked: SettingsData.motionEffect === 1 && SettingsData.directionalAnimationMode === 3
+                    onToggled: checked => {
+                        if (checked) {
+                            if (SettingsData.directionalAnimationMode !== 3)
+                                SettingsData.set("previousDirectionalMode", SettingsData.directionalAnimationMode);
+                            SettingsData.set("motionEffect", 1);
+                            SettingsData.set("directionalAnimationMode", 3);
+                        } else {
+                            SettingsData.set("directionalAnimationMode", SettingsData.previousDirectionalMode);
+                        }
+                    }
+
+                    Connections {
+                        target: SettingsData
+                        function onDirectionalAnimationModeChanged() {}
+                        function onMotionEffectChanged() {}
+                    }
+                }
             }
 
             // ── Display Assignment ────────────────────────────────────────────

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -11,6 +11,9 @@ import qs.Modules.Settings.Widgets
 Item {
     id: themeColorsTab
 
+    readonly property bool connectedFrameModeActive: SettingsData.frameEnabled
+        && SettingsData.motionEffect === 1
+        && SettingsData.directionalAnimationMode === 3
     property var cachedIconThemes: SettingsData.availableIconThemes
     property var cachedCursorThemes: SettingsData.availableCursorThemes
     property var cachedMatugenSchemes: Theme.availableMatugenSchemes.map(option => option.label)
@@ -1615,10 +1618,14 @@ Item {
 
                 SettingsSliderRow {
                     tab: "theme"
-                    tags: ["popup", "transparency", "opacity", "modal"]
+                    tags: ["surface", "popup", "transparency", "opacity", "modal"]
                     settingKey: "popupTransparency"
-                    text: I18n.tr("Popup Transparency")
-                    description: I18n.tr("Controls opacity of all popouts, modals, and their content layers")
+                    text: I18n.tr("Surface Opacity")
+                    description: themeColorsTab.connectedFrameModeActive
+                        ? I18n.tr("Connected Frame mode follows Surface Opacity from the Frame tab for connected popouts, docks, and modal surfaces")
+                        : I18n.tr("Controls opacity of all popouts, modals, and their content layers")
+                    enabled: !themeColorsTab.connectedFrameModeActive
+                    opacity: themeColorsTab.connectedFrameModeActive ? 0.5 : 1.0
                     value: Math.round(SettingsData.popupTransparency * 100)
                     minimum: 0
                     maximum: 100
@@ -1837,7 +1844,11 @@ Item {
                     tags: ["blur", "background", "transparency", "glass", "frosted"]
                     settingKey: "blurEnabled"
                     text: I18n.tr("Background Blur")
-                    description: BlurService.available ? I18n.tr("Blur the background behind bars, popouts, modals, and notifications. Requires compositor support and configuration.") : I18n.tr("Requires a newer version of Quickshell")
+                    description: !BlurService.available
+                        ? I18n.tr("Requires a newer version of Quickshell")
+                        : (themeColorsTab.connectedFrameModeActive
+                            ? I18n.tr("Connected Frame mode follows Frame Blur for connected surfaces while this remains the master blur availability toggle")
+                            : I18n.tr("Blur the background behind bars, popouts, modals, and notifications. Requires compositor support and configuration."))
                     checked: SettingsData.blurEnabled ?? false
                     enabled: BlurService.available
                     onToggled: checked => SettingsData.set("blurEnabled", checked)

quickshell/Modules/Settings/TypographyMotionTab.qml

@@ -55,6 +55,192 @@ 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", "connected"]
+                    settingKey: "directionalAnimationMode"
+                    text: I18n.tr("Directional Behavior")
+                    description: {
+                        if (SettingsData.directionalAnimationMode === 3 && SettingsData.frameEnabled)
+                            return I18n.tr("Popouts emerge flush from the bar edge as a single continuous piece, with corner connectors bridging the junction");
+                        return I18n.tr("How the popout emerges from the DankBar");
+                    }
+                    options: SettingsData.frameEnabled
+                        ? [I18n.tr("Overlap"), I18n.tr("Slide"), I18n.tr("Roll"), I18n.tr("Connected")]
+                        : [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");
+                        case 3:
+                            return SettingsData.frameEnabled ? I18n.tr("Connected") : I18n.tr("Slide");
+                        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 if (value === I18n.tr("Connected") && SettingsData.frameEnabled) {
+                            if (SettingsData.directionalAnimationMode !== 3)
+                                SettingsData.set("previousDirectionalMode", SettingsData.directionalAnimationMode);
+                            SettingsData.set("directionalAnimationMode", 3);
+                        } 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
-                    yScale: overviewScope.overviewOpen ? 1 : 0.96
+                    xScale: overviewScope.overviewOpen ? 1 : Theme.effectScaleCollapsed
+                    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
-                    y: overviewScope.overviewOpen ? 0 : Theme.spacingL
+                    x: {
+                        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)
-                    y: Theme.snap((parent.height - height) / 2, overlayWindow.dpr)
+                    readonly property bool directionalEffect: Theme.isDirectionalEffect
+                    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
-                    opacity: overlayWindow.shouldShowSpotlight ? 1 : 0
+                    scale: Theme.isDirectionalEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1.0 : Theme.effectScaleCollapsed)
+                    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/Widgets/ConnectedCorner.qml

@@ -0,0 +1,152 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Common
+
+// ConnectedCorner — Seam-complement connector that fills the void between
+// a bar's rounded corner and a popout's flush edge, creating a seamless junction.
+//
+// Usage: Place as a sibling to contentWrapper inside unrollCounteract (DankPopout)
+// or as a sibling to dockBackground (Dock). Position using contentWrapper.x/y.
+//
+// barSide:   "top" | "bottom" | "left" | "right"  — which edge the bar is on
+// placement: "left" | "right"                      — which lateral end of that edge
+// spacing:   gap between bar surface and popout surface (storedBarSpacing, ~4px)
+// connectorRadius: bar corner radius to match (frameRounding or Theme.cornerRadius)
+// color:     fill color matching the popout surface
+
+Item {
+    id: root
+
+    property string barSide: "top"
+    property string placement: "left"
+    property real spacing: 4
+    property real connectorRadius: 12
+    property color color: "transparent"
+
+    readonly property bool isHorizontalBar: barSide === "top" || barSide === "bottom"
+    readonly property bool isPlacementLeft: placement === "left"
+    readonly property string arcCorner: {
+        if (barSide === "top")
+            return isPlacementLeft ? "bottomLeft" : "bottomRight";
+        if (barSide === "bottom")
+            return isPlacementLeft ? "topLeft" : "topRight";
+        if (barSide === "left")
+            return isPlacementLeft ? "topRight" : "bottomRight";
+        return isPlacementLeft ? "topLeft" : "bottomLeft";
+    }
+    readonly property real pathStartX: {
+        switch (arcCorner) {
+        case "topLeft":
+            return width;
+        case "topRight":
+        case "bottomLeft":
+            return 0;
+        default:
+            return 0;
+        }
+    }
+    readonly property real pathStartY: {
+        switch (arcCorner) {
+        case "bottomRight":
+            return height;
+        default:
+            return 0;
+        }
+    }
+    readonly property real firstLineX: {
+        switch (arcCorner) {
+        case "topLeft":
+        case "bottomLeft":
+            return width;
+        default:
+            return 0;
+        }
+    }
+    readonly property real firstLineY: {
+        switch (arcCorner) {
+        case "topLeft":
+        case "topRight":
+            return height;
+        default:
+            return 0;
+        }
+    }
+    readonly property real secondLineX: {
+        switch (arcCorner) {
+        case "topRight":
+        case "bottomLeft":
+        case "bottomRight":
+            return width;
+        default:
+            return 0;
+        }
+    }
+    readonly property real secondLineY: {
+        switch (arcCorner) {
+        case "topLeft":
+        case "topRight":
+        case "bottomLeft":
+            return height;
+        default:
+            return 0;
+        }
+    }
+    readonly property real arcCenterX: arcCorner === "topRight" || arcCorner === "bottomRight" ? width : 0
+    readonly property real arcCenterY: arcCorner === "bottomLeft" || arcCorner === "bottomRight" ? height : 0
+    readonly property real arcStartAngle: {
+        switch (arcCorner) {
+        case "topLeft":
+        case "topRight":
+            return 90;
+        case "bottomLeft":
+            return 0;
+        default:
+            return -90;
+        }
+    }
+    readonly property real arcSweepAngle: {
+        switch (arcCorner) {
+        case "topRight":
+            return 90;
+        default:
+            return -90;
+        }
+    }
+
+    // Horizontal bar: connector is tall (bridges vertical gap), narrow (corner radius wide)
+    // Vertical bar: connector is wide (bridges horizontal gap), short (corner radius tall)
+    width: isHorizontalBar ? connectorRadius : (spacing + connectorRadius)
+    height: isHorizontalBar ? (spacing + connectorRadius) : connectorRadius
+
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            fillColor: root.color
+            strokeColor: "transparent"
+            strokeWidth: 0
+            startX: root.pathStartX
+            startY: root.pathStartY
+
+            PathLine {
+                x: root.firstLineX
+                y: root.firstLineY
+            }
+
+            PathLine {
+                x: root.secondLineX
+                y: root.secondLineY
+            }
+
+            PathAngleArc {
+                centerX: root.arcCenterX
+                centerY: root.arcCenterY
+                radiusX: root.width
+                radiusY: root.height
+                startAngle: root.arcStartAngle
+                sweepAngle: root.arcSweepAngle
+            }
+        }
+    }
+}

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 animationOffset: Theme.spacingL
-    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
-    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
+    property real animationScaleCollapsed: Theme.effectScaleCollapsed
+    property real animationOffset: Theme.effectAnimOffset
+    property list<real> animationEnterCurve: Theme.variantPopoutEnterCurve
+    property list<real> animationExitCurve: Theme.variantPopoutExitCurve
     property bool suspendShadowWhileResizing: false
     property bool shouldBeVisible: false
     property var customKeyboardFocus: null
@@ -47,6 +47,8 @@ Item {
     property var screen: null
 
     readonly property real effectiveBarThickness: {
+        if (Theme.isConnectedEffect)
+            return Math.max(0, storedBarThickness);
         const padding = storedBarConfig ? (storedBarConfig.innerPadding !== undefined ? storedBarConfig.innerPadding : 4) : 4;
         return Math.max(26 + padding * 0.6, Theme.barHeight - 4 - (8 - padding)) + storedBarSpacing;
     }
@@ -68,12 +70,14 @@ Item {
     readonly property real barWidth: barBounds.width
     readonly property real barHeight: barBounds.height
     readonly property real barWingSize: barBounds.wingSize
+    readonly property bool effectiveSurfaceBlurEnabled: Theme.connectedSurfaceBlurEnabled
 
     signal opened
     signal popoutClosed
     signal backgroundClicked
 
     property var _lastOpenedScreen: null
+    property bool isClosing: false
 
     property int effectiveBarPosition: 0
     property real effectiveBarBottomGap: 0
@@ -156,10 +160,14 @@ Item {
         }
     }
 
+    property bool animationsEnabled: true
+
     function open() {
         if (!screen)
             return;
         closeTimer.stop();
+        isClosing = false;
+        animationsEnabled = false;
 
         // Snapshot mask geometry
         _frozenMaskX = maskX;
@@ -174,12 +182,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 +209,7 @@ Item {
     }
 
     function close() {
+        isClosing = true;
         shouldBeVisible = false;
         _primeContent = false;
         PopoutManager.popoutChanged();
@@ -222,9 +241,10 @@ Item {
 
     Timer {
         id: closeTimer
-        interval: animationDuration
+        interval: Theme.variantCloseInterval(animationDuration)
         onTriggered: {
             if (!shouldBeVisible) {
+                isClosing = false;
                 contentWindow.visible = false;
                 if (useBackgroundWindow)
                     backgroundWindow.visible = false;
@@ -237,14 +257,71 @@ Item {
     readonly property real screenWidth: screen ? screen.width : 0
     readonly property real screenHeight: screen ? screen.height : 0
     readonly property real dpr: screen ? screen.devicePixelRatio : 1
+    readonly property real frameInset: {
+        if (!SettingsData.frameEnabled) return 0;
+        const ft = SettingsData.frameThickness;
+        const fr = SettingsData.frameRounding;
+        const ccr = Theme.connectedCornerRadius;
+        if (Theme.isConnectedEffect)
+            return Math.max(ft * 4, ft + ccr * 2);
+        const useAutoGaps = storedBarConfig?.popupGapsAuto !== undefined ? storedBarConfig.popupGapsAuto : true;
+        const manualGapValue = storedBarConfig?.popupGapsManual !== undefined ? storedBarConfig.popupGapsManual : 6;
+        const gap = useAutoGaps ? Math.max(6, storedBarSpacing) : manualGapValue;
+        return Math.max(ft + gap, fr);
+    }
 
     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.isConnectedEffect)
+            return Math.max(storedBarSpacing + Theme.connectedCornerRadius + 4, 40);
+        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)
+    readonly property real connectedAnchorX: {
+        if (!Theme.isConnectedEffect)
+            return triggerX;
+        switch (effectiveBarPosition) {
+        case SettingsData.Position.Left:
+            return barX + barWidth;
+        case SettingsData.Position.Right:
+            return barX;
+        default:
+            return triggerX;
+        }
+    }
+    readonly property real connectedAnchorY: {
+        if (!Theme.isConnectedEffect)
+            return triggerY;
+        switch (effectiveBarPosition) {
+        case SettingsData.Position.Top:
+            return barY + barHeight;
+        case SettingsData.Position.Bottom:
+            return barY;
+        default:
+            return triggerY;
+        }
+    }
+
+    function adjacentBarClearance(exclusion) {
+        if (exclusion <= 0)
+            return 0;
+        if (!Theme.isConnectedEffect)
+            return exclusion;
+        // In a shared frame corner, the adjacent connected bar already occupies
+        // one rounded-corner radius before the popout's own connector begins.
+        return exclusion + Theme.connectedCornerRadius * 2;
+    }
 
     onAlignedHeightChanged: {
         if (!suspendShadowWhileResizing || !shouldBeVisible)
@@ -269,17 +346,22 @@ Item {
     readonly property real alignedX: Theme.snap((() => {
             const useAutoGaps = storedBarConfig?.popupGapsAuto !== undefined ? storedBarConfig.popupGapsAuto : true;
             const manualGapValue = storedBarConfig?.popupGapsManual !== undefined ? storedBarConfig.popupGapsManual : 4;
-            const popupGap = useAutoGaps ? Math.max(4, storedBarSpacing) : manualGapValue;
+            const rawPopupGap = useAutoGaps ? Math.max(4, storedBarSpacing) : manualGapValue;
+            const popupGap = Theme.isConnectedEffect ? 0 : rawPopupGap;
+            const edgeGap = Math.max(popupGap, frameInset);
+            const anchorX = Theme.isConnectedEffect ? connectedAnchorX : triggerX;
 
             switch (effectiveBarPosition) {
             case SettingsData.Position.Left:
-                return Math.max(popupGap, Math.min(screenWidth - popupWidth - popupGap, triggerX));
+                // bar on left: left side is bar-adjacent (popupGap), right side is frame-perpendicular (edgeGap)
+                return Math.max(popupGap, Math.min(screenWidth - popupWidth - edgeGap, anchorX));
             case SettingsData.Position.Right:
-                return Math.max(popupGap, Math.min(screenWidth - popupWidth - popupGap, triggerX - popupWidth));
+                // bar on right: right side is bar-adjacent (popupGap), left side is frame-perpendicular (edgeGap)
+                return Math.max(edgeGap, Math.min(screenWidth - popupWidth - popupGap, anchorX - popupWidth));
             default:
                 const rawX = triggerX + (triggerWidth / 2) - (popupWidth / 2);
-                const minX = adjacentBarInfo.leftBar > 0 ? adjacentBarInfo.leftBar : popupGap;
-                const maxX = screenWidth - popupWidth - (adjacentBarInfo.rightBar > 0 ? adjacentBarInfo.rightBar : popupGap);
+                const minX = Math.max(edgeGap, adjacentBarClearance(adjacentBarInfo.leftBar));
+                const maxX = screenWidth - popupWidth - Math.max(edgeGap, adjacentBarClearance(adjacentBarInfo.rightBar));
                 return Math.max(minX, Math.min(maxX, rawX));
             }
         })(), dpr)
@@ -287,17 +369,22 @@ Item {
     readonly property real alignedY: Theme.snap((() => {
             const useAutoGaps = storedBarConfig?.popupGapsAuto !== undefined ? storedBarConfig.popupGapsAuto : true;
             const manualGapValue = storedBarConfig?.popupGapsManual !== undefined ? storedBarConfig.popupGapsManual : 4;
-            const popupGap = useAutoGaps ? Math.max(4, storedBarSpacing) : manualGapValue;
+            const rawPopupGap = useAutoGaps ? Math.max(4, storedBarSpacing) : manualGapValue;
+            const popupGap = Theme.isConnectedEffect ? 0 : rawPopupGap;
+            const edgeGap = Math.max(popupGap, frameInset);
+            const anchorY = Theme.isConnectedEffect ? connectedAnchorY : triggerY;
 
             switch (effectiveBarPosition) {
             case SettingsData.Position.Bottom:
-                return Math.max(popupGap, Math.min(screenHeight - popupHeight - popupGap, triggerY - popupHeight));
+                // bar on bottom: bottom side is bar-adjacent (popupGap), top side is frame-perpendicular (edgeGap)
+                return Math.max(edgeGap, Math.min(screenHeight - popupHeight - popupGap, anchorY - popupHeight));
             case SettingsData.Position.Top:
-                return Math.max(popupGap, Math.min(screenHeight - popupHeight - popupGap, triggerY));
+                // bar on top: top side is bar-adjacent (popupGap), bottom side is frame-perpendicular (edgeGap)
+                return Math.max(popupGap, Math.min(screenHeight - popupHeight - edgeGap, anchorY));
             default:
                 const rawY = triggerY - (popupHeight / 2);
-                const minY = adjacentBarInfo.topBar > 0 ? adjacentBarInfo.topBar : popupGap;
-                const maxY = screenHeight - popupHeight - (adjacentBarInfo.bottomBar > 0 ? adjacentBarInfo.bottomBar : popupGap);
+                const minY = Math.max(edgeGap, adjacentBarClearance(adjacentBarInfo.topBar));
+                const maxY = screenHeight - popupHeight - Math.max(edgeGap, adjacentBarClearance(adjacentBarInfo.bottomBar));
                 return Math.max(minY, Math.min(maxY, rawY));
             }
         })(), dpr)
@@ -353,6 +440,10 @@ Item {
 
         mask: Region {
             item: maskRect
+            Region {
+                item: contentExclusionRect
+                intersection: Intersection.Subtract
+            }
         }
 
         Rectangle {
@@ -361,26 +452,70 @@ Item {
             color: "transparent"
             x: root._frozenMaskX
             y: root._frozenMaskY
-            width: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskWidth : 0
-            height: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskHeight : 0
+            width: (backgroundWindow.visible && backgroundInteractive) ? root._frozenMaskWidth : 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: 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;
+            enabled: root.shouldBeVisible && root.backgroundInteractive
 
-                if (!outsideContent)
-                    return;
-                backgroundClicked();
+            readonly property real contentLeft: Math.max(0, root.alignedX - x)
+            readonly property real contentTop: Math.max(0, root.alignedY - y)
+            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()
             }
         }
 
@@ -401,12 +536,13 @@ Item {
         WindowBlur {
             id: popoutBlur
             targetWindow: contentWindow
+            blurEnabled: root.effectiveSurfaceBlurEnabled
             readonly property real s: Math.min(1, contentContainer.scaleValue)
-            blurX: contentContainer.x + contentContainer.width * (1 - s) * 0.5 + Theme.snap(contentContainer.animX, root.dpr)
-            blurY: contentContainer.y + contentContainer.height * (1 - s) * 0.5 + Theme.snap(contentContainer.animY, root.dpr)
-            blurWidth: (shouldBeVisible && contentWrapper.opacity > 0) ? contentContainer.width * s : 0
-            blurHeight: (shouldBeVisible && contentWrapper.opacity > 0) ? contentContainer.height * s : 0
-            blurRadius: Theme.cornerRadius
+            blurX: contentContainer.x + contentContainer.width * (1 - s) * 0.5 + Theme.snap(contentContainer.animX, root.dpr) - contentContainer.horizontalConnectorExtent * s
+            blurY: contentContainer.y + contentContainer.height * (1 - s) * 0.5 + Theme.snap(contentContainer.animY, root.dpr) - contentContainer.verticalConnectorExtent * s
+            blurWidth: (shouldBeVisible && contentWrapper.opacity > 0) ? (contentContainer.width + contentContainer.horizontalConnectorExtent * 2) * s : 0
+            blurHeight: (shouldBeVisible && contentWrapper.opacity > 0) ? (contentContainer.height + contentContainer.verticalConnectorExtent * 2) * s : 0
+            blurRadius: Theme.connectedSurfaceRadius
         }
 
         WlrLayershell.namespace: root.layerNamespace
@@ -436,7 +572,6 @@ Item {
         }
 
         readonly property bool _fullHeight: useBackgroundWindow && root.fullHeightSurface
-
         anchors {
             left: true
             top: true
@@ -462,10 +597,10 @@ Item {
         Item {
             id: contentMaskRect
             visible: false
-            x: contentContainer.x
-            y: contentContainer.y
-            width: shouldBeVisible ? root.alignedWidth : 0
-            height: shouldBeVisible ? root.alignedHeight : 0
+            x: contentContainer.x - contentContainer.horizontalConnectorExtent
+            y: contentContainer.y - contentContainer.verticalConnectorExtent
+            width: root.alignedWidth + contentContainer.horizontalConnectorExtent * 2
+            height: root.alignedHeight + contentContainer.verticalConnectorExtent * 2
         }
 
         MouseArea {
@@ -494,12 +629,124 @@ 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 real offsetY: barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0)
+            readonly property string connectedBarSide: barTop ? "top" : (barBottom ? "bottom" : (barLeft ? "left" : "right"))
+            readonly property real surfaceRadius: Theme.connectedSurfaceRadius
+            readonly property color surfaceColor: Theme.popupLayerColor(Theme.surfaceContainer)
+            readonly property color surfaceBorderColor: Theme.isConnectedEffect
+                ? "transparent"
+                : (BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium)
+            readonly property real surfaceBorderWidth: Theme.isConnectedEffect ? 0 : BlurService.borderWidth
+            readonly property real surfaceTopLeftRadius: Theme.isConnectedEffect && (barTop || barLeft) ? 0 : surfaceRadius
+            readonly property real surfaceTopRightRadius: Theme.isConnectedEffect && (barTop || barRight) ? 0 : surfaceRadius
+            readonly property real surfaceBottomLeftRadius: Theme.isConnectedEffect && (barBottom || barLeft) ? 0 : surfaceRadius
+            readonly property real surfaceBottomRightRadius: Theme.isConnectedEffect && (barBottom || barRight) ? 0 : surfaceRadius
+            readonly property bool directionalEffect: Theme.isDirectionalEffect
+            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 horizontalConnectorExtent: Theme.isConnectedEffect && (barTop || barBottom) ? Theme.connectedCornerRadius : 0
+            readonly property real verticalConnectorExtent: Theme.isConnectedEffect && (barLeft || barRight) ? Theme.connectedCornerRadius : 0
+
+            function connectorWidth(spacing) {
+                return (barTop || barBottom) ? Theme.connectedCornerRadius : (spacing + Theme.connectedCornerRadius);
+            }
+
+            function connectorHeight(spacing) {
+                return (barTop || barBottom) ? (spacing + Theme.connectedCornerRadius) : Theme.connectedCornerRadius;
+            }
+
+            function connectorSeamX(baseX, bodyWidth, placement) {
+                if (barTop || barBottom)
+                    return placement === "left" ? baseX : baseX + bodyWidth;
+                return barLeft ? baseX : baseX + bodyWidth;
+            }
+
+            function connectorSeamY(baseY, bodyHeight, placement) {
+                if (barTop)
+                    return baseY;
+                if (barBottom)
+                    return baseY + bodyHeight;
+                return placement === "left" ? baseY : baseY + bodyHeight;
+            }
+
+            function connectorX(baseX, bodyWidth, placement, spacing) {
+                const seamX = connectorSeamX(baseX, bodyWidth, placement);
+                const width = connectorWidth(spacing);
+                if (barTop || barBottom)
+                    return placement === "left" ? seamX - width : seamX;
+                return barLeft ? seamX : seamX - width;
+            }
+
+            function connectorY(baseY, bodyHeight, placement, spacing) {
+                const seamY = connectorSeamY(baseY, bodyHeight, placement);
+                const height = connectorHeight(spacing);
+                if (barTop)
+                    return seamY;
+                if (barBottom)
+                    return seamY - height;
+                return placement === "left" ? seamY - height : seamY;
+            }
+
+            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)
@@ -509,96 +756,240 @@ 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
-                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)
+                id: directionalClipMask
 
-                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)
+                readonly property bool shouldClip: Theme.isDirectionalEffect
+                    && typeof SettingsData !== "undefined"
+                    && SettingsData.directionalAnimationMode > 0
+                readonly property real clipOversize: 1000
+                readonly property real connectedClipAllowance: Theme.isConnectedEffect
+                    ? Math.ceil(root.shadowRenderPadding + BlurService.borderWidth + 2)
+                    : 0
 
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: animationDuration
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                    }
+                clip: shouldClip
+
+                // Bound the clipping strictly to the bar side, allowing massive overflow on the other 3 sides for shadows
+                x: shouldClip ? (contentContainer.barLeft ? -connectedClipAllowance : -clipOversize) : 0
+                y: shouldClip ? (contentContainer.barTop ? -connectedClipAllowance : -clipOversize) : 0
+
+                width: {
+                    if (!shouldClip)
+                        return parent.width;
+                    if (contentContainer.barLeft)
+                        return parent.width + connectedClipAllowance + clipOversize;
+                    if (contentContainer.barRight)
+                        return parent.width + clipOversize + connectedClipAllowance;
+                    return parent.width + clipOversize * 2;
+                }
+                height: {
+                    if (!shouldClip)
+                        return parent.height;
+                    if (contentContainer.barTop)
+                        return parent.height + connectedClipAllowance + clipOversize;
+                    if (contentContainer.barBottom)
+                        return parent.height + clipOversize + connectedClipAllowance;
+                    return parent.height + clipOversize * 2;
                 }
 
-                Loader {
-                    id: contentLoader
-                    anchors.fill: parent
-                    active: root._primeContent || shouldBeVisible || contentWindow.visible
-                    asynchronous: false
-                }
-            }
+                Item {
+                    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
 
-            Rectangle {
-                width: parent.width
-                height: parent.height
-                x: contentWrapper.x
-                y: contentWrapper.y
-                opacity: contentWrapper.opacity
-                scale: contentWrapper.scale
-                visible: contentWrapper.visible
-                radius: Theme.cornerRadius
-                color: "transparent"
-                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-                border.width: BlurService.borderWidth
-                z: 100
-            }
-        }
+                    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
+                            readonly property real connectorExtent: Theme.isConnectedEffect ? Theme.connectedCornerRadius : 0
+                            readonly property real extraLeft: Theme.isConnectedEffect && (contentContainer.barTop || contentContainer.barBottom) ? connectorExtent : 0
+                            readonly property real extraRight: Theme.isConnectedEffect && (contentContainer.barTop || contentContainer.barBottom) ? connectorExtent : 0
+                            readonly property real extraTop: Theme.isConnectedEffect && (contentContainer.barLeft || contentContainer.barRight) ? connectorExtent : 0
+                            readonly property real extraBottom: Theme.isConnectedEffect && (contentContainer.barLeft || contentContainer.barRight) ? connectorExtent : 0
+                            readonly property real bodyX: extraLeft
+                            readonly property real bodyY: extraTop
+                            readonly property real bodyWidth: parent.width
+                            readonly property real bodyHeight: parent.height
+
+                            width: parent.width + extraLeft + extraRight
+                            height: parent.height + extraTop + extraBottom
+                            opacity: contentWrapper.opacity
+                            scale: contentWrapper.scale
+                            x: contentWrapper.x - extraLeft
+                            y: contentWrapper.y - extraTop
+                            level: root.shadowLevel
+                            direction: root.effectiveShadowDirection
+                            fallbackOffset: root.shadowFallbackOffset
+                            targetRadius: contentContainer.surfaceRadius
+                            topLeftRadius: contentContainer.surfaceTopLeftRadius
+                            topRightRadius: contentContainer.surfaceTopRightRadius
+                            bottomLeftRadius: contentContainer.surfaceBottomLeftRadius
+                            bottomRightRadius: contentContainer.surfaceBottomRightRadius
+                            targetColor: contentContainer.surfaceColor
+                            borderColor: contentContainer.surfaceBorderColor
+                            borderWidth: contentContainer.surfaceBorderWidth
+                            useCustomSource: Theme.isConnectedEffect
+                            shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+
+                            Item {
+                                anchors.fill: parent
+                                visible: Theme.isConnectedEffect
+                                clip: false
+
+                                Rectangle {
+                                    x: shadowSource.bodyX
+                                    y: shadowSource.bodyY
+                                    width: shadowSource.bodyWidth
+                                    height: shadowSource.bodyHeight
+                                    topLeftRadius: contentContainer.surfaceTopLeftRadius
+                                    topRightRadius: contentContainer.surfaceTopRightRadius
+                                    bottomLeftRadius: contentContainer.surfaceBottomLeftRadius
+                                    bottomRightRadius: contentContainer.surfaceBottomRightRadius
+                                    color: contentContainer.surfaceColor
+                                }
+
+                                ConnectedCorner {
+                                    visible: Theme.isConnectedEffect
+                                    barSide: contentContainer.connectedBarSide
+                                    placement: "left"
+                                    spacing: 0
+                                    connectorRadius: Theme.connectedCornerRadius
+                                    color: contentContainer.surfaceColor
+                                    x: Theme.snap(contentContainer.connectorX(shadowSource.bodyX, shadowSource.bodyWidth, placement, spacing), root.dpr)
+                                    y: Theme.snap(contentContainer.connectorY(shadowSource.bodyY, shadowSource.bodyHeight, placement, spacing), root.dpr)
+                                }
+
+                                ConnectedCorner {
+                                    visible: Theme.isConnectedEffect
+                                    barSide: contentContainer.connectedBarSide
+                                    placement: "right"
+                                    spacing: 0
+                                    connectorRadius: Theme.connectedCornerRadius
+                                    color: contentContainer.surfaceColor
+                                    x: Theme.snap(contentContainer.connectorX(shadowSource.bodyX, shadowSource.bodyWidth, placement, spacing), root.dpr)
+                                    y: Theme.snap(contentContainer.connectorY(shadowSource.bodyY, shadowSource.bodyHeight, placement, spacing), root.dpr)
+                                }
+                            }
+                        }
+
+                        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
+                                }
+                            }
+
+                            Item {
+                                anchors.fill: parent
+                                clip: false
+                                visible: !Theme.isConnectedEffect
+
+                                Rectangle {
+                                    anchors.fill: parent
+                                    topLeftRadius: contentContainer.surfaceTopLeftRadius
+                                    topRightRadius: contentContainer.surfaceTopRightRadius
+                                    bottomLeftRadius: contentContainer.surfaceBottomLeftRadius
+                                    bottomRightRadius: contentContainer.surfaceBottomRightRadius
+                                    color: contentContainer.surfaceColor
+                                    border.color: contentContainer.surfaceBorderColor
+                                    border.width: contentContainer.surfaceBorderWidth
+                                }
+
+                                ConnectedCorner {
+                                    visible: Theme.isConnectedEffect
+                                    barSide: contentContainer.connectedBarSide
+                                    placement: "left"
+                                    spacing: 0
+                                    connectorRadius: Theme.connectedCornerRadius
+                                    color: contentContainer.surfaceColor
+                                    x: Theme.snap(contentContainer.connectorX(0, contentWrapper.width, placement, spacing), root.dpr)
+                                    y: Theme.snap(contentContainer.connectorY(0, contentWrapper.height, placement, spacing), root.dpr)
+                                }
+
+                                ConnectedCorner {
+                                    visible: Theme.isConnectedEffect
+                                    barSide: contentContainer.connectedBarSide
+                                    placement: "right"
+                                    spacing: 0
+                                    connectorRadius: Theme.connectedCornerRadius
+                                    color: contentContainer.surfaceColor
+                                    x: Theme.snap(contentContainer.connectorX(0, contentWrapper.width, placement, spacing), root.dpr)
+                                    y: Theme.snap(contentContainer.connectorY(0, contentWrapper.height, placement, spacing), root.dpr)
+                                }
+                            }
+
+                            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

quickshell/Widgets/WindowBlur.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import qs.Common
 import qs.Services
 
 Item {
@@ -8,6 +9,7 @@ Item {
 
     required property var targetWindow
     property var blurItem: null
+    property bool blurEnabled: Theme.connectedSurfaceBlurEnabled
     property real blurX: 0
     property real blurY: 0
     property real blurWidth: 0
@@ -17,7 +19,7 @@ Item {
     property var _region: null
 
     function _apply() {
-        if (!BlurService.enabled || !targetWindow) {
+        if (!blurEnabled || !BlurService.enabled || !targetWindow) {
             _cleanup();
             return;
         }
@@ -43,6 +45,8 @@ Item {
         _region = null;
     }
 
+    onBlurEnabledChanged: _apply()
+
     Connections {
         target: BlurService
         function onEnabledChanged() {

quickshell/translations/settings_search_index.json

@@ -3400,7 +3400,7 @@
   },
   {
     "section": "popupTransparency",
-    "label": "Popup Transparency",
+    "label": "Surface Opacity",
     "tabIndex": 10,
     "category": "Theme & Colors",
     "keywords": [
@@ -3418,6 +3418,7 @@
       "popup",
       "scheme",
       "style",
+      "surface",
       "their",
       "theme",
       "translucent",