@softize/opus 22.2.0 → 23.0.0

package/src/ui/docs/content/action-list.md

@@ -42,7 +42,6 @@ extremos opostos do cabeçalho da coleção; busca, filtros e atualização perm
 <Content
   title="Workspaces"
   level={1}
-  variant="page"
   actions={<Button>Criar workspace</Button>}
 >
   <ActionList action={workspaceList} input={{}} />
@@ -238,7 +237,7 @@ render(
     <div className="h-80 w-full overflow-x-auto overflow-y-hidden rounded-lg border border-border">
       <Page layout="fill">
         <PageBody>
-          <Content level={1} variant="page">
+          <Content level={1}>
             <ContentHeader>
               <ContentTitle>Workspaces</ContentTitle>
               <ContentActions>
@@ -276,7 +275,7 @@ componentes no caminho. Nos demais casos, a decisão é sua:
 
 - Para a lista manter a altura dos resultados, como em uma seção secundária cuja rolagem pertence ao
   `PageBody`, declare `layout="flow"`.
-- Um contêiner próprio entre `ContentBody` e a lista, como um `TabsContent`, não repassa a altura, e
+- Um contêiner próprio entre `ContentBody` e a lista, como um `TabsPanel`, não repassa a altura, e
   a lista volta a `flow`. Declare `layout="fill"` na lista e dê ao contêiner as classes
   `flex min-h-0 flex-1 flex-col`.
 - Dentro de [`Card`](/ui/card), [`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer) ou
@@ -364,6 +363,9 @@ render(
 
 - **`depends: ['outroFiltro']`:** desabilita o filtro até que suas dependências tenham valor e o
   limpa quando uma delas muda.
+- **`presentation: 'toggle'`:** mantém visíveis as opções curtas de um `select` de escolha única;
+  estado, URL e input da action continuam iguais aos do controle padrão. Entradas de dicionário
+  com `icon` apresentam o ícone junto ao rótulo.
 - **`options: { kind: 'dictionary', ref: 'sessionStatus' }`:** resolve opções e rótulos por um
   dicionário registrado no `OpusProvider`. `filterOptions` substitui essa fonte quando informado.
 - **`options: { kind: 'lookup', source: 'x.lookup' }`:** consulta uma action com `{ q }` e os valores
@@ -371,6 +373,13 @@ render(
 
 ```tsx
 filters: {
+  channel: {
+    label: 'Canal',
+    type: 'select',
+    presentation: 'toggle',
+    allowEmpty: false,
+    options: { kind: 'static', items: [...] },
+  },
   project: { label: 'Projeto', type: 'select', options: { kind: 'static', items: [...] } },
   sprint: {
     label: 'Sprint',
@@ -469,7 +478,7 @@ render(
 | Chave     | O que declara                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `columns` | `{ key, label, type?, sortable?, fit?, hidden?, dateFormat?, dictionary?, empty? }` — a tabela. `hidden` nasce oculta e pode ser exibida pelo seletor de colunas; `dictionary` nomeia o dicionário do provider; `empty` dá o significado da ausência.                                                                                                                                                                                                                                                                                                              |
-| `filters` | `{ [nome]: { label, type, options?, multiple?, searchable?, allowEmpty?, placement?, section?, depends?, … } }` — a toolbar. `placement` classifica o controle como `inline`, `advanced` ou `external`; filtros avançados com `section` são agrupados no diálogo; `external` mantém estado e input, mas delega a apresentação ao consumidor. `searchable` habilita busca local em `select`; `allowEmpty: false` omite a opção vazia. `depends` desabilita/cascateia; options `kind: 'lookup'` busca em uma action. Valor aplicado entra no input com o mesmo nome. |
+| `filters` | `{ [nome]: { label, type, options?, multiple?, presentation?, searchable?, allowEmpty?, placement?, section?, depends?, … } }` — a toolbar. `placement` classifica o controle como `inline`, `advanced` ou `external`; filtros avançados com `section` são agrupados no diálogo; `external` mantém estado e input, mas delega a apresentação ao consumidor. `presentation: 'toggle'` mostra todas as opções curtas de um `select` de escolha única em um `ToggleGroup`; sem a propriedade, o controle continua sendo `Select`. `searchable` habilita busca local em `select`; `allowEmpty: false` omite a opção vazia. `depends` desabilita/cascateia; options `kind: 'lookup'` busca em uma action. Valor aplicado entra no input com o mesmo nome. |
 | `text`    | `{ fields }` — liga a busca; convenção: param `q` no input. Ela aparece depois dos filtros inline e imediatamente antes do acesso aos filtros avançados. A busca participa da contagem de controles inline: com mais de um controle, a barra exibe as labels; quando ela é o único recorte, sua label é omitida.                                                                                                                                                                                                                                                   |
 | `sort`    | `{ fields, default }` — ordenação inicial; header ordenável escreve `sort: 'chave:dir'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `periods` | `{ value, label, default? }[]` — o controle de período (presets + Personalizado com calendário); `default: true` marca o preset inicial, senão vale o primeiro; materializa em `from`/`to` no input.                                                                                                                                                                                                                                                                                                                                                               |

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

@@ -120,8 +120,8 @@ nome de uma action não começa pelo caminho do domínio, como `workspace.` ou `
 `subdomains` aceita outros domínios e forma esse caminho.
 
 `actions` aceita um mapa, uma lista ou o resultado de `import * as actions`. Um domínio também pode
-registrar só o contrato, sem handler: no modo design, descrito abaixo, o `mockHandler` responde;
-fora dele, a execução falha por falta de handler.
+registrar só o contrato, sem handler: o plugin do modo design liga uma resposta gerada ou um
+cenário; fora dele, a execução falha por falta de handler.
 
 ## Ordem canônica dos campos
 
@@ -134,7 +134,7 @@ name, kind
   → label, title, summary, description, icon, color, messages, tags, examples, errors
   → input, output, effect, personalData
   → public, requires, authorize, loads
-  → handler, mockHandler
+  → handler
   → audit, confirm, invalidates, rateLimit, idempotency
   → ai, automatable, internal
 ```
@@ -228,10 +228,9 @@ O Opus não decide onde os cenários ficam nem se entram no repositório. Eles n
 aplicação: podem ficar numa pasta ignorada pelo git e ser escritos durante a sessão de design,
 quando forem necessários.
 
-`mockHandler` está obsoleto desde a 22.1.0 e sai na próxima major. Enquanto existir, ele ainda
-responde no modo design, abaixo do cenário e acima da resposta gerada, e o `opus check` conta
-quantas actions ainda o declaram. Para migrar, apague o `mockHandler`; se a resposta dele importar
-para o design, transforme-a em cenário.
+Dados de design não pertencem ao contrato. Quando uma resposta específica importar para a revisão
+da interface, declare um cenário com `defineDesignScenario`; para os demais casos, preserve apenas
+o contrato e deixe o plugin gerar a resposta pelo schema.
 
 O plugin `opusDesign()`, de `@softize/opus/vite`, monta o runtime do Opus dentro do dev server e
 responde `/api` no próprio processo. No modo design, qualquer `server.proxy` para um backend externo

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

@@ -205,15 +205,15 @@ Quando a região principal da página é uma coleção, `Content` nomeia e gover
 toolbar da lista. Essa divisão aproxima cada comando do objeto que ele afeta sem criar uma família
 paralela de componentes `List*`.
 
-Quando a coleção é o assunto da página, use `variant="page"` com `level={1}`: o `Content` assume a
-escala do cabeçalho de [`Page`](/ui/page) e passa a ser o heading principal. As ações ficam no
-extremo oposto ao título, como em qualquer variante.
+Quando a coleção é o assunto da página, use `level={1}`: o `Content` passa a ser o heading
+principal, assume automaticamente a escala do cabeçalho de [`Page`](/ui/page) e mantém o mesmo
+ritmo entre introdução e corpo. As ações ficam no extremo oposto ao título. Níveis de 2 a 6
+continuam usando a apresentação compacta de uma seção.
 
 ```tsx preview col
 render(
   <Content
     level={1}
-    variant="page"
     title="Clientes"
     actions={<Button>Criar cliente</Button>}
   >
@@ -242,8 +242,7 @@ classes adicionais; um `Content` irmão, sem lista, mantém a altura do próprio
 | `count`        | `number`                      |                | Forma curta: total de itens ao lado do título da região.                                                          |
 | `description`  | `ReactNode`                   |                | Forma curta: frase de apoio sob o título.                                                                         |
 | `actions`      | `ReactNode`                   |                | Forma curta: ações sobre a região inteira, no extremo oposto ao título.                                           |
-| `level`        | `1 \| 2 \| 3 \| 4 \| 5 \| 6`  | `2`            | Nível semântico do heading, independente do destaque visual.                                                      |
-| `variant`      | `'page' \| 'section'`         | `'section'`    | Hierarquia visual: `page` reproduz o cabeçalho de `Page`; `section` é a região dentro de uma superfície.          |
+| `level`        | `1 \| 2 \| 3 \| 4 \| 5 \| 6`  | `2`            | Nível do heading; `1` identifica o conteúdo principal da página e os demais, uma seção interna.                   |
 | `as`           | `'section' \| 'fieldset'`     | `'section'`    | Usa uma região com heading ou um grupo de campos cujo título é a legenda nativa.                                  |
 | `framed`       | `boolean`                     | `false`        | Envolve o header e o body com a moldura estrutural da região.                                                     |
 | `layout`       | `'continuous' \| 'sectioned'` | `'continuous'` | Mantém header e body contínuos ou os separa com divisor e body sem recuo. `sectioned` exige `framed`.             |

package/src/ui/docs/content/semantic-context.md

@@ -54,7 +54,6 @@ O par `context` + `variant` vale para componentes que comunicam significado, com
 | --- | --- | --- |
 | [`Select`](/ui/select) | `default`, `outline`, `ghost` | `default` é o campo completo; `outline` é compacto com borda, e `ghost`, compacto sem borda nem fundo. |
 | [`Toggle`](/ui/toggle) | `default`, `outline` | `default` não tem borda nem fundo em repouso; o fundo aparece no hover e quando ativo. `outline` acrescenta a borda. |
-| [`TabsList`](/ui/tabs) | `default`, `line` | `default` agrupa as abas em uma superfície preenchida; `line` usa uma linha-base e marca nela a aba ativa. |
 
 O mesmo nome pode aparecer nos dois grupos. Num `Badge`, `outline` é um tratamento do significado
 declarado em `context`; num `Select`, é apenas o formato compacto com borda.

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

@@ -1,7 +1,7 @@
 ## Alternar painéis relacionados
 
-Use `Tabs` para alternar painéis relacionados no mesmo contexto. O `value` de cada `TabsTrigger`
-corresponde ao `TabsContent` que ele abre. `defaultValue` define a aba inicial no modo não
+Use `Tabs` para alternar painéis relacionados no mesmo contexto. O `value` de cada `TabsListItem`
+corresponde ao `TabsPanel` que ele abre. `defaultValue` define a aba inicial no modo não
 controlado.
 
 `icon` posiciona um ícone decorativo antes do rótulo e normaliza SVGs para `1rem`. Quando a aba
@@ -10,31 +10,31 @@ 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 />}>
+    <TabsListItem value="overview" icon={<LayoutDashboard />}>
       Visão geral
-    </TabsTrigger>
-    <TabsTrigger value="sessions" icon={<History />}>
+    </TabsListItem>
+    <TabsListItem value="sessions" icon={<History />}>
       Sessões
-    </TabsTrigger>
-    <TabsTrigger value="skills" icon={<Settings />}>
+    </TabsListItem>
+    <TabsListItem value="skills" icon={<Settings />}>
       Skills
-    </TabsTrigger>
+    </TabsListItem>
   </TabsList>
-  <TabsContent value="overview">
+  <TabsPanel value="overview">
     <p className="text-sm text-muted-foreground">
       Resumo do workspace Empresa X.
     </p>
-  </TabsContent>
-  <TabsContent value="sessions">
+  </TabsPanel>
+  <TabsPanel value="sessions">
     <p className="text-sm text-muted-foreground">
       3 sessões nesta semana, 1 em andamento.
     </p>
-  </TabsContent>
-  <TabsContent value="skills">
+  </TabsPanel>
+  <TabsPanel value="skills">
     <p className="text-sm text-muted-foreground">
       6 skills vinculadas aos agentes do workspace.
     </p>
-  </TabsContent>
+  </TabsPanel>
 </Tabs>
 ```
 
@@ -47,20 +47,20 @@ 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 className="px-2 pt-2">
+    <TabsListItem value="overview">Visão geral</TabsListItem>
+    <TabsListItem value="history">Histórico</TabsListItem>
   </TabsList>
-  <TabsContent value="overview" className="p-4">
+  <TabsPanel 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">
+  </TabsPanel>
+  <TabsPanel value="history" className="p-4">
     <p className="text-sm text-muted-foreground">
       Alterações recentes do workspace.
     </p>
-  </TabsContent>
+  </TabsPanel>
 </Tabs>
 ```
 
@@ -73,24 +73,23 @@ 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>
+    <TabsListItem value="overview">Visão geral</TabsListItem>
+    <TabsListItem value="contacts">Contatos</TabsListItem>
+    <TabsListItem value="history">Histórico</TabsListItem>
   </TabsList>
-  <TabsContent value="overview">Resumo do atendimento.</TabsContent>
-  <TabsContent value="contacts">Tentativas de contato.</TabsContent>
-  <TabsContent value="history">Alterações registradas.</TabsContent>
+  <TabsPanel value="overview">Resumo do atendimento.</TabsPanel>
+  <TabsPanel value="contacts">Tentativas de contato.</TabsPanel>
+  <TabsPanel value="history">Alterações registradas.</TabsPanel>
 </Tabs>
 ```
 
-## Variante line
+## Linha de navegação
 
-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. 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.
+`TabsList` usa uma linha-base porque representa navegação entre painéis, não uma escolha de valor.
+Na orientação horizontal, a lista ocupa toda a largura disponível e a aba ativa é marcada sobre
+essa linha. 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
@@ -98,69 +97,68 @@ aumenta para `0.5rem` e acompanha o padding superior da moldura.
 
 ```tsx preview col
 <Tabs defaultValue="agents">
-  <TabsList variant="line">
-    <TabsTrigger value="agents">Agentes</TabsTrigger>
-    <TabsTrigger value="repos">Repositórios</TabsTrigger>
-    <TabsTrigger value="settings">Configurações</TabsTrigger>
+  <TabsList>
+    <TabsListItem value="agents">Agentes</TabsListItem>
+    <TabsListItem value="repos">Repositórios</TabsListItem>
+    <TabsListItem value="settings">Configurações</TabsListItem>
   </TabsList>
-  <TabsContent value="agents">
+  <TabsPanel value="agents">
     <p className="text-sm text-muted-foreground">
       developer, reviewer e designer ativos.
     </p>
-  </TabsContent>
-  <TabsContent value="repos">
+  </TabsPanel>
+  <TabsPanel value="repos">
     <p className="text-sm text-muted-foreground">
       empresa-x-api e empresa-x-web vinculados.
     </p>
-  </TabsContent>
-  <TabsContent value="settings">
+  </TabsPanel>
+  <TabsPanel value="settings">
     <p className="text-sm text-muted-foreground">Preferências do workspace.</p>
-  </TabsContent>
+  </TabsPanel>
 </Tabs>
 ```
 
 ## Vertical
 
-Com `orientation="vertical"`, a lista forma uma coluna. O exemplo usa a variante padrão; com
-`variant="line"`, a marca da aba ativa passa para a lateral do gatilho.
+Com `orientation="vertical"`, a lista forma uma coluna e a marca da aba ativa passa para a lateral
+do gatilho.
 
 ```tsx preview col
 <Tabs defaultValue="prompt" orientation="vertical">
   <TabsList>
-    <TabsTrigger value="prompt">Prompt</TabsTrigger>
-    <TabsTrigger value="skills">Skills</TabsTrigger>
-    <TabsTrigger value="history">Histórico</TabsTrigger>
+    <TabsListItem value="prompt">Prompt</TabsListItem>
+    <TabsListItem value="skills">Skills</TabsListItem>
+    <TabsListItem value="history">Histórico</TabsListItem>
   </TabsList>
-  <TabsContent value="prompt">
+  <TabsPanel value="prompt">
     <p className="text-sm text-muted-foreground">
       O prompt do agente developer.
     </p>
-  </TabsContent>
-  <TabsContent value="skills">
+  </TabsPanel>
+  <TabsPanel value="skills">
     <p className="text-sm text-muted-foreground">
       Skills vinculadas a este agente.
     </p>
-  </TabsContent>
-  <TabsContent value="history">
+  </TabsPanel>
+  <TabsPanel value="history">
     <p className="text-sm text-muted-foreground">
       Sessões anteriores deste agente.
     </p>
-  </TabsContent>
+  </TabsPanel>
 </Tabs>
 ```
 
 ## Tamanho
 
-`size="sm"` no `Tabs` reduz a altura da lista de `2.25rem` para `2rem`. É o par do `sm` de `Button` e
-`Select` para uma fileira densa, como uma toolbar ou um cabeçalho, em que o segmento não deve ficar
-mais alto que os elementos vizinhos.
+`size="sm"` no `Tabs` reduz a área interativa de `2.25rem` para `2rem`. É o par do `sm` de `Button` e
+`Select` para uma fileira densa, como uma toolbar ou um cabeçalho.
 
 ```tsx preview col
 <Tabs defaultValue="preview" size="sm">
   <TabsList>
-    <TabsTrigger value="preview">Preview</TabsTrigger>
-    <TabsTrigger value="code">Código</TabsTrigger>
-    <TabsTrigger value="ai">IA</TabsTrigger>
+    <TabsListItem value="preview">Preview</TabsListItem>
+    <TabsListItem value="code">Código</TabsListItem>
+    <TabsListItem value="ai">IA</TabsListItem>
   </TabsList>
 </Tabs>
 ```
@@ -172,28 +170,29 @@ mais alto que os elementos vizinhos.
 | `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. |
+| `size`          | `'default' \| 'sm'`          | `'default'`    | Altura da área interativa na escala única dos controles (2.25 e 2rem), aplicada aos gatilhos.                                                              |
 | `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                                                       |
+| ------------ | -------- | ------ | --------------------------------------------------------------- |
+| `aria-label` | `string` |        | Nomeia a navegação quando não houver um rótulo visível associado. |
+| `className`  | `string` |        | Ajusta a composição externa sem substituir a linha de navegação. |
 
-## Propriedades de TabsTrigger
+## Propriedades de TabsListItem
 
 | Propriedade | Tipo        | Padrão  | Descrição                                                                                       |
 | ----------- | ----------- | ------- | ----------------------------------------------------------------------------------------------- |
-| `value`     | `string`    |         | Identificador que associa o gatilho ao `TabsContent` correspondente.                            |
+| `value`     | `string`    |         | Identificador que associa o gatilho ao `TabsPanel` 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
+## Propriedades de TabsPanel
 
 | Propriedade  | Tipo     | Padrão | Descrição                                                              |
 | ------------ | -------- | ------ | ---------------------------------------------------------------------- |
-| `value`      | `string` |        | Identificador do painel, igual ao `value` do `TabsTrigger` que o abre. |
+| `value`      | `string` |        | Identificador do painel, igual ao `value` do `TabsListItem` que o abre. |
 | `forceMount` | `true`   |        | Mantém o painel montado mesmo quando outra aba está ativa.             |

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

@@ -90,9 +90,8 @@ expect(emitted).toEqual([{ event: 'task.done', data: { id: '1' } }])
 
 Os dados que o modo design mostra não são comportamento da action e não precisam de teste de
 unidade: o plugin `opusDesign()` os gera a partir do contrato (ver
-[Actions](/docs/actions)). Enquanto o `mockHandler` existir, obsoleto desde a 22.1.0,
-`runAction` com `OPUS_MODE=design` ainda o executa, como o runtime. Teste a action ligada ao
-handler em vez dele.
+[Actions](/docs/actions)). `runAction` executa somente a action ligada ao handler; use cenários do
+plugin para respostas específicas do modo design.
 
 ## memStorage
 

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

@@ -30,8 +30,8 @@ render(
 
 ## Variantes e tamanhos
 
-Na variante `default`, o fundo aparece somente quando o controle está ativo; `outline` mantém a
-borda. `size` ajusta a altura.
+Na variante `default`, o fundo aparece somente quando o controle está ativo. `outline` mantém a
+borda e usa um fundo sutil distinto dela no estado ativo. `size` ajusta a altura.
 
 ```tsx preview
 <Toggle aria-label="Quebra de linha">
@@ -140,19 +140,24 @@ render(
 )
 ```
 
-### Variante e espaçamento
+### Grupo conectado com borda
 
 `variant`, `size` e `shape` definidos no grupo chegam aos itens por contexto. `spacing` separa os
-itens; com zero, eles formam um bloco contínuo.
+itens. Use `variant="outline"` com `spacing={0}` para formar um controle conectado com contorno
+único. A borda pertence aos itens: o grupo remove as bordas internas duplicadas, arredonda apenas
+as extremidades e preserva o contorno quando um item está ativo.
 
 ```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 type="single" variant="outline" spacing={0} defaultValue="call">
+  <ToggleGroupItem value="call"><Phone /> Telefone</ToggleGroupItem>
+  <ToggleGroupItem value="email"><Mail /> E-mail</ToggleGroupItem>
+  <ToggleGroupItem value="whatsapp"><MessageCircle /> WhatsApp</ToggleGroupItem>
 </ToggleGroup>
 ```
 
+Use um valor maior que zero quando cada item precisar preservar sua própria borda e seu próprio
+raio, sem formar um bloco contínuo.
+
 ### Propriedades de ToggleGroup
 
 | Propriedade | Tipo | Padrão | Descrição |
@@ -161,10 +166,10 @@ itens; com zero, eles formam um bloco contínuo.
 | `value` | `string \| string[]` | | Seleção controlada; o tipo acompanha `type`. |
 | `onValueChange` | `(value: string \| string[]) => void` | | Informa a nova seleção. No modo single, uma string vazia representa nenhum item ativo. |
 | `defaultValue` | `string \| string[]` | | Seleção inicial no modo não controlado. |
-| `variant` | `'default' \| 'outline'` | `'default'` | Tratamento visual repassado aos itens. |
+| `variant` | `'default' \| 'outline'` | `'default'` | Tratamento visual repassado aos itens. `outline` aplica borda a cada item. |
 | `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | Tamanho repassado aos itens. |
 | `shape` | `'default' \| 'pill'` | `'default'` | Geometria do grupo e de suas extremidades. |
-| `spacing` | `number` | `0` | Distância entre os itens em unidades de spacing. |
+| `spacing` | `number` | `0` | Distância entre os itens em unidades de spacing. Com zero, remove bordas internas duplicadas e conecta o grupo. |
 
 ### Propriedades de ToggleGroupItem
 

package/src/ui/drivers/react.tsx

@@ -51,11 +51,12 @@ import { objectSchemaShape } from '../lib/object-schema.ts'
 
 /**
  * Dicionário estrutural pro resolvedor de `options: { kind: 'dictionary', ref }`:
- * qualquer coisa com `options()` → `{ value, label }`. O `DictType` do `t.dict`
- * satisfaz direto — sem este driver importar o driver de schema.
+ * qualquer coisa com `options()` → `{ value, label, icon? }`. O `DictType` do `t.dict`
+ * satisfaz direto — sem este driver importar o driver de schema. A metadata opcional
+ * continua sendo declarada pelo dicionário; o provider não inventa apresentação.
  */
 export interface DictLike {
-  options(): Array<{ value: string; label: string }>
+  options(): Array<{ value: string; label: string; icon?: string }>
 }
 
 interface OpusContextValue {

package/src/ui/meta.ts

@@ -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, 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.',
+      'Navegue entre painéis relacionados no mesmo nível. Cada TabsListItem aponta para um TabsPanel pelo mesmo `value`; TabsList usa uma linha para indicar a aba ativa, enquanto Tabs define orientação, escala, distribuição e moldura. Use ToggleGroup para escolher valores sem navegar entre painéis.',
   },
   textarea: {
     name: "textarea",
@@ -363,7 +363,7 @@ export const componentMeta = {
     name: "toggle",
     ancestry: "shadcn",
     whenToUse:
-      "Alterne um estado diretamente no contexto atual. ToggleGroup reúne escolhas únicas ou múltiplas e compartilha aparência e escala entre os itens. Para um valor booleano com rótulo em formulário, prefira Switch ou Checkbox.",
+      'Alterne um estado diretamente no contexto atual. ToggleGroup reúne escolhas únicas ou múltiplas e compartilha aparência e escala entre os itens. Use `variant="outline"` com `spacing={0}` para formar um grupo conectado com borda. Para navegar entre painéis, use Tabs.',
   },
 
   confirm: {

package/src/ui/react.tsx

@@ -192,8 +192,8 @@ export { Separator } from "./components/primitives/separator.tsx";
 export {
   Tabs,
   TabsList,
-  TabsTrigger,
-  TabsContent,
+  TabsListItem,
+  TabsPanel,
 } from "./components/primitives/tabs.tsx";
 
 export { Skeleton } from "./components/primitives/skeleton.tsx";
@@ -499,7 +499,6 @@ export type {
   ContentElement,
   ContentFrameVariant,
   ContentHeaderLevel,
-  ContentHeaderVariant,
 } from "./components/patterns/content-header.tsx";
 
 // Layout composicional: Split decide a relação espacial; Pane carrega conteúdo com inset.

package/src/vite/design.ts

@@ -88,8 +88,8 @@ export interface OpusDesignOptions {
 
   /**
    * Cenários de design (ADR 0037): módulos que exportam `defineDesignScenario(contrato, resposta)`.
-   * Aceita caminhos e globs, como `entry`. O cenário vence o `mockHandler` e a resposta padrão
-   * gerada pelo `fake`; cenário de action inexistente impede o boot, com a lista no erro.
+   * Aceita caminhos e globs, como `entry`. O cenário vence a resposta padrão gerada pelo `fake`;
+   * cenário de action inexistente impede o boot, com a lista no erro.
    * Sem default: o projeto decide onde os cenários ficam e se são versionados.
    */
   scenarios?: string | string[]
@@ -116,7 +116,7 @@ export interface OpusDesignOptions {
   stubs?: Record<string, DesignStubHandler>
 
   /**
-   * Monta o /api também no dev NORMAL (handler real, sem OPUS_MODE).
+   * Monta o /api também no dev NORMAL, com os handlers reais.
    * Default false — devBackend puro não é design (sem sonda, proxy intacto).
    */
   devBackend?: boolean
@@ -156,7 +156,7 @@ const PROBE_PATH = '/__opus/design'
 const RUNTIME_ENDPOINT_PATHS = new Set(['/health', '/ready', '/openapi.json'])
 
 /** De onde vem a resposta de cada action no modo design, na ordem de precedência. */
-type DesignSource = 'scenario' | 'mock' | 'handler' | 'generated'
+type DesignSource = 'scenario' | 'handler' | 'generated'
 
 interface DesignState {
   handle: NodeServerHandle
@@ -214,9 +214,8 @@ export function opusDesign(options: OpusDesignOptions = {}): Plugin {
       exProxyPrefixes = Object.keys(config.server?.proxy ?? {})
       // 2) Mata o proxy: fecha o vazamento preview→prod pra QUALQUER prefixo.
       if (config.server?.proxy !== undefined) config.server.proxy = undefined
-      // 3) O execute() roteia pro mockHandler lendo OPUS_MODE (isOpusDesignMode); o boot
-      //    liga em cada action a resposta de design, e o preview fica autossuficiente.
-      process.env.OPUS_MODE = 'design'
+      // 3) O boot liga em cada contrato um handler de cenário ou resposta gerada,
+      //    e o preview fica autossuficiente sem alterar o runtime de produção.
     },
 
     configureServer(server) {
@@ -362,15 +361,14 @@ export function opusDesign(options: OpusDesignOptions = {}): Plugin {
           const named = (source: DesignSource): string[] =>
             state.actions.filter((a) => state.sources.get(a.name) === source).map((a) => a.name)
           const scenarios = named('scenario')
-          const mocks = named('mock')
           payload.runtime = {
             prefix: apiPrefix,
             actions: state.actions.length,
-            // `mocked`/`unmocked` mantêm o formato anterior da sonda: resposta escrita à mão
-            // (cenário ou mockHandler) contra o resto, que responde por handler real ou `fake`.
-            mocked: scenarios.length + mocks.length,
+            // `mocked`/`unmocked` preservam o formato histórico da sonda: cenário escrito
+            // à mão contra respostas vindas de handler real ou geradas pelo `fake`.
+            mocked: scenarios.length,
             unmocked: state.actions
-              .filter((a) => !['scenario', 'mock'].includes(state.sources.get(a.name) ?? ''))
+              .filter((a) => state.sources.get(a.name) !== 'scenario')
               .map((a) => a.name),
             scenarios,
             generated: named('generated'),
@@ -687,8 +685,8 @@ function scenariosOfModule(mod: Record<string, unknown>): DesignScenario[] {
 }
 
 /**
- * Liga a cada action a resposta de design, nesta precedência: cenário, `mockHandler` declarado,
- * handler real (`bindAction`) e, por fim, a resposta padrão gerada pelo `fake`.
+ * Liga a cada action a resposta de design, nesta precedência: cenário, handler real
+ * (`bindAction`) e, por fim, a resposta padrão gerada pelo `fake`.
  */
 function prepareDesignActions(
   actions: ActionDef[],
@@ -699,18 +697,23 @@ function prepareDesignActions(
     const scenario = scenarios.get(action.name)
     if (scenario !== undefined) {
       sources.set(action.name, 'scenario')
-      return { ...action, mockHandler: (ctx: ActionContext, input: unknown) => scenario.respond(input, ctx) } as ActionDef
-    }
-    if (action.mockHandler !== undefined) {
-      sources.set(action.name, 'mock')
-      return action
+      return {
+        ...action,
+        // Resposta simulada não representa exposição real de dado pessoal (ADR 0041).
+        personalData: false,
+        handler: (ctx: ActionContext, input: unknown) => scenario.respond(input, ctx),
+      } as ActionDef
     }
     if (typeof (action as { handler?: unknown }).handler === 'function') {
       sources.set(action.name, 'handler')
       return action
     }
     sources.set(action.name, 'generated')
-    return { ...action, mockHandler: async (_ctx: ActionContext, input: unknown) => designResponse(action, input) } as ActionDef
+    return {
+      ...action,
+      personalData: false,
+      handler: async (_ctx: ActionContext, input: unknown) => designResponse(action, input),
+    } as ActionDef
   })
   return { actions: prepared, sources }
 }
@@ -759,4 +762,3 @@ function sendEnvelope(res: ServerResponse, status: number, input: ErrorInput): v
     ),
   )
 }
-