(frame): Add blur support & cleanup

(frame): Multi-monitor support
Connected frames & defaults
2026-05-03 02:52:07 -04:00 · 2026-03-31 21:25:51 -04:00 · 2026-03-31 15:31:43 -04:00 · 2026-03-31 15:31:43 -04:00 · 2026-03-31 15:31:43 -04:00 · 2026-03-31 15:31:43 -04:00
37 changed files with 1129 additions and 179 deletions
--- a/core/internal/screenshot/compositor.go
+++ b/core/internal/screenshot/compositor.go
@@ -444,20 +444,21 @@ func GetFocusedMonitor() string {

 type outputInfo struct {
 	x, y      int32
+	scale     float64
 	transform int32
 }

-func getOutputInfo(outputName string) (*outputInfo, bool) {
+func getAllOutputInfos() map[string]*outputInfo {
 	display, err := client.Connect("")
 	if err != nil {
-		return nil, false
+		return nil
 	}
 	ctx := display.Context()
 	defer ctx.Close()

 	registry, err := display.GetRegistry()
 	if err != nil {
-		return nil, false
+		return nil
 	}

 	var outputManager *wlr_output_management.ZwlrOutputManagerV1
@@ -476,16 +477,17 @@ func getOutputInfo(outputName string) (*outputInfo, bool) {
 	})

 	if err := wlhelpers.Roundtrip(display, ctx); err != nil {
-		return nil, false
+		return nil
 	}

 	if outputManager == nil {
-		return nil, false
+		return nil
 	}

 	type headState struct {
 		name      string
 		x, y      int32
+		scale     float64
 		transform int32
 	}
 	heads := make(map[*wlr_output_management.ZwlrOutputHeadV1]*headState)
@@ -501,6 +503,9 @@ func getOutputInfo(outputName string) (*outputInfo, bool) {
 			state.x = pe.X
 			state.y = pe.Y
 		})
+		e.Head.SetScaleHandler(func(se wlr_output_management.ZwlrOutputHeadV1ScaleEvent) {
+			state.scale = se.Scale
+		})
 		e.Head.SetTransformHandler(func(te wlr_output_management.ZwlrOutputHeadV1TransformEvent) {
 			state.transform = te.Transform
 		})
@@ -511,21 +516,32 @@ func getOutputInfo(outputName string) (*outputInfo, bool) {

 	for !done {
 		if err := ctx.Dispatch(); err != nil {
-			return nil, false
+			return nil
 		}
 	}

+	result := make(map[string]*outputInfo, len(heads))
 	for _, state := range heads {
-		if state.name == outputName {
-			return &outputInfo{
-				x:         state.x,
-				y:         state.y,
-				transform: state.transform,
-			}, true
+		if state.name == "" {
+			continue
+		}
+		result[state.name] = &outputInfo{
+			x:         state.x,
+			y:         state.y,
+			scale:     state.scale,
+			transform: state.transform,
 		}
 	}
+	return result
+}

-	return nil, false
+func getOutputInfo(outputName string) (*outputInfo, bool) {
+	infos := getAllOutputInfos()
+	if infos == nil {
+		return nil, false
+	}
+	info, ok := infos[outputName]
+	return info, ok
 }

 func getDWLActiveWindow() (*WindowGeometry, error) {
--- a/core/internal/screenshot/screenshot.go
+++ b/core/internal/screenshot/screenshot.go
@@ -2,6 +2,7 @@ package screenshot

 import (
 	"fmt"
+	"math"
 	"sync"

 	"github.com/AvengeMedia/DankMaterialShell/core/internal/log"
@@ -304,22 +305,20 @@ func (s *Screenshoter) captureAllScreens() (*CaptureResult, error) {
 	if len(outputs) == 0 {
 		return nil, fmt.Errorf("no outputs available")
 	}
-
 	if len(outputs) == 1 {
 		return s.captureWholeOutput(outputs[0])
 	}

-	// Capture all outputs first to get actual buffer sizes
-	type capturedOutput struct {
-		output *WaylandOutput
-		result *CaptureResult
-		physX  int
-		physY  int
-	}
-	captured := make([]capturedOutput, 0, len(outputs))
+	wlrInfos := getAllOutputInfos()

-	var minX, minY, maxX, maxY int
-	first := true
+	type pendingOutput struct {
+		result *CaptureResult
+		logX   float64
+		logY   float64
+		scale  float64
+	}
+	var pending []pendingOutput
+	maxScale := 1.0

 	for _, output := range outputs {
 		result, err := s.captureWholeOutput(output)
@@ -328,50 +327,74 @@ func (s *Screenshoter) captureAllScreens() (*CaptureResult, error) {
 			continue
 		}

-		outX, outY := output.x, output.y
+		logX, logY := float64(output.x), float64(output.y)
 		scale := float64(output.scale)
+
 		switch DetectCompositor() {
 		case CompositorHyprland:
 			if hx, hy, _, _, ok := GetHyprlandMonitorGeometry(output.name); ok {
-				outX, outY = hx, hy
+				logX, logY = float64(hx), float64(hy)
 			}
-			if s := GetHyprlandMonitorScale(output.name); s > 0 {
-				scale = s
+			if hs := GetHyprlandMonitorScale(output.name); hs > 0 {
+				scale = hs
 			}
-		case CompositorDWL:
-			if info, ok := getOutputInfo(output.name); ok {
-				outX, outY = info.x, info.y
+		default:
+			if wlrInfos != nil {
+				if info, ok := wlrInfos[output.name]; ok {
+					logX, logY = float64(info.x), float64(info.y)
+					if info.scale > 0 {
+						scale = info.scale
+					}
+				}
 			}
 		}
+
 		if scale <= 0 {
 			scale = 1.0
 		}

-		physX := int(float64(outX) * scale)
-		physY := int(float64(outY) * scale)
+		pending = append(pending, pendingOutput{result: result, logX: logX, logY: logY, scale: scale})
+		if scale > maxScale {
+			maxScale = scale
+		}
+	}

-		captured = append(captured, capturedOutput{
-			output: output,
-			result: result,
-			physX:  physX,
-			physY:  physY,
-		})
+	if len(pending) == 0 {
+		return nil, fmt.Errorf("failed to capture any outputs")
+	}
+	if len(pending) == 1 {
+		return pending[0].result, nil
+	}

-		right := physX + result.Buffer.Width
-		bottom := physY + result.Buffer.Height
+	type layoutEntry struct {
+		result  *CaptureResult
+		canvasX int
+		canvasY int
+		canvasW int
+		canvasH int
+	}
+	entries := make([]layoutEntry, len(pending))
+	var minX, minY, maxX, maxY int

-		if first {
-			minX, minY = physX, physY
-			maxX, maxY = right, bottom
-			first = false
+	for i, p := range pending {
+		cx := int(math.Round(p.logX * maxScale))
+		cy := int(math.Round(p.logY * maxScale))
+		cw := int(math.Round(float64(p.result.Buffer.Width) * maxScale / p.scale))
+		ch := int(math.Round(float64(p.result.Buffer.Height) * maxScale / p.scale))
+
+		entries[i] = layoutEntry{result: p.result, canvasX: cx, canvasY: cy, canvasW: cw, canvasH: ch}
+
+		right := cx + cw
+		bottom := cy + ch
+		if i == 0 {
+			minX, minY, maxX, maxY = cx, cy, right, bottom
 			continue
 		}
-
-		if physX < minX {
-			minX = physX
+		if cx < minX {
+			minX = cx
 		}
-		if physY < minY {
-			minY = physY
+		if cy < minY {
+			minY = cy
 		}
 		if right > maxX {
 			maxX = right
@@ -381,35 +404,26 @@ func (s *Screenshoter) captureAllScreens() (*CaptureResult, error) {
 		}
 	}

-	if len(captured) == 0 {
-		return nil, fmt.Errorf("failed to capture any outputs")
-	}
-
-	if len(captured) == 1 {
-		return captured[0].result, nil
-	}
-
 	totalW := maxX - minX
 	totalH := maxY - minY
-
-	compositeStride := totalW * 4
-	composite, err := CreateShmBuffer(totalW, totalH, compositeStride)
+	composite, err := CreateShmBuffer(totalW, totalH, totalW*4)
 	if err != nil {
-		for _, c := range captured {
-			c.result.Buffer.Close()
+		for _, e := range entries {
+			e.result.Buffer.Close()
 		}
 		return nil, fmt.Errorf("create composite buffer: %w", err)
 	}
-
 	composite.Clear()

 	var format uint32
-	for _, c := range captured {
+	for _, e := range entries {
 		if format == 0 {
-			format = c.result.Format
+			format = e.result.Format
 		}
-		s.blitBuffer(composite, c.result.Buffer, c.physX-minX, c.physY-minY, c.result.YInverted)
-		c.result.Buffer.Close()
+		s.blitBufferScaled(composite, e.result.Buffer,
+			e.canvasX-minX, e.canvasY-minY, e.canvasW, e.canvasH,
+			e.result.YInverted)
+		e.result.Buffer.Close()
 	}

 	return &CaptureResult{
@@ -419,32 +433,44 @@ func (s *Screenshoter) captureAllScreens() (*CaptureResult, error) {
 	}, nil
 }

-func (s *Screenshoter) blitBuffer(dst, src *ShmBuffer, dstX, dstY int, yInverted bool) {
+func (s *Screenshoter) blitBufferScaled(dst, src *ShmBuffer, dstX, dstY, dstW, dstH int, yInverted bool) {
+	if dstW <= 0 || dstH <= 0 {
+		return
+	}
+
 	srcData := src.Data()
 	dstData := dst.Data()

-	for srcY := 0; srcY < src.Height; srcY++ {
-		actualSrcY := srcY
-		if yInverted {
-			actualSrcY = src.Height - 1 - srcY
-		}
-
-		dy := dstY + srcY
-		if dy < 0 || dy >= dst.Height {
+	for dy := 0; dy < dstH; dy++ {
+		canvasY := dstY + dy
+		if canvasY < 0 || canvasY >= dst.Height {
 			continue
 		}

-		srcRowOff := actualSrcY * src.Stride
-		dstRowOff := dy * dst.Stride
+		srcY := dy * src.Height / dstH
+		if yInverted {
+			srcY = src.Height - 1 - srcY
+		}
+		if srcY < 0 || srcY >= src.Height {
+			continue
+		}

-		for srcX := 0; srcX < src.Width; srcX++ {
-			dx := dstX + srcX
-			if dx < 0 || dx >= dst.Width {
+		srcRowOff := srcY * src.Stride
+		dstRowOff := canvasY * dst.Stride
+
+		for dx := 0; dx < dstW; dx++ {
+			canvasX := dstX + dx
+			if canvasX < 0 || canvasX >= dst.Width {
+				continue
+			}
+
+			srcX := dx * src.Width / dstW
+			if srcX >= src.Width {
 				continue
 			}

 			si := srcRowOff + srcX*4
-			di := dstRowOff + dx*4
+			di := dstRowOff + canvasX*4

 			if si+3 >= len(srcData) || di+3 >= len(dstData) {
 				continue
--- a/quickshell/Common/SettingsData.qml
+++ b/quickshell/Common/SettingsData.qml
@@ -14,7 +14,7 @@ import "settings/SettingsStore.js" as Store
 Singleton {
    id: root

-    readonly property int settingsConfigVersion: 5
+    readonly property int settingsConfigVersion: 11

    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"

@@ -186,6 +186,7 @@ Singleton {
    onPopoutElevationEnabledChanged: saveSettings()
    property bool barElevationEnabled: true
    onBarElevationEnabledChanged: saveSettings()
+
    property bool blurEnabled: false
    onBlurEnabledChanged: saveSettings()
    property string blurBorderColor: "outline"
@@ -198,6 +199,33 @@ Singleton {
    property bool blurredWallpaperLayer: false
    property bool blurWallpaperOnOverview: false

+    property bool frameEnabled: false
+    onFrameEnabledChanged: saveSettings()
+    property real frameThickness: 16
+    onFrameThicknessChanged: saveSettings()
+    property real frameRounding: 23
+    onFrameRoundingChanged: saveSettings()
+    property string frameColor: ""
+    onFrameColorChanged: saveSettings()
+    property real frameOpacity: 1.0
+    onFrameOpacityChanged: saveSettings()
+    property var frameScreenPreferences: ["all"]
+    onFrameScreenPreferencesChanged: saveSettings()
+    property real frameBarSize: 40
+    onFrameBarSizeChanged: saveSettings()
+    property bool frameShowOnOverview: false
+    onFrameShowOnOverviewChanged: saveSettings()
+    property bool frameBlurEnabled: true
+    onFrameBlurEnabledChanged: saveSettings()
+
+    readonly property color effectiveFrameColor: {
+        const fc = frameColor;
+        if (!fc || fc === "default") return Theme.surfaceContainer;
+        if (fc === "primary") return Theme.primary;
+        if (fc === "surface") return Theme.surface;
+        return fc;
+    }
+
    property bool showLauncherButton: true
    property bool showWorkspaceSwitcher: true
    property bool showFocusedWindow: true
@@ -1938,6 +1966,66 @@ Singleton {
        return filtered;
    }

+    function getFrameFilteredScreens() {
+        var prefs = frameScreenPreferences || ["all"];
+        if (!prefs || prefs.length === 0 || prefs.includes("all")) {
+            return Quickshell.screens;
+        }
+        return Quickshell.screens.filter(screen => isScreenInPreferences(screen, prefs));
+    }
+
+    function getActiveBarEdgeForScreen(screen) {
+        if (!screen) return "";
+        for (var i = 0; i < barConfigs.length; i++) {
+            var bc = barConfigs[i];
+            if (!bc.enabled) continue;
+            var prefs = bc.screenPreferences || ["all"];
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            switch (bc.position ?? 0) {
+            case SettingsData.Position.Top:    return "top";
+            case SettingsData.Position.Bottom: return "bottom";
+            case SettingsData.Position.Left:   return "left";
+            case SettingsData.Position.Right:  return "right";
+            }
+        }
+        return "";
+    }
+
+    function getActiveBarEdgesForScreen(screen) {
+        if (!screen) return [];
+        var edges = [];
+        for (var i = 0; i < barConfigs.length; i++) {
+            var bc = barConfigs[i];
+            if (!bc.enabled) continue;
+            var prefs = bc.screenPreferences || ["all"];
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            switch (bc.position ?? 0) {
+            case SettingsData.Position.Top:    edges.push("top"); break;
+            case SettingsData.Position.Bottom: edges.push("bottom"); break;
+            case SettingsData.Position.Left:   edges.push("left"); break;
+            case SettingsData.Position.Right:  edges.push("right"); break;
+            }
+        }
+        return edges;
+    }
+
+    function getActiveBarThicknessForScreen(screen) {
+        if (frameEnabled) return frameBarSize;
+        if (!screen) return frameThickness;
+        for (var i = 0; i < barConfigs.length; i++) {
+            var bc = barConfigs[i];
+            if (!bc.enabled) continue;
+            var prefs = bc.screenPreferences || ["all"];
+            if (!prefs.includes("all") && !isScreenInPreferences(screen, prefs)) continue;
+            const innerPadding = bc.innerPadding ?? 4;
+            const barT = Math.max(26 + innerPadding * 0.6, Theme.barHeight - 4 - (8 - innerPadding));
+            const spacing = bc.spacing ?? 4;
+            const bottomGap = bc.bottomGap ?? 0;
+            return barT + spacing + bottomGap;
+        }
+        return frameThickness;
+    }
+
    function sendTestNotifications() {
        NotificationService.dismissAllPopups();
        sendTestNotification(0);
--- a/quickshell/Common/settings/SettingsSpec.js
+++ b/quickshell/Common/settings/SettingsSpec.js
@@ -547,7 +547,17 @@ var SPEC = {
    clipboardEnterToPaste: { def: false },

    launcherPluginVisibility: { def: {} },
-    launcherPluginOrder: { def: [] }
+    launcherPluginOrder: { def: [] },
+
+    frameEnabled: { def: false },
+    frameThickness: { def: 16 },
+    frameRounding: { def: 23 },
+    frameColor: { def: "" },
+    frameOpacity: { def: 1.0 },
+    frameScreenPreferences: { def: ["all"] },
+    frameBarSize: { def: 40 },
+    frameShowOnOverview: { def: false },
+    frameBlurEnabled: { def: true }
 };

 function getValidKeys() {
--- a/quickshell/Common/settings/SettingsStore.js
+++ b/quickshell/Common/settings/SettingsStore.js
@@ -248,6 +248,10 @@ function migrateToVersion(obj, targetVersion) {
        settings.configVersion = 6;
    }

+    if (currentVersion < 11) {
+        settings.configVersion = 11;
+    }
+
    return settings;
 }

--- a/quickshell/DMSShell.qml
+++ b/quickshell/DMSShell.qml
@@ -21,6 +21,7 @@ import qs.Modules.OSD
 import qs.Modules.ProcessList
 import qs.Modules.DankBar
 import qs.Modules.DankBar.Popouts
+import qs.Modules.Frame
 import qs.Modules.WorkspaceOverlays
 import qs.Services

@@ -176,6 +177,8 @@ Item {
        }
    }

+    Frame {}
+
    Repeater {
        id: dankBarRepeater
        model: ScriptModel {
--- a/quickshell/Modals/Common/DankModal.qml
+++ b/quickshell/Modals/Common/DankModal.qml
@@ -31,7 +31,7 @@ Item {
    property real animationOffset: Theme.spacingL
    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
-    property color backgroundColor: Theme.surfaceContainer
+    property color backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
    property color borderColor: Theme.outlineMedium
    property real borderWidth: 0
    property real cornerRadius: Theme.cornerRadius
--- a/quickshell/Modals/DankColorPickerModal.qml
+++ b/quickshell/Modals/DankColorPickerModal.qml
@@ -132,7 +132,7 @@ DankModal {

    modalWidth: 680
    modalHeight: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 680
-    backgroundColor: Theme.surfaceContainer
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
    cornerRadius: Theme.cornerRadius
    borderColor: Theme.outlineMedium
    borderWidth: 1
--- a/quickshell/Modals/DankLauncherV2/LauncherContent.qml
+++ b/quickshell/Modals/DankLauncherV2/LauncherContent.qml
@@ -311,7 +311,7 @@ FocusScope {

    Item {
        anchors.fill: parent
-        visible: !editMode
+        visible: !editMode && !(root.parentModal?.isClosing ?? false)

        Item {
            id: footerBar
@@ -737,8 +737,6 @@ FocusScope {
            Item {
                width: parent.width
                height: parent.height - searchField.height - categoryRow.height - fileFilterRow.height - actionPanel.height - Theme.spacingXS * ((categoryRow.visible ? 1 : 0) + (fileFilterRow.visible ? 1 : 0) + 2)
-                opacity: root.parentModal?.isClosing ? 0 : 1
-
                ResultsList {
                    id: resultsList
                    anchors.fill: parent
--- a/quickshell/Modals/DankLauncherV2/ResultsList.qml
+++ b/quickshell/Modals/DankLauncherV2/ResultsList.qml
@@ -324,6 +324,8 @@ Item {
        height: 24
        z: 100
        visible: {
+            if (BlurService.enabled)
+                return false;
            if (mainListView.contentHeight <= mainListView.height)
                return false;
            var atBottom = mainListView.contentY >= mainListView.contentHeight - mainListView.height + mainListView.originY - 5;
@@ -449,7 +451,7 @@ Item {
                    case "apps":
                        return "apps";
                    default:
-                        return root.controller?.searchQuery?.length > 0 ? "search_off" : "search";
+                        return "search_off";
                    }
                }
            }
@@ -485,9 +487,9 @@ Item {
                    case "plugins":
                        return hasQuery ? I18n.tr("No plugin results") : I18n.tr("Browse or search plugins");
                    case "apps":
-                        return hasQuery ? I18n.tr("No apps found") : I18n.tr("Type to search apps");
+                        return I18n.tr("No apps found");
                    default:
-                        return hasQuery ? I18n.tr("No results found") : I18n.tr("Type to search");
+                        return I18n.tr("No results found");
                    }
                }
            }
--- a/quickshell/Modals/Settings/SettingsContent.qml
+++ b/quickshell/Modals/Settings/SettingsContent.qml
@@ -518,5 +518,20 @@ FocusScope {
                    Qt.callLater(() => item.forceActiveFocus());
            }
        }
+
+        Loader {
+            id: frameLoader
+            anchors.fill: parent
+            active: root.currentIndex === 33
+            visible: active
+            focus: active
+
+            sourceComponent: FrameTab {}
+
+            onActiveChanged: {
+                if (active && item)
+                    Qt.callLater(() => item.forceActiveFocus());
+            }
+        }
    }
 }
--- a/quickshell/Modals/Settings/SettingsSidebar.qml
+++ b/quickshell/Modals/Settings/SettingsSidebar.qml
@@ -120,6 +120,12 @@ Rectangle {
                    "text": I18n.tr("Widgets"),
                    "icon": "widgets",
                    "tabIndex": 22
+                },
+                {
+                    "id": "frame",
+                    "text": I18n.tr("Frame"),
+                    "icon": "frame_source",
+                    "tabIndex": 33
                }
            ]
        },
--- a/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
+++ b/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
@@ -133,7 +133,7 @@ DankPopout {
            QtObject {
                id: modalAdapter
                property bool spotlightOpen: appDrawerPopout.shouldBeVisible
-                property bool isClosing: false
+                readonly property bool isClosing: !appDrawerPopout.shouldBeVisible

                function hide() {
                    appDrawerPopout.close();
--- a/quickshell/Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml
+++ b/quickshell/Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml
@@ -34,7 +34,7 @@ PluginComponent {
            id: detailRoot
            implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
            radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)

            DankActionButton {
                anchors.top: parent.top
@@ -252,7 +252,7 @@ PluginComponent {
                                width: parent ? parent.width : 300
                                height: 50
                                radius: Theme.cornerRadius
-                                color: Theme.surfaceContainerHighest
+                                color: Theme.surfaceLight
                                border.width: 1
                                border.color: Theme.outlineLight
                                opacity: 1.0
--- a/quickshell/Modules/ControlCenter/Components/EditControls.qml
+++ b/quickshell/Modules/ControlCenter/Components/EditControls.qml
@@ -33,7 +33,7 @@ Row {
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

        background: Rectangle {
-            color: Theme.surfaceContainer
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
            border.color: Theme.primarySelected
            border.width: 0
            radius: Theme.cornerRadius
--- a/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml
@@ -207,9 +207,9 @@ Rectangle {
                    width: parent.width
                    height: 50
                    radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: deviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: modelData === AudioService.source ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.source ? 2 : 1

                    Row {
                        anchors.left: parent.left
--- a/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml
@@ -218,9 +218,9 @@ Rectangle {
                    width: parent.width
                    height: 50
                    radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: deviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: modelData === AudioService.sink ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.sink ? 2 : 1

                    DankRipple {
                        id: deviceRipple
@@ -397,9 +397,9 @@ Rectangle {
                    width: parent.width
                    height: 50
                    radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: Theme.surfaceLight
+                    border.color: modelData === AudioService.sink ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.sink ? 2 : 1

                    Row {
                        anchors.left: parent.left
--- a/quickshell/Modules/ControlCenter/Details/BatteryDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/BatteryDetail.qml
@@ -129,8 +129,9 @@ Rectangle {
                width: (parent.width - Theme.spacingM) / 2
                height: 64
                radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                border.width: 0
+                color: Theme.surfaceLight
+                border.color: Theme.outlineLight
+                border.width: 1

                Column {
                    anchors.centerIn: parent
@@ -164,8 +165,9 @@ Rectangle {
                width: (parent.width - Theme.spacingM) / 2
                height: 64
                radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                border.width: 0
+                color: Theme.surfaceLight
+                border.color: Theme.outlineLight
+                border.width: 1

                Column {
                    anchors.centerIn: parent
--- a/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml
+++ b/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml
@@ -153,7 +153,7 @@ Item {
        width: 320
        height: contentColumn.implicitHeight + Theme.spacingL * 2
        radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
        border.width: 0
        opacity: modalVisible ? 1 : 0
--- a/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml
@@ -229,7 +229,6 @@ Rectangle {
                    width: parent.width
                    height: 50
                    radius: Theme.cornerRadius
-                    border.width: 0

                    Component.onCompleted: {
                        if (!isConnected)
@@ -243,8 +242,8 @@ Rectangle {
                        if (isConnecting)
                            return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12);
                        if (deviceMouseArea.containsMouse)
-                            return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
-                        return Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency);
+                            return Theme.primaryHoverLight;
+                        return Theme.surfaceLight;
                    }

                    border.color: {
@@ -252,8 +251,9 @@ Rectangle {
                            return Theme.warning;
                        if (isConnected)
                            return Theme.primary;
-                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12);
+                        return Theme.outlineLight;
                    }
+                    border.width: (isConnecting || isConnected) ? 2 : 1

                    Row {
                        anchors.left: parent.left
@@ -490,9 +490,9 @@ Rectangle {
                    width: parent.width
                    height: 50
                    radius: Theme.cornerRadius
-                    color: availableMouseArea.containsMouse && isInteractive ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: availableMouseArea.containsMouse && isInteractive ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: Theme.outlineLight
+                    border.width: 1
                    opacity: isInteractive ? 1 : 0.6

                    Row {
--- a/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml
@@ -79,9 +79,9 @@ Rectangle {
                    width: parent.width
                    height: 80
                    radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData.mount === currentMountPath ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData.mount === currentMountPath ? 2 : 0
+                    color: Theme.surfaceLight
+                    border.color: modelData.mount === currentMountPath ? Theme.primary : Theme.outlineLight
+                    border.width: modelData.mount === currentMountPath ? 2 : 1

                    Row {
                        anchors.left: parent.left
--- a/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml
+++ b/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml
@@ -308,9 +308,9 @@ Rectangle {
                    width: parent.width
                    height: wiredContentRow.implicitHeight + Theme.spacingM * 2
                    radius: Theme.cornerRadius
-                    color: wiredNetworkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: Theme.primary
-                    border.width: 0
+                    color: wiredNetworkMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: isActive ? Theme.primary : Theme.outlineLight
+                    border.width: isActive ? 2 : 1

                    Row {
                        id: wiredContentRow
@@ -565,9 +565,9 @@ Rectangle {
            width: wifiContent.width
            height: wifiContentRow.implicitHeight + Theme.spacingM * 2
            radius: Theme.cornerRadius
-            color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-            border.color: wifiDelegate.isConnected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-            border.width: 0
+            color: networkMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+            border.color: wifiDelegate.isConnected ? Theme.primary : Theme.outlineLight
+            border.width: wifiDelegate.isConnected ? 2 : 1

            Row {
                id: wifiContentRow
--- a/quickshell/Modules/DankBar/BarCanvas.qml
+++ b/quickshell/Modules/DankBar/BarCanvas.qml
@@ -10,6 +10,8 @@ Item {
    required property var axis
    required property var barConfig

+    visible: !SettingsData.frameEnabled
+
    anchors.fill: parent

    anchors.left: parent.left
@@ -37,6 +39,8 @@ Item {
    }

    property real rt: {
+        if (SettingsData.frameEnabled)
+            return SettingsData.frameRounding;
        if (barConfig?.squareCorners ?? false)
            return 0;
        if (barWindow.hasMaximizedToplevel)
@@ -255,11 +259,12 @@ Item {
        h = h - wing;
        const r = wing;
        const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;

-        let d = `M ${cr} 0`;
-        d += ` L ${w - cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${w} ${cr}`;
+        let d = `M ${crE} 0`;
+        d += ` L ${w - crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${w} ${crE}`;
        if (r > 0) {
            d += ` L ${w} ${h + r}`;
            d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
@@ -273,9 +278,9 @@ Item {
            if (cr > 0)
                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
        }
-        d += ` L 0 ${cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        d += ` L 0 ${crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${crE} 0`;
        d += " Z";
        return d;
    }
@@ -285,11 +290,12 @@ Item {
        h = h - wing;
        const r = wing;
        const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;

-        let d = `M ${cr} ${fullH}`;
-        d += ` L ${w - cr} ${fullH}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${w} ${fullH - cr}`;
+        let d = `M ${crE} ${fullH}`;
+        d += ` L ${w - crE} ${fullH}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${w} ${fullH - crE}`;
        if (r > 0) {
            d += ` L ${w} 0`;
            d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
@@ -303,9 +309,9 @@ Item {
            if (cr > 0)
                d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
        }
-        d += ` L 0 ${fullH - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${fullH}`;
+        d += ` L 0 ${fullH - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${crE} ${fullH}`;
        d += " Z";
        return d;
    }
@@ -314,11 +320,12 @@ Item {
        w = w - wing;
        const r = wing;
        const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;

-        let d = `M 0 ${cr}`;
-        d += ` L 0 ${h - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${h}`;
+        let d = `M 0 ${crE}`;
+        d += ` L 0 ${h - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 ${crE} ${h}`;
        if (r > 0) {
            d += ` L ${w + r} ${h}`;
            d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
@@ -332,9 +339,9 @@ Item {
            if (cr > 0)
                d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
        }
-        d += ` L ${cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
+        d += ` L ${crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 0 0 ${crE}`;
        d += " Z";
        return d;
    }
@@ -344,11 +351,12 @@ Item {
        w = w - wing;
        const r = wing;
        const cr = rt;
+        const crE = SettingsData.frameEnabled ? 0 : cr;

-        let d = `M ${fullW} ${cr}`;
-        d += ` L ${fullW} ${h - cr}`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${fullW - cr} ${h}`;
+        let d = `M ${fullW} ${crE}`;
+        d += ` L ${fullW} ${h - crE}`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${fullW - crE} ${h}`;
        if (r > 0) {
            d += ` L 0 ${h}`;
            d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
@@ -362,9 +370,9 @@ Item {
            if (cr > 0)
                d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
        }
-        d += ` L ${fullW - cr} 0`;
-        if (cr > 0)
-            d += ` A ${cr} ${cr} 0 0 1 ${fullW} ${cr}`;
+        d += ` L ${fullW - crE} 0`;
+        if (crE > 0)
+            d += ` A ${crE} ${crE} 0 0 1 ${fullW} ${crE}`;
        d += " Z";
        return d;
    }
--- a/quickshell/Modules/DankBar/DankBarContent.qml
+++ b/quickshell/Modules/DankBar/DankBarContent.qml
@@ -23,6 +23,31 @@ Item {
    readonly property real innerPadding: barConfig?.innerPadding ?? 4
    readonly property real outlineThickness: (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0

+    readonly property real _frameLeftInset: {
+        if (!SettingsData.frameEnabled || barWindow.isVertical) return 0
+        return barWindow.hasAdjacentLeftBar
+            ? SettingsData.frameBarSize
+            : 0
+    }
+    readonly property real _frameRightInset: {
+        if (!SettingsData.frameEnabled || barWindow.isVertical) return 0
+        return barWindow.hasAdjacentRightBar
+            ? SettingsData.frameBarSize
+            : 0
+    }
+    readonly property real _frameTopInset: {
+        if (!SettingsData.frameEnabled || !barWindow.isVertical) return 0
+        return barWindow.hasAdjacentTopBar
+            ? SettingsData.frameThickness
+            : 0
+    }
+    readonly property real _frameBottomInset: {
+        if (!SettingsData.frameEnabled || !barWindow.isVertical) return 0
+        return barWindow.hasAdjacentBottomBar
+            ? SettingsData.frameThickness
+            : 0
+    }
+
    property alias hLeftSection: hLeftSection
    property alias hCenterSection: hCenterSection
    property alias hRightSection: hRightSection
@@ -31,10 +56,14 @@ Item {
    property alias vRightSection: vRightSection

    anchors.fill: parent
-    anchors.leftMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)
-    anchors.rightMargin: Math.max(Theme.spacingXS, innerPadding * 0.8)
-    anchors.topMargin: barWindow.isVertical ? (barWindow.hasAdjacentTopBar ? outlineThickness : Theme.spacingXS) : 0
-    anchors.bottomMargin: barWindow.isVertical ? (barWindow.hasAdjacentBottomBar ? outlineThickness : Theme.spacingXS) : 0
+    anchors.leftMargin:   Math.max(Theme.spacingXS, innerPadding * 0.8) + _frameLeftInset
+    anchors.rightMargin:  Math.max(Theme.spacingXS, innerPadding * 0.8) + _frameRightInset
+    anchors.topMargin:    (barWindow.isVertical
+        ? (barWindow.hasAdjacentTopBar ? outlineThickness : Theme.spacingXS)
+        : 0) + _frameTopInset
+    anchors.bottomMargin: (barWindow.isVertical
+        ? (barWindow.hasAdjacentBottomBar ? outlineThickness : Theme.spacingXS)
+        : 0) + _frameBottomInset
    clip: false

    property int componentMapRevision: 0
--- a/quickshell/Modules/DankBar/DankBarWindow.qml
+++ b/quickshell/Modules/DankBar/DankBarWindow.qml
@@ -133,6 +133,11 @@ PanelWindow {
            teardown();
            if (!BlurService.enabled || !BlurService.available)
                return;
+            // In frame mode, FrameWindow owns the blur region for the entire screen edge
+            // (including the bar area). The bar must not set its own competing blur region
+            // so that frameBlurEnabled acts as the single control for all blur in frame mode.
+            if (SettingsData.frameEnabled)
+                return;

            const widgets = barWindow._blurWidgetItems.filter(w => w && w.visible && w.width > 0 && w.height > 0);
            const hasBar = barHasTransparency;
@@ -187,6 +192,11 @@ PanelWindow {
            }
        }

+        Connections {
+            target: SettingsData
+            function onFrameEnabledChanged() { barBlur.rebuild(); }
+        }
+
        Connections {
            target: topBarSlide
            function onXChanged() {
@@ -238,7 +248,9 @@ PanelWindow {
    readonly property color _surfaceContainer: Theme.surfaceContainer
    readonly property string _barId: barConfig?.id ?? "default"
    property real _backgroundAlpha: barConfig?.transparency ?? 1.0
-    readonly property color _bgColor: Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
+    readonly property color _bgColor: SettingsData.frameEnabled
+        ? Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity)
+        : Theme.withAlpha(_surfaceContainer, _backgroundAlpha)

    function _updateBackgroundAlpha() {
        const live = SettingsData.barConfigs.find(c => c.id === _barId);
@@ -384,7 +396,7 @@ PanelWindow {
        shouldHideForWindows = filtered.length > 0;
    }

-    property real effectiveSpacing: hasMaximizedToplevel ? 0 : (barConfig?.spacing ?? 4)
+    property real effectiveSpacing: SettingsData.frameEnabled ? 0 : (hasMaximizedToplevel ? 0 : (barConfig?.spacing ?? 4))

    Behavior on effectiveSpacing {
        enabled: barWindow.visible
@@ -395,7 +407,12 @@ PanelWindow {
    }

    readonly property int notificationCount: NotificationService.notifications.length
-    readonly property real effectiveBarThickness: Theme.snap(Math.max(barWindow.widgetThickness + (barConfig?.innerPadding ?? 4) + 4, Theme.barHeight - 4 - (8 - (barConfig?.innerPadding ?? 4))), _dpr)
+    readonly property real effectiveBarThickness: SettingsData.frameEnabled
+        ? SettingsData.frameBarSize
+        : Theme.snap(Math.max(barWindow.widgetThickness + (barConfig?.innerPadding ?? 4) + 4, Theme.barHeight - 4 - (8 - (barConfig?.innerPadding ?? 4))), _dpr)
+    readonly property bool effectiveOpenOnOverview: SettingsData.frameEnabled
+        ? SettingsData.frameShowOnOverview
+        : (barConfig?.openOnOverview ?? false)
    readonly property real widgetThickness: Theme.snap(Math.max(20, 26 + (barConfig?.innerPadding ?? 4) * 0.6), _dpr)

    readonly property bool hasAdjacentTopBar: {
@@ -651,7 +668,7 @@ PanelWindow {

        readonly property int barThickness: Theme.px(barWindow.effectiveBarThickness + barWindow.effectiveSpacing, barWindow._dpr)

-        readonly property bool inOverviewWithShow: CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false)
+        readonly property bool inOverviewWithShow: CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview
        readonly property bool effectiveVisible: (barConfig?.visible ?? true) || inOverviewWithShow
        readonly property bool showing: effectiveVisible && (topBarCore.reveal || inOverviewWithShow || !topBarCore.autoHide)

@@ -792,7 +809,7 @@ PanelWindow {
        }

        property bool reveal: {
-            const inOverviewWithShow = CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false);
+            const inOverviewWithShow = CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview;
            if (inOverviewWithShow)
                return true;

@@ -889,7 +906,7 @@ PanelWindow {
                top: barWindow.isVertical ? parent.top : undefined
                bottom: barWindow.isVertical ? parent.bottom : undefined
            }
-            readonly property bool inOverview: CompositorService.isNiri && NiriService.inOverview && (barConfig?.openOnOverview ?? false)
+            readonly property bool inOverview: CompositorService.isNiri && NiriService.inOverview && barWindow.effectiveOpenOnOverview
            hoverEnabled: (barConfig?.autoHide ?? false) && !inOverview && !topBarCore.hasActivePopout
            acceptedButtons: Qt.NoButton
            enabled: (barConfig?.autoHide ?? false) && !inOverview
--- a/quickshell/Modules/Frame/Frame.qml
+++ b/quickshell/Modules/Frame/Frame.qml
@@ -0,0 +1,17 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Common
+
+Variants {
+    id: root
+
+    model: Quickshell.screens
+
+    FrameInstance {
+        required property var modelData
+
+        screen: modelData
+    }
+}
--- a/quickshell/Modules/Frame/FrameBorder.qml
+++ b/quickshell/Modules/Frame/FrameBorder.qml
@@ -0,0 +1,59 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+
+Item {
+    id: root
+
+    anchors.fill: parent
+
+    required property real cutoutTopInset
+    required property real cutoutBottomInset
+    required property real cutoutLeftInset
+    required property real cutoutRightInset
+    required property real cutoutRadius
+
+    Rectangle {
+        id: borderRect
+
+        anchors.fill: parent
+        // Bake frameOpacity into the color alpha rather than using the `opacity` property.
+        // Qt Quick can skip layer.effect processing on items with opacity < 1 as an
+        // optimization, causing the MultiEffect inverted mask to stop working and the
+        // Rectangle to render as a plain square at low opacity values.
+        color: Qt.rgba(SettingsData.effectiveFrameColor.r,
+                       SettingsData.effectiveFrameColor.g,
+                       SettingsData.effectiveFrameColor.b,
+                       SettingsData.frameOpacity)
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource:        cutoutMask
+            maskEnabled:       true
+            maskInverted:      true
+            maskThresholdMin:  0.5
+            maskSpreadAtMin:   1
+        }
+    }
+
+    Item {
+        id: cutoutMask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors {
+                fill:         parent
+                topMargin:    root.cutoutTopInset
+                bottomMargin: root.cutoutBottomInset
+                leftMargin:   root.cutoutLeftInset
+                rightMargin:  root.cutoutRightInset
+            }
+            radius: root.cutoutRadius
+        }
+    }
+}
--- a/quickshell/Modules/Frame/FrameExclusions.qml
+++ b/quickshell/Modules/Frame/FrameExclusions.qml
@@ -0,0 +1,87 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+
+Scope {
+    id: root
+
+    required property var screen
+
+    readonly property var barEdges: {
+        SettingsData.barConfigs; // force re-eval when bar configs change
+        return SettingsData.getActiveBarEdgesForScreen(screen);
+    }
+
+    // One thin invisible PanelWindow per edge.
+    // Skips any edge where a bar already provides its own exclusiveZone.
+
+    readonly property bool screenEnabled: SettingsData.frameEnabled && SettingsData.isScreenInPreferences(root.screen, SettingsData.frameScreenPreferences)
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("top")
+        sourceComponent: EdgeExclusion {
+            targetScreen:  root.screen
+            anchorTop:    true
+            anchorLeft:   true
+            anchorRight:  true
+        }
+    }
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("bottom")
+        sourceComponent: EdgeExclusion {
+            targetScreen:  root.screen
+            anchorBottom:  true
+            anchorLeft:    true
+            anchorRight:   true
+        }
+    }
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("left")
+        sourceComponent: EdgeExclusion {
+            targetScreen:  root.screen
+            anchorLeft:    true
+            anchorTop:     true
+            anchorBottom:  true
+        }
+    }
+
+    Loader {
+        active: root.screenEnabled && !root.barEdges.includes("right")
+        sourceComponent: EdgeExclusion {
+            targetScreen:  root.screen
+            anchorRight:   true
+            anchorTop:     true
+            anchorBottom:  true
+        }
+    }
+
+    component EdgeExclusion: PanelWindow {
+        required property var targetScreen
+
+        screen: targetScreen
+        property bool anchorTop:    false
+        property bool anchorBottom: false
+        property bool anchorLeft:   false
+        property bool anchorRight:  false
+
+        WlrLayershell.namespace: "dms:frame-exclusion"
+        WlrLayershell.layer: WlrLayer.Top
+        exclusiveZone: SettingsData.frameThickness
+        color: "transparent"
+        mask: Region {}
+        implicitWidth:  1
+        implicitHeight: 1
+
+        anchors {
+            top:    anchorTop
+            bottom: anchorBottom
+            left:   anchorLeft
+            right:  anchorRight
+        }
+    }
+}
--- a/quickshell/Modules/Frame/FrameInstance.qml
+++ b/quickshell/Modules/Frame/FrameInstance.qml
@@ -0,0 +1,18 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+
+Item {
+    id: root
+
+    required property var screen
+
+    FrameWindow {
+        targetScreen: root.screen
+    }
+
+    FrameExclusions {
+        screen: root.screen
+    }
+}
--- a/quickshell/Modules/Frame/FrameWindow.qml
+++ b/quickshell/Modules/Frame/FrameWindow.qml
@@ -0,0 +1,169 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+PanelWindow {
+    id: win
+
+    required property var targetScreen
+
+    screen: targetScreen
+    visible: true
+
+    WlrLayershell.namespace: "dms:frame"
+    WlrLayershell.layer: WlrLayer.Top
+    WlrLayershell.exclusionMode: ExclusionMode.Ignore
+
+    anchors {
+        top: true
+        bottom: true
+        left: true
+        right: true
+    }
+
+    color: "transparent"
+
+    // No input — pass everything through to apps and bar
+    mask: Region {}
+
+    readonly property var barEdges: {
+        SettingsData.barConfigs;
+        return SettingsData.getActiveBarEdgesForScreen(win.screen);
+    }
+
+    readonly property real _dpr: CompositorService.getScreenScale(win.screen)
+    readonly property bool _frameActive: SettingsData.frameEnabled
+        && SettingsData.isScreenInPreferences(win.screen, SettingsData.frameScreenPreferences)
+    readonly property int _windowRegionWidth:  win._regionInt(win.width)
+    readonly property int _windowRegionHeight: win._regionInt(win.height)
+
+    function _regionInt(value) {
+        return Math.max(0, Math.round(Theme.px(value, win._dpr)));
+    }
+
+    readonly property int cutoutTopInset:    win._regionInt(barEdges.includes("top")    ? SettingsData.frameBarSize : SettingsData.frameThickness)
+    readonly property int cutoutBottomInset: win._regionInt(barEdges.includes("bottom") ? SettingsData.frameBarSize : SettingsData.frameThickness)
+    readonly property int cutoutLeftInset:   win._regionInt(barEdges.includes("left")   ? SettingsData.frameBarSize : SettingsData.frameThickness)
+    readonly property int cutoutRightInset:  win._regionInt(barEdges.includes("right")  ? SettingsData.frameBarSize : SettingsData.frameThickness)
+    readonly property int cutoutWidth:  Math.max(0, win._windowRegionWidth - win.cutoutLeftInset - win.cutoutRightInset)
+    readonly property int cutoutHeight: Math.max(0, win._windowRegionHeight - win.cutoutTopInset - win.cutoutBottomInset)
+    readonly property int cutoutRadius: {
+        const requested = win._regionInt(SettingsData.frameRounding);
+        const maxRadius = Math.floor(Math.min(win.cutoutWidth, win.cutoutHeight) / 2);
+        return Math.max(0, Math.min(requested, maxRadius));
+    }
+
+    // Slightly expand the subtractive blur cutout at very low opacity levels
+    readonly property int _blurCutoutCompensation: SettingsData.frameOpacity <= 0.2 ? 1 : 0
+    readonly property int _blurCutoutLeft: Math.max(0, win.cutoutLeftInset - win._blurCutoutCompensation)
+    readonly property int _blurCutoutTop: Math.max(0, win.cutoutTopInset - win._blurCutoutCompensation)
+    readonly property int _blurCutoutRight: Math.min(win._windowRegionWidth, win._windowRegionWidth - win.cutoutRightInset + win._blurCutoutCompensation)
+    readonly property int _blurCutoutBottom: Math.min(win._windowRegionHeight, win._windowRegionHeight - win.cutoutBottomInset + win._blurCutoutCompensation)
+    readonly property int _blurCutoutRadius: {
+        const requested = win.cutoutRadius + win._blurCutoutCompensation;
+        const maxRadius = Math.floor(Math.min(_blurCutout.width, _blurCutout.height) / 2);
+        return Math.max(0, Math.min(requested, maxRadius));
+    }
+
+    // Must stay visible so Region.item can resolve scene coordinates.
+    Item {
+        id: _blurCutout
+        x: win._blurCutoutLeft
+        y: win._blurCutoutTop
+        width: Math.max(0, win._blurCutoutRight - win._blurCutoutLeft)
+        height: Math.max(0, win._blurCutoutBottom - win._blurCutoutTop)
+    }
+
+    property var _frameBlurRegion: null
+
+    function _buildBlur() {
+        _teardownBlur();
+        // Follow the global blur toggle
+        if (!BlurService.enabled || !SettingsData.frameBlurEnabled || !win._frameActive || !win.visible)
+            return;
+        try {
+            const region = Qt.createQmlObject(
+                'import QtQuick; import Quickshell; Region {' +
+                '  property Item cutoutItem;' +
+                '  property int cutoutRadius: 0;' +
+                '  Region {' +
+                '    item: cutoutItem;' +
+                '    intersection: Intersection.Subtract;' +
+                '    radius: cutoutRadius;' +
+                '  }' +
+                '}',
+                win, "FrameBlurRegion");
+
+            region.x = Qt.binding(() => 0);
+            region.y = Qt.binding(() => 0);
+            region.width = Qt.binding(() => win._windowRegionWidth);
+            region.height = Qt.binding(() => win._windowRegionHeight);
+            region.cutoutItem = _blurCutout;
+            region.cutoutRadius = Qt.binding(() => win._blurCutoutRadius);
+
+            win.BackgroundEffect.blurRegion = region;
+            win._frameBlurRegion = region;
+        } catch (e) {
+            console.warn("FrameWindow: Failed to create blur region:", e);
+        }
+    }
+
+    function _teardownBlur() {
+        if (!win._frameBlurRegion)
+            return;
+        try {
+            win.BackgroundEffect.blurRegion = null;
+        } catch (e) {}
+        win._frameBlurRegion.destroy();
+        win._frameBlurRegion = null;
+    }
+
+    Timer {
+        id: _blurRebuildTimer
+        interval: 1
+        onTriggered: win._buildBlur()
+    }
+
+    Connections {
+        target: SettingsData
+        function onFrameBlurEnabledChanged()  { _blurRebuildTimer.restart(); }
+        function onFrameEnabledChanged()      { _blurRebuildTimer.restart(); }
+        function onFrameThicknessChanged()    { _blurRebuildTimer.restart(); }
+        function onFrameBarSizeChanged()      { _blurRebuildTimer.restart(); }
+        function onFrameOpacityChanged()      { _blurRebuildTimer.restart(); }
+        function onFrameRoundingChanged()     { _blurRebuildTimer.restart(); }
+        function onFrameScreenPreferencesChanged() { _blurRebuildTimer.restart(); }
+        function onBarConfigsChanged()        { _blurRebuildTimer.restart(); }
+    }
+
+    Connections {
+        target: BlurService
+        function onEnabledChanged() { _blurRebuildTimer.restart(); }
+    }
+
+    onVisibleChanged: {
+        if (visible) {
+            win._frameBlurRegion = null;
+            _blurRebuildTimer.restart();
+        } else {
+            _teardownBlur();
+        }
+    }
+
+    Component.onCompleted: Qt.callLater(() => win._buildBlur())
+    Component.onDestruction: win._teardownBlur()
+
+    FrameBorder {
+        anchors.fill: parent
+        visible: win._frameActive
+        cutoutTopInset: win.cutoutTopInset
+        cutoutBottomInset: win.cutoutBottomInset
+        cutoutLeftInset: win.cutoutLeftInset
+        cutoutRightInset: win.cutoutRightInset
+        cutoutRadius: win.cutoutRadius
+    }
+}
--- a/quickshell/Modules/Settings/DankBarTab.qml
+++ b/quickshell/Modules/Settings/DankBarTab.qml
@@ -693,6 +693,8 @@ Item {

                SettingsToggleRow {
                    visible: CompositorService.isNiri
+                    enabled: !SettingsData.frameEnabled
+                    opacity: SettingsData.frameEnabled ? 0.5 : 1.0
                    text: I18n.tr("Show on Overview")
                    checked: selectedBarConfig?.openOnOverview ?? false
                    onToggled: toggled => {
@@ -798,11 +800,42 @@ Item {
                }
            }

+            Item {
+                visible: SettingsData.frameEnabled
+                width: parent.width
+                implicitHeight: frameNote.implicitHeight + Theme.spacingS * 2
+
+                Row {
+                    id: frameNote
+                    x: Theme.spacingM
+                    width: parent.width - Theme.spacingM * 2
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    DankIcon {
+                        name: "frame_source"
+                        size: Theme.fontSizeMedium
+                        color: Theme.primary
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Spacing and size are managed by Frame mode")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                        width: parent.width - Theme.fontSizeMedium - Theme.spacingS
+                    }
+                }
+            }
+
            SettingsCard {
                iconName: "space_bar"
                title: I18n.tr("Spacing")
                settingKey: "barSpacing"
                visible: selectedBarConfig?.enabled
+                enabled: !SettingsData.frameEnabled
+                opacity: SettingsData.frameEnabled ? 0.5 : 1.0

                SettingsSliderRow {
                    id: edgeSpacingSlider
@@ -1003,6 +1036,8 @@ Item {

                SettingsSliderRow {
                    id: barTransparencySlider
+                    enabled: !SettingsData.frameEnabled
+                    opacity: SettingsData.frameEnabled ? 0.5 : 1.0
                    text: I18n.tr("Bar Transparency")
                    value: (selectedBarConfig?.transparency ?? 1.0) * 100
                    minimum: 0
@@ -1044,6 +1079,35 @@ Item {
                        restoreMode: Binding.RestoreBinding
                    }
                }
+
+                Item {
+                    visible: SettingsData.frameEnabled
+                    width: parent.width
+                    implicitHeight: transparencyFrameNote.implicitHeight + Theme.spacingS * 2
+
+                    Row {
+                        id: transparencyFrameNote
+                        x: Theme.spacingM
+                        width: parent.width - Theme.spacingM * 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankIcon {
+                            name: "frame_source"
+                            size: Theme.fontSizeMedium
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Opacity is controlled by Frame Border Opacity in Frame settings")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                            wrapMode: Text.WordWrap
+                            width: parent.width - Theme.fontSizeMedium - Theme.spacingS
+                        }
+                    }
+                }
            }

            SettingsCard {
@@ -1287,6 +1351,8 @@ Item {

                SettingsToggleRow {
                    text: I18n.tr("Square Corners")
+                    enabled: !SettingsData.frameEnabled
+                    opacity: SettingsData.frameEnabled ? 0.5 : 1.0
                    checked: selectedBarConfig?.squareCorners ?? false
                    onToggled: checked => SettingsData.updateBarConfig(selectedBarId, {
                            squareCorners: checked
@@ -1334,6 +1400,8 @@ Item {

                SettingsToggleRow {
                    text: I18n.tr("Goth Corners")
+                    enabled: !SettingsData.frameEnabled
+                    opacity: SettingsData.frameEnabled ? 0.5 : 1.0
                    checked: selectedBarConfig?.gothCornersEnabled ?? false
                    onToggled: checked => SettingsData.updateBarConfig(selectedBarId, {
                            gothCornersEnabled: checked
--- a/quickshell/Modules/Settings/FrameTab.qml
+++ b/quickshell/Modules/Settings/FrameTab.qml
@@ -0,0 +1,295 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.Settings.Widgets
+
+Item {
+    id: root
+
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
+    DankFlickable {
+        anchors.fill: parent
+        clip: true
+        contentHeight: mainColumn.height + Theme.spacingXL
+        contentWidth: width
+
+        Column {
+            id: mainColumn
+            topPadding: 4
+            width: Math.min(550, parent.width - Theme.spacingL * 2)
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Theme.spacingXL
+
+            // ── Enable Frame ──────────────────────────────────────────────────
+            SettingsCard {
+                width: parent.width
+                iconName: "frame_source"
+                title: I18n.tr("Frame")
+                settingKey: "frameEnabled"
+
+                SettingsToggleRow {
+                    settingKey: "frameEnable"
+                    tags: ["frame", "border", "outline", "display"]
+                    text: I18n.tr("Enable Frame")
+                    description: I18n.tr("Draw a connected picture-frame border around the entire display")
+                    checked: SettingsData.frameEnabled
+                    onToggled: checked => SettingsData.set("frameEnabled", checked)
+                }
+            }
+
+            // ── Border ────────────────────────────────────────────────────────
+            SettingsCard {
+                width: parent.width
+                iconName: "border_outer"
+                title: I18n.tr("Border")
+                settingKey: "frameBorder"
+                collapsible: true
+                visible: SettingsData.frameEnabled
+
+                SettingsSliderRow {
+                    id: roundingSlider
+                    settingKey: "frameRounding"
+                    tags: ["frame", "border", "rounding", "radius", "corner"]
+                    text: I18n.tr("Border Radius")
+                    unit: "px"
+                    minimum: 0
+                    maximum: 100
+                    step: 1
+                    defaultValue: 23
+                    value: SettingsData.frameRounding
+                    onSliderDragFinished: v => SettingsData.set("frameRounding", v)
+
+                    Binding {
+                        target: roundingSlider
+                        property: "value"
+                        value: SettingsData.frameRounding
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: thicknessSlider
+                    settingKey: "frameThickness"
+                    tags: ["frame", "border", "thickness", "size", "width"]
+                    text: I18n.tr("Border Width")
+                    unit: "px"
+                    minimum: 2
+                    maximum: 100
+                    step: 1
+                    defaultValue: 16
+                    value: SettingsData.frameThickness
+                    onSliderDragFinished: v => SettingsData.set("frameThickness", v)
+
+                    Binding {
+                        target: thicknessSlider
+                        property: "value"
+                        value: SettingsData.frameThickness
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: barThicknessSlider
+                    settingKey: "frameBarSize"
+                    tags: ["frame", "bar", "thickness", "size", "height", "width"]
+                    text: I18n.tr("Size")
+                    description: I18n.tr("Height of horizontal bars / width of vertical bars in frame mode")
+                    unit: "px"
+                    minimum: 24
+                    maximum: 100
+                    step: 1
+                    defaultValue: 40
+                    value: SettingsData.frameBarSize
+                    onSliderDragFinished: v => SettingsData.set("frameBarSize", v)
+
+                    Binding {
+                        target: barThicknessSlider
+                        property: "value"
+                        value: SettingsData.frameBarSize
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: opacitySlider
+                    settingKey: "frameOpacity"
+                    tags: ["frame", "border", "opacity", "transparency"]
+                    text: I18n.tr("Frame Opacity")
+                    unit: "%"
+                    minimum: 0
+                    maximum: 100
+                    defaultValue: 100
+                    value: SettingsData.frameOpacity * 100
+                    onSliderDragFinished: v => SettingsData.set("frameOpacity", v / 100)
+
+                    Binding {
+                        target: opacitySlider
+                        property: "value"
+                        value: SettingsData.frameOpacity * 100
+                    }
+                }
+
+                SettingsToggleRow {
+                    id: frameBlurToggle
+                    settingKey: "frameBlurEnabled"
+                    tags: ["frame", "blur", "background", "glass", "transparency", "frosted"]
+                    text: I18n.tr("Frame Blur")
+                    description: !BlurService.available
+                        ? I18n.tr("Requires a newer version of Quickshell")
+                        : I18n.tr("Apply compositor blur behind the frame border")
+                    checked: SettingsData.frameBlurEnabled
+                    onToggled: checked => SettingsData.set("frameBlurEnabled", checked)
+                    enabled: BlurService.available && SettingsData.blurEnabled
+                    opacity: enabled ? 1.0 : 0.5
+                    visible: BlurService.available
+                }
+
+                Item {
+                    visible: BlurService.available && !SettingsData.blurEnabled
+                    width: parent.width
+                    height: blurToggleNote.height + Theme.spacingM * 2
+
+                    Row {
+                        id: blurToggleNote
+                        x: Theme.spacingM
+                        width: parent.width - Theme.spacingM * 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankIcon {
+                            name: "blur_on"
+                            size: Theme.fontSizeMedium
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Frame Blur is controlled by Background Blur in Theme & Colors")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                            wrapMode: Text.WordWrap
+                            width: parent.width - Theme.fontSizeMedium - Theme.spacingS
+                        }
+                    }
+                }
+
+                // Color mode buttons
+                SettingsButtonGroupRow {
+                    settingKey: "frameColor"
+                    tags: ["frame", "border", "color", "theme", "primary", "surface", "default"]
+                    text: I18n.tr("Border color")
+                    model: [I18n.tr("Default"), I18n.tr("Primary"), I18n.tr("Surface"), I18n.tr("Custom")]
+                    currentIndex: {
+                        const fc = SettingsData.frameColor;
+                        if (!fc || fc === "default") return 0;
+                        if (fc === "primary") return 1;
+                        if (fc === "surface") return 2;
+                        return 3;
+                    }
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected) return;
+                        switch (index) {
+                        case 0: SettingsData.set("frameColor", ""); break;
+                        case 1: SettingsData.set("frameColor", "primary"); break;
+                        case 2: SettingsData.set("frameColor", "surface"); break;
+                        case 3:
+                            const cur = SettingsData.frameColor;
+                            const isPreset = !cur || cur === "primary" || cur === "surface";
+                            if (isPreset) SettingsData.set("frameColor", "#2a2a2a");
+                            break;
+                        }
+                    }
+                }
+
+                // Custom color swatch — only visible when a hex color is stored (Custom mode)
+                Item {
+                    visible: {
+                        const fc = SettingsData.frameColor;
+                        return !!(fc && fc !== "primary" && fc !== "surface");
+                    }
+                    width: parent.width
+                    height: customColorRow.height + Theme.spacingM * 2
+
+                    Row {
+                        id: customColorRow
+                        width: parent.width - Theme.spacingM * 2
+                        x: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        StyledText {
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: I18n.tr("Custom color")
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                        }
+
+                        Rectangle {
+                            id: colorSwatch
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 32
+                            height: 32
+                            radius: 16
+                            color: SettingsData.effectiveFrameColor
+                            border.color: Theme.outline
+                            border.width: 1
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    PopoutService.colorPickerModal.selectedColor = SettingsData.effectiveFrameColor;
+                                    PopoutService.colorPickerModal.pickerTitle = I18n.tr("Frame Border Color");
+                                    PopoutService.colorPickerModal.onColorSelectedCallback = function (color) {
+                                        SettingsData.set("frameColor", color.toString());
+                                    };
+                                    PopoutService.colorPickerModal.show();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // ── Bar Integration ───────────────────────────────────────────────
+            SettingsCard {
+                width: parent.width
+                iconName: "toolbar"
+                title: I18n.tr("Bar Integration")
+                settingKey: "frameBarIntegration"
+                collapsible: true
+                expanded: false
+                visible: SettingsData.frameEnabled
+
+                SettingsToggleRow {
+                    visible: CompositorService.isNiri
+                    settingKey: "frameShowOnOverview"
+                    tags: ["frame", "overview", "show", "hide", "niri"]
+                    text: I18n.tr("Show on Overview")
+                    description: I18n.tr("Show the bar and frame during Niri overview mode")
+                    checked: SettingsData.frameShowOnOverview
+                    onToggled: checked => SettingsData.set("frameShowOnOverview", checked)
+                }
+            }
+
+            // ── Display Assignment ────────────────────────────────────────────
+            SettingsCard {
+                width: parent.width
+                iconName: "monitor"
+                title: I18n.tr("Display Assignment")
+                settingKey: "frameDisplays"
+                collapsible: true
+                expanded: false
+                visible: SettingsData.frameEnabled
+
+                SettingsDisplayPicker {
+                    displayPreferences: SettingsData.frameScreenPreferences
+                    onPreferencesChanged: prefs => SettingsData.set("frameScreenPreferences", prefs)
+                }
+            }
+        }
+    }
+}
--- a/quickshell/Modules/Settings/Widgets/SettingsDisplayPicker.qml
+++ b/quickshell/Modules/Settings/Widgets/SettingsDisplayPicker.qml
@@ -83,7 +83,6 @@ Item {
                    description: modelData.width + "×" + modelData.height
                    checked: localChecked
                    onToggled: isChecked => {
-                        localChecked = isChecked;
                        var prefs = JSON.parse(JSON.stringify(root.displayPreferences));
                        if (!Array.isArray(prefs) || prefs.includes("all"))
                            prefs = [];
@@ -94,6 +93,11 @@ Item {
                                model: modelData.model || ""
                            });
                        }
+                        if (prefs.length === 0) {
+                            localChecked = true;
+                            return;
+                        }
+                        localChecked = isChecked;
                        root.preferencesChanged(prefs);
                    }
                }
--- a/quickshell/Widgets/DankButtonGroup.qml
+++ b/quickshell/Widgets/DankButtonGroup.qml
@@ -89,7 +89,7 @@ Row {
            width: Math.max(contentItem.implicitWidth + root.buttonPadding * 2, root.minButtonWidth) + (selected ? 4 : 0)
            height: root.buttonHeight

-            color: selected ? Theme.buttonBg : Theme.surfaceVariant
+            color: selected ? Theme.buttonBg : Theme.withAlpha(Theme.surfaceVariant, Theme.popupTransparency)
            border.color: "transparent"
            border.width: 0

--- a/quickshell/Widgets/DankOSD.qml
+++ b/quickshell/Widgets/DankOSD.qml
@@ -266,7 +266,7 @@ PanelWindow {
        scale: shouldBeVisible ? 1 : 0.9

        property bool childHovered: false
-        readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
+        readonly property real popupSurfaceAlpha: Theme.popupTransparency

        Rectangle {
            id: background
@@ -286,7 +286,7 @@ PanelWindow {
            level: Theme.elevationLevel3
            fallbackOffset: 6
            targetRadius: Theme.cornerRadius
-            targetColor: Theme.surfaceContainer
+            targetColor: Theme.withAlpha(Theme.surfaceContainer, osdContainer.popupSurfaceAlpha)
            borderColor: Theme.outlineMedium
            borderWidth: 1
            shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
--- a/quickshell/Widgets/DankPopout.qml
+++ b/quickshell/Widgets/DankPopout.qml
@@ -576,14 +576,6 @@ Item {
                    }
                }

-                Rectangle {
-                    anchors.fill: parent
-                    radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                    border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-                    border.width: BlurService.borderWidth
-                }
-
                Loader {
                    id: contentLoader
                    anchors.fill: parent
@@ -591,6 +583,21 @@ Item {
                    asynchronous: false
                }
            }
+
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                x: contentWrapper.x
+                y: contentWrapper.y
+                opacity: contentWrapper.opacity
+                scale: contentWrapper.scale
+                visible: contentWrapper.visible
+                radius: Theme.cornerRadius
+                color: "transparent"
+                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
+                border.width: BlurService.borderWidth
+                z: 100
+            }
        }

        Item {
--- a/quickshell/Widgets/VpnProfileDelegate.qml
+++ b/quickshell/Widgets/VpnProfileDelegate.qml
@@ -238,7 +238,7 @@ Rectangle {
                        width: fieldContent.width + Theme.spacingM * 2
                        height: 32
                        radius: Theme.cornerRadius - 2
-                        color: Theme.surfaceContainerHigh
+                        color: Theme.surfaceLight
                        border.width: 1
                        border.color: Theme.outlineLight

@@ -272,7 +272,9 @@ Rectangle {
                checked: configData ? (configData.autoconnect || false) : false
                visible: !VPNService.configLoading && configData !== null
                onToggled: checked => {
-                    VPNService.updateConfig(profile.uuid, {autoconnect: checked});
+                    VPNService.updateConfig(profile.uuid, {
+                        autoconnect: checked
+                    });
                }
            }
Author	SHA1	Message	Date
purian23	1217b25de5	(frame): Add blur support & cleanup	2026-03-31 21:25:51 -04:00
purian23	e913630f90	(frame): Multi-monitor support	2026-03-31 15:31:43 -04:00
purian23	220bb2708b	Connected frames & defaults	2026-03-31 15:31:43 -04:00
purian23	e57ab3e1f3	Continue frame implementation	2026-03-31 15:31:43 -04:00
purian23	952ab9b753	Initial framework	2026-03-31 15:31:43 -04:00
bbedward	28f9aabcd9	screenshot: fix scaling of global coordinate space when using all screens	2026-03-31 15:13:10 -04:00
bbedward	3d9bd73336	launcher: some polishes for blur	2026-03-31 11:04:18 -04:00
bbedward	3497d5f523	blur: stylize control center for blur mode	2026-03-31 09:42:08 -04:00
bbedward	8ef1d95e65	popout: fix inconsistent transparency	2026-03-31 09:06:48 -04:00