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/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();