@softize/opus 8.7.1 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "8.7.1",
+  "version": "8.8.0",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/src/ui/components/primitives/menu.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { DropdownMenu as MenuPrimitive } from "radix-ui"
 
+import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts"
 import { cn } from '../../lib/cn.ts'
 
 function Menu({
@@ -34,9 +35,13 @@ function MenuContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Content>) {
+  // Mesma razão do Popover: clique dentro de iframe não chega aqui fora.
+  const ref = React.useRef<HTMLDivElement>(null)
+  useDismissOnIframeFocus(ref)
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Content
+        ref={ref}
         data-slot="menu-content"
         sideOffset={sideOffset}
         className={cn(

package/src/ui/components/primitives/popover.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "radix-ui"
 
+import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts"
 import { cn } from '../../lib/cn.ts'
 
 function Popover({
@@ -21,9 +22,14 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  // Clique dentro de um iframe não chega no documento de fora — sem isto, o popover fica
+  // pendurado sobre o conteúdo. Na cabine, o preview É um iframe.
+  const ref = React.useRef<HTMLDivElement>(null)
+  useDismissOnIframeFocus(ref)
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
+        ref={ref}
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}

package/src/ui/lib/dismiss-on-iframe.ts

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+/**
+ * Fecha a camada flutuante quando o clique cai DENTRO de um iframe.
+ *
+ * O navegador entrega o clique ao documento do iframe, e o documento de fora nunca fica
+ * sabendo. Como toda dispensa por "clique fora" escuta eventos do documento de fora, o
+ * popover/menu simplesmente NÃO fecha — fica pendurado sobre o conteúdo, e a pessoa
+ * precisa achar um pedaço de página livre pra clicar.
+ *
+ * Não é caso de borda pra nós: a cabine embute o preview num iframe, então metade da tela
+ * é justamente a área onde clicar não fecha nada.
+ *
+ * O sinal utilizável é o `blur` da JANELA somado a "quem está com o foco agora é um
+ * iframe". Trocar de aba ou de aplicativo também dispara `blur`, mas ali o elemento ativo
+ * não é iframe — e fechar o menu de quem só foi ver outra janela seria pior que o defeito.
+ *
+ * A dispensa sai como um Escape sintético em vez de uma chamada direta: quem renderiza o
+ * conteúdo (Popover, Menu) não tem acesso ao estado de aberto — ele é de quem usa. Escape
+ * é o canal que a própria biblioteca já escuta pra dispensar, então funciona sem obrigar
+ * cada call site a passar um `onClose`.
+ */
+export function useDismissOnIframeFocus(ref: React.RefObject<HTMLElement | null>): void {
+  React.useEffect(() => {
+    const onBlur = (): void => {
+      // `requestAnimationFrame`: no instante do `blur` o `activeElement` ainda pode ser o
+      // anterior; o navegador atualiza no tick seguinte.
+      requestAnimationFrame(() => {
+        if (document.activeElement?.tagName !== 'IFRAME') return
+        ref.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      })
+    }
+    window.addEventListener('blur', onBlur)
+    return () => window.removeEventListener('blur', onBlur)
+  }, [ref])
+}