@softize/opus 23.0.0 → 24.0.1

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

@@ -37,14 +37,14 @@ vincula ao controle, ligue-o ao controle por `aria-labelledby` para manter o nom
 
 ## Conjunto com legenda e erro
 
-Use [`Content`](/ui/content) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
+Use [`Surface`](/ui/surface) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
 nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma divisão.
 `FieldError` aparece somente quando existe mensagem de erro. Declare `data-invalid="true"` no
 `Field` para que o rótulo acompanhe o contexto de erro; `aria-invalid` marca apenas o controle. O
 `ActionForm` define os dois atributos sozinho.
 
 ```tsx preview col md
-<Content as="fieldset" title="Novo agente">
+<Surface as="fieldset" title="Novo agente">
   <FieldGroup>
     <Field data-invalid="true">
       <FieldLabel htmlFor="agent-name">Nome</FieldLabel>
@@ -69,7 +69,7 @@ nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma
       />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Campo desabilitado
@@ -86,15 +86,14 @@ declare também `data-disabled="true"` no `Field`: `FieldLabel` e `FieldTitle` e
 
 ## Conjunto com moldura
 
-Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário. O
-título permanece uma legenda semântica. A moldura é contínua por padrão; quando o agrupamento pedir
-o acabamento compacto com a legenda integrada à borda, declare `frameVariant="legend"`.
+Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário.
+Declare `as="fieldset"`: a `Surface` transforma o header em `legend` nativa e preserva o título
+como legenda semântica.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title={
     <span className="flex items-center gap-2">
       <IconTile size="xs">
@@ -110,13 +109,13 @@ o acabamento compacto com a legenda integrada à borda, declare `frameVariant="l
       <Input id="vehicle-plate" defaultValue="GBR1A03" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Compatibilidade de FieldSet
 
 `FieldSet` e `FieldLegend` continuam disponíveis para composições existentes. Em código novo,
-prefira `Content as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
+prefira `Surface as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
 demais regiões nomeadas. A migração pode ser gradual porque os controles e o `FieldGroup` não mudam.
 
 ## Propriedades de FieldSet
@@ -127,11 +126,11 @@ demais regiões nomeadas. A migração pode ser gradual porque os controles e o
 
 ## Propriedades de Field
 
-| Propriedade    | Tipo                                         | Padrão       | Descrição                                                                                             |
-| -------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
-| `orientation`  | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
-| `data-invalid` | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
-| `data-disabled` | `'true' \| 'false'`                         |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle. |
+| Propriedade     | Tipo                                         | Padrão       | Descrição                                                                                             |
+| --------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
+| `orientation`   | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
+| `data-invalid`  | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
+| `data-disabled` | `'true' \| 'false'`                          |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle.               |
 
 ## Propriedades de FieldLegend
 

package/src/ui/docs/content/icon-tile.md

@@ -18,19 +18,20 @@ uma classe `size-*` preserva a própria medida.
 Slots genéricos de ícone, como `FieldLegend.icon`, não criam a moldura: passe o glifo quando quiser
 só o ícone e componha `IconTile` quando a moldura reforçar a hierarquia.
 
-Os slots de mídia das superfícies já são um `IconTile`: `CardMedia`, `ContentMedia`, `DialogMedia`,
-`DrawerMedia` e `PaneMedia` desenham a moldura sozinhos. Passe só o glifo e escolha `size`,
-`context` e `variant` no próprio slot. Em [`Content`](/ui/content), um `IconTile` passado em
-`media` é adotado pelo slot, que herda o que ele declara, em vez de desenhar uma moldura dentro da
-outra.
+Os slots de mídia estruturais não criam decoração. `SurfaceMedia`, `DialogMedia` e `DrawerMedia`
+reservam posição e alinhamento, mas preservam o nó recebido. Passe o glifo diretamente
+quando ele deve ficar solto; componha `IconTile` de forma explícita quando quiser moldura.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title="Veículo"
-  media={<CarFront aria-hidden="true" />}
+  media={
+    <IconTile size="xs">
+      <CarFront aria-hidden="true" />
+    </IconTile>
+  }
 >
   <FieldGroup>
     <Field>
@@ -38,7 +39,7 @@ outra.
       <Input id="icon-tile-plate" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Propriedades de IconTile
@@ -59,10 +60,10 @@ não é renderizado pelo `IconTile`. Os padrões são os mesmos do componente: `
 
 ```ts
 function iconTileVariants(options?: {
-  context?: IconTileContext | null
-  variant?: IconTileVariant | null
-  size?: IconTileSize | null
-}): string
+  context?: IconTileContext | null;
+  variant?: IconTileVariant | null;
+  size?: IconTileSize | null;
+}): string;
 ```
 
 `resolveIconTileStyle` continua exportado, mas está depreciado e sai em uma próxima versão maior. Ele

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

@@ -6,13 +6,13 @@ centralizado e ocupa a largura disponível até `80rem` (`max-w-7xl`). Use `clas
 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.
+exige exatamente um heading principal. Use `PageTitle` no cabeçalho, `Surface level={1}` no body,
+ou deixe um `PageState` ativo assumir esse papel. O cabeçalho 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
+[`Surface`](/ui/surface), [`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.
@@ -85,7 +85,7 @@ ocupa a mesma posição introdutória sem transformar a trilha em ação.
 ## 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 compõe a
+introdução. Não crie um cabeçalho paralelo no layout 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
@@ -109,7 +109,7 @@ navegação e as ações do shell no `PageHeader` rolável da página ativa.
 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 navegação, título e ações no mesmo header:
+Na composição explícita, combine navegação, título e ações no mesmo cabeçalho:
 
 ```tsx preview col
 <PageShell
@@ -137,7 +137,7 @@ Na composição explícita, combine navegação, título e ações no mesmo head
 
 ## Composição explícita
 
-Use os slots quando a página precisar compor o header diretamente. Não misture propriedades da
+Use os slots quando a página precisar compor o cabeçalho diretamente. Não misture propriedades da
 forma curta com `PageHeader` ou `PageBody`.
 
 ```tsx preview col
@@ -158,9 +158,11 @@ render(
 );
 ```
 
-Em uma página de listagem, [`Content`](/ui/content) pode fornecer o título e as ações da coleção,
+Em uma página de listagem, [`Surface`](/ui/surface) 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`.
+materializa somente o `PageHeader` necessário para recebê-las, sem duplicar o heading de `Surface`.
+[Composições](/ui/compositions) compara essa forma, com o título no corpo, à forma compacta, com o
+título no cabeçalho.
 
 ## Ações de etapa no rodapé
 
@@ -197,20 +199,25 @@ render(
       <PageHeader>
         <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) => (
-          <div key={id} className="rounded-md border border-border p-3 text-sm">
-            {id}
-          </div>
-        ))}
+      <PageBody className="min-h-0 flex-1 overflow-y-auto">
+        <div className="space-y-2">
+          {[
+            "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>
+          ))}
+        </div>
       </PageBody>
     </Page>
   </div>,
@@ -218,8 +225,8 @@ render(
 ```
 
 Uma [`ActionList`](/ui/action-list) não precisa dessas classes. Filha de `PageBody`, ou de um
-[`Content`](/ui/content) dentro dele, ela recebe a altura da página e assume `layout="fill"`
-sozinha: `PageBody`, `Content` e `ContentBody` passam a repassar a altura até ela, o cabeçalho da
+[`Surface`](/ui/surface) dentro dele, ela recebe a altura da página e assume `layout="fill"`
+sozinha: `PageBody`, `Surface` e `SurfaceBody` passam a repassar a altura até ela, o cabeçalho da
 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.
 
@@ -373,21 +380,24 @@ estado na própria seção com [`DataState`](/ui/data-state), [`ActionView`](/ui
 
 ## Propriedades de PageBody
 
-| Propriedade | Tipo                          | Descrição                                  |
-| ----------- | ----------------------------- | ------------------------------------------ |
-| `children`  | `ReactNode`                   | Conteúdo principal da página.              |
-| `className` | `string`                      | Classes adicionais da região principal.    |
-| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados ao container. |
+`PageBody` separa seus blocos diretos por `1.5rem`; o inset da página continua pertencendo a
+`Page`. Uma grade, lista compacta ou linha horizontal fica dentro de um wrapper próprio.
+
+| Propriedade | Tipo                          | Descrição                                                 |
+| ----------- | ----------------------------- | --------------------------------------------------------- |
+| `children`  | `ReactNode`                   | Blocos principais, separados pelo ritmo estrutural.       |
+| `className` | `string`                      | Classes de ocupação, overflow, alinhamento ou tipografia. |
+| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados ao container.                |
 
 Em uma `Page` com `layout="fill"`, o `PageBody` vira coluna flexível sozinho quando contém uma `ActionList` que
 ocupa a altura.
 
 ## Propriedades de PageActionsTarget
 
-| Propriedade | Tipo                  | Descrição                                                    |
-| ----------- | --------------------- | ------------------------------------------------------------ |
-| `target`    | `HTMLElement \| null` | Destino externo das ações; `null` mantém as ações no header. |
-| `children`  | `ReactNode`           | Árvore de página que poderá declarar `PageActions`.          |
+| Propriedade | Tipo                  | Descrição                                                       |
+| ----------- | --------------------- | --------------------------------------------------------------- |
+| `target`    | `HTMLElement \| null` | Destino externo das ações; `null` mantém as ações no cabeçalho. |
+| `children`  | `ReactNode`           | Árvore de página que poderá declarar `PageActions`.             |
 
 ## Propriedades de PageState
 

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

@@ -1,320 +1,72 @@
-## A coluna encaixada em um layout
+## Uma unidade de layout do Split
 
-Use `Pane` para a coluna ou faixa que ocupa uma das posições de um [`Split`](/ui/split): a
-navegação à esquerda, o inspetor à direita, a lista que abre o detalhe ao lado. O `Split` decide a
-relação espacial e o redimensionamento; o `Pane` decide o que existe dentro da área recebida.
-
-No formato mais simples, o pane é uma caixa com recuo e o conteúdo é seu.
+Use `Pane` somente para declarar uma coluna ou faixa dentro de [`Split`](/ui/split). Ele informa
+identidade e limites de tamanho, mas não cria superfície, recuo, borda, fundo, rolagem ou regiões
+internas. Essa separação mantém o redimensionamento independente da apresentação.
 
 ```tsx preview
 render(
   <div className="h-56 overflow-hidden rounded-lg border border-border">
     <Split>
-      <Pane initialSize="16rem" className="bg-muted/30">
-        <p className="text-sm text-muted-foreground">Navegação.</p>
+      <Pane initialSize="16rem">
+        <Surface framed className="h-full">
+          <SurfaceBody>
+            <p className="text-sm text-muted-foreground">Navegação.</p>
+          </SurfaceBody>
+        </Surface>
       </Pane>
       <Pane grow>
-        <p className="text-sm text-muted-foreground">Conteúdo.</p>
+        <main className="h-full overflow-y-auto p-6">
+          <p className="text-sm text-muted-foreground">Conteúdo.</p>
+        </main>
       </Pane>
     </Split>
   </div>,
 );
 ```
 
-## Cabeçalho, corpo e rodapé
-
-Quando a área precisa de regiões fixas e de um corpo que rola, componha os slots. `PaneHeader`
-nomeia a região, `PaneBody` ocupa o espaço restante e concentra a rolagem vertical, e `PaneFooter`
-mantém à vista o que não pode sair da tela.
-
-```tsx preview
-render(
-  <div className="h-72 overflow-hidden rounded-lg border border-border">
-    <Split>
-      <Pane initialSize="18rem">
-        <PaneHeader>
-          <PaneMedia>
-            <MessagesSquare />
-          </PaneMedia>
-          <PaneTitle>Conversas</PaneTitle>
-          <PaneActions>
-            <Button variant="ghost" size="icon-sm" aria-label="Nova conversa">
-              <SquarePen />
-            </Button>
-          </PaneActions>
-        </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">Fila de execuções</p>
-        </PaneBody>
-        <PaneFooter>
-          <Button variant="ghost" size="sm">
-            Ver arquivadas
-          </Button>
-        </PaneFooter>
-      </Pane>
-      <Pane grow>
-        <p className="text-sm text-muted-foreground">Conversa selecionada.</p>
-      </Pane>
-    </Split>
-  </div>,
-);
-```
-
-O cabeçalho reconhece quatro slots — `PaneMedia`, `PaneTitle`, `PaneDescription` e `PaneActions` —
-e monta a linha sozinho: mídia, título e descrição de um lado, ações no extremo oposto. A ordem em
-que os slots são escritos não altera a posição. Cada slot aparece no máximo uma vez: repetir um
-deles interrompe a renderização com um erro que lista os slots aceitos.
-
-Título e descrição truncam quando a coluna encolhe, em vez de quebrar a altura da faixa.
+Quando a região precisa de cabeçalho, corpo, rodapé ou aparência elevada, componha uma
+[`Surface`](/ui/surface) dentro do pane. Quando o filho já é uma estrutura completa, como
+`Sidebar`, ele pode ocupar o pane diretamente. [Composições](/ui/compositions) mostra um pane com
+`Surface` completa, com cabeçalho, corpo rolável e rodapé.
 
-Nas ações do cabeçalho, use `Button` `ghost` no tamanho `icon-sm` (1.75rem), como nos exemplos. O
-pane é uma superfície densa, com título e descrição em escala menor, e o quadrado menor acompanha
-essa escala. [`Dialog`](/ui/dialog) e [`Drawer`](/ui/drawer) usam `icon` (2.25rem) no voltar e nas
-ações do cabeçalho, e a [`Presentation`](/ui/presentation) usa o mesmo tamanho no voltar e no botão
-que abre o assistente.
+## Redimensionamento
 
-## Busca ou marca no cabeçalho
-
-Uma coluna às vezes precisa, no topo, de algo que não é título nem ação: uma busca que filtra a
-lista, a marca de uma barra lateral. Escreva esse conteúdo direto dentro do `PaneHeader`, ao lado
-dos slots. Só o `Pane` aceita conteúdo livre no cabeçalho; os headers de `Card`, `Dialog` e `Drawer`
-aceitam apenas os próprios slots.
+Em um `Split` redimensionável, use `id` estável em cada pane. Números representam porcentagens;
+strings preservam unidades explícitas.
 
 ```tsx preview
 render(
   <div className="h-56 overflow-hidden rounded-lg border border-border">
-    <Split>
-      <Pane initialSize="18rem">
-        <PaneHeader>
-          <Input
-            icon={<Search />}
-            placeholder="Buscar conversa"
-            aria-label="Buscar conversa"
+    <Split id="workspace" resizable>
+      <Pane id="navigation" initialSize="18rem" minSize="14rem" maxSize="28rem">
+        <Sidebar className="w-full">
+          <SidebarNav
+            navLabel="Projeto"
+            activeId="overview"
+            groups={[{ items: [{ id: "overview", label: "Visão geral" }] }]}
           />
-          <PaneActions>
-            <Button variant="ghost" size="icon-sm" aria-label="Nova conversa">
-              <SquarePen />
-            </Button>
-          </PaneActions>
-        </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>
-        </PaneBody>
+        </Sidebar>
       </Pane>
-      <Pane grow>
-        <p className="text-sm text-muted-foreground">Conversa selecionada.</p>
+      <Pane id="content" grow minSize="20rem">
+        <main className="h-full overflow-y-auto p-6">Conteúdo principal.</main>
       </Pane>
     </Split>
   </div>,
 );
 ```
 
-O conteúdo livre ocupa o lugar do título e absorve a largura disponível, por isso as ações
-continuam no extremo oposto. Quando há título, o conteúdo livre vem sempre depois do título e da descrição,
-qualquer que seja a ordem no JSX: uma busca escrita junto de um `PaneTitle` aparece abaixo dele, não
-ao lado. Para algo antes do título, use `PaneMedia`; para algo ao lado, use `PaneActions`.
-
-## Escolher entre seccionado e contínuo
-
-`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 |
-
-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
-linha só. A tela não escreve `border-b` nem `border-t`.
-
-No `continuous`, um cabeçalho sem corpo nem rodapé fecha o pane com o mesmo recuo que tem em cima.
-Uma classe `pb-*` no `PaneHeader` não altera esse recuo: a regra só vale quando o cabeçalho é a
-última região e tem precedência sobre o `className`. No `sectioned`, a faixa tem altura fixa e
-centraliza a linha, então não há recuo de baixo a ajustar.
-
-## Recuo do pane e recuo das regiões
-
-`inset` é o respiro interno do pane sem slots: `md` por padrão, com `none`, `sm` e `lg`
-disponíveis. Quando `PaneHeader`, `PaneBody` ou `PaneFooter` são filhos **diretos** do pane, o recuo
-passa a ser de cada região e o `inset` vira `none` sozinho — é o que permite ao divisor alcançar a
-borda da coluna.
-
-O ajuste enxerga só o primeiro nível. Se os slots vierem dentro de outro componente — é o caso da
-`Sidebar`, que traz a superfície e o colapso —, o pane não sabe que eles existem: declare
-`inset="none"` você mesmo, ou a coluna ganha um recuo que empurra o divisor para dentro.
-
-## A matriz de layouts e slots
-
-As regiões são independentes: a coluna usa só as que precisa, nos dois layouts, e os divisores
-acompanham as regiões presentes.
-
-```tsx preview col
-render(
-  <div className="grid grid-cols-2 gap-4">
-    <div className="h-56 overflow-hidden rounded-lg border border-border">
-      <Pane className="h-full">
-        <PaneHeader>
-          <PaneTitle>Seccionado</PaneTitle>
-          <PaneActions>
-            <Button variant="ghost" size="icon-sm" aria-label="Mais ações">
-              <Ellipsis />
-            </Button>
-          </PaneActions>
-        </PaneHeader>
-        <PaneBody>
-          <p className="text-sm text-muted-foreground">
-            Cabeçalho, corpo e rodapé.
-          </p>
-        </PaneBody>
-        <PaneFooter>
-          <Button variant="ghost" size="sm">
-            Configurações
-          </Button>
-        </PaneFooter>
-      </Pane>
-    </div>
-    <div className="h-56 overflow-hidden rounded-lg border border-border">
-      <Pane layout="continuous" className="h-full">
-        <PaneHeader>
-          <PaneMedia>
-            <ChartNoAxesColumn />
-          </PaneMedia>
-          <PaneTitle>Contínuo com mídia</PaneTitle>
-          <PaneDescription>O espaço separa as regiões.</PaneDescription>
-        </PaneHeader>
-        <PaneBody>
-          <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>
-        </PaneBody>
-      </Pane>
-    </div>
-    <div className="h-56 overflow-hidden rounded-lg border border-border">
-      <Pane className="h-full">
-        <PaneHeader>
-          <PaneMedia context="primary">
-            <Folder />
-          </PaneMedia>
-          <PaneTitle>Sem corpo</PaneTitle>
-        </PaneHeader>
-        <PaneFooter>
-          <Button variant="ghost" size="sm">
-            Ação persistente
-          </Button>
-        </PaneFooter>
-      </Pane>
-    </div>
-  </div>,
-);
-```
-
-## Onde termina o Pane
-
-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.         |
-
-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
-mesmos slots para o próprio cabeçalho e rodapé; ela não tem regiões próprias.
-
-## Hierarquia do título
-
-`PaneTitle` é um heading. `level` escolhe a hierarquia do documento, de `1` a `6`, com `2` como
-padrão. O tamanho visual vem da família e do `layout`, não do nível, então corrigir a estrutura do
-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.                                                  |
-
-## 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.                                                                                                      |
-
-## 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. |
-
-## 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.                        |
-
-## 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.                                        |
-
-## 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.        |
-
-## 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.                   |
-
-`PaneContent` continua exportado como alias depreciado de `PaneBody` e sai em uma próxima versão
-maior. Código novo usa `PaneBody`.
+## Propriedades
 
-## Propriedades de PaneFooter
+| Propriedade   | Tipo                                               | Padrão  | Descrição                                                                |
+| ------------- | -------------------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `id`          | `string`                                           |         | Identidade estável dentro do grupo, necessária para persistir o layout.  |
+| `initialSize` | `number \| \`${number}%\` \| rem, em, vh, vw ou px |         | Tamanho inicial. Números representam porcentagens.                       |
+| `minSize`     | mesmo tipo de `initialSize`                        |         | Limite mínimo durante o redimensionamento.                               |
+| `maxSize`     | mesmo tipo de `initialSize`                        |         | Limite máximo durante o redimensionamento.                               |
+| `grow`        | `boolean`                                          | `false` | Faz a região ocupar o espaço remanescente no layout simples.             |
+| `className`   | `string`                                           |         | Ajustes de layout da unidade, sem substituir a superfície do conteúdo.   |
+| `children`    | `ReactNode`                                        |         | Estrutura responsável pela apresentação e organização interna da região. |
 
-| 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.                     |
+`Pane` não possui slots. APIs antigas como `PaneHeader`, `PaneBody` e `PaneFooter` foram removidas;
+use a anatomia de `Surface` quando essas regiões forem necessárias.