Overlay works perfectly with multiple running at once

Overlay.qml

@@ -10,27 +10,44 @@ FloatingWindow {
     id: overlay
     visible: toplevel
     color: "transparent"
+    title: bgcol ? "monoverlay-t" : "monoverlay"
     property var toplevel: null
-    title: "monoverlay"
+    property var bgcol: null
+    onClosed: {
+        this.destroy()
+    } 
+    mask: Region {}
 
     Process {
         id: slurp
+        running: true
         command: ['sh', '-c', "slurp -f %x,%y,%w,%h </dev/null"]
         stdout: StdioCollector { onStreamFinished: {
-            let [x, y, w, h] = this.text.split(',')
+            let [x, y, w, h] = this.text.split(',').map(n => parseInt(n))
             const toplevel = Hyprland.activeToplevel
             const {at, size} = toplevel.lastIpcObject
             x -= at[0]
             y -= at[1]
+            if (
+                x < 0           ||
+                y < 0           ||
+                x + w > size[0] ||
+                y + h > size[1]
+            ) {
+                overlay.destroy()
+                return
+            }
             source.sourceRect = Qt.rect(x, y, w, h)
-            console.log(x, y, w, h, toplevel)
+            overlay.implicitWidth = w
+            overlay.implicitHeight = h
             overlay.toplevel = toplevel.wayland
         }}
     }
 
-    IpcHandler {
-        target: "overlay"
-        function open() {slurp.running = true}
+    Process {
+        id: hyprpicker
+        command: ['hyprpicker']
+        stdout: StdioCollector { onStreamFinished: { overlay.bgcol = Qt.color(this.text.trim()) }}
     }
 
     ScreencopyView {
@@ -39,18 +56,61 @@ FloatingWindow {
         layer.enabled: true
         width: sourceSize.width
         height: sourceSize.height
-        // layer.effect: ShaderEffect {
-        //     fragmentShader: "discord.frag.qsb"
-        //     property color bgcol: "#111111"
-        // }
         live: true
         captureSource: overlay.toplevel
     }
-    ShaderEffectSource {
-        id: source
+    Item {
         anchors.fill: parent
-        sourceItem: view
+        ShaderEffectSource {
+            id: source
+            visible: true
+            anchors.fill: parent
+            sourceItem: view
+            sourceRect: overlay.sourceRect
+            layer.enabled: true
+            layer.effect: ShaderEffect {
+                id: colorkey
+                fragmentShader: "colorkey.frag.qsb"
+                property color bgcol: overlay.bgcol
+                property bool key_enabled: !!overlay.bgcol
+            }
+        }
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            anchors.fill: parent
+            shadowEnabled: true
+            blurMax: 12
+        }
+    }
+    HoverHandler { id: hover }
+    Rectangle {
+        visible: hover.hovered
+        color: "#111"
+        anchors {
+            top: parent.top
+            right: parent.right
+            margins: 4
+        }
+        radius: 8
+        width: 24
+        height: 24
+        TapHandler { 
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            onTapped: (_, button) => {
+                if (button == 1) hyprpicker.running = true
+                else if (button == 2) overlay.bgcol = null
+            }
+        }
+        Image {
+            anchors {
+                fill: parent
+                margins: 2
+            }
+            source: Quickshell.shellPath("assets/picker.svg")
+            sourceSize: {
+                width: this.width
+                height: this.height
+            }
+        }
     }
-
-    onClosed: toplevel = null
 }