@softize/opus 23.0.0 → 24.0.1

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

@@ -6,17 +6,27 @@ erro. O consumidor compõe somente o conteúdo disponível, aqui com [`Detail`](
 coleção, use [`ActionList`](/ui/action-list).
 
 ```tsx preview col
-const [id, setId] = useState('empresa-x')
+const [id, setId] = useState("empresa-x");
 
 render(
   <DocBrowserActionProvider>
     <div className="w-full space-y-3">
       <ButtonGroup mode="spaced">
-        <Button variant="outline" size="sm" onClick={() => setId('empresa-x')}>Empresa X</Button>
-        <Button variant="outline" size="sm" onClick={() => setId('empresa-y')}>Empresa Y</Button>
-        <Button variant="outline" size="sm" onClick={() => setId('sessao-fantasma')}>Inexistente (erro)</Button>
+        <Button variant="outline" size="sm" onClick={() => setId("empresa-x")}>
+          Empresa X
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => setId("empresa-y")}>
+          Empresa Y
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setId("sessao-fantasma")}
+        >
+          Inexistente (erro)
+        </Button>
       </ButtonGroup>
-      <Card className="p-4">
+      <Surface framed elevation="raised" className="p-4">
         <ActionView action={docWorkspaceView} input={{ id }}>
           {(ws) => (
             <DetailGroup columns={3}>
@@ -24,15 +34,20 @@ render(
               <DetailField label="Cliente" value={ws.client} />
               <DetailField
                 label="Status"
-                value={<DictionaryValue dict={docWorkspaceStatus} value={ws.status} />}
+                value={
+                  <DictionaryValue
+                    dict={docWorkspaceStatus}
+                    value={ws.status}
+                  />
+                }
               />
             </DetailGroup>
           )}
         </ActionView>
-      </Card>
+      </Surface>
     </div>
   </DocBrowserActionProvider>,
-)
+);
 ```
 
 O handler da view deve devolver um valor. Uma consulta que resolve `undefined` é tratada como erro
@@ -47,13 +62,13 @@ mais de uma região da tela ou quando o carregamento precisa ser orquestrado por
 
 ## Propriedades de ActionView
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `action` | `ViewContract<TInput, TData>` | | A ViewAction do Opus (kind view, 1 recurso). |
-| `input` | `TInput` | | Geralmente { id } — mudou, recarrega. |
-| `children` | `(data: TData, refetch) => ReactNode` | | Obrigatório, salvo quando `render` é informado. Conteúdo apresentado quando os dados estão disponíveis. `refetch` permite recarregar por código. |
-| `render` | `(data: TData, refetch) => ReactNode` | | Alias de compatibilidade de `children`; `children` tem precedência. Sem nenhum dos dois, o componente lança erro. |
-| `loading` | `ReactNode \| boolean` | `3 skeletons` | Sobrescreve o carregamento: um nó próprio, `true` para o padrão ou `false` para não renderizar nada enquanto carrega. |
-| `empty` | `ReactNode` | `emptyMessage` ou nada | Estado reservado a `data` indefinido. Como o react-query converte esse resultado em erro, ele não aparece na prática; devolva um valor ou o erro `not_found`. |
-| `emptyMessage` | `string` | | Atalho do vazio, sujeito à mesma limitação de `empty`: a frase na mesma superfície de `DataState` (`Empty` com moldura sólida). |
-| `error` | `(err, retry) => ReactNode` | `"Não foi possível carregar" + Tentar de novo` | Sobrescreve o estado de erro padrão. Sem ele, a frase do servidor só aparece quando é legível pela pessoa (`conflict`, `validation`, `not_found`, `authorization`, `authentication`); código técnico nunca vira título, e o botão de tentar de novo some quando o problema é de permissão ou sessão. |
+| Propriedade    | Tipo                                  | Padrão                                         | Descrição                                                                                                                                                                                                                                                                                            |
+| -------------- | ------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `action`       | `ViewContract<TInput, TData>`         |                                                | A ViewAction do Opus (kind view, 1 recurso).                                                                                                                                                                                                                                                         |
+| `input`        | `TInput`                              |                                                | Geralmente { id } — mudou, recarrega.                                                                                                                                                                                                                                                                |
+| `children`     | `(data: TData, refetch) => ReactNode` |                                                | Obrigatório, salvo quando `render` é informado. Conteúdo apresentado quando os dados estão disponíveis. `refetch` permite recarregar por código.                                                                                                                                                     |
+| `render`       | `(data: TData, refetch) => ReactNode` |                                                | Alias de compatibilidade de `children`; `children` tem precedência. Sem nenhum dos dois, o componente lança erro.                                                                                                                                                                                    |
+| `loading`      | `ReactNode \| boolean`                | `3 skeletons`                                  | Sobrescreve o carregamento: um nó próprio, `true` para o padrão ou `false` para não renderizar nada enquanto carrega.                                                                                                                                                                                |
+| `empty`        | `ReactNode`                           | `emptyMessage` ou nada                         | Estado reservado a `data` indefinido. Como o react-query converte esse resultado em erro, ele não aparece na prática; devolva um valor ou o erro `not_found`.                                                                                                                                        |
+| `emptyMessage` | `string`                              |                                                | Atalho do vazio, sujeito à mesma limitação de `empty`: a frase na mesma superfície de `DataState` (`Empty` com moldura sólida).                                                                                                                                                                      |
+| `error`        | `(err, retry) => ReactNode`           | `"Não foi possível carregar" + Tentar de novo` | Sobrescreve o estado de erro padrão. Sem ele, a frase do servidor só aparece quando é legível pela pessoa (`conflict`, `validation`, `not_found`, `authorization`, `authentication`); código técnico nunca vira título, e o botão de tentar de novo some quando o problema é de permissão ou sessão. |

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

@@ -43,7 +43,7 @@ há texto visível. O glifo dentro do controle acompanha o tamanho (0.875rem em
 Escolha o tamanho pela região, não pela importância visual: `variant` e `context` resolvem a
 hierarquia da ação. Headers de Page, a criação no cabeçalho de uma coleção e footers de
 [`Dialog`](/ui/dialog) e [`Drawer`](/ui/drawer) usam `default`; a criação de uma coleção é um botão textual, sem
-ícone, como mostra [`Content`](/ui/content). Operações densas de toolbar ou de seção usam `sm`;
+ícone, como mostra [`Surface`](/ui/surface). Operações densas de toolbar ou de seção usam `sm`;
 ações dentro de linha ou célula usam `xs` ou `icon-xs`. Assim a mesma decisão mantém a mesma altura
 mesmo quando uma superfície troca uma ação secundária por uma primária.
 

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

@@ -42,7 +42,7 @@ frase. Não copie as regras da Base para cá.
 | Superfície Opus                                                                                                           | Papel enviado à Base                                           |
 | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
 | `label`, botão de confirmação e filhos de `Button`                                                                        | `button`                                                       |
-| `title`, `CardTitle`, `DialogTitle`                                                                                       | `title`                                                        |
+| `title`, `SurfaceTitle`, `DialogTitle`                                                                                    | `title`                                                        |
 | `description`, `hint`, `help`                                                                                             | `description` ou `helper-text`                                 |
 | `messages.success` e `messages.error`                                                                                     | `success` e `error`                                            |
 | `confirm.message`, `dialog.*().body` e texto relevante no `DialogBody`                                                    | `dialog-body`                                                  |

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

@@ -0,0 +1,479 @@
+---
+title: Composições
+---
+
+# Composições
+
+Use esta página para decidir como montar uma tela antes de escolher as propriedades de cada
+componente. `Page`, `Dialog`, `Drawer` e `Surface` se organizam da mesma forma: um cabeçalho, um
+corpo e um rodapé com a decisão da etapa. Cada família admite as ações e a navegação indicadas na
+tabela abaixo. Em `Page`, `Dialog` e `Drawer`, o corpo também pode começar por uma intro que leva o
+título. `Pane` fica fora dessa organização: ele só reserva, dentro de um `Split`, o espaço em que
+uma `Surface` aparece.
+
+Todos os exemplos mostram a mesma tarefa, editar uma ordem de serviço, em superfícies diferentes.
+As propriedades de cada componente ficam nas páginas da família: [`Page`](/ui/page),
+[`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer), [`Surface`](/ui/surface) e [`Pane`](/ui/pane).
+
+## As regiões de cada superfície
+
+Cada família dá um nome próprio a cada região. A tabela mostra a correspondência entre elas.
+
+| Região               | Page                                        | Dialog                        | Drawer                        | Surface                       |
+| -------------------- | ------------------------------------------- | ----------------------------- | ----------------------------- | ----------------------------- |
+| Navegação            | `PageNavigation` ou `PageBack`              | `DialogNavigation`            | `DrawerNavigation`            | Não existe                    |
+| Título no cabeçalho  | `PageTitle`                                 | `DialogTitle`                 | `DrawerTitle`                 | `SurfaceTitle`                |
+| Ações do cabeçalho   | `PageActions`                               | `DialogActions`               | `DrawerActions`               | `SurfaceActions`              |
+| Intro                | `Surface level={1}` no início do `PageBody` | `DialogIntro`                 | `DrawerIntro`                 | Não existe                    |
+| Ações da intro       | Ações da `Surface level={1}`                | `DialogIntroActions`          | `DrawerIntroActions`          | Não existe                    |
+| Corpo                | `PageBody`                                  | `DialogBody`                  | `DrawerBody`                  | `SurfaceBody`                 |
+| Rodapé               | `PageFooter`                                | `DialogFooter`                | `DrawerFooter`                | `SurfaceFooter`               |
+| Divisores            | Antes do `PageFooter`                       | `sectioned` (padrão)          | `sectioned` (padrão)          | `sectioned`                   |
+| Sem divisores        | Cabeçalho e corpo                           | `continuous`                  | `continuous`                  | `continuous` (padrão)         |
+
+`layout` escolhe entre as duas anatomias em `DialogContent`, `DrawerContent` e `Surface`. Em
+`sectioned`, uma linha separa as regiões vizinhas; em `continuous`, o espaço faz essa separação. Na
+`Surface`, `sectioned` exige `framed` ou `elevation="raised"`, para que a linha tenha um limite. A
+`Page` não oferece anatomia `sectioned`: cabeçalho e corpo são contínuos, enquanto o `PageFooter`
+é uma faixa própria, separada por sua borda superior. O `layout` da página decide apenas a ocupação
+de altura.
+
+## Onde cada ação fica
+
+A posição de uma ação informa a que ela se refere. Escolha o lugar pelo alcance da ação, não pelo
+espaço livre na tela.
+
+| Lugar      | Use para                                                                                                   |
+| ---------- | ---------------------------------------------------------------------------------------------------------- |
+| Navegação  | Sair ou voltar na estrutura: a trilha da página, a etapa anterior de um fluxo modal ou recolher o painel.  |
+| Cabeçalho  | Ações que valem para a superfície inteira, como abrir uma conversa sobre o registro.                       |
+| Intro      | Ações ligadas ao título e ao conteúdo, como ver o histórico do registro.                                    |
+| Rodapé     | A decisão da etapa: **Cancelar** em `ghost` e a ação principal sólida, alinhadas à direita.                |
+
+Em `Dialog` e `Drawer`, a navegação abre a linha do cabeçalho e fica junto do título, a `0.5rem`
+dele. As ações ficam no extremo oposto, antes do botão de fechar, e mantêm a distância maior da
+família até o título. Na `Page`, a navegação fica acima do título; quando o título está na intro,
+ela divide a linha com as ações da página.
+
+Em `Dialog` e `Drawer`, cabeçalho e rodapé permanecem visíveis enquanto o corpo rola; a intro rola
+junto com o conteúdo.
+
+## Título no cabeçalho ou na intro
+
+O título pode ficar em dois lugares, e essa escolha define a composição:
+
+- **Com intro:** o cabeçalho guarda só a navegação, as ações da superfície e o fechamento. O título
+  abre o corpo junto das ações do conteúdo. Use quando esses controles da superfície precisam
+  continuar estáveis e separados do registro aberto.
+- **Compacta:** título, ações do conteúdo e ações da superfície dividem a linha do cabeçalho, e a
+  intro é omitida. Use quando uma linha basta para nomear a tarefa e agir sobre ela.
+
+Na composição compacta, coloque as ações do conteúdo antes das ações da superfície, no mesmo slot de
+ações. Em `Dialog` e `Drawer`, o título no cabeçalho trunca quando não cabe na linha; na intro, ele
+usa uma escala maior e quebra em mais de uma linha.
+
+## Dialog
+
+Abra cada combinação para comparar. As linhas trocam o `layout` de `DialogContent`; as colunas
+trocam o lugar do título. O campo e o rodapé são os mesmos nos quatro casos.
+
+```tsx preview
+function OrderField() {
+  const id = useId();
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id}>Responsável</Label>
+      <Input id={id} defaultValue="Marina Alves" />
+    </div>
+  );
+}
+
+function DialogWithIntro({ layout, label }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{label}</Button>
+      </DialogTrigger>
+      <DialogContent layout={layout}>
+        <DialogHeader>
+          <DialogActions>
+            <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+              <MessageCircle />
+            </Button>
+          </DialogActions>
+        </DialogHeader>
+        <DialogBody>
+          <DialogIntro>
+            <DialogTitle>Editar ordem de serviço</DialogTitle>
+            <DialogIntroActions>
+              <Button variant="outline" size="sm">
+                Ver histórico
+              </Button>
+            </DialogIntroActions>
+          </DialogIntro>
+          <OrderField />
+        </DialogBody>
+        <DialogFooter>
+          <ButtonGroup mode="spaced">
+            <DialogClose asChild>
+              <Button variant="ghost">Cancelar</Button>
+            </DialogClose>
+            <Button>Salvar</Button>
+          </ButtonGroup>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CompactDialog({ layout, label }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{label}</Button>
+      </DialogTrigger>
+      <DialogContent layout={layout}>
+        <DialogHeader>
+          <DialogMedia>
+            <Wrench />
+          </DialogMedia>
+          <DialogTitle>Editar ordem de serviço</DialogTitle>
+          <DialogActions>
+            <Button variant="outline" size="sm">
+              Ver histórico
+            </Button>
+            <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+              <MessageCircle />
+            </Button>
+          </DialogActions>
+        </DialogHeader>
+        <DialogBody>
+          <OrderField />
+        </DialogBody>
+        <DialogFooter>
+          <ButtonGroup mode="spaced">
+            <DialogClose asChild>
+              <Button variant="ghost">Cancelar</Button>
+            </DialogClose>
+            <Button>Salvar</Button>
+          </ButtonGroup>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+render(
+  <div className="grid grid-cols-2 gap-3">
+    <DialogWithIntro layout="sectioned" label="Seccionado com intro" />
+    <CompactDialog layout="sectioned" label="Seccionado compacto" />
+    <DialogWithIntro layout="continuous" label="Contínuo com intro" />
+    <CompactDialog layout="continuous" label="Contínuo compacto" />
+  </div>,
+);
+```
+
+Prefira `continuous` para uma tarefa curta, em que a linha entre as regiões seria ruído. O `Dialog`
+não recebe navegação neste exemplo: use `DialogNavigation` quando o modal trocar de etapa e a pessoa
+precisar voltar à anterior.
+
+## Drawer
+
+O `Drawer` segue a mesma grade. A navegação aparece aqui como o controle de recolher o painel: um
+`DrawerClose` dentro de `DrawerNavigation`, com `showCloseButton={false}` para que o painel não tenha
+dois controles de fechamento.
+
+```tsx preview
+function OrderField() {
+  const id = useId();
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id}>Responsável</Label>
+      <Input id={id} defaultValue="Marina Alves" />
+    </div>
+  );
+}
+
+function CollapseButton() {
+  return (
+    <DrawerClose asChild>
+      <Button variant="ghost" size="icon" aria-label="Recolher painel">
+        <ChevronsRight />
+      </Button>
+    </DrawerClose>
+  );
+}
+
+function DrawerWithIntro({ layout, label }) {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">{label}</Button>
+      </DrawerTrigger>
+      <DrawerContent layout={layout} showCloseButton={false}>
+        <DrawerHeader>
+          <DrawerNavigation>
+            <CollapseButton />
+          </DrawerNavigation>
+          <DrawerActions>
+            <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+              <MessageCircle />
+            </Button>
+          </DrawerActions>
+        </DrawerHeader>
+        <DrawerBody>
+          <DrawerIntro>
+            <DrawerTitle>Editar ordem de serviço</DrawerTitle>
+            <DrawerIntroActions>
+              <Button variant="outline" size="sm">
+                Ver histórico
+              </Button>
+            </DrawerIntroActions>
+          </DrawerIntro>
+          <OrderField />
+        </DrawerBody>
+        <DrawerFooter>
+          <ButtonGroup mode="spaced">
+            <DrawerClose asChild>
+              <Button variant="ghost">Cancelar</Button>
+            </DrawerClose>
+            <Button>Salvar</Button>
+          </ButtonGroup>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+function CompactDrawer({ layout, label }) {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">{label}</Button>
+      </DrawerTrigger>
+      <DrawerContent layout={layout} showCloseButton={false}>
+        <DrawerHeader>
+          <DrawerNavigation>
+            <CollapseButton />
+          </DrawerNavigation>
+          <DrawerTitle>Editar ordem de serviço</DrawerTitle>
+          <DrawerActions>
+            <Button variant="outline" size="sm">
+              Ver histórico
+            </Button>
+            <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+              <MessageCircle />
+            </Button>
+          </DrawerActions>
+        </DrawerHeader>
+        <DrawerBody>
+          <OrderField />
+        </DrawerBody>
+        <DrawerFooter>
+          <ButtonGroup mode="spaced">
+            <DrawerClose asChild>
+              <Button variant="ghost">Cancelar</Button>
+            </DrawerClose>
+            <Button>Salvar</Button>
+          </ButtonGroup>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+render(
+  <div className="grid grid-cols-2 gap-3">
+    <DrawerWithIntro layout="sectioned" label="Seccionado com intro" />
+    <CompactDrawer layout="sectioned" label="Seccionado compacto" />
+    <DrawerWithIntro layout="continuous" label="Contínuo com intro" />
+    <CompactDrawer layout="continuous" label="Contínuo compacto" />
+  </div>,
+);
+```
+
+Mantenha `DrawerNavigation`, `DrawerTitle` e `DrawerActions` como filhos diretos de
+`DrawerHeader`: o cabeçalho reconhece os slots pelo componente e interrompe a renderização diante de
+qualquer outro nó, inclusive um componente local que devolva um slot. Por isso, o exemplo extrai
+apenas o botão de recolher. Sem o botão de fechar, Esc e o clique no overlay continuam fechando o
+painel.
+
+## Page
+
+A `Page` não tem um slot de intro. Com intro, o `PageHeader` guarda a navegação e as ações da
+página, e uma `Surface level={1}` abre o `PageBody` com o título e as ações do conteúdo. A página
+precisa de exatamente um heading principal, por isso o `PageHeader` dessa composição não leva
+`PageTitle`.
+
+```tsx preview col
+render(
+  <div className="w-full overflow-hidden rounded-lg border border-border">
+    <Page>
+      <PageHeader>
+        <PageNavigation>
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>Oficina</BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>Ordens de serviço</BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbPage>OS-1842</BreadcrumbPage>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </PageNavigation>
+        <PageActions>
+          <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+            <MessageCircle />
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageBody>
+        <Surface
+          as="section"
+          level={1}
+          title="Editar ordem de serviço"
+          actions={
+            <Button variant="outline" size="sm">
+              Ver histórico
+            </Button>
+          }
+        >
+          <div className="space-y-2">
+            <Label htmlFor="page-intro-owner">Responsável</Label>
+            <Input id="page-intro-owner" defaultValue="Marina Alves" />
+          </div>
+        </Surface>
+      </PageBody>
+      <PageFooter>
+        <ButtonGroup mode="spaced">
+          <Button variant="ghost">Cancelar</Button>
+          <Button>Salvar</Button>
+        </ButtonGroup>
+      </PageFooter>
+    </Page>
+  </div>,
+);
+```
+
+Na composição compacta, `PageTitle` entra no `PageHeader` e as ações do conteúdo passam para
+`PageActions`, antes das ações da página. A forma curta, `<Page title actions>`, produz esse mesmo
+cabeçalho; nela, a navegação vem do [`PageShell`](/ui/page).
+
+```tsx preview col
+render(
+  <div className="w-full overflow-hidden rounded-lg border border-border">
+    <Page>
+      <PageHeader>
+        <PageNavigation>
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>Oficina</BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>Ordens de serviço</BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbPage>OS-1842</BreadcrumbPage>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </PageNavigation>
+        <PageTitle>Editar ordem de serviço</PageTitle>
+        <PageActions>
+          <Button variant="outline" size="sm">
+            Ver histórico
+          </Button>
+          <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+            <MessageCircle />
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageBody>
+        <div className="space-y-2">
+          <Label htmlFor="page-compact-owner">Responsável</Label>
+          <Input id="page-compact-owner" defaultValue="Marina Alves" />
+        </div>
+      </PageBody>
+      <PageFooter>
+        <ButtonGroup mode="spaced">
+          <Button variant="ghost">Cancelar</Button>
+          <Button>Salvar</Button>
+        </ButtonGroup>
+      </PageFooter>
+    </Page>
+  </div>,
+);
+```
+
+Use `PageFooter` quando a página for uma etapa com decisão própria, como esta edição.
+
+## Pane com Surface
+
+`Pane` declara uma coluna de um [`Split`](/ui/split) e não desenha nada: não tem cabeçalho, corpo,
+rodapé, recuo, borda nem fundo. Quando a coluna precisa dessas regiões, componha uma `Surface`
+dentro dela. A `Surface` não tem intro, então o título fica no `SurfaceHeader`, como na composição
+compacta.
+
+```tsx preview col
+render(
+  <div className="h-80 w-full overflow-hidden rounded-lg border border-border">
+    <Split>
+      <Pane initialSize="14rem">
+        <Sidebar className="w-full">
+          <SidebarNav
+            navLabel="Ordens de serviço"
+            activeId="os-1842"
+            groups={[
+              {
+                items: [
+                  { id: "os-1842", label: "OS-1842" },
+                  { id: "os-1839", label: "OS-1839" },
+                  { id: "os-1835", label: "OS-1835" },
+                ],
+              },
+            ]}
+          />
+        </Sidebar>
+      </Pane>
+      <Pane grow>
+        <Surface
+          as="section"
+          framed
+          elevation="raised"
+          layout="sectioned"
+          className="flex h-full flex-col"
+        >
+          <SurfaceHeader>
+            <SurfaceMedia>
+              <Wrench />
+            </SurfaceMedia>
+            <SurfaceTitle>Editar ordem de serviço</SurfaceTitle>
+            <SurfaceActions>
+              <Button variant="outline" size="sm">
+                Ver histórico
+              </Button>
+              <Button variant="ghost" size="icon" aria-label="Abrir conversa">
+                <MessageCircle />
+              </Button>
+            </SurfaceActions>
+          </SurfaceHeader>
+          <SurfaceBody className="min-h-0 flex-1 overflow-y-auto">
+            <div className="space-y-2">
+              <Label htmlFor="pane-owner">Responsável</Label>
+              <Input id="pane-owner" defaultValue="Marina Alves" />
+            </div>
+          </SurfaceBody>
+          <SurfaceFooter>
+            <ButtonGroup mode="spaced">
+              <Button variant="ghost">Cancelar</Button>
+              <Button>Salvar</Button>
+            </ButtonGroup>
+          </SurfaceFooter>
+        </Surface>
+      </Pane>
+    </Split>
+  </div>,
+);
+```
+
+Os dois panes recebem conteúdos diferentes sem mudar de componente: o primeiro hospeda uma
+[`Sidebar`](/ui/sidebar), que já tem anatomia própria, e o segundo, uma `Surface` completa. A
+rolagem também pertence ao conteúdo: a `Surface` ocupa a altura do pane com `flex h-full flex-col`,
+e o `SurfaceBody` declara `min-h-0 flex-1 overflow-y-auto` para rolar entre o cabeçalho e o rodapé.