@softize/opus 12.11.0 → 13.1.0

package/src/ui/docs/content/confirm.md

@@ -1,120 +0,0 @@
-## O trio imperativo: `dialog`
-
-`dialog.alert` · `dialog.confirm` · `dialog.prompt` — o trio do browser (`alert`/`confirm`/`prompt`), mas **assíncrono, com tema e a11y-correto**. Cada um pergunta e **espera a resposta**:
-
-```tsx
-await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })          // Promise<void>
-const ok   = await dialog.confirm({ title: 'Excluir a sessão?', variant: 'destructive' })          // Promise<boolean>
-const nome = await dialog.prompt({ title: 'Nome do snapshot', placeholder: 'ex.: v1-final' })      // Promise<string | null>
-```
-
-É a mesma forma do `toast` (superfície imperativa, host no shell), mas que **responde** — e é isso que tira as ~15 linhas de JSX que cada tela montava. Por baixo é o `AlertDialog`: `role="alertdialog"`, foco preso, **não fecha no clique fora** — a semântica de uma interrupção que EXIGE resposta. Fechar por ESC/Cancelar resolve o "não" de cada tipo (`void`, `false`, `null`).
-
-```tsx preview
-function Demo() {
-  const [last, setLast] = useState('—')
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <DialogHost />
-      <Button variant="outline" size="sm" onClick={async () => {
-        await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })
-        setLast('alert → OK')
-      }}>alert</Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const ok = await dialog.confirm({ title: 'Excluir a sessão?', description: 'Some o worktree e o preview.', action: 'Excluir', variant: 'destructive' })
-        setLast('confirm → ' + (ok ? 'excluída' : 'mantida'))
-      }}>confirm</Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const name = await dialog.prompt({ title: 'Nome do snapshot', placeholder: 'ex.: v1-final' })
-        setLast('prompt → ' + (name === null ? 'cancelado' : name))
-      }}>prompt</Button>
-      <span className="text-sm text-muted-foreground">Última: {last}</span>
-    </div>
-  )
-}
-render(<Demo />)
-```
-
-## Por que namespace, e não `confirm()` solto
-
-`alert`/`confirm`/`prompt` são **globais do browser**. Como função solta, esquecer o import não daria erro — o TypeScript resolveria pro global e o código abriria a caixa cinza do sistema (sem tema, que webview suprime). `window.dialog` não existe, então o namespace **imuniza** a família contra esse footgun. `confirm()` segue exportado como alias (retrocompat), mas o novo código usa `dialog.confirm`.
-
-## `body`: corpo com conteúdo próprio
-
-Os três aceitam `body` — conteúdo que a `description` de texto não expressa (uma lista do que será afetado, um detalhe destacado). É o que antes obrigava a compor o `AlertDialog` à mão:
-
-```tsx preview
-function Demo() {
-  const [status, setStatus] = useState('—')
-  return (
-    <div className="flex items-center gap-3">
-      <DialogHost />
-      <Button variant="outline" size="sm" onClick={async () => {
-        const ok = await dialog.confirm({
-          title: 'Encerrar 3 sessões?',
-          description: 'Os agentes abaixo serão interrompidos:',
-          body: (
-            <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-              <li><span className="font-medium text-foreground">developer</span> — empresa-x-api</li>
-              <li><span className="font-medium text-foreground">reviewer</span> — empresa-x-web</li>
-            </ul>
-          ),
-          action: 'Encerrar todas',
-        })
-        setStatus(ok ? 'encerradas' : 'mantidas')
-      }}>Encerrar sessões</Button>
-      <span className="text-sm text-muted-foreground">Resposta: {status}</span>
-    </div>
-  )
-}
-render(<Demo />)
-```
-
-## O host
-
-Monte **um** `<DialogHost />` no shell do app, ao lado do `<Toaster />`:
-
-```tsx
-<>
-  {rotas}
-  <Toaster />
-  <DialogHost />
-</>
-```
-
-Sem ele, os três **lançam** — em vez de devolver uma promise que nunca resolve. Promise pendurada viraria clique sem efeito, o pior desfecho pra uma interrupção que exige resposta: a pessoa acha que respondeu, ou clica de novo. (`<ConfirmHost />` segue valendo como alias de `<DialogHost />`.)
-
-Várias perguntas seguidas entram numa **fila** e aparecem uma por vez — cada `await` recebe a resposta do SEU diálogo (duas caixas empilhadas seriam ambíguas sobre qual clique respondeu o quê).
-
-## Quando NÃO usar
-
-- **Excluir uma entidade por contrato** → `ActionTrigger` com `icon={<Trash2 />}`: lê o `action.confirm`, dispara a action e fala o erro de negócio.
-- **Um form de verdade** (validação, vários campos, submete uma action) → `ActionFormDialog`. O `dialog.prompt` é só pra UMA string livre.
-- **Mais de duas ações** (ex.: Salvar / Descartar / Cancelar) ou **layout totalmente custom** → componha o `AlertDialog` à mão.
-- **Só avisar, sem cobrar decisão** → `toast` (passageiro) ou `Alert` (fica na página). O `dialog.alert` é pro aviso que **bloqueia** e exige um "OK".
-
-## Opções
-
-Comuns aos três (`dialog.alert`/`confirm`/`prompt`):
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `title` | `React.ReactNode` | | O enunciado. Obrigatório. |
-| `description` | `React.ReactNode` | | O que a pessoa precisa saber pra decidir — a CONSEQUÊNCIA, não o óbvio. |
-| `body` | `React.ReactNode` | | Conteúdo próprio entre a descrição e os botões (lista, detalhe). |
-| `media` | `React.ReactNode` | | Ícone grande acima do título (o quadro do `AlertDialogMedia`). |
-| `action` | `string` | `'OK'` / `'Confirmar'` | Rótulo do botão que confirma (default `'OK'` no alert, `'Confirmar'` nos outros). |
-
-Só `confirm` e `prompt`:
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `cancel` | `string` | `'Cancelar'` | Rótulo do botão que recusa. |
-| `variant` | `'default' \| 'destructive'` | `'default'` | `destructive` pinta o confirmar — o que apaga tem que parecer o que apaga. |
-
-Só `prompt`:
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `placeholder` | `string` | | Texto-fantasma do input. |
-| `defaultValue` | `string` | | Valor inicial (o input abre focado e selecionado). |

package/src/ui/docs/content/input-group.md

@@ -1,79 +0,0 @@
-> Só um **ícone leading**? Não precisa do InputGroup — é a prop `icon` do `Input` (a mesma do Select e do Alert). O InputGroup é pros casos que a prop não cobre: botão no fim, prefixo de texto, adorno em bloco, múltiplos.
-
-## Com ícone (addon)
-
-InputGroupAddon na borda (align inline-start por padrão) cola um ícone ao InputGroupInput dentro da mesma moldura. Clicar no addon foca o campo. Pra um leading simples, prefira `<Input icon={…} />`; aqui é quando o ícone convive com outros adornos.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <Search />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="Buscar sessões do workspace" />
-</InputGroup>
-```
-
-## Ícone + ação juntos (o caso do InputGroup)
-
-> Só uma ação no fim (um limpar, um mostrar-senha)? Isso é `<Input trailing={…} />` — não precisa do InputGroup. O InputGroup entra quando os adornos se ACUMULAM: aqui, um ícone leading E um botão no fim, na mesma moldura (a busca do `ActionList` é assim). `align=inline-end` joga o addon pro fim; `InputGroupButton` já vem ghost, tamanho `icon-xs`.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <Search />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="Buscar agente" defaultValue="reviewer" />
-  <InputGroupAddon align="inline-end">
-    <InputGroupButton size="icon-xs" aria-label="Limpar filtro">
-      <X />
-    </InputGroupButton>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Prefixo e sufixo
-
-InputGroupText é o rótulo inerte na borda — prefixo ou sufixo. Aqui emoldura o slug do repositório entre o host fixo e o sufixo .git.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <GitBranch />
-    <InputGroupText>github.com/softize/</InputGroupText>
-  </InputGroupAddon>
-  <InputGroupInput placeholder="empresa-x-api" />
-  <InputGroupAddon align="inline-end">
-    <InputGroupText>.git</InputGroupText>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Composer com rodapé
-
-Com InputGroupTextarea a moldura cresce; align=block-end empilha um rodapé de ações embaixo do campo — o padrão do composer de brief do agente.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupTextarea placeholder="Descreva a task para o agente developer" rows={3} />
-  <InputGroupAddon align="block-end">
-    <InputGroupText>
-      <Sparkles />
-      Título gerado pela IA
-    </InputGroupText>
-    <InputGroupButton size="sm" context="primary" variant="solid" className="ml-auto" aria-label="Enviar brief">
-      Enviar
-      <ArrowUp />
-    </InputGroupButton>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `align` (InputGroupAddon) | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Onde o addon ancora: inline nas laterais; block empilha (vira coluna) acima ou abaixo — block exige a moldura alta de um InputGroupTextarea. |
-| `size` (InputGroupButton) | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'` | `'xs'` | Tamanho do botão embutido. As variantes icon-* são quadradas, pra um botão só de ícone. |
-| `context` (InputGroupButton) | `'neutral' \| 'primary' \| 'danger'` | `'primary'` | Significado semântico herdado do Button. |
-| `variant` (InputGroupButton) | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'ghost'` | Tratamento visual herdado do Button. O padrão ghost some na moldura; use `solid` para dar ênfase à ação. |
-| `placeholder / defaultValue / value` (InputGroupInput, InputGroupTextarea) | `string` | | Props nativas do <input>/<textarea> repassadas ao controle. Controle como faria com Input/Textarea (value + onChange). |

package/src/ui/docs/content/page-state.md

@@ -1,45 +0,0 @@
-## Estado integral da página
-
-Use `PageState` quando carregamento, falha ou ausência substituírem todo o conteúdo principal. Na
-forma curta ele pode ser escrito como filho direto de `Page`, que cria o `PageBody`; na forma
-explícita, coloque-o dentro de `PageBody`. O cabeçalho continua visível e o estado recebe composição,
-altura e semântica acessível consistentes.
-
-```tsx preview col
-<Page title="Relatório">
-  <PageState
-    status="error"
-    title="Não foi possível carregar o relatório"
-    description="Tente novamente. Se o problema continuar, volte mais tarde."
-    action={<Button variant="outline">Tentar novamente</Button>}
-  />
-</Page>
-```
-
-`loading` centraliza o `Spinner`; `error` compõe `Alert`; `empty` compõe `Empty`; e `ready` entrega
-os filhos sem acrescentar uma superfície.
-
-```tsx preview col
-<Page title="Relatórios">
-  <PageState
-    status="empty"
-    title="Nenhum relatório"
-    description="Crie o primeiro relatório para começar."
-    action={<Button>Novo relatório</Button>}
-  />
-</Page>
-```
-
-Não use `PageState` para uma falha parcial. Se outra parte da página continua utilizável, mantenha o
-estado na própria seção com `DataState`, `ActionView`, `ActionList` ou `Alert`.
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `status` | `'loading' \| 'error' \| 'empty' \| 'ready'` | | Estado integral do conteúdo. |
-| `title` | `ReactNode` | Texto seguro por estado | Situação reconhecível pela pessoa. |
-| `description` | `ReactNode` | | Impacto ou próximo passo aplicável. |
-| `icon` | `ReactNode` | Alerta no erro | Ícone decorativo do estado. |
-| `action` | `ReactNode` | | Recuperação, seleção ou criação aplicável. |
-| `children` | `ReactNode` | | Conteúdo renderizado somente em `ready`. |

package/src/ui/docs/content/toggle-group.md

@@ -1,81 +0,0 @@
-## Escolha única
-
-type=single deixa um item ativo por vez; value é uma string. Controlado por value + onValueChange — bom pra alternar a visão de um workspace.
-
-```tsx preview
-const [view, setView] = useState('sessions')
-
-render(
-  <ToggleGroup type="single" value={view} onValueChange={(v) => v && setView(v)}>
-    <ToggleGroupItem value="overview">Visão geral</ToggleGroupItem>
-    <ToggleGroupItem value="sessions">Sessões</ToggleGroupItem>
-    <ToggleGroupItem value="skills">Skills</ToggleGroupItem>
-  </ToggleGroup>,
-)
-```
-
-## Escolha múltipla
-
-type=multiple permite vários ativos ao mesmo tempo; value é um array de strings. O padrão pra uma barra de formatação.
-
-```tsx preview
-const [marks, setMarks] = useState(['bold'])
-
-render(
-  <ToggleGroup type="multiple" value={marks} onValueChange={setMarks}>
-    <ToggleGroupItem value="bold" aria-label="Negrito">
-      <Bold />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="italic" aria-label="Itálico">
-      <Italic />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="underline" aria-label="Sublinhado">
-      <Underline />
-    </ToggleGroupItem>
-  </ToggleGroup>,
-)
-```
-
-## Variante outline
-
-variant=outline emoldura o grupo com borda; size e o variant definidos no ToggleGroup descem pra cada ToggleGroupItem via contexto.
-
-```tsx preview
-<ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="Alinhamento">
-  <ToggleGroupItem value="left" aria-label="Esquerda">
-    <AlignLeft />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Centro">
-    <AlignCenter />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Direita">
-    <AlignRight />
-  </ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Com espaçamento
-
-spacing afasta os itens (em unidades de spacing do tema) — sem ele os botões ficam colados num bloco único.
-
-```tsx preview
-<ToggleGroup type="single" variant="outline" spacing={2} defaultValue="developer">
-  <ToggleGroupItem value="developer">developer</ToggleGroupItem>
-  <ToggleGroupItem value="reviewer">reviewer</ToggleGroupItem>
-  <ToggleGroupItem value="designer">designer</ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `type (ToggleGroup)` | `'single' \| 'multiple'` | | single mantém um item ativo (value: string); multiple permite vários (value: string[]). |
-| `value (ToggleGroup)` | `string \| string[]` | | O(s) item(ns) ativo(s) no modo controlado — pareie com onValueChange. O tipo segue o type. |
-| `onValueChange (ToggleGroup)` | `(value: string \| string[]) => void` | | Chamado quando a seleção muda. No single, vem string vazia ao desmarcar o ativo. |
-| `defaultValue (ToggleGroup)` | `string \| string[]` | | A seleção inicial no modo não controlado. |
-| `variant (ToggleGroup)` | `'default' \| 'outline'` | `'default'` | default é sem moldura; outline emoldura o grupo com borda. Desce pros itens via contexto. |
-| `size (ToggleGroup)` | `'default' \| 'sm' \| 'lg'` | `'default'` | Altura e respiro dos itens. Desce pros itens via contexto. |
-| `spacing (ToggleGroup)` | `number` | `0` | Distância entre os itens (unidades de spacing). 0 cola tudo num bloco único. |
-| `value (ToggleGroupItem)` | `string` | | Identificador do item — é o que entra no value do grupo quando ativado. |
-| `disabled (ToggleGroupItem)` | `boolean` | `false` | Esmaece e bloqueia um item específico do grupo. |