restore niri overview connected mode

quickshell/Common/AnimVariants.qml

@@ -5,121 +5,40 @@ import QtQuick
 import Quickshell
 import qs.Common
 
-// AnimVariants — Central tuning for animation and Motion Effects variants
-// (Material/Fluent/Dynamic) (Standard/Directional/Depth)
+// AnimVariants — central tuning for animation variants (Material/Fluent/Dynamic)
+// and motion effects (Standard/Directional/Depth). Lookups are indexed by enum
+// value: animationVariant 0=Material, 1=Fluent, 2=Dynamic; motionEffect
+// 0=Standard, 1=Directional, 2=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 int _variant: (typeof SettingsData === "undefined") ? 0 : SettingsData.animationVariant
+    readonly property int _effect: (typeof SettingsData === "undefined") ? 0 : SettingsData.motionEffect
 
-    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;
-        }
-    }
+    readonly property var _enterCurves: [Anims.expressiveDefaultSpatial, Anims.standardDecel, Anims.expressiveFastSpatial]
+    readonly property var _exitCurves: [Anims.emphasized, Anims.standard, Anims.emphasized]
+    readonly property var _directionalExitCurves: [Anims.emphasized, Anims.emphasizedAccel, Anims.emphasizedAccel]
+    readonly property var _enterDurationFactors: [1.0, 0.9, 1.08]
+    readonly property var _exitDurationFactors: [1.0, 0.85, 0.92]
+    readonly property var _cleanupPaddings: [50, 8, 24]
+    readonly property var _effectScaleCollapsed: [0.96, 1.0, 0.88]
+    readonly property var _effectAnimOffsets: [16, 144, 56]
 
-    // 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> variantEnterCurve: _enterCurves[_variant] || _enterCurves[0]
+    readonly property list<real> variantExitCurve: _exitCurves[_variant] || _exitCurves[0]
 
-    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;
-    }
+    readonly property list<real> variantModalEnterCurve: isDirectionalEffect && _variant !== 0 ? (_enterCurves[_variant] || _enterCurves[0]) : variantEnterCurve
+    readonly property list<real> variantModalExitCurve: isDirectionalEffect ? (_directionalExitCurves[_variant] || _exitCurves[0]) : 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> variantPopoutEnterCurve: isDirectionalEffect ? (_variant === 0 ? Anims.standardDecel : (_enterCurves[_variant] || _enterCurves[0])) : variantEnterCurve
+    readonly property list<real> variantPopoutExitCurve: isDirectionalEffect ? (_directionalExitCurves[_variant] || _exitCurves[0]) : variantExitCurve
 
-    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;
-        }
-    }
+    readonly property real variantEnterDurationFactor: _enterDurationFactors[_variant] !== undefined ? _enterDurationFactors[_variant] : 1.0
+    readonly property real variantExitDurationFactor: _exitDurationFactors[_variant] !== undefined ? _exitDurationFactors[_variant] : 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;
-    }
+    readonly property real variantOpacityDurationScale: _variant === 1 ? 0.55 : 1.0
 
     function variantDuration(baseDuration, entering) {
         const factor = entering ? variantEnterDurationFactor : variantExitDurationFactor;
@@ -127,53 +46,17 @@ Singleton {
     }
 
     function variantExitCleanupPadding() {
-        if (typeof SettingsData === "undefined")
-            return 50;
-        switch (SettingsData.motionEffect) {
-        case 1:
-            return 8;
-        case 2:
-            return 24;
-        default:
-            return 50;
-        }
+        return _cleanupPaddings[_effect] !== undefined ? _cleanupPaddings[_effect] : 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 bool isDirectionalEffect: isConnectedEffect || _effect === 1
+    readonly property bool isDepthEffect: _effect === 2
+    readonly property bool isConnectedEffect: (typeof SettingsData !== "undefined") && SettingsData.frameEnabled && _effect === 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;
-        }
-    }
+    readonly property real effectScaleCollapsed: _effectScaleCollapsed[_effect] !== undefined ? _effectScaleCollapsed[_effect] : 0.96
+    readonly property real effectAnimOffset: _effectAnimOffsets[_effect] !== undefined ? _effectAnimOffsets[_effect] : 16
 }

quickshell/Common/ConnectedModeState.qml

@@ -38,6 +38,13 @@ Singleton {
     // Dock slide offsets — hot-path updates separated from full geometry state
     property var dockSlides: ({})
 
+    function _cloneDict(src) {
+        const next = {};
+        for (const k in src)
+            next[k] = src[k];
+        return next;
+    }
+
     function hasPopoutOwner(claimId) {
         return !!claimId && popoutOwnerId === claimId;
     }
@@ -141,13 +148,6 @@ Singleton {
         return true;
     }
 
-    function _cloneDockStates() {
-        const next = {};
-        for (const screenName in dockStates)
-            next[screenName] = dockStates[screenName];
-        return next;
-    }
-
     function _normalizeDockState(state) {
         return {
             "reveal": !!(state && state.reveal),
@@ -165,7 +165,7 @@ Singleton {
         if (!screenName || !state)
             return false;
 
-        const next = _cloneDockStates();
+        const next = _cloneDict(dockStates);
         next[screenName] = _normalizeDockState(state);
         dockStates = next;
         return true;
@@ -175,15 +175,13 @@ Singleton {
         if (!screenName || !dockStates[screenName])
             return false;
 
-        const next = _cloneDockStates();
+        const next = _cloneDict(dockStates);
         delete next[screenName];
         dockStates = next;
 
         // Also clear corresponding slide
         if (dockSlides[screenName]) {
-            const nextSlides = {};
-            for (const k in dockSlides)
-                nextSlides[k] = dockSlides[k];
+            const nextSlides = _cloneDict(dockSlides);
             delete nextSlides[screenName];
             dockSlides = nextSlides;
         }
@@ -193,10 +191,11 @@ Singleton {
     function setDockSlide(screenName, x, y) {
         if (!screenName)
             return false;
-        const next = {};
-        for (const k in dockSlides)
-            next[k] = dockSlides[k];
-        next[screenName] = { "x": Number(x), "y": Number(y) };
+        const next = _cloneDict(dockSlides);
+        next[screenName] = {
+            "x": Number(x),
+            "y": Number(y)
+        };
         dockSlides = next;
         return true;
     }
@@ -204,25 +203,18 @@ Singleton {
     // ─── Notification state (per screen, updated by NotificationSurface) ──────
 
     readonly property var emptyNotificationState: ({
-        "visible": false,
-        "barSide": "top",
-        "bodyX": 0,
-        "bodyY": 0,
-        "bodyW": 0,
-        "bodyH": 0,
-        "omitStartConnector": false,
-        "omitEndConnector": false
-    })
+            "visible": false,
+            "barSide": "top",
+            "bodyX": 0,
+            "bodyY": 0,
+            "bodyW": 0,
+            "bodyH": 0,
+            "omitStartConnector": false,
+            "omitEndConnector": false
+        })
 
     property var notificationStates: ({})
 
-    function _cloneNotificationStates() {
-        const next = {};
-        for (const screenName in notificationStates)
-            next[screenName] = notificationStates[screenName];
-        return next;
-    }
-
     function _normalizeNotificationState(state) {
         return {
             "visible": !!(state && state.visible),
@@ -239,20 +231,13 @@ Singleton {
     function _sameNotificationGeometry(a, b) {
         if (!a || !b)
             return false;
-        return Math.abs(Number(a.bodyX) - Number(b.bodyX)) < 0.5
-            && Math.abs(Number(a.bodyY) - Number(b.bodyY)) < 0.5
-            && Math.abs(Number(a.bodyW) - Number(b.bodyW)) < 0.5
-            && Math.abs(Number(a.bodyH) - Number(b.bodyH)) < 0.5;
+        return Math.abs(Number(a.bodyX) - Number(b.bodyX)) < 0.5 && Math.abs(Number(a.bodyY) - Number(b.bodyY)) < 0.5 && Math.abs(Number(a.bodyW) - Number(b.bodyW)) < 0.5 && Math.abs(Number(a.bodyH) - Number(b.bodyH)) < 0.5;
     }
 
     function _sameNotificationState(a, b) {
         if (!a || !b)
             return false;
-        return a.visible === b.visible
-            && a.barSide === b.barSide
-            && a.omitStartConnector === b.omitStartConnector
-            && a.omitEndConnector === b.omitEndConnector
-            && _sameNotificationGeometry(a, b);
+        return a.visible === b.visible && a.barSide === b.barSide && a.omitStartConnector === b.omitStartConnector && a.omitEndConnector === b.omitEndConnector && _sameNotificationGeometry(a, b);
     }
 
     function setNotificationState(screenName, state) {
@@ -263,7 +248,7 @@ Singleton {
         if (_sameNotificationState(notificationStates[screenName], normalized))
             return true;
 
-        const next = _cloneNotificationStates();
+        const next = _cloneDict(notificationStates);
         next[screenName] = normalized;
         notificationStates = next;
         return true;
@@ -273,7 +258,7 @@ Singleton {
         if (!screenName || !notificationStates[screenName])
             return false;
 
-        const next = _cloneNotificationStates();
+        const next = _cloneDict(notificationStates);
         delete next[screenName];
         notificationStates = next;
         return true;
@@ -281,27 +266,20 @@ Singleton {
 
     // DankModal / DankLauncherV2Modal State
     readonly property var emptyModalState: ({
-        "visible": false,
-        "barSide": "bottom",
-        "bodyX": 0,
-        "bodyY": 0,
-        "bodyW": 0,
-        "bodyH": 0,
-        "animX": 0,
-        "animY": 0,
-        "omitStartConnector": false,
-        "omitEndConnector": false
-    })
+            "visible": false,
+            "barSide": "bottom",
+            "bodyX": 0,
+            "bodyY": 0,
+            "bodyW": 0,
+            "bodyH": 0,
+            "animX": 0,
+            "animY": 0,
+            "omitStartConnector": false,
+            "omitEndConnector": false
+        })
 
     property var modalStates: ({})
 
-    function _cloneModalStates() {
-        const next = {};
-        for (const screenName in modalStates)
-            next[screenName] = modalStates[screenName];
-        return next;
-    }
-
     function _normalizeModalState(state) {
         return {
             "visible": !!(state && state.visible),
@@ -320,22 +298,13 @@ Singleton {
     function _sameModalGeometry(a, b) {
         if (!a || !b)
             return false;
-        return Math.abs(Number(a.bodyX) - Number(b.bodyX)) < 0.5
-            && Math.abs(Number(a.bodyY) - Number(b.bodyY)) < 0.5
-            && Math.abs(Number(a.bodyW) - Number(b.bodyW)) < 0.5
-            && Math.abs(Number(a.bodyH) - Number(b.bodyH)) < 0.5
-            && Math.abs(Number(a.animX) - Number(b.animX)) < 0.5
-            && Math.abs(Number(a.animY) - Number(b.animY)) < 0.5;
+        return Math.abs(Number(a.bodyX) - Number(b.bodyX)) < 0.5 && Math.abs(Number(a.bodyY) - Number(b.bodyY)) < 0.5 && Math.abs(Number(a.bodyW) - Number(b.bodyW)) < 0.5 && Math.abs(Number(a.bodyH) - Number(b.bodyH)) < 0.5 && Math.abs(Number(a.animX) - Number(b.animX)) < 0.5 && Math.abs(Number(a.animY) - Number(b.animY)) < 0.5;
     }
 
     function _sameModalState(a, b) {
         if (!a || !b)
             return false;
-        return a.visible === b.visible
-            && a.barSide === b.barSide
-            && a.omitStartConnector === b.omitStartConnector
-            && a.omitEndConnector === b.omitEndConnector
-            && _sameModalGeometry(a, b);
+        return a.visible === b.visible && a.barSide === b.barSide && a.omitStartConnector === b.omitStartConnector && a.omitEndConnector === b.omitEndConnector && _sameModalGeometry(a, b);
     }
 
     function setModalState(screenName, state) {
@@ -346,7 +315,7 @@ Singleton {
         if (_sameModalState(modalStates[screenName], normalized))
             return true;
 
-        const next = _cloneModalStates();
+        const next = _cloneDict(modalStates);
         next[screenName] = normalized;
         modalStates = next;
         return true;
@@ -356,71 +325,46 @@ Singleton {
         if (!screenName || !modalStates[screenName])
             return false;
 
-        const next = _cloneModalStates();
+        const next = _cloneDict(modalStates);
         delete next[screenName];
         modalStates = next;
         return true;
     }
 
     function setModalAnim(screenName, animX, animY) {
-        if (!screenName)
-            return false;
-        const cur = modalStates[screenName];
+        const cur = screenName ? modalStates[screenName] : null;
         if (!cur)
             return false;
-        let changed = false;
-        const nextAnimX = animX !== undefined ? Number(animX) : cur.animX;
-        const nextAnimY = animY !== undefined ? Number(animY) : cur.animY;
-        if (Math.abs(nextAnimX - cur.animX) >= 0.5 || Math.abs(nextAnimY - cur.animY) >= 0.5) {
-            const updated = {
-                "visible": cur.visible,
-                "barSide": cur.barSide,
-                "bodyX": cur.bodyX,
-                "bodyY": cur.bodyY,
-                "bodyW": cur.bodyW,
-                "bodyH": cur.bodyH,
-                "animX": nextAnimX,
-                "animY": nextAnimY,
-                "omitStartConnector": cur.omitStartConnector,
-                "omitEndConnector": cur.omitEndConnector
-            };
-            const next = _cloneModalStates();
-            next[screenName] = updated;
-            modalStates = next;
-            changed = true;
-        }
-        return changed;
+        const nax = animX !== undefined ? Number(animX) : cur.animX;
+        const nay = animY !== undefined ? Number(animY) : cur.animY;
+        if (Math.abs(nax - cur.animX) < 0.5 && Math.abs(nay - cur.animY) < 0.5)
+            return false;
+        const next = _cloneDict(modalStates);
+        next[screenName] = Object.assign({}, cur, {
+            "animX": nax,
+            "animY": nay
+        });
+        modalStates = next;
+        return true;
     }
 
     function setModalBody(screenName, bodyX, bodyY, bodyW, bodyH) {
-        if (!screenName)
-            return false;
-        const cur = modalStates[screenName];
+        const cur = screenName ? modalStates[screenName] : null;
         if (!cur)
             return false;
         const nx = bodyX !== undefined ? Number(bodyX) : cur.bodyX;
         const ny = bodyY !== undefined ? Number(bodyY) : cur.bodyY;
         const nw = bodyW !== undefined ? Number(bodyW) : cur.bodyW;
         const nh = bodyH !== undefined ? Number(bodyH) : cur.bodyH;
-        if (Math.abs(nx - cur.bodyX) < 0.5
-            && Math.abs(ny - cur.bodyY) < 0.5
-            && Math.abs(nw - cur.bodyW) < 0.5
-            && Math.abs(nh - cur.bodyH) < 0.5)
+        if (Math.abs(nx - cur.bodyX) < 0.5 && Math.abs(ny - cur.bodyY) < 0.5 && Math.abs(nw - cur.bodyW) < 0.5 && Math.abs(nh - cur.bodyH) < 0.5)
             return false;
-        const updated = {
-            "visible": cur.visible,
-            "barSide": cur.barSide,
+        const next = _cloneDict(modalStates);
+        next[screenName] = Object.assign({}, cur, {
             "bodyX": nx,
             "bodyY": ny,
             "bodyW": nw,
-            "bodyH": nh,
-            "animX": cur.animX,
-            "animY": cur.animY,
-            "omitStartConnector": cur.omitStartConnector,
-            "omitEndConnector": cur.omitEndConnector
-        };
-        const next = _cloneModalStates();
-        next[screenName] = updated;
+            "bodyH": nh
+        });
         modalStates = next;
         return true;
     }
@@ -429,21 +373,17 @@ Singleton {
 
     property var dockRetractRequests: ({})
 
-    function _cloneRetractRequests() {
-        const next = {};
-        for (const k in dockRetractRequests)
-            next[k] = dockRetractRequests[k];
-        return next;
-    }
-
     function requestDockRetract(requesterId, screenName, side) {
         if (!requesterId || !screenName || !side)
             return false;
         const existing = dockRetractRequests[requesterId];
         if (existing && existing.screenName === screenName && existing.side === side)
             return true;
-        const next = _cloneRetractRequests();
-        next[requesterId] = { "screenName": screenName, "side": side };
+        const next = _cloneDict(dockRetractRequests);
+        next[requesterId] = {
+            "screenName": screenName,
+            "side": side
+        };
         dockRetractRequests = next;
         return true;
     }
@@ -451,7 +391,7 @@ Singleton {
     function releaseDockRetract(requesterId) {
         if (!requesterId || !dockRetractRequests[requesterId])
             return false;
-        const next = _cloneRetractRequests();
+        const next = _cloneDict(dockRetractRequests);
         delete next[requesterId];
         dockRetractRequests = next;
         return true;

quickshell/Common/ConnectorGeometry.js

@@ -0,0 +1,68 @@
+.pragma library
+
+// Geometry for connected-frame arc connectors.
+// `barSide` is one of "top" | "bottom" | "left" | "right" — the edge where the
+// host bar/dock sits. `placement` is "left" (start) or "right" (end) of the
+// body's far edge. `radius` is the connector's arc radius. `spacing` is the
+// gap between the host edge and the body.
+
+function isVertical(barSide) {
+    return barSide === "left" || barSide === "right";
+}
+
+function isHorizontal(barSide) {
+    return barSide === "top" || barSide === "bottom";
+}
+
+function connectorWidth(barSide, spacing, radius) {
+    return isVertical(barSide) ? (spacing + radius) : radius;
+}
+
+function connectorHeight(barSide, spacing, radius) {
+    return isVertical(barSide) ? radius : (spacing + radius);
+}
+
+function seamX(barSide, baseX, bodyWidth, placement) {
+    if (!isVertical(barSide))
+        return placement === "left" ? baseX : baseX + bodyWidth;
+    return barSide === "left" ? baseX : baseX + bodyWidth;
+}
+
+function seamY(barSide, baseY, bodyHeight, placement) {
+    if (barSide === "top")
+        return baseY;
+    if (barSide === "bottom")
+        return baseY + bodyHeight;
+    return placement === "left" ? baseY : baseY + bodyHeight;
+}
+
+function connectorX(barSide, baseX, bodyWidth, placement, spacing, radius) {
+    var s = seamX(barSide, baseX, bodyWidth, placement);
+    var w = connectorWidth(barSide, spacing, radius);
+    if (!isVertical(barSide))
+        return placement === "left" ? s - w : s;
+    return barSide === "left" ? s : s - w;
+}
+
+function connectorY(barSide, baseY, bodyHeight, placement, spacing, radius) {
+    var s = seamY(barSide, baseY, bodyHeight, placement);
+    var h = connectorHeight(barSide, spacing, radius);
+    if (barSide === "top")
+        return s;
+    if (barSide === "bottom")
+        return s - h;
+    return placement === "left" ? s - h : s;
+}
+
+// Which corner of the connector's bounding rect hosts the concave arc that
+// carves into the body. Used for arc-sweep orientation.
+function arcCorner(barSide, placement) {
+    var left = placement === "left";
+    if (barSide === "top")
+        return left ? "bottomLeft" : "bottomRight";
+    if (barSide === "bottom")
+        return left ? "topLeft" : "topRight";
+    if (barSide === "left")
+        return left ? "topRight" : "bottomRight";
+    return left ? "topLeft" : "bottomLeft";
+}

quickshell/Common/SettingsData.qml

@@ -244,25 +244,21 @@ Singleton {
     onPreviousDirectionalModeChanged: saveSettings()
     property var connectedFrameBarStyleBackups: ({})
     onConnectedFrameBarStyleBackupsChanged: saveSettings()
-    readonly property bool connectedFrameModeActive: frameEnabled
-        && motionEffect === SettingsData.AnimationEffect.Directional
-        && directionalAnimationMode === 3
+    readonly property bool connectedFrameModeActive: frameEnabled && motionEffect === SettingsData.AnimationEffect.Directional && directionalAnimationMode === 3
     onConnectedFrameModeActiveChanged: {
         if (_loading)
             return;
-        if (connectedFrameModeActive) {
-            _captureConnectedFrameBarStyleBackups(barConfigs, true);
-            _enforceConnectedModeBarStyleReset();
-        } else {
-            _restoreConnectedFrameBarStyleBackups();
-        }
+        _reconcileConnectedFrameBarStyles();
     }
 
     readonly property color effectiveFrameColor: {
         const fc = frameColor;
-        if (!fc || fc === "default") return Theme.surfaceContainer;
-        if (fc === "primary") return Theme.primary;
-        if (fc === "surface") return Theme.surface;
+        if (!fc || fc === "default")
+            return Theme.surfaceContainer;
+        if (fc === "primary")
+            return Theme.primary;
+        if (fc === "surface")
+            return Theme.surface;
         return fc;
     }
 
@@ -1547,43 +1543,8 @@ Singleton {
             updateBarConfigs();
     }
 
-    function _reconcileConnectedFrameBarStyles() {
-        if (connectedFrameModeActive) {
-            if (!_hasConnectedFrameBarStyleBackups())
-                _captureConnectedFrameBarStyleBackups(barConfigs, true);
-            _enforceConnectedModeBarStyleReset();
-            return;
-        }
-        _restoreConnectedFrameBarStyleBackups();
-    }
-
-    function _sanitizeBarConfigForConnectedFrame(config) {
-        if (!connectedFrameModeActive || !config)
-            return config;
-
-        let changed = false;
-        const sanitized = Object.assign({}, config);
-
-        if ((sanitized.shadowIntensity ?? 0) !== 0) {
-            sanitized.shadowIntensity = 0;
-            changed = true;
-        }
-        if (sanitized.squareCorners ?? false) {
-            sanitized.squareCorners = false;
-            changed = true;
-        }
-        if (sanitized.gothCornersEnabled ?? false) {
-            sanitized.gothCornersEnabled = false;
-            changed = true;
-        }
-        if (sanitized.borderEnabled ?? false) {
-            sanitized.borderEnabled = false;
-            changed = true;
-        }
-
-        return changed ? sanitized : config;
-    }
-
+    // Zeroes out connected-mode-hostile fields (shadow, square/goth corners, border).
+    // Returns { configs, changed } — `configs` is the same ref when no change.
     function _sanitizeBarConfigsForConnectedFrame(configs) {
         if (!connectedFrameModeActive || !Array.isArray(configs))
             return {
@@ -1591,26 +1552,53 @@ Singleton {
                 "changed": false
             };
 
-        let changed = false;
-        const sanitizedConfigs = configs.map(config => {
-            const sanitized = _sanitizeBarConfigForConnectedFrame(config);
-            if (sanitized !== config)
-                changed = true;
-            return sanitized;
+        let anyChanged = false;
+        const out = configs.map(cfg => {
+            if (!cfg)
+                return cfg;
+            let dirty = false;
+            const s = Object.assign({}, cfg);
+            if ((s.shadowIntensity ?? 0) !== 0) {
+                s.shadowIntensity = 0;
+                dirty = true;
+            }
+            if (s.squareCorners ?? false) {
+                s.squareCorners = false;
+                dirty = true;
+            }
+            if (s.gothCornersEnabled ?? false) {
+                s.gothCornersEnabled = false;
+                dirty = true;
+            }
+            if (s.borderEnabled ?? false) {
+                s.borderEnabled = false;
+                dirty = true;
+            }
+            if (dirty)
+                anyChanged = true;
+            return dirty ? s : cfg;
         });
-
         return {
-            "configs": changed ? sanitizedConfigs : configs,
-            "changed": changed
+            "configs": anyChanged ? out : configs,
+            "changed": anyChanged
         };
     }
 
-    function _enforceConnectedModeBarStyleReset() {
-        const result = _sanitizeBarConfigsForConnectedFrame(barConfigs);
-        if (!result.changed)
+    // Single entry point for connected-mode bar-style state.
+    //   active  → capture backups (if not yet) and sanitize bar configs
+    //   !active → restore backups
+    function _reconcileConnectedFrameBarStyles() {
+        if (!connectedFrameModeActive) {
+            _restoreConnectedFrameBarStyleBackups();
             return;
-        barConfigs = result.configs;
-        updateBarConfigs();
+        }
+        if (!_hasConnectedFrameBarStyleBackups())
+            _captureConnectedFrameBarStyleBackups(barConfigs, true);
+        const result = _sanitizeBarConfigsForConnectedFrame(barConfigs);
+        if (result.changed) {
+            barConfigs = result.configs;
+            updateBarConfigs();
+        }
     }
 
     function detectAvailableIconThemes() {
@@ -2175,54 +2163,77 @@ Singleton {
     }
 
     function getActiveBarEdgeForScreen(screen) {
-        if (!screen) return "";
+        if (!screen)
+            return "";
         for (var i = 0; i < barConfigs.length; i++) {
             var bc = barConfigs[i];
-            if (!bc.enabled) continue;
+            if (!bc.enabled)
+                continue;
             var prefs = bc.screenPreferences || ["all"];
-            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs))
+                continue;
             switch (bc.position ?? 0) {
-            case SettingsData.Position.Top:    return "top";
-            case SettingsData.Position.Bottom: return "bottom";
-            case SettingsData.Position.Left:   return "left";
-            case SettingsData.Position.Right:  return "right";
+            case SettingsData.Position.Top:
+                return "top";
+            case SettingsData.Position.Bottom:
+                return "bottom";
+            case SettingsData.Position.Left:
+                return "left";
+            case SettingsData.Position.Right:
+                return "right";
             }
         }
         return "";
     }
 
     function getActiveBarEdgesForScreen(screen) {
-        if (!screen) return [];
+        if (!screen)
+            return [];
         var edges = [];
         for (var i = 0; i < barConfigs.length; i++) {
             var bc = barConfigs[i];
-            if (!bc.enabled) continue;
+            if (!bc.enabled)
+                continue;
             var prefs = bc.screenPreferences || ["all"];
-            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs))
+                continue;
             switch (bc.position ?? 0) {
-            case SettingsData.Position.Top:    edges.push("top"); break;
-            case SettingsData.Position.Bottom: edges.push("bottom"); break;
-            case SettingsData.Position.Left:   edges.push("left"); break;
-            case SettingsData.Position.Right:  edges.push("right"); break;
+            case SettingsData.Position.Top:
+                edges.push("top");
+                break;
+            case SettingsData.Position.Bottom:
+                edges.push("bottom");
+                break;
+            case SettingsData.Position.Left:
+                edges.push("left");
+                break;
+            case SettingsData.Position.Right:
+                edges.push("right");
+                break;
             }
         }
         return edges;
     }
 
     function frameEdgeInsetForSide(screen, side) {
-        if (!frameEnabled || !screen) return 0;
+        if (!frameEnabled || !screen)
+            return 0;
         const edges = getActiveBarEdgesForScreen(screen);
         return edges.includes(side) ? frameBarSize : frameThickness;
     }
 
     function getActiveBarThicknessForScreen(screen) {
-        if (frameEnabled) return frameBarSize;
-        if (!screen) return frameThickness;
+        if (frameEnabled)
+            return frameBarSize;
+        if (!screen)
+            return frameThickness;
         for (var i = 0; i < barConfigs.length; i++) {
             var bc = barConfigs[i];
-            if (!bc.enabled) continue;
+            if (!bc.enabled)
+                continue;
             var prefs = bc.screenPreferences || ["all"];
-            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs))
+                continue;
             const innerPadding = bc.innerPadding ?? 4;
             const barT = Math.max(26 + innerPadding * 0.6, Theme.barHeight - 4 - (8 - innerPadding));
             const spacing = bc.spacing ?? 4;

quickshell/Common/Theme.qml

@@ -960,7 +960,11 @@ Singleton {
         "expressiveEffects": [0.34, 0.8, 0.34, 1, 1, 1]
     }
 
-    // Delegates to AnimVariants.qml for curves, timing, scale, and offsets.
+    // ─── Animation variant proxy ──────────────────────────────────────────────
+    // Theme is the canonical access point for animation variant state. The
+    // aliases below forward to AnimVariants.qml so consumers don't need two
+    // imports. ~200 call sites read through Theme.variantEnterCurve /
+    // Theme.isConnectedEffect / etc. — do NOT migrate to AnimVariants directly.
     readonly property list<real> variantEnterCurve: AnimVariants.variantEnterCurve
     readonly property list<real> variantExitCurve: AnimVariants.variantExitCurve
     readonly property list<real> variantModalEnterCurve: AnimVariants.variantModalEnterCurve
@@ -974,25 +978,28 @@ Singleton {
     readonly property bool isDepthEffect: AnimVariants.isDepthEffect
     readonly property bool isConnectedEffect: AnimVariants.isConnectedEffect
     readonly property real connectedCornerRadius: {
-        if (typeof SettingsData === "undefined") return 12;
+        if (typeof SettingsData === "undefined")
+            return 12;
         return SettingsData.connectedFrameModeActive ? 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);
+        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 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); }
+    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,

quickshell/Modals/Common/DankModal.qml

@@ -1,24 +1,17 @@
 import QtQuick
-import Quickshell
-import Quickshell.Wayland
 import qs.Common
 import qs.Services
-import qs.Widgets
 
 Item {
     id: root
 
+    readonly property bool useHyprlandFocusGrab: CompositorService.useHyprlandFocusGrab
     property string layerNamespace: "dms:modal"
-    property alias content: contentLoader.sourceComponent
-    property alias contentLoader: contentLoader
+    property Component content: null
     property Item directContent: null
     property real modalWidth: 400
     property real modalHeight: 300
     property var targetScreen
-    readonly property var effectiveScreen: contentWindow.screen ?? targetScreen
-    readonly property real screenWidth: effectiveScreen?.width ?? 1920
-    readonly property real screenHeight: effectiveScreen?.height ?? 1080
-    readonly property real dpr: effectiveScreen ? CompositorService.getScreenScale(effectiveScreen) : 1
     property bool showBackground: true
     property real backgroundOpacity: 0.5
     property string positioning: "center"
@@ -26,51 +19,16 @@ Item {
     property bool closeOnEscapeKey: true
     property bool closeOnBackgroundClick: true
     property string animationType: "scale"
-
-    // Opposite side from the launcher by default; subclasses may override
-    property string preferredConnectedBarSide: SettingsData.frameModalEmergeSide
-
-    readonly property bool frameConnectedMode: SettingsData.frameEnabled
-        && Theme.isConnectedEffect
-        && !!effectiveScreen
-        && SettingsData.isScreenInPreferences(effectiveScreen, SettingsData.frameScreenPreferences)
-
-    readonly property string resolvedConnectedBarSide: frameConnectedMode ? preferredConnectedBarSide : ""
-
-    readonly property bool frameOwnsConnectedChrome: frameConnectedMode && resolvedConnectedBarSide !== ""
-
-    function _dockOccupiesSide(side) {
-        if (!SettingsData.showDock) return false;
-        switch (side) {
-        case "top":    return SettingsData.dockPosition === SettingsData.Position.Top;
-        case "bottom": return SettingsData.dockPosition === SettingsData.Position.Bottom;
-        case "left":   return SettingsData.dockPosition === SettingsData.Position.Left;
-        case "right":  return SettingsData.dockPosition === SettingsData.Position.Right;
-        }
-        return false;
-    }
-
-    readonly property bool _dockBlocksEmergence: frameOwnsConnectedChrome
-        && _dockOccupiesSide(resolvedConnectedBarSide)
-
-    readonly property bool connectedMotionParity: Theme.isConnectedEffect
-    property int animationDuration: connectedMotionParity ? Theme.popoutAnimationDuration : Theme.modalAnimationDuration
-    property real animationScaleCollapsed: Theme.effectScaleCollapsed
-    property real animationOffset: Theme.effectAnimOffset
-    property list<real> animationEnterCurve: connectedMotionParity ? Theme.variantPopoutEnterCurve : Theme.variantModalEnterCurve
-    property list<real> animationExitCurve: connectedMotionParity ? Theme.variantPopoutExitCurve : Theme.variantModalExitCurve
-    property color backgroundColor: Theme.surfaceContainer
+    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 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
     property bool shouldHaveFocus: shouldBeVisible
     property bool allowFocusOverride: false
@@ -79,723 +37,133 @@ 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
 
     signal opened
     signal dialogClosed
     signal backgroundClicked
 
-    property bool animationsEnabled: true
+    readonly property var contentLoader: impl.item ? impl.item.contentLoader : null
+    readonly property alias modalFocusScope: _modalFocusScope
 
-    // ─── Connected chrome sync ────────────────────────────────────────────────
-    property string _chromeClaimId: ""
-    property bool _fullSyncPending: false
-
-    function _nextChromeClaimId() {
-        return layerNamespace + ":modal:" + (new Date()).getTime() + ":" + Math.floor(Math.random() * 1000);
-    }
-
-    function _currentScreenName() {
-        return effectiveScreen ? effectiveScreen.name : "";
-    }
-
-    function _publishModalChromeState() {
-        const screenName = _currentScreenName();
-        if (!screenName) return;
-        ConnectedModeState.setModalState(screenName, {
-            "visible": shouldBeVisible || contentWindow.visible,
-            "barSide": resolvedConnectedBarSide,
-            "bodyX": alignedX,
-            "bodyY": alignedY,
-            "bodyW": alignedWidth,
-            "bodyH": alignedHeight,
-            "animX": modalContainer ? modalContainer.animX : 0,
-            "animY": modalContainer ? modalContainer.animY : 0,
-            "omitStartConnector": false,
-            "omitEndConnector": false
-        });
-    }
-
-    function _syncModalChromeState() {
-        if (!frameOwnsConnectedChrome) {
-            _releaseModalChrome();
-            return;
-        }
-        if (!_chromeClaimId)
-            _chromeClaimId = _nextChromeClaimId();
-        _publishModalChromeState();
-        if (_dockBlocksEmergence && (shouldBeVisible || contentWindow.visible))
-            ConnectedModeState.requestDockRetract(_chromeClaimId, _currentScreenName(), resolvedConnectedBarSide);
-        else
-            ConnectedModeState.releaseDockRetract(_chromeClaimId);
-    }
-
-    function _flushFullSync() {
-        _fullSyncPending = false;
-        _syncModalChromeState();
-    }
-
-    function _queueFullSync() {
-        if (_fullSyncPending) return;
-        _fullSyncPending = true;
-        Qt.callLater(() => {
-            if (root && typeof root._flushFullSync === "function")
-                root._flushFullSync();
-        });
-    }
-
-    function _syncModalAnim() {
-        if (!frameOwnsConnectedChrome || !_chromeClaimId) return;
-        const screenName = _currentScreenName();
-        if (!screenName || !modalContainer) return;
-        ConnectedModeState.setModalAnim(screenName, modalContainer.animX, modalContainer.animY);
-    }
-
-    function _syncModalBody() {
-        if (!frameOwnsConnectedChrome || !_chromeClaimId) return;
-        const screenName = _currentScreenName();
-        if (!screenName) return;
-        ConnectedModeState.setModalBody(screenName, alignedX, alignedY, alignedWidth, alignedHeight);
-    }
-
-    function _releaseModalChrome() {
-        if (_chromeClaimId) {
-            ConnectedModeState.releaseDockRetract(_chromeClaimId);
-            _chromeClaimId = "";
-        }
-        const screenName = _currentScreenName();
-        if (screenName)
-            ConnectedModeState.clearModalState(screenName);
-    }
-
-    onFrameOwnsConnectedChromeChanged: _syncModalChromeState()
-    onResolvedConnectedBarSideChanged: _queueFullSync()
-    onShouldBeVisibleChanged: _queueFullSync()
-    onAlignedXChanged: _syncModalBody()
-    onAlignedYChanged: _syncModalBody()
-    onAlignedWidthChanged: _syncModalBody()
-    onAlignedHeightChanged: _syncModalBody()
-
-    Component.onDestruction: _releaseModalChrome()
-
-    Connections {
-        target: contentWindow
-        function onVisibleChanged() {
-            if (contentWindow.visible)
-                root._syncModalChromeState();
-            else
-                root._releaseModalChrome();
-        }
+    FocusScope {
+        id: _modalFocusScope
+        objectName: "modalFocusScope"
+        focus: true
+        anchors.fill: parent
     }
+    readonly property var contentWindow: impl.item ? impl.item.contentWindow : null
+    readonly property var clickCatcher: impl.item ? impl.item.clickCatcher : null
+    readonly property var effectiveScreen: impl.item ? impl.item.effectiveScreen : null
+    readonly property real screenWidth: impl.item ? impl.item.screenWidth : 1920
+    readonly property real screenHeight: impl.item ? impl.item.screenHeight : 1080
+    readonly property real dpr: impl.item ? impl.item.dpr : 1
+    readonly property bool isClosing: impl.item ? (impl.item.isClosing ?? false) : false
+    readonly property real alignedX: impl.item ? impl.item.alignedX : 0
+    readonly property real alignedY: impl.item ? impl.item.alignedY : 0
+    readonly property real alignedWidth: impl.item ? impl.item.alignedWidth : 0
+    readonly property real alignedHeight: impl.item ? impl.item.alignedHeight : 0
 
     function open() {
-        closeTimer.stop();
-        animationsEnabled = false;
-        frozenMotionOffsetX = modalContainer ? modalContainer.offsetX : 0;
-        frozenMotionOffsetY = modalContainer ? modalContainer.offsetY : animationOffset;
-
-        const focusedScreen = CompositorService.getFocusedScreen();
-        if (focusedScreen) {
-            contentWindow.screen = focusedScreen;
-            if (!useSingleWindow)
-                clickCatcher.screen = focusedScreen;
-        }
-
-        if (Theme.isDirectionalEffect || root.useBackground) {
-            if (!useSingleWindow)
-                clickCatcher.visible = true;
-            contentWindow.visible = true;
-        }
-        ModalManager.openModal(root);
-
-        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));
-        });
+        if (impl.item)
+            impl.item.open();
     }
 
     function close() {
-        shouldBeVisible = false;
-        shouldHaveFocus = false;
-        ModalManager.closeModal(root);
-        closeTimer.restart();
+        if (impl.item)
+            impl.item.close();
     }
 
     function instantClose() {
-        animationsEnabled = false;
-        shouldBeVisible = false;
-        shouldHaveFocus = false;
-        ModalManager.closeModal(root);
-        closeTimer.stop();
-        contentWindow.visible = false;
-        if (!useSingleWindow)
-            clickCatcher.visible = false;
-        dialogClosed();
-        Qt.callLater(() => animationsEnabled = true);
+        if (impl.item && typeof impl.item.instantClose === "function")
+            impl.item.instantClose();
     }
 
     function toggle() {
-        shouldBeVisible ? close() : open();
+        if (impl.item)
+            impl.item.toggle();
+    }
+
+    Loader {
+        id: impl
+        sourceComponent: SettingsData.connectedFrameModeActive ? connectedComp : standaloneComp
+        onItemChanged: if (item)
+            root._wireBackend(item)
+    }
+
+    Component {
+        id: standaloneComp
+        DankModalStandalone {}
+    }
+
+    Component {
+        id: connectedComp
+        DankModalConnected {}
+    }
+
+    function _wireBackend(it) {
+        if (!it)
+            return;
+
+        it.modalHandle = root;
+        it.layerNamespace = Qt.binding(() => root.layerNamespace);
+        it.content = Qt.binding(() => root.content);
+        it.directContent = Qt.binding(() => root.directContent);
+        it.modalWidth = Qt.binding(() => root.modalWidth);
+        it.modalHeight = Qt.binding(() => root.modalHeight);
+        it.targetScreen = Qt.binding(() => root.targetScreen);
+        it.showBackground = Qt.binding(() => root.showBackground);
+        it.backgroundOpacity = Qt.binding(() => root.backgroundOpacity);
+        it.positioning = Qt.binding(() => root.positioning);
+        it.customPosition = Qt.binding(() => root.customPosition);
+        it.closeOnEscapeKey = Qt.binding(() => root.closeOnEscapeKey);
+        it.closeOnBackgroundClick = Qt.binding(() => root.closeOnBackgroundClick);
+        it.animationType = Qt.binding(() => root.animationType);
+        it.animationDuration = Qt.binding(() => root.animationDuration);
+        it.animationScaleCollapsed = Qt.binding(() => root.animationScaleCollapsed);
+        it.animationOffset = Qt.binding(() => root.animationOffset);
+        it.animationEnterCurve = Qt.binding(() => root.animationEnterCurve);
+        it.animationExitCurve = Qt.binding(() => root.animationExitCurve);
+        it.backgroundColor = Qt.binding(() => root.backgroundColor);
+        it.borderColor = Qt.binding(() => root.borderColor);
+        it.borderWidth = Qt.binding(() => root.borderWidth);
+        it.cornerRadius = Qt.binding(() => root.cornerRadius);
+        it.enableShadow = Qt.binding(() => root.enableShadow);
+        it.allowFocusOverride = Qt.binding(() => root.allowFocusOverride);
+        it.allowStacking = Qt.binding(() => root.allowStacking);
+        it.keepContentLoaded = Qt.binding(() => root.keepContentLoaded);
+        it.keepPopoutsOpen = Qt.binding(() => root.keepPopoutsOpen);
+        it.customKeyboardFocus = Qt.binding(() => root.customKeyboardFocus);
+        it.useOverlayLayer = Qt.binding(() => root.useOverlayLayer);
+
+        it.shouldBeVisible = root.shouldBeVisible;
+        it.shouldBeVisibleChanged.connect(function () {
+            if (root.shouldBeVisible !== it.shouldBeVisible)
+                root.shouldBeVisible = it.shouldBeVisible;
+        });
+
+        it.shouldHaveFocus = root.shouldHaveFocus;
+        it.shouldHaveFocusChanged.connect(function () {
+            if (root.shouldHaveFocus !== it.shouldHaveFocus)
+                root.shouldHaveFocus = it.shouldHaveFocus;
+        });
+
+        it.opened.connect(root.opened);
+        it.dialogClosed.connect(root.dialogClosed);
+        it.backgroundClicked.connect(root.backgroundClicked);
+
+        if (it.modalFocusScope)
+            _modalFocusScope.parent = it.modalFocusScope;
     }
 
     Connections {
-        target: ModalManager
-        function onCloseAllModalsExcept(excludedModal) {
-            if (excludedModal !== root && !allowStacking && shouldBeVisible)
-                close();
+        target: root
+        function onShouldBeVisibleChanged() {
+            if (impl.item && impl.item.shouldBeVisible !== root.shouldBeVisible)
+                impl.item.shouldBeVisible = root.shouldBeVisible;
         }
-    }
-
-    Connections {
-        target: Quickshell
-        function onScreensChanged() {
-            if (!contentWindow.screen)
-                return;
-            const currentScreenName = contentWindow.screen.name;
-            let screenStillExists = false;
-            for (let i = 0; i < Quickshell.screens.length; i++) {
-                if (Quickshell.screens[i].name === currentScreenName) {
-                    screenStillExists = true;
-                    break;
-                }
-            }
-            if (screenStillExists)
-                return;
-            const newScreen = CompositorService.getFocusedScreen();
-            if (newScreen) {
-                contentWindow.screen = newScreen;
-                if (!useSingleWindow)
-                    clickCatcher.screen = newScreen;
-            }
-        }
-    }
-
-    Timer {
-        id: closeTimer
-        interval: Theme.variantCloseInterval(animationDuration)
-        onTriggered: {
-            if (shouldBeVisible)
-                return;
-            contentWindow.visible = false;
-            if (!useSingleWindow)
-                clickCatcher.visible = false;
-            dialogClosed();
-        }
-    }
-
-    // shadowRenderPadding is zeroed when frame owns the chrome
-    // Wayland then clips any content translating past
-    readonly property var shadowLevel: Theme.elevationLevel3
-    readonly property real shadowFallbackOffset: 6
-    readonly property real shadowRenderPadding: (!frameOwnsConnectedChrome && root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, Theme.elevationLightDirection, shadowFallbackOffset, 8, 16) : 0
-    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)
-
-    function _frameEdgeInset(side) {
-        if (!effectiveScreen) return 0;
-        return SettingsData.frameEdgeInsetForSide(effectiveScreen, side);
-    }
-
-    // frameEdgeInsetForSide is the full inset; do not add frameBarSize
-    readonly property real _connectedAlignedX: {
-        switch (resolvedConnectedBarSide) {
-        case "top":
-        case "bottom": {
-            const insetL = _frameEdgeInset("left");
-            const insetR = _frameEdgeInset("right");
-            const usable = Math.max(0, screenWidth - insetL - insetR);
-            return insetL + Math.max(0, (usable - alignedWidth) / 2);
-        }
-        case "left":
-            return _frameEdgeInset("left");
-        case "right":
-            return screenWidth - alignedWidth - _frameEdgeInset("right");
-        }
-        return 0;
-    }
-
-    readonly property real _connectedAlignedY: {
-        switch (resolvedConnectedBarSide) {
-        case "top":
-            return _frameEdgeInset("top");
-        case "bottom":
-            return screenHeight - alignedHeight - _frameEdgeInset("bottom");
-        case "left":
-        case "right": {
-            const insetT = _frameEdgeInset("top");
-            const insetB = _frameEdgeInset("bottom");
-            const usable = Math.max(0, screenHeight - insetT - insetB);
-            return insetT + Math.max(0, (usable - alignedHeight) / 2);
-        }
-        }
-        return 0;
-    }
-
-    readonly property real alignedX: Theme.snap(frameOwnsConnectedChrome ? _connectedAlignedX : (() => {
-            switch (positioning) {
-            case "center":
-                return (screenWidth - alignedWidth) / 2;
-            case "top-right":
-                return Math.max(Theme.spacingL, screenWidth - alignedWidth - Theme.spacingL);
-            case "custom":
-                return customPosition.x;
-            default:
-                return 0;
-            }
-        })(), dpr)
-
-    readonly property real alignedY: Theme.snap(frameOwnsConnectedChrome ? _connectedAlignedY : (() => {
-            switch (positioning) {
-            case "center":
-                return (screenHeight - alignedHeight) / 2;
-            case "top-right":
-                return Theme.barHeight + Theme.spacingXS;
-            case "custom":
-                return customPosition.y;
-            default:
-                return 0;
-            }
-        })(), dpr)
-
-    PanelWindow {
-        id: clickCatcher
-        visible: false
-        color: "transparent"
-
-        WlrLayershell.namespace: root.layerNamespace + ":clickcatcher"
-        WlrLayershell.layer: WlrLayershell.Top
-        WlrLayershell.exclusiveZone: -1
-        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-
-        anchors {
-            top: true
-            left: true
-            right: true
-            bottom: true
-        }
-
-        mask: Region {
-            item: Rectangle {
-                x: root.alignedX
-                y: root.alignedY
-                width: root.alignedWidth
-                height: root.alignedHeight
-            }
-            intersection: Intersection.Xor
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            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 {
-        id: contentWindow
-        visible: false
-        color: "transparent"
-
-        WindowBlur {
-            targetWindow: contentWindow
-            blurEnabled: root.effectiveBlurEnabled && !root.frameOwnsConnectedChrome
-            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: (root.shouldBeVisible && animatedContent.opacity > 0 && !root.frameOwnsConnectedChrome) ? modalContainer.width * s : 0
-            blurHeight: (root.shouldBeVisible && animatedContent.opacity > 0 && !root.frameOwnsConnectedChrome) ? modalContainer.height * s : 0
-            blurRadius: root.effectiveCornerRadius
-        }
-
-        WlrLayershell.namespace: root.layerNamespace
-        WlrLayershell.layer: {
-            if (root.useOverlayLayer)
-                return WlrLayershell.Overlay;
-            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.exclusiveZone: -1
-        WlrLayershell.keyboardFocus: {
-            if (customKeyboardFocus !== null)
-                return customKeyboardFocus;
-            if (!shouldHaveFocus)
-                return WlrKeyboardFocus.None;
-            if (root.useHyprlandFocusGrab)
-                return WlrKeyboardFocus.OnDemand;
-            return WlrKeyboardFocus.Exclusive;
-        }
-
-        anchors {
-            left: true
-            top: true
-            right: root.useSingleWindow
-            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: actualMarginLeft
-            top: actualMarginTop
-            right: 0
-            bottom: 0
-        }
-
-        implicitWidth: root.useSingleWindow ? 0 : root.alignedWidth + (shadowBuffer * 2)
-        implicitHeight: root.useSingleWindow ? 0 : root.alignedHeight + (shadowBuffer * 2)
-
-        onVisibleChanged: {
-            if (visible) {
-                opened();
-            } else {
-                if (Qt.inputMethod) {
-                    Qt.inputMethod.hide();
-                    Qt.inputMethod.reset();
-                }
-            }
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            enabled: root.useSingleWindow && root.closeOnBackgroundClick && root.shouldBeVisible
-            z: -2
-            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
-                }
-            }
-        }
-
-        Item {
-            id: modalContainer
-            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
-
-            MouseArea {
-                anchors.fill: parent
-                enabled: root.useSingleWindow && root.shouldBeVisible
-                hoverEnabled: false
-                acceptedButtons: Qt.AllButtons
-                onPressed: mouse.accepted = true
-                onClicked: mouse.accepted = true
-                z: -1
-            }
-
-            readonly property bool slide: root.animationType === "slide"
-            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
-            // Connected emergence: travel from the resolved bar edge, matching DankPopout cadence.
-            readonly property real connectedEmergenceTravelX: Math.max(root.animationOffset, root.alignedWidth + Theme.spacingL)
-            readonly property real connectedEmergenceTravelY: Math.max(root.animationOffset, root.alignedHeight + Theme.spacingL)
-            readonly property real offsetX: {
-                if (root.frameOwnsConnectedChrome) {
-                    switch (root.resolvedConnectedBarSide) {
-                    case "left":  return -connectedEmergenceTravelX;
-                    case "right": return connectedEmergenceTravelX;
-                    }
-                    return 0;
-                }
-                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 (root.frameOwnsConnectedChrome) {
-                    switch (root.resolvedConnectedBarSide) {
-                    case "top":    return -connectedEmergenceTravelY;
-                    case "bottom": return connectedEmergenceTravelY;
-                    }
-                    return 0;
-                }
-                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
-
-            onAnimXChanged: if (root.frameOwnsConnectedChrome) root._syncModalAnim()
-            onAnimYChanged: if (root.frameOwnsConnectedChrome) root._syncModalAnim()
-
-            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
-                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
-                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
-                NumberAnimation {
-                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-
-            Item {
-                id: contentContainer
-                anchors.centerIn: parent
-                width: parent.width
-                height: parent.height
-                clip: false
-
-                Item {
-                    id: animatedContent
-                    anchors.fill: parent
-                    clip: false
-                    opacity: (Theme.isDirectionalEffect && !Theme.isConnectedEffect) ? 1 : (root.shouldBeVisible ? 1 : 0)
-                    scale: modalContainer.scaleValue
-                    transformOrigin: Item.Center
-
-                    Behavior on opacity {
-                        enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
-                        NumberAnimation {
-                            duration: Math.round(Theme.variantDuration(animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                        }
-                    }
-
-                    ElevationShadow {
-                        id: modalShadowLayer
-                        anchors.fill: parent
-                        level: root.shadowLevel
-                        fallbackOffset: root.shadowFallbackOffset
-                        targetRadius: root.effectiveCornerRadius
-                        targetColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBackgroundColor
-                        borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
-                        borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
-                        shadowEnabled: !root.frameOwnsConnectedChrome && root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
-                    }
-
-                    Rectangle {
-                        anchors.fill: parent
-                        radius: root.effectiveCornerRadius
-                        color: "transparent"
-                        border.color: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? "transparent" : BlurService.borderColor
-                        border.width: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? 0 : BlurService.borderWidth
-                        z: 100
-                    }
-
-                    FocusScope {
-                        anchors.fill: parent
-                        focus: root.shouldBeVisible
-                        clip: false
-
-                        Item {
-                            id: directContentWrapper
-                            anchors.fill: parent
-                            visible: root.directContent !== null
-                            focus: true
-                            clip: false
-
-                            Component.onCompleted: {
-                                if (root.directContent) {
-                                    root.directContent.parent = directContentWrapper;
-                                    root.directContent.anchors.fill = directContentWrapper;
-                                    Qt.callLater(() => root.directContent.forceActiveFocus());
-                                }
-                            }
-
-                            Connections {
-                                target: root
-                                function onDirectContentChanged() {
-                                    if (root.directContent) {
-                                        root.directContent.parent = directContentWrapper;
-                                        root.directContent.anchors.fill = directContentWrapper;
-                                        Qt.callLater(() => root.directContent.forceActiveFocus());
-                                    }
-                                }
-                            }
-                        }
-
-                        Loader {
-                            id: contentLoader
-                            anchors.fill: parent
-                            active: root.directContent === null && (root.keepContentLoaded || root.shouldBeVisible || contentWindow.visible)
-                            asynchronous: false
-                            focus: true
-                            clip: false
-                            visible: root.directContent === null
-
-                            onLoaded: {
-                                if (item) {
-                                    Qt.callLater(() => item.forceActiveFocus());
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        FocusScope {
-            id: focusScope
-            objectName: "modalFocusScope"
-            anchors.fill: parent
-            visible: root.shouldBeVisible || contentWindow.visible
-            focus: root.shouldBeVisible
-            Keys.onEscapePressed: event => {
-                if (root.closeOnEscapeKey && shouldHaveFocus) {
-                    root.close();
-                    event.accepted = true;
-                }
-            }
+        function onShouldHaveFocusChanged() {
+            if (impl.item && impl.item.shouldHaveFocus !== root.shouldHaveFocus)
+                impl.item.shouldHaveFocus = root.shouldHaveFocus;
         }
     }
 }

quickshell/Modals/Common/DankModalConnected.qml

@@ -0,0 +1,818 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var modalHandle: root
+    property string layerNamespace: "dms:modal"
+    property alias content: contentLoader.sourceComponent
+    property alias contentLoader: contentLoader
+    property Item directContent: null
+    property real modalWidth: 400
+    property real modalHeight: 300
+    property var targetScreen
+    readonly property var effectiveScreen: contentWindow.screen ?? targetScreen
+    readonly property real screenWidth: effectiveScreen?.width ?? 1920
+    readonly property real screenHeight: effectiveScreen?.height ?? 1080
+    readonly property real dpr: effectiveScreen ? CompositorService.getScreenScale(effectiveScreen) : 1
+    property bool showBackground: true
+    property real backgroundOpacity: 0.5
+    property string positioning: "center"
+    property point customPosition: Qt.point(0, 0)
+    property bool closeOnEscapeKey: true
+    property bool closeOnBackgroundClick: true
+    property string animationType: "scale"
+
+    // Opposite side from the launcher by default; subclasses may override
+    property string preferredConnectedBarSide: SettingsData.frameModalEmergeSide
+
+    readonly property bool frameConnectedMode: SettingsData.frameEnabled && Theme.isConnectedEffect && !!effectiveScreen && SettingsData.isScreenInPreferences(effectiveScreen, SettingsData.frameScreenPreferences)
+
+    readonly property string resolvedConnectedBarSide: frameConnectedMode ? preferredConnectedBarSide : ""
+
+    readonly property bool frameOwnsConnectedChrome: frameConnectedMode && resolvedConnectedBarSide !== ""
+
+    function _dockOccupiesSide(side) {
+        if (!SettingsData.showDock)
+            return false;
+        switch (side) {
+        case "top":
+            return SettingsData.dockPosition === SettingsData.Position.Top;
+        case "bottom":
+            return SettingsData.dockPosition === SettingsData.Position.Bottom;
+        case "left":
+            return SettingsData.dockPosition === SettingsData.Position.Left;
+        case "right":
+            return SettingsData.dockPosition === SettingsData.Position.Right;
+        }
+        return false;
+    }
+
+    readonly property bool _dockBlocksEmergence: frameOwnsConnectedChrome && _dockOccupiesSide(resolvedConnectedBarSide)
+
+    readonly property bool connectedMotionParity: Theme.isConnectedEffect
+    property int animationDuration: connectedMotionParity ? Theme.popoutAnimationDuration : Theme.modalAnimationDuration
+    property real animationScaleCollapsed: Theme.effectScaleCollapsed
+    property real animationOffset: Theme.effectAnimOffset
+    property list<real> animationEnterCurve: connectedMotionParity ? Theme.variantPopoutEnterCurve : Theme.variantModalEnterCurve
+    property list<real> animationExitCurve: connectedMotionParity ? Theme.variantPopoutExitCurve : 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
+    property bool shouldHaveFocus: shouldBeVisible
+    property bool allowFocusOverride: false
+    property bool allowStacking: false
+    property bool keepContentLoaded: false
+    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
+
+    signal opened
+    signal dialogClosed
+    signal backgroundClicked
+
+    property bool animationsEnabled: true
+
+    // ─── Connected chrome sync ────────────────────────────────────────────────
+    property string _chromeClaimId: ""
+    property bool _fullSyncPending: false
+
+    function _nextChromeClaimId() {
+        return layerNamespace + ":modal:" + (new Date()).getTime() + ":" + Math.floor(Math.random() * 1000);
+    }
+
+    function _currentScreenName() {
+        return effectiveScreen ? effectiveScreen.name : "";
+    }
+
+    function _publishModalChromeState() {
+        const screenName = _currentScreenName();
+        if (!screenName)
+            return;
+        ConnectedModeState.setModalState(screenName, {
+            "visible": shouldBeVisible || contentWindow.visible,
+            "barSide": resolvedConnectedBarSide,
+            "bodyX": alignedX,
+            "bodyY": alignedY,
+            "bodyW": alignedWidth,
+            "bodyH": alignedHeight,
+            "animX": modalContainer ? modalContainer.animX : 0,
+            "animY": modalContainer ? modalContainer.animY : 0,
+            "omitStartConnector": false,
+            "omitEndConnector": false
+        });
+    }
+
+    function _syncModalChromeState() {
+        if (!frameOwnsConnectedChrome) {
+            _releaseModalChrome();
+            return;
+        }
+        if (!_chromeClaimId)
+            _chromeClaimId = _nextChromeClaimId();
+        _publishModalChromeState();
+        if (_dockBlocksEmergence && (shouldBeVisible || contentWindow.visible))
+            ConnectedModeState.requestDockRetract(_chromeClaimId, _currentScreenName(), resolvedConnectedBarSide);
+        else
+            ConnectedModeState.releaseDockRetract(_chromeClaimId);
+    }
+
+    function _flushFullSync() {
+        _fullSyncPending = false;
+        _syncModalChromeState();
+    }
+
+    function _queueFullSync() {
+        if (_fullSyncPending)
+            return;
+        _fullSyncPending = true;
+        Qt.callLater(() => {
+            if (root && typeof root._flushFullSync === "function")
+                root._flushFullSync();
+        });
+    }
+
+    function _syncModalAnim() {
+        if (!frameOwnsConnectedChrome || !_chromeClaimId)
+            return;
+        const screenName = _currentScreenName();
+        if (!screenName || !modalContainer)
+            return;
+        ConnectedModeState.setModalAnim(screenName, modalContainer.animX, modalContainer.animY);
+    }
+
+    function _syncModalBody() {
+        if (!frameOwnsConnectedChrome || !_chromeClaimId)
+            return;
+        const screenName = _currentScreenName();
+        if (!screenName)
+            return;
+        ConnectedModeState.setModalBody(screenName, alignedX, alignedY, alignedWidth, alignedHeight);
+    }
+
+    function _releaseModalChrome() {
+        if (_chromeClaimId) {
+            ConnectedModeState.releaseDockRetract(_chromeClaimId);
+            _chromeClaimId = "";
+        }
+        const screenName = _currentScreenName();
+        if (screenName)
+            ConnectedModeState.clearModalState(screenName);
+    }
+
+    onFrameOwnsConnectedChromeChanged: _syncModalChromeState()
+    onResolvedConnectedBarSideChanged: _queueFullSync()
+    onShouldBeVisibleChanged: _queueFullSync()
+    onAlignedXChanged: _syncModalBody()
+    onAlignedYChanged: _syncModalBody()
+    onAlignedWidthChanged: _syncModalBody()
+    onAlignedHeightChanged: _syncModalBody()
+
+    Component.onDestruction: _releaseModalChrome()
+
+    Connections {
+        target: contentWindow
+        function onVisibleChanged() {
+            if (contentWindow.visible)
+                root._syncModalChromeState();
+            else
+                root._releaseModalChrome();
+        }
+    }
+
+    function open() {
+        closeTimer.stop();
+        animationsEnabled = false;
+        frozenMotionOffsetX = modalContainer ? modalContainer.offsetX : 0;
+        frozenMotionOffsetY = modalContainer ? modalContainer.offsetY : animationOffset;
+
+        const focusedScreen = CompositorService.getFocusedScreen();
+        if (focusedScreen) {
+            contentWindow.screen = focusedScreen;
+            if (!useSingleWindow)
+                clickCatcher.screen = focusedScreen;
+        }
+
+        if (Theme.isDirectionalEffect || root.useBackground) {
+            if (!useSingleWindow)
+                clickCatcher.visible = true;
+            contentWindow.visible = true;
+        }
+        ModalManager.openModal(modalHandle);
+
+        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() {
+        shouldBeVisible = false;
+        shouldHaveFocus = false;
+        ModalManager.closeModal(modalHandle);
+        closeTimer.restart();
+    }
+
+    function instantClose() {
+        animationsEnabled = false;
+        shouldBeVisible = false;
+        shouldHaveFocus = false;
+        ModalManager.closeModal(modalHandle);
+        closeTimer.stop();
+        contentWindow.visible = false;
+        if (!useSingleWindow)
+            clickCatcher.visible = false;
+        dialogClosed();
+        Qt.callLater(() => animationsEnabled = true);
+    }
+
+    function toggle() {
+        shouldBeVisible ? close() : open();
+    }
+
+    Connections {
+        target: ModalManager
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== modalHandle && !allowStacking && shouldBeVisible)
+                close();
+        }
+    }
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!contentWindow.screen)
+                return;
+            const currentScreenName = contentWindow.screen.name;
+            let screenStillExists = false;
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName) {
+                    screenStillExists = true;
+                    break;
+                }
+            }
+            if (screenStillExists)
+                return;
+            const newScreen = CompositorService.getFocusedScreen();
+            if (newScreen) {
+                contentWindow.screen = newScreen;
+                if (!useSingleWindow)
+                    clickCatcher.screen = newScreen;
+            }
+        }
+    }
+
+    Timer {
+        id: closeTimer
+        interval: Theme.variantCloseInterval(animationDuration)
+        onTriggered: {
+            if (shouldBeVisible)
+                return;
+            contentWindow.visible = false;
+            if (!useSingleWindow)
+                clickCatcher.visible = false;
+            dialogClosed();
+        }
+    }
+
+    // shadowRenderPadding is zeroed when frame owns the chrome
+    // Wayland then clips any content translating past
+    readonly property var shadowLevel: Theme.elevationLevel3
+    readonly property real shadowFallbackOffset: 6
+    readonly property real shadowRenderPadding: (!frameOwnsConnectedChrome && root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, Theme.elevationLightDirection, shadowFallbackOffset, 8, 16) : 0
+    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)
+
+    function _frameEdgeInset(side) {
+        if (!effectiveScreen)
+            return 0;
+        return SettingsData.frameEdgeInsetForSide(effectiveScreen, side);
+    }
+
+    // frameEdgeInsetForSide is the full inset; do not add frameBarSize
+    readonly property real _connectedAlignedX: {
+        switch (resolvedConnectedBarSide) {
+        case "top":
+        case "bottom":
+            {
+                const insetL = _frameEdgeInset("left");
+                const insetR = _frameEdgeInset("right");
+                const usable = Math.max(0, screenWidth - insetL - insetR);
+                return insetL + Math.max(0, (usable - alignedWidth) / 2);
+            }
+        case "left":
+            return _frameEdgeInset("left");
+        case "right":
+            return screenWidth - alignedWidth - _frameEdgeInset("right");
+        }
+        return 0;
+    }
+
+    readonly property real _connectedAlignedY: {
+        switch (resolvedConnectedBarSide) {
+        case "top":
+            return _frameEdgeInset("top");
+        case "bottom":
+            return screenHeight - alignedHeight - _frameEdgeInset("bottom");
+        case "left":
+        case "right":
+            {
+                const insetT = _frameEdgeInset("top");
+                const insetB = _frameEdgeInset("bottom");
+                const usable = Math.max(0, screenHeight - insetT - insetB);
+                return insetT + Math.max(0, (usable - alignedHeight) / 2);
+            }
+        }
+        return 0;
+    }
+
+    readonly property real alignedX: Theme.snap(frameOwnsConnectedChrome ? _connectedAlignedX : (() => {
+            switch (positioning) {
+            case "center":
+                return (screenWidth - alignedWidth) / 2;
+            case "top-right":
+                return Math.max(Theme.spacingL, screenWidth - alignedWidth - Theme.spacingL);
+            case "custom":
+                return customPosition.x;
+            default:
+                return 0;
+            }
+        })(), dpr)
+
+    readonly property real alignedY: Theme.snap(frameOwnsConnectedChrome ? _connectedAlignedY : (() => {
+            switch (positioning) {
+            case "center":
+                return (screenHeight - alignedHeight) / 2;
+            case "top-right":
+                return Theme.barHeight + Theme.spacingXS;
+            case "custom":
+                return customPosition.y;
+            default:
+                return 0;
+            }
+        })(), dpr)
+
+    PanelWindow {
+        id: clickCatcher
+        visible: false
+        color: "transparent"
+
+        WlrLayershell.namespace: root.layerNamespace + ":clickcatcher"
+        WlrLayershell.layer: WlrLayershell.Top
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            left: true
+            right: true
+            bottom: true
+        }
+
+        mask: Region {
+            item: Rectangle {
+                x: root.alignedX
+                y: root.alignedY
+                width: root.alignedWidth
+                height: root.alignedHeight
+            }
+            intersection: Intersection.Xor
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            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 {
+        id: contentWindow
+        visible: false
+        color: "transparent"
+
+        WindowBlur {
+            targetWindow: contentWindow
+            blurEnabled: root.effectiveBlurEnabled && !root.frameOwnsConnectedChrome
+            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: (root.shouldBeVisible && animatedContent.opacity > 0 && !root.frameOwnsConnectedChrome) ? modalContainer.width * s : 0
+            blurHeight: (root.shouldBeVisible && animatedContent.opacity > 0 && !root.frameOwnsConnectedChrome) ? modalContainer.height * s : 0
+            blurRadius: root.effectiveCornerRadius
+        }
+
+        WlrLayershell.namespace: root.layerNamespace
+        WlrLayershell.layer: {
+            if (root.useOverlayLayer)
+                return WlrLayershell.Overlay;
+            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.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: {
+            if (customKeyboardFocus !== null)
+                return customKeyboardFocus;
+            if (!shouldHaveFocus)
+                return WlrKeyboardFocus.None;
+            if (root.useHyprlandFocusGrab)
+                return WlrKeyboardFocus.OnDemand;
+            return WlrKeyboardFocus.Exclusive;
+        }
+
+        anchors {
+            left: true
+            top: true
+            right: root.useSingleWindow
+            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: actualMarginLeft
+            top: actualMarginTop
+            right: 0
+            bottom: 0
+        }
+
+        implicitWidth: root.useSingleWindow ? 0 : root.alignedWidth + (shadowBuffer * 2)
+        implicitHeight: root.useSingleWindow ? 0 : root.alignedHeight + (shadowBuffer * 2)
+
+        onVisibleChanged: {
+            if (visible) {
+                opened();
+            } else {
+                if (Qt.inputMethod) {
+                    Qt.inputMethod.hide();
+                    Qt.inputMethod.reset();
+                }
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: root.useSingleWindow && root.closeOnBackgroundClick && root.shouldBeVisible
+            z: -2
+            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
+                }
+            }
+        }
+
+        Item {
+            id: modalContainer
+            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
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: root.useSingleWindow && root.shouldBeVisible
+                hoverEnabled: false
+                acceptedButtons: Qt.AllButtons
+                onPressed: mouse.accepted = true
+                onClicked: mouse.accepted = true
+                z: -1
+            }
+
+            readonly property bool slide: root.animationType === "slide"
+            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
+            // Connected emergence: travel from the resolved bar edge, matching DankPopout cadence.
+            readonly property real connectedEmergenceTravelX: Math.max(root.animationOffset, root.alignedWidth + Theme.spacingL)
+            readonly property real connectedEmergenceTravelY: Math.max(root.animationOffset, root.alignedHeight + Theme.spacingL)
+            readonly property real offsetX: {
+                if (root.frameOwnsConnectedChrome) {
+                    switch (root.resolvedConnectedBarSide) {
+                    case "left":
+                        return -connectedEmergenceTravelX;
+                    case "right":
+                        return connectedEmergenceTravelX;
+                    }
+                    return 0;
+                }
+                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 (root.frameOwnsConnectedChrome) {
+                    switch (root.resolvedConnectedBarSide) {
+                    case "top":
+                        return -connectedEmergenceTravelY;
+                    case "bottom":
+                        return connectedEmergenceTravelY;
+                    }
+                    return 0;
+                }
+                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
+
+            onAnimXChanged: if (root.frameOwnsConnectedChrome)
+                root._syncModalAnim()
+            onAnimYChanged: if (root.frameOwnsConnectedChrome)
+                root._syncModalAnim()
+
+            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
+                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
+                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
+                NumberAnimation {
+                    duration: Theme.variantDuration(root.animationDuration, root.shouldBeVisible)
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Item {
+                id: contentContainer
+                anchors.centerIn: parent
+                width: parent.width
+                height: parent.height
+                clip: false
+
+                Item {
+                    id: animatedContent
+                    anchors.fill: parent
+                    clip: false
+                    opacity: (Theme.isDirectionalEffect && !Theme.isConnectedEffect) ? 1 : (root.shouldBeVisible ? 1 : 0)
+                    scale: modalContainer.scaleValue
+                    transformOrigin: Item.Center
+
+                    Behavior on opacity {
+                        enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
+                        NumberAnimation {
+                            duration: Math.round(Theme.variantDuration(animationDuration, root.shouldBeVisible) * Theme.variantOpacityDurationScale)
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                        }
+                    }
+
+                    ElevationShadow {
+                        id: modalShadowLayer
+                        anchors.fill: parent
+                        level: root.shadowLevel
+                        fallbackOffset: root.shadowFallbackOffset
+                        targetRadius: root.effectiveCornerRadius
+                        targetColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBackgroundColor
+                        borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
+                        borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
+                        shadowEnabled: !root.frameOwnsConnectedChrome && root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+                    }
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: root.effectiveCornerRadius
+                        color: "transparent"
+                        border.color: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? "transparent" : BlurService.borderColor
+                        border.width: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? 0 : BlurService.borderWidth
+                        z: 100
+                    }
+
+                    FocusScope {
+                        anchors.fill: parent
+                        focus: root.shouldBeVisible
+                        clip: false
+
+                        Item {
+                            id: directContentWrapper
+                            anchors.fill: parent
+                            visible: root.directContent !== null
+                            focus: true
+                            clip: false
+
+                            Component.onCompleted: {
+                                if (root.directContent) {
+                                    root.directContent.parent = directContentWrapper;
+                                    root.directContent.anchors.fill = directContentWrapper;
+                                    Qt.callLater(() => root.directContent.forceActiveFocus());
+                                }
+                            }
+
+                            Connections {
+                                target: root
+                                function onDirectContentChanged() {
+                                    if (root.directContent) {
+                                        root.directContent.parent = directContentWrapper;
+                                        root.directContent.anchors.fill = directContentWrapper;
+                                        Qt.callLater(() => root.directContent.forceActiveFocus());
+                                    }
+                                }
+                            }
+                        }
+
+                        Loader {
+                            id: contentLoader
+                            anchors.fill: parent
+                            active: root.directContent === null && (root.keepContentLoaded || root.shouldBeVisible || contentWindow.visible)
+                            asynchronous: false
+                            focus: true
+                            clip: false
+                            visible: root.directContent === null
+
+                            onLoaded: {
+                                if (item) {
+                                    Qt.callLater(() => item.forceActiveFocus());
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        FocusScope {
+            id: focusScope
+            objectName: "modalFocusScope"
+            anchors.fill: parent
+            visible: root.shouldBeVisible || contentWindow.visible
+            focus: root.shouldBeVisible
+            Keys.onEscapePressed: event => {
+                if (root.closeOnEscapeKey && shouldHaveFocus) {
+                    root.close();
+                    event.accepted = true;
+                }
+            }
+        }
+    }
+}

quickshell/Modals/Common/DankModalStandalone.qml

@@ -0,0 +1,502 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var modalHandle: root
+    property string layerNamespace: "dms:modal"
+    property alias content: contentLoader.sourceComponent
+    property alias contentLoader: contentLoader
+    property Item directContent: null
+    property real modalWidth: 400
+    property real modalHeight: 300
+    property var targetScreen
+    readonly property var effectiveScreen: contentWindow.screen ?? targetScreen
+    readonly property real screenWidth: effectiveScreen?.width ?? 1920
+    readonly property real screenHeight: effectiveScreen?.height ?? 1080
+    readonly property real dpr: effectiveScreen ? CompositorService.getScreenScale(effectiveScreen) : 1
+    property bool showBackground: true
+    property real backgroundOpacity: 0.5
+    property string positioning: "center"
+    property point customPosition: Qt.point(0, 0)
+    property bool closeOnEscapeKey: true
+    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 color borderColor: Theme.outlineMedium
+    property real borderWidth: 0
+    property real cornerRadius: Theme.cornerRadius
+    property bool enableShadow: true
+    property alias modalFocusScope: focusScope
+    property bool shouldBeVisible: false
+    property bool isClosing: false
+    property bool shouldHaveFocus: shouldBeVisible
+    property bool allowFocusOverride: false
+    property bool allowStacking: false
+    property bool keepContentLoaded: false
+    property bool keepPopoutsOpen: false
+    property var customKeyboardFocus: null
+    property bool useOverlayLayer: false
+    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
+
+    signal opened
+    signal dialogClosed
+    signal backgroundClicked
+
+    property bool animationsEnabled: true
+
+    function open() {
+        closeTimer.stop();
+        isClosing = false;
+        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();
+        }
+    }
+
+    function _finishOpen() {
+        ModalManager.openModal(modalHandle);
+        shouldBeVisible = true;
+        if (!useSingleWindow)
+            clickCatcher.visible = true;
+        contentWindow.visible = true;
+        shouldHaveFocus = false;
+        Qt.callLater(() => shouldHaveFocus = Qt.binding(() => shouldBeVisible));
+    }
+
+    function close() {
+        isClosing = true;
+        shouldBeVisible = false;
+        shouldHaveFocus = false;
+        ModalManager.closeModal(modalHandle);
+        closeTimer.restart();
+    }
+
+    function instantClose() {
+        animationsEnabled = false;
+        isClosing = false;
+        shouldBeVisible = false;
+        shouldHaveFocus = false;
+        ModalManager.closeModal(modalHandle);
+        closeTimer.stop();
+        contentWindow.visible = false;
+        if (!useSingleWindow)
+            clickCatcher.visible = false;
+        dialogClosed();
+        Qt.callLater(() => animationsEnabled = true);
+    }
+
+    function toggle() {
+        shouldBeVisible ? close() : open();
+    }
+
+    Connections {
+        target: ModalManager
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== modalHandle && !allowStacking && shouldBeVisible)
+                close();
+        }
+    }
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!contentWindow.screen)
+                return;
+            const currentScreenName = contentWindow.screen.name;
+            let screenStillExists = false;
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName) {
+                    screenStillExists = true;
+                    break;
+                }
+            }
+            if (screenStillExists)
+                return;
+            const newScreen = CompositorService.getFocusedScreen();
+            if (newScreen) {
+                contentWindow.screen = newScreen;
+                if (!useSingleWindow)
+                    clickCatcher.screen = newScreen;
+            }
+        }
+    }
+
+    Timer {
+        id: closeTimer
+        interval: animationDuration + 50
+        onTriggered: {
+            if (shouldBeVisible)
+                return;
+            isClosing = false;
+            contentWindow.visible = false;
+            if (!useSingleWindow)
+                clickCatcher.visible = false;
+            dialogClosed();
+        }
+    }
+
+    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 shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
+    readonly property real alignedWidth: Theme.px(modalWidth, dpr)
+    readonly property real alignedHeight: Theme.px(modalHeight, dpr)
+
+    readonly property real alignedX: Theme.snap((() => {
+            switch (positioning) {
+            case "center":
+                return (screenWidth - alignedWidth) / 2;
+            case "top-right":
+                return Math.max(Theme.spacingL, screenWidth - alignedWidth - Theme.spacingL);
+            case "custom":
+                return customPosition.x;
+            default:
+                return 0;
+            }
+        })(), dpr)
+
+    readonly property real alignedY: Theme.snap((() => {
+            switch (positioning) {
+            case "center":
+                return (screenHeight - alignedHeight) / 2;
+            case "top-right":
+                return Theme.barHeight + Theme.spacingXS;
+            case "custom":
+                return customPosition.y;
+            default:
+                return 0;
+            }
+        })(), dpr)
+
+    PanelWindow {
+        id: clickCatcher
+        visible: false
+        color: "transparent"
+
+        WlrLayershell.namespace: root.layerNamespace + ":clickcatcher"
+        WlrLayershell.layer: WlrLayershell.Top
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            left: true
+            right: true
+            bottom: true
+        }
+
+        mask: Region {
+            item: Rectangle {
+                x: root.alignedX
+                y: root.alignedY
+                width: root.alignedWidth
+                height: root.alignedHeight
+            }
+            intersection: Intersection.Xor
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: root.closeOnBackgroundClick && root.shouldBeVisible
+            onClicked: root.backgroundClicked()
+        }
+    }
+
+    PanelWindow {
+        id: contentWindow
+        visible: false
+        color: "transparent"
+
+        WindowBlur {
+            targetWindow: contentWindow
+            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
+        }
+
+        WlrLayershell.namespace: root.layerNamespace
+        WlrLayershell.layer: {
+            if (root.useOverlayLayer)
+                return WlrLayershell.Overlay;
+            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.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: {
+            if (customKeyboardFocus !== null)
+                return customKeyboardFocus;
+            if (!shouldHaveFocus)
+                return WlrKeyboardFocus.None;
+            if (root.useHyprlandFocusGrab)
+                return WlrKeyboardFocus.OnDemand;
+            return WlrKeyboardFocus.Exclusive;
+        }
+
+        anchors {
+            left: true
+            top: true
+            right: root.useSingleWindow
+            bottom: root.useSingleWindow
+        }
+
+        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))
+            right: 0
+            bottom: 0
+        }
+
+        implicitWidth: root.useSingleWindow ? 0 : root.alignedWidth + (shadowBuffer * 2)
+        implicitHeight: root.useSingleWindow ? 0 : root.alignedHeight + (shadowBuffer * 2)
+
+        onVisibleChanged: {
+            if (visible) {
+                opened();
+            } else {
+                if (Qt.inputMethod) {
+                    Qt.inputMethod.hide();
+                    Qt.inputMethod.reset();
+                }
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: root.useSingleWindow && root.closeOnBackgroundClick && root.shouldBeVisible
+            z: -2
+            onClicked: root.backgroundClicked()
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            z: -1
+            color: "black"
+            opacity: root.useBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+            visible: root.useBackground
+
+            Behavior on opacity {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: root.animationDuration
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+        }
+
+        Item {
+            id: modalContainer
+            x: root.useSingleWindow ? root.alignedX : shadowBuffer
+            y: root.useSingleWindow ? root.alignedY : shadowBuffer
+
+            width: root.alignedWidth
+            height: root.alignedHeight
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: root.useSingleWindow && root.shouldBeVisible
+                hoverEnabled: false
+                acceptedButtons: Qt.AllButtons
+                onPressed: mouse.accepted = true
+                onClicked: mouse.accepted = true
+                z: -1
+            }
+
+            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;
+                }
+            }
+
+            Behavior on animX {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: root.animationDuration
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Behavior on animY {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: root.animationDuration
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Behavior on scaleValue {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: root.animationDuration
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Item {
+                id: contentContainer
+                anchors.centerIn: parent
+                width: parent.width
+                height: parent.height
+                clip: false
+
+                Item {
+                    id: animatedContent
+                    anchors.fill: parent
+                    clip: false
+                    opacity: 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
+
+                    Behavior on opacity {
+                        enabled: root.animationsEnabled
+                        NumberAnimation {
+                            duration: animationDuration
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                        }
+                    }
+
+                    ElevationShadow {
+                        id: modalShadowLayer
+                        anchors.fill: parent
+                        level: root.shadowLevel
+                        fallbackOffset: root.shadowFallbackOffset
+                        targetRadius: root.cornerRadius
+                        targetColor: root.backgroundColor
+                        borderColor: root.borderColor
+                        borderWidth: root.borderWidth
+                        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
+                        color: "transparent"
+                        border.color: BlurService.borderColor
+                        border.width: BlurService.borderWidth
+                        z: 100
+                    }
+
+                    FocusScope {
+                        anchors.fill: parent
+                        focus: root.shouldBeVisible
+                        clip: false
+
+                        Item {
+                            id: directContentWrapper
+                            anchors.fill: parent
+                            visible: root.directContent !== null
+                            focus: true
+                            clip: false
+
+                            Component.onCompleted: {
+                                if (root.directContent) {
+                                    root.directContent.parent = directContentWrapper;
+                                    root.directContent.anchors.fill = directContentWrapper;
+                                    Qt.callLater(() => root.directContent.forceActiveFocus());
+                                }
+                            }
+
+                            Connections {
+                                target: root
+                                function onDirectContentChanged() {
+                                    if (root.directContent) {
+                                        root.directContent.parent = directContentWrapper;
+                                        root.directContent.anchors.fill = directContentWrapper;
+                                        Qt.callLater(() => root.directContent.forceActiveFocus());
+                                    }
+                                }
+                            }
+                        }
+
+                        Loader {
+                            id: contentLoader
+                            anchors.fill: parent
+                            active: root.directContent === null && (root.keepContentLoaded || root.shouldBeVisible || contentWindow.visible)
+                            asynchronous: false
+                            focus: true
+                            clip: false
+                            visible: root.directContent === null
+
+                            onLoaded: {
+                                if (item) {
+                                    Qt.callLater(() => item.forceActiveFocus());
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        FocusScope {
+            id: focusScope
+            objectName: "modalFocusScope"
+            anchors.fill: parent
+            visible: root.shouldBeVisible || contentWindow.visible
+            focus: root.shouldBeVisible
+            Keys.onEscapePressed: event => {
+                if (root.closeOnEscapeKey && shouldHaveFocus) {
+                    root.close();
+                    event.accepted = true;
+                }
+            }
+        }
+    }
+}

quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml

@@ -1,826 +1,84 @@
 import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Wayland
-import Quickshell.Hyprland
 import qs.Common
-import qs.Services
-import qs.Widgets
 
 Item {
     id: root
 
-    visible: false
-
-    property bool spotlightOpen: false
-    property bool keyboardActive: false
-    property bool contentVisible: false
-    readonly property bool launcherMotionVisible: Theme.isConnectedEffect ? _motionActive : (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: 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
-
-    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;
-        }
-    }
-    readonly property int modalWidth: Math.min(baseWidth, screenWidth - 100)
-    readonly property int modalHeight: Math.min(baseHeight, screenHeight - 100)
-
-    readonly property string preferredConnectedBarSide: SettingsData.frameLauncherEmergeSide
-
-    readonly property bool frameConnectedMode: SettingsData.frameEnabled
-        && Theme.isConnectedEffect
-        && !!effectiveScreen
-        && SettingsData.isScreenInPreferences(effectiveScreen, SettingsData.frameScreenPreferences)
-
-    readonly property string resolvedConnectedBarSide: frameConnectedMode ? preferredConnectedBarSide : ""
-
-    readonly property bool frameOwnsConnectedChrome: frameConnectedMode && resolvedConnectedBarSide !== ""
-
-    function _dockOccupiesSide(side) {
-        if (!SettingsData.showDock) return false;
-        switch (side) {
-        case "top":    return SettingsData.dockPosition === SettingsData.Position.Top;
-        case "bottom": return SettingsData.dockPosition === SettingsData.Position.Bottom;
-        case "left":   return SettingsData.dockPosition === SettingsData.Position.Left;
-        case "right":  return SettingsData.dockPosition === SettingsData.Position.Right;
-        }
-        return false;
-    }
-    readonly property bool _dockBlocksEmergence: frameOwnsConnectedChrome && _dockOccupiesSide(resolvedConnectedBarSide)
-
-    function _frameEdgeInset(side) {
-        if (!effectiveScreen) return 0;
-        return SettingsData.frameEdgeInsetForSide(effectiveScreen, side);
-    }
-
-    // frameEdgeInsetForSide is the full inset; do not add frameBarSize
-    readonly property real _connectedModalX: {
-        switch (resolvedConnectedBarSide) {
-        case "top":
-        case "bottom": {
-            const insetL = _frameEdgeInset("left");
-            const insetR = _frameEdgeInset("right");
-            const usable = Math.max(0, screenWidth - insetL - insetR);
-            return insetL + Math.max(0, (usable - modalWidth) / 2);
-        }
-        case "left":
-            return _frameEdgeInset("left");
-        case "right":
-            return screenWidth - modalWidth - _frameEdgeInset("right");
-        }
-        return (screenWidth - modalWidth) / 2;
-    }
-
-    readonly property real _connectedModalY: {
-        switch (resolvedConnectedBarSide) {
-        case "top":
-            return _frameEdgeInset("top");
-        case "bottom":
-            return screenHeight - modalHeight - _frameEdgeInset("bottom");
-        case "left":
-        case "right": {
-            const insetT = _frameEdgeInset("top");
-            const insetB = _frameEdgeInset("bottom");
-            const usable = Math.max(0, screenHeight - insetT - insetB);
-            return insetT + Math.max(0, (usable - modalHeight) / 2);
-        }
-        }
-        return (screenHeight - modalHeight) / 2;
-    }
-
-    readonly property real modalX: frameOwnsConnectedChrome ? _connectedModalX : ((screenWidth - modalWidth) / 2)
-    readonly property real modalY: frameOwnsConnectedChrome ? _connectedModalY : ((screenHeight - modalHeight) / 2)
-
-    readonly property bool connectedSurfaceOverride: Theme.isConnectedEffect
-    readonly property int launcherAnimationDuration: Theme.isConnectedEffect ? Theme.popoutAnimationDuration : Theme.modalAnimationDuration
-    readonly property list<real> launcherEnterCurve: Theme.isConnectedEffect ? Theme.variantPopoutEnterCurve : Theme.variantModalEnterCurve
-    readonly property list<real> launcherExitCurve: Theme.isConnectedEffect ? Theme.variantPopoutExitCurve : Theme.variantModalExitCurve
-    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;
-        switch (SettingsData.dankLauncherV2BorderColor) {
-        case "primary":
-            return Theme.primary;
-        case "secondary":
-            return Theme.secondary;
-        case "outline":
-            return Theme.outline;
-        case "surfaceText":
-            return Theme.surfaceText;
-        default:
-            return Theme.primary;
-        }
-    }
-    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).
-    // Zeroed when frame owns the chrome and Wayland clips past the bar edge
-    readonly property var shadowLevel: Theme.elevationLevel3
-    readonly property real shadowFallbackOffset: 6
-    readonly property real shadowRenderPadding: (!frameOwnsConnectedChrome && 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
+    readonly property bool spotlightOpen: impl.item ? impl.item.spotlightOpen : false
+    readonly property bool isClosing: impl.item ? impl.item.isClosing : false
+    readonly property bool keyboardActive: impl.item ? impl.item.keyboardActive : false
+    readonly property bool contentVisible: impl.item ? impl.item.contentVisible : false
+    readonly property var spotlightContent: impl.item ? impl.item.spotlightContent : null
+    readonly property bool openedFromOverview: impl.item ? impl.item.openedFromOverview : false
+    readonly property var effectiveScreen: impl.item ? impl.item.effectiveScreen : null
+    readonly property real screenWidth: impl.item ? impl.item.screenWidth : 1920
+    readonly property real screenHeight: impl.item ? impl.item.screenHeight : 1080
+    readonly property real dpr: impl.item ? impl.item.dpr : 1
+    readonly property int modalWidth: impl.item ? impl.item.modalWidth : 620
+    readonly property int modalHeight: impl.item ? impl.item.modalHeight : 600
+    readonly property real modalX: impl.item ? impl.item.modalX : 0
+    readonly property real modalY: impl.item ? impl.item.modalY : 0
+    readonly property bool frameOwnsConnectedChrome: impl.item ? (impl.item.frameOwnsConnectedChrome ?? false) : false
+    readonly property string resolvedConnectedBarSide: impl.item ? (impl.item.resolvedConnectedBarSide ?? "") : ""
 
     signal dialogClosed
 
-    // ─── Connected chrome sync ────────────────────────────────────────────────
-    property string _chromeClaimId: ""
-    property bool _fullSyncPending: false
-
-    function _nextChromeClaimId() {
-        return "dms:launcher-v2:" + (new Date()).getTime() + ":" + Math.floor(Math.random() * 1000);
-    }
-
-    function _currentScreenName() {
-        return effectiveScreen ? effectiveScreen.name : "";
-    }
-
-    function _publishModalChromeState() {
-        const screenName = _currentScreenName();
-        if (!screenName) return;
-        ConnectedModeState.setModalState(screenName, {
-            "visible": spotlightOpen || contentWindow.visible,
-            "barSide": resolvedConnectedBarSide,
-            "bodyX": alignedX,
-            "bodyY": alignedY,
-            "bodyW": alignedWidth,
-            "bodyH": alignedHeight,
-            "animX": contentContainer ? contentContainer.animX : 0,
-            "animY": contentContainer ? contentContainer.animY : 0,
-            "omitStartConnector": false,
-            "omitEndConnector": false
-        });
-    }
-
-    function _syncModalChromeState() {
-        if (!frameOwnsConnectedChrome) {
-            _releaseModalChrome();
-            return;
-        }
-        if (!_chromeClaimId)
-            _chromeClaimId = _nextChromeClaimId();
-        _publishModalChromeState();
-        if (_dockBlocksEmergence && (spotlightOpen || contentWindow.visible))
-            ConnectedModeState.requestDockRetract(_chromeClaimId, _currentScreenName(), resolvedConnectedBarSide);
-        else
-            ConnectedModeState.releaseDockRetract(_chromeClaimId);
-    }
-
-    function _flushFullSync() {
-        _fullSyncPending = false;
-        _syncModalChromeState();
-    }
-
-    function _queueFullSync() {
-        if (_fullSyncPending) return;
-        _fullSyncPending = true;
-        Qt.callLater(() => {
-            if (root && typeof root._flushFullSync === "function")
-                root._flushFullSync();
-        });
-    }
-
-    function _syncModalAnim() {
-        if (!frameOwnsConnectedChrome || !_chromeClaimId) return;
-        const screenName = _currentScreenName();
-        if (!screenName || !contentContainer) return;
-        ConnectedModeState.setModalAnim(screenName, contentContainer.animX, contentContainer.animY);
-    }
-
-    function _syncModalBody() {
-        if (!frameOwnsConnectedChrome || !_chromeClaimId) return;
-        const screenName = _currentScreenName();
-        if (!screenName) return;
-        ConnectedModeState.setModalBody(screenName, alignedX, alignedY, alignedWidth, alignedHeight);
-    }
-
-    function _releaseModalChrome() {
-        if (_chromeClaimId) {
-            ConnectedModeState.releaseDockRetract(_chromeClaimId);
-            _chromeClaimId = "";
-        }
-        const screenName = _currentScreenName();
-        if (screenName)
-            ConnectedModeState.clearModalState(screenName);
-    }
-
-    onFrameOwnsConnectedChromeChanged: _syncModalChromeState()
-    onResolvedConnectedBarSideChanged: _queueFullSync()
-    onSpotlightOpenChanged: _queueFullSync()
-    onAlignedXChanged: _syncModalBody()
-    onAlignedYChanged: _syncModalBody()
-    onAlignedWidthChanged: _syncModalBody()
-    onAlignedHeightChanged: _syncModalBody()
-
-    Component.onDestruction: _releaseModalChrome()
-
-    Connections {
-        target: contentWindow
-        function onVisibleChanged() {
-            if (contentWindow.visible)
-                root._syncModalChromeState();
-            else
-                root._releaseModalChrome();
-        }
-    }
-
-    function _ensureContentLoadedAndInitialize(query, mode) {
-        _pendingQuery = query || "";
-        _pendingMode = mode || "";
-        _pendingInitialize = true;
-        contentVisible = true;
-        launcherContentLoader.active = true;
-
-        if (spotlightContent) {
-            _initializeAndShow(_pendingQuery, _pendingMode);
-            _pendingInitialize = false;
-        }
-    }
-
-    function _initializeAndShow(query, mode) {
-        if (!spotlightContent)
-            return;
-        contentVisible = true;
-        // NOTE: forceActiveFocus() is deliberately NOT called here.
-        // It is deferred to after animation starts to avoid compositor IPC stalls.
-
-        if (spotlightContent.searchField) {
-            spotlightContent.searchField.text = query;
-        }
-        if (spotlightContent.controller) {
-            var targetMode = mode || SessionData.launcherLastMode || "all";
-            spotlightContent.controller.searchMode = targetMode;
-            spotlightContent.controller.activePluginId = "";
-            spotlightContent.controller.activePluginName = "";
-            spotlightContent.controller.pluginFilter = "";
-            spotlightContent.controller.fileSearchType = "all";
-            spotlightContent.controller.fileSearchExt = "";
-            spotlightContent.controller.fileSearchFolder = "";
-            spotlightContent.controller.fileSearchSort = "score";
-            spotlightContent.controller.collapsedSections = {};
-            spotlightContent.controller.selectedFlatIndex = 0;
-            spotlightContent.controller.selectedItem = null;
-            if (query) {
-                spotlightContent.controller.setSearchQuery(query);
-            } else {
-                spotlightContent.controller.searchQuery = "";
-                spotlightContent.controller.performSearch();
-            }
-        }
-        if (spotlightContent.resetScroll) {
-            spotlightContent.resetScroll();
-        }
-        if (spotlightContent.actionPanel) {
-            spotlightContent.actionPanel.hide();
-        }
-    }
-
-    function _openCommon(query, mode) {
-        closeCleanupTimer.stop();
-        isClosing = false;
-        openedFromOverview = false;
-
-        // 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() {
-        _openCommon("", "");
+        if (impl.item)
+            impl.item.show();
     }
 
     function showWithQuery(query) {
-        _openCommon(query, "");
-    }
-
-    function hide() {
-        if (!spotlightOpen)
-            return;
-        openedFromOverview = false;
-        isClosing = true;
-        // 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();
-    }
-
-    function toggle() {
-        spotlightOpen ? hide() : show();
+        if (impl.item)
+            impl.item.showWithQuery(query);
     }
 
     function showWithMode(mode) {
-        _openCommon("", mode);
+        if (impl.item)
+            impl.item.showWithMode(mode);
     }
 
-    function toggleWithMode(mode) {
-        if (spotlightOpen) {
-            hide();
-        } else {
-            showWithMode(mode);
-        }
+    function hide() {
+        if (impl.item)
+            impl.item.hide();
+    }
+
+    function toggle() {
+        if (impl.item)
+            impl.item.toggle();
     }
 
     function toggleWithQuery(query) {
-        if (spotlightOpen) {
-            hide();
-        } else {
-            showWithQuery(query);
-        }
+        if (impl.item)
+            impl.item.toggleWithQuery(query);
     }
 
-    Timer {
-        id: closeCleanupTimer
-        interval: Theme.variantCloseInterval(root.launcherAnimationDuration)
-        repeat: false
-        onTriggered: {
-            isClosing = false;
-            contentVisible = false;
-            contentWindow.visible = false;
-            backgroundWindow.visible = false;
-            if (root.unloadContentOnClose)
-                launcherContentLoader.active = false;
-            dialogClosed();
-        }
+    function toggleWithMode(mode) {
+        if (impl.item)
+            impl.item.toggleWithMode(mode);
     }
 
-    Connections {
-        target: spotlightContent?.controller ?? null
-        function onModeChanged(mode) {
-            if (spotlightContent.controller.autoSwitchedToFiles)
-                return;
-            SessionData.setLauncherLastMode(mode);
-        }
+    Loader {
+        id: impl
+        sourceComponent: SettingsData.connectedFrameModeActive ? connectedComp : standaloneComp
+        onItemChanged: if (item)
+            root._wireBackend(item)
     }
 
-    HyprlandFocusGrab {
-        id: focusGrab
-        windows: [contentWindow]
-        active: false
-
-        onCleared: {
-            if (spotlightOpen) {
-                hide();
-            }
-        }
+    Component {
+        id: standaloneComp
+        DankLauncherV2ModalStandalone {}
     }
 
-    Connections {
-        target: ModalManager
-        function onCloseAllModalsExcept(excludedModal) {
-            if (excludedModal !== root && spotlightOpen) {
-                hide();
-            }
-        }
+    Component {
+        id: connectedComp
+        DankLauncherV2ModalConnected {}
     }
 
-    Connections {
-        target: Quickshell
-        function onScreensChanged() {
-            if (Quickshell.screens.length === 0)
-                return;
-
-            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) {
-                        needsReset = false;
-                        break;
-                    }
-                }
-            }
-
-            if (!needsReset)
-                return;
-
-            const newScreen = CompositorService.getFocusedScreen() ?? Quickshell.screens[0];
-            if (!newScreen)
-                return;
-
-            root._windowEnabled = false;
-            backgroundWindow.screen = newScreen;
-            contentWindow.screen = newScreen;
-            Qt.callLater(() => {
-                root._windowEnabled = true;
-            });
-        }
+    function _wireBackend(it) {
+        if (!it)
+            return;
+        it.modalHandle = root;
+        it.dialogClosed.connect(root.dialogClosed);
     }
-
-    // ── Background window: fullscreen, handles darkening + click-to-dismiss ──
-    PanelWindow {
-        id: backgroundWindow
-        visible: false
-        color: "transparent"
-
-        WlrLayershell.namespace: "dms:spotlight:bg"
-        WlrLayershell.layer: WlrLayershell.Top
-        WlrLayershell.exclusiveZone: -1
-        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-
-        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)
-        }
-
-        anchors {
-            top: true
-            bottom: true
-            left: true
-            right: true
-        }
-
-        mask: Region {
-            item: (spotlightOpen || isClosing) ? bgFullScreenMask : null
-        }
-
-        Item {
-            id: bgFullScreenMask
-            anchors.fill: parent
-        }
-
-        Rectangle {
-            id: backgroundDarken
-            anchors.fill: parent
-            color: "black"
-            opacity: launcherMotionVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
-            visible: launcherMotionVisible || opacity > 0
-
-            Behavior on opacity {
-                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
-                DankAnim {
-                    duration: Math.round(Theme.variantDuration(root.launcherAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
-                    easing.bezierCurve: launcherMotionVisible ? root.launcherEnterCurve : root.launcherExitCurve
-                }
-            }
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            enabled: spotlightOpen
-            onClicked: 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 && !root.frameOwnsConnectedChrome
-            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.frameOwnsConnectedChrome ? root.alignedWidth * s : 0
-            blurHeight: (root.spotlightOpen || root.isClosing) && contentWrapper.opacity > 0 && !root.frameOwnsConnectedChrome ? 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: 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 _connectedTravelX: Math.max(Theme.effectAnimOffset, root.alignedWidth + Theme.spacingL)
-            readonly property real _connectedTravelY: Math.max(Theme.effectAnimOffset, root.alignedHeight + Theme.spacingL)
-            readonly property real collapsedMotionX: {
-                if (root.frameOwnsConnectedChrome) {
-                    switch (root.resolvedConnectedBarSide) {
-                    case "left":  return -_connectedTravelX;
-                    case "right": return _connectedTravelX;
-                    }
-                    return 0;
-                }
-                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 (root.frameOwnsConnectedChrome) {
-                    switch (root.resolvedConnectedBarSide) {
-                    case "top":    return -_connectedTravelY;
-                    case "bottom": return _connectedTravelY;
-                    }
-                    return 0;
-                }
-                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);
-            }
-
-            // Declarative bindings — snap applied at render layer (contentWrapper x/y)
-            property real animX: root._motionActive ? 0 : root._frozenMotionX
-            property real animY: root._motionActive ? 0 : root._frozenMotionY
-            property real scaleValue: root._motionActive ? 1.0 : (Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 ? Theme.effectScaleCollapsed : (Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed))
-
-            onAnimXChanged: if (root.frameOwnsConnectedChrome) root._syncModalAnim()
-            onAnimYChanged: if (root.frameOwnsConnectedChrome) root._syncModalAnim()
-
-            Behavior on animX {
-                enabled: root.animationsEnabled
-                DankAnim {
-                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
-                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
-                }
-            }
-
-            Behavior on animY {
-                enabled: root.animationsEnabled
-                DankAnim {
-                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
-                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
-                }
-            }
-
-            Behavior on scaleValue {
-                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2))
-                DankAnim {
-                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
-                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
-                }
-            }
-
-            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.frameOwnsConnectedChrome ? "transparent" : root.backgroundColor
-                        borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
-                        borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
-                        targetRadius: root.cornerRadius
-                        shadowEnabled: !root.frameOwnsConnectedChrome && 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(root.launcherAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
-                                easing.bezierCurve: launcherMotionVisible ? root.launcherEnterCurve : root.launcherExitCurve
-                            }
-                        }
-
-                        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/DankLauncherV2ModalConnected.qml

@@ -0,0 +1,841 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var modalHandle: root
+
+    visible: false
+
+    property bool spotlightOpen: false
+    property bool keyboardActive: false
+    property bool contentVisible: false
+    readonly property bool launcherMotionVisible: Theme.isConnectedEffect ? _motionActive : (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: 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
+
+    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;
+        }
+    }
+    readonly property int modalWidth: Math.min(baseWidth, screenWidth - 100)
+    readonly property int modalHeight: Math.min(baseHeight, screenHeight - 100)
+
+    readonly property string preferredConnectedBarSide: SettingsData.frameLauncherEmergeSide
+
+    readonly property bool frameConnectedMode: SettingsData.frameEnabled && Theme.isConnectedEffect && !!effectiveScreen && SettingsData.isScreenInPreferences(effectiveScreen, SettingsData.frameScreenPreferences)
+
+    readonly property string resolvedConnectedBarSide: frameConnectedMode ? preferredConnectedBarSide : ""
+
+    readonly property bool frameOwnsConnectedChrome: frameConnectedMode && resolvedConnectedBarSide !== ""
+
+    function _dockOccupiesSide(side) {
+        if (!SettingsData.showDock)
+            return false;
+        switch (side) {
+        case "top":
+            return SettingsData.dockPosition === SettingsData.Position.Top;
+        case "bottom":
+            return SettingsData.dockPosition === SettingsData.Position.Bottom;
+        case "left":
+            return SettingsData.dockPosition === SettingsData.Position.Left;
+        case "right":
+            return SettingsData.dockPosition === SettingsData.Position.Right;
+        }
+        return false;
+    }
+    readonly property bool _dockBlocksEmergence: frameOwnsConnectedChrome && _dockOccupiesSide(resolvedConnectedBarSide)
+
+    function _frameEdgeInset(side) {
+        if (!effectiveScreen)
+            return 0;
+        return SettingsData.frameEdgeInsetForSide(effectiveScreen, side);
+    }
+
+    // frameEdgeInsetForSide is the full inset; do not add frameBarSize.
+    // Positions the modal flush to the emerge side, centered on the cross axis.
+    readonly property var _connectedModalPos: {
+        const fallback = {
+            "x": (screenWidth - modalWidth) / 2,
+            "y": (screenHeight - modalHeight) / 2
+        };
+        switch (resolvedConnectedBarSide) {
+        case "top":
+        case "bottom":
+            {
+                const insetL = _frameEdgeInset("left");
+                const insetR = _frameEdgeInset("right");
+                const usable = Math.max(0, screenWidth - insetL - insetR);
+                return {
+                    "x": insetL + Math.max(0, (usable - modalWidth) / 2),
+                    "y": resolvedConnectedBarSide === "top" ? _frameEdgeInset("top") : screenHeight - modalHeight - _frameEdgeInset("bottom")
+                };
+            }
+        case "left":
+        case "right":
+            {
+                const insetT = _frameEdgeInset("top");
+                const insetB = _frameEdgeInset("bottom");
+                const usable = Math.max(0, screenHeight - insetT - insetB);
+                return {
+                    "x": resolvedConnectedBarSide === "left" ? _frameEdgeInset("left") : screenWidth - modalWidth - _frameEdgeInset("right"),
+                    "y": insetT + Math.max(0, (usable - modalHeight) / 2)
+                };
+            }
+        }
+        return fallback;
+    }
+
+    readonly property real modalX: frameOwnsConnectedChrome ? _connectedModalPos.x : ((screenWidth - modalWidth) / 2)
+    readonly property real modalY: frameOwnsConnectedChrome ? _connectedModalPos.y : ((screenHeight - modalHeight) / 2)
+
+    readonly property bool connectedSurfaceOverride: Theme.isConnectedEffect
+    readonly property int launcherAnimationDuration: Theme.isConnectedEffect ? Theme.popoutAnimationDuration : Theme.modalAnimationDuration
+    readonly property list<real> launcherEnterCurve: Theme.isConnectedEffect ? Theme.variantPopoutEnterCurve : Theme.variantModalEnterCurve
+    readonly property list<real> launcherExitCurve: Theme.isConnectedEffect ? Theme.variantPopoutExitCurve : Theme.variantModalExitCurve
+    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;
+        switch (SettingsData.dankLauncherV2BorderColor) {
+        case "primary":
+            return Theme.primary;
+        case "secondary":
+            return Theme.secondary;
+        case "outline":
+            return Theme.outline;
+        case "surfaceText":
+            return Theme.surfaceText;
+        default:
+            return Theme.primary;
+        }
+    }
+    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).
+    // Zeroed when frame owns the chrome and Wayland clips past the bar edge
+    readonly property var shadowLevel: Theme.elevationLevel3
+    readonly property real shadowFallbackOffset: 6
+    readonly property real shadowRenderPadding: (!frameOwnsConnectedChrome && 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
+
+    // ─── Connected chrome sync ────────────────────────────────────────────────
+    property string _chromeClaimId: ""
+    property bool _fullSyncPending: false
+
+    function _nextChromeClaimId() {
+        return "dms:launcher-v2:" + (new Date()).getTime() + ":" + Math.floor(Math.random() * 1000);
+    }
+
+    function _currentScreenName() {
+        return effectiveScreen ? effectiveScreen.name : "";
+    }
+
+    function _publishModalChromeState() {
+        const screenName = _currentScreenName();
+        if (!screenName)
+            return;
+        ConnectedModeState.setModalState(screenName, {
+            "visible": spotlightOpen || contentWindow.visible,
+            "barSide": resolvedConnectedBarSide,
+            "bodyX": alignedX,
+            "bodyY": alignedY,
+            "bodyW": alignedWidth,
+            "bodyH": alignedHeight,
+            "animX": contentContainer ? contentContainer.animX : 0,
+            "animY": contentContainer ? contentContainer.animY : 0,
+            "omitStartConnector": false,
+            "omitEndConnector": false
+        });
+    }
+
+    function _syncModalChromeState() {
+        if (!frameOwnsConnectedChrome) {
+            _releaseModalChrome();
+            return;
+        }
+        if (!_chromeClaimId)
+            _chromeClaimId = _nextChromeClaimId();
+        _publishModalChromeState();
+        if (_dockBlocksEmergence && (spotlightOpen || contentWindow.visible))
+            ConnectedModeState.requestDockRetract(_chromeClaimId, _currentScreenName(), resolvedConnectedBarSide);
+        else
+            ConnectedModeState.releaseDockRetract(_chromeClaimId);
+    }
+
+    function _flushFullSync() {
+        _fullSyncPending = false;
+        _syncModalChromeState();
+    }
+
+    function _queueFullSync() {
+        if (_fullSyncPending)
+            return;
+        _fullSyncPending = true;
+        Qt.callLater(() => {
+            if (root && typeof root._flushFullSync === "function")
+                root._flushFullSync();
+        });
+    }
+
+    function _syncModalAnim() {
+        if (!frameOwnsConnectedChrome || !_chromeClaimId)
+            return;
+        const screenName = _currentScreenName();
+        if (!screenName || !contentContainer)
+            return;
+        ConnectedModeState.setModalAnim(screenName, contentContainer.animX, contentContainer.animY);
+    }
+
+    function _syncModalBody() {
+        if (!frameOwnsConnectedChrome || !_chromeClaimId)
+            return;
+        const screenName = _currentScreenName();
+        if (!screenName)
+            return;
+        ConnectedModeState.setModalBody(screenName, alignedX, alignedY, alignedWidth, alignedHeight);
+    }
+
+    function _releaseModalChrome() {
+        if (_chromeClaimId) {
+            ConnectedModeState.releaseDockRetract(_chromeClaimId);
+            _chromeClaimId = "";
+        }
+        const screenName = _currentScreenName();
+        if (screenName)
+            ConnectedModeState.clearModalState(screenName);
+    }
+
+    onFrameOwnsConnectedChromeChanged: _syncModalChromeState()
+    onResolvedConnectedBarSideChanged: _queueFullSync()
+    onSpotlightOpenChanged: _queueFullSync()
+    onAlignedXChanged: _syncModalBody()
+    onAlignedYChanged: _syncModalBody()
+    onAlignedWidthChanged: _syncModalBody()
+    onAlignedHeightChanged: _syncModalBody()
+
+    Component.onDestruction: _releaseModalChrome()
+
+    Connections {
+        target: contentWindow
+        function onVisibleChanged() {
+            if (contentWindow.visible)
+                root._syncModalChromeState();
+            else
+                root._releaseModalChrome();
+        }
+    }
+
+    function _ensureContentLoadedAndInitialize(query, mode) {
+        _pendingQuery = query || "";
+        _pendingMode = mode || "";
+        _pendingInitialize = true;
+        contentVisible = true;
+        launcherContentLoader.active = true;
+
+        if (spotlightContent) {
+            _initializeAndShow(_pendingQuery, _pendingMode);
+            _pendingInitialize = false;
+        }
+    }
+
+    function _initializeAndShow(query, mode) {
+        if (!spotlightContent)
+            return;
+        contentVisible = true;
+        // NOTE: forceActiveFocus() is deliberately NOT called here.
+        // It is deferred to after animation starts to avoid compositor IPC stalls.
+
+        if (spotlightContent.searchField) {
+            spotlightContent.searchField.text = query;
+        }
+        if (spotlightContent.controller) {
+            var targetMode = mode || SessionData.launcherLastMode || "all";
+            spotlightContent.controller.searchMode = targetMode;
+            spotlightContent.controller.activePluginId = "";
+            spotlightContent.controller.activePluginName = "";
+            spotlightContent.controller.pluginFilter = "";
+            spotlightContent.controller.fileSearchType = "all";
+            spotlightContent.controller.fileSearchExt = "";
+            spotlightContent.controller.fileSearchFolder = "";
+            spotlightContent.controller.fileSearchSort = "score";
+            spotlightContent.controller.collapsedSections = {};
+            spotlightContent.controller.selectedFlatIndex = 0;
+            spotlightContent.controller.selectedItem = null;
+            if (query) {
+                spotlightContent.controller.setSearchQuery(query);
+            } else {
+                spotlightContent.controller.searchQuery = "";
+                spotlightContent.controller.performSearch();
+            }
+        }
+        if (spotlightContent.resetScroll) {
+            spotlightContent.resetScroll();
+        }
+        if (spotlightContent.actionPanel) {
+            spotlightContent.actionPanel.hide();
+        }
+    }
+
+    function _openCommon(query, mode) {
+        closeCleanupTimer.stop();
+        isClosing = false;
+        openedFromOverview = false;
+
+        // 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(modalHandle);
+        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() {
+        _openCommon("", "");
+    }
+
+    function showWithQuery(query) {
+        _openCommon(query, "");
+    }
+
+    function hide() {
+        if (!spotlightOpen)
+            return;
+        openedFromOverview = false;
+        isClosing = true;
+        // 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(modalHandle);
+        closeCleanupTimer.start();
+    }
+
+    function toggle() {
+        spotlightOpen ? hide() : show();
+    }
+
+    function showWithMode(mode) {
+        _openCommon("", mode);
+    }
+
+    function toggleWithMode(mode) {
+        if (spotlightOpen) {
+            hide();
+        } else {
+            showWithMode(mode);
+        }
+    }
+
+    function toggleWithQuery(query) {
+        if (spotlightOpen) {
+            hide();
+        } else {
+            showWithQuery(query);
+        }
+    }
+
+    Timer {
+        id: closeCleanupTimer
+        interval: Theme.variantCloseInterval(root.launcherAnimationDuration)
+        repeat: false
+        onTriggered: {
+            isClosing = false;
+            contentVisible = false;
+            contentWindow.visible = false;
+            backgroundWindow.visible = false;
+            if (root.unloadContentOnClose)
+                launcherContentLoader.active = false;
+            dialogClosed();
+        }
+    }
+
+    Connections {
+        target: spotlightContent?.controller ?? null
+        function onModeChanged(mode) {
+            if (spotlightContent.controller.autoSwitchedToFiles)
+                return;
+            SessionData.setLauncherLastMode(mode);
+        }
+    }
+
+    HyprlandFocusGrab {
+        id: focusGrab
+        windows: [contentWindow]
+        active: false
+
+        onCleared: {
+            if (spotlightOpen) {
+                hide();
+            }
+        }
+    }
+
+    Connections {
+        target: ModalManager
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== modalHandle && spotlightOpen) {
+                hide();
+            }
+        }
+    }
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (Quickshell.screens.length === 0)
+                return;
+
+            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) {
+                        needsReset = false;
+                        break;
+                    }
+                }
+            }
+
+            if (!needsReset)
+                return;
+
+            const newScreen = CompositorService.getFocusedScreen() ?? Quickshell.screens[0];
+            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: backgroundWindow
+        visible: false
+        color: "transparent"
+
+        WlrLayershell.namespace: "dms:spotlight:bg"
+        WlrLayershell.layer: WlrLayershell.Top
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+        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)
+        }
+
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+
+        mask: Region {
+            item: (spotlightOpen || isClosing) ? bgFullScreenMask : null
+        }
+
+        Item {
+            id: bgFullScreenMask
+            anchors.fill: parent
+        }
+
+        Rectangle {
+            id: backgroundDarken
+            anchors.fill: parent
+            color: "black"
+            opacity: launcherMotionVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
+            visible: launcherMotionVisible || opacity > 0
+
+            Behavior on opacity {
+                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || Theme.isConnectedEffect)
+                DankAnim {
+                    duration: Math.round(Theme.variantDuration(root.launcherAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
+                    easing.bezierCurve: launcherMotionVisible ? root.launcherEnterCurve : root.launcherExitCurve
+                }
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: spotlightOpen
+            onClicked: 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 && !root.frameOwnsConnectedChrome
+            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.frameOwnsConnectedChrome ? root.alignedWidth * s : 0
+            blurHeight: (root.spotlightOpen || root.isClosing) && contentWrapper.opacity > 0 && !root.frameOwnsConnectedChrome ? 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: 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 _connectedTravelX: Math.max(Theme.effectAnimOffset, root.alignedWidth + Theme.spacingL)
+            readonly property real _connectedTravelY: Math.max(Theme.effectAnimOffset, root.alignedHeight + Theme.spacingL)
+            readonly property real collapsedMotionX: {
+                if (root.frameOwnsConnectedChrome) {
+                    switch (root.resolvedConnectedBarSide) {
+                    case "left":
+                        return -_connectedTravelX;
+                    case "right":
+                        return _connectedTravelX;
+                    }
+                    return 0;
+                }
+                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 (root.frameOwnsConnectedChrome) {
+                    switch (root.resolvedConnectedBarSide) {
+                    case "top":
+                        return -_connectedTravelY;
+                    case "bottom":
+                        return _connectedTravelY;
+                    }
+                    return 0;
+                }
+                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);
+            }
+
+            // Declarative bindings — snap applied at render layer (contentWrapper x/y)
+            property real animX: root._motionActive ? 0 : root._frozenMotionX
+            property real animY: root._motionActive ? 0 : root._frozenMotionY
+            property real scaleValue: root._motionActive ? 1.0 : (Theme.isDirectionalEffect && typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2 ? Theme.effectScaleCollapsed : (Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed))
+
+            onAnimXChanged: if (root.frameOwnsConnectedChrome)
+                root._syncModalAnim()
+            onAnimYChanged: if (root.frameOwnsConnectedChrome)
+                root._syncModalAnim()
+
+            Behavior on animX {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
+                }
+            }
+
+            Behavior on animY {
+                enabled: root.animationsEnabled
+                DankAnim {
+                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
+                }
+            }
+
+            Behavior on scaleValue {
+                enabled: root.animationsEnabled && (!Theme.isDirectionalEffect || (typeof SettingsData !== "undefined" && SettingsData.directionalAnimationMode === 2))
+                DankAnim {
+                    duration: Theme.variantDuration(root.launcherAnimationDuration, root._motionActive)
+                    easing.bezierCurve: root._motionActive ? root.launcherEnterCurve : root.launcherExitCurve
+                }
+            }
+
+            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.frameOwnsConnectedChrome ? "transparent" : root.backgroundColor
+                        borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
+                        borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
+                        targetRadius: root.cornerRadius
+                        shadowEnabled: !root.frameOwnsConnectedChrome && 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(root.launcherAnimationDuration, launcherMotionVisible) * Theme.variantOpacityDurationScale)
+                                easing.bezierCurve: launcherMotionVisible ? root.launcherEnterCurve : root.launcherExitCurve
+                            }
+                        }
+
+                        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/DankLauncherV2ModalStandalone.qml

@@ -0,0 +1,439 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var modalHandle: root
+
+    visible: false
+
+    property bool spotlightOpen: false
+    property bool keyboardActive: false
+    property bool contentVisible: false
+    property var spotlightContent: launcherContentLoader.item
+    property bool openedFromOverview: false
+    property bool isClosing: false
+    property bool _pendingInitialize: false
+    property string _pendingQuery: ""
+    property string _pendingMode: ""
+    readonly property bool unloadContentOnClose: SettingsData.dankLauncherV2UnloadOnClose
+
+    readonly property bool useHyprlandFocusGrab: CompositorService.useHyprlandFocusGrab
+    readonly property var effectiveScreen: launcherWindow.screen
+    readonly property real screenWidth: effectiveScreen?.width ?? 1920
+    readonly property real screenHeight: effectiveScreen?.height ?? 1080
+    readonly property real dpr: effectiveScreen ? CompositorService.getScreenScale(effectiveScreen) : 1
+
+    readonly property bool frameOwnsConnectedChrome: SettingsData.connectedFrameModeActive && !!effectiveScreen && SettingsData.isScreenInPreferences(effectiveScreen, SettingsData.frameScreenPreferences)
+    readonly property string resolvedConnectedBarSide: frameOwnsConnectedChrome ? (SettingsData.frameLauncherEmergeSide || "bottom") : ""
+
+    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;
+        }
+    }
+    readonly property int modalWidth: Math.min(baseWidth, screenWidth - 100)
+    readonly property int modalHeight: Math.min(baseHeight, screenHeight - 100)
+    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 color borderColor: {
+        if (!SettingsData.dankLauncherV2BorderEnabled)
+            return Theme.outlineMedium;
+        switch (SettingsData.dankLauncherV2BorderColor) {
+        case "primary":
+            return Theme.primary;
+        case "secondary":
+            return Theme.secondary;
+        case "outline":
+            return Theme.outline;
+        case "surfaceText":
+            return Theme.surfaceText;
+        default:
+            return Theme.primary;
+        }
+    }
+    readonly property int borderWidth: SettingsData.dankLauncherV2BorderEnabled ? SettingsData.dankLauncherV2BorderThickness : 0
+
+    signal dialogClosed
+
+    function _ensureContentLoadedAndInitialize(query, mode) {
+        _pendingQuery = query || "";
+        _pendingMode = mode || "";
+        _pendingInitialize = true;
+        contentVisible = true;
+        launcherContentLoader.active = true;
+
+        if (spotlightContent) {
+            _initializeAndShow(_pendingQuery, _pendingMode);
+            _pendingInitialize = false;
+        }
+    }
+
+    function _initializeAndShow(query, mode) {
+        if (!spotlightContent)
+            return;
+        contentVisible = true;
+        spotlightContent.searchField.forceActiveFocus();
+
+        var targetQuery = "";
+
+        if (query) {
+            targetQuery = query;
+        } else if (SettingsData.rememberLastQuery) {
+            targetQuery = SessionData.launcherLastQuery || "";
+        }
+
+        if (spotlightContent.searchField) {
+            spotlightContent.searchField.text = targetQuery;
+        }
+        if (spotlightContent.controller) {
+            var targetMode = mode || SessionData.launcherLastMode || "all";
+            spotlightContent.controller.searchMode = targetMode;
+            spotlightContent.controller.activePluginId = "";
+            spotlightContent.controller.activePluginName = "";
+            spotlightContent.controller.pluginFilter = "";
+            spotlightContent.controller.fileSearchType = "all";
+            spotlightContent.controller.fileSearchExt = "";
+            spotlightContent.controller.fileSearchFolder = "";
+            spotlightContent.controller.fileSearchSort = "score";
+            spotlightContent.controller.collapsedSections = {};
+            spotlightContent.controller.selectedFlatIndex = 0;
+            spotlightContent.controller.selectedItem = null;
+            spotlightContent.controller.historyIndex = -1;
+            spotlightContent.controller.searchQuery = targetQuery;
+
+            spotlightContent.controller.performSearch();
+        }
+        if (spotlightContent.resetScroll) {
+            spotlightContent.resetScroll();
+        }
+        if (spotlightContent.actionPanel) {
+            spotlightContent.actionPanel.hide();
+        }
+    }
+
+    function _finishShow(query, mode) {
+        spotlightOpen = true;
+        isClosing = false;
+        openedFromOverview = false;
+
+        keyboardActive = true;
+        ModalManager.openModal(modalHandle);
+        if (useHyprlandFocusGrab)
+            focusGrab.active = true;
+
+        _ensureContentLoadedAndInitialize(query || "", mode || "");
+    }
+
+    function _openCommon(query, mode) {
+        closeCleanupTimer.stop();
+        const focusedScreen = CompositorService.getFocusedScreen();
+        if (focusedScreen && launcherWindow.screen !== focusedScreen) {
+            spotlightOpen = false;
+            isClosing = false;
+            launcherWindow.screen = focusedScreen;
+            Qt.callLater(() => root._finishShow(query, mode));
+            return;
+        }
+        _finishShow(query, mode);
+    }
+
+    function show() {
+        _openCommon("", "");
+    }
+    function showWithQuery(query) {
+        _openCommon(query, "");
+    }
+    function showWithMode(mode) {
+        _openCommon("", mode);
+    }
+
+    function hide() {
+        if (!spotlightOpen)
+            return;
+        openedFromOverview = false;
+        isClosing = true;
+        contentVisible = false;
+
+        keyboardActive = false;
+        spotlightOpen = false;
+        focusGrab.active = false;
+        ModalManager.closeModal(modalHandle);
+
+        closeCleanupTimer.start();
+    }
+
+    function toggle() {
+        spotlightOpen ? hide() : show();
+    }
+
+    function toggleWithMode(mode) {
+        if (spotlightOpen) {
+            hide();
+        } else {
+            showWithMode(mode);
+        }
+    }
+
+    function toggleWithQuery(query) {
+        if (spotlightOpen) {
+            hide();
+        } else {
+            showWithQuery(query);
+        }
+    }
+
+    Timer {
+        id: closeCleanupTimer
+        interval: Theme.modalAnimationDuration + 50
+        repeat: false
+        onTriggered: {
+            isClosing = false;
+            if (root.unloadContentOnClose)
+                launcherContentLoader.active = false;
+            dialogClosed();
+        }
+    }
+
+    Connections {
+        target: spotlightContent?.controller ?? null
+
+        function onModeChanged(mode) {
+            if (spotlightContent.controller.autoSwitchedToFiles)
+                return;
+            SessionData.setLauncherLastMode(mode);
+        }
+    }
+
+    HyprlandFocusGrab {
+        id: focusGrab
+        windows: [launcherWindow]
+        active: false
+
+        onCleared: {
+            if (spotlightOpen) {
+                hide();
+            }
+        }
+    }
+
+    Connections {
+        target: ModalManager
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== modalHandle && spotlightOpen) {
+                hide();
+            }
+        }
+    }
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (Quickshell.screens.length === 0)
+                return;
+
+            const screenName = launcherWindow.screen?.name;
+            if (screenName) {
+                for (let i = 0; i < Quickshell.screens.length; i++) {
+                    if (Quickshell.screens[i].name === screenName)
+                        return;
+                }
+            }
+
+            if (spotlightOpen)
+                hide();
+
+            const newScreen = CompositorService.getFocusedScreen() ?? Quickshell.screens[0];
+            if (newScreen)
+                launcherWindow.screen = newScreen;
+        }
+    }
+
+    PanelWindow {
+        id: launcherWindow
+        visible: spotlightOpen || isClosing
+        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"
+        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.keyboardFocus: keyboardActive ? (root.useHyprlandFocusGrab ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.Exclusive) : WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+
+        mask: Region {
+            item: spotlightOpen ? fullScreenMask : null
+        }
+
+        Item {
+            id: fullScreenMask
+            anchors.fill: parent
+        }
+
+        Rectangle {
+            id: backgroundDarken
+            anchors.fill: parent
+            color: "black"
+            opacity: contentVisible && SettingsData.modalDarkenBackground ? 0.5 : 0
+            visible: contentVisible || opacity > 0
+
+            Behavior on opacity {
+                DankAnim {
+                    duration: Theme.modalAnimationDuration
+                    easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                }
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: spotlightOpen
+            onClicked: mouse => {
+                var contentX = modalContainer.x;
+                var contentY = modalContainer.y;
+                var contentW = modalContainer.width;
+                var contentH = modalContainer.height;
+
+                if (mouse.x < contentX || mouse.x > contentX + contentW || mouse.y < contentY || mouse.y > contentY + contentH) {
+                    root.hide();
+                }
+            }
+        }
+
+        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
+            }
+        }
+    }
+}

quickshell/Modules/ControlCenter/Components/DragDropGrid.qml

@@ -265,6 +265,7 @@ Column {
                 }
 
                 Behavior on height {
+                    enabled: SettingsData.connectedFrameModeActive
                     NumberAnimation {
                         duration: Theme.variantDuration(Theme.popoutAnimationDuration, detailHost.active)
                         easing.type: Easing.BezierSpline

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -86,7 +86,14 @@ DankPopout {
     }
 
     popupWidth: 550
-    popupHeight: targetPopupHeight
+    popupHeight: {
+        if (SettingsData.connectedFrameModeActive)
+            return targetPopupHeight;
+        const screenHeight = (triggerScreen?.height ?? 1080);
+        const maxHeight = screenHeight - 100;
+        const contentHeight = contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400;
+        return Math.min(maxHeight, contentHeight);
+    }
     triggerWidth: 80
     positioning: ""
     screen: triggerScreen

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -43,43 +43,6 @@ 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();
@@ -98,8 +61,8 @@ Item {
         visible: dropdownType === 1 && volumeAvailable
         width: 60
         height: 180
-        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 1)
-        y: anchorPos.y - height / 2 + panelMotionY(1, height, dropdownType === 1)
+        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        y: anchorPos.y - height / 2
         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)
@@ -126,22 +89,6 @@ Item {
             }
         }
 
-        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
-            }
-        }
-
         ElevationShadow {
             id: volumeShadowLayer
             anchors.fill: parent
@@ -250,11 +197,11 @@ Item {
 
     Rectangle {
         id: audioDevicesPanel
-        visible: dropdownType === 2 && activePlayer !== null
+        visible: dropdownType === 2
         width: 280
         height: Math.max(200, Math.min(280, availableDevices.length * 50 + 100))
-        x: (isRightEdge ? anchorPos.x : anchorPos.x - width) + panelMotionX(width, dropdownType === 2)
-        y: anchorPos.y - height / 2 + panelMotionY(2, height, dropdownType === 2)
+        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        y: anchorPos.y - height / 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)
@@ -281,22 +228,6 @@ Item {
             }
         }
 
-        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
-            }
-        }
-
         ElevationShadow {
             id: audioDevicesShadowLayer
             anchors.fill: parent
@@ -424,8 +355,8 @@ 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) + panelMotionX(width, dropdownType === 3)
-        y: anchorPos.y - height / 2 + panelMotionY(3, height, dropdownType === 3)
+        x: isRightEdge ? anchorPos.x : anchorPos.x - width
+        y: anchorPos.y - height / 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)
@@ -452,22 +383,6 @@ Item {
             }
         }
 
-        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
-            }
-        }
-
         ElevationShadow {
             id: playersShadowLayer
             anchors.fill: parent

quickshell/Modules/Dock/Dock.qml

@@ -144,46 +144,6 @@ Variants {
             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;
-        }
-
         // ─── ConnectedModeState sync ────────────────────────────────────────
         // Dock window origin in screen-relative coordinates (FrameWindow space).
         function _dockWindowOriginX() {
@@ -383,7 +343,8 @@ Variants {
 
         // Flip `reveal` false when a modal claims this edge; reuses the slide animation
         readonly property bool _modalRetractActive: {
-            if (!dock._dockScreenName) return false;
+            if (!dock._dockScreenName)
+                return false;
             return ConnectedModeState.dockRetractActiveForSide(dock._dockScreenName, dock.connectedBarSide);
         }
 
@@ -688,7 +649,8 @@ Variants {
                                 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) : []
-                                onRunningChanged: if (!running) dock._syncDockChromeState()
+                                onRunningChanged: if (!running)
+                                    dock._syncDockChromeState()
                             }
                         }
 
@@ -698,7 +660,8 @@ Variants {
                                 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) : []
-                                onRunningChanged: if (!running) dock._syncDockChromeState()
+                                onRunningChanged: if (!running)
+                                    dock._syncDockChromeState()
                             }
                         }
 

quickshell/Modules/Frame/Frame.qml

@@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
-import qs.Common
 
 Variants {
     id: root

quickshell/Modules/Frame/FrameExclusions.qml

@@ -23,40 +23,40 @@ Scope {
     Loader {
         active: root.screenEnabled && !root.barEdges.includes("top")
         sourceComponent: EdgeExclusion {
-            targetScreen:  root.screen
-            anchorTop:    true
-            anchorLeft:   true
-            anchorRight:  true
+            targetScreen: root.screen
+            anchorTop: true
+            anchorLeft: true
+            anchorRight: true
         }
     }
 
     Loader {
         active: root.screenEnabled && !root.barEdges.includes("bottom")
         sourceComponent: EdgeExclusion {
-            targetScreen:  root.screen
-            anchorBottom:  true
-            anchorLeft:    true
-            anchorRight:   true
+            targetScreen: root.screen
+            anchorBottom: true
+            anchorLeft: true
+            anchorRight: true
         }
     }
 
     Loader {
         active: root.screenEnabled && !root.barEdges.includes("left")
         sourceComponent: EdgeExclusion {
-            targetScreen:  root.screen
-            anchorLeft:    true
-            anchorTop:     true
-            anchorBottom:  true
+            targetScreen: root.screen
+            anchorLeft: true
+            anchorTop: true
+            anchorBottom: true
         }
     }
 
     Loader {
         active: root.screenEnabled && !root.barEdges.includes("right")
         sourceComponent: EdgeExclusion {
-            targetScreen:  root.screen
-            anchorRight:   true
-            anchorTop:     true
-            anchorBottom:  true
+            targetScreen: root.screen
+            anchorRight: true
+            anchorTop: true
+            anchorBottom: true
         }
     }
 
@@ -64,24 +64,24 @@ Scope {
         required property var targetScreen
 
         screen: targetScreen
-        property bool anchorTop:    false
+        property bool anchorTop: false
         property bool anchorBottom: false
-        property bool anchorLeft:   false
-        property bool anchorRight:  false
+        property bool anchorLeft: false
+        property bool anchorRight: false
 
         WlrLayershell.namespace: "dms:frame-exclusion"
         WlrLayershell.layer: WlrLayer.Top
         exclusiveZone: SettingsData.frameThickness
         color: "transparent"
         mask: Region {}
-        implicitWidth:  1
+        implicitWidth: 1
         implicitHeight: 1
 
         anchors {
-            top:    anchorTop
+            top: anchorTop
             bottom: anchorBottom
-            left:   anchorLeft
-            right:  anchorRight
+            left: anchorLeft
+            right: anchorRight
         }
     }
 }

quickshell/Modules/Frame/FrameInstance.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import Quickshell
 
 Item {
     id: root

quickshell/Modules/Frame/FrameWindow.qml

@@ -7,6 +7,7 @@ import Quickshell.Wayland
 import qs.Common
 import qs.Services
 import qs.Widgets
+import "../../Common/ConnectorGeometry.js" as ConnectorGeometry
 
 PanelWindow {
     id: win
@@ -79,13 +80,13 @@ PanelWindow {
     readonly property real _effectivePopoutMaxCcr: Math.max(win._effectivePopoutStartCcr, win._effectivePopoutEndCcr)
     readonly property real _effectivePopoutFarExtent: Math.max(win._effectivePopoutFarStartCcr, win._effectivePopoutFarEndCcr)
     readonly property real _effectiveNotifCcr: {
-        const isHoriz = win._notifState.barSide === "top" || win._notifState.barSide === "bottom";
+        const isHoriz = ConnectorGeometry.isHorizontal(win._notifState.barSide);
         const crossSize = isHoriz ? _notifBodyBlurAnchor.width : _notifBodyBlurAnchor.height;
         const extent = isHoriz ? _notifBodyBlurAnchor.height : _notifBodyBlurAnchor.width;
         return Theme.snap(Math.max(0, Math.min(win._ccr, win._surfaceRadius, extent, crossSize / 2)), win._dpr);
     }
     readonly property real _effectiveNotifFarCcr: {
-        const isHoriz = win._notifState.barSide === "top" || win._notifState.barSide === "bottom";
+        const isHoriz = ConnectorGeometry.isHorizontal(win._notifState.barSide);
         const crossSize = isHoriz ? _notifBodySceneBlurAnchor.width : _notifBodySceneBlurAnchor.height;
         return Theme.snap(Math.max(0, Math.min(win._ccr, win._surfaceRadius, crossSize / 2)), win._dpr);
     }
@@ -96,13 +97,13 @@ PanelWindow {
     readonly property real _effectiveNotifMaxCcr: Math.max(win._effectiveNotifStartCcr, win._effectiveNotifEndCcr)
     readonly property real _effectiveNotifFarExtent: Math.max(win._effectiveNotifFarStartCcr, win._effectiveNotifFarEndCcr)
     readonly property real _effectiveModalCcr: {
-        const isHoriz = win._modalState.barSide === "top" || win._modalState.barSide === "bottom";
+        const isHoriz = ConnectorGeometry.isHorizontal(win._modalState.barSide);
         const crossSize = isHoriz ? _modalBodyBlurAnchor.width : _modalBodyBlurAnchor.height;
         const extent = isHoriz ? _modalBodyBlurAnchor.height : _modalBodyBlurAnchor.width;
         return Theme.snap(Math.max(0, Math.min(win._ccr, win._surfaceRadius, extent, crossSize / 2)), win._dpr);
     }
     readonly property real _effectiveModalFarCcr: {
-        const isHoriz = win._modalState.barSide === "top" || win._modalState.barSide === "bottom";
+        const isHoriz = ConnectorGeometry.isHorizontal(win._modalState.barSide);
         const crossSize = isHoriz ? _modalBodyBlurAnchor.width : _modalBodyBlurAnchor.height;
         return Theme.snap(Math.max(0, Math.min(win._ccr, win._surfaceRadius, crossSize / 2)), win._dpr);
     }
@@ -218,11 +219,11 @@ PanelWindow {
 
         readonly property real _radius: win._popoutConnectorRadius("left")
         readonly property bool _active: _popoutBodyBlurAnchor._active && _radius > 0
-        readonly property real _w: win._popoutConnectorWidth(0, "left")
-        readonly property real _h: win._popoutConnectorHeight(0, "left")
+        readonly property real _w: ConnectorGeometry.connectorWidth(ConnectedModeState.popoutBarSide, 0, win._popoutConnectorRadius("left"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(ConnectedModeState.popoutBarSide, 0, win._popoutConnectorRadius("left"))
 
-        x: _active ? Theme.snap(win._popoutConnectorX(_popoutBodyBlurAnchor.x, _popoutBodyBlurAnchor.width, "left", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._popoutConnectorY(_popoutBodyBlurAnchor.y, _popoutBodyBlurAnchor.height, "left", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(ConnectedModeState.popoutBarSide, _popoutBodyBlurAnchor.x, _popoutBodyBlurAnchor.width, "left", 0, win._popoutConnectorRadius("left")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(ConnectedModeState.popoutBarSide, _popoutBodyBlurAnchor.y, _popoutBodyBlurAnchor.height, "left", 0, win._popoutConnectorRadius("left")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -233,11 +234,11 @@ PanelWindow {
 
         readonly property real _radius: win._popoutConnectorRadius("right")
         readonly property bool _active: _popoutBodyBlurAnchor._active && _radius > 0
-        readonly property real _w: win._popoutConnectorWidth(0, "right")
-        readonly property real _h: win._popoutConnectorHeight(0, "right")
+        readonly property real _w: ConnectorGeometry.connectorWidth(ConnectedModeState.popoutBarSide, 0, win._popoutConnectorRadius("right"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(ConnectedModeState.popoutBarSide, 0, win._popoutConnectorRadius("right"))
 
-        x: _active ? Theme.snap(win._popoutConnectorX(_popoutBodyBlurAnchor.x, _popoutBodyBlurAnchor.width, "right", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._popoutConnectorY(_popoutBodyBlurAnchor.y, _popoutBodyBlurAnchor.height, "right", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(ConnectedModeState.popoutBarSide, _popoutBodyBlurAnchor.x, _popoutBodyBlurAnchor.width, "right", 0, win._popoutConnectorRadius("right")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(ConnectedModeState.popoutBarSide, _popoutBodyBlurAnchor.y, _popoutBodyBlurAnchor.height, "right", 0, win._popoutConnectorRadius("right")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -247,7 +248,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _popoutLeftConnectorBlurAnchor.width > 0 && _popoutLeftConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(ConnectedModeState.popoutBarSide, "left")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(ConnectedModeState.popoutBarSide, "left")
         readonly property real _radius: win._popoutConnectorRadius("left")
 
         x: _active ? win._connectorCutoutX(_popoutLeftConnectorBlurAnchor.x, _popoutLeftConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -261,7 +262,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _popoutRightConnectorBlurAnchor.width > 0 && _popoutRightConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(ConnectedModeState.popoutBarSide, "right")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(ConnectedModeState.popoutBarSide, "right")
         readonly property real _radius: win._popoutConnectorRadius("right")
 
         x: _active ? win._connectorCutoutX(_popoutRightConnectorBlurAnchor.x, _popoutRightConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -329,7 +330,7 @@ PanelWindow {
         readonly property bool _active: _popoutFarStartConnectorBlurAnchor.width > 0 && _popoutFarStartConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(ConnectedModeState.popoutBarSide, "left")
         readonly property string _placement: win._farConnectorPlacement(ConnectedModeState.popoutBarSide, "left")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectivePopoutFarStartCcr
 
         x: _active ? win._connectorCutoutX(_popoutFarStartConnectorBlurAnchor.x, _popoutFarStartConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -345,7 +346,7 @@ PanelWindow {
         readonly property bool _active: _popoutFarEndConnectorBlurAnchor.width > 0 && _popoutFarEndConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(ConnectedModeState.popoutBarSide, "right")
         readonly property string _placement: win._farConnectorPlacement(ConnectedModeState.popoutBarSide, "right")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectivePopoutFarEndCcr
 
         x: _active ? win._connectorCutoutX(_popoutFarEndConnectorBlurAnchor.x, _popoutFarEndConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -359,11 +360,11 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _dockBodyBlurAnchor._active && win._dockConnectorRadius() > 0
-        readonly property real _w: win._dockConnectorWidth(0)
-        readonly property real _h: win._dockConnectorHeight(0)
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._dockState.barSide, 0, win._dockConnectorRadius())
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._dockState.barSide, 0, win._dockConnectorRadius())
 
-        x: _active ? Theme.snap(win._dockConnectorX(_dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "left", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._dockConnectorY(_dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "left", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._dockState.barSide, _dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "left", 0, win._dockConnectorRadius()), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._dockState.barSide, _dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "left", 0, win._dockConnectorRadius()), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -373,11 +374,11 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _dockBodyBlurAnchor._active && win._dockConnectorRadius() > 0
-        readonly property real _w: win._dockConnectorWidth(0)
-        readonly property real _h: win._dockConnectorHeight(0)
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._dockState.barSide, 0, win._dockConnectorRadius())
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._dockState.barSide, 0, win._dockConnectorRadius())
 
-        x: _active ? Theme.snap(win._dockConnectorX(_dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "right", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._dockConnectorY(_dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "right", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._dockState.barSide, _dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "right", 0, win._dockConnectorRadius()), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._dockState.barSide, _dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "right", 0, win._dockConnectorRadius()), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -387,7 +388,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _dockLeftConnectorBlurAnchor.width > 0 && _dockLeftConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._dockState.barSide, "left")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._dockState.barSide, "left")
 
         x: _active ? win._connectorCutoutX(_dockLeftConnectorBlurAnchor.x, _dockLeftConnectorBlurAnchor.width, _arcCorner, win._dockConnectorRadius()) : 0
         y: _active ? win._connectorCutoutY(_dockLeftConnectorBlurAnchor.y, _dockLeftConnectorBlurAnchor.height, _arcCorner, win._dockConnectorRadius()) : 0
@@ -400,7 +401,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _dockRightConnectorBlurAnchor.width > 0 && _dockRightConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._dockState.barSide, "right")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._dockState.barSide, "right")
 
         x: _active ? win._connectorCutoutX(_dockRightConnectorBlurAnchor.x, _dockRightConnectorBlurAnchor.width, _arcCorner, win._dockConnectorRadius()) : 0
         y: _active ? win._connectorCutoutY(_dockRightConnectorBlurAnchor.y, _dockRightConnectorBlurAnchor.height, _arcCorner, win._dockConnectorRadius()) : 0
@@ -427,7 +428,7 @@ PanelWindow {
         readonly property bool _active: win._frameActive && win._modalState.visible && win._modalState.bodyW > 0 && win._modalState.bodyH > 0
 
         // Clamp animX/Y so the blur body shrinks toward the bar edge (same as _popoutBodyBlurAnchor).
-        readonly property real _dyClamp: (win._modalState.barSide === "top" || win._modalState.barSide === "bottom") ? Math.max(-win._modalState.bodyH, Math.min(win._modalState.animY, win._modalState.bodyH)) : 0
+        readonly property real _dyClamp: ConnectorGeometry.isHorizontal(win._modalState.barSide) ? Math.max(-win._modalState.bodyH, Math.min(win._modalState.animY, win._modalState.bodyH)) : 0
         readonly property real _dxClamp: (win._modalState.barSide === "left" || win._modalState.barSide === "right") ? Math.max(-win._modalState.bodyW, Math.min(win._modalState.animX, win._modalState.bodyW)) : 0
 
         x: _active ? Theme.snap(win._modalState.bodyX + (win._modalState.barSide === "right" ? _dxClamp : 0), win._dpr) : 0
@@ -458,11 +459,11 @@ PanelWindow {
 
         readonly property real _radius: win._modalConnectorRadius("left")
         readonly property bool _active: _modalBodyBlurAnchor._active && _radius > 0
-        readonly property real _w: win._modalConnectorWidth(0, "left")
-        readonly property real _h: win._modalConnectorHeight(0, "left")
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._modalState.barSide, 0, win._modalConnectorRadius("left"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._modalState.barSide, 0, win._modalConnectorRadius("left"))
 
-        x: _active ? Theme.snap(win._modalConnectorX(_modalBodyBlurAnchor.x, _modalBodyBlurAnchor.width, "left", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._modalConnectorY(_modalBodyBlurAnchor.y, _modalBodyBlurAnchor.height, "left", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._modalState.barSide, _modalBodyBlurAnchor.x, _modalBodyBlurAnchor.width, "left", 0, win._modalConnectorRadius("left")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._modalState.barSide, _modalBodyBlurAnchor.y, _modalBodyBlurAnchor.height, "left", 0, win._modalConnectorRadius("left")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -473,11 +474,11 @@ PanelWindow {
 
         readonly property real _radius: win._modalConnectorRadius("right")
         readonly property bool _active: _modalBodyBlurAnchor._active && _radius > 0
-        readonly property real _w: win._modalConnectorWidth(0, "right")
-        readonly property real _h: win._modalConnectorHeight(0, "right")
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._modalState.barSide, 0, win._modalConnectorRadius("right"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._modalState.barSide, 0, win._modalConnectorRadius("right"))
 
-        x: _active ? Theme.snap(win._modalConnectorX(_modalBodyBlurAnchor.x, _modalBodyBlurAnchor.width, "right", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._modalConnectorY(_modalBodyBlurAnchor.y, _modalBodyBlurAnchor.height, "right", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._modalState.barSide, _modalBodyBlurAnchor.x, _modalBodyBlurAnchor.width, "right", 0, win._modalConnectorRadius("right")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._modalState.barSide, _modalBodyBlurAnchor.y, _modalBodyBlurAnchor.height, "right", 0, win._modalConnectorRadius("right")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -487,7 +488,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _modalLeftConnectorBlurAnchor.width > 0 && _modalLeftConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._modalState.barSide, "left")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._modalState.barSide, "left")
         readonly property real _radius: win._modalConnectorRadius("left")
 
         x: _active ? win._connectorCutoutX(_modalLeftConnectorBlurAnchor.x, _modalLeftConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -501,7 +502,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _modalRightConnectorBlurAnchor.width > 0 && _modalRightConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._modalState.barSide, "right")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._modalState.barSide, "right")
         readonly property real _radius: win._modalConnectorRadius("right")
 
         x: _active ? win._connectorCutoutX(_modalRightConnectorBlurAnchor.x, _modalRightConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -569,7 +570,7 @@ PanelWindow {
         readonly property bool _active: _modalFarStartConnectorBlurAnchor.width > 0 && _modalFarStartConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(win._modalState.barSide, "left")
         readonly property string _placement: win._farConnectorPlacement(win._modalState.barSide, "left")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectiveModalFarStartCcr
 
         x: _active ? win._connectorCutoutX(_modalFarStartConnectorBlurAnchor.x, _modalFarStartConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -585,7 +586,7 @@ PanelWindow {
         readonly property bool _active: _modalFarEndConnectorBlurAnchor.width > 0 && _modalFarEndConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(win._modalState.barSide, "right")
         readonly property string _placement: win._farConnectorPlacement(win._modalState.barSide, "right")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectiveModalFarEndCcr
 
         x: _active ? win._connectorCutoutX(_modalFarEndConnectorBlurAnchor.x, _modalFarEndConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -599,11 +600,12 @@ PanelWindow {
         visible: false
 
         readonly property bool _active: _notifBodyBlurAnchor._active
+        readonly property var _scene: _active ? win._notifBodyScene() : null
 
-        x: _active ? Theme.snap(win._notifBodySceneX(), win._dpr) : 0
-        y: _active ? Theme.snap(win._notifBodySceneY(), win._dpr) : 0
-        width: _active ? Theme.snap(win._notifBodySceneWidth(), win._dpr) : 0
-        height: _active ? Theme.snap(win._notifBodySceneHeight(), win._dpr) : 0
+        x: _scene ? Theme.snap(_scene.x, win._dpr) : 0
+        y: _scene ? Theme.snap(_scene.y, win._dpr) : 0
+        width: _scene ? Theme.snap(_scene.width, win._dpr) : 0
+        height: _scene ? Theme.snap(_scene.height, win._dpr) : 0
     }
 
     Item {
@@ -628,11 +630,11 @@ PanelWindow {
 
         readonly property real _radius: win._notifConnectorRadius("left")
         readonly property bool _active: _notifBodySceneBlurAnchor._active && _radius > 0
-        readonly property real _w: win._notifConnectorWidth(0, "left")
-        readonly property real _h: win._notifConnectorHeight(0, "left")
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._notifState.barSide, 0, win._notifConnectorRadius("left"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._notifState.barSide, 0, win._notifConnectorRadius("left"))
 
-        x: _active ? Theme.snap(win._notifConnectorX(_notifBodySceneBlurAnchor.x, _notifBodySceneBlurAnchor.width, "left", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._notifConnectorY(_notifBodySceneBlurAnchor.y, _notifBodySceneBlurAnchor.height, "left", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._notifState.barSide, _notifBodySceneBlurAnchor.x, _notifBodySceneBlurAnchor.width, "left", 0, win._notifConnectorRadius("left")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._notifState.barSide, _notifBodySceneBlurAnchor.y, _notifBodySceneBlurAnchor.height, "left", 0, win._notifConnectorRadius("left")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -643,11 +645,11 @@ PanelWindow {
 
         readonly property real _radius: win._notifConnectorRadius("right")
         readonly property bool _active: _notifBodySceneBlurAnchor._active && _radius > 0
-        readonly property real _w: win._notifConnectorWidth(0, "right")
-        readonly property real _h: win._notifConnectorHeight(0, "right")
+        readonly property real _w: ConnectorGeometry.connectorWidth(win._notifState.barSide, 0, win._notifConnectorRadius("right"))
+        readonly property real _h: ConnectorGeometry.connectorHeight(win._notifState.barSide, 0, win._notifConnectorRadius("right"))
 
-        x: _active ? Theme.snap(win._notifConnectorX(_notifBodySceneBlurAnchor.x, _notifBodySceneBlurAnchor.width, "right", 0), win._dpr) : 0
-        y: _active ? Theme.snap(win._notifConnectorY(_notifBodySceneBlurAnchor.y, _notifBodySceneBlurAnchor.height, "right", 0), win._dpr) : 0
+        x: _active ? Theme.snap(ConnectorGeometry.connectorX(win._notifState.barSide, _notifBodySceneBlurAnchor.x, _notifBodySceneBlurAnchor.width, "right", 0, win._notifConnectorRadius("right")), win._dpr) : 0
+        y: _active ? Theme.snap(ConnectorGeometry.connectorY(win._notifState.barSide, _notifBodySceneBlurAnchor.y, _notifBodySceneBlurAnchor.height, "right", 0, win._notifConnectorRadius("right")), win._dpr) : 0
         width: _active ? _w : 0
         height: _active ? _h : 0
     }
@@ -657,7 +659,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _notifLeftConnectorBlurAnchor.width > 0 && _notifLeftConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._notifState.barSide, "left")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._notifState.barSide, "left")
         readonly property real _radius: win._notifConnectorRadius("left")
 
         x: _active ? win._connectorCutoutX(_notifLeftConnectorBlurAnchor.x, _notifLeftConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -671,7 +673,7 @@ PanelWindow {
         opacity: 0
 
         readonly property bool _active: _notifRightConnectorBlurAnchor.width > 0 && _notifRightConnectorBlurAnchor.height > 0
-        readonly property string _arcCorner: win._connectorArcCorner(win._notifState.barSide, "right")
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(win._notifState.barSide, "right")
         readonly property real _radius: win._notifConnectorRadius("right")
 
         x: _active ? win._connectorCutoutX(_notifRightConnectorBlurAnchor.x, _notifRightConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -739,7 +741,7 @@ PanelWindow {
         readonly property bool _active: _notifFarStartConnectorBlurAnchor.width > 0 && _notifFarStartConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(win._notifState.barSide, "left")
         readonly property string _placement: win._farConnectorPlacement(win._notifState.barSide, "left")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectiveNotifFarStartCcr
 
         x: _active ? win._connectorCutoutX(_notifFarStartConnectorBlurAnchor.x, _notifFarStartConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -755,7 +757,7 @@ PanelWindow {
         readonly property bool _active: _notifFarEndConnectorBlurAnchor.width > 0 && _notifFarEndConnectorBlurAnchor.height > 0
         readonly property string _barSide: win._farConnectorBarSide(win._notifState.barSide, "right")
         readonly property string _placement: win._farConnectorPlacement(win._notifState.barSide, "right")
-        readonly property string _arcCorner: win._connectorArcCorner(_barSide, _placement)
+        readonly property string _arcCorner: ConnectorGeometry.arcCorner(_barSide, _placement)
         readonly property real _radius: win._effectiveNotifFarEndCcr
 
         x: _active ? win._connectorCutoutX(_notifFarEndConnectorBlurAnchor.x, _notifFarEndConnectorBlurAnchor.width, _arcCorner, _radius) : 0
@@ -960,42 +962,9 @@ PanelWindow {
         return Math.max(0, Math.min(win._ccr, bodyRadius, maxConnectorRadius));
     }
 
-    function _dockConnectorWidth(spacing) {
-        const isVert = win._dockState.barSide === "left" || win._dockState.barSide === "right";
-        const radius = win._dockConnectorRadius();
-        return isVert ? (spacing + radius) : radius;
-    }
-
-    function _dockConnectorHeight(spacing) {
-        const isVert = win._dockState.barSide === "left" || win._dockState.barSide === "right";
-        const radius = win._dockConnectorRadius();
-        return isVert ? radius : (spacing + radius);
-    }
-
-    function _dockConnectorX(baseX, bodyWidth, placement, spacing) {
-        const dockSide = win._dockState.barSide;
-        const isVert = dockSide === "left" || dockSide === "right";
-        const seamX = !isVert ? (placement === "left" ? baseX : baseX + bodyWidth) : (dockSide === "left" ? baseX : baseX + bodyWidth);
-        const w = _dockConnectorWidth(spacing);
-        if (!isVert)
-            return placement === "left" ? seamX - w : seamX;
-        return dockSide === "left" ? seamX : seamX - w;
-    }
-
-    function _dockConnectorY(baseY, bodyHeight, placement, spacing) {
-        const dockSide = win._dockState.barSide;
-        const seamY = dockSide === "top" ? baseY : dockSide === "bottom" ? baseY + bodyHeight : (placement === "left" ? baseY : baseY + bodyHeight);
-        const h = _dockConnectorHeight(spacing);
-        if (dockSide === "top")
-            return seamY;
-        if (dockSide === "bottom")
-            return seamY - h;
-        return placement === "left" ? seamY - h : seamY;
-    }
-
     function _notifSideUnderlap() {
         const side = win._notifState.barSide;
-        return (side === "left" || side === "right") ? win._seamOverlap : 0;
+        return ConnectorGeometry.isVertical(side) ? win._seamOverlap : 0;
     }
 
     function _notifStartUnderlap() {
@@ -1006,36 +975,26 @@ PanelWindow {
         return win._notifState.omitEndConnector ? win._seamOverlap : 0;
     }
 
-    function _notifBodySceneX() {
-        const side = win._notifState.barSide;
-        const isHoriz = side === "top" || side === "bottom";
-        if (isHoriz)
-            return _notifBodyBlurAnchor.x - win._notifStartUnderlap();
-        return _notifBodyBlurAnchor.x - (side === "left" ? win._notifSideUnderlap() : 0);
-    }
-
-    function _notifBodySceneY() {
-        const side = win._notifState.barSide;
-        const isHoriz = side === "top" || side === "bottom";
-        if (isHoriz)
-            return _notifBodyBlurAnchor.y;
-        return _notifBodyBlurAnchor.y - win._notifStartUnderlap();
-    }
-
-    function _notifBodySceneWidth() {
-        const side = win._notifState.barSide;
-        const isHoriz = side === "top" || side === "bottom";
-        if (isHoriz)
-            return _notifBodyBlurAnchor.width + win._notifStartUnderlap() + win._notifEndUnderlap();
-        return _notifBodyBlurAnchor.width + win._notifSideUnderlap();
-    }
-
-    function _notifBodySceneHeight() {
-        const side = win._notifState.barSide;
-        const isHoriz = side === "top" || side === "bottom";
-        if (isHoriz)
-            return _notifBodyBlurAnchor.height;
-        return _notifBodyBlurAnchor.height + win._notifStartUnderlap() + win._notifEndUnderlap();
+    // Notif body scene rect, accounting for start/end/side underlaps per bar orientation.
+    function _notifBodyScene() {
+        const isHoriz = ConnectorGeometry.isHorizontal(win._notifState.barSide);
+        const start = win._notifStartUnderlap();
+        const end = win._notifEndUnderlap();
+        const side = win._notifSideUnderlap();
+        if (isHoriz) {
+            return {
+                "x": _notifBodyBlurAnchor.x - start,
+                "y": _notifBodyBlurAnchor.y,
+                "width": _notifBodyBlurAnchor.width + start + end,
+                "height": _notifBodyBlurAnchor.height
+            };
+        }
+        return {
+            "x": _notifBodyBlurAnchor.x - (win._notifState.barSide === "left" ? side : 0),
+            "y": _notifBodyBlurAnchor.y - start,
+            "width": _notifBodyBlurAnchor.width + side,
+            "height": _notifBodyBlurAnchor.height + start + end
+        };
     }
 
     function _notifConnectorRadius(placement) {
@@ -1046,76 +1005,10 @@ PanelWindow {
         return win._effectiveNotifMaxCcr;
     }
 
-    function _notifConnectorWidth(spacing, placement) {
-        const isVert = win._notifState.barSide === "left" || win._notifState.barSide === "right";
-        const radius = win._notifConnectorRadius(placement);
-        return isVert ? (spacing + radius) : radius;
-    }
-
-    function _notifConnectorHeight(spacing, placement) {
-        const isVert = win._notifState.barSide === "left" || win._notifState.barSide === "right";
-        const radius = win._notifConnectorRadius(placement);
-        return isVert ? radius : (spacing + radius);
-    }
-
-    function _notifConnectorX(baseX, bodyWidth, placement, spacing) {
-        const notifSide = win._notifState.barSide;
-        const isVert = notifSide === "left" || notifSide === "right";
-        const seamX = !isVert ? (placement === "left" ? baseX : baseX + bodyWidth) : (notifSide === "left" ? baseX : baseX + bodyWidth);
-        const w = _notifConnectorWidth(spacing, placement);
-        if (!isVert)
-            return placement === "left" ? seamX - w : seamX;
-        return notifSide === "left" ? seamX : seamX - w;
-    }
-
-    function _notifConnectorY(baseY, bodyHeight, placement, spacing) {
-        const notifSide = win._notifState.barSide;
-        const seamY = notifSide === "top" ? baseY : notifSide === "bottom" ? baseY + bodyHeight : (placement === "left" ? baseY : baseY + bodyHeight);
-        const h = _notifConnectorHeight(spacing, placement);
-        if (notifSide === "top")
-            return seamY;
-        if (notifSide === "bottom")
-            return seamY - h;
-        return placement === "left" ? seamY - h : seamY;
-    }
-
     function _popoutConnectorRadius(placement) {
         return placement === "right" ? win._effectivePopoutEndCcr : win._effectivePopoutStartCcr;
     }
 
-    function _popoutConnectorWidth(spacing, placement) {
-        const isVert = ConnectedModeState.popoutBarSide === "left" || ConnectedModeState.popoutBarSide === "right";
-        const radius = win._popoutConnectorRadius(placement);
-        return isVert ? (spacing + radius) : radius;
-    }
-
-    function _popoutConnectorHeight(spacing, placement) {
-        const isVert = ConnectedModeState.popoutBarSide === "left" || ConnectedModeState.popoutBarSide === "right";
-        const radius = win._popoutConnectorRadius(placement);
-        return isVert ? radius : (spacing + radius);
-    }
-
-    function _popoutConnectorX(baseX, bodyWidth, placement, spacing) {
-        const popoutSide = ConnectedModeState.popoutBarSide;
-        const isVert = popoutSide === "left" || popoutSide === "right";
-        const seamX = !isVert ? (placement === "left" ? baseX : baseX + bodyWidth) : (popoutSide === "left" ? baseX : baseX + bodyWidth);
-        const w = _popoutConnectorWidth(spacing, placement);
-        if (!isVert)
-            return placement === "left" ? seamX - w : seamX;
-        return popoutSide === "left" ? seamX : seamX - w;
-    }
-
-    function _popoutConnectorY(baseY, bodyHeight, placement, spacing) {
-        const popoutSide = ConnectedModeState.popoutBarSide;
-        const seamY = popoutSide === "top" ? baseY : popoutSide === "bottom" ? baseY + bodyHeight : (placement === "left" ? baseY : baseY + bodyHeight);
-        const h = _popoutConnectorHeight(spacing, placement);
-        if (popoutSide === "top")
-            return seamY;
-        if (popoutSide === "bottom")
-            return seamY - h;
-        return placement === "left" ? seamY - h : seamY;
-    }
-
     function _popoutFillOverlapX() {
         return (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "bottom") ? win._seamOverlap : 0;
     }
@@ -1125,7 +1018,7 @@ PanelWindow {
     }
 
     function _dockFillOverlapX() {
-        return (win._dockState.barSide === "top" || win._dockState.barSide === "bottom") ? win._seamOverlap : 0;
+        return ConnectorGeometry.isHorizontal(win._dockState.barSide) ? win._seamOverlap : 0;
     }
 
     function _dockFillOverlapY() {
@@ -1133,7 +1026,7 @@ PanelWindow {
     }
 
     function _modalArcExtent() {
-        return (win._modalState.barSide === "top" || win._modalState.barSide === "bottom") ? _modalBodyBlurAnchor.height : _modalBodyBlurAnchor.width;
+        return ConnectorGeometry.isHorizontal(win._modalState.barSide) ? _modalBodyBlurAnchor.height : _modalBodyBlurAnchor.width;
     }
 
     function _modalBlurCapThickness() {
@@ -1145,39 +1038,6 @@ PanelWindow {
         return placement === "right" ? win._effectiveModalEndCcr : win._effectiveModalStartCcr;
     }
 
-    function _modalConnectorWidth(spacing, placement) {
-        const isVert = win._modalState.barSide === "left" || win._modalState.barSide === "right";
-        const radius = win._modalConnectorRadius(placement);
-        return isVert ? (spacing + radius) : radius;
-    }
-
-    function _modalConnectorHeight(spacing, placement) {
-        const isVert = win._modalState.barSide === "left" || win._modalState.barSide === "right";
-        const radius = win._modalConnectorRadius(placement);
-        return isVert ? radius : (spacing + radius);
-    }
-
-    function _modalConnectorX(baseX, bodyWidth, placement, spacing) {
-        const barSide = win._modalState.barSide;
-        const isVert = barSide === "left" || barSide === "right";
-        const seamX = !isVert ? (placement === "left" ? baseX : baseX + bodyWidth) : (barSide === "left" ? baseX : baseX + bodyWidth);
-        const w = _modalConnectorWidth(spacing, placement);
-        if (!isVert)
-            return placement === "left" ? seamX - w : seamX;
-        return barSide === "left" ? seamX : seamX - w;
-    }
-
-    function _modalConnectorY(baseY, bodyHeight, placement, spacing) {
-        const barSide = win._modalState.barSide;
-        const seamY = barSide === "top" ? baseY : barSide === "bottom" ? baseY + bodyHeight : (placement === "left" ? baseY : baseY + bodyHeight);
-        const h = _modalConnectorHeight(spacing, placement);
-        if (barSide === "top")
-            return seamY;
-        if (barSide === "bottom")
-            return seamY - h;
-        return placement === "left" ? seamY - h : seamY;
-    }
-
     function _popoutArcExtent() {
         return (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "bottom") ? _popoutBodyBlurAnchor.height : _popoutBodyBlurAnchor.width;
     }
@@ -1231,28 +1091,28 @@ PanelWindow {
 
     function _popoutShapeBodyOffsetX() {
         const side = ConnectedModeState.popoutBarSide;
-        if (side === "top" || side === "bottom")
+        if (ConnectorGeometry.isHorizontal(side))
             return win._effectivePopoutStartCcr;
         return side === "right" ? win._effectivePopoutFarExtent : 0;
     }
 
     function _popoutShapeBodyOffsetY() {
         const side = ConnectedModeState.popoutBarSide;
-        if (side === "top" || side === "bottom")
+        if (ConnectorGeometry.isHorizontal(side))
             return side === "bottom" ? win._effectivePopoutFarExtent : 0;
         return win._effectivePopoutStartCcr;
     }
 
     function _popoutShapeWidth() {
         const side = ConnectedModeState.popoutBarSide;
-        if (side === "top" || side === "bottom")
+        if (ConnectorGeometry.isHorizontal(side))
             return win._popoutClipWidth() + win._effectivePopoutStartCcr + win._effectivePopoutEndCcr;
         return win._popoutClipWidth() + win._effectivePopoutFarExtent;
     }
 
     function _popoutShapeHeight() {
         const side = ConnectedModeState.popoutBarSide;
-        if (side === "top" || side === "bottom")
+        if (ConnectorGeometry.isHorizontal(side))
             return win._popoutClipHeight() + win._effectivePopoutFarExtent;
         return win._popoutClipHeight() + win._effectivePopoutStartCcr + win._effectivePopoutEndCcr;
     }
@@ -1294,7 +1154,7 @@ PanelWindow {
     }
 
     function _dockBodyXInChrome() {
-        return ((win._dockState.barSide === "top" || win._dockState.barSide === "bottom") ? win._dockConnectorRadius() : 0) - win._dockFillOverlapX();
+        return (ConnectorGeometry.isHorizontal(win._dockState.barSide) ? win._dockConnectorRadius() : 0) - win._dockFillOverlapX();
     }
 
     function _dockBodyYInChrome() {
@@ -1349,16 +1209,6 @@ PanelWindow {
         return placement === "left" ? baseY : baseY + bodyHeight - radius;
     }
 
-    function _connectorArcCorner(barSide, placement) {
-        if (barSide === "top")
-            return placement === "left" ? "bottomLeft" : "bottomRight";
-        if (barSide === "bottom")
-            return placement === "left" ? "topLeft" : "topRight";
-        if (barSide === "left")
-            return placement === "left" ? "topRight" : "bottomRight";
-        return placement === "left" ? "topLeft" : "bottomLeft";
-    }
-
     function _connectorCutoutX(connectorX, connectorWidth, arcCorner, radius) {
         const r = radius === undefined ? win._effectivePopoutCcr : radius;
         return (arcCorner === "topLeft" || arcCorner === "bottomLeft") ? connectorX - r : connectorX + connectorWidth - r;
@@ -1572,8 +1422,8 @@ PanelWindow {
                     connectorRadius: win._dockConnectorRadius()
                     color: win._opaqueSurfaceColor
                     dpr: win._dpr
-                    x: Theme.snap(win._dockConnectorX(_dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "left", 0) - _dockChrome.x, win._dpr)
-                    y: Theme.snap(win._dockConnectorY(_dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "left", 0) - _dockChrome.y, win._dpr)
+                    x: Theme.snap(ConnectorGeometry.connectorX(win._dockState.barSide, _dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "left", 0, win._dockConnectorRadius()) - _dockChrome.x, win._dpr)
+                    y: Theme.snap(ConnectorGeometry.connectorY(win._dockState.barSide, _dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "left", 0, win._dockConnectorRadius()) - _dockChrome.y, win._dpr)
                 }
 
                 ConnectedCorner {
@@ -1585,8 +1435,8 @@ PanelWindow {
                     connectorRadius: win._dockConnectorRadius()
                     color: win._opaqueSurfaceColor
                     dpr: win._dpr
-                    x: Theme.snap(win._dockConnectorX(_dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "right", 0) - _dockChrome.x, win._dpr)
-                    y: Theme.snap(win._dockConnectorY(_dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "right", 0) - _dockChrome.y, win._dpr)
+                    x: Theme.snap(ConnectorGeometry.connectorX(win._dockState.barSide, _dockBodyBlurAnchor.x, _dockBodyBlurAnchor.width, "right", 0, win._dockConnectorRadius()) - _dockChrome.x, win._dpr)
+                    y: Theme.snap(ConnectorGeometry.connectorY(win._dockState.barSide, _dockBodyBlurAnchor.y, _dockBodyBlurAnchor.height, "right", 0, win._dockConnectorRadius()) - _dockChrome.y, win._dpr)
                 }
             }
         }

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -1,6 +1,5 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Services.Notifications
 import qs.Common
@@ -115,7 +114,7 @@ Rectangle {
     }
 
     Behavior on expandedContentOpacity {
-        enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
+        enabled: root.connectedFrameMode && root.__initialized && root.userInitiatedExpansion && root.animateExpansion
         NumberAnimation {
             duration: root.expansionMotionDuration()
             easing.type: Easing.BezierSpline
@@ -124,7 +123,7 @@ Rectangle {
     }
 
     Behavior on collapsedContentOpacity {
-        enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
+        enabled: root.connectedFrameMode && root.__initialized && root.userInitiatedExpansion && root.animateExpansion
         NumberAnimation {
             duration: root.expansionMotionDuration()
             easing.type: Easing.BezierSpline

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -10,19 +10,24 @@ import qs.Widgets
 PanelWindow {
     id: win
 
-    readonly property bool connectedFrameMode: SettingsData.frameEnabled
-        && Theme.isConnectedEffect
-        && SettingsData.isScreenInPreferences(win.screen, SettingsData.frameScreenPreferences)
+    readonly property bool connectedFrameMode: SettingsData.frameEnabled && Theme.isConnectedEffect && SettingsData.isScreenInPreferences(win.screen, SettingsData.frameScreenPreferences)
     readonly property string notifBarSide: {
         const pos = SettingsData.notificationPopupPosition;
-        if (pos === -1) return "top";
+        if (pos === -1)
+            return "top";
         switch (pos) {
-        case SettingsData.Position.Top: return "right";
-        case SettingsData.Position.Left: return "left";
-        case SettingsData.Position.BottomCenter: return "bottom";
-        case SettingsData.Position.Right: return "right";
-        case SettingsData.Position.Bottom: return "left";
-        default: return "top";
+        case SettingsData.Position.Top:
+            return "right";
+        case SettingsData.Position.Left:
+            return "left";
+        case SettingsData.Position.BottomCenter:
+            return "bottom";
+        case SettingsData.Position.Right:
+            return "right";
+        case SettingsData.Position.Bottom:
+            return "left";
+        default:
+            return "top";
         }
     }
     readonly property int inlineExpandDuration: Theme.notificationInlineExpandDuration
@@ -190,9 +195,7 @@ PanelWindow {
     property real renderedAlignedHeight: targetAlignedHeight
     property real allocatedAlignedHeight: targetAlignedHeight
     readonly property bool inlineGeometryGrowing: targetAlignedHeight >= renderedAlignedHeight
-    readonly property bool contentAnchorsTop: isTopCenter
-        || SettingsData.notificationPopupPosition === SettingsData.Position.Top
-        || SettingsData.notificationPopupPosition === SettingsData.Position.Left
+    readonly property bool contentAnchorsTop: isTopCenter || SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Left
     readonly property real renderedContentOffsetY: contentAnchorsTop ? 0 : Math.max(0, allocatedAlignedHeight - renderedAlignedHeight)
     implicitWidth: contentImplicitWidth + (windowShadowPad * 2)
     implicitHeight: allocatedAlignedHeight + (windowShadowPad * 2)
@@ -252,7 +255,7 @@ PanelWindow {
     }
 
     Behavior on renderedAlignedHeight {
-        enabled: !exiting && !_isDestroying
+        enabled: win.connectedFrameMode && !exiting && !_isDestroying
         NumberAnimation {
             id: renderedHeightAnim
             duration: win.inlineMotionDuration(win.inlineGeometryGrowing)
@@ -364,8 +367,7 @@ PanelWindow {
         return Math.max(0, Math.round(Theme.px(raw, dpr)));
     }
 
-    readonly property bool frameOnlyNoConnected: SettingsData.frameEnabled && !connectedFrameMode && !!screen
-        && SettingsData.isScreenInPreferences(screen, SettingsData.frameScreenPreferences)
+    readonly property bool frameOnlyNoConnected: SettingsData.frameEnabled && !connectedFrameMode && !!screen && SettingsData.isScreenInPreferences(screen, SettingsData.frameScreenPreferences)
 
     // Frame ON + Connected OFF. frameEdgeInset is the full bar/frame inset
     function _frameGapMargin(side) {
@@ -379,9 +381,7 @@ PanelWindow {
             return 0;
 
         if (connectedFrameMode) {
-            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps)
-                ? 0
-                : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
+            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps) ? 0 : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
             return _frameEdgeInset("top") + cornerClear + screenY;
         }
         if (frameOnlyNoConnected)
@@ -398,9 +398,7 @@ PanelWindow {
             return 0;
 
         if (connectedFrameMode) {
-            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps)
-                ? 0
-                : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
+            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps) ? 0 : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
             return _frameEdgeInset("bottom") + cornerClear + screenY;
         }
         if (frameOnlyNoConnected)
@@ -566,11 +564,16 @@ PanelWindow {
     readonly property real dpr: screenValid ? CompositorService.getScreenScale(win.screen) : 1
     readonly property real alignedWidth: Theme.px(Math.max(0, implicitWidth - (windowShadowPad * 2)), dpr)
     readonly property real alignedHeight: renderedAlignedHeight
-    onScreenYChanged: popupChromeGeometryChanged()
-    onScreenChanged: popupChromeGeometryChanged()
+    onScreenYChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    onScreenChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    // Intentionally unconditional: Manager needs the signal when frame mode toggles off
     onConnectedFrameModeChanged: popupChromeGeometryChanged()
-    onAlignedWidthChanged: popupChromeGeometryChanged()
-    onAlignedHeightChanged: popupChromeGeometryChanged()
+    onAlignedWidthChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    onAlignedHeightChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
 
     Item {
         id: content

quickshell/Modules/Settings/TypographyMotionTab.qml

@@ -211,9 +211,7 @@ Item {
                             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")]
+                    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:
@@ -471,12 +469,6 @@ Item {
                     description: I18n.tr("Popouts and Modals follow global Animation Speed (disable to customize independently)")
                     checked: SettingsData.syncComponentAnimationSpeeds
                     onToggled: checked => SettingsData.set("syncComponentAnimationSpeeds", checked)
-
-                    Connections {
-                        target: SettingsData
-                        function onSyncComponentAnimationSpeedsChanged() {
-                        }
-                    }
                 }
             }
 

quickshell/Modules/WorkspaceOverlays/NiriOverviewOverlay.qml

@@ -5,6 +5,7 @@ import Quickshell.Wayland
 import qs.Common
 import qs.Modals.DankLauncherV2
 import qs.Services
+import qs.Widgets
 
 Scope {
     id: niriOverviewScope
@@ -124,6 +125,19 @@ Scope {
                     item: overlayVisible && spotlightContainer.visible ? spotlightContainer : null
                 }
 
+                WindowBlur {
+                    targetWindow: overlayWindow
+                    // Track the container's scale so blur shrinks with the content
+                    // during exit — otherwise blur pops away one frame after content.
+                    readonly property real s: Math.min(1, spotlightContainer.scale)
+                    readonly property bool active: spotlightContainer.visible && spotlightContainer.opacity > 0
+                    blurX: spotlightContainer.x + spotlightContainer.width * (1 - s) * 0.5
+                    blurY: spotlightContainer.y + spotlightContainer.height * (1 - s) * 0.5
+                    blurWidth: active ? spotlightContainer.width * s : 0
+                    blurHeight: active ? spotlightContainer.height * s : 0
+                    blurRadius: Theme.cornerRadius
+                }
+
                 onShouldShowSpotlightChanged: {
                     if (shouldShowSpotlight) {
                         if (launcherContent?.controller) {
@@ -202,18 +216,26 @@ Scope {
 
                 Item {
                     id: spotlightContainer
-                    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;
+
+                    // Connected-frame mode: dock flush against the emerge-side frame
+                    // edge and slide in from beyond that edge. In any other mode the
+                    // spotlight stays centered — identical to master.
+                    readonly property string connectedEmergeSide: SettingsData.frameLauncherEmergeSide || "bottom"
+                    readonly property real _centerY: (parent.height - height) / 2
+                    readonly property real _connectedRestY: {
+                        if (!Theme.isConnectedEffect || !overlayWindow.screen)
+                            return _centerY;
+                        const inset = SettingsData.frameEdgeInsetForSide(overlayWindow.screen, connectedEmergeSide);
+                        return connectedEmergeSide === "top" ? inset : parent.height - height - inset;
+                    }
+                    readonly property real _connectedCollapsedY: connectedEmergeSide === "top" ? -height : parent.height
+
+                    x: Theme.snap((parent.width - width) / 2, overlayWindow.dpr)
+                    y: {
+                        if (!Theme.isConnectedEffect)
+                            return Theme.snap(_centerY, overlayWindow.dpr);
+                        return Theme.snap(overlayWindow.shouldShowSpotlight ? _connectedRestY : _connectedCollapsedY, overlayWindow.dpr);
                     }
-                    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) {
@@ -244,8 +266,8 @@ Scope {
 
                     readonly property bool animatingOut: niriOverviewScope.isClosing && overlayWindow.isSpotlightScreen
 
-                    scale: Theme.isDirectionalEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1.0 : Theme.effectScaleCollapsed)
-                    opacity: Theme.isDirectionalEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1 : 0)
+                    scale: Theme.isConnectedEffect ? 1.0 : (overlayWindow.shouldShowSpotlight ? 1.0 : 0.96)
+                    opacity: Theme.isConnectedEffect ? 1 : (overlayWindow.shouldShowSpotlight ? 1 : 0)
                     visible: overlayWindow.shouldShowSpotlight || animatingOut
                     enabled: overlayWindow.shouldShowSpotlight
 
@@ -255,11 +277,11 @@ Scope {
 
                     Behavior on scale {
                         id: scaleAnimation
-                        enabled: !Theme.isDirectionalEffect
+                        enabled: !Theme.isConnectedEffect
                         NumberAnimation {
-                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
+                            duration: Theme.expressiveDurations.fast
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
                             onRunningChanged: {
                                 if (running || !spotlightContainer.animatingOut)
                                     return;
@@ -269,27 +291,28 @@ Scope {
                     }
 
                     Behavior on opacity {
-                        enabled: !Theme.isDirectionalEffect
+                        enabled: !Theme.isConnectedEffect
                         NumberAnimation {
-                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
+                            duration: Theme.expressiveDurations.fast
                             easing.type: Easing.BezierSpline
-                            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
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
                         }
                     }
 
+                    // Connected-mode slide — only animates in full connected-frame mode.
+                    // Drives resetState when the slide-out finishes (scale/opacity are
+                    // static in connected mode so their onRunningChanged never fires).
                     Behavior on y {
+                        enabled: Theme.isConnectedEffect
                         NumberAnimation {
-                            duration: Theme.variantDuration(Theme.expressiveDurations.fast, overlayWindow.shouldShowSpotlight)
+                            duration: Theme.variantDuration(Theme.popoutAnimationDuration, overlayWindow.shouldShowSpotlight)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: spotlightContainer.visible ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            easing.bezierCurve: overlayWindow.shouldShowSpotlight ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+                            onRunningChanged: {
+                                if (running || !spotlightContainer.animatingOut)
+                                    return;
+                                niriOverviewScope.resetState();
+                            }
                         }
                     }
 

quickshell/Widgets/ConnectedCorner.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Common
+import "../Common/ConnectorGeometry.js" as ConnectorGeometry
 
 // Concave arc connector filling the gap between a bar corner and an adjacent surface.
 //
@@ -23,15 +23,7 @@ Item {
     readonly property bool isHorizontalBar: barSide === "top" || barSide === "bottom"
     readonly property bool isPlacementLeft: placement === "left"
     readonly property real _edgeStrokeWidth: Math.max(0, edgeStrokeWidth)
-    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 string arcCorner: ConnectorGeometry.arcCorner(barSide, placement)
     readonly property real pathStartX: {
         switch (arcCorner) {
         case "topLeft":

quickshell/Widgets/DankPopoutStandalone.qml

@@ -0,0 +1,624 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    property var popoutHandle: root
+    property string layerNamespace: "dms:popout"
+    property alias content: contentLoader.sourceComponent
+    property alias contentLoader: contentLoader
+    property Component overlayContent: null
+    property alias overlayLoader: overlayLoader
+    property real popupWidth: 400
+    property real popupHeight: 300
+    property real triggerX: 0
+    property real triggerY: 0
+    property real triggerWidth: 40
+    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 bool suspendShadowWhileResizing: false
+    property bool shouldBeVisible: false
+    property bool isClosing: false
+    property var customKeyboardFocus: null
+    property bool backgroundInteractive: true
+    property bool contentHandlesKeys: false
+    property bool fullHeightSurface: false
+    property bool _primeContent: false
+    property bool _resizeActive: false
+    property real _surfaceMarginLeft: 0
+    property real _surfaceW: 0
+
+    property real storedBarThickness: Theme.barHeight - 4
+    property real storedBarSpacing: 4
+    property var storedBarConfig: null
+    property var adjacentBarInfo: ({
+            "topBar": 0,
+            "bottomBar": 0,
+            "leftBar": 0,
+            "rightBar": 0
+        })
+    property var screen: null
+
+    readonly property real effectiveBarThickness: {
+        const padding = storedBarConfig ? (storedBarConfig.innerPadding !== undefined ? storedBarConfig.innerPadding : 4) : 4;
+        return Math.max(26 + padding * 0.6, Theme.barHeight - 4 - (8 - padding)) + storedBarSpacing;
+    }
+
+    readonly property var barBounds: {
+        if (!screen)
+            return {
+                "x": 0,
+                "y": 0,
+                "width": 0,
+                "height": 0,
+                "wingSize": 0
+            };
+        return SettingsData.getBarBounds(screen, effectiveBarThickness, effectiveBarPosition, storedBarConfig);
+    }
+
+    readonly property real barX: barBounds.x
+    readonly property real barY: barBounds.y
+    readonly property real barWidth: barBounds.width
+    readonly property real barHeight: barBounds.height
+    readonly property real barWingSize: barBounds.wingSize
+
+    signal opened
+    signal popoutClosed
+    signal backgroundClicked
+
+    property var _lastOpenedScreen: null
+
+    property int effectiveBarPosition: 0
+    property real effectiveBarBottomGap: 0
+    readonly property string autoBarShadowDirection: {
+        const section = triggerSection || "center";
+        switch (effectiveBarPosition) {
+        case SettingsData.Position.Top:
+            if (section === "left")
+                return "topLeft";
+            if (section === "right")
+                return "topRight";
+            return "top";
+        case SettingsData.Position.Bottom:
+            if (section === "left")
+                return "bottomLeft";
+            if (section === "right")
+                return "bottomRight";
+            return "bottom";
+        case SettingsData.Position.Left:
+            if (section === "left")
+                return "topLeft";
+            if (section === "right")
+                return "bottomLeft";
+            return "left";
+        case SettingsData.Position.Right:
+            if (section === "left")
+                return "topRight";
+            if (section === "right")
+                return "bottomRight";
+            return "right";
+        default:
+            return "top";
+        }
+    }
+    readonly property string effectiveShadowDirection: Theme.elevationLightDirection === "autoBar" ? autoBarShadowDirection : Theme.elevationLightDirection
+
+    // Snapshot mask geometry to prevent background damage on bar updates
+    property real _frozenMaskX: 0
+    property real _frozenMaskY: 0
+    property real _frozenMaskWidth: 0
+    property real _frozenMaskHeight: 0
+
+    function setBarContext(position, bottomGap) {
+        effectiveBarPosition = position !== undefined ? position : 0;
+        effectiveBarBottomGap = bottomGap !== undefined ? bottomGap : 0;
+    }
+
+    function primeContent() {
+        _primeContent = true;
+    }
+
+    function clearPrimedContent() {
+        _primeContent = false;
+    }
+
+    function setTriggerPosition(x, y, width, section, targetScreen, barPosition, barThickness, barSpacing, barConfig) {
+        triggerX = x;
+        triggerY = y;
+        triggerWidth = width;
+        triggerSection = section;
+        screen = targetScreen;
+
+        storedBarThickness = barThickness !== undefined ? barThickness : (Theme.barHeight - 4);
+        storedBarSpacing = barSpacing !== undefined ? barSpacing : 4;
+        storedBarConfig = barConfig;
+
+        const pos = barPosition !== undefined ? barPosition : 0;
+        const bottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : 0) : 0;
+
+        adjacentBarInfo = SettingsData.getAdjacentBarInfo(targetScreen, pos, barConfig);
+        setBarContext(pos, bottomGap);
+    }
+
+    readonly property bool useBackgroundWindow: !CompositorService.isHyprland || CompositorService.useHyprlandFocusGrab
+
+    function updateSurfacePosition() {
+        if (useBackgroundWindow && shouldBeVisible) {
+            _surfaceMarginLeft = alignedX - shadowBuffer;
+            _surfaceW = alignedWidth + shadowBuffer * 2;
+        }
+    }
+
+    function open() {
+        if (!screen)
+            return;
+        closeTimer.stop();
+        isClosing = false;
+
+        _frozenMaskX = maskX;
+        _frozenMaskY = maskY;
+        _frozenMaskWidth = maskWidth;
+        _frozenMaskHeight = maskHeight;
+
+        if (_lastOpenedScreen !== null && _lastOpenedScreen !== screen) {
+            contentWindow.visible = false;
+            if (useBackgroundWindow)
+                backgroundWindow.visible = false;
+        }
+        _lastOpenedScreen = screen;
+
+        shouldBeVisible = true;
+        if (useBackgroundWindow) {
+            _surfaceMarginLeft = alignedX - shadowBuffer;
+            _surfaceW = alignedWidth + shadowBuffer * 2;
+        }
+        Qt.callLater(() => {
+            if (shouldBeVisible && screen) {
+                if (useBackgroundWindow)
+                    backgroundWindow.visible = true;
+                contentWindow.visible = true;
+                PopoutManager.showPopout(popoutHandle);
+                opened();
+            }
+        });
+    }
+
+    function close() {
+        isClosing = true;
+        shouldBeVisible = false;
+        _primeContent = false;
+        PopoutManager.popoutChanged();
+        closeTimer.restart();
+    }
+
+    function toggle() {
+        shouldBeVisible ? close() : open();
+    }
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!shouldBeVisible || !screen)
+                return;
+            const currentScreenName = screen.name;
+            let screenStillExists = false;
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName) {
+                    screenStillExists = true;
+                    break;
+                }
+            }
+            if (!screenStillExists) {
+                close();
+            }
+        }
+    }
+
+    Timer {
+        id: closeTimer
+        interval: animationDuration
+        onTriggered: {
+            if (!shouldBeVisible) {
+                isClosing = false;
+                contentWindow.visible = false;
+                if (useBackgroundWindow)
+                    backgroundWindow.visible = false;
+                PopoutManager.hidePopout(popoutHandle);
+                popoutClosed();
+            }
+        }
+    }
+
+    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 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 shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
+    readonly property real alignedWidth: Theme.px(popupWidth, dpr)
+    readonly property real alignedHeight: Theme.px(popupHeight, dpr)
+
+    onAlignedHeightChanged: {
+        if (!suspendShadowWhileResizing || !shouldBeVisible)
+            return;
+        _resizeActive = true;
+        resizeSettleTimer.restart();
+    }
+    onShouldBeVisibleChanged: {
+        if (!shouldBeVisible) {
+            _resizeActive = false;
+            resizeSettleTimer.stop();
+        }
+    }
+
+    Timer {
+        id: resizeSettleTimer
+        interval: 80
+        repeat: false
+        onTriggered: root._resizeActive = false
+    }
+
+    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;
+
+            switch (effectiveBarPosition) {
+            case SettingsData.Position.Left:
+                return Math.max(popupGap, Math.min(screenWidth - popupWidth - popupGap, triggerX));
+            case SettingsData.Position.Right:
+                return Math.max(popupGap, Math.min(screenWidth - popupWidth - popupGap, triggerX - 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);
+                return Math.max(minX, Math.min(maxX, rawX));
+            }
+        })(), dpr)
+
+    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;
+
+            switch (effectiveBarPosition) {
+            case SettingsData.Position.Bottom:
+                return Math.max(popupGap, Math.min(screenHeight - popupHeight - popupGap, triggerY - popupHeight));
+            case SettingsData.Position.Top:
+                return Math.max(popupGap, Math.min(screenHeight - popupHeight - popupGap, triggerY));
+            default:
+                const rawY = triggerY - (popupHeight / 2);
+                const minY = adjacentBarInfo.topBar > 0 ? adjacentBarInfo.topBar : popupGap;
+                const maxY = screenHeight - popupHeight - (adjacentBarInfo.bottomBar > 0 ? adjacentBarInfo.bottomBar : popupGap);
+                return Math.max(minY, Math.min(maxY, rawY));
+            }
+        })(), dpr)
+
+    readonly property real triggeringBarLeftExclusion: (effectiveBarPosition === SettingsData.Position.Left && barWidth > 0) ? Math.max(0, barX + barWidth) : 0
+    readonly property real triggeringBarTopExclusion: (effectiveBarPosition === SettingsData.Position.Top && barHeight > 0) ? Math.max(0, barY + barHeight) : 0
+    readonly property real triggeringBarRightExclusion: (effectiveBarPosition === SettingsData.Position.Right && barWidth > 0) ? Math.max(0, screenWidth - barX) : 0
+    readonly property real triggeringBarBottomExclusion: (effectiveBarPosition === SettingsData.Position.Bottom && barHeight > 0) ? Math.max(0, screenHeight - barY) : 0
+
+    readonly property real maskX: {
+        const adjacentLeftBar = adjacentBarInfo?.leftBar ?? 0;
+        return Math.max(triggeringBarLeftExclusion, adjacentLeftBar);
+    }
+
+    readonly property real maskY: {
+        const adjacentTopBar = adjacentBarInfo?.topBar ?? 0;
+        return Math.max(triggeringBarTopExclusion, adjacentTopBar);
+    }
+
+    readonly property real maskWidth: {
+        const adjacentRightBar = adjacentBarInfo?.rightBar ?? 0;
+        const rightExclusion = Math.max(triggeringBarRightExclusion, adjacentRightBar);
+        return Math.max(100, screenWidth - maskX - rightExclusion);
+    }
+
+    readonly property real maskHeight: {
+        const adjacentBottomBar = adjacentBarInfo?.bottomBar ?? 0;
+        const bottomExclusion = Math.max(triggeringBarBottomExclusion, adjacentBottomBar);
+        return Math.max(100, screenHeight - maskY - bottomExclusion);
+    }
+
+    PanelWindow {
+        id: backgroundWindow
+        screen: root.screen
+        visible: false
+        color: "transparent"
+        // When there's no overlay to render, skip buffer updates. Re-evaluates if
+        // overlayContent is assigned later (e.g., via a dispatcher forwarding it).
+        updatesEnabled: root.overlayContent !== null
+
+        WlrLayershell.namespace: root.layerNamespace + ":background"
+        WlrLayershell.layer: WlrLayershell.Top
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            left: true
+            right: true
+            bottom: true
+        }
+
+        mask: Region {
+            item: maskRect
+        }
+
+        Rectangle {
+            id: maskRect
+            visible: false
+            color: "transparent"
+            x: root._frozenMaskX
+            y: root._frozenMaskY
+            width: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskWidth : 0
+            height: (shouldBeVisible && backgroundInteractive) ? root._frozenMaskHeight : 0
+        }
+
+        MouseArea {
+            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;
+
+                if (!outsideContent)
+                    return;
+                backgroundClicked();
+            }
+        }
+
+        Loader {
+            id: overlayLoader
+            anchors.fill: parent
+            active: root.overlayContent !== null && backgroundWindow.visible
+            sourceComponent: root.overlayContent
+        }
+    }
+
+    PanelWindow {
+        id: contentWindow
+        screen: root.screen
+        visible: false
+        color: "transparent"
+
+        WindowBlur {
+            id: popoutBlur
+            targetWindow: contentWindow
+            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
+        }
+
+        WlrLayershell.namespace: root.layerNamespace
+        WlrLayershell.layer: {
+            switch (Quickshell.env("DMS_POPOUT_LAYER")) {
+            case "bottom":
+                console.warn("DankPopout: 'bottom' layer is not valid for popouts. Defaulting to 'top' layer.");
+                return WlrLayershell.Top;
+            case "background":
+                console.warn("DankPopout: 'background' layer is not valid for popouts. Defaulting to 'top' layer.");
+                return WlrLayershell.Top;
+            case "overlay":
+                return WlrLayershell.Overlay;
+            default:
+                return WlrLayershell.Top;
+            }
+        }
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: {
+            if (customKeyboardFocus !== null)
+                return customKeyboardFocus;
+            if (!shouldBeVisible)
+                return WlrKeyboardFocus.None;
+            if (CompositorService.useHyprlandFocusGrab)
+                return WlrKeyboardFocus.OnDemand;
+            return WlrKeyboardFocus.Exclusive;
+        }
+
+        readonly property bool _fullHeight: useBackgroundWindow && root.fullHeightSurface
+
+        anchors {
+            left: true
+            top: true
+            right: !useBackgroundWindow
+            bottom: _fullHeight || !useBackgroundWindow
+        }
+
+        WlrLayershell.margins {
+            left: useBackgroundWindow ? root._surfaceMarginLeft : 0
+            top: (useBackgroundWindow && !_fullHeight) ? (root.alignedY - shadowBuffer) : 0
+        }
+
+        implicitWidth: useBackgroundWindow ? root._surfaceW : 0
+        implicitHeight: (useBackgroundWindow && !_fullHeight) ? (root.alignedHeight + shadowBuffer * 2) : 0
+
+        mask: useBackgroundWindow ? contentInputMask : null
+
+        Region {
+            id: contentInputMask
+            item: contentMaskRect
+        }
+
+        Item {
+            id: contentMaskRect
+            visible: false
+            x: contentContainer.x
+            y: contentContainer.y
+            width: shouldBeVisible ? root.alignedWidth : 0
+            height: shouldBeVisible ? root.alignedHeight : 0
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: !useBackgroundWindow && shouldBeVisible && backgroundInteractive
+            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+            z: -1
+            onClicked: mouse => {
+                const clickX = mouse.x;
+                const clickY = mouse.y;
+                const outsideContent = clickX < root.alignedX || clickX > root.alignedX + root.alignedWidth || clickY < root.alignedY || clickY > root.alignedY + root.alignedHeight;
+                if (!outsideContent)
+                    return;
+                backgroundClicked();
+            }
+        }
+
+        Item {
+            id: contentContainer
+            x: useBackgroundWindow ? shadowBuffer : root.alignedX
+            y: (useBackgroundWindow && !contentWindow._fullHeight) ? shadowBuffer : root.alignedY
+            width: root.alignedWidth
+            height: root.alignedHeight
+
+            readonly property bool barTop: effectiveBarPosition === SettingsData.Position.Top
+            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 string connectedBarSide: barTop ? "top" : (barBottom ? "bottom" : (barLeft ? "left" : "right"))
+            readonly property real offsetX: barLeft ? root.animationOffset : (barRight ? -root.animationOffset : 0)
+            readonly property real offsetY: barBottom ? -root.animationOffset : (barTop ? root.animationOffset : 0)
+
+            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() {
+                    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;
+                }
+            }
+
+            Behavior on animX {
+                NumberAnimation {
+                    duration: root.animationDuration
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Behavior on animY {
+                NumberAnimation {
+                    duration: root.animationDuration
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            Behavior on scaleValue {
+                NumberAnimation {
+                    duration: root.animationDuration
+                    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)
+
+                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 {
+                    NumberAnimation {
+                        duration: animationDuration
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                    }
+                }
+
+                Loader {
+                    id: contentLoader
+                    anchors.fill: parent
+                    active: root._primeContent || shouldBeVisible || contentWindow.visible
+                    asynchronous: false
+                }
+            }
+
+            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
+            }
+        }
+
+        Item {
+            id: focusHelper
+            parent: contentContainer
+            anchors.fill: parent
+            visible: !root.contentHandlesKeys
+            enabled: !root.contentHandlesKeys
+            focus: !root.contentHandlesKeys
+            Keys.onPressed: event => {
+                if (root.contentHandlesKeys)
+                    return;
+                if (event.key === Qt.Key_Escape) {
+                    close();
+                    event.accepted = true;
+                }
+            }
+        }
+    }
+}