feat(DMS FrameMode): A New Connected Unified Surface & Animation Overhaul

- Introduces Standalone & Connected Modes
- Updated Animations & Motion effects for both modes
- Numerous QOL tweaks and updates throughout the system
- Highly inspired to the OG Caelestia Shell / @Soramanew

quickshell/Modules/AppDrawer/AppDrawerPopout.qml

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

quickshell/Modules/ControlCenter/Components/DetailHost.qml

@@ -37,7 +37,7 @@ Item {
     Loader {
         id: pluginDetailLoader
         width: parent.width
-        height: parent.height - Theme.spacingS
+        height: Math.max(0, parent.height - Theme.spacingS)
         y: Theme.spacingS
         active: false
         sourceComponent: null
@@ -46,7 +46,7 @@ Item {
     Loader {
         id: coreDetailLoader
         width: parent.width
-        height: parent.height - Theme.spacingS
+        height: Math.max(0, parent.height - Theme.spacingS)
         y: Theme.spacingS
         active: false
         sourceComponent: null
@@ -134,7 +134,7 @@ Item {
             }
 
             pluginDetailLoader.sourceComponent = builtinInstance.ccDetailContent;
-            pluginDetailLoader.active = parent.height > 0;
+            pluginDetailLoader.active = true;
             return;
         }
 
@@ -155,19 +155,19 @@ Item {
             }
 
             pluginDetailLoader.sourceComponent = pluginDetailInstance.ccDetailContent;
-            pluginDetailLoader.active = parent.height > 0;
+            pluginDetailLoader.active = true;
             return;
         }
 
         if (root.expandedSection.startsWith("diskUsage_")) {
             coreDetailLoader.sourceComponent = diskUsageDetailComponent;
-            coreDetailLoader.active = parent.height > 0;
+            coreDetailLoader.active = true;
             return;
         }
 
         if (root.expandedSection.startsWith("brightnessSlider_")) {
             coreDetailLoader.sourceComponent = brightnessDetailComponent;
-            coreDetailLoader.active = parent.height > 0;
+            coreDetailLoader.active = true;
             return;
         }
 
@@ -195,7 +195,7 @@ Item {
             return;
         }
 
-        coreDetailLoader.active = parent.height > 0;
+        coreDetailLoader.active = true;
     }
 
     Component {

quickshell/Modules/ControlCenter/Components/DragDropGrid.qml

@@ -52,6 +52,35 @@ Column {
         return Math.max(100, maxPopoutHeight - totalRowHeight - rowSpacing);
     }
 
+    readonly property real targetImplicitHeight: {
+        const rows = layoutResult.rows;
+        let totalHeight = 0;
+        for (let i = 0; i < rows.length; i++) {
+            const widgets = rows[i] || [];
+            const sliderOnly = widgets.length > 0 && widgets.every(w => {
+                const id = w.id || "";
+                return id === "volumeSlider" || id === "brightnessSlider" || id === "inputVolumeSlider";
+            });
+            totalHeight += sliderOnly ? (editMode ? 56 : 36) : 60;
+            if (expandedSection !== "" && i === expandedRowIndex)
+                totalHeight += detailHeightForSection(expandedSection) + Theme.spacingS;
+        }
+        totalHeight += Math.max(0, rows.length - 1) * spacing;
+        return totalHeight;
+    }
+
+    function detailHeightForSection(section) {
+        if (!section)
+            return 0;
+        if (section === "wifi" || section === "bluetooth" || section === "builtin_vpn")
+            return Math.min(350, _maxDetailHeight);
+        if (section.startsWith("brightnessSlider_"))
+            return Math.min(400, _maxDetailHeight);
+        if (section.startsWith("plugin_"))
+            return Math.min(250, _maxDetailHeight);
+        return Math.min(250, _maxDetailHeight);
+    }
+
     function calculateRowsAndWidgets() {
         return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex);
     }
@@ -182,7 +211,10 @@ Column {
                 id: detailHost
                 width: parent.width
                 maxAvailableHeight: root._maxDetailHeight
-                height: active ? (getDetailHeight(root.expandedSection) + Theme.spacingS) : 0
+                height: active ? (root.detailHeightForSection(root.expandedSection) + Theme.spacingS) : 0
+                clip: true
+                property string retainedSection: ""
+                property var retainedWidgetData: null
                 property bool active: {
                     if (root.expandedSection === "")
                         return false;
@@ -199,14 +231,48 @@ Column {
 
                     return rowIndex === root.expandedRowIndex;
                 }
-                visible: active
-                expandedSection: root.expandedSection
-                expandedWidgetData: root.expandedWidgetData
+                visible: active || height > 0.5
+                expandedSection: active ? root.expandedSection : retainedSection
+                expandedWidgetData: active ? root.expandedWidgetData : retainedWidgetData
                 bluetoothCodecSelector: root.bluetoothCodecSelector
                 widgetModel: root.model
                 collapseCallback: root.requestCollapse
                 screenName: root.screenName
                 screenModel: root.screenModel
+
+                function retainActiveDetail() {
+                    if (!active || !root.expandedSection)
+                        return;
+                    retainedSection = root.expandedSection;
+                    retainedWidgetData = root.expandedWidgetData;
+                }
+
+                onActiveChanged: retainActiveDetail()
+                onHeightChanged: {
+                    if (!active && height <= 0.5) {
+                        retainedSection = "";
+                        retainedWidgetData = null;
+                    }
+                }
+
+                Connections {
+                    target: root
+                    function onExpandedSectionChanged() {
+                        detailHost.retainActiveDetail();
+                    }
+                    function onExpandedWidgetDataChanged() {
+                        detailHost.retainActiveDetail();
+                    }
+                }
+
+                Behavior on height {
+                    enabled: true
+                    NumberAnimation {
+                        duration: Theme.variantDuration(Theme.popoutAnimationDuration, detailHost.active)
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: detailHost.active ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+                    }
+                }
             }
         }
     }

quickshell/Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -23,11 +23,15 @@ Item {
     signal toggleWidgetSize(int index)
 
     width: {
-        const widgetWidth = widgetData?.width || 50
-        if (widgetWidth <= 25) return gridCellWidth
-        else if (widgetWidth <= 50) return gridCellWidth * 2
-        else if (widgetWidth <= 75) return gridCellWidth * 3
-        else return gridCellWidth * 4
+        const widgetWidth = widgetData?.width || 50;
+        if (widgetWidth <= 25)
+            return gridCellWidth;
+        else if (widgetWidth <= 50)
+            return gridCellWidth * 2;
+        else if (widgetWidth <= 75)
+            return gridCellWidth * 3;
+        else
+            return gridCellWidth * 4;
     }
     height: isSlider ? 16 : gridCellHeight
 
@@ -42,10 +46,14 @@ Item {
         z: dragArea.drag.active ? 10000 : 1
 
         Behavior on border.width {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
         Behavior on opacity {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
     }
 
@@ -58,14 +66,17 @@ Item {
         property int globalWidgetIndex: root.widgetIndex
         property int widgetWidth: root.widgetData?.width || 50
 
-
         MouseArea {
             id: editModeBlocker
             anchors.fill: parent
             enabled: root.editMode
             acceptedButtons: Qt.AllButtons
-            onPressed: function(mouse) { mouse.accepted = true }
-            onWheel: function(wheel) { wheel.accepted = true }
+            onPressed: function (mouse) {
+                mouse.accepted = true;
+            }
+            onWheel: function (wheel) {
+                wheel.accepted = true;
+            }
             z: 100
         }
     }
@@ -79,19 +90,19 @@ Item {
         drag.axis: Drag.XAndYAxis
         drag.smoothed: true
 
-        onPressed: function(mouse) {
+        onPressed: function (mouse) {
             if (editMode) {
-                cursorShape = Qt.ClosedHandCursor
+                cursorShape = Qt.ClosedHandCursor;
                 if (root.gridLayout && root.gridLayout.moveToTop) {
-                    root.gridLayout.moveToTop(root)
+                    root.gridLayout.moveToTop(root);
                 }
             }
         }
 
-        onReleased: function(mouse) {
+        onReleased: function (mouse) {
             if (editMode) {
-                cursorShape = Qt.OpenHandCursor
-                root.snapToGrid()
+                cursorShape = Qt.OpenHandCursor;
+                root.snapToGrid();
             }
         }
     }
@@ -101,9 +112,11 @@ Item {
     Drag.hotSpot.y: height / 2
 
     function swapIndices(i, j) {
-        if (i === j) return;
+        if (i === j)
+            return;
         const arr = SettingsData.controlCenterWidgets;
-        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length) return;
+        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length)
+            return;
 
         const copy = arr.slice();
         const tmp = copy[i];
@@ -114,37 +127,41 @@ Item {
     }
 
     function snapToGrid() {
-        if (!editMode || !gridLayout) return
+        if (!editMode || !gridLayout)
+            return;
+        const globalPos = root.mapToItem(gridLayout, 0, 0);
+        const cellWidth = gridLayout.width / gridColumns;
+        const cellHeight = gridCellHeight + Theme.spacingS;
 
-        const globalPos = root.mapToItem(gridLayout, 0, 0)
-        const cellWidth = gridLayout.width / gridColumns
-        const cellHeight = gridCellHeight + Theme.spacingS
+        const centerX = globalPos.x + (root.width / 2);
+        const centerY = globalPos.y + (root.height / 2);
 
-        const centerX = globalPos.x + (root.width / 2)
-        const centerY = globalPos.y + (root.height / 2)
+        let targetCol = Math.max(0, Math.floor(centerX / cellWidth));
+        let targetRow = Math.max(0, Math.floor(centerY / cellHeight));
 
-        let targetCol = Math.max(0, Math.floor(centerX / cellWidth))
-        let targetRow = Math.max(0, Math.floor(centerY / cellHeight))
+        targetCol = Math.min(targetCol, gridColumns - 1);
 
-        targetCol = Math.min(targetCol, gridColumns - 1)
-
-        const newIndex = findBestInsertionIndex(targetRow, targetCol)
+        const newIndex = findBestInsertionIndex(targetRow, targetCol);
 
         if (newIndex !== widgetIndex && newIndex >= 0 && newIndex < (SettingsData.controlCenterWidgets?.length || 0)) {
-            swapIndices(widgetIndex, newIndex)
+            swapIndices(widgetIndex, newIndex);
         }
     }
 
     function findBestInsertionIndex(targetRow, targetCol) {
         const widgets = SettingsData.controlCenterWidgets || [];
         const n = widgets.length;
-        if (!n || widgetIndex < 0 || widgetIndex >= n) return -1;
+        if (!n || widgetIndex < 0 || widgetIndex >= n)
+            return -1;
 
         function spanFor(width) {
             const w = width ?? 50;
-            if (w <= 25) return 1;
-            if (w <= 50) return 2;
-            if (w <= 75) return 3;
+            if (w <= 25)
+                return 1;
+            if (w <= 50)
+                return 2;
+            if (w <= 75)
+                return 3;
             return 4;
         }
 
@@ -169,7 +186,13 @@ Item {
             if (i === widgetIndex) {
                 draggedOrigKey = centerKey;
             } else {
-                pos.push({ index: i, row, startCol, span, centerKey });
+                pos.push({
+                    index: i,
+                    row,
+                    startCol,
+                    span,
+                    centerKey
+                });
             }
 
             col += span;
@@ -179,7 +202,8 @@ Item {
             }
         }
 
-        if (pos.length === 0) return -1;
+        if (pos.length === 0)
+            return -1;
 
         const centerColCoord = targetCol + 0.5;
         const targetKey = targetRow * cols + centerColCoord;
@@ -192,15 +216,20 @@ Item {
         }
 
         let lo = 0, hi = pos.length - 1;
-        if (targetKey <= pos[0].centerKey) return pos[0].index;
-        if (targetKey >= pos[hi].centerKey) return pos[hi].index;
+        if (targetKey <= pos[0].centerKey)
+            return pos[0].index;
+        if (targetKey >= pos[hi].centerKey)
+            return pos[hi].index;
 
         while (lo <= hi) {
             const mid = (lo + hi) >> 1;
             const mk = pos[mid].centerKey;
-            if (targetKey < mk) hi = mid - 1;
-            else if (targetKey > mk) lo = mid + 1;
-            else return pos[mid].index;
+            if (targetKey < mk)
+                hi = mid - 1;
+            else if (targetKey > mk)
+                lo = mid + 1;
+            else
+                return pos[mid].index;
         }
         const movingUp = (draggedOrigKey != null) ? (targetKey < draggedOrigKey) : false;
         return (movingUp ? pos[lo].index : pos[hi].index);
@@ -240,11 +269,11 @@ Item {
         currentSize: root.widgetData?.width || 50
         isSlider: root.isSlider
         widgetIndex: root.widgetIndex
-        onSizeChanged: (newSize) => {
-            var widgets = SettingsData.controlCenterWidgets.slice()
+        onSizeChanged: newSize => {
+            var widgets = SettingsData.controlCenterWidgets.slice();
             if (widgetIndex >= 0 && widgetIndex < widgets.length) {
-                widgets[widgetIndex].width = newSize
-                SettingsData.set("controlCenterWidgets", widgets)
+                widgets[widgetIndex].width = newSize;
+                SettingsData.set("controlCenterWidgets", widgets);
             }
         }
     }
@@ -270,7 +299,9 @@ Item {
         }
 
         Behavior on opacity {
-            NumberAnimation { duration: 150 }
+            NumberAnimation {
+                duration: 150
+            }
         }
     }
 
@@ -283,7 +314,9 @@ Item {
         z: -1
 
         Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
+            ColorAnimation {
+                duration: Theme.shortDuration
+            }
         }
     }
 }

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -20,19 +20,53 @@ DankPopout {
     property int expandedWidgetIndex: -1
     property var expandedWidgetData: null
     property bool powerMenuOpen: powerMenuModalLoader?.item?.shouldBeVisible ?? false
+    property real targetPopupHeight: 400
+    property bool _heightUpdatePending: false
 
     signal lockRequested
 
+    function _maxPopupHeight() {
+        const screenHeight = (triggerScreen?.height ?? 1080);
+        return screenHeight - 100;
+    }
+
+    function _contentTargetHeight() {
+        const item = contentLoader.item;
+        if (!item)
+            return 400;
+        const naturalHeight = item.targetImplicitHeight !== undefined ? item.targetImplicitHeight : item.implicitHeight;
+        return Math.max(300, naturalHeight + 20);
+    }
+
+    function updateTargetPopupHeight() {
+        const target = Math.min(_maxPopupHeight(), _contentTargetHeight());
+        if (Math.abs(targetPopupHeight - target) < 0.5)
+            return;
+        targetPopupHeight = target;
+    }
+
+    function queueTargetPopupHeightUpdate() {
+        if (_heightUpdatePending)
+            return;
+        _heightUpdatePending = true;
+        Qt.callLater(() => {
+            _heightUpdatePending = false;
+            updateTargetPopupHeight();
+        });
+    }
+
     function collapseAll() {
         expandedSection = "";
         expandedWidgetIndex = -1;
         expandedWidgetData = null;
+        queueTargetPopupHeightUpdate();
     }
 
     onEditModeChanged: {
         if (editMode) {
             collapseAll();
         }
+        queueTargetPopupHeightUpdate();
     }
 
     onVisibleChanged: {
@@ -52,12 +86,7 @@ DankPopout {
     }
 
     popupWidth: 550
-    popupHeight: {
-        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);
-    }
+    popupHeight: targetPopupHeight
     triggerWidth: 80
     positioning: ""
     screen: triggerScreen
@@ -95,6 +124,7 @@ DankPopout {
     onShouldBeVisibleChanged: {
         if (shouldBeVisible) {
             collapseAll();
+            queueTargetPopupHeightUpdate();
             Qt.callLater(() => {
                 if (NetworkService.activeService)
                     NetworkService.activeService.autoRefreshEnabled = NetworkService.wifiEnabled;
@@ -111,6 +141,28 @@ DankPopout {
         }
     }
 
+    onExpandedSectionChanged: queueTargetPopupHeightUpdate()
+    onExpandedWidgetIndexChanged: queueTargetPopupHeightUpdate()
+    onTriggerScreenChanged: queueTargetPopupHeightUpdate()
+
+    Connections {
+        target: contentLoader
+        function onLoaded() {
+            root.queueTargetPopupHeightUpdate();
+        }
+    }
+
+    Connections {
+        target: contentLoader.item
+        ignoreUnknownSignals: true
+        function onTargetImplicitHeightChanged() {
+            root.queueTargetPopupHeightUpdate();
+        }
+        function onImplicitHeightChanged() {
+            root.queueTargetPopupHeightUpdate();
+        }
+    }
+
     WidgetModel {
         id: widgetModel
     }
@@ -122,7 +174,13 @@ DankPopout {
             LayoutMirroring.enabled: I18n.isRtl
             LayoutMirroring.childrenInherit: true
 
-            implicitHeight: mainColumn.implicitHeight + Theme.spacingM
+            readonly property real targetImplicitHeight: {
+                let total = headerPane.implicitHeight + Theme.spacingS + widgetGrid.targetImplicitHeight;
+                if (editControls.visible)
+                    total += Theme.spacingS + editControls.height;
+                return total + Theme.spacingM;
+            }
+            implicitHeight: targetImplicitHeight
             property alias bluetoothCodecSelector: bluetoothCodecSelector
 
             color: "transparent"
@@ -136,95 +194,107 @@ DankPopout {
                 z: 5000
 
                 Behavior on opacity {
+                    enabled: !Theme.isDirectionalEffect
                     NumberAnimation {
-                        duration: 200
-                        easing.type: Easing.OutCubic
+                        duration: Theme.shortDuration
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: root.shouldBeVisible ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
                     }
                 }
             }
 
-            Column {
-                id: mainColumn
-                width: parent.width - Theme.spacingL * 2
-                x: Theme.spacingL
-                y: Theme.spacingL
-                spacing: Theme.spacingS
+            DankFlickable {
+                id: contentFlickable
+                anchors.fill: parent
+                clip: true
+                contentWidth: width
+                contentHeight: Math.max(height, mainColumn.implicitHeight + Theme.spacingM)
+                interactive: contentHeight > height
 
-                HeaderPane {
-                    id: headerPane
-                    width: parent.width
-                    editMode: root.editMode
-                    onEditModeToggled: root.editMode = !root.editMode
-                    onPowerButtonClicked: {
-                        if (powerMenuModalLoader) {
-                            powerMenuModalLoader.active = true;
-                            if (powerMenuModalLoader.item) {
-                                const bounds = Qt.rect(root.alignedX, root.alignedY, root.popupWidth, root.popupHeight);
-                                powerMenuModalLoader.item.openFromControlCenter(bounds, root.screen);
+                Column {
+                    id: mainColumn
+                    width: contentFlickable.width - Theme.spacingL * 2
+                    x: Theme.spacingL
+                    y: Theme.spacingL
+                    spacing: Theme.spacingS
+
+                    HeaderPane {
+                        id: headerPane
+                        width: parent.width
+                        editMode: root.editMode
+                        onEditModeToggled: root.editMode = !root.editMode
+                        onPowerButtonClicked: {
+                            if (powerMenuModalLoader) {
+                                powerMenuModalLoader.active = true;
+                                if (powerMenuModalLoader.item) {
+                                    const bounds = Qt.rect(root.alignedX, root.alignedY, root.popupWidth, root.popupHeight);
+                                    powerMenuModalLoader.item.openFromControlCenter(bounds, root.screen);
+                                }
                             }
                         }
-                    }
-                    onLockRequested: {
-                        root.close();
-                        root.lockRequested();
-                    }
-                    onSettingsButtonClicked: {
-                        root.close();
-                    }
-                }
-
-                DragDropGrid {
-                    id: widgetGrid
-                    width: parent.width
-                    editMode: root.editMode
-                    maxPopoutHeight: {
-                        const screenHeight = (root.triggerScreen?.height ?? 1080);
-                        return screenHeight - 100 - Theme.spacingL - headerPane.height - Theme.spacingS;
-                    }
-                    expandedSection: root.expandedSection
-                    expandedWidgetIndex: root.expandedWidgetIndex
-                    expandedWidgetData: root.expandedWidgetData
-                    model: widgetModel
-                    bluetoothCodecSelector: bluetoothCodecSelector
-                    colorPickerModal: root.colorPickerModal
-                    screenName: root.triggerScreen?.name || ""
-                    screenModel: root.triggerScreen?.model || ""
-                    parentScreen: root.triggerScreen
-                    onExpandClicked: (widgetData, globalIndex) => {
-                        root.expandedWidgetIndex = globalIndex;
-                        root.expandedWidgetData = widgetData;
-                        if (widgetData.id === "diskUsage") {
-                            root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"));
-                        } else if (widgetData.id === "brightnessSlider") {
-                            root.toggleSection("brightnessSlider_" + (widgetData.instanceId || "default"));
-                        } else {
-                            root.toggleSection(widgetData.id);
+                        onLockRequested: {
+                            root.close();
+                            root.lockRequested();
+                        }
+                        onSettingsButtonClicked: {
+                            root.close();
                         }
                     }
-                    onRemoveWidget: index => widgetModel.removeWidget(index)
-                    onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
-                    onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
-                    onCollapseRequested: root.collapseAll()
-                }
 
-                EditControls {
-                    width: parent.width
-                    visible: editMode
-                    popupScreen: root.screen
-                    popoutX: root.alignedX
-                    popoutY: root.alignedY
-                    popoutWidth: root.alignedWidth
-                    popoutHeight: root.alignedHeight
-                    availableWidgets: {
-                        if (!editMode)
-                            return [];
-                        const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id);
-                        const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets());
-                        return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id));
+                    DragDropGrid {
+                        id: widgetGrid
+                        width: parent.width
+                        editMode: root.editMode
+                        maxPopoutHeight: {
+                            const screenHeight = (root.triggerScreen?.height ?? 1080);
+                            return screenHeight - 100 - Theme.spacingL - headerPane.implicitHeight - Theme.spacingS;
+                        }
+                        expandedSection: root.expandedSection
+                        expandedWidgetIndex: root.expandedWidgetIndex
+                        expandedWidgetData: root.expandedWidgetData
+                        model: widgetModel
+                        bluetoothCodecSelector: bluetoothCodecSelector
+                        colorPickerModal: root.colorPickerModal
+                        screenName: root.triggerScreen?.name || ""
+                        screenModel: root.triggerScreen?.model || ""
+                        parentScreen: root.triggerScreen
+                        onExpandClicked: (widgetData, globalIndex) => {
+                            root.expandedWidgetIndex = globalIndex;
+                            root.expandedWidgetData = widgetData;
+                            if (widgetData.id === "diskUsage") {
+                                root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"));
+                            } else if (widgetData.id === "brightnessSlider") {
+                                root.toggleSection("brightnessSlider_" + (widgetData.instanceId || "default"));
+                            } else {
+                                root.toggleSection(widgetData.id);
+                            }
+                        }
+                        onRemoveWidget: index => widgetModel.removeWidget(index)
+                        onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
+                        onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
+                        onCollapseRequested: root.collapseAll()
+                    }
+
+                    EditControls {
+                        id: editControls
+                        width: parent.width
+                        visible: editMode
+                        popupScreen: root.screen
+                        popoutX: root.alignedX
+                        popoutY: root.alignedY
+                        popoutWidth: root.alignedWidth
+                        popoutHeight: root.alignedHeight
+                        availableWidgets: {
+                            if (!editMode)
+                                return [];
+                            const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id);
+                            const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets());
+                            return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id));
+                        }
+                        onAddWidget: widgetId => widgetModel.addWidget(widgetId)
+                        onResetToDefault: () => widgetModel.resetToDefault()
+                        onClearAll: () => widgetModel.clearAll()
                     }
-                    onAddWidget: widgetId => widgetModel.addWidget(widgetId)
-                    onResetToDefault: () => widgetModel.resetToDefault()
-                    onClearAll: () => widgetModel.clearAll()
                 }
             }
 

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -449,7 +449,7 @@ Rectangle {
                     size: 24
                     color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.4)
 
-                    RotationAnimation on rotation {
+                    RotationAnimator on rotation {
                         running: parent.visible
                         loops: Animation.Infinite
                         from: 0

quickshell/Modules/ControlCenter/Details/NetworkDetail.qml

@@ -178,7 +178,7 @@ Rectangle {
                 size: 32
                 color: Theme.primary
 
-                RotationAnimation on rotation {
+                RotationAnimator on rotation {
                     running: NetworkService.wifiToggling
                     loops: Animation.Infinite
                     from: 0
@@ -494,7 +494,7 @@ Rectangle {
             size: 48
             color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.3)
 
-            RotationAnimation on rotation {
+            RotationAnimator on rotation {
                 running: wifiScanningOverlay.visible
                 loops: Animation.Infinite
                 from: 0

quickshell/Modules/DankBar/BarCanvas.qml

@@ -10,6 +10,8 @@ Item {
     required property var axis
     required property var barConfig
 
+    visible: !SettingsData.frameEnabled
+
     anchors.fill: parent
 
     anchors.left: parent.left
@@ -37,6 +39,8 @@ Item {
     }
 
     property real rt: {
+        if (SettingsData.frameEnabled)
+            return SettingsData.frameRounding;
         if (barConfig?.squareCorners ?? false)
             return 0;
         if (barWindow.hasMaximizedToplevel)
@@ -255,11 +259,12 @@ Item {
         h = h - wing;
         const r = wing;
         const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;
 
-        let d = `M ${cr} 0`;
-        d += ` L ${w - cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${w} ${cr}`;
+        let d = `M ${crE} 0`;
+        d += ` L ${w - crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${w} ${crE}`;
         if (r > 0) {
             d += ` L ${w} ${h + r}`;
             d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
@@ -273,9 +278,9 @@ Item {
             if (cr > 0)
                 d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
         }
-        d += ` L 0 ${cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        d += ` L 0 ${crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${crE} 0`;
         d += " Z";
         return d;
     }
@@ -285,11 +290,12 @@ Item {
         h = h - wing;
         const r = wing;
         const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;
 
-        let d = `M ${cr} ${fullH}`;
-        d += ` L ${w - cr} ${fullH}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${w} ${fullH - cr}`;
+        let d = `M ${crE} ${fullH}`;
+        d += ` L ${w - crE} ${fullH}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${w} ${fullH - crE}`;
         if (r > 0) {
             d += ` L ${w} 0`;
             d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
@@ -303,9 +309,9 @@ Item {
             if (cr > 0)
                 d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
         }
-        d += ` L 0 ${fullH - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${fullH}`;
+        d += ` L 0 ${fullH - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${crE} ${fullH}`;
         d += " Z";
         return d;
     }
@@ -314,11 +320,12 @@ Item {
         w = w - wing;
         const r = wing;
         const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;
 
-        let d = `M 0 ${cr}`;
-        d += ` L 0 ${h - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${h}`;
+        let d = `M 0 ${crE}`;
+        d += ` L 0 ${h - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${crE} ${h}`;
         if (r > 0) {
             d += ` L ${w + r} ${h}`;
             d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
@@ -332,9 +339,9 @@ Item {
             if (cr > 0)
                 d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
         }
-        d += ` L ${cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
+        d += ` L ${crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 0 ${crE}`;
         d += " Z";
         return d;
     }
@@ -344,11 +351,12 @@ Item {
         w = w - wing;
         const r = wing;
         const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;
 
-        let d = `M ${fullW} ${cr}`;
-        d += ` L ${fullW} ${h - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${fullW - cr} ${h}`;
+        let d = `M ${fullW} ${crE}`;
+        d += ` L ${fullW} ${h - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${fullW - crE} ${h}`;
         if (r > 0) {
             d += ` L 0 ${h}`;
             d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
@@ -362,9 +370,9 @@ Item {
             if (cr > 0)
                 d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
         }
-        d += ` L ${fullW - cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${fullW} ${cr}`;
+        d += ` L ${fullW - crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${fullW} ${crE}`;
         d += " Z";
         return d;
     }

quickshell/Modules/DankBar/DankBarContent.qml

@@ -23,6 +23,31 @@ Item {
     readonly property real innerPadding: barConfig?.innerPadding ?? 4
     readonly property real outlineThickness: (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0
 
+    readonly property real _frameLeftInset: {
+        if (!SettingsData.frameEnabled || barWindow.isVertical) return 0
+        return barWindow.hasAdjacentLeftBar
+            ? SettingsData.frameBarSize
+            : 0
+    }
+    readonly property real _frameRightInset: {
+        if (!SettingsData.frameEnabled || barWindow.isVertical) return 0
+        return barWindow.hasAdjacentRightBar
+            ? SettingsData.frameBarSize
+            : 0
+    }
+    readonly property real _frameTopInset: {
+        if (!SettingsData.frameEnabled || !barWindow.isVertical) return 0
+        return barWindow.hasAdjacentTopBar
+            ? SettingsData.frameThickness
+            : 0
+    }
+    readonly property real _frameBottomInset: {
+        if (!SettingsData.frameEnabled || !barWindow.isVertical) return 0
+        return barWindow.hasAdjacentBottomBar
+            ? SettingsData.frameThickness
+            : 0
+    }
+
     property alias hLeftSection: hLeftSection
     property alias hCenterSection: hCenterSection
     property alias hRightSection: hRightSection
@@ -31,10 +56,14 @@ Item {
     property alias vRightSection: vRightSection
 
     anchors.fill: parent
-    anchors.leftMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)
-    anchors.rightMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)
-    anchors.topMargin: barWindow.isVertical ? (barWindow.hasAdjacentTopBar ? outlineThickness : Theme.spacingXS) : 0
-    anchors.bottomMargin: barWindow.isVertical ? (barWindow.hasAdjacentBottomBar ? outlineThickness : Theme.spacingXS) : 0
+    anchors.leftMargin:   Math.max(Theme.spacingXS, innerPadding * 0.8) + _frameLeftInset
+    anchors.rightMargin:  Math.max(Theme.spacingXS, innerPadding * 0.8) + _frameRightInset
+    anchors.topMargin:    (barWindow.isVertical
+        ? (barWindow.hasAdjacentTopBar ? outlineThickness : Theme.spacingXS)
+        : 0) + _frameTopInset
+    anchors.bottomMargin: (barWindow.isVertical
+        ? (barWindow.hasAdjacentBottomBar ? outlineThickness : Theme.spacingXS)
+        : 0) + _frameBottomInset
     clip: false
 
     property int componentMapRevision: 0
@@ -1156,6 +1185,7 @@ Item {
                 if (!notificationCenterLoader.item) {
                     return;
                 }
+                notificationCenterLoader.item.triggerScreen = barWindow.screen;
                 const effectiveBarConfig = topBarContent.barConfig;
                 const barPosition = barWindow.axis?.edge === "left" ? 2 : (barWindow.axis?.edge === "right" ? 3 : (barWindow.axis?.edge === "top" ? 0 : 1));
                 if (notificationCenterLoader.item.setBarContext) {

quickshell/Modules/DankBar/DankBarWindow.qml

@@ -43,10 +43,10 @@ PanelWindow {
         }
     }
 
-    function triggerWallpaperBrowser() {
+    function triggerDashTab(tabIndex) {
         dankDashPopoutLoader.active = true;
         if (!dankDashPopoutLoader.item) {
-            return;
+            return false;
         }
 
         let section = "center";
@@ -82,7 +82,12 @@ PanelWindow {
             dankDashPopoutLoader.item.triggerScreen = barWindow.screen;
         }
 
-        PopoutManager.requestPopout(dankDashPopoutLoader.item, 2, (barConfig?.id ?? "default") + "-" + section + "-2");
+        PopoutManager.requestPopout(dankDashPopoutLoader.item, tabIndex, (barConfig?.id ?? "default") + "-" + section + "-" + tabIndex);
+        return true;
+    }
+
+    function triggerWallpaperBrowser() {
+        triggerDashTab(2);
     }
 
     readonly property var dBarLayer: {
@@ -94,7 +99,9 @@ PanelWindow {
         case "background":
             return WlrLayer.background;
         default:
-            return WlrLayer.Top;
+            // Elevate to Overlay when Frame is enabled so the bar stays above
+            // the FrameWindow (WlrLayer.Top) when it is re-mapped on mode switch.
+            return SettingsData.frameEnabled ? WlrLayer.Overlay : WlrLayer.Top;
         }
     }
 
@@ -134,6 +141,11 @@ PanelWindow {
             teardown();
             if (!BlurService.enabled || !BlurService.available)
                 return;
+            // In frame mode, FrameWindow owns the blur region for the entire screen edge
+            // (including the bar area). The bar must not set its own competing blur region
+            // so that frameBlurEnabled acts as the single control for all blur in frame mode.
+            if (SettingsData.frameEnabled)
+                return;
 
             const widgets = barWindow._blurWidgetItems.filter(w => w && w.visible && w.width > 0 && w.height > 0);
             const hasBar = barHasTransparency;
@@ -188,6 +200,13 @@ PanelWindow {
             }
         }
 
+        Connections {
+            target: SettingsData
+            function onFrameEnabledChanged() {
+                barBlur.rebuild();
+            }
+        }
+
         Connections {
             target: topBarSlide
             function onXChanged() {
@@ -239,7 +258,7 @@ PanelWindow {
     readonly property color _surfaceContainer: Theme.surfaceContainer
     readonly property string _barId: barConfig?.id ?? "default"
     property real _backgroundAlpha: barConfig?.transparency ?? 1.0
-    readonly property color _bgColor: Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
+    readonly property color _bgColor: SettingsData.frameEnabled ? Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity) : Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
 
     function _updateBackgroundAlpha() {
         const live = SettingsData.barConfigs.find(c => c.id === _barId);
@@ -385,7 +404,7 @@ PanelWindow {
         shouldHideForWindows = filtered.length > 0;
     }
 
-    property real effectiveSpacing: hasMaximizedToplevel ? 0 : (barConfig?.spacing ?? 4)
+    property real effectiveSpacing: SettingsData.frameEnabled ? 0 : (hasMaximizedToplevel ? 0 : (barConfig?.spacing ?? 4))
 
     Behavior on effectiveSpacing {
         enabled: barWindow.visible
@@ -396,7 +415,8 @@ PanelWindow {
     }
 
     readonly property int notificationCount: NotificationService.notifications.length
-    readonly property real effectiveBarThickness: Theme.snap(Math.max(barWindow.widgetThickness + (barConfig?.innerPadding ?? 4) + 4, Theme.barHeight - 4 - (8 - (barConfig?.innerPadding ?? 4))), _dpr)
+    readonly property real effectiveBarThickness: SettingsData.frameEnabled ? SettingsData.frameBarSize : Theme.snap(Math.max(barWindow.widgetThickness + (barConfig?.innerPadding ?? 4) + 4, Theme.barHeight - 4 - (8 - (barConfig?.innerPadding ?? 4))), _dpr)
+    readonly property bool effectiveOpenOnOverview: SettingsData.frameEnabled ? SettingsData.frameShowOnOverview : (barConfig?.openOnOverview ?? false)
     readonly property real widgetThickness: Theme.snap(Math.max(20, 26 + (barConfig?.innerPadding ?? 4) * 0.6), _dpr)
 
     readonly property bool hasAdjacentTopBar: {
@@ -645,14 +665,14 @@ PanelWindow {
     anchors.left: !isVertical ? true : (barPos === SettingsData.Position.Left)
     anchors.right: !isVertical ? true : (barPos === SettingsData.Position.Right)
 
-    exclusiveZone: (!(barConfig?.visible ?? true) || topBarCore.autoHide) ? -1 : (barWindow.effectiveBarThickness + effectiveSpacing + (barConfig?.bottomGap ?? 0))
+    exclusiveZone: (!(barConfig?.visible ?? true) || topBarCore.autoHide) ? -1 : (barWindow.effectiveBarThickness + effectiveSpacing + (Theme.isConnectedEffect ? 0 : (barConfig?.bottomGap ?? 0)))
 
     Item {
         id: inputMask
 
         readonly property int barThickness: Theme.px(barWindow.effectiveBarThickness + barWindow.effectiveSpacing, barWindow._dpr)
 
-        readonly property bool inOverviewWithShow: CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false)
+        readonly property bool inOverviewWithShow: CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview
         readonly property bool effectiveVisible: (barConfig?.visible ?? true) || inOverviewWithShow
         readonly property bool showing: effectiveVisible && (topBarCore.reveal || inOverviewWithShow || !topBarCore.autoHide)
 
@@ -793,7 +813,7 @@ PanelWindow {
         }
 
         property bool reveal: {
-            const inOverviewWithShow = CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false);
+            const inOverviewWithShow = CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview;
             if (inOverviewWithShow)
                 return true;
 
@@ -890,7 +910,7 @@ PanelWindow {
                 top: barWindow.isVertical ? parent.top : undefined
                 bottom: barWindow.isVertical ? parent.bottom : undefined
             }
-            readonly property bool inOverview: CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false)
+            readonly property bool inOverview: CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview
             hoverEnabled: (barConfig?.autoHide ?? false) && !inOverview && !topBarCore.hasActivePopout
             acceptedButtons: Qt.NoButton
             enabled: (barConfig?.autoHide ?? false) && !inOverview
@@ -935,6 +955,17 @@ PanelWindow {
                         barConfig: barWindow.barConfig
                     }
 
+                    MouseArea {
+                        anchors.fill: parent
+                        z: -2
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                        onClicked: {
+                            const screenName = barWindow.screen?.name;
+                            if (screenName && PopoutManager.currentPopoutsByScreen[screenName])
+                                PopoutManager.closeAllPopouts();
+                        }
+                    }
+
                     MouseArea {
                         id: scrollArea
                         anchors.fill: parent

quickshell/Modules/DankBar/Popouts/SystemUpdatePopout.qml

@@ -148,19 +148,16 @@ DankPopout {
                         opacity: enabled ? 1.0 : 0.5
                         onClicked: SystemUpdateService.checkForUpdates()
 
-                        RotationAnimation {
-                            target: refreshButton
-                            property: "rotation"
+                        RotationAnimator on rotation {
                             from: 0
                             to: 360
                             duration: 1000
-                            running: SystemUpdateService.isChecking
                             loops: Animation.Infinite
+                            running: SystemUpdateService.isChecking
 
                             onRunningChanged: {
-                                if (!running) {
+                                if (!running)
                                     refreshButton.rotation = 0;
-                                }
                             }
                         }
                     }

quickshell/Modules/DankBar/Widgets/SystemUpdate.qml

@@ -73,20 +73,17 @@ BasePill {
                     return root.isActive ? Theme.primary : Theme.surfaceText;
                 }
 
-                RotationAnimation {
+                RotationAnimator on rotation {
                     id: rotationAnimation
-                    target: statusIcon
-                    property: "rotation"
                     from: 0
                     to: 360
                     duration: 1000
-                    running: root.isChecking
                     loops: Animation.Infinite
+                    running: root.isChecking
 
                     onRunningChanged: {
-                        if (!running) {
+                        if (!running)
                             statusIcon.rotation = 0;
-                        }
                     }
                 }
             }
@@ -130,20 +127,17 @@ BasePill {
                         return root.isActive ? Theme.primary : Theme.surfaceText;
                     }
 
-                    RotationAnimation {
+                    RotationAnimator on rotation {
                         id: rotationAnimationHorizontal
-                        target: statusIconHorizontal
-                        property: "rotation"
                         from: 0
                         to: 360
                         duration: 1000
-                        running: root.isChecking
                         loops: Animation.Infinite
+                        running: root.isChecking
 
                         onRunningChanged: {
-                            if (!running) {
+                            if (!running)
                                 statusIconHorizontal.rotation = 0;
-                            }
                         }
                     }
                 }

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -16,7 +16,6 @@ DankPopout {
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 500
     triggerWidth: 80
     screen: triggerScreen
-    shouldBeVisible: dashVisible
 
     property bool __focusArmed: false
     property bool __contentReady: false
@@ -54,7 +53,8 @@ DankPopout {
     function __hideDropdowns() {
         __volumeCloseTimer.stop();
         __dropdownType = 0;
-        __mediaTabRef?.resetDropdownStates();
+        if (__mediaTabRef && typeof __mediaTabRef.resetDropdownStates === "function")
+            __mediaTabRef.resetDropdownStates();
     }
 
     function __startCloseTimer() {
@@ -75,7 +75,11 @@ DankPopout {
         }
     }
 
-    overlayContent: Component {
+    overlayContent: shouldBeVisible ? mediaDropdownOverlayComponent : null
+
+    Component {
+        id: mediaDropdownOverlayComponent
+
         MediaDropdownOverlay {
             dropdownType: root.__dropdownType
             anchorPos: root.__dropdownAnchor
@@ -183,11 +187,8 @@ DankPopout {
             Connections {
                 target: root
                 function onShouldBeVisibleChanged() {
-                    if (root.shouldBeVisible) {
-                        Qt.callLater(function () {
-                            mainContainer.forceActiveFocus();
-                        });
-                    }
+                    if (root.shouldBeVisible)
+                        mainContainer.forceActiveFocus();
                 }
             }
 
@@ -379,6 +380,10 @@ DankPopout {
                                 section: root.triggerSection
                                 barPosition: root.effectiveBarPosition
                                 Component.onCompleted: root.__mediaTabRef = this
+                                Component.onDestruction: {
+                                    if (root.__mediaTabRef === this)
+                                        root.__mediaTabRef = null;
+                                }
                                 onShowVolumeDropdown: (pos, screen, rightEdge, player, players) => {
                                     root.__showVolumeDropdown(pos, rightEdge, player, players);
                                 }

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -50,11 +50,9 @@ Item {
     }
 
     function volumeAreaExited() {
-        __volumeHoverCount--;
-        Qt.callLater(() => {
-            if (__volumeHoverCount <= 0)
-                panelExited();
-        });
+        __volumeHoverCount = Math.max(0, __volumeHoverCount - 1);
+        if (__volumeHoverCount === 0)
+            panelExited();
     }
 
     readonly property Item __activePanel: {
@@ -93,23 +91,25 @@ Item {
         border.color: Theme.outlineStrong
         border.width: 1
 
-        opacity: dropdownType === 1 ? 1 : 0
-        scale: dropdownType === 1 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1) * Theme.variantOpacityDurationScale)
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 1)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 1 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
@@ -233,23 +233,25 @@ Item {
         border.color: Theme.outlineStrong
         border.width: 2
 
-        opacity: dropdownType === 2 ? 1 : 0
-        scale: dropdownType === 2 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2) * Theme.variantOpacityDurationScale)
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 2)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 2 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
@@ -387,23 +389,25 @@ Item {
         border.color: Theme.outlineStrong
         border.width: 2
 
-        opacity: dropdownType === 3 ? 1 : 0
-        scale: dropdownType === 3 ? 1 : 0.96
+        opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : 0)
+        scale: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : Theme.effectScaleCollapsed)
         transformOrigin: isRightEdge ? Item.Left : Item.Right
 
         Behavior on opacity {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                duration: Math.round(Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3) * Theme.variantOpacityDurationScale)
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 
         Behavior on scale {
+            enabled: !Theme.isDirectionalEffect
             NumberAnimation {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, dropdownType === 3)
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+                easing.bezierCurve: dropdownType === 3 ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
             }
         }
 

quickshell/Modules/DankDash/WeatherTab.qml

@@ -192,7 +192,7 @@ Item {
                     onTriggered: refreshButtonTwo.isRefreshing = false
                 }
 
-                NumberAnimation on rotation {
+                RotationAnimator on rotation {
                     running: refreshButtonTwo.isRefreshing
                     from: 0
                     to: 360
@@ -930,7 +930,7 @@ Item {
                     onTriggered: refreshButton.isRefreshing = false
                 }
 
-                NumberAnimation on rotation {
+                RotationAnimator on rotation {
                     running: refreshButton.isRefreshing
                     from: 0
                     to: 360

quickshell/Modules/Dock/Dock.qml

@@ -20,14 +20,16 @@ Variants {
 
         WindowBlur {
             targetWindow: dock
+            blurEnabled: dock.effectiveBlurEnabled && !SettingsData.connectedFrameModeActive
             blurX: dockBackground.x + dockContainer.x + dockMouseArea.x + dockCore.x + dockSlide.x
             blurY: dockBackground.y + dockContainer.y + dockMouseArea.y + dockCore.y + dockSlide.y
             blurWidth: dock.hasApps && dock.reveal ? dockBackground.width : 0
             blurHeight: dock.hasApps && dock.reveal ? dockBackground.height : 0
-            blurRadius: Theme.cornerRadius
+            blurRadius: Theme.isConnectedEffect ? Theme.connectedCornerRadius : dock.surfaceRadius
         }
 
         WlrLayershell.namespace: "dms:dock"
+        WlrLayershell.layer: SettingsData.frameEnabled ? WlrLayer.Overlay : WlrLayer.Top
 
         readonly property bool isVertical: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
 
@@ -43,6 +45,25 @@ Variants {
         property real backgroundTransparency: SettingsData.dockTransparency
         property bool groupByApp: SettingsData.dockGroupByApp
         readonly property int borderThickness: SettingsData.dockBorderEnabled ? SettingsData.dockBorderThickness : 0
+        readonly property string connectedBarSide: SettingsData.dockPosition === SettingsData.Position.Top ? "top" : SettingsData.dockPosition === SettingsData.Position.Bottom ? "bottom" : SettingsData.dockPosition === SettingsData.Position.Left ? "left" : "right"
+        readonly property bool connectedBarActiveOnEdge: Theme.isConnectedEffect && !!(dock.screen || modelData) && SettingsData.getActiveBarEdgesForScreen(dock.screen || modelData).includes(connectedBarSide)
+        readonly property real connectedJoinInset: {
+            if (Theme.isConnectedEffect)
+                return connectedBarActiveOnEdge ? SettingsData.frameBarSize : SettingsData.frameThickness;
+            if (SettingsData.frameEnabled)
+                return SettingsData.frameEdgeInsetForSide(dock.screen || modelData, dock.connectedBarSide);
+            return 0;
+        }
+        readonly property real surfaceRadius: Theme.connectedSurfaceRadius
+        readonly property color surfaceColor: Theme.isConnectedEffect ? Theme.connectedSurfaceColor : Theme.withAlpha(Theme.surfaceContainer, backgroundTransparency)
+        readonly property color surfaceBorderColor: Theme.isConnectedEffect ? "transparent" : BlurService.borderColor
+        readonly property real surfaceBorderWidth: Theme.isConnectedEffect ? 0 : BlurService.borderWidth
+        readonly property real surfaceTopLeftRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Left) ? 0 : surfaceRadius
+        readonly property real surfaceTopRightRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Right) ? 0 : surfaceRadius
+        readonly property real surfaceBottomLeftRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Bottom || SettingsData.dockPosition === SettingsData.Position.Left) ? 0 : surfaceRadius
+        readonly property real surfaceBottomRightRadius: Theme.isConnectedEffect && (SettingsData.dockPosition === SettingsData.Position.Bottom || SettingsData.dockPosition === SettingsData.Position.Right) ? 0 : surfaceRadius
+        readonly property real horizontalConnectorExtent: Theme.isConnectedEffect && !isVertical ? Theme.connectedCornerRadius : 0
+        readonly property real verticalConnectorExtent: Theme.isConnectedEffect && isVertical ? Theme.connectedCornerRadius : 0
 
         readonly property int hasApps: dockApps.implicitWidth > 0 || dockApps.implicitHeight > 0
 
@@ -114,14 +135,76 @@ Variants {
             return getBarHeight(leftBar);
         }
 
-        readonly property real dockMargin: SettingsData.dockSpacing
-        readonly property real positionSpacing: barSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin
+        readonly property real dockMargin: SettingsData.dockMargin
+        readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
+        readonly property real effectiveDockBottomGap: Theme.isConnectedEffect ? 0 : SettingsData.dockBottomGap
+        readonly property real effectiveDockMargin: Theme.isConnectedEffect ? 0 : SettingsData.dockMargin
+        readonly property real positionSpacing: barSpacing + effectiveDockBottomGap + effectiveDockMargin
+        readonly property real joinedEdgeMargin: Theme.isConnectedEffect ? 0 : (barSpacing + effectiveDockMargin + 1 + dock.borderThickness)
         readonly property real _dpr: (dock.screen && dock.screen.devicePixelRatio) ? dock.screen.devicePixelRatio : 1
         function px(v) {
             return Math.round(v * _dpr) / _dpr;
         }
 
-        property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData) || (dockVariants.trashContextMenu && dockVariants.trashContextMenu.visible && dockVariants.trashContextMenu.screen === modelData)
+        // Dock window origin in screen-relative coordinates (FrameWindow space).
+        function _dockWindowOriginX() {
+            if (!dock.isVertical)
+                return 0;
+            if (SettingsData.dockPosition === SettingsData.Position.Right)
+                return (dock.screen ? dock.screen.width : 0) - dock.width;
+            return 0;
+        }
+        function _dockWindowOriginY() {
+            if (dock.isVertical)
+                return 0;
+            if (SettingsData.dockPosition === SettingsData.Position.Bottom)
+                return (dock.screen ? dock.screen.height : 0) - dock.height;
+            return 0;
+        }
+
+        readonly property string _dockScreenName: dock.modelData ? dock.modelData.name : (dock.screen ? dock.screen.name : "")
+
+        function _syncDockChromeState() {
+            if (!dock._dockScreenName)
+                return;
+            if (!SettingsData.connectedFrameModeActive) {
+                ConnectedModeState.clearDockState(dock._dockScreenName);
+                return;
+            }
+
+            ConnectedModeState.setDockState(dock._dockScreenName, {
+                "reveal": dock.visible && (dock.reveal || slideXAnimation.running || slideYAnimation.running) && dock.hasApps,
+                "barSide": dock.connectedBarSide,
+                "bodyX": dock._dockWindowOriginX() + dockBackground.x + dockContainer.x + dockMouseArea.x + dockCore.x,
+                "bodyY": dock._dockWindowOriginY() + dockBackground.y + dockContainer.y + dockMouseArea.y + dockCore.y,
+                "bodyW": dock.hasApps ? dockBackground.width : 0,
+                "bodyH": dock.hasApps ? dockBackground.height : 0,
+                "slideX": dockSlide.x,
+                "slideY": dockSlide.y
+            });
+        }
+
+        function _syncDockSlide() {
+            if (!dock._dockScreenName || !SettingsData.connectedFrameModeActive)
+                return;
+            ConnectedModeState.setDockSlide(dock._dockScreenName, dockSlide.x, dockSlide.y);
+        }
+
+        property bool _slideSyncPending: false
+        function _queueSlideSync() {
+            if (!SettingsData.connectedFrameModeActive)
+                return;
+            if (_slideSyncPending)
+                return;
+            _slideSyncPending = true;
+            Qt.callLater(dock._flushSlideSync);
+        }
+        function _flushSlideSync() {
+            _slideSyncPending = false;
+            dock._syncDockSlide();
+        }
+
+        property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData)
         property bool revealSticky: false
 
         readonly property bool shouldHideForWindows: {
@@ -131,7 +214,7 @@ Variants {
                 return false;
 
             const screenName = dock.modelData?.name ?? "";
-            const dockThickness = effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin;
+            const dockThickness = dock.connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin;
             const screenWidth = dock.screen?.width ?? 0;
             const screenHeight = dock.screen?.height ?? 0;
 
@@ -259,7 +342,17 @@ Variants {
             onTriggered: dock.revealSticky = false
         }
 
+        // Flip `reveal` false when a modal claims this edge; reuses the slide animation
+        readonly property bool _modalRetractActive: {
+            if (!dock._dockScreenName)
+                return false;
+            return ConnectedModeState.dockRetractActiveForSide(dock._dockScreenName, dock.connectedBarSide);
+        }
+
         property bool reveal: {
+            if (_modalRetractActive)
+                return false;
+
             if (CompositorService.isNiri && NiriService.inOverview && SettingsData.dockOpenOnOverview) {
                 return true;
             }
@@ -282,6 +375,23 @@ Variants {
             }
         }
 
+        Component.onCompleted: Qt.callLater(() => dock._syncDockChromeState())
+        Component.onDestruction: ConnectedModeState.clearDockState(dock._dockScreenName)
+
+        onRevealChanged: dock._syncDockChromeState()
+        onWidthChanged: dock._syncDockChromeState()
+        onHeightChanged: dock._syncDockChromeState()
+        onVisibleChanged: dock._syncDockChromeState()
+        onHasAppsChanged: dock._syncDockChromeState()
+        onConnectedBarSideChanged: dock._syncDockChromeState()
+
+        Connections {
+            target: SettingsData
+            function onConnectedFrameModeActiveChanged() {
+                dock._syncDockChromeState();
+            }
+        }
+
         Connections {
             target: SettingsData
             function onDockTransparencyChanged() {
@@ -303,13 +413,13 @@ Variants {
                 return -1;
             if (barSpacing > 0)
                 return -1;
-            return px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin);
+            return px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockBottomGap + effectiveDockMargin);
         }
 
         property real animationHeadroom: Math.ceil(SettingsData.dockIconSize * 0.35)
 
-        implicitWidth: isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
-        implicitHeight: !isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+        implicitWidth: isVertical ? (px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+        implicitHeight: !isVertical ? (px(connectedJoinInset + effectiveBarHeight + SettingsData.dockSpacing + effectiveDockMargin + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
 
         Item {
             id: maskItem
@@ -319,17 +429,17 @@ Variants {
             x: {
                 const baseX = dockCore.x + dockMouseArea.x;
                 if (isVertical && SettingsData.dockPosition === SettingsData.Position.Right)
-                    return baseX - (expanded ? animationHeadroom + borderThickness : 0);
-                return baseX - (expanded ? borderThickness : 0);
+                    return baseX - (expanded ? animationHeadroom + borderThickness + dock.horizontalConnectorExtent : 0);
+                return baseX - (expanded ? borderThickness + dock.horizontalConnectorExtent : 0);
             }
             y: {
                 const baseY = dockCore.y + dockMouseArea.y;
                 if (!isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom)
-                    return baseY - (expanded ? animationHeadroom + borderThickness : 0);
-                return baseY - (expanded ? borderThickness : 0);
+                    return baseY - (expanded ? animationHeadroom + borderThickness + dock.verticalConnectorExtent : 0);
+                return baseY - (expanded ? borderThickness + dock.verticalConnectorExtent : 0);
             }
-            width: dockMouseArea.width + (isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 : 0)
-            height: dockMouseArea.height + (!isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 : 0)
+            width: dockMouseArea.width + (isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 + dock.horizontalConnectorExtent * 2 : 0)
+            height: dockMouseArea.height + (!isVertical && expanded ? animationHeadroom : 0) + (expanded ? borderThickness * 2 + dock.verticalConnectorExtent * 2 : 0)
         }
 
         mask: Region {
@@ -389,7 +499,7 @@ Variants {
             const screenHeight = dock.screen ? dock.screen.height : 0;
 
             const gap = Theme.spacingS;
-            const bgMargin = barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness;
+            const bgMargin = dock.joinedEdgeMargin + dock.connectedJoinInset;
             const btnW = dock.hoveredButton.width;
             const btnH = dock.hoveredButton.height;
 
@@ -460,11 +570,11 @@ Variants {
                         // Keep the taller hit area regardless of the reveal state to prevent shrinking loop
                         return Math.min(Math.max(dockBackground.height + 64, 200), maxDockHeight);
                     }
-                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
+                    return dock.reveal ? px(dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin) : 1;
                 }
                 width: {
                     if (dock.isVertical) {
-                        return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin) : 1;
+                        return dock.reveal ? px(dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin) : 1;
                     }
                     // Keep the wider hit area regardless of the reveal state to prevent shrinking loop
                     return Math.min(dockBackground.width + 8 + dock.borderThickness, maxDockWidth);
@@ -506,7 +616,11 @@ Variants {
                                 return 0;
                             if (dock.reveal)
                                 return 0;
-                            const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10;
+                            if (Theme.isConnectedEffect) {
+                                const retractDist = dockBackground.width + SettingsData.dockSpacing + 10;
+                                return SettingsData.dockPosition === SettingsData.Position.Right ? retractDist : -retractDist;
+                            }
+                            const hideDistance = dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin + 10;
                             if (SettingsData.dockPosition === SettingsData.Position.Right) {
                                 return hideDistance;
                             } else {
@@ -518,7 +632,11 @@ Variants {
                                 return 0;
                             if (dock.reveal)
                                 return 0;
-                            const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin + 10;
+                            if (Theme.isConnectedEffect) {
+                                const retractDist = dockBackground.height + SettingsData.dockSpacing + 10;
+                                return SettingsData.dockPosition === SettingsData.Position.Bottom ? retractDist : -retractDist;
+                            }
+                            const hideDistance = dock.connectedJoinInset + dock.effectiveBarHeight + SettingsData.dockSpacing + dock.effectiveDockBottomGap + dock.effectiveDockMargin + 10;
                             if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
                                 return hideDistance;
                             } else {
@@ -529,18 +647,27 @@ Variants {
                         Behavior on x {
                             NumberAnimation {
                                 id: slideXAnimation
-                                duration: Theme.shortDuration
-                                easing.type: Easing.OutCubic
+                                duration: Theme.isConnectedEffect ? Theme.variantDuration(Theme.popoutAnimationDuration, dock.reveal) : Theme.shortDuration
+                                easing.type: Theme.isConnectedEffect ? Easing.BezierSpline : Easing.OutCubic
+                                easing.bezierCurve: Theme.isConnectedEffect ? (dock.reveal ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve) : []
+                                onRunningChanged: if (!running)
+                                    dock._syncDockChromeState()
                             }
                         }
 
                         Behavior on y {
                             NumberAnimation {
                                 id: slideYAnimation
-                                duration: Theme.shortDuration
-                                easing.type: Easing.OutCubic
+                                duration: Theme.isConnectedEffect ? Theme.variantDuration(Theme.popoutAnimationDuration, dock.reveal) : Theme.shortDuration
+                                easing.type: Theme.isConnectedEffect ? Easing.BezierSpline : Easing.OutCubic
+                                easing.bezierCurve: Theme.isConnectedEffect ? (dock.reveal ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve) : []
+                                onRunningChanged: if (!running)
+                                    dock._syncDockChromeState()
                             }
                         }
+
+                        onXChanged: dock._queueSlideSync()
+                        onYChanged: dock._queueSlideSync()
                     }
 
                     Item {
@@ -554,33 +681,60 @@ Variants {
                             right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
                             verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
                         }
-                        anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
-                        anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + SettingsData.dockMargin + 1 + dock.borderThickness : 0
+                        anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
+                        anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? (dock.connectedJoinInset + dock.joinedEdgeMargin) : 0
 
                         implicitWidth: dock.isVertical ? (dockApps.implicitHeight + SettingsData.dockSpacing * 2) : (dockApps.implicitWidth + SettingsData.dockSpacing * 2)
                         implicitHeight: dock.isVertical ? (dockApps.implicitWidth + SettingsData.dockSpacing * 2) : (dockApps.implicitHeight + SettingsData.dockSpacing * 2)
                         width: implicitWidth
                         height: implicitHeight
 
-                        layer.enabled: true
+                        // Avoid an offscreen texture seam where the connected dock meets the frame.
+                        layer.enabled: !Theme.isConnectedEffect
                         clip: false
 
                         Rectangle {
                             anchors.fill: parent
-                            color: Theme.withAlpha(Theme.surfaceContainer, backgroundTransparency)
-                            radius: Theme.cornerRadius
+                            visible: !SettingsData.connectedFrameModeActive && !(Theme.isConnectedEffect && dock.reveal)
+                            color: dock.surfaceColor
+                            topLeftRadius: dock.surfaceTopLeftRadius
+                            topRightRadius: dock.surfaceTopRightRadius
+                            bottomLeftRadius: dock.surfaceBottomLeftRadius
+                            bottomRightRadius: dock.surfaceBottomRightRadius
                         }
 
                         Rectangle {
                             anchors.fill: parent
+                            visible: !SettingsData.connectedFrameModeActive && !(Theme.isConnectedEffect && dock.reveal)
                             color: "transparent"
-                            radius: Theme.cornerRadius
-                            border.color: BlurService.borderColor
-                            border.width: BlurService.borderWidth
+                            topLeftRadius: dock.surfaceTopLeftRadius
+                            topRightRadius: dock.surfaceTopRightRadius
+                            bottomLeftRadius: dock.surfaceBottomLeftRadius
+                            bottomRightRadius: dock.surfaceBottomRightRadius
+                            border.color: dock.surfaceBorderColor
+                            border.width: dock.surfaceBorderWidth
                             z: 100
                         }
+
+                        // Sync dockBackground geometry to ConnectedModeState
+                        onXChanged: dock._syncDockChromeState()
+                        onYChanged: dock._syncDockChromeState()
+                        onWidthChanged: dock._syncDockChromeState()
+                        onHeightChanged: dock._syncDockChromeState()
+                    }
+
+                    ConnectedShape {
+                        visible: Theme.isConnectedEffect && dock.reveal && !SettingsData.connectedFrameModeActive
+                        barSide: dock.connectedBarSide
+                        bodyWidth: dockBackground.width
+                        bodyHeight: dockBackground.height
+                        connectorRadius: Theme.connectedCornerRadius
+                        surfaceRadius: dock.surfaceRadius
+                        fillColor: dock.surfaceColor
+                        x: dockBackground.x - bodyX
+                        y: dockBackground.y - bodyY
                     }
 
                     Shape {
@@ -589,12 +743,12 @@ Variants {
                         y: dockBackground.y - borderThickness
                         width: dockBackground.width + borderThickness * 2
                         height: dockBackground.height + borderThickness * 2
-                        visible: SettingsData.dockBorderEnabled && dock.hasApps
+                        visible: SettingsData.dockBorderEnabled && dock.hasApps && !Theme.isConnectedEffect
                         preferredRendererType: Shape.CurveRenderer
 
                         readonly property real borderThickness: Math.max(1, dock.borderThickness)
                         readonly property real i: borderThickness / 2
-                        readonly property real cr: Theme.cornerRadius
+                        readonly property real cr: dock.surfaceRadius
                         readonly property real w: dockBackground.width
                         readonly property real h: dockBackground.height
 

quickshell/Modules/Frame/Frame.qml

@@ -0,0 +1,24 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Common
+
+Variants {
+    id: root
+
+    model: Quickshell.screens
+
+    delegate: Loader {
+        id: instanceLoader
+
+        required property var modelData
+
+        active: SettingsData.frameEnabled && SettingsData.isScreenInPreferences(instanceLoader.modelData, SettingsData.frameScreenPreferences)
+        asynchronous: false
+
+        sourceComponent: FrameInstance {
+            screen: instanceLoader.modelData
+        }
+    }
+}

quickshell/Modules/Frame/FrameBorder.qml

@@ -0,0 +1,54 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+
+Item {
+    id: root
+
+    anchors.fill: parent
+
+    required property real cutoutTopInset
+    required property real cutoutBottomInset
+    required property real cutoutLeftInset
+    required property real cutoutRightInset
+    required property real cutoutRadius
+    property color borderColor: Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity)
+
+    Rectangle {
+        id: borderRect
+
+        anchors.fill: parent
+        // Bake frameOpacity into the color alpha rather than using the `opacity` property
+        color: root.borderColor
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource: cutoutMask
+            maskEnabled: true
+            maskInverted: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
+    }
+
+    Item {
+        id: cutoutMask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors {
+                fill: parent
+                topMargin: root.cutoutTopInset
+                bottomMargin: root.cutoutBottomInset
+                leftMargin: root.cutoutLeftInset
+                rightMargin: root.cutoutRightInset
+            }
+            radius: root.cutoutRadius
+        }
+    }
+}

quickshell/Modules/Frame/FrameExclusions.qml

@@ -0,0 +1,87 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+
+Scope {
+    id: root
+
+    required property var screen
+
+    readonly property var barEdges: {
+        SettingsData.barConfigs; // force re-eval when bar configs change
+        return SettingsData.getActiveBarEdgesForScreen(screen);
+    }
+
+    // One thin invisible PanelWindow per edge.
+    // Skips any edge where a bar already provides its own exclusiveZone.
+
+    readonly property bool screenEnabled: SettingsData.frameEnabled && SettingsData.isScreenInPreferences(root.screen, SettingsData.frameScreenPreferences)
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("top")
+        sourceComponent: EdgeExclusion {
+            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
+        }
+    }
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("left")
+        sourceComponent: EdgeExclusion {
+            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
+        }
+    }
+
+    component EdgeExclusion: PanelWindow {
+        required property var targetScreen
+
+        screen: targetScreen
+        property bool anchorTop: false
+        property bool anchorBottom: 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
+        implicitHeight: 1
+
+        anchors {
+            top: anchorTop
+            bottom: anchorBottom
+            left: anchorLeft
+            right: anchorRight
+        }
+    }
+}

quickshell/Modules/Frame/FrameInstance.qml

@@ -0,0 +1,17 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+
+Item {
+    id: root
+
+    required property var screen
+
+    FrameWindow {
+        targetScreen: root.screen
+    }
+
+    FrameExclusions {
+        screen: root.screen
+    }
+}

quickshell/Modules/Greetd/GreeterContent.qml

@@ -1,4 +1,3 @@
-import QtCore
 import QtQuick
 import QtQuick.Effects
 import QtQuick.Layouts
@@ -119,15 +118,7 @@ Item {
     function greeterPamStackHasModule(moduleName) {
         if (pamModuleEnabled(greetdPamText, moduleName))
             return true;
-        const includedPamStacks = [
-            ["system-auth", systemAuthPamText],
-            ["common-auth", commonAuthPamText],
-            ["password-auth", passwordAuthPamText],
-            ["system-login", systemLoginPamText],
-            ["system-local-login", systemLocalLoginPamText],
-            ["common-auth-pc", commonAuthPcPamText],
-            ["login", loginPamText]
-        ];
+        const includedPamStacks = [["system-auth", systemAuthPamText], ["common-auth", commonAuthPamText], ["password-auth", passwordAuthPamText], ["system-login", systemLoginPamText], ["system-local-login", systemLocalLoginPamText], ["common-auth-pc", commonAuthPcPamText], ["login", loginPamText]];
         for (let i = 0; i < includedPamStacks.length; i++) {
             const stack = includedPamStacks[i];
             if (pamTextIncludesFile(greetdPamText, stack[0]) && pamModuleEnabled(stack[1], moduleName))
@@ -609,13 +600,7 @@ Item {
         running: false
         // sh wrapper: emits PROBE_UNAVAILABLE if gdbus is absent or fprintd unreachable,
         // keeping the PAM-only fallback active in those cases.
-        command: ["sh", "-c",
-                  "command -v gdbus >/dev/null 2>&1 || { echo PROBE_UNAVAILABLE; exit 0; }; " +
-                  "gdbus call --system " +
-                  "--dest net.reactivated.Fprint " +
-                  "--object-path /net/reactivated/Fprint/Manager " +
-                  "--method net.reactivated.Fprint.Manager.GetDevices 2>/dev/null " +
-                  "|| echo PROBE_UNAVAILABLE"]
+        command: ["sh", "-c", "command -v gdbus >/dev/null 2>&1 || { echo PROBE_UNAVAILABLE; exit 0; }; " + "gdbus call --system " + "--dest net.reactivated.Fprint " + "--object-path /net/reactivated/Fprint/Manager " + "--method net.reactivated.Fprint.Manager.GetDevices 2>/dev/null " + "|| echo PROBE_UNAVAILABLE"]
         stdout: StdioCollector {
             onStreamFinished: {
                 if (text.includes("PROBE_UNAVAILABLE"))
@@ -625,7 +610,7 @@ Item {
                 root.maybeAutoStartExternalAuth();
             }
         }
-        onExited: function(exitCode, exitStatus) {
+        onExited: function (exitCode, exitStatus) {
             if (!root.fprintdProbeComplete)
                 root.maybeAutoStartExternalAuth(); // PAM-only fallback stays active
         }
@@ -1754,7 +1739,7 @@ Item {
                 authTimeout.interval = defaultAuthTimeoutMs;
                 authTimeout.stop();
                 if (resumePasswordSubmit) {
-                    Qt.callLater(function() {
+                    Qt.callLater(function () {
                         root.startAuthSession(true);
                     });
                     return;

quickshell/Modules/Lock/LockScreenContent.qml

@@ -1025,7 +1025,7 @@ Item {
                                     color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.9)
                                 }
 
-                                RotationAnimation on rotation {
+                                RotationAnimator on rotation {
                                     running: pam.passwd.active && !root.unlocking
                                     loops: Animation.Infinite
                                     duration: Anims.durLong

quickshell/Modules/Notepad/NotepadTextEditor.qml

@@ -1,19 +1,18 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell.Io
 import qs.Common
 import qs.Services
 import qs.Widgets
 
-pragma ComponentBehavior: Bound
-
 Column {
     id: root
 
     Component.onCompleted: {
         if (PluginService.isPluginLoaded("dankNotepadModule")) {
-            pluginHighlightedHtml = SettingsData.getBuiltInPluginSetting("dankNotepadModule", "highlightedHtml", "")
+            pluginHighlightedHtml = SettingsData.getBuiltInPluginSetting("dankNotepadModule", "highlightedHtml", "");
         }
     }
 
@@ -33,65 +32,57 @@ Column {
     property string lastPluginContent: ""
     property int loadRequestId: 0
 
-    signal saveRequested()
-    signal openRequested()
-    signal newRequested()
-    signal previewRequested()
-    signal escapePressed()
-    signal contentChanged()
-    signal settingsRequested()
+    signal saveRequested
+    signal openRequested
+    signal newRequested
+    signal previewRequested
+    signal escapePressed
+    signal contentChanged
+    signal settingsRequested
 
     function hasUnsavedChanges() {
         if (!currentTab || !contentLoaded) {
-            return false
+            return false;
         }
 
         if (currentTab.isTemporary) {
-            return textArea.text.length > 0
+            return textArea.text.length > 0;
         }
-        return textArea.text !== lastSavedContent
+        return textArea.text !== lastSavedContent;
     }
 
     function loadCurrentTabContent() {
-        if (!currentTab) return
-
-        const requestedTabId = currentTab.id
-        const requestId = ++loadRequestId
-        contentLoaded = false
-        NotepadStorageService.loadTabContent(
-            NotepadStorageService.currentTabIndex,
-            (content) => {
-                const activeTab = NotepadStorageService.tabs.length > NotepadStorageService.currentTabIndex
-                    ? NotepadStorageService.tabs[NotepadStorageService.currentTabIndex]
-                    : null
-                if (requestId !== loadRequestId || !activeTab || activeTab.id !== requestedTabId)
-                    return
-
-                lastSavedContent = content
-                textArea.text = content
-                contentLoaded = true
-                syncContentToPlugin()
-            }
-        )
+        if (!currentTab)
+            return;
+        const requestedTabId = currentTab.id;
+        const requestId = ++loadRequestId;
+        contentLoaded = false;
+        NotepadStorageService.loadTabContent(NotepadStorageService.currentTabIndex, content => {
+            const activeTab = NotepadStorageService.tabs.length > NotepadStorageService.currentTabIndex ? NotepadStorageService.tabs[NotepadStorageService.currentTabIndex] : null;
+            if (requestId !== loadRequestId || !activeTab || activeTab.id !== requestedTabId)
+                return;
+            lastSavedContent = content;
+            textArea.text = content;
+            contentLoaded = true;
+            syncContentToPlugin();
+        });
     }
 
     function saveCurrentTabContent() {
-        if (!currentTab || !contentLoaded) return
-
-        NotepadStorageService.saveTabContent(
-            NotepadStorageService.currentTabIndex,
-            textArea.text
-        )
-        lastSavedContent = textArea.text
+        if (!currentTab || !contentLoaded)
+            return;
+        NotepadStorageService.saveTabContent(NotepadStorageService.currentTabIndex, textArea.text);
+        lastSavedContent = textArea.text;
     }
 
     function autoSaveToSession() {
-        if (!currentTab || !contentLoaded) return
-        saveCurrentTabContent()
+        if (!currentTab || !contentLoaded)
+            return;
+        saveCurrentTabContent();
     }
 
     function setTextDocumentLineHeight() {
-        return
+        return;
     }
 
     property string lastTextForLineModel: ""
@@ -99,147 +90,146 @@ Column {
 
     function updateLineModel() {
         if (!SettingsData.notepadShowLineNumbers) {
-            lineModel = []
-            lastTextForLineModel = ""
-            return
+            lineModel = [];
+            lastTextForLineModel = "";
+            return;
         }
 
         if (textArea.text !== lastTextForLineModel || lineModel.length === 0) {
-            lastTextForLineModel = textArea.text
-            lineModel = textArea.text.split('\n')
+            lastTextForLineModel = textArea.text;
+            lineModel = textArea.text.split('\n');
         }
     }
 
     function performSearch() {
-        let matches = []
-        currentMatchIndex = -1
+        let matches = [];
+        currentMatchIndex = -1;
 
         if (!searchQuery || searchQuery.length === 0) {
-            searchMatches = []
-            matchCount = 0
-            textArea.select(0, 0)
-            return
+            searchMatches = [];
+            matchCount = 0;
+            textArea.select(0, 0);
+            return;
         }
 
-        const text = textArea.text
-        const query = searchQuery.toLowerCase()
-        let index = 0
+        const text = textArea.text;
+        const query = searchQuery.toLowerCase();
+        let index = 0;
 
         while (index < text.length) {
-            const foundIndex = text.toLowerCase().indexOf(query, index)
-            if (foundIndex === -1) break
-
+            const foundIndex = text.toLowerCase().indexOf(query, index);
+            if (foundIndex === -1)
+                break;
             matches.push({
                 start: foundIndex,
                 end: foundIndex + searchQuery.length
-            })
-            index = foundIndex + 1
+            });
+            index = foundIndex + 1;
         }
 
-        searchMatches = matches
-        matchCount = matches.length
+        searchMatches = matches;
+        matchCount = matches.length;
 
         if (matchCount > 0) {
-            currentMatchIndex = 0
-            highlightCurrentMatch()
+            currentMatchIndex = 0;
+            highlightCurrentMatch();
         } else {
-            textArea.select(0, 0)
+            textArea.select(0, 0);
         }
     }
 
     function highlightCurrentMatch() {
         if (currentMatchIndex >= 0 && currentMatchIndex < searchMatches.length) {
-            const match = searchMatches[currentMatchIndex]
+            const match = searchMatches[currentMatchIndex];
 
-            textArea.cursorPosition = match.start
-            textArea.moveCursorSelection(match.end, TextEdit.SelectCharacters)
+            textArea.cursorPosition = match.start;
+            textArea.moveCursorSelection(match.end, TextEdit.SelectCharacters);
 
-            const flickable = textArea.parent
+            const flickable = textArea.parent;
             if (flickable && flickable.contentY !== undefined) {
-                const lineHeight = textArea.font.pixelSize * 1.5
-                const approxLine = textArea.text.substring(0, match.start).split('\n').length
-                const targetY = approxLine * lineHeight - flickable.height / 2
-                flickable.contentY = Math.max(0, Math.min(targetY, flickable.contentHeight - flickable.height))
+                const lineHeight = textArea.font.pixelSize * 1.5;
+                const approxLine = textArea.text.substring(0, match.start).split('\n').length;
+                const targetY = approxLine * lineHeight - flickable.height / 2;
+                flickable.contentY = Math.max(0, Math.min(targetY, flickable.contentHeight - flickable.height));
             }
         }
     }
 
     function findNext() {
-        if (matchCount === 0 || searchMatches.length === 0) return
-
-        currentMatchIndex = (currentMatchIndex + 1) % matchCount
-        highlightCurrentMatch()
+        if (matchCount === 0 || searchMatches.length === 0)
+            return;
+        currentMatchIndex = (currentMatchIndex + 1) % matchCount;
+        highlightCurrentMatch();
     }
 
     function findPrevious() {
-        if (matchCount === 0 || searchMatches.length === 0) return
-
-        currentMatchIndex = currentMatchIndex <= 0 ? matchCount - 1 : currentMatchIndex - 1
-        highlightCurrentMatch()
+        if (matchCount === 0 || searchMatches.length === 0)
+            return;
+        currentMatchIndex = currentMatchIndex <= 0 ? matchCount - 1 : currentMatchIndex - 1;
+        highlightCurrentMatch();
     }
 
     function showSearch() {
-        searchVisible = true
+        searchVisible = true;
         Qt.callLater(() => {
-            searchField.forceActiveFocus()
-        })
+            searchField.forceActiveFocus();
+        });
     }
 
     function togglePreview() {
         if (!inlinePreviewVisible) {
-            inlinePreviewVisible = true
-            previewMode = "split"
+            inlinePreviewVisible = true;
+            previewMode = "split";
         } else if (previewMode === "split") {
-            previewMode = "full"
+            previewMode = "full";
         } else {
-            inlinePreviewVisible = false
-            previewMode = "split"
+            inlinePreviewVisible = false;
+            previewMode = "split";
         }
-        syncContentToPlugin()
+        syncContentToPlugin();
     }
 
     function renderPreviewHtml() {
-        if (!inlinePreviewVisible) return ""
-        return pluginHighlightedHtml.length > 0 ? pluginHighlightedHtml : "<p><i>Rendering preview…</i></p>"
+        if (!inlinePreviewVisible)
+            return "";
+        return pluginHighlightedHtml.length > 0 ? pluginHighlightedHtml : "<p><i>Rendering preview…</i></p>";
     }
 
     function syncContentToPlugin() {
         if (!PluginService.isPluginLoaded("dankNotepadModule"))
-            return
-
+            return;
         if (!currentTab)
-            return
-
-        const filePath = currentTab?.filePath || ""
-        const ext = filePath.split('.').pop().toLowerCase()
-        const content = textArea.text
+            return;
+        const filePath = currentTab?.filePath || "";
+        const ext = filePath.split('.').pop().toLowerCase();
+        const content = textArea.text;
 
         if (content === lastPluginContent && SettingsData.getBuiltInPluginSetting("dankNotepadModule", "previewActive", false) === inlinePreviewVisible) {
-            return
+            return;
         }
 
-        lastPluginContent = content
-        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "previewActive", inlinePreviewVisible)
-        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "currentFilePath", filePath)
-        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "currentFileExtension", ext)
-        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "sourceContent", content)
-        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "updatedAt", Date.now())
+        lastPluginContent = content;
+        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "previewActive", inlinePreviewVisible);
+        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "currentFilePath", filePath);
+        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "currentFileExtension", ext);
+        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "sourceContent", content);
+        SettingsData.setBuiltInPluginSetting("dankNotepadModule", "updatedAt", Date.now());
     }
 
     function hideSearch() {
-        searchVisible = false
-        searchQuery = ""
-        searchMatches = []
-        matchCount = 0
-        currentMatchIndex = -1
-        textArea.select(0, 0)
-        textArea.forceActiveFocus()
+        searchVisible = false;
+        searchQuery = "";
+        searchMatches = [];
+        matchCount = 0;
+        currentMatchIndex = -1;
+        textArea.select(0, 0);
+        textArea.forceActiveFocus();
     }
 
     function copyPlainTextToClipboard() {
-        if (!inlinePreviewVisible || !textArea.text) return
-
-        const content = textArea.text
+        if (!inlinePreviewVisible || !textArea.text)
+            return;
+        const content = textArea.text;
         if (content.length > 0) {
             const proc = Qt.createQmlObject(`
                 import QtQuick
@@ -249,22 +239,19 @@ Column {
                     command: ["sh", "-c", "printf '%s' \\"$CONTENT\\" | dms clipboard copy"]
                     environment: { "CONTENT": content }
                     running: false
-                }`,
-                root,
-                "copyProc"
-            )
-            proc.content = content
-            proc.running = true
+                }`, root, "copyProc");
+            proc.content = content;
+            proc.running = true;
             proc.exited.connect(() => {
-                ToastService.showInfo(I18n.tr("Copied to clipboard"))
-                proc.destroy()
-            })
+                ToastService.showInfo(I18n.tr("Copied to clipboard"));
+                proc.destroy();
+            });
         }
     }
 
     function copyHtmlToClipboard() {
-        if (!inlinePreviewVisible || !pluginHighlightedHtml) return
-
+        if (!inlinePreviewVisible || !pluginHighlightedHtml)
+            return;
         if (pluginHighlightedHtml.length > 0) {
             const proc = Qt.createQmlObject(`
                 import QtQuick
@@ -274,16 +261,13 @@ Column {
                     command: ["sh", "-c", "printf '%s' \\"$CONTENT\\" | dms clipboard copy"]
                     environment: { "CONTENT": content }
                     running: false
-                }`,
-                root,
-                "copyProcHtml"
-            )
-            proc.content = pluginHighlightedHtml
-            proc.running = true
+                }`, root, "copyProcHtml");
+            proc.content = pluginHighlightedHtml;
+            proc.running = true;
             proc.exited.connect(() => {
-                ToastService.showInfo(I18n.tr("HTML copied to clipboard"))
-                proc.destroy()
-            })
+                ToastService.showInfo(I18n.tr("HTML copied to clipboard"));
+                proc.destroy();
+            });
         }
     }
 
@@ -334,43 +318,43 @@ Column {
                 clip: true
 
                 Component.onCompleted: {
-                    text = root.searchQuery
+                    text = root.searchQuery;
                 }
 
                 Connections {
                     target: root
                     function onSearchQueryChanged() {
                         if (searchField.text !== root.searchQuery) {
-                            searchField.text = root.searchQuery
+                            searchField.text = root.searchQuery;
                         }
                     }
                 }
 
                 onTextChanged: {
                     if (root.searchQuery !== text) {
-                        root.searchQuery = text
-                        root.performSearch()
+                        root.searchQuery = text;
+                        root.performSearch();
                     }
                 }
                 Keys.onEscapePressed: event => {
-                    root.hideSearch()
-                    event.accepted = true
+                    root.hideSearch();
+                    event.accepted = true;
                 }
                 Keys.onReturnPressed: event => {
                     if (event.modifiers & Qt.ShiftModifier) {
-                        root.findPrevious()
+                        root.findPrevious();
                     } else {
-                        root.findNext()
+                        root.findNext();
                     }
-                    event.accepted = true
+                    event.accepted = true;
                 }
                 Keys.onEnterPressed: event => {
                     if (event.modifiers & Qt.ShiftModifier) {
-                        root.findPrevious()
+                        root.findPrevious();
                     } else {
-                        root.findNext()
+                        root.findNext();
                     }
-                    event.accepted = true
+                    event.accepted = true;
                 }
             }
 
@@ -541,31 +525,41 @@ Column {
                             SequentialAnimation on opacity {
                                 running: textArea.activeFocus
                                 loops: Animation.Infinite
-                                PropertyAnimation { from: 1.0; to: 0.0; duration: 650; easing.type: Easing.InOutQuad }
-                                PropertyAnimation { from: 0.0; to: 1.0; duration: 650; easing.type: Easing.InOutQuad }
+                                OpacityAnimator {
+                                    from: 1.0
+                                    to: 0.0
+                                    duration: 650
+                                    easing.type: Easing.InOutQuad
+                                }
+                                OpacityAnimator {
+                                    from: 0.0
+                                    to: 1.0
+                                    duration: 650
+                                    easing.type: Easing.InOutQuad
+                                }
                             }
                         }
 
                         Component.onCompleted: {
-                            loadCurrentTabContent()
-                            setTextDocumentLineHeight()
-                            root.updateLineModel()
+                            loadCurrentTabContent();
+                            setTextDocumentLineHeight();
+                            root.updateLineModel();
                             Qt.callLater(() => {
-                                textArea.forceActiveFocus()
-                            })
+                                textArea.forceActiveFocus();
+                            });
                         }
 
                         Connections {
                             target: NotepadStorageService
                             function onCurrentTabIndexChanged() {
-                                loadCurrentTabContent()
+                                loadCurrentTabContent();
                                 Qt.callLater(() => {
-                                    textArea.forceActiveFocus()
-                                })
+                                    textArea.forceActiveFocus();
+                                });
                             }
                             function onTabsChanged() {
                                 if (NotepadStorageService.tabs.length > 0 && !contentLoaded) {
-                                    loadCurrentTabContent()
+                                    loadCurrentTabContent();
                                 }
                             }
                         }
@@ -573,53 +567,53 @@ Column {
                         Connections {
                             target: SettingsData
                             function onNotepadShowLineNumbersChanged() {
-                                root.updateLineModel()
+                                root.updateLineModel();
                             }
                         }
 
                         onTextChanged: {
                             if (contentLoaded && text !== lastSavedContent) {
-                                autoSaveTimer.restart()
+                                autoSaveTimer.restart();
                             }
-                            root.contentChanged()
-                            root.updateLineModel()
-                            pluginSyncTimer.restart()
+                            root.contentChanged();
+                            root.updateLineModel();
+                            pluginSyncTimer.restart();
                         }
 
-                        Keys.onEscapePressed: (event) => {
-                            root.escapePressed()
-                            event.accepted = true
+                        Keys.onEscapePressed: event => {
+                            root.escapePressed();
+                            event.accepted = true;
                         }
 
-                        Keys.onPressed: (event) => {
+                        Keys.onPressed: event => {
                             if (event.modifiers & Qt.ControlModifier) {
                                 switch (event.key) {
                                 case Qt.Key_S:
-                                    event.accepted = true
-                                    root.saveRequested()
-                                    break
+                                    event.accepted = true;
+                                    root.saveRequested();
+                                    break;
                                 case Qt.Key_O:
-                                    event.accepted = true
-                                    root.openRequested()
-                                    break
+                                    event.accepted = true;
+                                    root.openRequested();
+                                    break;
                                 case Qt.Key_N:
-                                    event.accepted = true
-                                    root.newRequested()
-                                    break
+                                    event.accepted = true;
+                                    root.newRequested();
+                                    break;
                                 case Qt.Key_A:
-                                    event.accepted = true
-                                    textArea.selectAll()
-                                    break
+                                    event.accepted = true;
+                                    textArea.selectAll();
+                                    break;
                                 case Qt.Key_F:
-                                    event.accepted = true
-                                    root.showSearch()
-                                    break
+                                    event.accepted = true;
+                                    root.showSearch();
+                                    break;
                                 case Qt.Key_P:
                                     if (PluginService.isPluginLoaded("dankNotepadModule")) {
-                                        event.accepted = true
-                                        root.previewRequested()
+                                        event.accepted = true;
+                                        root.previewRequested();
                                     }
-                                    break
+                                    break;
                                 }
                             }
                         }
@@ -845,19 +839,16 @@ Column {
             StyledText {
                 text: {
                     const len = textArea.text.length;
-                    if (len === 0) return I18n.tr("Empty");
-                    return len === 1
-                        ? I18n.tr("%1 character").arg(len)
-                        : I18n.tr("%1 characters").arg(len);
+                    if (len === 0)
+                        return I18n.tr("Empty");
+                    return len === 1 ? I18n.tr("%1 character").arg(len) : I18n.tr("%1 characters").arg(len);
                 }
                 font.pixelSize: Theme.fontSizeSmall
                 color: Theme.surfaceTextMedium
             }
 
             StyledText {
-                text: textArea.lineCount === 1
-                    ? I18n.tr("Line: %1").arg(textArea.lineCount)
-                    : I18n.tr("Lines: %1").arg(textArea.lineCount)
+                text: textArea.lineCount === 1 ? I18n.tr("Line: %1").arg(textArea.lineCount) : I18n.tr("Lines: %1").arg(textArea.lineCount)
                 font.pixelSize: Theme.fontSizeSmall
                 color: Theme.surfaceTextMedium
                 visible: textArea.text.length > 0
@@ -867,29 +858,29 @@ Column {
             StyledText {
                 text: {
                     if (autoSaveTimer.running) {
-                        return I18n.tr("Auto-saving...")
+                        return I18n.tr("Auto-saving...");
                     }
 
                     if (hasUnsavedChanges()) {
                         if (currentTab && currentTab.isTemporary) {
-                            return I18n.tr("Unsaved note...")
+                            return I18n.tr("Unsaved note...");
                         } else {
-                            return I18n.tr("Unsaved changes")
+                            return I18n.tr("Unsaved changes");
                         }
                     } else {
-                        return I18n.tr("Saved")
+                        return I18n.tr("Saved");
                     }
                 }
                 font.pixelSize: Theme.fontSizeSmall
                 color: {
                     if (autoSaveTimer.running) {
-                        return Theme.primary
+                        return Theme.primary;
                     }
 
                     if (hasUnsavedChanges()) {
-                        return Theme.warning
+                        return Theme.warning;
                     } else {
-                        return Theme.success
+                        return Theme.success;
                     }
                 }
                 opacity: textArea.text.length > 0 ? 1.0 : 0.0
@@ -902,7 +893,7 @@ Column {
         interval: 2000
         repeat: false
         onTriggered: {
-            autoSaveToSession()
+            autoSaveToSession();
         }
     }
 
@@ -917,7 +908,7 @@ Column {
         target: SettingsData
         function onBuiltInPluginSettingsChanged() {
             if (PluginService.isPluginLoaded("dankNotepadModule")) {
-                pluginHighlightedHtml = SettingsData.getBuiltInPluginSetting("dankNotepadModule", "highlightedHtml", "")
+                pluginHighlightedHtml = SettingsData.getBuiltInPluginSetting("dankNotepadModule", "highlightedHtml", "");
             }
         }
     }

quickshell/Modules/Notifications/Center/KeyboardNavigatedNotificationList.qml

@@ -16,8 +16,7 @@ DankListView {
     property bool listInitialized: false
     property int swipingCardIndex: -1
     property real swipingCardOffset: 0
-    property real __pendingStableHeight: 0
-    property real __heightUpdateThreshold: 20
+    property bool _stableHeightUpdatePending: false
     readonly property real shadowBlurPx: Theme.elevationEnabled ? ((Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined) ? Theme.elevationLevel1.blurPx : 4) : 0
     readonly property real shadowHorizontalGutter: Theme.snap(Math.max(Theme.spacingS, Math.min(32, shadowBlurPx * 1.5 + 6)), 1)
     readonly property real shadowVerticalGutter: Theme.snap(Math.max(Theme.spacingXS, 6), 1)
@@ -27,51 +26,52 @@ DankListView {
         Qt.callLater(() => {
             if (listView) {
                 listView.listInitialized = true;
-                listView.stableContentHeight = listView.contentHeight;
+                listView.syncStableContentHeight(false);
             }
         });
     }
 
-    Timer {
-        id: heightUpdateDebounce
-        interval: Theme.mediumDuration + 20
-        repeat: false
-        onTriggered: {
-            if (!listView.isAnimatingExpansion && Math.abs(listView.__pendingStableHeight - listView.stableContentHeight) > listView.__heightUpdateThreshold) {
-                listView.stableContentHeight = listView.__pendingStableHeight;
-            }
+    function targetContentHeight() {
+        if (count <= 0)
+            return contentHeight;
+
+        let total = topMargin + bottomMargin + Math.max(0, count - 1) * spacing;
+        for (let i = 0; i < count; i++) {
+            const item = itemAtIndex(i);
+            if (!item || item.nonAnimHeight === undefined)
+                return contentHeight;
+            total += item.nonAnimHeight;
         }
+        return Math.max(0, total);
+    }
+
+    function syncStableContentHeight(useTarget) {
+        const nextHeight = useTarget ? targetContentHeight() : contentHeight;
+        if (Math.abs(nextHeight - stableContentHeight) <= 0.5)
+            return;
+        stableContentHeight = nextHeight;
+    }
+
+    function queueStableContentHeightUpdate(useTarget) {
+        if (_stableHeightUpdatePending)
+            return;
+        _stableHeightUpdatePending = true;
+        Qt.callLater(() => {
+            _stableHeightUpdatePending = false;
+            syncStableContentHeight(useTarget || isAnimatingExpansion);
+        });
     }
 
     onContentHeightChanged: {
-        if (!isAnimatingExpansion) {
-            __pendingStableHeight = contentHeight;
-            if (Math.abs(contentHeight - stableContentHeight) > __heightUpdateThreshold) {
-                heightUpdateDebounce.restart();
-            } else {
-                stableContentHeight = contentHeight;
-            }
-        }
+        if (!isAnimatingExpansion)
+            queueStableContentHeightUpdate(false);
     }
 
     onIsAnimatingExpansionChanged: {
         if (isAnimatingExpansion) {
-            heightUpdateDebounce.stop();
-            let delta = 0;
-            for (let i = 0; i < count; i++) {
-                const item = itemAtIndex(i);
-                if (item && item.children[0] && item.children[0].isAnimating) {
-                    const targetDelegateHeight = item.children[0].targetHeight + listView.delegateShadowGutter;
-                    delta += targetDelegateHeight - item.height;
-                }
-            }
-            const targetHeight = contentHeight + delta;
-            // During expansion, always update immediately without threshold check
-            stableContentHeight = targetHeight;
+            syncStableContentHeight(true);
         } else {
-            __pendingStableHeight = contentHeight;
-            heightUpdateDebounce.stop();
-            stableContentHeight = __pendingStableHeight;
+            queueStableContentHeightUpdate(false);
         }
     }
 
@@ -148,11 +148,14 @@ DankListView {
         readonly property real adjacentScaleInfluence: isAdjacentToSwipe ? 1.0 - Math.abs(listView.swipingCardOffset) / width * 0.02 : 1.0
         readonly property real swipeFadeStartOffset: width * 0.75
         readonly property real swipeFadeDistance: Math.max(1, width - swipeFadeStartOffset)
+        readonly property real nonAnimHeight: notificationCard.targetHeight + listView.delegateShadowGutter
 
         Component.onCompleted: {
             Qt.callLater(() => {
-                if (delegateRoot)
+                if (delegateRoot) {
                     delegateRoot.__delegateInitialized = true;
+                    listView.queueStableContentHeightUpdate(listView.isAnimatingExpansion);
+                }
             });
         }
 
@@ -180,6 +183,7 @@ DankListView {
             onIsAnimatingChanged: {
                 if (isAnimating) {
                     listView.isAnimatingExpansion = true;
+                    listView.syncStableContentHeight(true);
                 } else {
                     Qt.callLater(() => {
                         if (!notificationCard || !listView)
@@ -197,6 +201,13 @@ DankListView {
                 }
             }
 
+            onTargetHeightChanged: {
+                if (isAnimating || listView.isAnimatingExpansion)
+                    listView.syncStableContentHeight(true);
+                else
+                    listView.queueStableContentHeightUpdate(false);
+            }
+
             isGroupSelected: {
                 if (!keyboardController || !keyboardController.keyboardNavigationActive || !listView.keyboardActive)
                     return false;

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -15,6 +15,13 @@ Rectangle {
     property bool userInitiatedExpansion: false
     property bool isAnimating: false
     property bool animateExpansion: true
+    property bool isDescriptionToggleAnimation: false
+    property bool _retainedExpandedContent: false
+    property bool _clipAnimatedContent: false
+    property real expandedContentOpacity: expanded ? 1 : 0
+    property real collapsedContentOpacity: expanded ? 0 : 1
+    readonly property bool renderExpandedContent: expanded || _retainedExpandedContent
+    readonly property bool renderCollapsedContent: !expanded
 
     property bool isGroupSelected: false
     property int selectedNotificationIndex: -1
@@ -33,11 +40,12 @@ Rectangle {
     readonly property real actionButtonHeight: compactMode ? 20 : 24
     readonly property real collapsedContentHeight: Math.max(iconSize, Theme.fontSizeSmall * 1.2 + Theme.fontSizeMedium * 1.2 + Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2))
     readonly property real baseCardHeight: cardPadding * 2 + collapsedContentHeight + actionButtonHeight + contentSpacing
+    readonly property bool connectedFrameMode: SettingsData.connectedFrameModeActive
 
     width: parent ? parent.width : 400
     height: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
     readonly property real targetHeight: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
-    radius: Theme.cornerRadius
+    radius: connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
     scale: (cardHoverHandler.hovered ? 1.004 : 1.0) * listLevelAdjacentScaleInfluence
     readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !BlurService.enabled
     readonly property var shadowElevation: Theme.elevationLevel1
@@ -55,6 +63,16 @@ Rectangle {
         });
     }
 
+    function expansionMotionDuration() {
+        if (isDescriptionToggleAnimation)
+            return descriptionExpanded ? Theme.notificationInlineExpandDuration : Theme.notificationInlineCollapseDuration;
+        return Theme.variantDuration(Theme.popoutAnimationDuration, root.expanded);
+    }
+
+    function expansionMotionCurve() {
+        return root.expanded ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve;
+    }
+
     Behavior on scale {
         enabled: listLevelScaleAnimationsEnabled
         NumberAnimation {
@@ -64,6 +82,7 @@ Rectangle {
     }
 
     Behavior on shadowBlurPx {
+        enabled: !root.connectedFrameMode
         NumberAnimation {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
@@ -71,6 +90,7 @@ Rectangle {
     }
 
     Behavior on shadowOffsetXPx {
+        enabled: !root.connectedFrameMode
         NumberAnimation {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
@@ -78,6 +98,7 @@ Rectangle {
     }
 
     Behavior on shadowOffsetYPx {
+        enabled: !root.connectedFrameMode
         NumberAnimation {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
@@ -92,6 +113,24 @@ Rectangle {
         }
     }
 
+    Behavior on expandedContentOpacity {
+        enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
+        NumberAnimation {
+            duration: root.expansionMotionDuration()
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.expansionMotionCurve()
+        }
+    }
+
+    Behavior on collapsedContentOpacity {
+        enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
+        NumberAnimation {
+            duration: root.expansionMotionDuration()
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.expansionMotionCurve()
+        }
+    }
+
     color: {
         if (isGroupSelected && keyboardNavigationActive) {
             return Theme.primaryPressed;
@@ -125,7 +164,31 @@ Rectangle {
         }
         return Theme.layerOutlineWidth;
     }
-    clip: false
+    clip: _clipAnimatedContent
+
+    onExpandedChanged: {
+        if (__initialized && userInitiatedExpansion && animateExpansion)
+            _clipAnimatedContent = true;
+        if (expanded) {
+            _retainedExpandedContent = false;
+            return;
+        }
+        if (__initialized && userInitiatedExpansion && animateExpansion)
+            _retainedExpandedContent = true;
+    }
+
+    onHeightChanged: {
+        if (Math.abs(height - targetHeight) > 0.5)
+            return;
+        _clipAnimatedContent = false;
+        if (!expanded && _retainedExpandedContent)
+            _retainedExpandedContent = false;
+    }
+
+    onExpandedContentOpacityChanged: {
+        if (!expanded && _retainedExpandedContent && expandedContentOpacity <= 0.01)
+            _retainedExpandedContent = false;
+    }
 
     HoverHandler {
         id: cardHoverHandler
@@ -145,7 +208,7 @@ Rectangle {
         shadowOffsetX: root.shadowOffsetXPx
         shadowOffsetY: root.shadowOffsetYPx
         shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
-        shadowEnabled: root.shadowsAllowed
+        shadowEnabled: root.shadowsAllowed && !root.connectedFrameMode
     }
 
     Rectangle {
@@ -185,7 +248,8 @@ Rectangle {
         anchors.leftMargin: Theme.spacingL
         anchors.rightMargin: Theme.spacingL + Theme.notificationHoverRevealMargin
         height: collapsedContentHeight + extraHeight
-        visible: !expanded
+        visible: renderCollapsedContent
+        opacity: root.collapsedContentOpacity
 
         DankCircularImage {
             id: iconContainer
@@ -348,6 +412,7 @@ Rectangle {
                         onClicked: mouse => {
                             if (!parent.hoveredLink && (parent.hasMoreText || descriptionExpanded)) {
                                 root.userInitiatedExpansion = true;
+                                root.isDescriptionToggleAnimation = true;
                                 const messageId = (notificationGroup && notificationGroup.latestNotification && notificationGroup.latestNotification.notification && notificationGroup.latestNotification.notification.id) ? (notificationGroup.latestNotification.notification.id + "_desc") : "";
                                 NotificationService.toggleMessageExpansion(messageId);
                                 Qt.callLater(() => {
@@ -357,7 +422,7 @@ Rectangle {
                             }
                         }
 
-                        propagateComposedEvents: true
+                        propagateComposedEvents: false
                         onPressed: mouse => {
                             if (parent.hoveredLink)
                                 mouse.accepted = false;
@@ -382,7 +447,8 @@ Rectangle {
         anchors.leftMargin: Theme.spacingL
         anchors.rightMargin: Theme.spacingL
         spacing: compactMode ? Theme.spacingXS : Theme.spacingS
-        visible: expanded
+        visible: renderExpandedContent
+        opacity: root.expandedContentOpacity
 
         Item {
             width: parent.width
@@ -513,7 +579,12 @@ Rectangle {
                         }
 
                         Behavior on height {
-                            enabled: false
+                            enabled: expandedDelegateWrapper.__delegateInitialized && root.animateExpansion && root.userInitiatedExpansion
+                            NumberAnimation {
+                                duration: root.expansionMotionDuration()
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: root.expansionMotionCurve()
+                            }
                         }
 
                         Item {
@@ -650,6 +721,7 @@ Rectangle {
                                             onClicked: mouse => {
                                                 if (!parent.hoveredLink && (bodyText.hasMoreText || messageExpanded)) {
                                                     root.userInitiatedExpansion = true;
+                                                    root.isDescriptionToggleAnimation = true;
                                                     NotificationService.toggleMessageExpansion(modelData?.notification?.id || "");
                                                     Qt.callLater(() => {
                                                         if (root && !root.isAnimating)
@@ -658,7 +730,7 @@ Rectangle {
                                                 }
                                             }
 
-                                            propagateComposedEvents: true
+                                            propagateComposedEvents: false
                                             onPressed: mouse => {
                                                 if (parent.hoveredLink) {
                                                     mouse.accepted = false;
@@ -825,7 +897,8 @@ Rectangle {
     }
 
     Row {
-        visible: !expanded
+        visible: renderCollapsedContent
+        opacity: root.collapsedContentOpacity
         anchors.right: clearButton.visible ? clearButton.left : parent.right
         anchors.rightMargin: clearButton.visible ? contentSpacing : Theme.spacingL
         anchors.top: collapsedContent.bottom
@@ -882,7 +955,8 @@ Rectangle {
         property bool isHovered: false
         readonly property int actionCount: (notificationGroup?.latestNotification?.actions || []).length
 
-        visible: !expanded && actionCount < 3
+        visible: renderCollapsedContent && actionCount < 3
+        opacity: root.collapsedContentOpacity
         anchors.right: parent.right
         anchors.rightMargin: Theme.spacingL
         anchors.top: collapsedContent.bottom
@@ -913,10 +987,11 @@ Rectangle {
 
     MouseArea {
         anchors.fill: parent
-        visible: !expanded && (notificationGroup?.count || 0) > 1 && !descriptionExpanded
+        visible: renderCollapsedContent && (notificationGroup?.count || 0) > 1 && !descriptionExpanded
         cursorShape: Qt.PointingHandCursor
         onClicked: {
             root.userInitiatedExpansion = true;
+            root.isDescriptionToggleAnimation = false;
             NotificationService.toggleGroupExpansion(notificationGroup?.key || "");
         }
         z: -1
@@ -940,6 +1015,7 @@ Rectangle {
             buttonSize: compactMode ? 24 : 28
             onClicked: {
                 root.userInitiatedExpansion = true;
+                root.isDescriptionToggleAnimation = false;
                 NotificationService.toggleGroupExpansion(notificationGroup?.key || "");
             }
         }
@@ -957,15 +1033,18 @@ Rectangle {
     Behavior on height {
         enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
         NumberAnimation {
-            duration: root.expanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration
+            duration: root.expansionMotionDuration()
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasized
+            easing.bezierCurve: root.expansionMotionCurve()
             onRunningChanged: {
                 if (running) {
                     root.isAnimating = true;
                 } else {
                     root.isAnimating = false;
                     root.userInitiatedExpansion = false;
+                    root.isDescriptionToggleAnimation = false;
+                    root._retainedExpandedContent = false;
+                    root._clipAnimatedContent = false;
                 }
             }
         }

quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -14,6 +14,7 @@ DankPopout {
     property real stablePopupHeight: 400
     property real _lastAlignedContentHeight: -1
     property bool _pendingSizedOpen: false
+    property bool _heightUpdatePending: false
 
     function updateStablePopupHeight() {
         const item = contentLoader.item;
@@ -30,6 +31,16 @@ DankPopout {
         stablePopupHeight = target;
     }
 
+    function queueStablePopupHeightUpdate() {
+        if (_heightUpdatePending)
+            return;
+        _heightUpdatePending = true;
+        Qt.callLater(() => {
+            _heightUpdatePending = false;
+            updateStablePopupHeight();
+        });
+    }
+
     NotificationKeyboardController {
         id: keyboardController
         listView: null
@@ -39,11 +50,9 @@ DankPopout {
         }
     }
 
-    popupWidth: triggerScreen ? Math.min(500, Math.max(380, triggerScreen.width - 48)) : 400
+    popupWidth: 400
     popupHeight: stablePopupHeight
     positioning: ""
-    animationScaleCollapsed: 0.94
-    animationOffset: 0
     suspendShadowWhileResizing: false
 
     screen: triggerScreen
@@ -130,7 +139,7 @@ DankPopout {
     Connections {
         target: contentLoader.item
         function onImplicitHeightChanged() {
-            root.updateStablePopupHeight();
+            root.queueStablePopupHeightUpdate();
         }
     }
 

quickshell/Modules/Notifications/Center/NotificationSettings.qml

@@ -123,327 +123,327 @@ Rectangle {
             anchors.margins: Theme.spacingL
             spacing: Theme.spacingM
 
-        StyledText {
-            text: I18n.tr("Notification Settings")
-            font.pixelSize: Theme.fontSizeMedium
-            font.weight: Font.Bold
-            color: Theme.surfaceText
-        }
-
-        Item {
-            width: parent.width
-            height: Math.max(dndRow.implicitHeight, dndToggle.implicitHeight) + Theme.spacingS
-
-            Row {
-                id: dndRow
-                anchors.left: parent.left
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
-                    size: Theme.iconSizeSmall
-                    color: SessionData.doNotDisturb ? Theme.error : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: I18n.tr("Do Not Disturb")
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
+            StyledText {
+                text: I18n.tr("Notification Settings")
+                font.pixelSize: Theme.fontSizeMedium
+                font.weight: Font.Bold
+                color: Theme.surfaceText
             }
 
-            DankToggle {
-                id: dndToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SessionData.doNotDisturb
-                onToggled: SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
-            }
-        }
+            Item {
+                width: parent.width
+                height: Math.max(dndRow.implicitHeight, dndToggle.implicitHeight) + Theme.spacingS
 
-        Rectangle {
-            width: parent.width
-            height: 1
-            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
-        }
+                Row {
+                    id: dndRow
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
 
-        StyledText {
-            text: I18n.tr("Notification Timeouts")
-            font.pixelSize: Theme.fontSizeSmall
-            font.weight: Font.Medium
-            color: Theme.surfaceVariantText
-        }
-
-        DankDropdown {
-            text: I18n.tr("Low Priority")
-            description: I18n.tr("Timeout for low priority notifications")
-            currentValue: getTimeoutText(SettingsData.notificationTimeoutLow)
-            options: timeoutOptions.map(opt => opt.text)
-            onValueChanged: value => {
-                for (let i = 0; i < timeoutOptions.length; i++) {
-                    if (timeoutOptions[i].text === value) {
-                        SettingsData.set("notificationTimeoutLow", timeoutOptions[i].value);
-                        break;
+                    DankIcon {
+                        name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
+                        size: Theme.iconSizeSmall
+                        color: SessionData.doNotDisturb ? Theme.error : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
                     }
-                }
-            }
-        }
-
-        DankDropdown {
-            text: I18n.tr("Normal Priority")
-            description: I18n.tr("Timeout for normal priority notifications")
-            currentValue: getTimeoutText(SettingsData.notificationTimeoutNormal)
-            options: timeoutOptions.map(opt => opt.text)
-            onValueChanged: value => {
-                for (let i = 0; i < timeoutOptions.length; i++) {
-                    if (timeoutOptions[i].text === value) {
-                        SettingsData.set("notificationTimeoutNormal", timeoutOptions[i].value);
-                        break;
-                    }
-                }
-            }
-        }
-
-        DankDropdown {
-            text: I18n.tr("Critical Priority")
-            description: I18n.tr("Timeout for critical priority notifications")
-            currentValue: getTimeoutText(SettingsData.notificationTimeoutCritical)
-            options: timeoutOptions.map(opt => opt.text)
-            onValueChanged: value => {
-                for (let i = 0; i < timeoutOptions.length; i++) {
-                    if (timeoutOptions[i].text === value) {
-                        SettingsData.set("notificationTimeoutCritical", timeoutOptions[i].value);
-                        break;
-                    }
-                }
-            }
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 1
-            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
-        }
-
-        Item {
-            width: parent.width
-            height: Math.max(overlayRow.implicitHeight, overlayToggle.implicitHeight) + Theme.spacingS
-
-            Row {
-                id: overlayRow
-                anchors.left: parent.left
-                anchors.right: overlayToggle.left
-                anchors.rightMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "notifications_active"
-                    size: Theme.iconSizeSmall
-                    color: SettingsData.notificationOverlayEnabled ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: 2
-                    anchors.verticalCenter: parent.verticalCenter
-                    width: overlayRow.width - Theme.iconSizeSmall - Theme.spacingM
 
                     StyledText {
-                        width: parent.width
-                        text: I18n.tr("Notification Overlay")
+                        text: I18n.tr("Do Not Disturb")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
-                        wrapMode: Text.Wrap
+                        anchors.verticalCenter: parent.verticalCenter
                     }
+                }
 
-                    StyledText {
-                        width: parent.width
-                        text: I18n.tr("Display all priorities over fullscreen apps")
-                        font.pixelSize: Theme.fontSizeSmall - 1
-                        color: Theme.surfaceVariantText
-                        wrapMode: Text.Wrap
+                DankToggle {
+                    id: dndToggle
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    checked: SessionData.doNotDisturb
+                    onToggled: SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
+                }
+            }
+
+            Rectangle {
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+            }
+
+            StyledText {
+                text: I18n.tr("Notification Timeouts")
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceVariantText
+            }
+
+            DankDropdown {
+                text: I18n.tr("Low Priority")
+                description: I18n.tr("Timeout for low priority notifications")
+                currentValue: getTimeoutText(SettingsData.notificationTimeoutLow)
+                options: timeoutOptions.map(opt => opt.text)
+                onValueChanged: value => {
+                    for (let i = 0; i < timeoutOptions.length; i++) {
+                        if (timeoutOptions[i].text === value) {
+                            SettingsData.set("notificationTimeoutLow", timeoutOptions[i].value);
+                            break;
+                        }
                     }
                 }
             }
 
-            DankToggle {
-                id: overlayToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SettingsData.notificationOverlayEnabled
-                onToggled: toggled => SettingsData.set("notificationOverlayEnabled", toggled)
+            DankDropdown {
+                text: I18n.tr("Normal Priority")
+                description: I18n.tr("Timeout for normal priority notifications")
+                currentValue: getTimeoutText(SettingsData.notificationTimeoutNormal)
+                options: timeoutOptions.map(opt => opt.text)
+                onValueChanged: value => {
+                    for (let i = 0; i < timeoutOptions.length; i++) {
+                        if (timeoutOptions[i].text === value) {
+                            SettingsData.set("notificationTimeoutNormal", timeoutOptions[i].value);
+                            break;
+                        }
+                    }
+                }
             }
-        }
 
-        Item {
-            width: parent.width
-            height: Math.max(privacyRow.implicitHeight, privacyToggle.implicitHeight) + Theme.spacingS
+            DankDropdown {
+                text: I18n.tr("Critical Priority")
+                description: I18n.tr("Timeout for critical priority notifications")
+                currentValue: getTimeoutText(SettingsData.notificationTimeoutCritical)
+                options: timeoutOptions.map(opt => opt.text)
+                onValueChanged: value => {
+                    for (let i = 0; i < timeoutOptions.length; i++) {
+                        if (timeoutOptions[i].text === value) {
+                            SettingsData.set("notificationTimeoutCritical", timeoutOptions[i].value);
+                            break;
+                        }
+                    }
+                }
+            }
 
-            Row {
-                id: privacyRow
-                anchors.left: parent.left
-                anchors.right: privacyToggle.left
-                anchors.rightMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
+            Rectangle {
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+            }
 
-                DankIcon {
-                    name: "privacy_tip"
-                    size: Theme.iconSizeSmall
-                    color: SettingsData.notificationPopupPrivacyMode ? Theme.primary : Theme.surfaceText
+            Item {
+                width: parent.width
+                height: Math.max(overlayRow.implicitHeight, overlayToggle.implicitHeight) + Theme.spacingS
+
+                Row {
+                    id: overlayRow
+                    anchors.left: parent.left
+                    anchors.right: overlayToggle.left
+                    anchors.rightMargin: Theme.spacingM
                     anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "notifications_active"
+                        size: Theme.iconSizeSmall
+                        color: SettingsData.notificationOverlayEnabled ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Column {
+                        spacing: 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: overlayRow.width - Theme.iconSizeSmall - Theme.spacingM
+
+                        StyledText {
+                            width: parent.width
+                            text: I18n.tr("Notification Overlay")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            wrapMode: Text.Wrap
+                        }
+
+                        StyledText {
+                            width: parent.width
+                            text: I18n.tr("Display all priorities over fullscreen apps")
+                            font.pixelSize: Theme.fontSizeSmall - 1
+                            color: Theme.surfaceVariantText
+                            wrapMode: Text.Wrap
+                        }
+                    }
                 }
 
-                Column {
-                    spacing: 2
+                DankToggle {
+                    id: overlayToggle
+                    anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
-                    width: privacyRow.width - Theme.iconSizeSmall - Theme.spacingM
+                    checked: SettingsData.notificationOverlayEnabled
+                    onToggled: toggled => SettingsData.set("notificationOverlayEnabled", toggled)
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: Math.max(privacyRow.implicitHeight, privacyToggle.implicitHeight) + Theme.spacingS
+
+                Row {
+                    id: privacyRow
+                    anchors.left: parent.left
+                    anchors.right: privacyToggle.left
+                    anchors.rightMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "privacy_tip"
+                        size: Theme.iconSizeSmall
+                        color: SettingsData.notificationPopupPrivacyMode ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Column {
+                        spacing: 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: privacyRow.width - Theme.iconSizeSmall - Theme.spacingM
+
+                        StyledText {
+                            width: parent.width
+                            text: I18n.tr("Privacy Mode")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            wrapMode: Text.Wrap
+                        }
+
+                        StyledText {
+                            width: parent.width
+                            text: I18n.tr("Hide notification content until expanded")
+                            font.pixelSize: Theme.fontSizeSmall - 1
+                            color: Theme.surfaceVariantText
+                            wrapMode: Text.Wrap
+                        }
+                    }
+                }
+
+                DankToggle {
+                    id: privacyToggle
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    checked: SettingsData.notificationPopupPrivacyMode
+                    onToggled: toggled => SettingsData.set("notificationPopupPrivacyMode", toggled)
+                }
+            }
+
+            Rectangle {
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+            }
+
+            StyledText {
+                text: I18n.tr("History Settings")
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceVariantText
+            }
+
+            Item {
+                width: parent.width
+                height: Math.max(lowRow.implicitHeight, lowToggle.implicitHeight) + Theme.spacingS
+
+                Row {
+                    id: lowRow
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "low_priority"
+                        size: Theme.iconSizeSmall
+                        color: SettingsData.notificationHistorySaveLow ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
 
                     StyledText {
-                        width: parent.width
-                        text: I18n.tr("Privacy Mode")
+                        text: I18n.tr("Low Priority")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
-                        wrapMode: Text.Wrap
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                DankToggle {
+                    id: lowToggle
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    checked: SettingsData.notificationHistorySaveLow
+                    onToggled: toggled => SettingsData.set("notificationHistorySaveLow", toggled)
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: Math.max(normalRow.implicitHeight, normalToggle.implicitHeight) + Theme.spacingS
+
+                Row {
+                    id: normalRow
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "notifications"
+                        size: Theme.iconSizeSmall
+                        color: SettingsData.notificationHistorySaveNormal ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
                     }
 
                     StyledText {
-                        width: parent.width
-                        text: I18n.tr("Hide notification content until expanded")
-                        font.pixelSize: Theme.fontSizeSmall - 1
-                        color: Theme.surfaceVariantText
-                        wrapMode: Text.Wrap
+                        text: I18n.tr("Normal Priority")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
                     }
                 }
-            }
 
-            DankToggle {
-                id: privacyToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SettingsData.notificationPopupPrivacyMode
-                onToggled: toggled => SettingsData.set("notificationPopupPrivacyMode", toggled)
-            }
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 1
-            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
-        }
-
-        StyledText {
-            text: I18n.tr("History Settings")
-            font.pixelSize: Theme.fontSizeSmall
-            font.weight: Font.Medium
-            color: Theme.surfaceVariantText
-        }
-
-        Item {
-            width: parent.width
-            height: Math.max(lowRow.implicitHeight, lowToggle.implicitHeight) + Theme.spacingS
-
-            Row {
-                id: lowRow
-                anchors.left: parent.left
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "low_priority"
-                    size: Theme.iconSizeSmall
-                    color: SettingsData.notificationHistorySaveLow ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: I18n.tr("Low Priority")
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
+                DankToggle {
+                    id: normalToggle
+                    anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
+                    checked: SettingsData.notificationHistorySaveNormal
+                    onToggled: toggled => SettingsData.set("notificationHistorySaveNormal", toggled)
                 }
             }
 
-            DankToggle {
-                id: lowToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SettingsData.notificationHistorySaveLow
-                onToggled: toggled => SettingsData.set("notificationHistorySaveLow", toggled)
+            Item {
+                width: parent.width
+                height: Math.max(criticalRow.implicitHeight, criticalToggle.implicitHeight) + Theme.spacingS
+
+                Row {
+                    id: criticalRow
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "priority_high"
+                        size: Theme.iconSizeSmall
+                        color: SettingsData.notificationHistorySaveCritical ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Critical Priority")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                DankToggle {
+                    id: criticalToggle
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    checked: SettingsData.notificationHistorySaveCritical
+                    onToggled: toggled => SettingsData.set("notificationHistorySaveCritical", toggled)
+                }
             }
         }
-
-        Item {
-            width: parent.width
-            height: Math.max(normalRow.implicitHeight, normalToggle.implicitHeight) + Theme.spacingS
-
-            Row {
-                id: normalRow
-                anchors.left: parent.left
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "notifications"
-                    size: Theme.iconSizeSmall
-                    color: SettingsData.notificationHistorySaveNormal ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: I18n.tr("Normal Priority")
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            DankToggle {
-                id: normalToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SettingsData.notificationHistorySaveNormal
-                onToggled: toggled => SettingsData.set("notificationHistorySaveNormal", toggled)
-            }
-        }
-
-        Item {
-            width: parent.width
-            height: Math.max(criticalRow.implicitHeight, criticalToggle.implicitHeight) + Theme.spacingS
-
-            Row {
-                id: criticalRow
-                anchors.left: parent.left
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "priority_high"
-                    size: Theme.iconSizeSmall
-                    color: SettingsData.notificationHistorySaveCritical ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: I18n.tr("Critical Priority")
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            DankToggle {
-                id: criticalToggle
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                checked: SettingsData.notificationHistorySaveCritical
-                onToggled: toggled => SettingsData.set("notificationHistorySaveCritical", toggled)
-            }
-        }
-    }
     }
 }

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -10,13 +10,40 @@ import qs.Widgets
 PanelWindow {
     id: win
 
+    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";
+        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";
+        }
+    }
+    readonly property int inlineExpandDuration: Theme.notificationInlineExpandDuration
+    readonly property int inlineCollapseDuration: Theme.notificationInlineCollapseDuration
+    property bool inlineHeightAnimating: false
+
     WindowBlur {
         targetWindow: win
-        blurX: content.x + content.cardInset + swipeTx.x + tx.x
-        blurY: content.y + content.cardInset + swipeTx.y + tx.y
-        blurWidth: !win._finalized ? Math.max(0, content.width - content.cardInset * 2) : 0
-        blurHeight: !win._finalized ? Math.max(0, content.height - content.cardInset * 2) : 0
-        blurRadius: Theme.cornerRadius
+        readonly property real s: Math.min(1, content.scale) * Math.max(0, content.opacity)
+        readonly property real innerW: Math.max(0, content.width - content.cardInset * 2)
+        readonly property real innerH: Math.max(0, content.height - content.cardInset * 2)
+        blurX: content.x + content.cardInset + swipeTx.x + tx.x + innerW * (1 - s) * 0.5
+        blurY: content.y + content.cardInset + swipeTx.y + tx.y + innerH * (1 - s) * 0.5
+        blurWidth: !win._finalized && !win.connectedFrameMode ? innerW * s : 0
+        blurHeight: !win._finalized && !win.connectedFrameMode ? innerH * s : 0
+        blurRadius: win.connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
     }
 
     WlrLayershell.namespace: "dms:notification-popup"
@@ -25,6 +52,15 @@ PanelWindow {
     required property string notificationId
     readonly property bool hasValidData: notificationData && notificationData.notification
     readonly property alias hovered: cardHoverHandler.hovered
+    readonly property alias swipeActive: content.swipeActive
+    readonly property alias swipeDismissing: content.swipeDismissing
+    readonly property bool swipeDismissTowardEdge: {
+        if (content.swipeDismissing)
+            return _swipeDismissesTowardFrameEdge();
+        if (content.swipeActive)
+            return content.swipeOffset * _frameEdgeSwipeDirection() > 0;
+        return false;
+    }
     property int screenY: 0
     property bool exiting: false
     property bool _isDestroying: false
@@ -32,18 +68,36 @@ PanelWindow {
     property real _lastReportedAlignedHeight: -1
     property real _storedTopMargin: 0
     property real _storedBottomMargin: 0
+    property bool _inlineGeometryReady: false
+    readonly property bool directionalEffect: Theme.isDirectionalEffect
+    readonly property bool depthEffect: Theme.isDepthEffect
+    readonly property real entryTravel: {
+        const base = Math.abs(Theme.effectAnimOffset);
+        if (directionalEffect) {
+            if (isCenterPosition)
+                return Math.max(base, Math.round(content.height * 1.1));
+            return Math.max(base, Math.round(content.width * 0.95));
+        }
+        if (depthEffect)
+            return Math.max(base, 44);
+        return base;
+    }
+    readonly property real exitTravel: {
+        if (directionalEffect) {
+            if (isCenterPosition)
+                return Math.max(1, content.height);
+            return Math.max(1, content.width);
+        }
+        if (depthEffect)
+            return Math.round(entryTravel * 1.35);
+        return Anims.slidePx;
+    }
     readonly property string clearText: I18n.tr("Dismiss")
     property bool descriptionExpanded: false
     readonly property bool hasExpandableBody: (notificationData?.htmlBody || "").replace(/<[^>]*>/g, "").trim().length > 0
     onDescriptionExpandedChanged: {
-        popupHeightChanged();
-    }
-    onImplicitHeightChanged: {
-        const aligned = Theme.px(implicitHeight, dpr);
-        if (Math.abs(aligned - _lastReportedAlignedHeight) < 0.5)
-            return;
-        _lastReportedAlignedHeight = aligned;
-        popupHeightChanged();
+        if (connectedFrameMode)
+            popupChromeGeometryChanged();
     }
 
     readonly property bool compactMode: SettingsData.notificationCompactMode
@@ -61,6 +115,7 @@ PanelWindow {
     signal exitStarted
     signal exitFinished
     signal popupHeightChanged
+    signal popupChromeGeometryChanged
 
     function startExit() {
         if (exiting || _isDestroying) {
@@ -68,6 +123,7 @@ PanelWindow {
         }
         exiting = true;
         exitStarted();
+        popupChromeGeometryChanged();
         exitAnim.restart();
         exitWatchdog.restart();
         if (NotificationService.removeFromVisibleNotifications)
@@ -132,22 +188,84 @@ PanelWindow {
             return basePopupHeightPrivacy;
         if (!descriptionExpanded)
             return basePopupHeight;
-        const bodyTextHeight = bodyText.contentHeight || 0;
+        const bodyTextHeight = expandedBodyMeasure.contentHeight || bodyText.contentHeight || 0;
         const collapsedBodyHeight = Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2);
         if (bodyTextHeight > collapsedBodyHeight + 2)
             return basePopupHeight + bodyTextHeight - collapsedBodyHeight;
         return basePopupHeight;
     }
+    readonly property real targetAlignedHeight: Theme.px(Math.max(0, contentImplicitHeight), dpr)
+    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 real renderedContentOffsetY: contentAnchorsTop ? 0 : Math.max(0, allocatedAlignedHeight - renderedAlignedHeight)
     implicitWidth: contentImplicitWidth + (windowShadowPad * 2)
-    implicitHeight: contentImplicitHeight + (windowShadowPad * 2)
+    implicitHeight: allocatedAlignedHeight + (windowShadowPad * 2)
 
-    Behavior on implicitHeight {
-        enabled: !exiting && !_isDestroying
+    function inlineMotionDuration(growing) {
+        return growing ? inlineExpandDuration : inlineCollapseDuration;
+    }
+
+    function syncInlineTargetHeight() {
+        const target = Math.max(0, Number(targetAlignedHeight));
+        if (isNaN(target))
+            return;
+
+        if (!_inlineGeometryReady) {
+            renderedHeightAnim.stop();
+            renderedAlignedHeight = target;
+            allocatedAlignedHeight = target;
+            _lastReportedAlignedHeight = target;
+            return;
+        }
+
+        const currentRendered = Math.max(0, Number(renderedAlignedHeight));
+        const nextAllocation = Math.max(target, currentRendered, allocatedAlignedHeight);
+        if (Math.abs(nextAllocation - allocatedAlignedHeight) >= 0.5)
+            allocatedAlignedHeight = nextAllocation;
+
+        if (Math.abs(target - renderedAlignedHeight) < 0.5) {
+            finishInlineHeightAnimation();
+            return;
+        }
+
+        renderedAlignedHeight = target;
+        if (connectedFrameMode)
+            popupChromeGeometryChanged();
+        if (inlineMotionDuration(target >= currentRendered) <= 0)
+            Qt.callLater(() => finishInlineHeightAnimation());
+    }
+
+    function finishInlineHeightAnimation() {
+        const target = Math.max(0, Number(targetAlignedHeight));
+        if (isNaN(target))
+            return;
+        if (Math.abs(renderedAlignedHeight - target) >= 0.5)
+            renderedAlignedHeight = target;
+        if (Math.abs(allocatedAlignedHeight - target) >= 0.5)
+            allocatedAlignedHeight = target;
+        _lastReportedAlignedHeight = renderedAlignedHeight;
+        popupHeightChanged();
+        if (connectedFrameMode)
+            popupChromeGeometryChanged();
+    }
+
+    onTargetAlignedHeightChanged: syncInlineTargetHeight()
+    onAllocatedAlignedHeightChanged: {
+        if (connectedFrameMode)
+            popupChromeGeometryChanged();
+    }
+
+    Behavior on renderedAlignedHeight {
+        enabled: !win.exiting && !win._isDestroying
         NumberAnimation {
-            id: implicitHeightAnim
-            duration: descriptionExpanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration
+            id: renderedHeightAnim
+            duration: win.inlineMotionDuration(win.inlineGeometryGrowing)
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasized
+            easing.bezierCurve: win.inlineGeometryGrowing ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+            onRunningChanged: win.inlineHeightAnimating = running
+            onFinished: win.finishInlineHeightAnimation()
         }
     }
 
@@ -157,7 +275,11 @@ PanelWindow {
         }
     }
     Component.onCompleted: {
-        _lastReportedAlignedHeight = Theme.px(implicitHeight, dpr);
+        renderedHeightAnim.stop();
+        renderedAlignedHeight = targetAlignedHeight;
+        allocatedAlignedHeight = targetAlignedHeight;
+        _inlineGeometryReady = true;
+        _lastReportedAlignedHeight = renderedAlignedHeight;
         _storedTopMargin = getTopMargin();
         _storedBottomMargin = getBottomMargin();
         if (SettingsData.notificationPopupPrivacyMode)
@@ -195,7 +317,8 @@ PanelWindow {
     readonly property real maxPopupShadowBlurPx: Math.max((Theme.elevationLevel3 && Theme.elevationLevel3.blurPx !== undefined) ? Theme.elevationLevel3.blurPx : 12, (Theme.elevationLevel4 && Theme.elevationLevel4.blurPx !== undefined) ? Theme.elevationLevel4.blurPx : 16)
     readonly property real maxPopupShadowOffsetXPx: Math.max(Math.abs(Theme.elevationOffsetX(Theme.elevationLevel3)), Math.abs(Theme.elevationOffsetX(Theme.elevationLevel4)))
     readonly property real maxPopupShadowOffsetYPx: Math.max(Math.abs(Theme.elevationOffsetY(Theme.elevationLevel3, 6)), Math.abs(Theme.elevationOffsetY(Theme.elevationLevel4, 8)))
-    readonly property real windowShadowPad: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled ? Theme.snap(Math.max(16, maxPopupShadowBlurPx + Math.max(maxPopupShadowOffsetXPx, maxPopupShadowOffsetYPx) + 8), dpr) : 0
+    readonly property bool popupWindowShadowActive: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled && !connectedFrameMode
+    readonly property real windowShadowPad: popupWindowShadowActive ? Theme.snap(Math.max(16, maxPopupShadowBlurPx + Math.max(maxPopupShadowOffsetXPx, maxPopupShadowOffsetYPx) + 8), dpr) : 0
 
     anchors.top: true
     anchors.left: true
@@ -240,12 +363,32 @@ PanelWindow {
         });
     }
 
+    function _frameEdgeInset(side) {
+        if (!screen)
+            return 0;
+        const raw = SettingsData.frameEdgeInsetForSide(screen, side);
+        return Math.max(0, Math.round(Theme.px(raw, dpr)));
+    }
+
+    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) {
+        return _frameEdgeInset(side) + Theme.popupDistance;
+    }
+
     function getTopMargin() {
         const popupPos = SettingsData.notificationPopupPosition;
         const isTop = isTopCenter || popupPos === SettingsData.Position.Top || popupPos === SettingsData.Position.Left;
         if (!isTop)
             return 0;
 
+        if (connectedFrameMode) {
+            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps) ? 0 : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
+            return _frameEdgeInset("top") + cornerClear + screenY;
+        }
+        if (frameOnlyNoConnected)
+            return _frameGapMargin("top") + screenY;
         const barInfo = getBarInfo();
         const base = barInfo.topBar > 0 ? barInfo.topBar : Theme.popupDistance;
         return base + screenY;
@@ -257,6 +400,12 @@ PanelWindow {
         if (!isBottom)
             return 0;
 
+        if (connectedFrameMode) {
+            const cornerClear = (isCenterPosition || SettingsData.frameCloseGaps) ? 0 : (Theme.px(SettingsData.frameRounding, dpr) + Theme.px(Theme.connectedCornerRadius, dpr));
+            return _frameEdgeInset("bottom") + cornerClear + screenY;
+        }
+        if (frameOnlyNoConnected)
+            return _frameGapMargin("bottom") + screenY;
         const barInfo = getBarInfo();
         const base = barInfo.bottomBar > 0 ? barInfo.bottomBar : Theme.popupDistance;
         return base + screenY;
@@ -271,6 +420,10 @@ PanelWindow {
         if (!isLeft)
             return 0;
 
+        if (connectedFrameMode)
+            return _frameEdgeInset("left");
+        if (frameOnlyNoConnected)
+            return _frameGapMargin("left");
         const barInfo = getBarInfo();
         return barInfo.leftBar > 0 ? barInfo.leftBar : Theme.popupDistance;
     }
@@ -284,6 +437,10 @@ PanelWindow {
         if (!isRight)
             return 0;
 
+        if (connectedFrameMode)
+            return _frameEdgeInset("right");
+        if (frameOnlyNoConnected)
+            return _frameGapMargin("right");
         const barInfo = getBarInfo();
         return barInfo.rightBar > 0 ? barInfo.rightBar : Theme.popupDistance;
     }
@@ -303,7 +460,7 @@ PanelWindow {
         return Theme.snap(screen.width - alignedWidth - barRight, dpr);
     }
 
-    function getContentY() {
+    function getAllocatedContentY() {
         if (!screen)
             return 0;
 
@@ -313,7 +470,11 @@ PanelWindow {
         const isTop = isTopCenter || popupPos === SettingsData.Position.Top || popupPos === SettingsData.Position.Left;
         if (isTop)
             return Theme.snap(barTop, dpr);
-        return Theme.snap(screen.height - alignedHeight - barBottom, dpr);
+        return Theme.snap(screen.height - allocatedAlignedHeight - barBottom, dpr);
+    }
+
+    function getContentY() {
+        return Theme.snap(getAllocatedContentY() + renderedContentOffsetY, dpr);
     }
 
     function getWindowLeftMargin() {
@@ -325,23 +486,107 @@ PanelWindow {
     function getWindowTopMargin() {
         if (!screen)
             return 0;
-        return Theme.snap(getContentY() - windowShadowPad, dpr);
+        return Theme.snap(getAllocatedContentY() - windowShadowPad, dpr);
+    }
+
+    function _swipeDismissTarget() {
+        return (content.swipeDismissDirection < 0 ? -1 : 1) * content.width;
+    }
+
+    function _frameEdgeSwipeDirection() {
+        const popupPos = SettingsData.notificationPopupPosition;
+        return (popupPos === SettingsData.Position.Left || popupPos === SettingsData.Position.Bottom) ? -1 : 1;
+    }
+
+    function _swipeDismissesTowardFrameEdge() {
+        return content.swipeDismissDirection === _frameEdgeSwipeDirection();
+    }
+
+    function popupChromeMotionActive() {
+        return popupChromeOpenProgress() < 1 || exiting || content.swipeActive || content.swipeDismissing || Math.abs(content.swipeOffset) > 0.5;
+    }
+
+    function popupLayoutReservesSlot() {
+        return !content.swipeDismissing;
+    }
+
+    function popupChromeReservesSlot() {
+        return !content.swipeDismissing;
+    }
+
+    function _chromeMotionOffset() {
+        return isCenterPosition ? tx.y : tx.x;
+    }
+
+    function _chromeCardTravel() {
+        return Math.max(1, isCenterPosition ? alignedHeight : alignedWidth);
+    }
+
+    function popupChromeOpenProgress() {
+        if (exiting || content.swipeDismissing)
+            return 1;
+        return Math.max(0, Math.min(1, 1 - Math.abs(_chromeMotionOffset()) / _chromeCardTravel()));
+    }
+
+    function popupChromeReleaseProgress() {
+        if (exiting) {
+            const exitRel = Math.max(0, Math.min(1, Math.abs(_chromeMotionOffset()) / _chromeCardTravel()));
+            if (content.swipeDismissing) {
+                const swipeRel = Math.max(0, Math.min(1, Math.abs(content.swipeOffset) / Math.max(1, content.swipeTravelDistance)));
+                return Math.max(exitRel, swipeRel);
+            }
+            return exitRel;
+        }
+        if (content.swipeDismissing)
+            return Math.max(0, Math.min(1, Math.abs(content.swipeOffset) / Math.max(1, content.swipeTravelDistance)));
+        if (content.swipeActive && content.swipeOffset * _frameEdgeSwipeDirection() > 0)
+            return Math.max(0, Math.min(1, Math.abs(content.swipeOffset) / Math.max(1, content.swipeTravelDistance)));
+        return 0;
+    }
+
+    function popupChromeFollowsCardMotion() {
+        return false;
+    }
+
+    function popupChromeMotionX() {
+        if (!popupChromeMotionActive() || isCenterPosition)
+            return 0;
+        const motion = content.swipeOffset + tx.x;
+        if (content.swipeDismissing && !_swipeDismissesTowardFrameEdge())
+            return exiting ? Theme.snap(tx.x, dpr) : 0;
+        if (content.swipeActive && motion * _frameEdgeSwipeDirection() < 0)
+            return 0;
+        return Theme.snap(motion, dpr);
+    }
+
+    function popupChromeMotionY() {
+        return popupChromeMotionActive() ? Theme.snap(tx.y, dpr) : 0;
     }
 
     readonly property bool screenValid: win.screen && !_isDestroying
     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: Theme.px(Math.max(0, implicitHeight - (windowShadowPad * 2)), dpr)
+    readonly property real alignedHeight: renderedAlignedHeight
+    onScreenYChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    onScreenChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    // Intentionally unconditional: Manager needs the signal when frame mode toggles off
+    onConnectedFrameModeChanged: popupChromeGeometryChanged()
+    onAlignedWidthChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
+    onAlignedHeightChanged: if (connectedFrameMode)
+        popupChromeGeometryChanged()
 
     Item {
         id: content
 
         x: Theme.snap(windowShadowPad, dpr)
-        y: Theme.snap(windowShadowPad, dpr)
+        y: Theme.snap(windowShadowPad + renderedContentOffsetY, dpr)
         width: alignedWidth
         height: alignedHeight
-        visible: !win._finalized
-        scale: cardHoverHandler.hovered ? 1.01 : 1.0
+        visible: !win._finalized && !chromeOnlyExit
+        scale: (!win.inlineHeightAnimating && cardHoverHandler.hovered) ? 1.01 : 1.0
         transformOrigin: Item.Center
 
         Behavior on scale {
@@ -352,15 +597,27 @@ PanelWindow {
         }
 
         property real swipeOffset: 0
-        readonly property real dismissThreshold: isCenterPosition ? height * 0.4 : width * 0.35
+        property real swipeDismissDirection: 1
+        property bool chromeOnlyExit: false
+        readonly property real dismissThreshold: width * 0.35
         readonly property real swipeFadeStartRatio: 0.75
-        readonly property real swipeTravelDistance: isCenterPosition ? height : width
+        readonly property real swipeTravelDistance: width
         readonly property real swipeFadeStartOffset: swipeTravelDistance * swipeFadeStartRatio
         readonly property real swipeFadeDistance: Math.max(1, swipeTravelDistance - swipeFadeStartOffset)
         readonly property bool swipeActive: swipeDragHandler.active
         property bool swipeDismissing: false
+        onSwipeDismissingChanged: {
+            if (!win.connectedFrameMode)
+                return;
+            win.popupHeightChanged();
+            win.popupChromeGeometryChanged();
+        }
+        onSwipeOffsetChanged: {
+            if (win.connectedFrameMode)
+                win.popupChromeGeometryChanged();
+        }
 
-        readonly property bool shadowsAllowed: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled && !BlurService.enabled
+        readonly property bool shadowsAllowed: win.popupWindowShadowActive
         readonly property var elevLevel: cardHoverHandler.hovered ? Theme.elevationLevel4 : Theme.elevationLevel3
         readonly property real cardInset: Theme.snap(4, win.dpr)
         readonly property real shadowRenderPadding: shadowsAllowed ? Theme.snap(Math.max(16, shadowBlurPx + Math.max(Math.abs(shadowOffsetX), Math.abs(shadowOffsetY)) + 8), win.dpr) : 0
@@ -370,21 +627,21 @@ PanelWindow {
 
         Behavior on shadowBlurPx {
             NumberAnimation {
-                duration: Theme.shortDuration
+                duration: win.inlineHeightAnimating ? win.inlineExpandDuration : Theme.shortDuration
                 easing.type: Theme.standardEasing
             }
         }
 
         Behavior on shadowOffsetX {
             NumberAnimation {
-                duration: Theme.shortDuration
+                duration: win.inlineHeightAnimating ? win.inlineExpandDuration : Theme.shortDuration
                 easing.type: Theme.standardEasing
             }
         }
 
         Behavior on shadowOffsetY {
             NumberAnimation {
-                duration: Theme.shortDuration
+                duration: win.inlineHeightAnimating ? win.inlineExpandDuration : Theme.shortDuration
                 easing.type: Theme.standardEasing
             }
         }
@@ -399,7 +656,7 @@ PanelWindow {
             shadowOffsetX: content.shadowOffsetX
             shadowOffsetY: content.shadowOffsetY
             shadowColor: content.shadowsAllowed && content.elevLevel ? Theme.elevationShadowColor(content.elevLevel) : "transparent"
-            shadowEnabled: !win._isDestroying && win.screenValid && content.shadowsAllowed
+            shadowEnabled: !win._isDestroying && win.screenValid && content.shadowsAllowed && !win.connectedFrameMode
             layer.textureSize: Qt.size(Math.round(width * win.dpr), Math.round(height * win.dpr))
             layer.textureMirroring: ShaderEffectSource.MirrorVertically
 
@@ -408,38 +665,42 @@ PanelWindow {
             sourceRect.y: content.shadowRenderPadding + content.cardInset
             sourceRect.width: Math.max(0, content.width - (content.cardInset * 2))
             sourceRect.height: Math.max(0, content.height - (content.cardInset * 2))
-            sourceRect.radius: Theme.cornerRadius
-            sourceRect.color: Theme.readableSurface
-            sourceRect.border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.outlineMedium
-            sourceRect.border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 1
+            sourceRect.radius: win.connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
+            sourceRect.color: win.connectedFrameMode ? Theme.floatingSurface : Theme.readableSurface
+            sourceRect.antialiasing: true
+            sourceRect.layer.enabled: false
+            sourceRect.layer.textureSize: Qt.size(0, 0)
+            sourceRect.border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.withAlpha(Theme.outline, 0.08)
+            sourceRect.border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 0
+        }
 
-            Rectangle {
-                x: bgShadowLayer.sourceRect.x
-                y: bgShadowLayer.sourceRect.y
-                width: bgShadowLayer.sourceRect.width
-                height: bgShadowLayer.sourceRect.height
-                radius: bgShadowLayer.sourceRect.radius
-                visible: notificationData && notificationData.urgency === NotificationUrgency.Critical
-                opacity: 1
-                clip: true
+        // Keep critical accent outside shadow rendering so connected mode still shows it.
+        Rectangle {
+            x: content.cardInset
+            y: content.cardInset
+            width: Math.max(0, content.width - content.cardInset * 2)
+            height: Math.max(0, content.height - content.cardInset * 2)
+            radius: win.connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
+            visible: win.notificationData && win.notificationData.urgency === NotificationUrgency.Critical
+            opacity: 1
+            clip: true
 
-                gradient: Gradient {
-                    orientation: Gradient.Horizontal
+            gradient: Gradient {
+                orientation: Gradient.Horizontal
 
-                    GradientStop {
-                        position: 0
-                        color: Theme.primary
-                    }
+                GradientStop {
+                    position: 0
+                    color: Theme.primary
+                }
 
-                    GradientStop {
-                        position: 0.02
-                        color: Theme.primary
-                    }
+                GradientStop {
+                    position: 0.02
+                    color: Theme.primary
+                }
 
-                    GradientStop {
-                        position: 0.021
-                        color: "transparent"
-                    }
+                GradientStop {
+                    position: 0.021
+                    color: "transparent"
                 }
             }
         }
@@ -447,11 +708,10 @@ PanelWindow {
         Rectangle {
             anchors.fill: parent
             anchors.margins: content.cardInset
-            radius: Theme.cornerRadius
-            antialiasing: true
+            radius: win.connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
             color: "transparent"
-            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-            border.width: BlurService.enabled ? BlurService.borderWidth : 1
+            border.color: win.connectedFrameMode ? "transparent" : BlurService.borderColor
+            border.width: win.connectedFrameMode ? 0 : BlurService.borderWidth
             z: 100
         }
 
@@ -482,10 +742,23 @@ PanelWindow {
             LayoutMirroring.enabled: I18n.isRtl
             LayoutMirroring.childrenInherit: true
 
+            StyledText {
+                id: expandedBodyMeasure
+
+                visible: false
+                width: Math.max(0, backgroundContainer.width - Theme.spacingL - (Theme.spacingL + Theme.notificationHoverRevealMargin) - popupIconSize - Theme.spacingM)
+                text: notificationData ? (notificationData.htmlBody || "") : ""
+                font.pixelSize: Theme.fontSizeSmall
+                elide: Text.ElideNone
+                horizontalAlignment: Text.AlignLeft
+                maximumLineCount: -1
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            }
+
             Item {
                 id: notificationContent
 
-                readonly property real expandedTextHeight: bodyText.contentHeight || 0
+                readonly property real expandedTextHeight: expandedBodyMeasure.contentHeight || bodyText.contentHeight || 0
                 readonly property real collapsedBodyHeight: Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2)
                 readonly property real effectiveCollapsedHeight: (SettingsData.notificationPopupPrivacyMode && !descriptionExpanded) ? win.privacyCollapsedContentHeight : win.collapsedContentHeight
                 readonly property real extraHeight: (descriptionExpanded && expandedTextHeight > collapsedBodyHeight + 2) ? (expandedTextHeight - collapsedBodyHeight) : 0
@@ -653,7 +926,7 @@ PanelWindow {
                                     win.descriptionExpanded = !win.descriptionExpanded;
                             }
 
-                            propagateComposedEvents: true
+                            propagateComposedEvents: false
                             onPressed: mouse => {
                                 if (parent.hoveredLink)
                                     mouse.accepted = false;
@@ -849,14 +1122,15 @@ PanelWindow {
         DragHandler {
             id: swipeDragHandler
             target: null
-            xAxis.enabled: !isCenterPosition
-            yAxis.enabled: isCenterPosition
+            xAxis.enabled: true
+            yAxis.enabled: false
 
             onActiveChanged: {
                 if (active || win.exiting || content.swipeDismissing)
                     return;
 
                 if (Math.abs(content.swipeOffset) > content.dismissThreshold) {
+                    content.swipeDismissDirection = content.swipeOffset < 0 ? -1 : 1;
                     content.swipeDismissing = true;
                     swipeDismissAnim.start();
                 } else {
@@ -865,18 +1139,10 @@ PanelWindow {
             }
 
             onTranslationChanged: {
-                if (win.exiting)
+                if (win.exiting || content.swipeDismissing)
                     return;
 
-                const raw = isCenterPosition ? translation.y : translation.x;
-                if (isTopCenter) {
-                    content.swipeOffset = Math.min(0, raw);
-                } else if (isBottomCenter) {
-                    content.swipeOffset = Math.max(0, raw);
-                } else {
-                    const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-                    content.swipeOffset = isLeft ? Math.min(0, raw) : Math.max(0, raw);
-                }
+                content.swipeOffset = translation.x;
             }
         }
 
@@ -889,7 +1155,7 @@ PanelWindow {
         }
 
         Behavior on opacity {
-            enabled: !content.swipeActive
+            enabled: !content.swipeActive && !content.swipeDismissing
             NumberAnimation {
                 duration: Theme.shortDuration
             }
@@ -907,20 +1173,28 @@ PanelWindow {
             id: swipeDismissAnim
             target: content
             property: "swipeOffset"
-            to: isTopCenter ? -content.height : isBottomCenter ? content.height : (SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom ? -content.width : content.width)
+            to: win._swipeDismissTarget()
             duration: Theme.notificationExitDuration
             easing.type: Easing.OutCubic
             onStopped: {
-                NotificationService.dismissNotification(notificationData);
-                win.forceExit();
+                const inwardConnectedExit = win.connectedFrameMode && !win.isCenterPosition && !win._swipeDismissesTowardFrameEdge();
+                if (inwardConnectedExit)
+                    content.chromeOnlyExit = true;
+                if (win.connectedFrameMode) {
+                    win.startExit();
+                    NotificationService.dismissNotification(notificationData);
+                } else {
+                    NotificationService.dismissNotification(notificationData);
+                    win.forceExit();
+                }
             }
         }
 
         transform: [
             Translate {
                 id: swipeTx
-                x: isCenterPosition ? 0 : content.swipeOffset
-                y: isCenterPosition ? content.swipeOffset : 0
+                x: content.swipeOffset
+                y: 0
             },
             Translate {
                 id: tx
@@ -928,9 +1202,17 @@ PanelWindow {
                     if (isCenterPosition)
                         return 0;
                     const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-                    return isLeft ? -Anims.slidePx : Anims.slidePx;
+                    return isLeft ? -entryTravel : entryTravel;
+                }
+                y: isTopCenter ? -entryTravel : isBottomCenter ? entryTravel : 0
+                onXChanged: {
+                    if (win.connectedFrameMode)
+                        win.popupChromeGeometryChanged();
+                }
+                onYChanged: {
+                    if (win.connectedFrameMode)
+                        win.popupChromeGeometryChanged();
                 }
-                y: isTopCenter ? -Anims.slidePx : isBottomCenter ? Anims.slidePx : 0
             }
         ]
     }
@@ -942,16 +1224,16 @@ PanelWindow {
         property: isCenterPosition ? "y" : "x"
         from: {
             if (isTopCenter)
-                return -Anims.slidePx;
+                return -entryTravel;
             if (isBottomCenter)
-                return Anims.slidePx;
+                return entryTravel;
             const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-            return isLeft ? -Anims.slidePx : Anims.slidePx;
+            return isLeft ? -entryTravel : entryTravel;
         }
         to: 0
         duration: Theme.notificationEnterDuration
         easing.type: Easing.BezierSpline
-        easing.bezierCurve: isCenterPosition ? Theme.expressiveCurves.standardDecel : Theme.expressiveCurves.emphasizedDecel
+        easing.bezierCurve: Theme.variantPopoutEnterCurve
         onStopped: {
             if (!win.exiting && !win._isDestroying) {
                 if (isCenterPosition) {
@@ -976,35 +1258,33 @@ PanelWindow {
             from: 0
             to: {
                 if (isTopCenter)
-                    return -Anims.slidePx;
+                    return -exitTravel;
                 if (isBottomCenter)
-                    return Anims.slidePx;
+                    return exitTravel;
                 const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
-                return isLeft ? -Anims.slidePx : Anims.slidePx;
+                return isLeft ? -exitTravel : exitTravel;
             }
             duration: Theme.notificationExitDuration
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
 
         NumberAnimation {
             target: content
             property: "opacity"
-            from: 1
-            to: 0
+            to: Theme.isDirectionalEffect ? 1 : 0
             duration: Theme.notificationExitDuration
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.standardAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
 
         NumberAnimation {
             target: content
             property: "scale"
-            from: 1
-            to: 0.98
+            to: Theme.isDirectionalEffect ? 1 : Theme.effectScaleCollapsed
             duration: Theme.notificationExitDuration
             easing.type: Easing.BezierSpline
-            easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
+            easing.bezierCurve: Theme.variantPopoutExitCurve
         }
     }
 

quickshell/Modules/Notifications/Popup/NotificationPopupManager.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import qs.Common
 import qs.Services
@@ -8,23 +10,51 @@ QtObject {
     property var modelData
     property int topMargin: 0
     readonly property bool compactMode: SettingsData.notificationCompactMode
+    readonly property bool notificationConnectedMode: SettingsData.frameEnabled && Theme.isConnectedEffect && SettingsData.isScreenInPreferences(manager.modelData, SettingsData.frameScreenPreferences)
+    readonly property bool closeGapNotifications: notificationConnectedMode && SettingsData.frameCloseGaps
+    readonly property string notifBarSide: {
+        const pos = SettingsData.notificationPopupPosition;
+        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";
+        }
+    }
     readonly property real cardPadding: compactMode ? Theme.notificationCardPaddingCompact : Theme.notificationCardPadding
     readonly property real popupIconSize: compactMode ? Theme.notificationIconSizeCompact : Theme.notificationIconSizeNormal
     readonly property real actionButtonHeight: compactMode ? 20 : 24
     readonly property real contentSpacing: compactMode ? Theme.spacingXS : Theme.spacingS
-    readonly property real popupSpacing: compactMode ? 0 : Theme.spacingXS
+    readonly property real popupSpacing: notificationConnectedMode ? 0 : (compactMode ? 0 : Theme.spacingXS)
     readonly property real collapsedContentHeight: Math.max(popupIconSize, Theme.fontSizeSmall * 1.2 + Theme.fontSizeMedium * 1.2 + Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2))
     readonly property int baseNotificationHeight: cardPadding * 2 + collapsedContentHeight + actionButtonHeight + contentSpacing + popupSpacing
     property var popupWindows: []
     property var destroyingWindows: new Set()
     property var pendingDestroys: []
     property int destroyDelayMs: 100
+    property bool _chromeSyncPending: false
+    property bool _syncingVisibleNotifications: false
+    readonly property real chromeOpenProgressThreshold: 0.10
+    readonly property real chromeReleaseTailStart: 0.90
+    readonly property real chromeReleaseDropProgress: 0.995
     property Component popupComponent
 
     popupComponent: Component {
         NotificationPopup {
             onExitFinished: manager._onPopupExitFinished(this)
+            onExitStarted: manager._onPopupExitStarted(this)
             onPopupHeightChanged: manager._onPopupHeightChanged(this)
+            onPopupChromeGeometryChanged: manager._onPopupChromeGeometryChanged(this)
         }
     }
 
@@ -108,6 +138,29 @@ QtObject {
         return p && p.status !== Component.Null && !p._isDestroying && p.hasValidData;
     }
 
+    function _layoutWindows() {
+        return popupWindows.filter(p => _isValidWindow(p) && p.notificationData?.popup && !p.exiting && (!p.popupLayoutReservesSlot || p.popupLayoutReservesSlot()));
+    }
+
+    function _chromeWindows() {
+        return popupWindows.filter(p => {
+            if (!p || p.status === Component.Null || !p.visible || p._finalized || !p.hasValidData)
+                return false;
+            if (!p.notificationData?.popup && !p.exiting)
+                return false;
+            if (p.exiting && p.notificationData?.removedByLimit && _layoutWindows().length > 0)
+                return true;
+            if (!p.exiting && p.popupChromeOpenProgress && p.popupChromeOpenProgress() < chromeOpenProgressThreshold)
+                return false;
+            // Keep the connected shell until the card is almost fully closed.
+            if (p.exiting && !p.swipeActive && p.popupChromeReleaseProgress) {
+                if (p.popupChromeReleaseProgress() > chromeReleaseDropProgress)
+                    return false;
+            }
+            return true;
+        });
+    }
+
     function _isFocusedScreen() {
         if (!SettingsData.notificationFocusedMonitor)
             return true;
@@ -116,27 +169,34 @@ QtObject {
     }
 
     function _sync(newWrappers) {
+        let needsReposition = false;
+        _syncingVisibleNotifications = true;
         for (const p of popupWindows.slice()) {
             if (!_isValidWindow(p) || p.exiting)
                 continue;
             if (p.notificationData && newWrappers.indexOf(p.notificationData) === -1) {
                 p.notificationData.removedByLimit = true;
                 p.notificationData.popup = false;
+                needsReposition = true;
             }
         }
         for (const w of newWrappers) {
-            if (w && !_hasWindowFor(w) && _isFocusedScreen())
-                _insertAtTop(w);
+            if (w && !_hasWindowFor(w) && _isFocusedScreen()) {
+                needsReposition = _insertAtTop(w, true) || needsReposition;
+            }
         }
+        _syncingVisibleNotifications = false;
+        if (needsReposition)
+            _repositionAll();
     }
 
     function _popupHeight(p) {
         return (p.alignedHeight || p.implicitHeight || (baseNotificationHeight - popupSpacing)) + popupSpacing;
     }
 
-    function _insertAtTop(wrapper) {
+    function _insertAtTop(wrapper, deferReposition) {
         if (!wrapper)
-            return;
+            return false;
         const notificationId = wrapper?.notification ? wrapper.notification.id : "";
         const win = popupComponent.createObject(null, {
             "notificationData": wrapper,
@@ -145,19 +205,21 @@ QtObject {
             "screen": manager.modelData
         });
         if (!win)
-            return;
+            return false;
         if (!win.hasValidData) {
             win.destroy();
-            return;
+            return false;
         }
         popupWindows.unshift(win);
-        _repositionAll();
+        if (!deferReposition)
+            _repositionAll();
         if (!sweeper.running)
             sweeper.start();
+        return true;
     }
 
     function _repositionAll() {
-        const active = popupWindows.filter(p => _isValidWindow(p) && p.notificationData?.popup && !p.exiting);
+        const active = _layoutWindows();
 
         const pinnedSlots = [];
         for (const p of active) {
@@ -181,6 +243,315 @@ QtObject {
             win.screenY = currentY;
             currentY += _popupHeight(win);
         }
+        _scheduleNotificationChromeSync();
+    }
+
+    function _scheduleNotificationChromeSync() {
+        if (_chromeSyncPending)
+            return;
+        _chromeSyncPending = true;
+        Qt.callLater(() => {
+            _chromeSyncPending = false;
+            _syncNotificationChromeState();
+        });
+    }
+
+    function _clamp01(value) {
+        return Math.max(0, Math.min(1, value));
+    }
+
+    function _clipRectFromBarSide(rect, visibleFraction) {
+        const fraction = _clamp01(visibleFraction);
+        const w = Math.max(0, rect.right - rect.x);
+        const h = Math.max(0, rect.bottom - rect.y);
+
+        if (notifBarSide === "right") {
+            rect.x = rect.right - w * fraction;
+        } else if (notifBarSide === "left") {
+            rect.right = rect.x + w * fraction;
+        } else if (notifBarSide === "bottom") {
+            rect.y = rect.bottom - h * fraction;
+        } else {
+            rect.bottom = rect.y + h * fraction;
+        }
+        return rect;
+    }
+
+    function _popupChromeVisibleFraction(p) {
+        if (p.popupChromeReleaseProgress) {
+            const rel = p.popupChromeReleaseProgress();
+            if (p.exiting)
+                return Math.max(0, 1 - rel);
+            if (rel > 0)
+                return p.swipeDismissTowardEdge ? Math.max(0, 1 - rel) : 1 - _chromeReleaseTailProgress(rel);
+        }
+        if (p.popupChromeOpenProgress)
+            return _clamp01(p.popupChromeOpenProgress());
+        return 1;
+    }
+
+    function _popupChromeRect(p, useMotionOffset) {
+        if (!p || !p.screen)
+            return null;
+        const x = p.getContentX ? p.getContentX() : 0;
+        const y = p.getContentY ? p.getContentY() : 0;
+        const w = p.alignedWidth || 0;
+        const h = Math.max(p.alignedHeight || 0, baseNotificationHeight);
+        if (w <= 0 || h <= 0)
+            return null;
+        const rect = {
+            x: x,
+            y: y,
+            right: x + w,
+            bottom: y + h
+        };
+
+        if (!useMotionOffset)
+            return rect;
+
+        if (p.popupChromeFollowsCardMotion && p.popupChromeFollowsCardMotion()) {
+            const motionX = p.popupChromeMotionX ? p.popupChromeMotionX() : 0;
+            const motionY = p.popupChromeMotionY ? p.popupChromeMotionY() : 0;
+            rect.x += motionX;
+            rect.y += motionY;
+            rect.right += motionX;
+            rect.bottom += motionY;
+            return rect;
+        }
+
+        return _clipRectFromBarSide(rect, _popupChromeVisibleFraction(p));
+    }
+
+    function _chromeReleaseTailProgress(rawProgress) {
+        const progress = Math.max(0, Math.min(1, rawProgress));
+        if (progress <= chromeReleaseTailStart)
+            return 0;
+        return Math.max(0, Math.min(1, (progress - chromeReleaseTailStart) / Math.max(0.001, 1 - chromeReleaseTailStart)));
+    }
+
+    function _popupChromeBoundsRect(p, trailing, useMotionOffset) {
+        const rect = _popupChromeRect(p, useMotionOffset);
+        if (!rect || p !== trailing || !p.popupChromeReleaseProgress)
+            return rect;
+
+        // Keep maxed-stack chrome anchored while a replacement tail exits.
+        if (p.exiting && p.notificationData?.removedByLimit && _layoutWindows().length > 0)
+            return rect;
+
+        const progress = _chromeReleaseTailProgress(p.popupChromeReleaseProgress());
+        if (progress <= 0)
+            return rect;
+
+        const anchorsTop = _stackAnchorsTop();
+        const h = Math.max(0, rect.bottom - rect.y);
+        const shrink = h * progress;
+        if (anchorsTop)
+            rect.bottom = Math.max(rect.y, rect.bottom - shrink);
+        else
+            rect.y = Math.min(rect.bottom, rect.y + shrink);
+        return rect;
+    }
+
+    function _stackAnchorsTop() {
+        const pos = SettingsData.notificationPopupPosition;
+        return pos === -1 || pos === SettingsData.Position.Top || pos === SettingsData.Position.Left;
+    }
+
+    function _frameEdgeInset(side) {
+        if (!manager.modelData)
+            return 0;
+        const edges = SettingsData.getActiveBarEdgesForScreen(manager.modelData);
+        const raw = edges.includes(side) ? SettingsData.frameBarSize : SettingsData.frameThickness;
+        const dpr = CompositorService.getScreenScale(manager.modelData);
+        return Math.max(0, Math.round(Theme.px(raw, dpr)));
+    }
+
+    function _closeGapChromeAnchorEdge(anchorsTop) {
+        if (!closeGapNotifications || !manager.modelData)
+            return null;
+        if (anchorsTop)
+            return _frameEdgeInset("top") + topMargin;
+        return manager.modelData.height - _frameEdgeInset("bottom") - topMargin;
+    }
+
+    function _trailingChromeWindow(candidates) {
+        const anchorsTop = _stackAnchorsTop();
+        let trailing = null;
+        let edge = anchorsTop ? -Infinity : Infinity;
+        for (const p of candidates) {
+            const rect = _popupChromeRect(p, false);
+            if (!rect)
+                continue;
+            const candidateEdge = anchorsTop ? rect.bottom : rect.y;
+            if ((anchorsTop && candidateEdge > edge) || (!anchorsTop && candidateEdge < edge)) {
+                edge = candidateEdge;
+                trailing = p;
+            }
+        }
+        return trailing;
+    }
+
+    function _chromeWindowReservesSlot(p, trailing) {
+        if (p === trailing)
+            return true;
+        return !p.popupChromeReservesSlot || p.popupChromeReservesSlot();
+    }
+
+    function _stackAnchoredChromeEdge(candidates) {
+        const anchorsTop = _stackAnchorsTop();
+        let edge = anchorsTop ? Infinity : -Infinity;
+        for (const p of candidates) {
+            const rect = _popupChromeRect(p, false);
+            if (!rect)
+                continue;
+            if (anchorsTop && rect.y < edge)
+                edge = rect.y;
+            if (!anchorsTop && rect.bottom > edge)
+                edge = rect.bottom;
+        }
+        if (edge === Infinity || edge === -Infinity)
+            return null;
+        return {
+            anchorsTop: anchorsTop,
+            edge: edge
+        };
+    }
+
+    function _filledMaxStackChromeEdge(candidates, stackEdge) {
+        const layoutWindows = _layoutWindows();
+        if (layoutWindows.length < NotificationService.maxVisibleNotifications)
+            return null;
+        const anchorsTop = _stackAnchorsTop();
+        const layoutAnchorEdge = _stackAnchoredChromeEdge(layoutWindows);
+        const anchorEdge = layoutAnchorEdge !== null ? layoutAnchorEdge : (stackEdge !== null ? stackEdge : _stackAnchoredChromeEdge(candidates));
+        if (anchorEdge === null)
+            return null;
+        let span = 0;
+        for (const p of layoutWindows) {
+            const rect = _popupChromeRect(p, false);
+            if (!rect)
+                continue;
+            span += Math.max(0, rect.bottom - rect.y);
+        }
+        if (span <= 0)
+            return null;
+        if (layoutWindows.length > 1)
+            span += popupSpacing * (layoutWindows.length - 1);
+        return {
+            anchorsTop: anchorsTop,
+            startEdge: anchorEdge.edge,
+            edge: anchorsTop ? anchorEdge.edge + span : anchorEdge.edge - span
+        };
+    }
+
+    function _syncNotificationChromeState() {
+        const screenName = manager.modelData?.name || "";
+        if (!screenName)
+            return;
+        if (!notificationConnectedMode) {
+            ConnectedModeState.clearNotificationState(screenName);
+            return;
+        }
+        const chromeCandidates = _chromeWindows();
+        if (chromeCandidates.length === 0) {
+            ConnectedModeState.clearNotificationState(screenName);
+            return;
+        }
+
+        const trailing = chromeCandidates.length > 1 ? _trailingChromeWindow(chromeCandidates) : null;
+        let active = chromeCandidates;
+        if (chromeCandidates.length > 1) {
+            const reserving = chromeCandidates.filter(p => _chromeWindowReservesSlot(p, trailing));
+            if (reserving.length > 0)
+                active = reserving;
+        }
+
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxXEnd = -Infinity;
+        let maxYEnd = -Infinity;
+        const useMotionOffset = active.length === 1 && active[0].popupChromeMotionActive && active[0].popupChromeMotionActive();
+        for (const p of active) {
+            const rect = _popupChromeBoundsRect(p, trailing, useMotionOffset);
+            if (!rect)
+                continue;
+            if (rect.x < minX)
+                minX = rect.x;
+            if (rect.y < minY)
+                minY = rect.y;
+            if (rect.right > maxXEnd)
+                maxXEnd = rect.right;
+            if (rect.bottom > maxYEnd)
+                maxYEnd = rect.bottom;
+        }
+        const stackEdge = _stackAnchoredChromeEdge(chromeCandidates);
+        if (stackEdge !== null) {
+            if (stackEdge.anchorsTop && stackEdge.edge < minY)
+                minY = stackEdge.edge;
+            if (!stackEdge.anchorsTop && stackEdge.edge > maxYEnd)
+                maxYEnd = stackEdge.edge;
+        }
+        const filledMaxStackEdge = _filledMaxStackChromeEdge(chromeCandidates, stackEdge);
+        if (filledMaxStackEdge !== null) {
+            if (filledMaxStackEdge.anchorsTop) {
+                minY = filledMaxStackEdge.startEdge;
+                maxYEnd = filledMaxStackEdge.edge;
+            } else {
+                minY = filledMaxStackEdge.edge;
+                maxYEnd = filledMaxStackEdge.startEdge;
+            }
+        }
+        const anchorsTop = stackEdge !== null ? stackEdge.anchorsTop : _stackAnchorsTop();
+        const closeGapAnchorEdge = _closeGapChromeAnchorEdge(anchorsTop);
+        if (closeGapAnchorEdge !== null) {
+            if (anchorsTop)
+                minY = closeGapAnchorEdge;
+            else
+                maxYEnd = closeGapAnchorEdge;
+        }
+        if (minX === Infinity || minY === Infinity || maxXEnd <= minX || maxYEnd <= minY) {
+            ConnectedModeState.clearNotificationState(screenName);
+            return;
+        }
+        ConnectedModeState.setNotificationState(screenName, {
+            visible: true,
+            barSide: notifBarSide,
+            bodyX: minX,
+            bodyY: minY,
+            bodyW: maxXEnd - minX,
+            bodyH: maxYEnd - minY,
+            omitStartConnector: _notificationOmitStartConnector(),
+            omitEndConnector: _notificationOmitEndConnector()
+        });
+    }
+
+    function _notificationOmitStartConnector() {
+        return closeGapNotifications && (SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Left);
+    }
+
+    function _notificationOmitEndConnector() {
+        return closeGapNotifications && (SettingsData.notificationPopupPosition === SettingsData.Position.Right || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom);
+    }
+
+    function _onPopupChromeGeometryChanged(p) {
+        if (!p || popupWindows.indexOf(p) === -1)
+            return;
+        _scheduleNotificationChromeSync();
+    }
+
+    // Coalesce resize repositioning; exit-path moves remain immediate.
+    property bool _repositionPending: false
+
+    function _queueReposition() {
+        if (_repositionPending)
+            return;
+        _repositionPending = true;
+        Qt.callLater(_flushReposition);
+    }
+
+    function _flushReposition() {
+        _repositionPending = false;
+        _repositionAll();
     }
 
     function _onPopupHeightChanged(p) {
@@ -188,6 +559,14 @@ QtObject {
             return;
         if (popupWindows.indexOf(p) === -1)
             return;
+        _queueReposition();
+    }
+
+    function _onPopupExitStarted(p) {
+        if (!p || popupWindows.indexOf(p) === -1)
+            return;
+        if (_syncingVisibleNotifications)
+            return;
         _repositionAll();
     }
 
@@ -227,8 +606,16 @@ QtObject {
         }
         popupWindows = [];
         destroyingWindows.clear();
+        _chromeSyncPending = false;
+        _syncNotificationChromeState();
     }
 
+    onNotificationConnectedModeChanged: _scheduleNotificationChromeSync()
+    onCloseGapNotificationsChanged: _scheduleNotificationChromeSync()
+    onNotifBarSideChanged: _scheduleNotificationChromeSync()
+    onModelDataChanged: _scheduleNotificationChromeSync()
+    onTopMarginChanged: _repositionAll()
+
     onPopupWindowsChanged: {
         if (popupWindows.length > 0 && !sweeper.running) {
             sweeper.start();

quickshell/Modules/Settings/DankBarTab.qml

@@ -27,6 +27,7 @@ Item {
         const pos = selectedBarConfig?.position ?? SettingsData.Position.Top;
         return pos === SettingsData.Position.Left || pos === SettingsData.Position.Right;
     }
+    readonly property bool connectedFrameModeActive: SettingsData.connectedFrameModeActive
 
     Timer {
         id: horizontalBarChangeDebounce
@@ -695,6 +696,8 @@ Item {
 
                 SettingsToggleRow {
                     visible: CompositorService.isNiri
+                    enabled: !SettingsData.frameEnabled
+                    opacity: SettingsData.frameEnabled ? 0.5 : 1.0
                     text: I18n.tr("Show on Overview")
                     checked: selectedBarConfig?.openOnOverview ?? false
                     onToggled: toggled => {
@@ -705,11 +708,18 @@ Item {
                 }
             }
 
+            SettingsControlledByFrame {
+                visible: SettingsData.frameEnabled
+                parentModal: dankBarTab.parentModal
+                settingLabel: I18n.tr("Bar spacing and size")
+                reason: I18n.tr("Managed by Frame")
+            }
+
             SettingsCard {
                 iconName: "space_bar"
                 title: I18n.tr("Spacing")
                 settingKey: "barSpacing"
-                visible: selectedBarConfig?.enabled
+                visible: (selectedBarConfig?.enabled ?? false) && !SettingsData.frameEnabled
 
                 SettingsSliderRow {
                     id: edgeSpacingSlider
@@ -860,6 +870,7 @@ Item {
 
                 SettingsSliderRow {
                     id: barTransparencySlider
+                    visible: !SettingsData.frameEnabled
                     text: I18n.tr("Bar Transparency")
                     value: (selectedBarConfig?.transparency ?? 1.0) * 100
                     minimum: 0
@@ -901,6 +912,13 @@ Item {
                         restoreMode: Binding.RestoreBinding
                     }
                 }
+
+                SettingsControlledByFrame {
+                    visible: SettingsData.frameEnabled
+                    parentModal: dankBarTab.parentModal
+                    settingLabel: I18n.tr("Bar transparency")
+                    reason: I18n.tr("Managed by Frame")
+                }
             }
 
             SettingsSliderCard {
@@ -961,8 +979,16 @@ Item {
                 expanded: false
                 visible: selectedBarConfig?.enabled
 
+                SettingsControlledByFrame {
+                    visible: SettingsData.frameEnabled
+                    parentModal: dankBarTab.parentModal
+                    settingLabel: I18n.tr("Bar corners and background")
+                    reason: I18n.tr("Managed by Frame")
+                }
+
                 SettingsToggleRow {
                     text: I18n.tr("Square Corners")
+                    visible: !SettingsData.frameEnabled
                     checked: selectedBarConfig?.squareCorners ?? false
                     onToggled: checked => SettingsData.updateBarConfig(selectedBarId, {
                             squareCorners: checked
@@ -971,6 +997,7 @@ Item {
 
                 SettingsToggleRow {
                     text: I18n.tr("No Background")
+                    visible: !SettingsData.frameEnabled
                     checked: selectedBarConfig?.noBackground ?? false
                     onToggled: checked => SettingsData.updateBarConfig(selectedBarId, {
                             noBackground: checked
@@ -1010,6 +1037,7 @@ Item {
 
                 SettingsToggleRow {
                     text: I18n.tr("Goth Corners")
+                    visible: !SettingsData.frameEnabled
                     checked: selectedBarConfig?.gothCornersEnabled ?? false
                     onToggled: checked => SettingsData.updateBarConfig(selectedBarId, {
                             gothCornersEnabled: checked
@@ -1345,6 +1373,13 @@ Item {
                 }
             }
 
+            SettingsControlledByFrame {
+                visible: dankBarTab.connectedFrameModeActive
+                parentModal: dankBarTab.parentModal
+                settingLabel: I18n.tr("Bar shadow, border, and corners")
+                reason: I18n.tr("Managed by Frame in Connected Mode")
+            }
+
             SettingsCard {
                 id: shadowCard
                 iconName: "layers"
@@ -1352,7 +1387,7 @@ Item {
                 settingKey: "barShadow"
                 collapsible: true
                 expanded: false
-                visible: selectedBarConfig?.enabled
+                visible: (selectedBarConfig?.enabled ?? false) && !dankBarTab.connectedFrameModeActive
 
                 readonly property bool shadowActive: (selectedBarConfig?.shadowIntensity ?? 0) > 0
                 readonly property bool isCustomColor: (selectedBarConfig?.shadowColorMode ?? "default") === "custom"

quickshell/Modules/Settings/DockTab.qml

@@ -8,6 +8,9 @@ import qs.Modules.Settings.Widgets
 Item {
     id: root
 
+    property var parentModal: null
+    readonly property bool connectedFrameModeActive: SettingsData.connectedFrameModeActive
+
     FileBrowserModal {
         id: dockLogoFileBrowser
         browserTitle: I18n.tr("Select Dock Launcher Logo")
@@ -604,6 +607,7 @@ Item {
 
                 SettingsSliderRow {
                     text: I18n.tr("Exclusive Zone Offset")
+                    visible: !root.connectedFrameModeActive
                     value: SettingsData.dockBottomGap
                     minimum: -100
                     maximum: 100
@@ -613,6 +617,7 @@ Item {
 
                 SettingsSliderRow {
                     text: I18n.tr("Margin")
+                    visible: !root.connectedFrameModeActive
                     value: SettingsData.dockMargin
                     minimum: 0
                     maximum: 100
@@ -621,11 +626,19 @@ Item {
                 }
             }
 
+            SettingsControlledByFrame {
+                visible: root.connectedFrameModeActive
+                parentModal: root.parentModal
+                settingLabel: I18n.tr("Dock spacing, transparency, and border")
+                reason: I18n.tr("Managed by Frame in Connected Mode")
+            }
+
             SettingsCard {
                 width: parent.width
                 iconName: "opacity"
                 title: I18n.tr("Transparency")
                 settingKey: "dockTransparency"
+                visible: !root.connectedFrameModeActive
 
                 SettingsSliderRow {
                     text: I18n.tr("Dock Transparency")
@@ -645,6 +658,7 @@ Item {
                 settingKey: "dockBorder"
                 collapsible: true
                 expanded: false
+                visible: !root.connectedFrameModeActive
 
                 SettingsToggleRow {
                     text: I18n.tr("Border")

quickshell/Modules/Settings/FrameTab.qml

@@ -0,0 +1,370 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.Settings.Widgets
+
+Item {
+    id: root
+
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
+    DankFlickable {
+        anchors.fill: parent
+        clip: true
+        contentHeight: mainColumn.height + Theme.spacingXL
+        contentWidth: width
+
+        Column {
+            id: mainColumn
+            topPadding: 4
+            width: Math.min(550, parent.width - Theme.spacingL * 2)
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Theme.spacingXL
+
+            SettingsCard {
+                width: parent.width
+                iconName: "frame_source"
+                title: I18n.tr("Frame")
+                settingKey: "frameEnabled"
+
+                SettingsToggleRow {
+                    settingKey: "frameEnable"
+                    tags: ["frame", "border", "outline", "display"]
+                    text: I18n.tr("Enable Frame")
+                    description: I18n.tr("Draw a connected picture-frame border around the entire display")
+                    checked: SettingsData.frameEnabled
+                    onToggled: checked => SettingsData.set("frameEnabled", checked)
+                }
+            }
+
+            SettingsCard {
+                width: parent.width
+                iconName: "tune"
+                title: I18n.tr("Mode")
+                settingKey: "frameMode"
+                visible: SettingsData.frameEnabled
+
+                SettingsButtonGroupRow {
+                    settingKey: "frameModeSelector"
+                    tags: ["frame", "mode", "connected", "separate", "popout"]
+                    text: I18n.tr("Surface Behavior")
+                    description: SettingsData.frameMode === "connected" ? I18n.tr("Surfaces emerge flush from the bar") : I18n.tr("Surfaces float independently of the frame")
+                    model: [I18n.tr("Separate"), I18n.tr("Connected")]
+                    currentIndex: SettingsData.frameMode === "connected" ? 1 : 0
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected)
+                            return;
+                        switch (index) {
+                        case 1:
+                            SettingsData.set("frameMode", "connected");
+                            break;
+                        default:
+                            SettingsData.set("frameMode", "separate");
+                            break;
+                        }
+                    }
+                }
+            }
+
+            SettingsCard {
+                width: parent.width
+                iconName: "border_outer"
+                title: I18n.tr("Border")
+                settingKey: "frameBorder"
+                collapsible: true
+                visible: SettingsData.frameEnabled
+
+                SettingsSliderRow {
+                    id: roundingSlider
+                    settingKey: "frameRounding"
+                    tags: ["frame", "border", "rounding", "radius", "corner"]
+                    text: I18n.tr("Border Radius")
+                    unit: "px"
+                    minimum: 0
+                    maximum: 100
+                    step: 1
+                    defaultValue: 23
+                    value: SettingsData.frameRounding
+                    onSliderDragFinished: v => SettingsData.set("frameRounding", v)
+
+                    Binding {
+                        target: roundingSlider
+                        property: "value"
+                        value: SettingsData.frameRounding
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: thicknessSlider
+                    settingKey: "frameThickness"
+                    tags: ["frame", "border", "thickness", "size", "width"]
+                    text: I18n.tr("Border Width")
+                    unit: "px"
+                    minimum: 2
+                    maximum: 100
+                    step: 1
+                    defaultValue: 16
+                    value: SettingsData.frameThickness
+                    onSliderDragFinished: v => SettingsData.set("frameThickness", v)
+
+                    Binding {
+                        target: thicknessSlider
+                        property: "value"
+                        value: SettingsData.frameThickness
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: barThicknessSlider
+                    settingKey: "frameBarSize"
+                    tags: ["frame", "bar", "thickness", "size", "height", "width"]
+                    text: I18n.tr("Size")
+                    description: I18n.tr("Horizontal and vertical bar thickness")
+                    unit: "px"
+                    minimum: 24
+                    maximum: 100
+                    step: 1
+                    defaultValue: 40
+                    value: SettingsData.frameBarSize
+                    onSliderDragFinished: v => SettingsData.set("frameBarSize", v)
+
+                    Binding {
+                        target: barThicknessSlider
+                        property: "value"
+                        value: SettingsData.frameBarSize
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: opacitySlider
+                    settingKey: "frameOpacity"
+                    tags: ["frame", "border", "surface", "popup", "opacity", "transparency"]
+                    text: I18n.tr("Surface Opacity")
+                    unit: "%"
+                    minimum: 0
+                    maximum: 100
+                    defaultValue: 100
+                    value: SettingsData.frameOpacity * 100
+                    onSliderDragFinished: v => SettingsData.set("frameOpacity", v / 100)
+
+                    Binding {
+                        target: opacitySlider
+                        property: "value"
+                        value: SettingsData.frameOpacity * 100
+                    }
+                }
+
+                SettingsToggleRow {
+                    id: frameBlurToggle
+                    settingKey: "frameBlurEnabled"
+                    tags: ["frame", "blur", "background", "glass", "transparency", "frosted"]
+                    text: I18n.tr("Frame Blur")
+                    description: !BlurService.available ? I18n.tr("Requires a newer version of Quickshell") : I18n.tr("Apply compositor blur behind the frame border")
+                    checked: SettingsData.frameBlurEnabled
+                    onToggled: checked => SettingsData.set("frameBlurEnabled", checked)
+                    enabled: BlurService.available && SettingsData.blurEnabled
+                    opacity: enabled ? 1.0 : 0.5
+                    visible: BlurService.available
+                }
+
+                Item {
+                    visible: BlurService.available && !SettingsData.blurEnabled
+                    width: parent.width
+                    height: blurToggleNote.height + Theme.spacingM * 2
+
+                    Row {
+                        id: blurToggleNote
+                        x: Theme.spacingM
+                        width: parent.width - Theme.spacingM * 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankIcon {
+                            name: "blur_on"
+                            size: Theme.fontSizeMedium
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Frame Blur follows Background Blur in Theme & Colors")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                            wrapMode: Text.WordWrap
+                            width: parent.width - Theme.fontSizeMedium - Theme.spacingS
+                        }
+                    }
+                }
+
+                SettingsButtonGroupRow {
+                    settingKey: "frameColor"
+                    tags: ["frame", "border", "color", "theme", "primary", "surface", "default"]
+                    text: I18n.tr("Border Color")
+                    model: [I18n.tr("Default"), I18n.tr("Primary"), I18n.tr("Surface"), I18n.tr("Custom")]
+                    currentIndex: {
+                        const fc = SettingsData.frameColor;
+                        if (!fc || fc === "default")
+                            return 0;
+                        switch (fc) {
+                        case "primary":
+                            return 1;
+                        case "surface":
+                            return 2;
+                        default:
+                            return 3;
+                        }
+                    }
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected)
+                            return;
+                        switch (index) {
+                        case 0:
+                            SettingsData.set("frameColor", "");
+                            break;
+                        case 1:
+                            SettingsData.set("frameColor", "primary");
+                            break;
+                        case 2:
+                            SettingsData.set("frameColor", "surface");
+                            break;
+                        case 3:
+                            const cur = SettingsData.frameColor;
+                            const isPreset = !cur || cur === "primary" || cur === "surface";
+                            if (isPreset)
+                                SettingsData.set("frameColor", "#2a2a2a");
+                            break;
+                        }
+                    }
+                }
+
+                Item {
+                    visible: {
+                        const fc = SettingsData.frameColor;
+                        return !!(fc && fc !== "primary" && fc !== "surface");
+                    }
+                    width: parent.width
+                    height: customColorRow.height + Theme.spacingM * 2
+
+                    Row {
+                        id: customColorRow
+                        width: parent.width - Theme.spacingM * 2
+                        x: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        StyledText {
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: I18n.tr("Custom Color")
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                        }
+
+                        Rectangle {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 32
+                            height: 32
+                            radius: 16
+                            color: SettingsData.effectiveFrameColor
+                            border.color: Theme.outline
+                            border.width: 1
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    PopoutService.colorPickerModal.selectedColor = SettingsData.effectiveFrameColor;
+                                    PopoutService.colorPickerModal.pickerTitle = I18n.tr("Frame Border Color");
+                                    PopoutService.colorPickerModal.onColorSelectedCallback = function (color) {
+                                        SettingsData.set("frameColor", color.toString());
+                                    };
+                                    PopoutService.colorPickerModal.show();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            SettingsCard {
+                width: parent.width
+                iconName: "blur_linear"
+                title: I18n.tr("Connected Options")
+                settingKey: "frameConnectedOptions"
+                collapsible: true
+                expanded: true
+                visible: SettingsData.frameEnabled && SettingsData.frameMode === "connected"
+
+                SettingsToggleRow {
+                    settingKey: "frameCloseGaps"
+                    tags: ["frame", "connected", "gap", "edge", "curves", "arcs", "expose", "popout", "notification"]
+                    text: I18n.tr("Expose the Arcs")
+                    description: I18n.tr("Reveal the arcs where surfaces meet the frame")
+                    checked: !SettingsData.frameCloseGaps
+                    onToggled: checked => SettingsData.set("frameCloseGaps", !checked)
+                }
+
+                SettingsButtonGroupRow {
+                    settingKey: "frameLauncherEmergeSide"
+                    tags: ["frame", "connected", "launcher", "modal", "emerge", "direction", "bottom", "top"]
+                    text: I18n.tr("Launcher Emerge Side")
+                    description: I18n.tr("Edge the launcher slides from")
+                    model: [I18n.tr("Bottom"), I18n.tr("Top")]
+                    currentIndex: SettingsData.frameLauncherEmergeSide === "top" ? 1 : 0
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected)
+                            return;
+                        SettingsData.set("frameLauncherEmergeSide", index === 1 ? "top" : "bottom");
+                    }
+                }
+
+                SettingsToggleRow {
+                    settingKey: "frameLauncherArcExtender"
+                    tags: ["frame", "connected", "launcher", "arc", "extender", "center"]
+                    text: I18n.tr("Arc Extender")
+                    description: I18n.tr("Use the extended surface for launcher content")
+                    checked: SettingsData.frameLauncherArcExtender
+                    onToggled: checked => SettingsData.set("frameLauncherArcExtender", checked)
+                }
+            }
+
+            SettingsCard {
+                width: parent.width
+                iconName: "toolbar"
+                title: I18n.tr("Integrations")
+                settingKey: "frameBarIntegration"
+                collapsible: true
+                expanded: true
+                visible: SettingsData.frameEnabled && CompositorService.isNiri
+
+                SettingsToggleRow {
+                    settingKey: "frameShowOnOverview"
+                    tags: ["frame", "overview", "show", "hide", "niri"]
+                    text: I18n.tr("Show on Overview")
+                    description: I18n.tr("Show during Niri overview")
+                    checked: SettingsData.frameShowOnOverview
+                    onToggled: checked => SettingsData.set("frameShowOnOverview", checked)
+                }
+            }
+
+            SettingsCard {
+                width: parent.width
+                iconName: "monitor"
+                title: I18n.tr("Display Assignment")
+                settingKey: "frameDisplays"
+                collapsible: true
+                expanded: false
+                visible: SettingsData.frameEnabled
+
+                SettingsDisplayPicker {
+                    displayPreferences: SettingsData.frameScreenPreferences
+                    onPreferencesChanged: prefs => SettingsData.set("frameScreenPreferences", prefs)
+                }
+            }
+        }
+    }
+}

quickshell/Modules/Settings/KeybindsTab.qml

@@ -344,11 +344,7 @@ Item {
                                         return I18n.tr("%1 exists but is not included in config. Custom keybinds will not work until this is fixed.").arg(bindsFile);
                                     if (warningBox.showWarning) {
                                         const count = warningBox.status.overriddenBy;
-                                        return I18n.ntr(
-                                            "%1 DMS bind may be overridden by config binds that come after the include.",
-                                            "%1 DMS binds may be overridden by config binds that come after the include.",
-                                            count
-                                        ).arg(count);
+                                        return I18n.ntr("%1 DMS bind may be overridden by config binds that come after the include.", "%1 DMS binds may be overridden by config binds that come after the include.", count).arg(count);
                                     }
                                     return "";
                                 }
@@ -543,13 +539,11 @@ Item {
 
                         StyledText {
                             text: {
-                            if (KeybindsService.loading)
-                                return I18n.tr("Shortcuts");
-                            const count = keybindsTab._filteredBinds.length;
-                            return count === 1
-                                ? I18n.tr("Shortcut (%1)").arg(count)
-                                : I18n.tr("Shortcuts (%1)").arg(count);
-                        }
+                                if (KeybindsService.loading)
+                                    return I18n.tr("Shortcuts");
+                                const count = keybindsTab._filteredBinds.length;
+                                return count === 1 ? I18n.tr("Shortcut (%1)").arg(count) : I18n.tr("Shortcuts (%1)").arg(count);
+                            }
                             font.pixelSize: Theme.fontSizeMedium
                             font.weight: Font.Medium
                             color: Theme.surfaceText
@@ -569,7 +563,7 @@ Item {
                             color: Theme.primary
                             anchors.verticalCenter: parent.verticalCenter
 
-                            RotationAnimation on rotation {
+                            RotationAnimator on rotation {
                                 from: 0
                                 to: 360
                                 duration: 1000

quickshell/Modules/Settings/NetworkTab.qml

@@ -36,36 +36,36 @@ Item {
 
     function normalizePinList(value) {
         if (Array.isArray(value))
-            return value.filter(v => v)
+            return value.filter(v => v);
         if (typeof value === "string" && value.length > 0)
-            return [value]
-        return []
+            return [value];
+        return [];
     }
 
     function getPinnedWifiNetworks() {
-        const pins = SettingsData.wifiNetworkPins || {}
-        return normalizePinList(pins["preferredWifi"])
+        const pins = SettingsData.wifiNetworkPins || {};
+        return normalizePinList(pins["preferredWifi"]);
     }
 
     function toggleWifiPin(ssid) {
-        const pins = JSON.parse(JSON.stringify(SettingsData.wifiNetworkPins || {}))
-        let pinnedList = normalizePinList(pins["preferredWifi"])
-        const pinIndex = pinnedList.indexOf(ssid)
+        const pins = JSON.parse(JSON.stringify(SettingsData.wifiNetworkPins || {}));
+        let pinnedList = normalizePinList(pins["preferredWifi"]);
+        const pinIndex = pinnedList.indexOf(ssid);
 
         if (pinIndex !== -1) {
-            pinnedList.splice(pinIndex, 1)
+            pinnedList.splice(pinIndex, 1);
         } else {
-            pinnedList.unshift(ssid)
+            pinnedList.unshift(ssid);
             if (pinnedList.length > maxPinnedWifiNetworks)
-                pinnedList = pinnedList.slice(0, maxPinnedWifiNetworks)
+                pinnedList = pinnedList.slice(0, maxPinnedWifiNetworks);
         }
 
         if (pinnedList.length > 0)
-            pins["preferredWifi"] = pinnedList
+            pins["preferredWifi"] = pinnedList;
         else
-            delete pins["preferredWifi"]
+            delete pins["preferredWifi"];
 
-        SettingsData.set("wifiNetworkPins", pins)
+        SettingsData.set("wifiNetworkPins", pins);
     }
 
     LazyLoader {
@@ -340,9 +340,7 @@ Item {
                                     if (devices.length === 0)
                                         return I18n.tr("No adapters");
                                     if (connected === 0)
-                                        return devices.length === 1
-                                            ? I18n.tr("%1 adapter, none connected").arg(devices.length)
-                                            : I18n.tr("%1 adapters, none connected").arg(devices.length);
+                                        return devices.length === 1 ? I18n.tr("%1 adapter, none connected").arg(devices.length) : I18n.tr("%1 adapters, none connected").arg(devices.length);
                                     return I18n.tr("%1 connected").arg(connected);
                                 }
                                 font.pixelSize: Theme.fontSizeSmall
@@ -658,16 +656,14 @@ Item {
                                                             SequentialAnimation {
                                                                 running: NetworkService.networkWiredInfoLoading
                                                                 loops: Animation.Infinite
-                                                                NumberAnimation {
+                                                                OpacityAnimator {
                                                                     target: wiredLoadIcon
-                                                                    property: "opacity"
                                                                     to: 0.3
                                                                     duration: 400
                                                                     easing.type: Easing.InOutQuad
                                                                 }
-                                                                NumberAnimation {
+                                                                OpacityAnimator {
                                                                     target: wiredLoadIcon
-                                                                    property: "opacity"
                                                                     to: 1.0
                                                                     duration: 400
                                                                     easing.type: Easing.InOutQuad
@@ -1046,16 +1042,14 @@ Item {
                                     SequentialAnimation {
                                         running: NetworkService.isScanning
                                         loops: Animation.Infinite
-                                        NumberAnimation {
+                                        OpacityAnimator {
                                             target: scanningIcon
-                                            property: "opacity"
                                             to: 0.3
                                             duration: 400
                                             easing.type: Easing.InOutQuad
                                         }
-                                        NumberAnimation {
+                                        OpacityAnimator {
                                             target: scanningIcon
-                                            property: "opacity"
                                             to: 1.0
                                             duration: 400
                                             easing.type: Easing.InOutQuad
@@ -1087,14 +1081,14 @@ Item {
 
                                     let sorted = [...networks];
                                     sorted.sort((a, b) => {
-                                        const aPinnedIndex = pinnedList.indexOf(a.ssid)
-                                        const bPinnedIndex = pinnedList.indexOf(b.ssid)
+                                        const aPinnedIndex = pinnedList.indexOf(a.ssid);
+                                        const bPinnedIndex = pinnedList.indexOf(b.ssid);
                                         if (aPinnedIndex !== -1 || bPinnedIndex !== -1) {
                                             if (aPinnedIndex === -1)
-                                                return 1
+                                                return 1;
                                             if (bPinnedIndex === -1)
-                                                return -1
-                                            return aPinnedIndex - bPinnedIndex
+                                                return -1;
+                                            return aPinnedIndex - bPinnedIndex;
                                         }
                                         if (a.ssid === ssid)
                                             return -1;
@@ -1297,7 +1291,7 @@ Item {
                                                     buttonSize: 28
                                                     iconColor: isPinned ? Theme.primary : Theme.surfaceVariantText
                                                     onClicked: {
-                                                        networkTab.toggleWifiPin(modelData.ssid)
+                                                        networkTab.toggleWifiPin(modelData.ssid);
                                                     }
                                                 }
 
@@ -1375,16 +1369,14 @@ Item {
                                                                 SequentialAnimation {
                                                                     running: NetworkService.networkInfoLoading
                                                                     loops: Animation.Infinite
-                                                                    NumberAnimation {
+                                                                    OpacityAnimator {
                                                                         target: wifiInfoLoadIcon
-                                                                        property: "opacity"
                                                                         to: 0.3
                                                                         duration: 400
                                                                         easing.type: Easing.InOutQuad
                                                                     }
-                                                                    NumberAnimation {
+                                                                    OpacityAnimator {
                                                                         target: wifiInfoLoadIcon
-                                                                        property: "opacity"
                                                                         to: 1.0
                                                                         duration: 400
                                                                         easing.type: Easing.InOutQuad
@@ -1866,16 +1858,14 @@ Item {
                                                     SequentialAnimation {
                                                         running: VPNService.configLoading
                                                         loops: Animation.Infinite
-                                                        NumberAnimation {
+                                                        OpacityAnimator {
                                                             target: vpnLoadIcon
-                                                            property: "opacity"
                                                             to: 0.3
                                                             duration: 400
                                                             easing.type: Easing.InOutQuad
                                                         }
-                                                        NumberAnimation {
+                                                        OpacityAnimator {
                                                             target: vpnLoadIcon
-                                                            property: "opacity"
                                                             to: 1.0
                                                             duration: 400
                                                             easing.type: Easing.InOutQuad
@@ -1984,7 +1974,9 @@ Item {
                                             checked: configData ? (configData.autoconnect || false) : false
                                             visible: !VPNService.configLoading && configData !== null
                                             onToggled: checked => {
-                                                VPNService.updateConfig(modelData.uuid, {autoconnect: checked});
+                                                VPNService.updateConfig(modelData.uuid, {
+                                                    autoconnect: checked
+                                                });
                                             }
                                         }
 

quickshell/Modules/Settings/PrinterTab.qml

@@ -458,7 +458,7 @@ Item {
                                     enabled: !CupsService.loadingDevices
                                     onClicked: CupsService.getDevices()
 
-                                    RotationAnimation on rotation {
+                                    RotationAnimator on rotation {
                                         running: CupsService.loadingDevices
                                         loops: Animation.Infinite
                                         from: 0
@@ -736,7 +736,7 @@ Item {
                                     enabled: !CupsService.loadingPPDs
                                     onClicked: CupsService.getPPDs()
 
-                                    RotationAnimation on rotation {
+                                    RotationAnimator on rotation {
                                         running: CupsService.loadingPPDs
                                         loops: Animation.Infinite
                                         from: 0

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -11,6 +11,8 @@ import qs.Modules.Settings.Widgets
 Item {
     id: themeColorsTab
 
+    property var parentModal: null
+    readonly property bool connectedFrameModeActive: SettingsData.connectedFrameModeActive
     property var cachedIconThemes: SettingsData.availableIconThemes
     property var cachedCursorThemes: SettingsData.availableCursorThemes
     property var cachedMatugenSchemes: Theme.availableMatugenSchemes.map(option => option.label)
@@ -1613,12 +1615,20 @@ Item {
                     }
                 }
 
+                SettingsControlledByFrame {
+                    visible: themeColorsTab.connectedFrameModeActive
+                    parentModal: themeColorsTab.parentModal
+                    settingLabel: I18n.tr("Surface Opacity")
+                    reason: I18n.tr("Managed by Frame in Connected Mode")
+                }
+
                 SettingsSliderRow {
                     tab: "theme"
-                    tags: ["popup", "transparency", "opacity", "modal"]
+                    tags: ["surface", "popup", "transparency", "opacity", "modal"]
                     settingKey: "popupTransparency"
-                    text: I18n.tr("Popup Transparency")
+                    text: I18n.tr("Surface Opacity")
                     description: I18n.tr("Controls opacity of all popouts, modals, and their content layers")
+                    visible: !themeColorsTab.connectedFrameModeActive
                     value: Math.round(SettingsData.popupTransparency * 100)
                     minimum: 0
                     maximum: 100
@@ -1837,7 +1847,7 @@ Item {
                     tags: ["blur", "background", "transparency", "glass", "frosted"]
                     settingKey: "blurEnabled"
                     text: I18n.tr("Background Blur")
-                    description: BlurService.available ? I18n.tr("Blur the background behind bars, popouts, modals, and notifications. Requires compositor support and configuration.") : I18n.tr("Requires a newer version of Quickshell")
+                    description: !BlurService.available ? I18n.tr("Requires a newer version of Quickshell") : I18n.tr("Blur the background behind bars, popouts, modals, and notifications. Requires compositor support and configuration.")
                     checked: SettingsData.blurEnabled ?? false
                     enabled: BlurService.available
                     onToggled: checked => SettingsData.set("blurEnabled", checked)
@@ -2240,12 +2250,20 @@ Item {
                 settingKey: "modalBackground"
                 iconName: "layers"
 
+                SettingsControlledByFrame {
+                    visible: themeColorsTab.connectedFrameModeActive
+                    parentModal: themeColorsTab.parentModal
+                    settingLabel: I18n.tr("Darken Modal Background")
+                    reason: I18n.tr("Managed by Frame in Connected Mode")
+                }
+
                 SettingsToggleRow {
                     tab: "theme"
                     tags: ["modal", "darken", "background", "overlay"]
                     settingKey: "modalDarkenBackground"
                     text: I18n.tr("Darken Modal Background")
                     description: I18n.tr("Show darkened overlay behind modal dialogs")
+                    visible: !themeColorsTab.connectedFrameModeActive
                     checked: SettingsData.modalDarkenBackground
                     onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
                 }

quickshell/Modules/Settings/TimeWeatherTab.qml

@@ -693,7 +693,7 @@ Item {
                                 onTriggered: refreshButton.isRefreshing = false
                             }
 
-                            NumberAnimation on rotation {
+                            RotationAnimator on rotation {
                                 running: refreshButton.isRefreshing
                                 from: 0
                                 to: 360

quickshell/Modules/Settings/TypographyMotionTab.qml

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

@@ -0,0 +1,79 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: root
+
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
+    property string settingLabel: ""
+    property string reason: ""
+    property var parentModal: null
+
+    width: parent?.width ?? 0
+    height: contentRow.implicitHeight + Theme.spacingM * 2
+    radius: Theme.cornerRadius
+    color: Theme.withAlpha(Theme.primary, 0.08)
+    border.color: Theme.withAlpha(Theme.primary, 0.18)
+    border.width: 1
+
+    Row {
+        id: contentRow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        spacing: Theme.spacingM
+
+        DankIcon {
+            name: "frame_source"
+            size: Theme.iconSize
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - Theme.iconSize - openButton.width - Theme.spacingM * 2
+            spacing: 2
+
+            StyledText {
+                text: root.settingLabel
+                font.pixelSize: Theme.fontSizeMedium
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                width: parent.width
+                wrapMode: Text.WordWrap
+            }
+
+            StyledText {
+                text: root.reason
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceVariantText
+                width: parent.width
+                wrapMode: Text.WordWrap
+                visible: root.reason !== ""
+            }
+        }
+
+        DankButton {
+            id: openButton
+            anchors.verticalCenter: parent.verticalCenter
+            text: I18n.tr("Open Frame")
+            backgroundColor: Theme.primary
+            textColor: Theme.primaryText
+            buttonHeight: 32
+            horizontalPadding: Theme.spacingM
+            onClicked: {
+                if (!root.parentModal)
+                    return;
+                root.parentModal.showWithTabName("frame");
+            }
+        }
+    }
+}

quickshell/Modules/Settings/Widgets/SettingsDisplayPicker.qml

@@ -83,7 +83,6 @@ Item {
                     description: modelData.width + "×" + modelData.height
                     checked: localChecked
                     onToggled: isChecked => {
-                        localChecked = isChecked;
                         var prefs = JSON.parse(JSON.stringify(root.displayPreferences));
                         if (!Array.isArray(prefs) || prefs.includes("all"))
                             prefs = [];
@@ -94,6 +93,11 @@ Item {
                                 model: modelData.model || ""
                             });
                         }
+                        if (prefs.length === 0) {
+                            localChecked = true;
+                            return;
+                        }
+                        localChecked = isChecked;
                         root.preferencesChanged(prefs);
                     }
                 }

quickshell/Modules/WorkspaceOverlays/HyprlandOverview.qml

@@ -48,244 +48,256 @@ Scope {
                     bottom: true
                 }
 
-            HyprlandFocusGrab {
-                id: grab
-                windows: [root]
-                active: false
-                property bool hasBeenActivated: false
-                onActiveChanged: {
-                    if (active) {
-                        hasBeenActivated = true
-                    }
-                }
-                onCleared: () => {
-                    if (hasBeenActivated && overviewScope.overviewOpen) {
-                        overviewScope.overviewOpen = false
-                    }
-                }
-            }
-
-            Connections {
-                target: overviewScope
-                function onOverviewOpenChanged() {
-                    if (overviewScope.overviewOpen) {
-                        grab.hasBeenActivated = false
-                        if (CompositorService.useHyprlandFocusGrab)
-                            delayedGrabTimer.start()
-                    } else {
-                        delayedGrabTimer.stop()
-                        grab.active = false
-                        grab.hasBeenActivated = false
-                    }
-                }
-            }
-
-            Connections {
-                target: root
-                function onMonitorIsFocusedChanged() {
-                    if (!CompositorService.useHyprlandFocusGrab)
-                        return;
-                    if (overviewScope.overviewOpen && root.monitorIsFocused && !grab.active) {
-                        grab.hasBeenActivated = false
-                        grab.active = true
-                    } else if (overviewScope.overviewOpen && !root.monitorIsFocused && grab.active) {
-                        grab.active = false
-                    }
-                }
-            }
-
-            Timer {
-                id: delayedGrabTimer
-                interval: 150
-                repeat: false
-                onTriggered: {
-                    if (CompositorService.useHyprlandFocusGrab && overviewScope.overviewOpen && root.monitorIsFocused) {
-                        grab.active = true
-                    }
-                }
-            }
-
-            Timer {
-                id: closeTimer
-                interval: Theme.expressiveDurations.expressiveDefaultSpatial + 120
-                onTriggered: {
-                    root.visible = false
-                }
-            }
-
-            Rectangle {
-                id: background
-                anchors.fill: parent
-                color: "black"
-                opacity: overviewScope.overviewOpen ? 0.5 : 0
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                    }
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: mouse => {
-                        const localPos = mapToItem(contentContainer, mouse.x, mouse.y)
-                        if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height) {
-                            overviewScope.overviewOpen = false
-                            closeTimer.restart()
+                HyprlandFocusGrab {
+                    id: grab
+                    windows: [root]
+                    active: false
+                    property bool hasBeenActivated: false
+                    onActiveChanged: {
+                        if (active) {
+                            hasBeenActivated = true;
                         }
                     }
-                }
-            }
-
-            Item {
-                id: contentContainer
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-                anchors.topMargin: 100
-                width: childrenRect.width
-                height: childrenRect.height
-
-                opacity: overviewScope.overviewOpen ? 1 : 0
-                transform: [scaleTransform, motionTransform]
-
-                Scale {
-                    id: scaleTransform
-                    origin.x: contentContainer.width / 2
-                    origin.y: contentContainer.height / 2
-                    xScale: overviewScope.overviewOpen ? 1 : 0.96
-                    yScale: overviewScope.overviewOpen ? 1 : 0.96
-
-                    Behavior on xScale {
-                        NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                        }
-                    }
-
-                    Behavior on yScale {
-                        NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
+                    onCleared: () => {
+                        if (hasBeenActivated && overviewScope.overviewOpen) {
+                            overviewScope.overviewOpen = false;
                         }
                     }
                 }
 
-                Translate {
-                    id: motionTransform
-                    x: 0
-                    y: overviewScope.overviewOpen ? 0 : Theme.spacingL
-
-                    Behavior on y {
-                        NumberAnimation {
-                            duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                        }
-                    }
-                }
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: overviewScope.overviewOpen ? Theme.expressiveCurves.expressiveDefaultSpatial : Theme.expressiveCurves.emphasized
-                    }
-                }
-
-                Loader {
-                    id: overviewLoader
-                    active: overviewScope.overviewOpen
-                    asynchronous: false
-
-                    sourceComponent: OverviewWidget {
-                        panelWindow: root
-                        overviewOpen: overviewScope.overviewOpen
-                    }
-                }
-            }
-
-            FocusScope {
-                id: focusScope
-                anchors.fill: parent
-                visible: overviewScope.overviewOpen
-                focus: overviewScope.overviewOpen && root.monitorIsFocused
-
-                Keys.onEscapePressed: event => {
-                    if (!root.monitorIsFocused) return
-                    overviewScope.overviewOpen = false
-                    closeTimer.restart()
-                    event.accepted = true
-                }
-
-                Keys.onPressed: event => {
-                    if (!root.monitorIsFocused) return
-
-                    if (event.key === Qt.Key_Left || event.key === Qt.Key_Right) {
-                        if (!overviewLoader.item) return
-
-                        const thisMonitorWorkspaceIds = overviewLoader.item.thisMonitorWorkspaceIds
-                        if (thisMonitorWorkspaceIds.length === 0) return
-
-                        const currentId = root.monitor.activeWorkspace?.id ?? thisMonitorWorkspaceIds[0]
-                        const currentIndex = thisMonitorWorkspaceIds.indexOf(currentId)
-
-                        let targetIndex
-                        if (event.key === Qt.Key_Left) {
-                            targetIndex = currentIndex - 1
-                            if (targetIndex < 0) targetIndex = thisMonitorWorkspaceIds.length - 1
+                Connections {
+                    target: overviewScope
+                    function onOverviewOpenChanged() {
+                        if (overviewScope.overviewOpen) {
+                            grab.hasBeenActivated = false;
+                            if (CompositorService.useHyprlandFocusGrab)
+                                delayedGrabTimer.start();
                         } else {
-                            targetIndex = currentIndex + 1
-                            if (targetIndex >= thisMonitorWorkspaceIds.length) targetIndex = 0
+                            delayedGrabTimer.stop();
+                            grab.active = false;
+                            grab.hasBeenActivated = false;
                         }
-
-                        const targetId = thisMonitorWorkspaceIds[targetIndex]
-                        Hyprland.dispatch("workspace " + targetId)
-                        event.accepted = true
-                    }
-                }
-
-                onVisibleChanged: {
-                    if (visible && overviewScope.overviewOpen && root.monitorIsFocused) {
-                        Qt.callLater(() => focusScope.forceActiveFocus())
                     }
                 }
 
                 Connections {
                     target: root
                     function onMonitorIsFocusedChanged() {
-                        if (root.monitorIsFocused && overviewScope.overviewOpen) {
-                            Qt.callLater(() => focusScope.forceActiveFocus())
+                        if (!CompositorService.useHyprlandFocusGrab)
+                            return;
+                        if (overviewScope.overviewOpen && root.monitorIsFocused && !grab.active) {
+                            grab.hasBeenActivated = false;
+                            grab.active = true;
+                        } else if (overviewScope.overviewOpen && !root.monitorIsFocused && grab.active) {
+                            grab.active = false;
+                        }
+                    }
+                }
+
+                Timer {
+                    id: delayedGrabTimer
+                    interval: 150
+                    repeat: false
+                    onTriggered: {
+                        if (CompositorService.useHyprlandFocusGrab && overviewScope.overviewOpen && root.monitorIsFocused) {
+                            grab.active = true;
+                        }
+                    }
+                }
+
+                Timer {
+                    id: closeTimer
+                    interval: Theme.expressiveDurations.expressiveDefaultSpatial + 120
+                    onTriggered: {
+                        root.visible = false;
+                    }
+                }
+
+                Rectangle {
+                    id: background
+                    anchors.fill: parent
+                    color: "black"
+                    opacity: overviewScope.overviewOpen ? 0.5 : 0
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: mouse => {
+                            const localPos = mapToItem(contentAnchor, mouse.x, mouse.y);
+                            if (localPos.x < 0 || localPos.x > contentAnchor.width || localPos.y < 0 || localPos.y > contentAnchor.height) {
+                                overviewScope.overviewOpen = false;
+                                closeTimer.restart();
+                            }
+                        }
+                    }
+                }
+
+                Item {
+                    id: contentAnchor
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: parent.top
+                    anchors.topMargin: 100
+                    width: contentContainer.width
+                    height: contentContainer.height
+
+                    Item {
+                        id: contentContainer
+                        width: childrenRect.width
+                        height: childrenRect.height
+                        transformOrigin: Item.Center
+
+                        opacity: overviewScope.overviewOpen ? 1 : 0
+                        scale: overviewScope.overviewOpen ? 1 : Theme.effectScaleCollapsed
+                        x: {
+                            if (overviewScope.overviewOpen)
+                                return 0;
+                            if (Theme.isDepthEffect)
+                                return Theme.effectAnimOffset * 0.25;
+                            return 0;
+                        }
+                        y: {
+                            if (overviewScope.overviewOpen)
+                                return 0;
+                            if (Theme.isDirectionalEffect)
+                                return -Math.max(contentContainer.height * 0.8, Theme.effectAnimOffset * 1.1);
+                            if (Theme.isDepthEffect)
+                                return Math.max(Theme.effectAnimOffset * 0.85, 28);
+                            return Theme.effectAnimOffset;
+                        }
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            }
+                        }
+
+                        Behavior on scale {
+                            NumberAnimation {
+                                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            }
+                        }
+
+                        Behavior on x {
+                            NumberAnimation {
+                                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            }
+                        }
+
+                        Behavior on y {
+                            NumberAnimation {
+                                duration: Theme.variantDuration(Theme.expressiveDurations.expressiveDefaultSpatial, overviewScope.overviewOpen)
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: overviewScope.overviewOpen ? Theme.variantModalEnterCurve : Theme.variantModalExitCurve
+                            }
+                        }
+
+                        Loader {
+                            id: overviewLoader
+                            active: overviewScope.overviewOpen
+                            asynchronous: false
+
+                            sourceComponent: OverviewWidget {
+                                panelWindow: root
+                                overviewOpen: overviewScope.overviewOpen
+                            }
+                        }
+                    }
+                }
+
+                FocusScope {
+                    id: focusScope
+                    anchors.fill: parent
+                    visible: overviewScope.overviewOpen
+                    focus: overviewScope.overviewOpen && root.monitorIsFocused
+
+                    Keys.onEscapePressed: event => {
+                        if (!root.monitorIsFocused)
+                            return;
+                        overviewScope.overviewOpen = false;
+                        closeTimer.restart();
+                        event.accepted = true;
+                    }
+
+                    Keys.onPressed: event => {
+                        if (!root.monitorIsFocused)
+                            return;
+                        if (event.key === Qt.Key_Left || event.key === Qt.Key_Right) {
+                            if (!overviewLoader.item)
+                                return;
+                            const thisMonitorWorkspaceIds = overviewLoader.item.thisMonitorWorkspaceIds;
+                            if (thisMonitorWorkspaceIds.length === 0)
+                                return;
+                            const currentId = root.monitor.activeWorkspace?.id ?? thisMonitorWorkspaceIds[0];
+                            const currentIndex = thisMonitorWorkspaceIds.indexOf(currentId);
+
+                            let targetIndex;
+                            if (event.key === Qt.Key_Left) {
+                                targetIndex = currentIndex - 1;
+                                if (targetIndex < 0)
+                                    targetIndex = thisMonitorWorkspaceIds.length - 1;
+                            } else {
+                                targetIndex = currentIndex + 1;
+                                if (targetIndex >= thisMonitorWorkspaceIds.length)
+                                    targetIndex = 0;
+                            }
+
+                            const targetId = thisMonitorWorkspaceIds[targetIndex];
+                            Hyprland.dispatch("workspace " + targetId);
+                            event.accepted = true;
+                        }
+                    }
+
+                    onVisibleChanged: {
+                        if (visible && overviewScope.overviewOpen && root.monitorIsFocused) {
+                            Qt.callLater(() => focusScope.forceActiveFocus());
+                        }
+                    }
+
+                    Connections {
+                        target: root
+                        function onMonitorIsFocusedChanged() {
+                            if (root.monitorIsFocused && overviewScope.overviewOpen) {
+                                Qt.callLater(() => focusScope.forceActiveFocus());
+                            }
+                        }
+                    }
+                }
+
+                onVisibleChanged: {
+                    if (visible && overviewScope.overviewOpen) {
+                        Qt.callLater(() => focusScope.forceActiveFocus());
+                    } else if (!visible) {
+                        grab.active = false;
+                    }
+                }
+
+                Connections {
+                    target: overviewScope
+                    function onOverviewOpenChanged() {
+                        if (overviewScope.overviewOpen) {
+                            closeTimer.stop();
+                            root.visible = true;
+                            Qt.callLater(() => focusScope.forceActiveFocus());
+                        } else {
+                            closeTimer.restart();
+                            grab.active = false;
                         }
                     }
                 }
             }
-
-            onVisibleChanged: {
-                if (visible && overviewScope.overviewOpen) {
-                    Qt.callLater(() => focusScope.forceActiveFocus())
-                } else if (!visible) {
-                    grab.active = false
-                }
-            }
-
-            Connections {
-                target: overviewScope
-                function onOverviewOpenChanged() {
-                    if (overviewScope.overviewOpen) {
-                        closeTimer.stop()
-                        root.visible = true
-                        Qt.callLater(() => focusScope.forceActiveFocus())
-                    } else {
-                        closeTimer.restart()
-                        grab.active = false
-                    }
-                }
-            }
-        }
         }
     }
 }

quickshell/Modules/WorkspaceOverlays/NiriOverviewOverlay.qml

@@ -141,6 +141,8 @@ Scope {
 
                 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: overlayWindow.shouldShowSpotlight && spotlightContainer.opacity > 0
                     blurX: spotlightContainer.x + spotlightContainer.width * (1 - s) * 0.5
@@ -228,8 +230,26 @@ Scope {
 
                 Item {
                     id: spotlightContainer
+
+                    // 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: Theme.snap((parent.height - height) / 2, overlayWindow.dpr)
+                    y: {
+                        if (!Theme.isConnectedEffect)
+                            return Theme.snap(_centerY, overlayWindow.dpr);
+                        return Theme.snap(overlayWindow.shouldShowSpotlight ? _connectedRestY : _connectedCollapsedY, overlayWindow.dpr);
+                    }
 
                     readonly property int baseWidth: {
                         switch (SettingsData.dankLauncherV2Size) {
@@ -260,8 +280,8 @@ Scope {
 
                     readonly property bool animatingOut: niriOverviewScope.isClosing && overlayWindow.isSpotlightScreen
 
-                    scale: overlayWindow.shouldShowSpotlight ? 1.0 : 0.96
-                    opacity: 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
 
@@ -270,6 +290,22 @@ Scope {
                     layer.textureSize: layer.enabled ? Qt.size(Math.round(width * overlayWindow.dpr), Math.round(height * overlayWindow.dpr)) : Qt.size(0, 0)
 
                     Behavior on scale {
+                        id: scaleAnimation
+                        enabled: !Theme.isConnectedEffect
+                        NumberAnimation {
+                            duration: Theme.expressiveDurations.fast
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
+                            onRunningChanged: {
+                                if (running || !spotlightContainer.animatingOut)
+                                    return;
+                                niriOverviewScope.resetState();
+                            }
+                        }
+                    }
+
+                    Behavior on opacity {
+                        enabled: !Theme.isConnectedEffect
                         NumberAnimation {
                             duration: Theme.expressiveDurations.fast
                             easing.type: Easing.BezierSpline
@@ -277,11 +313,20 @@ Scope {
                         }
                     }
 
-                    Behavior on opacity {
+                    // 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.expressiveDurations.fast
+                            duration: Theme.variantDuration(Theme.popoutAnimationDuration, overlayWindow.shouldShowSpotlight)
                             easing.type: Easing.BezierSpline
-                            easing.bezierCurve: spotlightContainer.visible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
+                            easing.bezierCurve: overlayWindow.shouldShowSpotlight ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
+                            onRunningChanged: {
+                                if (running || !spotlightContainer.animatingOut)
+                                    return;
+                                niriOverviewScope.resetState();
+                            }
                         }
                     }
 

quickshell/Modules/WorkspaceOverlays/OverviewWindow.qml

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