@softize/opus 12.10.0 → 13.0.0

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

@@ -7,7 +7,7 @@ title: Autenticação
 Quem é o usuário, de qual tenant, e o que ele pode. O contrato é um adapter do core
 (`AuthAdapter`): a cada request o runtime chama `resolveContext` e injeta o resultado no
 handler — `ctx.user`, `ctx.tenantId`, `ctx.can`. O Opus **não** implementa RBAC/ABAC; ele
-delega a decisão pro `can` que o driver pluga.
+delega a decisão para o `can` que o driver pluga.
 
 ## O contrato
 
@@ -31,7 +31,7 @@ política usada por ela.
 import { jwtAuth } from '@softize/opus/auth/jwt'
 import { betterAuthSession } from '@softize/opus/auth/better-auth'
 
-// JWT: valida o token (HS256 por padrão) e mapeia o payload pro User.
+// JWT: valida o token (HS256 por padrão) e mapeia o payload para o User.
 const jwt = jwtAuth({ secret: process.env.JWT_SECRET! })
 
 // better-auth: valida a sessão contra um IdP better-auth remoto.
@@ -44,7 +44,7 @@ const idp = betterAuthSession({
 
 O `jwt` procura o token no `Authorization: Bearer`, em cookie ou custom (via `getToken`); o
 `secret` pode ser string ou um resolver async por `kid`. O `betterAuthSession` faz fetch da
-sessão no IdP (`timeoutMs`, default 5s) e mapeia pro `User`/tenant/can (o `can` default nega
+sessão no IdP (`timeoutMs`, default 5s) e mapeia para o `User`/tenant/can (o `can` default nega
 tudo — plugue o seu).
 
 ## No runtime

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

@@ -1,4 +1,4 @@
-## Básico
+## Retrato com imagem
 
 AvatarImage com src/alt e AvatarFallback com as iniciais — o fallback aparece enquanto a imagem
 carrega ou se ela falha.
@@ -12,8 +12,8 @@ carrega ou se ela falha.
 
 ## Fallback de iniciais
 
-Sem AvatarImage (ou com src quebrado), só o AvatarFallback renderiza — iniciais pra pessoa, ícone
-pra agente.
+Sem AvatarImage (ou com src quebrado), só o AvatarFallback renderiza — iniciais para pessoa, ícone
+para agente.
 
 ```tsx preview
 <Avatar>
@@ -28,7 +28,7 @@ pra agente.
 
 ## Tamanhos
 
-size sm/default/lg — o fallback acompanha o tamanho. sm pra listas densas, lg pra cabeçalho de
+size sm/default/lg — o fallback acompanha o tamanho. sm para listas densas, lg para cabeçalho de
 workspace.
 
 ```tsx preview
@@ -45,8 +45,8 @@ workspace.
 
 ## Com selo de status
 
-AvatarBadge é o ponto no canto inferior — verde pro agente developer rodando uma sessão, cinza
-pro ocioso. Tinja com className.
+AvatarBadge é o ponto no canto inferior — verde para o agente developer rodando uma sessão, cinza
+para o ocioso. Tinja com className.
 
 ```tsx preview
 <Avatar>
@@ -82,13 +82,33 @@ excedente — os membros do workspace Empresa X.
 </AvatarGroup>
 ```
 
-## Props
+## Propriedades de Avatar
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `size` (Avatar) | `'sm' \| 'default' \| 'lg'` | `'default'` | Diâmetro do retrato — o fallback e o selo acompanham. |
-| `src` (AvatarImage) | `string` | | URL da imagem. Enquanto carrega (ou se falha), o AvatarFallback fica no lugar. |
-| `alt` (AvatarImage) | `string` | | Texto alternativo da imagem — o nome da pessoa ou do agente. |
-| `children` (AvatarFallback) | `React.ReactNode` | | O que aparece sem imagem: iniciais (pessoa) ou ícone (agente). |
-| `className` (AvatarBadge) | `string` | | Selo no canto inferior — tinja o fundo (ex.: bg-emerald-500) pra refletir o status. |
-| `children` (AvatarGroupCount) | `React.ReactNode` | | O excedente da pilha (ex.: "+3"), fechando o AvatarGroup. |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Diâmetro do retrato; o fallback e o selo acompanham a escala. |
+
+## Propriedades de AvatarImage
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `src` | `string` | | URL da imagem. Enquanto ela carrega ou quando falha, `AvatarFallback` ocupa o lugar. |
+| `alt` | `string` | | Texto alternativo que identifica a pessoa ou o agente. |
+
+## Propriedades de AvatarFallback
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `children` | `React.ReactNode` | | Iniciais ou ícone exibido quando a imagem não está disponível. |
+
+## Propriedades de AvatarBadge
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `className` | `string` | | Classes usadas para comunicar visualmente o status no selo. |
+
+## Propriedades de AvatarGroupCount
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `children` | `React.ReactNode` | | Quantidade excedente no fim do grupo, como `+3`. |

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

@@ -1,35 +1,33 @@
-## Intenção
+## Contexto e variante
 
-As quatro variantes do shadcn: categoria, papel, alerta. Badge é não-interativo — pra clique, use
-Button.
+Badge é não-interativo — para clique, use Button. `context` comunica o significado; `variant`
+escolhe entre preenchimento sólido, superfície sutil ou contorno.
 
 ```tsx preview
-<Badge>Agente</Badge>
-<Badge variant="secondary">Skill</Badge>
-<Badge variant="outline">Monorepo</Badge>
-<Badge variant="destructive">Arquivado</Badge>
+<Badge context="neutral">Agente</Badge>
+<Badge context="neutral" variant="outline">Monorepo</Badge>
+<Badge context="danger" variant="solid">Arquivado</Badge>
 ```
 
-## Tons de status da casa
+## Contextos de status
 
-success/warning/info/danger (fill tingido + borda translúcida) — convenção da casa pra estado
-semântico, igual ao KindBadge do Maestro. Não-interativos. `danger` é o tom tonal da família;
-`destructive` continua sólido, pra alerta e ação. Valor de dicionário com papel declarado usa
-`DictionaryValue`, que escolhe o tom pela metadata em vez de repetir esta escolha em cada tela.
+`success`, `warning`, `info` e `danger` usam `subtle` por padrão. Valor de dicionário com papel
+declarado usa `DictionaryValue`, que escolhe o contexto pela metadata em vez de repetir esta
+decisão em cada tela.
 
 ```tsx preview
-<Badge variant="success">Ativa</Badge>
-<Badge variant="warning">Aguardando revisor</Badge>
-<Badge variant="info">Em sessão</Badge>
-<Badge variant="danger">Bloqueada</Badge>
+<Badge context="success">Ativa</Badge>
+<Badge context="warning">Aguardando revisor</Badge>
+<Badge context="info">Em sessão</Badge>
+<Badge context="danger">Bloqueada</Badge>
 ```
 
 ## Com ícone
 
-Um svg filho ganha size-3 automaticamente — bom pra reforçar o estado sem crescer o rótulo.
+Um svg filho ganha size-3 automaticamente — bom para reforçar o estado sem crescer o rótulo.
 
 ```tsx preview
-<Badge variant="success"><CircleCheck /> Regressão verde</Badge>
+<Badge context="success"><CircleCheck /> Regressão verde</Badge>
 ```
 
 ## Como link (asChild)
@@ -38,14 +36,15 @@ asChild renderiza o filho (Radix Slot) — um `<a>` com cara de badge, com hover
 variantes.
 
 ```tsx preview
-<Badge asChild variant="secondary">
+<Badge asChild context="neutral" variant="solid">
   <a href="#" onClick={(e) => e.preventDefault()}>Empresa X</a>
 </Badge>
 ```
 
-## Props
+## Propriedades de Badge
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'info' \| 'danger'` | `'default'` | Intenção (default/secondary/destructive/outline) ou tom de status da casa (success/warning/info/danger). |
+| `context` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | O significado ou destaque contextual. |
+| `variant` | `'solid' \| 'subtle' \| 'outline'` | `'subtle'` | O tratamento visual aplicado ao contexto. |
 | `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<span>` — ex.: um `<a>` com cara de badge. |

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

@@ -1,4 +1,4 @@
-## Básico
+## Caminho atual
 
 A composição é manual: BreadcrumbLink nos níveis navegáveis, BreadcrumbPage no atual (não
 clicável, aria-current=page) e um BreadcrumbSeparator entre cada item.
@@ -23,7 +23,7 @@ clicável, aria-current=page) e um BreadcrumbSeparator entre cada item.
 
 ## Com ícone e separador custom
 
-O primeiro nível pode levar um ícone do lucide. BreadcrumbSeparator aceita children pra trocar o
+O primeiro nível pode levar um ícone do lucide. BreadcrumbSeparator aceita children para trocar o
 chevron padrão por outro glifo (aqui, uma barra).
 
 ```tsx preview col-start
@@ -53,7 +53,7 @@ chevron padrão por outro glifo (aqui, uma barra).
 
 ## Colapsado
 
-Trilha funda demais pro espaço: BreadcrumbEllipsis substitui os níveis do meio (que viram um
+Trilha funda demais para o espaço: BreadcrumbEllipsis substitui os níveis do meio (que viram um
 menu/popover) e mantém só a raiz e o destino.
 
 ```tsx preview col-start
@@ -78,10 +78,15 @@ menu/popover) e mantém só a raiz e o destino.
 </Breadcrumb>
 ```
 
-## Props
+## Propriedades de BreadcrumbLink
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `asChild` (BreadcrumbLink) | `boolean` | `false` | Funde as props no filho (via Slot) — use pra integrar o Link do seu roteador no lugar do `<a>` nativo. |
-| `href` (BreadcrumbLink) | `string` | | Destino do nível navegável — o que o consumidor decide por item. |
-| `children` (BreadcrumbSeparator) | `React.ReactNode` | `<ChevronRight />` | Glifo entre os itens. Omita pro chevron padrão ou passe outro ícone. |
+| `asChild` | `boolean` | `false` | Repassa as propriedades ao filho para integrar o link do roteador no lugar de `<a>`. |
+| `href` | `string` | | Destino do nível navegável. |
+
+## Propriedades de BreadcrumbSeparator
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `children` | `React.ReactNode` | `<ChevronRight />` | Elemento entre os itens. Omita para usar o chevron padrão ou passe outro ícone. |

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

@@ -1,15 +1,17 @@
-## Variantes
+## Contexto e variante
 
-variant é intenção, não decoração: default pra ação principal (uma por tela), destructive só
-quando destrói de verdade.
+`context` declara a hierarquia ou o risco da ação; `variant` escolhe o tratamento visual. Use
+`primary` para a ação principal, `neutral` para ações de apoio e `danger` quando a ação tiver uma
+consequência perigosa. `default`, `secondary` e `destructive` permanecem apenas como aliases de
+compatibilidade.
 
 ```tsx preview
 <Button>Criar workspace</Button>
-<Button variant="secondary">Duplicar</Button>
-<Button variant="outline">Ver prévia</Button>
-<Button variant="ghost">Cancelar</Button>
-<Button variant="destructive">Excluir</Button>
-<Button variant="link">Ver documentação</Button>
+<Button context="neutral" variant="solid">Duplicar</Button>
+<Button context="neutral" variant="outline">Ver prévia</Button>
+<Button context="neutral" variant="ghost">Cancelar</Button>
+<Button context="danger" variant="solid">Excluir</Button>
+<Button context="primary" variant="link">Ver documentação</Button>
 ```
 
 ## Tamanhos
@@ -29,7 +31,7 @@ O tamanho icon exige `aria-label`, porque não há texto visível. Os botões s
 
 busy = ação em andamento (DEPOIS do clique): o Spinner e o disabled vêm do botão. Com icon, o
 Spinner TROCA o ícone (não soma). Não confunda com carregar conteúdo (ANTES) — isso é Spinner
-centralizado/Skeleton num nível de página.
+centralizado/Skeleton em um nível de página.
 
 ```tsx preview
 <Button disabled>Desabilitado</Button>
@@ -41,7 +43,7 @@ centralizado/Skeleton num nível de página.
 ## Como outro elemento (asChild)
 
 Âncora com cara de botão: asChild renderiza o filho (Radix Slot) — sem forkar estilo.
-buttonVariants serve pro caso sem filho único.
+buttonVariants serve para o caso sem filho único.
 
 ```tsx preview
 <Button asChild variant="outline">
@@ -49,12 +51,88 @@ buttonVariants serve pro caso sem filho único.
 </Button>
 ```
 
-## Props
+## Propriedades de Button
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'` | `'default'` | A intenção da ação — define cor e peso visual. |
+| `context` | `'neutral' \| 'primary' \| 'danger'` | `'primary'` | A hierarquia ou o risco comunicado pela ação. |
+| `variant` | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'solid'` | O tratamento visual aplicado ao contexto. |
 | `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (2.25/2/1.5rem) para botões só de ícone, com `aria-label`. |
-| `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<button>` — pra âncoras e afins. |
-| `busy` | `boolean` | `false` | Ação em andamento (depois do clique): mostra Spinner + desabilita. Não é "carregando" de conteúdo (que é Spinner/Skeleton num nível de página). |
+| `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<button>` — para âncoras e afins. |
+| `busy` | `boolean` | `false` | Ação em andamento (depois do clique): mostra Spinner + desabilita. Não é "carregando" de conteúdo (que é Spinner/Skeleton em um nível de página). |
 | `icon` | `React.ElementType` | | Ícone à esquerda (ex.: icon={Plus}). No busy é trocado pelo Spinner — não soma. |
+
+## ButtonGroup
+
+Use `ButtonGroup` quando ações relacionadas precisarem formar um bloco contínuo. As bordas internas
+colapsam e somente as pontas externas permanecem arredondadas. Mantenha a mesma variante nos filhos
+para preservar a unidade visual.
+
+```tsx preview
+<ButtonGroup>
+  <Button variant="outline">Visão geral</Button>
+  <Button variant="outline">Sessões</Button>
+  <Button variant="outline">Habilidades</Button>
+</ButtonGroup>
+```
+
+### Ação dividida
+
+Combine a ação principal, um separador e um botão de ícone quando o mesmo comando oferecer
+variações.
+
+```tsx preview
+<ButtonGroup>
+  <Button icon={Play}>Rodar agente developer</Button>
+  <ButtonGroupSeparator />
+  <Button size="icon" aria-label="Mais opções">
+    <ChevronDown />
+  </Button>
+</ButtonGroup>
+```
+
+### Com rótulo
+
+`ButtonGroupText` adiciona um contexto inerte ao grupo. Ele também aceita `asChild` para assumir a
+semântica de outro elemento, como `label`.
+
+```tsx preview
+<ButtonGroup>
+  <ButtonGroupText>
+    <GitBranch />
+    empresa-x-api
+  </ButtonGroupText>
+  <Button variant="outline" icon={RotateCw}>Sincronizar</Button>
+</ButtonGroup>
+```
+
+### Vertical
+
+`orientation="vertical"` empilha os filhos e transfere a junção das bordas para o eixo vertical.
+
+```tsx preview col-start
+<ButtonGroup orientation="vertical">
+  <Button variant="outline" size="icon" aria-label="Rodar sessão"><Play /></Button>
+  <Button variant="outline" size="icon" aria-label="Pausar sessão"><Pause /></Button>
+  <Button variant="outline" size="icon" aria-label="Reiniciar sessão"><RotateCw /></Button>
+</ButtonGroup>
+```
+
+### Propriedades de ButtonGroup
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção do bloco e do colapso das bordas. |
+| `shape` | `'default' \| 'pill'` | `'default'` | Geometria das extremidades externas do grupo. |
+
+### Propriedades de ButtonGroupSeparator
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Direção do traço divisor; use vertical em grupos horizontais. |
+
+### Propriedades de ButtonGroupText
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `asChild` | `boolean` | `false` | Renderiza como o filho para assumir outra semântica sem perder o estilo. |

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

@@ -17,7 +17,7 @@ render(
 
 ## Intervalo
 
-mode=range guarda { from, to } — o padrão pra filtrar sessões por janela de datas. O primeiro clique fixa o início; o segundo, o fim.
+mode=range guarda { from, to } — o padrão para filtrar sessões por janela de datas. O primeiro clique fixa o início; o segundo, o fim.
 
 ```tsx preview
 const [week, setWeek] = useState<DateRange | undefined>({
@@ -37,7 +37,7 @@ render(
 
 ## Navegação por dropdown
 
-captionLayout=dropdown troca o título do mês por seletores de mês e ano — bom pra pular pra um período distante (ex.: histórico de um repositório) sem clicar mês a mês.
+captionLayout=dropdown troca o título do mês por seletores de mês e ano — bom para pular para um período distante (ex.: histórico de um repositório) sem clicar mês a mês.
 
 ```tsx preview
 <Calendar
@@ -47,16 +47,16 @@ captionLayout=dropdown troca o título do mês por seletores de mês e ano — b
 />
 ```
 
-## Props
+## Propriedades de Calendar
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
 | `mode` | `'single' \| 'multiple' \| 'range'` | | O tipo de seleção — define o formato de selected/onSelect (Date, Date[] ou { from, to }). |
 | `selected` | `Date \| Date[] \| DateRange` | | A seleção atual no modo controlado — o formato segue o mode. Pareie com onSelect. |
 | `onSelect` | `(selected) => void` | | Chamado quando o usuário escolhe uma data. O argumento segue o mode. |
 | `defaultMonth` | `Date` | | O mês exibido ao montar, sem afetar a seleção. |
 | `captionLayout` | `'label' \| 'dropdown' \| 'dropdown-months' \| 'dropdown-years'` | `'label'` | Como o título do mês aparece — label é texto fixo; dropdown vira seletores de mês e ano. |
-| `numberOfMonths` | `number` | `1` | Quantos meses mostrar lado a lado — útil pra escolher um intervalo longo. |
+| `numberOfMonths` | `number` | `1` | Quantos meses mostrar lado a lado — útil para escolher um intervalo longo. |
 | `disabled` | `Matcher` | | Datas não selecionáveis — uma Date, um array, um { from, to } ou um predicado (date) => boolean. |
 | `buttonVariant` | `Button['variant']` | `'ghost'` | A variante dos botões de navegação (anterior/próximo). |
 | `showOutsideDays` | `boolean` | `true` | Mostra os dias do mês vizinho que completam a primeira e a última semana. |

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

@@ -10,7 +10,7 @@ O uso mais comum: a superfície de conteúdo em repouso (`rounded-xl` + `border`
 
 ## Estruturado (header / conteúdo / rodapé)
 
-Pra painel com estrutura: cada slot é dono do próprio padding (como o Dialog). CardTitle/CardDescription no header; CardFooter alinha as ações.
+Para painel com estrutura: cada slot é dono do próprio padding (como o Dialog). CardTitle/CardDescription no header; CardFooter alinha as ações.
 
 ```tsx preview col
 <Card>
@@ -18,9 +18,9 @@ Pra painel com estrutura: cada slot é dono do próprio padding (como o Dialog).
     <CardTitle>Empresa X</CardTitle>
     <CardDescription>2 repositórios · 3 agentes vinculados.</CardDescription>
   </CardHeader>
-  <CardContent>
+  <CardBody>
     <p className="text-sm text-muted-foreground">Última sessão concluída há 2 horas.</p>
-  </CardContent>
+  </CardBody>
   <CardFooter className="gap-2">
     <Button size="sm">Abrir sessão</Button>
     <Button size="sm" variant="outline">Ver repositórios</Button>
@@ -38,11 +38,11 @@ Pra painel com estrutura: cada slot é dono do próprio padding (como o Dialog).
     <CardTitle>Skill code-style</CardTitle>
     <CardDescription>Padrão softize de código e microcopy.</CardDescription>
   </CardHeader>
-  <CardContent>
+  <CardBody>
     <p className="text-sm text-muted-foreground">Vinculada a 4 agentes neste workspace.</p>
-  </CardContent>
+  </CardBody>
   <CardFooter className="justify-between border-t">
-    <Badge variant="success">Publicada</Badge>
+    <Badge context="success">Publicada</Badge>
     <Button size="sm" variant="outline">Editar skill</Button>
   </CardFooter>
 </Card>

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

@@ -1,6 +1,6 @@
-## Básico
+## Um slide por vez
 
-Compõe Carousel>CarouselContent>CarouselItem, com CarouselPrevious/CarouselNext pra navegar. As setas ficam fora do trilho (-left-12/-right-12), então reserve a margem lateral no entorno.
+Compõe Carousel>CarouselContent>CarouselItem, com CarouselPrevious/CarouselNext para navegar. As setas ficam fora do trilho (-left-12/-right-12), então reserve a margem lateral no entorno.
 
 ```tsx preview
 <Carousel className="mx-12 w-full max-w-xs">
@@ -28,7 +28,7 @@ Compõe Carousel>CarouselContent>CarouselItem, com CarouselPrevious/CarouselNext
 
 ## Vários por vista
 
-O basis do CarouselItem decide quantos cabem na vista — basis-1/3 mostra três slides por vez. Bom pra galeria de workspaces ou repositórios.
+O basis do CarouselItem decide quantos cabem na vista — basis-1/3 mostra três slides por vez. Bom para galeria de workspaces ou repositórios.
 
 ```tsx preview
 <Carousel className="mx-12 w-full max-w-sm" opts={{ align: 'start' }}>
@@ -48,7 +48,7 @@ O basis do CarouselItem decide quantos cabem na vista — basis-1/3 mostra três
 
 ## Vertical
 
-orientation=vertical empilha os slides; as setas migram pra cima e pra baixo (-top-12/-bottom-12). Dê uma altura ao CarouselContent pra delimitar a vista.
+orientation=vertical empilha os slides; as setas migram para cima e para baixo (-top-12/-bottom-12). Dê uma altura ao CarouselContent para delimitar a vista.
 
 ```tsx preview
 <Carousel className="w-full max-w-xs" orientation="vertical">
@@ -74,12 +74,17 @@ orientation=vertical empilha os slides; as setas migram pra cima e pra baixo (-t
 </Carousel>
 ```
 
-## Props
+## Propriedades de Carousel
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `orientation (Carousel)` | `'horizontal' \| 'vertical'` | `'horizontal'` | Eixo do deslize — vertical empilha os slides e gira as setas pro topo/base. |
-| `opts (Carousel)` | `CarouselOptions` | | Opções do embla (ex.: { loop: true }, { align: "start" }). Repassadas direto pro motor. |
-| `setApi (Carousel)` | `(api: CarouselApi) => void` | | Recebe a instância do embla pra controlar de fora (scrollTo, ler o slide ativo). |
-| `plugins (Carousel)` | `CarouselPlugin` | | Plugins do embla (ex.: autoplay) anexados ao carousel. |
-| `className (CarouselItem)` | `string` | | O basis decide quantos slides cabem na vista (basis-full, basis-1/2, basis-1/3). |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Eixo do deslocamento. No modo vertical, os slides são empilhados e as setas apontam para cima e para baixo. |
+| `opts` | `CarouselOptions` | | Opções repassadas ao Embla, como `{ loop: true }` ou `{ align: 'start' }`. |
+| `setApi` | `(api: CarouselApi) => void` | | Recebe a instância para controle externo, como navegar com `scrollTo` ou ler o slide ativo. |
+| `plugins` | `CarouselPlugin[]` | | Plugins do Embla associados ao carrossel, como autoplay. |
+
+## Propriedades de CarouselItem
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `className` | `string` | | Classes de dimensão; a base define quantos slides cabem na área visível. |

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

@@ -1,6 +1,6 @@
-## Básico
+## Conversa com resposta integral
 
-Um chat mínimo: lista de mensagens + composer. A conversa é gerenciada por dentro (estado, loading, auto-scroll; **Enter** envia, **Shift+Enter** quebra linha) — a inteligência vem da prop `send`. Com o composer vazio, **↑** recupera as mensagens anteriores do usuário e **↓** volta em direção ao rascunho; durante a edição, as setas continuam movendo o cursor normalmente. O `greeting` é o estado vazio (centrado; some quando a conversa começa e NÃO entra no transcript). Dê altura ao container.
+Um chat mínimo: lista de mensagens + composer. A conversa é gerenciada por dentro (estado, loading, auto-scroll; **Enter** envia, **Shift+Enter** quebra linha) — a inteligência vem da prop `send`. Com o composer vazio, **↑** recupera as mensagens anteriores do usuário e **↓** volta em direção ao rascunho; durante a edição, as setas continuam movendo o cursor normalmente. O `greeting` é o estado vazio (centrado; some quando a conversa começa e não entra no transcript). Dê altura ao container.
 
 ```tsx preview
 <div className="h-96 rounded-lg border">
@@ -9,7 +9,7 @@ Um chat mínimo: lista de mensagens + composer. A conversa é gerenciada por den
     send={async (messages) => {
       await new Promise((r) => setTimeout(r, 500))
       const last = messages[messages.length - 1]
-      return `Você disse: "${last.content}". (Num app real, aqui rodaria o agente.)`
+      return `Você disse: "${last.content}". (Em um app real, aqui rodaria o agente.)`
     }}
   />
 </div>

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

@@ -1,6 +1,6 @@
-## Básico
+## Escolha booleana
 
-Sempre em par com Label (htmlFor↔id) — clicar no texto alterna a caixa. defaultChecked pro modo não controlado.
+Sempre em par com Label (htmlFor↔id) — clicar no texto alterna a caixa. defaultChecked para o modo não controlado.
 
 ```tsx preview
 <div className="flex items-center gap-2">
@@ -11,7 +11,7 @@ Sempre em par com Label (htmlFor↔id) — clicar no texto alterna a caixa. defa
 
 ## Controlado
 
-onCheckedChange recebe boolean | 'indeterminate' — compare com true pra guardar um boolean.
+onCheckedChange recebe boolean | 'indeterminate' — compare com true para guardar um boolean.
 
 ```tsx preview
 const [autoReview, setAutoReview] = useState(true)
@@ -30,7 +30,7 @@ render(
 
 ## Lista de opções
 
-Várias caixas, um estado: o conjunto marcado é a lista de valores — o padrão pra anexar skills a um agente.
+Várias caixas, um estado: o conjunto marcado é a lista de valores — o padrão para anexar skills a um agente.
 
 ```tsx preview col-start
 const [skills, setSkills] = useState(['clean-code', 'test'])
@@ -65,11 +65,11 @@ disabled esmaece a caixa e o rótulo em par (peer-disabled no Label) — marcado
 </div>
 ```
 
-## Props
+## Propriedades de Checkbox
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
 | `checked` | `boolean \| 'indeterminate'` | | O estado, no modo controlado — parear com onCheckedChange. |
-| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | | Chamado a cada alternância. Pra guardar um boolean, compare com true. |
+| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | | Chamado a cada alternância. Para guardar um boolean, compare com true. |
 | `defaultChecked` | `boolean` | `false` | Estado inicial no modo não controlado. |
 | `disabled` | `boolean` | `false` | Esmaece e bloqueia — o Label em par esmaece junto (peer-disabled). |

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

@@ -5,7 +5,7 @@ title: CLI opus
 # CLI opus
 
 O Opus traz um CLI que cobre o ciclo: faz o bootstrap, gera artefatos a partir das declarações,
-valida as convenções e expõe o estado vivo pros agentes via MCP.
+valida as convenções e expõe o estado vivo para os agentes via MCP.
 
 ## Gates
 
@@ -38,7 +38,7 @@ mesma CLI.
 ## Geração e introspecção
 
 > As declarações (`description` de entidades/actions) são a fonte; o `gen` as projeta. O manifest
-> é um lockfile commitado — diff de manifest é ouro pra review.
+> é um lockfile versionado. A diferença do manifest torna a revisão objetiva.
 
 ```bash
 opus gen              # manifest / openapi / docs / stubs a partir do opus.config.ts
@@ -57,17 +57,17 @@ opus create meu-cliente --monorepo  # a RAIZ de um workspace (apps/* + packages/
 opus create apps/portal          # dentro de um workspace: só o app (modo detectado)
 opus setup                       # grava opus.json e materializa a camada específica do SDK
 opus list                        # lista os templates disponíveis
-opus add action-form             # copia um template do catálogo pro projeto
+opus add action-form             # copia um template do catálogo para o projeto
 ```
 
 O esqueleto do `create` versiona com o Opus (sai do mesmo pacote que o SDK que ele
 configura) e nasce com os gates verdes: domínio-exemplo canônico, teste, manifest e o dev
-server pronto pro preview do Maestro. O método geral, a memória e a revisão vêm da Base
+server pronto para o preview do Maestro. O método geral, a memória e a revisão vêm da Base
 depois de `pnpm run setup`. Dois modos, por detecção:
 repo standalone (template inteiro) ou **app em monorepo** (dentro de um workspace pnpm:
 só os arquivos do app; o que a raiz precisa ter vira aviso, sem clobber).
 
-## MCP — estado vivo pros agentes
+## MCP — estado vivo para os agentes
 
 > O server MCP expõe introspecção, check e scaffold de action. É como um agente lê a estrutura e cria
 > action no formato canônico sem decorar convenção.

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

@@ -1,4 +1,4 @@
-## Básico
+## Seção recolhível
 
 CollapsibleTrigger alterna o CollapsibleContent — o Trigger já é o <button>. defaultOpen deixa o estado com o componente.
 
@@ -18,7 +18,7 @@ CollapsibleTrigger alterna o CollapsibleContent — o Trigger já é o <button>.
 
 ## Controlado
 
-open + onOpenChange põem o estado nas suas mãos — dá pra refletir no gatilho (aqui o chevron gira) ou guardar a preferência.
+open + onOpenChange põem o estado nas suas mãos — dá para refletir no gatilho (aqui o chevron gira) ou guardar a preferência.
 
 ```tsx preview col
 const [open, setOpen] = useState(false)
@@ -54,11 +54,11 @@ disabled no Collapsible trava o gatilho — a seção fica fixa no estado atual
 </Collapsible>
 ```
 
-## Props
+## Propriedades de Collapsible
 
-| Prop | Tipo | Default | Descrição |
+| Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `defaultOpen (Collapsible)` | `boolean` | `false` | Estado inicial no modo não controlado. |
-| `open (Collapsible)` | `boolean` | | Estado no modo controlado — pareie com onOpenChange. |
-| `onOpenChange (Collapsible)` | `(open: boolean) => void` | | Chamado a cada abertura ou fechamento. |
-| `disabled (Collapsible)` | `boolean` | `false` | Trava o gatilho — a seção fica presa no estado atual. |
+| `defaultOpen` | `boolean` | `false` | Estado inicial no modo não controlado. |
+| `open` | `boolean` | | Estado no modo controlado. Use com `onOpenChange`. |
+| `onOpenChange` | `(open: boolean) => void` | | Chamado a cada abertura ou fechamento. |
+| `disabled` | `boolean` | `false` | Bloqueia o gatilho e mantém a seção no estado atual. |