@softize/opus 8.7.1 → 8.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "8.7.1",
+  "version": "8.8.1",
   "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/components/primitives/select.tsx

@@ -305,13 +305,18 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
    * onde não existe seleção persistente pra exibir.
    */
   const triggerText = selectedOption?.label ?? ''
-  /** `triggerLabel` pode ser JSX (a barra do composer mostra a chave curta), e `value` de
-   *  input só aceita texto — então ele vai num `<span>` por cima, com o input `sr-only`
-   *  guardando o `id` e o rótulo textual pro leitor de tela. */
-  const customTrigger = !props.multiple && selectedOption?.triggerLabel !== undefined
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(v) => {
+        // Fechar devolve o foco pro gatilho, e o gatilho abre AO RECEBER FOCO. Sem armar a
+        // guarda em TODO fechamento (não só no Esc), o seletor reabria sozinho — o
+        // "abre, fecha e abre de novo" que aparecia no primeiro clique.
+        if (!v) closingRef.current = true
+        setOpen(v)
+      }}
+    >
       <div ref={rootRef} data-slot="select" className={cn(ghost ? 'min-w-0' : 'min-w-40', className)}>
         <CommandPrimitive data-slot="select-command" shouldFilter={canSearch && onSearch === undefined} className="overflow-visible">
           <PopoverAnchor asChild>
@@ -361,13 +366,13 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                     </span>
                   )
                 })}
-              {/* Input somente-leitura em vez de `<span>`: ele carrega o `id`, e é o que
-                  faz o `htmlFor` do Label achar um campo (clicar no rótulo foca e abre).
-                  Um `<div>` não é rotulável, e um `<button>` não pode conter os botões de
-                  remover chip do modo múltiplo. */}
-              {customTrigger && (
-                <span data-slot="select-trigger-label" className="min-w-0 truncate text-sm">
-                  {selectedOption?.triggerLabel}
+              {/* O rótulo é SEMPRE um `<span>`. Quando ele morava no `value` de um input,
+                  o texto rolava pro fim ao ganhar foco (o browser leva o cursor pro final)
+                  e o começo do título sumia — num campo estreito, a pessoa via o meio de
+                  uma frase. `<span>` trunca com reticências, que é o certo. */}
+              {!props.multiple && (
+                <span data-slot="select-trigger-label" className={cn('min-w-0 flex-1 truncate text-left text-sm', selectedOption === undefined && 'text-muted-foreground')}>
+                  {selectedOption?.triggerLabel ?? (selectedOption?.label ?? placeholder)}
                 </span>
               )}
               <input
@@ -404,10 +409,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   }
                 }}
                 placeholder={props.multiple && selectedValues.length > 0 ? '' : placeholder}
-                className={cn(
-                  'min-w-0 flex-1 cursor-pointer bg-transparent text-sm caret-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed',
-                  customTrigger && 'sr-only',
-                )}
+                className="sr-only"
               />
               {clearable === true && selectedValues.length > 0 && disabled !== true && (
                 <button
@@ -461,11 +463,16 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               'pointer-events-auto overflow-hidden p-0',
               ghost ? 'w-auto min-w-56 max-w-80' : 'w-(--radix-popover-trigger-width) min-w-40',
             )}
-            // Com busca, o foco VAI pra caixa dentro da lista: abrir e já poder digitar é
-            // o ponto do padrão. Sem busca, segura o foco no gatilho (nada pra digitar).
-            onOpenAutoFocus={(e) => {
-              if (!canSearch) e.preventDefault()
-            }}
+            /*
+             * O foco ao abrir é SEMPRE nosso — o Radix nunca mexe.
+             *
+             * Deixá-lo agir com busca parecia certo (ele focaria o primeiro elemento
+             * focável, que é a caixa), mas ele roda DEPOIS do nosso efeito e movia o foco
+             * pro contêiner do conteúdo: a busca ganhava o cursor e o perdia em seguida,
+             * que é exatamente o "ganha foco e some" relatado. Com dois donos do foco, o
+             * último a escrever vence — e quem é o último depende da ordem de montagem.
+             */
+            onOpenAutoFocus={(e) => e.preventDefault()}
             onCloseAutoFocus={(e) => e.preventDefault()}
             onInteractOutside={(e) => {
               const target = e.target as HTMLElement

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])
+}