@softize/opus 21.0.0 → 22.0.0

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

@@ -89,8 +89,8 @@ fundo sustenta o modal, mas não é uma etapa para onde voltar. Formulários mod
 rodapé pelo conteúdo, com `Cancelar` em `ghost` e a ação principal sólida.
 
 Dentro de [`PageShell`](/ui/page), a superfície `page` usa a anatomia real da aplicação. O
-`PageHeader` recebe só a navegação e as ações globais; o título abre o conteúdo em `PageIntro`, e o
-corpo vai para `PageBody`, com `PageFooter` quando há ações de rodapé.
+`PageHeader` reúne a navegação contextual, o título e as ações globais; o corpo vai para `PageBody`,
+com `PageFooter` quando há ações de rodapé.
 
 Uma Presentation de listagem exibida como página muda essa distribuição para manter a criação perto
 da coleção. O `PageBody` recebe um [`Content`](/ui/content) com a
@@ -186,7 +186,7 @@ lança um erro que nomeia a Presentation.
 
 Com `heading: "shell"`, o padrão, a casca emite o título da definição. Quando o conteúdo React já
 declara o heading principal da página, como um `Content level={1}`, use `heading: "content"`: dentro
-de `PageShell`, a casca deixa de emitir o `PageIntro` e o documento continua com um único `h1`. Em
+de `PageShell`, a casca deixa de emitir o `PageHeader` com título e o documento continua com um único `h1`. Em
 Dialog e Drawer, o título continua no cabeçalho da superfície.
 
 Se o conteúdo precisa ocupar a altura da página e controlar a própria rolagem, como uma lista com
@@ -231,24 +231,24 @@ no manifest e concentre a inspeção na Lens em vez de criar um launcher flutuan
 
 ## Propriedades de Presentation
 
-| Propriedade          | Tipo                                             | Padrão | Descrição                                                                                           |
-| -------------------- | ------------------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
-| `definition`         | `PresentationDefinition`                         |        | Artefato estático que descreve o recurso.                                                           |
-| `definitions`        | `PresentationDefinition[]`                       |        | Registry alcançável por navegação, abertura e retorno.                                              |
-| `actions`            | `PresentationActionRegistry`                     |        | Contratos compartilháveis referenciados pelo artefato.                                              |
-| `invocation`         | `PresentationInvocation`                         |        | Superfície, input e pilha da exibição atual.                                                        |
-| `bindingContext`     | `PresentationBindingContext`                     |        | Rota, item, seleção, sessão e resultado disponíveis.                                                |
-| `assistant`          | `PresentationAssistantRuntime`                   |        | Painel contextual fornecido pela superfície hospedeira.                                             |
-| `onInvocationChange` | `(next: PresentationInvocation \| null) => void` |        | Recebe navegação, retorno e fechamento.                                                             |
-| `onRefresh`          | `(action: string \| null) => void`               |        | Recebe invalidações declaradas após sucesso.                                                        |
-| `listState`          | `ActionListState`                                |        | Recorte controlado da action `list` do body, quando a aplicação o sincroniza com a URL.             |
-| `onListStateChange`  | `(state: ActionListState) => void`               |        | Recebe cada mudança de recorte ou exibição da lista do body, como busca, filtros, período e página. |
-| `open`               | `boolean`                                        | `true` | Estado controlado de Dialog ou Drawer.                                                              |
-| `onOpenChange`       | `(open: boolean) => void`                        |        | Notifica abertura e fechamento da superfície modal.                                                 |
-| `className`          | `string`                                         |        | Classes adicionais da superfície.                                                                   |
-| `bodyClassName`      | `string`                                         |        | Classes adicionais do body, aplicadas uma única vez.                                                |
+| Propriedade          | Tipo                                             | Padrão   | Descrição                                                                                                                                                                         |
+| -------------------- | ------------------------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `definition`         | `PresentationDefinition`                         |          | Artefato estático que descreve o recurso.                                                                                                                                         |
+| `definitions`        | `PresentationDefinition[]`                       |          | Registry alcançável por navegação, abertura e retorno.                                                                                                                            |
+| `actions`            | `PresentationActionRegistry`                     |          | Contratos compartilháveis referenciados pelo artefato.                                                                                                                            |
+| `invocation`         | `PresentationInvocation`                         |          | Superfície, input e pilha da exibição atual.                                                                                                                                      |
+| `bindingContext`     | `PresentationBindingContext`                     |          | Rota, item, seleção, sessão e resultado disponíveis.                                                                                                                              |
+| `assistant`          | `PresentationAssistantRuntime`                   |          | Painel contextual fornecido pela superfície hospedeira.                                                                                                                           |
+| `onInvocationChange` | `(next: PresentationInvocation \| null) => void` |          | Recebe navegação, retorno e fechamento.                                                                                                                                           |
+| `onRefresh`          | `(action: string \| null) => void`               |          | Recebe invalidações declaradas após sucesso.                                                                                                                                      |
+| `listState`          | `ActionListState`                                |          | Recorte controlado da action `list` do body, quando a aplicação o sincroniza com a URL.                                                                                           |
+| `onListStateChange`  | `(state: ActionListState) => void`               |          | Recebe cada mudança de recorte ou exibição da lista do body, como busca, filtros, período e página.                                                                               |
+| `open`               | `boolean`                                        | `true`   | Estado controlado de Dialog ou Drawer.                                                                                                                                            |
+| `onOpenChange`       | `(open: boolean) => void`                        |          | Notifica abertura e fechamento da superfície modal.                                                                                                                               |
+| `className`          | `string`                                         |          | Classes adicionais da superfície.                                                                                                                                                 |
+| `bodyClassName`      | `string`                                         |          | Classes adicionais do body, aplicadas uma única vez.                                                                                                                              |
 | `layout`             | `'flow' \| 'fill'`                               | `'flow'` | Em `page`, `fill` limita a altura ao shell e entrega a rolagem ao conteúdo do body; a lista de um body `list` ocupa essa altura e rola só os resultados. Dialog e Drawer ignoram. |
-| `children`           | `ReactNode`                                      |        | Conteúdo React do body declarado com `body.component`. Obrigatório nesse caso e recusado com `body.action`. |
+| `children`           | `ReactNode`                                      |          | Conteúdo React do body declarado com `body.component`. Obrigatório nesse caso e recusado com `body.action`.                                                                       |
 
 ## Propriedades de PresentationInspector
 

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

@@ -10,32 +10,91 @@ mostrar somente o ícone, declare `aria-label` para preservar seu nome acessíve
 ```tsx preview col
 <Tabs defaultValue="sessions">
   <TabsList>
-    <TabsTrigger value="overview" icon={<LayoutDashboard />}>Visão geral</TabsTrigger>
-    <TabsTrigger value="sessions" icon={<History />}>Sessões</TabsTrigger>
-    <TabsTrigger value="skills" icon={<Settings />}>Skills</TabsTrigger>
+    <TabsTrigger value="overview" icon={<LayoutDashboard />}>
+      Visão geral
+    </TabsTrigger>
+    <TabsTrigger value="sessions" icon={<History />}>
+      Sessões
+    </TabsTrigger>
+    <TabsTrigger value="skills" icon={<Settings />}>
+      Skills
+    </TabsTrigger>
   </TabsList>
   <TabsContent value="overview">
-    <p className="text-sm text-muted-foreground">Resumo do workspace Empresa X.</p>
+    <p className="text-sm text-muted-foreground">
+      Resumo do workspace Empresa X.
+    </p>
   </TabsContent>
   <TabsContent value="sessions">
-    <p className="text-sm text-muted-foreground">3 sessões nesta semana, 1 em andamento.</p>
+    <p className="text-sm text-muted-foreground">
+      3 sessões nesta semana, 1 em andamento.
+    </p>
   </TabsContent>
   <TabsContent value="skills">
-    <p className="text-sm text-muted-foreground">6 skills vinculadas aos agentes do workspace.</p>
+    <p className="text-sm text-muted-foreground">
+      6 skills vinculadas aos agentes do workspace.
+    </p>
   </TabsContent>
 </Tabs>
 ```
 
+## Emoldurar abas e painéis
+
+Use `framed` quando a navegação e seus painéis precisarem formar um único bloco. A propriedade
+reúne borda, raio e recorte no próprio `Tabs`, mas não aplica fundo: o bloco herda a
+superfície em que foi composto. Por isso, não envolva `Tabs` em um `Card` somente para obter essa
+moldura.
+
+```tsx preview col
+<Tabs defaultValue="overview" framed className="gap-0">
+  <TabsList variant="line" className="px-2 pt-2">
+    <TabsTrigger value="overview">Visão geral</TabsTrigger>
+    <TabsTrigger value="history">Histórico</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview" className="p-4">
+    <p className="text-sm text-muted-foreground">
+      Resumo do workspace Empresa X.
+    </p>
+  </TabsContent>
+  <TabsContent value="history" className="p-4">
+    <p className="text-sm text-muted-foreground">
+      Alterações recentes do workspace.
+    </p>
+  </TabsContent>
+</Tabs>
+```
+
+## Distribuir as abas igualmente
+
+Use `distribution="equal"` quando as seções tiverem o mesmo nível e precisarem repartir a largura
+disponível. O valor padrão, `content`, mantém cada gatilho com a largura do próprio rótulo. A
+área interativa e o fundo de hover ocupam toda a fração recebida pela aba. A distribuição não
+altera os painéis associados.
+
+```tsx preview col
+<Tabs defaultValue="overview" distribution="equal">
+  <TabsList variant="line">
+    <TabsTrigger value="overview">Visão geral</TabsTrigger>
+    <TabsTrigger value="contacts">Contatos</TabsTrigger>
+    <TabsTrigger value="history">Histórico</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Resumo do atendimento.</TabsContent>
+  <TabsContent value="contacts">Tentativas de contato.</TabsContent>
+  <TabsContent value="history">Alterações registradas.</TabsContent>
+</Tabs>
+```
+
 ## Variante line
 
 Use `variant="line"` em `TabsList` quando a navegação precisar de uma linha-base, como em um
 cabeçalho. Na orientação horizontal, a lista ocupa toda a largura disponível e a aba ativa é
-marcada sobre essa linha, em vez de usar uma superfície preenchida. Dentro de `DrawerBody`, a
-linha atravessa o gutter até as bordas do drawer sem deslocar os rótulos. O mesmo comportamento
-vale para `DialogBody`.
-Os itens removem o padding horizontal, usam `0.75rem` de padding vertical e preservam `1.25rem`
-de espaço entre si. Nessa orientação, a altura é definida pelo conteúdo para que o padding
-vertical amplie a área interativa.
+marcada sobre essa linha, em vez de usar uma superfície preenchida. A linha respeita o recuo do
+contêiner; dentro de `DrawerBody` e `DialogBody`, ela acompanha o alinhamento do restante do corpo
+sem alcançar as laterais da superfície.
+Cada item contém uma área interativa com a mesma altura de um Button do tamanho correspondente. A
+área permanece transparente e recebe fundo apenas no hover; a aba ativa é indicada pela linha
+primária inferior. Um respiro de `0.375rem` separa o controle dessa linha; em `Tabs framed`, ele
+aumenta para `0.5rem` e acompanha o padding superior da moldura.
 
 ```tsx preview col
 <Tabs defaultValue="agents">
@@ -45,10 +104,14 @@ vertical amplie a área interativa.
     <TabsTrigger value="settings">Configurações</TabsTrigger>
   </TabsList>
   <TabsContent value="agents">
-    <p className="text-sm text-muted-foreground">developer, reviewer e designer ativos.</p>
+    <p className="text-sm text-muted-foreground">
+      developer, reviewer e designer ativos.
+    </p>
   </TabsContent>
   <TabsContent value="repos">
-    <p className="text-sm text-muted-foreground">empresa-x-api e empresa-x-web vinculados.</p>
+    <p className="text-sm text-muted-foreground">
+      empresa-x-api e empresa-x-web vinculados.
+    </p>
   </TabsContent>
   <TabsContent value="settings">
     <p className="text-sm text-muted-foreground">Preferências do workspace.</p>
@@ -69,13 +132,19 @@ Com `orientation="vertical"`, a lista forma uma coluna. O exemplo usa a variante
     <TabsTrigger value="history">Histórico</TabsTrigger>
   </TabsList>
   <TabsContent value="prompt">
-    <p className="text-sm text-muted-foreground">O prompt do agente developer.</p>
+    <p className="text-sm text-muted-foreground">
+      O prompt do agente developer.
+    </p>
   </TabsContent>
   <TabsContent value="skills">
-    <p className="text-sm text-muted-foreground">Skills vinculadas a este agente.</p>
+    <p className="text-sm text-muted-foreground">
+      Skills vinculadas a este agente.
+    </p>
   </TabsContent>
   <TabsContent value="history">
-    <p className="text-sm text-muted-foreground">Sessões anteriores deste agente.</p>
+    <p className="text-sm text-muted-foreground">
+      Sessões anteriores deste agente.
+    </p>
   </TabsContent>
 </Tabs>
 ```
@@ -98,31 +167,33 @@ mais alto que os elementos vizinhos.
 
 ## Propriedades de Tabs
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `defaultValue` | `string` | | Aba inicial no modo não controlado. |
-| `value` | `string` | | Aba ativa no modo controlado. Use com `onValueChange`. |
-| `onValueChange` | `(value: string) => void` | | Chamado quando a pessoa seleciona outra aba. |
-| `size` | `'default' \| 'sm'` | `'default'` | Altura da lista na escala única dos controles (2.25 e 2rem), aplicada em `TabsList`. Não altera a altura de `line` horizontal, que acompanha o conteúdo. |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção da lista de abas. |
+| Propriedade     | Tipo                         | Padrão         | Descrição                                                                                                                                                |
+| --------------- | ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `defaultValue`  | `string`                     |                | Aba inicial no modo não controlado.                                                                                                                      |
+| `value`         | `string`                     |                | Aba ativa no modo controlado. Use com `onValueChange`.                                                                                                   |
+| `onValueChange` | `(value: string) => void`    |                | Chamado quando a pessoa seleciona outra aba.                                                                                                             |
+| `size`          | `'default' \| 'sm'`          | `'default'`    | Altura da lista na escala única dos controles (2.25 e 2rem), aplicada em `TabsList`. Não altera a altura de `line` horizontal, que acompanha o conteúdo. |
+| `distribution`  | `'content' \| 'equal'`       | `'content'`    | Preserva a largura dos rótulos ou divide igualmente a largura disponível entre os gatilhos.                                                              |
+| `framed`        | `boolean`                    | `false`        | Aplica borda, raio e recorte ao conjunto sem definir fundo ou foreground.                                                                                |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção da lista de abas.                                                                                                                                |
 
 ## Propriedades de TabsList
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `variant` | `'default' \| 'line'` | `'default'` | `default` usa uma superfície preenchida; `line` cria uma linha-base horizontal de largura total e marca nela a aba ativa. |
+| Propriedade | Tipo                  | Padrão      | Descrição                                                                                                                 |
+| ----------- | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `variant`   | `'default' \| 'line'` | `'default'` | `default` usa uma superfície preenchida; `line` cria uma linha-base horizontal de largura total e marca nela a aba ativa. |
 
 ## Propriedades de TabsTrigger
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `value` | `string` | | Identificador que associa o gatilho ao `TabsContent` correspondente. |
-| `icon` | `ReactNode` | | Ícone decorativo antes do rótulo, em `1rem`. Em uma aba sem texto, declare também `aria-label`. |
-| `disabled` | `boolean` | `false` | Impede a seleção da aba. |
+| Propriedade | Tipo        | Padrão  | Descrição                                                                                       |
+| ----------- | ----------- | ------- | ----------------------------------------------------------------------------------------------- |
+| `value`     | `string`    |         | Identificador que associa o gatilho ao `TabsContent` correspondente.                            |
+| `icon`      | `ReactNode` |         | Ícone decorativo antes do rótulo, em `1rem`. Em uma aba sem texto, declare também `aria-label`. |
+| `disabled`  | `boolean`   | `false` | Impede a seleção da aba.                                                                        |
 
 ## Propriedades de TabsContent
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `value` | `string` | | Identificador do painel, igual ao `value` do `TabsTrigger` que o abre. |
-| `forceMount` | `true` | | Mantém o painel montado mesmo quando outra aba está ativa. |
+| Propriedade  | Tipo     | Padrão | Descrição                                                              |
+| ------------ | -------- | ------ | ---------------------------------------------------------------------- |
+| `value`      | `string` |        | Identificador do painel, igual ao `value` do `TabsTrigger` que o abre. |
+| `forceMount` | `true`   |        | Mantém o painel montado mesmo quando outra aba está ativa.             |

package/src/ui/meta.ts

@@ -63,7 +63,7 @@ export const componentMeta = {
     name: "detail",
     ancestry: "opus",
     whenToUse:
-      'Apresente dados somente leitura como pares de rótulo e valor. DetailGroup organiza os DetailField com a semântica de uma lista de definições; `columns` controla a grade, `orientation` posiciona rótulo e valor e, no modo horizontal, alinha os rótulos em uma coluna compartilhada. `variant="framed"` aplica a moldura e `dividers` acrescenta somente as divisórias internas. Para entrada, validação e erro, use Field; para uma coleção pesquisável, use ActionList.',
+      'Apresente dados somente leitura como pares de rótulo e valor. DetailGroup organiza os DetailField com a semântica de uma lista de definições; `columns` controla a grade e `orientation` posiciona rótulo e valor. Em orientação horizontal, `dividers` ativa o tratamento tabular completo: divisórias, padding por célula, fundo sutil e largura compartilhada dos rótulos. `variant="framed"` aplica somente a moldura externa. Para entrada, validação e erro, use Field; para uma coleção pesquisável, use ActionList.',
   },
   dock: {
     name: "dock",
@@ -75,7 +75,7 @@ export const componentMeta = {
     name: "button",
     ancestry: "shadcn",
     whenToUse:
-      "Inicie uma ação com um controle clicável. Use `context` para o significado, `variant` para o tratamento visual e `size` para a escala compartilhada (`xs`…`lg` e os quadrados `icon-*`); `icon` recebe um nó e `busy` comunica o andamento e impede um novo acionamento. Para ações relacionadas, use ButtonGroup conectado ou espaçado.",
+      "Inicie uma ação com um controle clicável. Use `context` para o significado, `variant` para o tratamento visual e `size` para a escala compartilhada (`xs`…`lg` e os quadrados `icon-*`); `icon` recebe um nó e `busy` comunica o andamento e impede um novo acionamento. Para ações relacionadas, use ButtonGroup conectado, espaçado ou dividido.",
   },
   card: {
     name: "card",
@@ -123,7 +123,7 @@ export const componentMeta = {
     name: "content-header",
     ancestry: "opus",
     whenToUse:
-      'Estruture uma região com título e corpo. No caso comum, declare título, mídia, descrição, contador e ações diretamente em Content; use `framed` quando a região precisar de limite próprio, `frameVariant="legend"` para integrar visualmente o header à borda e `as="fieldset"` somente para agrupar campos sob uma legenda nativa. Componha ContentHeader apenas quando precisar controlar a anatomia.',
+      'Estruture uma região com título e corpo. No caso comum, declare título, mídia, descrição, contador e ações diretamente em Content; use `framed` quando a região precisar de limite próprio, `layout="sectioned"` quando o filho controlar o recuo do body, `frameVariant="legend"` para integrar visualmente o header à borda e `as="fieldset"` somente para agrupar campos sob uma legenda nativa. Componha ContentHeader apenas quando precisar controlar a anatomia.',
   },
   copyable: {
     name: "copyable",
@@ -201,7 +201,7 @@ export const componentMeta = {
     name: "tabs",
     ancestry: "shadcn",
     whenToUse:
-      "Alterne entre painéis relacionados no mesmo nível de navegação. Cada TabsTrigger aponta para um TabsContent pelo mesmo `value`; TabsList controla o tratamento visual e Tabs define orientação e escala.",
+      'Alterne entre painéis relacionados no mesmo nível de navegação. Cada TabsTrigger aponta para um TabsContent pelo mesmo `value`; TabsList controla o tratamento visual e Tabs define orientação, escala, distribuição e moldura. Use `distribution="equal"` para repartir a largura entre seções equivalentes e `framed` para delimitar o conjunto sem criar uma nova superfície.',
   },
   textarea: {
     name: "textarea",
@@ -412,7 +412,7 @@ export const componentMeta = {
     name: "page",
     ancestry: "opus",
     whenToUse:
-      "Estruture uma página com cabeçalho, introdução, estado e conteúdo na mesma anatomia. Page renderiza o `<main>` com um container centralizado de até 80rem (`max-w-7xl`); PageHeader declara navegação e ações globais, PageIntro é a introdução opcional e PageBody recebe o conteúdo. PageShell mantém a barra persistente de 3.75rem e projeta nela os slots do PageHeader. Uma região interna pode fornecer o heading principal com Content. PageActionsTarget fica restrito a workspaces imersivos sem PageShell. PageState substitui o conteúdo inteiro durante carregamento, falha ou ausência e oculta PageIntro, por isso informações indispensáveis entram no corpo, como Alert ou texto. Para uma falha parcial, mantenha o estado na seção com DataState; para uma região disponível à criação ou vínculo, use Empty.",
+      "Estruture uma página com cabeçalho, estado e conteúdo na mesma anatomia. Page renderiza o `<main>` com um container centralizado de até 80rem (`max-w-7xl`); PageHeader reúne navegação contextual opcional, título e ações, enquanto PageBody recebe o conteúdo. PageShell pode fornecer navegação e ações conhecidas pela aplicação sem criar uma barra visual. Uma região interna pode fornecer o heading principal com Content. PageActionsTarget fica restrito a workspaces imersivos. PageState substitui o header e o conteúdo durante carregamento, falha ou ausência, por isso informações indispensáveis entram no corpo, como Alert ou texto. Para uma falha parcial, mantenha o estado na seção com DataState; para uma região disponível para criação ou vínculo, use Empty.",
   },
   presentation: {
     name: "presentation",

package/src/ui/react.tsx

@@ -460,7 +460,6 @@ export {
   PageShell,
   Page,
   PageHeader,
-  PageIntro,
   PageNavigation,
   PageBack,
   PageTitle,