@softize/opus 8.6.9 → 8.7.1

package/package.json

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

@@ -21,7 +21,7 @@
  * lista longa ou que cresce → `searchable`; item que precisa de JSX → `content`.
  */
 import * as React from 'react'
-import { Check, ChevronDownIcon, X } from 'lucide-react'
+import { Check, ChevronDownIcon, SearchIcon, X } from 'lucide-react'
 import { Command as CommandPrimitive } from 'cmdk'
 
 import { cn } from '../../lib/cn.ts'
@@ -215,29 +215,34 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
   const [query, setQuery] = React.useState('')
   const rootRef = React.useRef<HTMLDivElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
+  /** Fechando por Esc: o foco volta pro gatilho, e focar abre. Marca pra ignorar UM foco. */
+  const closingRef = React.useRef(false)
+  const searchRef = React.useRef<HTMLInputElement>(null)
 
   const selectedOption = options.find((o) => o.value === singleValue)
-  // Single: fechado, o campo mostra o rótulo escolhido (sincroniza com value/options).
-  React.useEffect(() => {
-    if (singleValue === undefined || open) return
-    setQuery(selectedOption?.label ?? '')
-  }, [singleValue, selectedOption, open])
 
   /**
-   * ABRIR limpa a busca.
+   * Abrir com busca FOCA a caixa — abrir e já poder digitar é o ponto do padrão.
    *
-   * O rótulo do item escolhido vive no mesmo estado que o termo de busca (é o mesmo
-   * input). Sem isto, abrir o seletor herda esse rótulo como CONSULTA: a lista nasce
-   * filtrada pelo nome do que já está selecionado — e some justamente quando a pessoa
-   * abriu pra trocar. Com `onSearch`, o efeito abaixo ainda dispara uma busca remota por
-   * essa frase, que quase nunca casa com outra coisa.
+   * Explícito e não pelo `autoFocus`: aqui dependeria de o Radix (que move o foco ao
+   * abrir o popover) e o cmdk concordarem sobre quem manda, e o resultado varia com a
+   * ordem de montagem. `requestAnimationFrame` porque o conteúdo do popover entra no DOM
+   * depois deste efeito.
+   */
+  React.useEffect(() => {
+    if (!open || !canSearch) return
+    const r = requestAnimationFrame(() => searchRef.current?.focus())
+    return () => cancelAnimationFrame(r)
+  }, [open, canSearch])
+
+  /**
+   * O termo de busca zera ao FECHAR.
    *
-   * Visto em produção duas vezes no mesmo dia: o seletor de task da cabine buscando
-   * "Sem task", e o de modelo de IA buscando o nome do modelo corrente. Nos dois, a
-   * pessoa via lista vazia com dados no servidor.
+   * Ele é estado da consulta, não do valor — deixá-lo vivo entre aberturas faria a lista
+   * reabrir filtrada por algo que a pessoa procurou minutos antes e já esqueceu.
    */
   React.useEffect(() => {
-    if (open) setQuery('')
+    if (!open) setQuery('')
   }, [open])
 
   // O cmdk carimba o id DELE no input (a11y interna) e descarta o nosso — reaplicamos por
@@ -280,9 +285,30 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
   }
 
   const ghost = variant === 'ghost'
-  // Não-buscável: o campo é só gatilho — readOnly (sem caret, sem digitar), o clique abre.
-  // Um render só pros dois modos; o que muda é poder digitar.
-  const triggerText = !props.multiple && !open && selectedOption?.triggerLabel !== undefined ? undefined : query
+
+  /**
+   * O GATILHO nunca é caixa de busca — em nenhum modo.
+   *
+   * Antes o mesmo campo fazia dois trabalhos: exibir o escolhido e receber o que se
+   * digita. Os dois dividiam um estado, e daí vinham os defeitos: abrir herdava o rótulo
+   * como consulta (a lista sumia justo quando se ia trocar) e, com busca remota, o
+   * rótulo virava `q=` no servidor. Não era azar — é o que acontece quando duas
+   * responsabilidades ocupam o mesmo lugar.
+   *
+   * Agora o gatilho só EXIBE (readOnly, sem caret) e a busca mora dentro da lista. Some a
+   * ambiguidade, e some a classe de bug: a caixa de busca nasce vazia por construção, não
+   * porque alguém lembrou de limpar. De quebra, a pessoa vê onde está enquanto procura
+   * pra onde ir — antes, começar a procurar apagava a referência.
+   *
+   * É o padrão de quem escolhe de um CONJUNTO (Linear, GitHub, VS Code). O formato
+   * anterior — digitar no próprio campo — é de quem digita um VALOR (endereço, cidade),
+   * 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}>
@@ -335,41 +361,52 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                     </span>
                   )
                 })}
-              {/* triggerLabel: o gatilho mostra o rótulo CURTO da opção (o input fica
-                  escondido atrás dele até focar) — o caso da barra do composer. */}
-              {triggerText === undefined && (
+              {/* 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}
                 </span>
               )}
-              <CommandPrimitive.Input
+              <input
                 ref={inputRef}
                 data-slot="select-input"
                 id={id}
                 disabled={disabled}
-                readOnly={!canSearch}
+                readOnly
+                role="combobox"
+                aria-expanded={open}
                 aria-label={props['aria-label']}
-                value={triggerText ?? ''}
-                onValueChange={(v) => {
-                  if (!canSearch) return
-                  setQuery(v)
-                  setOpen(true)
-                }}
+                value={props.multiple ? '' : triggerText}
+                onChange={() => {}}
                 onFocus={() => {
+                  // Fechar por Esc devolve o foco pra cá — e focar abre. Sem esta guarda,
+                  // Esc REABRE a lista e o seletor fica impossível de fechar pelo teclado.
+                  if (closingRef.current) {
+                    closingRef.current = false
+                    return
+                  }
                   setOpen(true)
-                  if (!props.multiple && canSearch) inputRef.current?.select()
                 }}
                 onKeyDown={(e) => {
                   if (e.key === 'Escape' && open) {
                     e.stopPropagation()
                     setOpen(false)
+                    return
+                  }
+                  // Teclado abre a lista como o clique abre: sem isto, quem navega por Tab
+                  // chega no campo e não tem como escolher nada.
+                  if (!open && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown')) {
+                    e.preventDefault()
+                    setOpen(true)
                   }
                 }}
-                placeholder={props.multiple && selectedValues.length > 0 ? '' : (canSearch ? (searchPlaceholder ?? placeholder) : placeholder)}
+                placeholder={props.multiple && selectedValues.length > 0 ? '' : placeholder}
                 className={cn(
-                  'min-w-0 flex-1 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed',
-                  canSearch ? '' : 'cursor-pointer caret-transparent',
-                  triggerText === undefined && 'sr-only',
+                  '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',
                 )}
               />
               {clearable === true && selectedValues.length > 0 && disabled !== true && (
@@ -409,11 +446,10 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   {trailing}
                 </span>
               )}
-              {/* Chevron: a affordance de "abre uma lista". Sempre no não-buscável; no
-                  buscável some (ali quem manda o sinal é o cursor de texto). */}
-              {!canSearch && (
-                <ChevronDownIcon data-slot="select-icon" className={cn('size-4 shrink-0 opacity-50', ghost ? 'h-3.5 w-3.5 opacity-60' : '')} aria-hidden="true" />
-              )}
+              {/* Chevron SEMPRE: o gatilho agora abre uma lista nos dois modos, e essa é a
+                  affordance que diz isso. Antes ele sumia no buscável, porque ali o sinal
+                  era o cursor de texto — que não existe mais no campo. */}
+              <ChevronDownIcon data-slot="select-icon" className={cn('size-4 shrink-0 opacity-50', ghost ? 'h-3.5 w-3.5 opacity-60' : '')} aria-hidden="true" />
             </div>
           </PopoverAnchor>
           <PopoverContent
@@ -425,7 +461,11 @@ 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',
             )}
-            onOpenAutoFocus={(e) => e.preventDefault()}
+            // 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()
+            }}
             onCloseAutoFocus={(e) => e.preventDefault()}
             onInteractOutside={(e) => {
               const target = e.target as HTMLElement
@@ -436,6 +476,29 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
             onWheel={(e) => e.stopPropagation()}
             onTouchMove={(e) => e.stopPropagation()}
           >
+            {/* A busca mora AQUI, e não no gatilho. Nasce vazia porque é um campo
+                próprio — não há rótulo pra herdar. */}
+            {canSearch && (
+              <div data-slot="select-search-row" className="flex items-center gap-2 border-b px-3">
+                <SearchIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
+                <CommandPrimitive.Input
+                  ref={searchRef}
+                  data-slot="select-search"
+                  value={query}
+                  onValueChange={setQuery}
+                  placeholder={searchPlaceholder ?? 'Buscar…'}
+                  className="flex-1 bg-transparent py-2.5 text-sm outline-hidden placeholder:text-muted-foreground"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Escape') {
+                      e.stopPropagation()
+                      closingRef.current = true
+                      setOpen(false)
+                      inputRef.current?.focus() // devolve o foco ao gatilho, senão ele se perde
+                    }
+                  }}
+                />
+              </div>
+            )}
             {showToggleAll && (
               <div className="border-b p-1">
                 <button