fix(stage-web): allow interacting with Vue DevTools over backdrops

apps/stage-web/src/main.ts

@@ -50,3 +50,39 @@ createApp(App)
   .use(i18n)
   .use(Tres)
   .mount('#app')
+
+if (import.meta.env.DEV && !import.meta.env.SSR) {
+  function captureEvents(el: HTMLElement) {
+    // Force `pointer-events: auto` as DismissableLayer in Reka UI adds
+    // `pointer-events: none` to document body.
+    el.style.pointerEvents = 'auto'
+
+    // We need to capture events inside elements like devtools to prevent them
+    // from leaking to other layers (like DismissableLayer in Reka UI).
+    //
+    // See: https://github.com/unovue/reka-ui/blob/14866201d179b8bae3c8b4346a1ca8eff1c5eaa4/packages/radix-vue/src/DismissableLayer/DismissableLayer.vue#L186-L188
+    el.addEventListener('focus', e => e.stopPropagation(), { capture: true })
+    el.addEventListener('blur', e => e.stopPropagation(), { capture: true })
+    el.addEventListener('pointerdown', e => e.stopPropagation(), { capture: true })
+  }
+
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'childList') {
+        const devtoolsContainer = document.getElementById('__vue-devtools-container__')
+
+        if (devtoolsContainer) {
+          captureEvents(devtoolsContainer)
+          observer.disconnect()
+        }
+      }
+    }
+  })
+
+  observer.observe(document.body, { childList: true, subtree: true })
+
+  // Disconnect on timeout (in case)
+  setTimeout(() => {
+    observer.disconnect() // Safe to call even if already disconnected
+  }, 60 * 1000)
+}

cspell.config.yaml

@@ -75,6 +75,7 @@ words:
   - devlog
   - devlogs
   - directml
+  - Dismissable
   - dokidoki
   - dompurify
   - dotenvx