@softize/opus 21.0.1 → 22.0.0

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

@@ -1,31 +1,26 @@
 ## Esqueleto de página
 
-Use `Page` para manter chrome, introdução, estado e conteúdo na mesma anatomia. `PageHeader`
-declara navegação e ações globais; `PageIntro` apresenta um título introdutório quando ele for
-necessário. Quando a aplicação possui uma barra persistente, `PageShell` projeta os slots do
-`PageHeader` nessa barra.
-
-Fora do shell, `PageHeader` também pode receber `PageTitle`. O container é centralizado e ocupa a
-largura disponível até `80rem` (`max-w-7xl`). Use `className` somente quando a composição pedir
-outro teto ou largura total.
-
-A forma curta é o padrão para páginas comuns. Fora de `PageShell`, ela cria `PageHeader` e
-`PageBody`. Dentro dele, cria `PageHeader` para as ações, `PageIntro` para o título e `PageBody`.
-A forma explícita exige exatamente um heading principal. Use `PageTitle` no header ou intro,
-`Content level={1}` no body, ou deixe um `PageState` ativo assumir esse papel. Assim, header e
-introdução podem ser omitidos quando o próprio conteúdo nomeia a página. Contadores e outros
-indicadores pertencem ao conteúdo que os explica.
-
-A `Page` é contínua por definição: separar o chrome do conteúdo é trabalho do shell, e não há
-divisores entre regiões para declarar. O `layout` da `Page` não é a anatomia de superfície de
+Use `Page` para manter cabeçalho, estado e conteúdo na mesma anatomia. `PageHeader` é a única
+introdução estrutural: reúne navegação contextual opcional, título e ações. O container é
+centralizado e ocupa a largura disponível até `80rem` (`max-w-7xl`). Use `className` somente quando
+a composição pedir outro teto ou largura total.
+
+A forma curta é o padrão para páginas comuns e cria `PageHeader` e `PageBody`. A forma explícita
+exige exatamente um heading principal. Use `PageTitle` no header, `Content level={1}` no body, ou
+deixe um `PageState` ativo assumir esse papel. O header pode ser omitido quando o próprio conteúdo
+nomeia a página. Contadores e outros indicadores pertencem ao conteúdo que os explica.
+
+A `Page` é contínua por definição e não há divisores entre suas regiões. O `layout` da `Page` não
+é a anatomia de superfície de
 [`Card`](/ui/card), [`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer) e [`Pane`](/ui/pane) — aqui ele
 decide a ocupação de altura. `flow`, o padrão, deixa a página crescer e a rolagem acontecer na
 janela; `fill` limita a página à altura do shell para que uma região interna, como uma tabela longa
 ou um split, assuma a rolagem.
 
 `PageShell` não inclui sidebar nem inventa breadcrumb. Ele ocupa o painel principal já delimitado e
-mantém a barra com `3.75rem`, mesmo quando o conteúdo muda de estado. Tabs ficam reservados a recortes
-da mesma superfície. Canvas e outros workspaces espaciais imersivos podem usar um shell próprio.
+entrega ao `PageHeader` descendente a navegação e as ações conhecidas pela aplicação, sem criar uma
+barra visual. Tabs ficam reservados a recortes da mesma superfície. Canvas e outros workspaces
+espaciais imersivos podem usar um shell próprio.
 
 Estados integrais de carregamento, falha ou ausência são compostos no body com `PageState`,
 detalhado abaixo. `Page` não recebe flags de dados: uma página pode agregar fontes independentes e
@@ -49,8 +44,8 @@ render(
 ## Retorno para a página pai
 
 Use `PageBack` em uma subpágina simples. O destino é explícito para continuar correto após refresh ou
-acesso por link direto; não derive esse retorno do histórico do navegador. No header padrão, o
-controle aparece antes do título como ícone; o nome acessível e a dica nativa do navegador (atributo
+acesso por link direto; não derive esse retorno do histórico do navegador. O controle aparece acima
+da linha do título como ícone; o nome acessível e a dica nativa do navegador (atributo
 `title`) derivam do destino.
 
 ```tsx preview col
@@ -81,20 +76,17 @@ ocupa a mesma posição introdutória sem transformar a trilha em ação.
         </BreadcrumbList>
       </Breadcrumb>
     </PageNavigation>
-  </PageHeader>
-  <PageIntro>
     <PageTitle>Carla Souza</PageTitle>
-  </PageIntro>
+  </PageHeader>
   <PageBody>Dados do cliente.</PageBody>
 </Page>
 ```
 
-## Barra persistente do shell
+## Contexto conhecido pelo shell
 
 Use `PageShell` quando o shell conhece o breadcrumb e a rota conhece ações globais ou uma
-introdução. Não crie um `PaneHeader` paralelo nem esconda slots de `Page` com CSS. O Opus projeta
-`PageNavigation`, `PageBack` e `PageActions` do `PageHeader` na barra; `PageIntro` permanece no
-conteúdo.
+introdução. Não crie um `PaneHeader` paralelo nem esconda slots de `Page` com CSS. O Opus compõe a
+navegação e as ações do shell no `PageHeader` rolável da página ativa.
 
 ```tsx preview col
 <PageShell
@@ -114,11 +106,10 @@ conteúdo.
 </PageShell>
 ```
 
-A barra permanece visível durante `PageState`; uma introdução opcional desaparece. Se uma ação não
-puder ser executada sem o conteúdo, a própria rota deve omiti-la naquele estado.
+Durante `PageState`, o cabeçalho inteiro desaparece e o título do estado assume o heading principal.
+Se uma ação não puder ser executada sem o conteúdo, a própria rota deve omiti-la naquele estado.
 
-Na composição explícita, combine somente as regiões necessárias. Este exemplo usa o header para
-uma ação global e o intro para o título:
+Na composição explícita, combine navegação, título e ações no mesmo header:
 
 ```tsx preview col
 <PageShell
@@ -134,13 +125,11 @@ uma ação global e o intro para o título:
 >
   <Page>
     <PageHeader>
+      <PageTitle>Clientes</PageTitle>
       <PageActions>
         <Button>Exportar</Button>
       </PageActions>
     </PageHeader>
-    <PageIntro>
-      <PageTitle>Clientes</PageTitle>
-    </PageIntro>
     <PageBody>Conteúdo da listagem.</PageBody>
   </Page>
 </PageShell>
@@ -169,16 +158,15 @@ render(
 );
 ```
 
-Fora de `PageShell`, use `PageIntro` quando o conteúdo precisar de uma introdução separada do
-chrome. Dentro do shell, ele pode ser combinado com `PageHeader`: o primeiro permanece no conteúdo
-e o segundo alimenta a barra. Em uma página de listagem, [`Content`](/ui/content) pode fornecer o
-título e as ações da coleção, deixando `Page` apenas com `PageBody`.
+Em uma página de listagem, [`Content`](/ui/content) pode fornecer o título e as ações da coleção,
+deixando `Page` apenas com `PageBody`. Se `PageShell` fornecer navegação ou ações nesse caso, `Page`
+materializa somente o `PageHeader` necessário para recebê-las, sem duplicar o heading de `Content`.
 
 ## Ações de etapa no rodapé
 
 Use `PageFooter` quando a página for uma etapa de um fluxo e a decisão precisar ficar ao alcance ao
-fim do conteúdo, como confirmar uma importação. O rodapé fica depois do body, com a mesma altura da
-barra e as ações alinhadas no fim da linha.
+fim do conteúdo, como confirmar uma importação. O rodapé fica depois do body, com as ações alinhadas
+no fim da linha.
 
 ```tsx preview col
 <Page>
@@ -210,7 +198,15 @@ render(
         <PageTitle>Ordens de serviço</PageTitle>
       </PageHeader>
       <PageBody className="min-h-0 flex-1 space-y-2 overflow-y-auto">
-        {['OS-1842', 'OS-1839', 'OS-1835', 'OS-1830', 'OS-1827', 'OS-1821', 'OS-1818'].map((id) => (
+        {[
+          "OS-1842",
+          "OS-1839",
+          "OS-1835",
+          "OS-1830",
+          "OS-1827",
+          "OS-1821",
+          "OS-1818",
+        ].map((id) => (
           <div key={id} className="rounded-md border border-border p-3 text-sm">
             {id}
           </div>
@@ -227,30 +223,36 @@ sozinha: `PageBody`, `Content` e `ContentBody` passam a repassar a altura até e
 tabela fica fixo e só os resultados rolam. As demais seções do `PageBody` mantêm a altura do
 próprio conteúdo, e uma página `fill` sem lista não muda.
 
-## Levar as ações para outra barra
+## Levar as ações para um hospedeiro próprio
 
-`PageShell` já projeta as ações na barra persistente. Use `PageActionsTarget` somente quando um
-hospedeiro próprio tiver outra barra para elas: as `PageActions` da árvore interna passam a ser
+Use `PageActionsTarget` somente quando um hospedeiro próprio tiver uma região externa para elas: as
+`PageActions` da árvore interna passam a ser
 renderizadas no elemento indicado em `target`. Enquanto `target` for `null`, fora de um shell, as
 ações continuam no cabeçalho da página.
 
 ```tsx preview col
 function Example() {
-  const [target, setTarget] = useState<HTMLElement | null>(null)
+  const [target, setTarget] = useState<HTMLElement | null>(null);
 
   return (
     <div className="space-y-3">
-      <div ref={setTarget} className="flex justify-end rounded-lg border border-border p-2" />
+      <div
+        ref={setTarget}
+        className="flex justify-end rounded-lg border border-border p-2"
+      />
       <PageActionsTarget target={target}>
-        <Page title="Clientes" actions={<Button variant="outline">Exportar</Button>}>
+        <Page
+          title="Clientes"
+          actions={<Button variant="outline">Exportar</Button>}
+        >
           Conteúdo da listagem.
         </Page>
       </PageActionsTarget>
     </div>
-  )
+  );
 }
 
-render(<Example />)
+render(<Example />);
 ```
 
 ## Estados integrais
@@ -258,12 +260,11 @@ render(<Example />)
 Use `PageState` quando carregamento, falha ou ausência substituírem todo o conteúdo principal. Na
 forma curta ele pode ser escrito como filho direto de `Page`, que cria o `PageBody`; na forma
 explícita, coloque-o sozinho dentro de `PageBody`. Enquanto `status` for `loading`, `error` ou
-`empty`, uma `Page` isolada oculta o cabeçalho inteiro — incluindo `PageBack` — e o estado ocupa a
-altura disponível. Dentro de `PageShell`, a barra persistente permanece e somente `PageIntro` é
-ocultado. Uma subpágina isolada que dependa do retorno oferece a saída pelo `action` do próprio
-`PageState`. O título do estado assume o heading principal. Esse registro também funciona quando um
-componente intermediário decide qual `PageState` renderizar. Em `ready`, o cabeçalho ou a introdução
-e o conteúdo voltam à composição normal.
+`empty`, `Page` oculta o cabeçalho inteiro — incluindo a navegação e as ações recebidas de
+`PageShell` — e o estado ocupa a altura disponível. Uma subpágina que dependa do retorno oferece a
+saída pelo `action` do próprio `PageState`. O título do estado assume o heading principal. Esse
+registro também funciona quando um componente intermediário decide qual `PageState` renderizar. Em
+`ready`, o cabeçalho e o conteúdo voltam à composição normal.
 
 ```tsx preview col
 <Page title="Relatório">
@@ -301,51 +302,39 @@ estado na própria seção com [`DataState`](/ui/data-state), [`ActionView`](/ui
 
 ## Propriedades de Page
 
-| Propriedade | Tipo        | Padrão      | Descrição                                                                                       |
-| ----------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------- |
-| `title`     | `ReactNode` |             | O h1 da página.                                                                                 |
-| `actions`   | `ReactNode` |             | Ações contextuais no extremo oposto do cabeçalho. |
-| `layout`    | `'flow' \| 'fill'` | `'flow'` | Ocupação de altura, não anatomia: `fill` limita a página ao shell para que uma região interna role e leva essa altura até uma `ActionList` composta em `PageBody`. |
-| `className` | `string`    | `max-w-7xl` | Classes do container para substituir o teto padrão de `80rem`.                                  |
-| `children`  | `ReactNode` |             | O body da página — espaçamento e diagramação são seus.                                          |
-| demais      | Atributos de `HTMLElement` |  | Atributos nativos repassados ao elemento `main`, como `id` ou `aria-label`. `className` vai para o container interno. |
+| Propriedade | Tipo                       | Padrão      | Descrição                                                                                                                                                          |
+| ----------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`     | `ReactNode`                |             | O h1 da página.                                                                                                                                                    |
+| `actions`   | `ReactNode`                |             | Ações contextuais no extremo oposto do cabeçalho.                                                                                                                  |
+| `layout`    | `'flow' \| 'fill'`         | `'flow'`    | Ocupação de altura, não anatomia: `fill` limita a página ao shell para que uma região interna role e leva essa altura até uma `ActionList` composta em `PageBody`. |
+| `className` | `string`                   | `max-w-7xl` | Classes do container para substituir o teto padrão de `80rem`.                                                                                                     |
+| `children`  | `ReactNode`                |             | O body da página — espaçamento e diagramação são seus.                                                                                                             |
+| demais      | Atributos de `HTMLElement` |             | Atributos nativos repassados ao elemento `main`, como `id` ou `aria-label`. `className` vai para o container interno.                                              |
 
 ## Propriedades de PageShell
 
-| Propriedade       | Tipo                          | Descrição                                                            |
-| ----------------- | ----------------------------- | -------------------------------------------------------------------- |
-| `navigation`      | `ReactNode`                   | Navegação contextual da barra, normalmente um `Breadcrumb`.          |
-| `actions`         | `ReactNode`                   | Ações conhecidas pelo shell, antes das ações declaradas pela `Page`. |
-| `children`        | `ReactNode`                   | Rota que renderiza uma `Page` descendente.                           |
-| `headerClassName` | `string`                      | Classes adicionais do container interno da barra.                    |
-| `className`       | `string`                      | Classes adicionais da moldura.                                       |
-| demais            | Atributos de `HTMLDivElement` | Atributos nativos repassados à moldura.                              |
-
-## Propriedades de PageIntro
-
-| Propriedade | Tipo                          | Descrição                                                             |
-| ----------- | ----------------------------- | --------------------------------------------------------------------- |
-| `children`  | `ReactNode`                   | `PageBack` ou `PageNavigation`, título introdutório e, quando necessário, ações ligadas à introdução. |
-| `className` | `string`                      | Classes adicionais da região introdutória.                            |
-| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados à região introdutória.                   |
+| Propriedade  | Tipo                          | Descrição                                                                  |
+| ------------ | ----------------------------- | -------------------------------------------------------------------------- |
+| `navigation` | `ReactNode`                   | Navegação contextual composta acima do título no `PageHeader` descendente. |
+| `actions`    | `ReactNode`                   | Ações conhecidas pelo shell, antes das ações declaradas pela `Page`.       |
+| `children`   | `ReactNode`                   | Rota que renderiza uma `Page` descendente.                                 |
+| `className`  | `string`                      | Classes adicionais da moldura.                                             |
+| demais       | Atributos de `HTMLDivElement` | Atributos nativos repassados à moldura.                                    |
 
 ## Propriedades de PageHeader
 
-| Propriedade | Tipo        | Descrição                                                                                |
-| ----------- | ----------- | ---------------------------------------------------------------------------------------- |
-| `className` | `string`    | Classes adicionais da região externa do cabeçalho, fora de `PageShell`.                  |
-| `children`  | `ReactNode` | `PageBack` ou `PageNavigation`, `PageActions` e, fora do shell, um `PageTitle` opcional. |
-| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados à região externa do cabeçalho, fora de `PageShell`. |
-
-Dentro de `PageShell`, `PageHeader` não renderiza uma região própria: devolve somente os filhos,
-que o shell projeta na barra, e ignora `className` e os demais atributos.
+| Propriedade | Tipo                          | Descrição                                                                |
+| ----------- | ----------------------------- | ------------------------------------------------------------------------ |
+| `className` | `string`                      | Classes adicionais do cabeçalho rolável.                                 |
+| `children`  | `ReactNode`                   | `PageBack` ou `PageNavigation`, um `PageTitle` opcional e `PageActions`. |
+| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados ao cabeçalho.                               |
 
 ## Propriedades de PageBack
 
 | Propriedade  | Tipo                                   | Padrão                   | Descrição                                                                                  |
 | ------------ | -------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ |
 | `href`       | `string`                               | obrigatório              | Destino explícito da página pai. Sem ele o retorno não é tabulável nem tem nome acessível. |
-| `children`   | `ReactNode`                            | obrigatório              | Nome do destino pai usado no rótulo acessível e na dica nativa (`title`).                   |
+| `children`   | `ReactNode`                            | obrigatório              | Nome do destino pai usado no rótulo acessível e na dica nativa (`title`).                  |
 | `aria-label` | `string`                               | `Voltar para {children}` | Nome acessível; informe-o quando `children` não for texto simples.                         |
 | `onClick`    | `MouseEventHandler<HTMLAnchorElement>` |                          | Integração opcional com o roteador do consumidor, junto do `href`, nunca no lugar dele.    |
 | `className`  | `string`                               |                          | Classes adicionais do link renderizado como botão `ghost`.                                 |
@@ -360,11 +349,11 @@ que o shell projeta na barra, e ignora `className` e os demais atributos.
 
 ## Propriedades de PageTitle
 
-| Propriedade | Tipo                              | Descrição                                       |
-| ----------- | --------------------------------- | ----------------------------------------------- |
-| `children`  | `ReactNode`                       | Título principal `h1`, com a mesma escala em `PageHeader` e `PageIntro`. |
-| `className` | `string`                          | Classes adicionais do título.                   |
-| demais      | Atributos de `HTMLHeadingElement` | Atributos nativos repassados ao heading.        |
+| Propriedade | Tipo                              | Descrição                                |
+| ----------- | --------------------------------- | ---------------------------------------- |
+| `children`  | `ReactNode`                       | Título principal `h1` de `PageHeader`.   |
+| `className` | `string`                          | Classes adicionais do título.            |
+| demais      | Atributos de `HTMLHeadingElement` | Atributos nativos repassados ao heading. |
 
 ## Propriedades de PageActions
 

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

@@ -45,11 +45,15 @@ render(
         </PaneHeader>
         <PaneBody className="space-y-1">
           <p className="text-sm">Revisão do contrato</p>
-          <p className="text-sm text-muted-foreground">Importação de clientes</p>
+          <p className="text-sm text-muted-foreground">
+            Importação de clientes
+          </p>
           <p className="text-sm text-muted-foreground">Fila de execuções</p>
         </PaneBody>
         <PaneFooter>
-          <Button variant="ghost" size="sm">Ver arquivadas</Button>
+          <Button variant="ghost" size="sm">
+            Ver arquivadas
+          </Button>
         </PaneFooter>
       </Pane>
       <Pane grow>
@@ -86,7 +90,11 @@ render(
     <Split>
       <Pane initialSize="18rem">
         <PaneHeader>
-          <Input icon={<Search />} placeholder="Buscar conversa" aria-label="Buscar conversa" />
+          <Input
+            icon={<Search />}
+            placeholder="Buscar conversa"
+            aria-label="Buscar conversa"
+          />
           <PaneActions>
             <Button variant="ghost" size="icon-sm" aria-label="Nova conversa">
               <SquarePen />
@@ -95,7 +103,9 @@ render(
         </PaneHeader>
         <PaneBody className="space-y-1">
           <p className="text-sm">Revisão do contrato</p>
-          <p className="text-sm text-muted-foreground">Importação de clientes</p>
+          <p className="text-sm text-muted-foreground">
+            Importação de clientes
+          </p>
         </PaneBody>
       </Pane>
       <Pane grow>
@@ -116,15 +126,15 @@ ao lado. Para algo antes do título, use `PaneMedia`; para algo ao lado, use `Pa
 `layout` declara a anatomia da superfície inteira e fica no root; os slots leem esse valor e não o
 recebem. Cada valor é um pacote de recuo, ritmo vertical e divisores.
 
-| Aspecto | `sectioned` (padrão) | `continuous` |
-| --- | --- | --- |
-| Divisores | entre as regiões vizinhas | nenhum |
-| Faixa do cabeçalho | altura fixa de `3.75rem` | acompanha o conteúdo |
-| Ritmo vertical | regiões simétricas | o cabeçalho se aproxima do corpo |
+| Aspecto            | `sectioned` (padrão)      | `continuous`                     |
+| ------------------ | ------------------------- | -------------------------------- |
+| Divisores          | entre as regiões vizinhas | nenhum                           |
+| Faixa do cabeçalho | altura fixa de `3.75rem`  | acompanha o conteúdo             |
+| Ritmo vertical     | regiões simétricas        | o cabeçalho se aproxima do corpo |
 
-O padrão `sectioned` é o pane de operação: a faixa do cabeçalho tem a mesma altura da barra do
-[`PageShell`](/ui/page), então uma navegação lateral e o chrome da página se alinham na mesma
-linha. Use `continuous` quando o pane for um bloco de leitura contínuo, sem fronteiras a marcar.
+O padrão `sectioned` é o pane de operação: a faixa do cabeçalho preserva uma medida fixa para que
+painéis irmãos mantenham o mesmo ritmo. Use `continuous` quando o pane for um bloco de leitura
+contínuo, sem fronteiras a marcar.
 
 Os divisores são derivados da vizinhança: cada região desenha a linha quando há uma região do outro
 lado. Um cabeçalho sem corpo não fecha nada, e um cabeçalho seguido direto de um rodapé produz uma
@@ -165,10 +175,14 @@ render(
           </PaneActions>
         </PaneHeader>
         <PaneBody>
-          <p className="text-sm text-muted-foreground">Cabeçalho, corpo e rodapé.</p>
+          <p className="text-sm text-muted-foreground">
+            Cabeçalho, corpo e rodapé.
+          </p>
         </PaneBody>
         <PaneFooter>
-          <Button variant="ghost" size="sm">Configurações</Button>
+          <Button variant="ghost" size="sm">
+            Configurações
+          </Button>
         </PaneFooter>
       </Pane>
     </div>
@@ -182,14 +196,18 @@ render(
           <PaneDescription>O espaço separa as regiões.</PaneDescription>
         </PaneHeader>
         <PaneBody>
-          <p className="text-sm text-muted-foreground">Sem rodapé e sem divisores.</p>
+          <p className="text-sm text-muted-foreground">
+            Sem rodapé e sem divisores.
+          </p>
         </PaneBody>
       </Pane>
     </div>
     <div className="h-56 overflow-hidden rounded-lg border border-border">
       <Pane className="h-full">
         <PaneBody>
-          <p className="text-sm text-muted-foreground">Só corpo: nenhuma fronteira a marcar.</p>
+          <p className="text-sm text-muted-foreground">
+            Só corpo: nenhuma fronteira a marcar.
+          </p>
         </PaneBody>
       </Pane>
     </div>
@@ -202,7 +220,9 @@ render(
           <PaneTitle>Sem corpo</PaneTitle>
         </PaneHeader>
         <PaneFooter>
-          <Button variant="ghost" size="sm">Ação persistente</Button>
+          <Button variant="ghost" size="sm">
+            Ação persistente
+          </Button>
         </PaneFooter>
       </Pane>
     </div>
@@ -215,11 +235,11 @@ render(
 Três componentes dividem a responsabilidade de uma coluna, e trocá-los de papel é a origem mais
 comum de layout duplicado:
 
-| Componente | Responsabilidade |
-| --- | --- |
-| [`Split`](/ui/split) | Relação espacial entre as áreas e, com `resizable`, o arraste da fronteira. |
-| `Pane` | Tamanho recebido, recuo e as regiões internas: cabeçalho, corpo e rodapé. |
-| [`Sidebar`](/ui/sidebar) | Superfície da navegação lateral e o estado de colapso dos destinos. |
+| Componente               | Responsabilidade                                                            |
+| ------------------------ | --------------------------------------------------------------------------- |
+| [`Split`](/ui/split)     | Relação espacial entre as áreas e, com `resizable`, o arraste da fronteira. |
+| `Pane`                   | Tamanho recebido, recuo e as regiões internas: cabeçalho, corpo e rodapé.   |
+| [`Sidebar`](/ui/sidebar) | Superfície da navegação lateral e o estado de colapso dos destinos.         |
 
 Tamanho inicial, limites e persistência do layout são declarados no `Pane` e operados pelo `Split`
 — a [página do Split](/ui/split) trata deles. Uma `Sidebar` é composta dentro de um `Pane` e usa os
@@ -233,68 +253,68 @@ documento não muda a aparência da faixa.
 
 ## Propriedades de Pane
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `layout` | `'continuous' \| 'sectioned'` | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem. |
-| `inset` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'`, ou `'none'` com slots diretos | Respiro interno do pane sem slots; slots dentro de outro componente exigem declarar. |
-| `id` | `string` | | Identidade estável usada pelo layout redimensionável e persistido. |
-| `initialSize` | `number \| string` | | Tamanho inicial; número é porcentagem, string aceita `%`, `rem`, `em`, `vh`, `vw` e `px`. |
-| `minSize` / `maxSize` | `number \| string` | | Limites aplicados pelo `Split` quando ele é redimensionável. |
-| `grow` | `boolean` | `false` | Ocupa o espaço remanescente no layout simples. |
-| `className` | `string` | | Ajusta a coluna. |
-| `children` | `ReactNode` | | Conteúdo direto ou os slots estruturais. |
+| Propriedade           | Tipo                             | Padrão                                | Descrição                                                                                 |
+| --------------------- | -------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `layout`              | `'continuous' \| 'sectioned'`    | `'sectioned'`                         | Anatomia da superfície inteira; os slots leem esse valor e não o recebem.                 |
+| `inset`               | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'`, ou `'none'` com slots diretos | Respiro interno do pane sem slots; slots dentro de outro componente exigem declarar.      |
+| `id`                  | `string`                         |                                       | Identidade estável usada pelo layout redimensionável e persistido.                        |
+| `initialSize`         | `number \| string`               |                                       | Tamanho inicial; número é porcentagem, string aceita `%`, `rem`, `em`, `vh`, `vw` e `px`. |
+| `minSize` / `maxSize` | `number \| string`               |                                       | Limites aplicados pelo `Split` quando ele é redimensionável.                              |
+| `grow`                | `boolean`                        | `false`                               | Ocupa o espaço remanescente no layout simples.                                            |
+| `className`           | `string`                         |                                       | Ajusta a coluna.                                                                          |
+| `children`            | `ReactNode`                      |                                       | Conteúdo direto ou os slots estruturais.                                                  |
 
 ## Propriedades de PaneHeader
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | `PaneMedia`, `PaneTitle`, `PaneDescription` e `PaneActions`, no máximo um de cada, e conteúdo livre, que aparece depois do título e da descrição. |
-| `className` | `string` | | Ajusta a faixa fixa sobre o recuo do layout. |
+| Propriedade | Tipo        | Padrão | Descrição                                                                                                                                         |
+| ----------- | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`  | `ReactNode` |        | `PaneMedia`, `PaneTitle`, `PaneDescription` e `PaneActions`, no máximo um de cada, e conteúdo livre, que aparece depois do título e da descrição. |
+| `className` | `string`    |        | Ajusta a faixa fixa sobre o recuo do layout.                                                                                                      |
 
 ## Propriedades de PaneMedia
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `size` | `'xs' \| 'sm' \| 'default' \| 'lg'` | `'xs'` | Tamanho da moldura e do glifo na escala compartilhada. |
-| `context` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor. |
-| `variant` | `'subtle' \| 'outline'` | `'subtle'` | Usa preenchimento tonal ou acrescenta borda. |
-| `className` | `string` | | Ajusta a moldura sem substituir a escala. |
-| `asChild` | `boolean` | `false` | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
+| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                                                                                  |
+| ----------- | ------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'xs'`      | Tamanho da moldura e do glifo na escala compartilhada.                                                                     |
+| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                                                                              |
+| `variant`   | `'subtle' \| 'outline'`                                                  | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                                                                               |
+| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                                                                                  |
+| `asChild`   | `boolean`                                                                | `false`     | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
 
 ## Propriedades de PaneTitle
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
-| `className` | `string` | | Ajusta o título, que trunca quando não cabe. |
+| Propriedade | Tipo                         | Padrão | Descrição                                                           |
+| ----------- | ---------------------------- | ------ | ------------------------------------------------------------------- |
+| `level`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`    | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
+| `className` | `string`                     |        | Ajusta o título, que trunca quando não cabe.                        |
 
 ## Propriedades de PaneDescription
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Frase curta de apoio sob o título; trunca quando não cabe. |
-| `className` | `string` | | Ajusta a descrição. |
+| Propriedade | Tipo        | Padrão | Descrição                                                  |
+| ----------- | ----------- | ------ | ---------------------------------------------------------- |
+| `children`  | `ReactNode` |        | Frase curta de apoio sob o título; trunca quando não cabe. |
+| `className` | `string`    |        | Ajusta a descrição.                                        |
 
 ## Propriedades de PaneActions
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Controles no extremo oposto ao título. |
-| `className` | `string` | | Ajusta o agrupamento das ações. |
+| Propriedade | Tipo        | Padrão | Descrição                              |
+| ----------- | ----------- | ------ | -------------------------------------- |
+| `children`  | `ReactNode` |        | Controles no extremo oposto ao título. |
+| `className` | `string`    |        | Ajusta o agrupamento das ações.        |
 
 ## Propriedades de PaneBody
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Conteúdo que ocupa o espaço entre cabeçalho e rodapé. |
-| `className` | `string` | | Ajusta a região flexível e rolável. |
+| Propriedade | Tipo        | Padrão | Descrição                                             |
+| ----------- | ----------- | ------ | ----------------------------------------------------- |
+| `children`  | `ReactNode` |        | Conteúdo que ocupa o espaço entre cabeçalho e rodapé. |
+| `className` | `string`    |        | Ajusta a região flexível e rolável.                   |
 
 `PaneContent` continua exportado como alias depreciado de `PaneBody` e sai em uma próxima versão
 maior. Código novo usa `PaneBody`.
 
 ## Propriedades de PaneFooter
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Navegação ou ações que precisam permanecer acessíveis no rodapé. |
-| `className` | `string` | | Ajusta a faixa fixa sobre o recuo do layout. |
+| Propriedade | Tipo        | Padrão | Descrição                                                        |
+| ----------- | ----------- | ------ | ---------------------------------------------------------------- |
+| `children`  | `ReactNode` |        | Navegação ou ações que precisam permanecer acessíveis no rodapé. |
+| `className` | `string`    |        | Ajusta a faixa fixa sobre o recuo do layout.                     |