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
 }

assets/picker.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  
+  <g id="Picker_Half" data-name="Picker Half">
+    <path  d="M20.936,5.889a2.825,2.825,0,0,0-4.81-2.02l-2.21,2.22-.75-.75a.771.771,0,0,0-.55-.22.8.8,0,0,0-.55.22.785.785,0,0,0,0,1.1l.75.75-8.76,8.76a3.154,3.154,0,0,0-.92,2.13l-.07,1.52a1.316,1.316,0,0,0,1.28,1.35h.06l1.52-.07a3.21,3.21,0,0,0,2.13-.93l8.76-8.76.75.75a.8.8,0,0,0,1.1,0,.785.785,0,0,0,0-1.1l-.75-.75,2.18-2.18A2.845,2.845,0,0,0,20.936,5.889Zm-8.56,8.33H7.2l6.33-6.32,2.59,2.59ZM19.4,7.2l-2.18,2.19L14.626,6.8l2.21-2.22a1.823,1.823,0,0,1,2.56,0,1.859,1.859,0,0,1,0,2.62Z"/>
+  </g>

colorkey.frag

@@ -5,11 +5,13 @@ layout(std140, binding = 0) uniform buf {
     mat4 qt_Matrix;
     float qt_Opacity;
     vec4 bgcol;
+    bool key_enabled;
 };
 layout(binding = 1) uniform sampler2D source;
 void main() {
     vec4 p = texture(source, qt_TexCoord0);
     if (
+        key_enabled    &&
         p.r == bgcol.r &&
         p.g == bgcol.g &&
         p.b == bgcol.b

shell.qml

@@ -32,5 +32,13 @@ ShellRoot {
     }
     Shell.Corners { }
     // Shell.Keystrokes { }
-    Shell.Overlay { }
+
+    Component {
+        id: overlay
+        Shell.Overlay {}
+    }
+    IpcHandler {
+        target: 'overlay'
+        function open() {overlay.createObject(this, {})}
+    }
 }