@softize/opus 23.0.0 → 24.0.1

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

@@ -93,8 +93,8 @@ Dentro de [`PageShell`](/ui/page), a superfície `page` usa a anatomia real da a
 com `PageFooter` quando há ações de rodapé.
 
 Uma Presentation de listagem exibida como página muda essa distribuição para manter a criação perto
-da coleção. O `PageBody` recebe um [`Content`](/ui/content) com a
-[`ActionList`](/ui/action-list), e o cabeçalho desse `Content` recebe o título e os comandos
+da coleção. O `PageBody` recebe um [`Surface`](/ui/surface) com a
+[`ActionList`](/ui/action-list), e o cabeçalho desse `Surface` recebe o título e os comandos
 declarados com `placement: "header"`, no extremo oposto ao título. Os comandos de cabeçalho usam o
 tamanho `default` e permanecem textuais, mesmo quando a action declara um ícone: o que abre outra
 Presentation é um `Button` sólido, e uma action `simple` vira um
@@ -185,7 +185,7 @@ componente exige `children`, e uma com body de action os recusa: nos dois casos,
 lança um erro que nomeia a Presentation.
 
 Com `heading: "shell"`, o padrão, a casca emite o título da definição. Quando o conteúdo React já
-declara o heading principal da página, como um `Content level={1}`, use `heading: "content"`: dentro
+declara o heading principal da página, como um `Surface level={1}`, use `heading: "content"`: dentro
 de `PageShell`, a casca deixa de emitir o `PageHeader` com título e o documento continua com um único `h1`. Em
 Dialog e Drawer, o título continua no cabeçalho da superfície.
 

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

@@ -12,7 +12,7 @@ com regiões. A orientação horizontal fica entre blocos empilhados e ocupa tod
 <p className="text-sm text-muted-foreground">Próximo horário livre hoje, às 14h.</p>
 ```
 
-Não use `Separator` entre cabeçalho, corpo e rodapé de [`Card`](/ui/card), [`Dialog`](/ui/dialog) ou
+Não use `Separator` entre cabeçalho, corpo e rodapé de [`Surface`](/ui/surface), [`Dialog`](/ui/dialog) ou
 [`Drawer`](/ui/drawer). Nessas superfícies, os divisores são derivados das regiões presentes: use
 `layout="sectioned"` no componente raiz.
 
@@ -32,8 +32,8 @@ Use a orientação vertical entre itens lado a lado. A linha herda a altura do c
 
 ## Propriedades de Separator
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção da linha. A vertical precisa de altura vinda do contêiner. |
-| `decorative` | `boolean` | `true` | Uma linha decorativa fica fora da árvore de acessibilidade. Use `false` quando a divisão tiver significado e precisar ser anunciada. |
-| `className` | `string` | | Ajusta a linha, como o espaçamento ao redor. |
+| Propriedade   | Tipo                         | Padrão         | Descrição                                                                                                                            |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção da linha. A vertical precisa de altura vinda do contêiner.                                                                   |
+| `decorative`  | `boolean`                    | `true`         | Uma linha decorativa fica fora da árvore de acessibilidade. Use `false` quando a divisão tiver significado e precisar ser anunciada. |
+| `className`   | `string`                     |                | Ajusta a linha, como o espaçamento ao redor.                                                                                         |

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

@@ -1,295 +1,97 @@
-## Navegação dentro de um layout
+## Navegação lateral
 
-Use `Sidebar` para apresentar navegação global ou contextual em uma coluna lateral. O componente
-organiza a superfície e compartilha o estado de colapso; posição e largura pertencem a um
-[`Pane`](/ui/pane) dentro de [`Split`](/ui/split).
-
-O exemplo canônico mantém a largura inicial em `rem`, deixa a navegação rolar e preserva o
-cabeçalho e o rodapé nas extremidades.
+`Sidebar` é a estrutura vertical de navegação. Ela pode ocupar um `Pane`, mas não depende dele:
+`Pane` define somente a medida no `Split`; a própria sidebar e seus filhos organizam o conteúdo.
 
 ```tsx preview
 render(
-  <div className="h-80 overflow-hidden rounded-lg border border-border">
+  <div className="h-72 overflow-hidden rounded-lg border border-border">
     <Split>
-      <Pane initialSize="16rem" inset="none">
+      <Pane initialSize="16rem">
         <Sidebar className="w-full">
-          <PaneHeader>
-            <PaneTitle>Projeto</PaneTitle>
-          </PaneHeader>
-          <PaneBody>
-            <SidebarNav
-              groups={[
-                {
-                  label: 'Workspace',
-                  items: [
-                    { id: 'overview', label: 'Visão geral', icon: <LayoutDashboard /> },
-                    { id: 'sessions', label: 'Sessões', icon: <MessagesSquare /> },
-                  ],
-                },
-              ]}
-              activeId="overview"
-              onSelect={() => {}}
-            />
-          </PaneBody>
-          <PaneFooter>
-            <SidebarItem label="Configurações" icon={<Settings />} onClick={() => {}} />
-          </PaneFooter>
+          <SidebarNav
+            navLabel="Projeto"
+            activeId="overview"
+            groups={[
+              {
+                label: "Workspace",
+                items: [
+                  {
+                    id: "overview",
+                    label: "Visão geral",
+                    icon: <LayoutDashboard />,
+                  },
+                  { id: "members", label: "Pessoas", icon: <Users /> },
+                ],
+              },
+            ]}
+          />
         </Sidebar>
       </Pane>
-      <Pane grow inset="lg">
-        <p className="text-sm text-muted-foreground">Conteúdo da página.</p>
+      <Pane grow>
+        <main className="h-full overflow-y-auto p-6">Conteúdo.</main>
       </Pane>
     </Split>
   </div>,
-)
-```
-
-Use `resizable` no `Split` somente quando ajustar a largura fizer parte da tarefa. Nesse caso, o
-`Pane` também declara `minSize`, e `divider={false}` evita que `Sidebar` desenhe uma segunda
-divisória ao lado do handle.
-
-## Anatomia e responsabilidades
-
-A `Sidebar` não tem regiões próprias: o cabeçalho, o corpo rolável e o rodapé são os slots do
-`Pane` que a hospeda, com a anatomia e as propriedades descritas na
-[página da família](/ui/pane).
-
-| Parte | Responsabilidade |
-|---|---|
-| [`Split`](/ui/split) | Define a relação espacial e, opcionalmente, o redimensionamento. |
-| [`Pane`](/ui/pane) | Define largura e limites da coluna e estrutura suas regiões. |
-| `Sidebar` | Desenha a superfície lateral e fornece o estado de colapso. |
-| `SidebarNav` | Apresenta e controla os destinos de navegação. |
-
-## Escolher a navegação
-
-Use `SidebarNav` para grupos planos de destinos. Ele recebe dados e produz `SidebarItem` com a mesma
-semântica usada na composição manual.
-
-```tsx preview
-<div className="h-72 w-64 overflow-hidden rounded-lg border border-border">
-  <Sidebar className="w-full">
-    <PaneBody>
-      <SidebarNav
-        groups={[
-          {
-            label: 'Configurações',
-            items: [
-              { id: 'users', label: 'Usuários', icon: <Users /> },
-              { id: 'roles', label: 'Papéis', icon: <ShieldCheck /> },
-              { id: 'imports', label: 'Importações', icon: <Database /> },
-            ],
-          },
-        ]}
-        activeId="users"
-        onSelect={() => {}}
-      />
-    </PaneBody>
-  </Sidebar>
-</div>
+);
 ```
 
-## Compor uma árvore
+## Regiões próprias
 
-Uma árvore não pertence ao contrato de `SidebarNav`: profundidade, carregamento e expansão variam
-por produto. Componha cada nó com `SidebarItem`, envolva seus descendentes em `SidebarTreeGroup` e
-mantenha o estado no consumidor. O grupo aplica o recuo e desenha a guia vertical; o destino
-principal e o controle de expansão permanecem irmãos acessíveis.
+Uma sidebar especializada pode declarar cabeçalho, região rolável e rodapé com HTML semântico. O
+conteúdo central recebe `min-h-0 flex-1 overflow-y-auto`; borda, fundo e raio pertencem à própria
+`Sidebar` ou a uma `Surface` que a envolva.
 
 ```tsx preview
-const [open, setOpen] = useState(true)
-
 render(
-  <div className="h-72 w-64 overflow-hidden rounded-lg border border-border">
-    <Sidebar className="w-full">
-      <PaneBody className="p-2">
-        <SidebarGroupLabel>Documentação</SidebarGroupLabel>
-        <SidebarItem
-          label="Componentes"
-          icon={<Folder />}
-          expanded={open}
-          onToggle={() => setOpen((current) => !current)}
-          onClick={() => setOpen((current) => !current)}
-        />
-        {open && (
-          <SidebarTreeGroup>
-            <SidebarItem label="Layout" icon={<Folder />} expanded onToggle={() => {}} onClick={() => {}} />
-            <SidebarTreeGroup>
-              <SidebarItem label="Sidebar" icon={<PanelLeft />} active onClick={() => {}} />
-              <SidebarItem label="Page" icon={<PanelsTopLeft />} onClick={() => {}} />
-            </SidebarTreeGroup>
-          </SidebarTreeGroup>
-        )}
-      </PaneBody>
+  <div className="h-72 overflow-hidden rounded-lg border border-border">
+    <Sidebar className="w-64">
+      <header className="flex h-14 shrink-0 items-center px-3 font-semibold">
+        Projeto
+      </header>
+      <nav
+        className="min-h-0 flex-1 space-y-1 overflow-y-auto p-3"
+        aria-label="Projeto"
+      >
+        <SidebarItem label="Visão geral" icon={<LayoutDashboard />} active />
+        <SidebarItem label="Pessoas" icon={<Users />} />
+      </nav>
+      <footer className="shrink-0 border-t p-3">
+        <Button variant="ghost" className="w-full justify-start">
+          Configurações
+        </Button>
+      </footer>
     </Sidebar>
   </div>,
-)
+);
 ```
 
-Esse é o padrão usado pelo `DocBrowser`: seções são rótulos, grupos nomeados são nós expansíveis e
-páginas são folhas. Um grupo começa aberto e volta a abrir quando contém a página ativa.
-
-## Recolher a coluna
+Use `SidebarNav` quando grupos e itens já puderem ser descritos como dados. Use `SidebarItem`
+diretamente quando a composição precisar de controles, badges ou hierarquia particular.
 
-`collapsed` pertence à `Sidebar`. Nesse estado, `SidebarItem` e `SidebarNav` mantêm
-somente os ícones e expõem os rótulos em tooltips. Por isso, todo destino que aparece no modo
-recolhido precisa de um ícone reconhecível e de um `label` completo. `SidebarNav` já monta o
-`TooltipProvider`; um `SidebarItem` recolhido fora dele depende do provider na raiz do aplicativo.
+## Colapso
 
-O slot de ícone do `SidebarItem` ocupa `1rem` nos dois estados e normaliza SVGs para essa medida.
-O consumidor escolhe o símbolo e sua cor sem precisar repetir largura ou altura em ícones SVG.
-Outros tipos de `ReactNode` continuam responsáveis pelas próprias dimensões.
+`collapsed` informa o estado compacto aos itens. Forneça labels acessíveis mesmo quando somente os
+ícones estiverem visíveis.
 
 ```tsx preview
-const [collapsed, setCollapsed] = useState(false)
-
 render(
-  <div className="flex h-64 overflow-hidden rounded-lg border border-border">
-    <Sidebar collapsed={collapsed}>
-      <PaneHeader>
-        <PaneActions>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={collapsed ? 'Expandir navegação' : 'Recolher navegação'}
-            onClick={() => setCollapsed((current) => !current)}
-          >
-            <PanelLeftClose className={collapsed ? 'rotate-180' : ''} />
-          </Button>
-        </PaneActions>
-      </PaneHeader>
-      <PaneBody>
-        <SidebarNav
-          groups={[
-            {
-              items: [
-                { id: 'home', label: 'Início', icon: <House /> },
-                { id: 'reports', label: 'Relatórios', icon: <ChartNoAxesColumn /> },
-              ],
-            },
-          ]}
-          activeId="home"
-          onSelect={() => {}}
-        />
-      </PaneBody>
-    </Sidebar>
-    <div className="flex-1 p-4 text-sm text-muted-foreground">
-      O conteúdo ocupa o espaço liberado pela sidebar.
-    </div>
-  </div>,
-)
+  <Sidebar collapsed className="w-16">
+    <nav
+      className="flex flex-col items-center gap-1 p-3"
+      aria-label="Principal"
+    >
+      <SidebarItem label="Início" icon={<House />} active />
+      <SidebarItem label="Pessoas" icon={<Users />} />
+    </nav>
+  </Sidebar>,
+);
 ```
 
-O consumidor controla o estado e decide onde colocar o gatilho. A transição de largura pertence à
-`Sidebar`; a aplicação não precisa trocar a árvore de componentes.
-
-## Itens com expansão e ações
-
-`SidebarItem` mantém o destino principal, a expansão e as ações como controles irmãos. Essa
-estrutura evita botões aninhados e permite que cada controle receba foco de forma independente.
-
-```tsx preview
-<div className="w-72 rounded-lg border border-border p-2">
-  <SidebarItem
-    label="Contratos"
-    icon={<Folder />}
-    expanded
-    onToggle={() => {}}
-    actions={
-      <Button variant="ghost" size="icon-xs" aria-label="Mais ações">
-        <Ellipsis />
-      </Button>
-    }
-    onClick={() => {}}
-  />
-  <SidebarTreeGroup>
-    <SidebarItem
-      label="Criar workspace"
-      icon={<FilePlus2 />}
-      onClick={() => {}}
-    />
-  </SidebarTreeGroup>
-</div>
-```
-
-Quando o rótulo não cabe, ele termina em um gradiente. As ações aparecem ao passar o ponteiro, ao
-receber foco visível ou enquanto um menu permanece aberto; como são sobrepostas, não reduzem o
-espaço disponível para o texto.
-
-Para árvores arrastáveis, `dropPosition` comunica o destino visual sem reservar espaço:
-`before` e `after` desenham uma linha na fronteira, enquanto `inside` realça a superfície do item.
-O driver de drag-and-drop continua externo e fornece seus atributos por `dragProps`.
-
-## Acessibilidade
-
-- `activeId` resulta em `aria-current="page"` no destino atual.
-- `navLabel` nomeia a landmark de navegação.
-- O controle de expansão informa `aria-expanded` e recebe um rótulo baseado no item.
-- Itens desabilitados continuam visíveis, mas não respondem à interação.
-- O foco visível usa o anel semântico do tema no destino, nas ações e no controle de expansão.
-- No modo recolhido, o tooltip preserva o nome que deixou de aparecer visualmente.
-
-## Propriedades de Sidebar
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `collapsed` | `boolean` | `false` | Recolhe a coluna e publica esse estado para as navegações descendentes. |
-| `divider` | `boolean` | `true` | Desenha a borda na lateral. Desative quando o `Split` já fornecer o handle. |
-| `className` | `string` | | Ajusta a raiz. A largura externa deve continuar pertencendo ao `Pane`. |
-| `children` | `ReactNode` | | Cabeçalho, corpo, rodapé ou uma navegação que gerencie a própria estrutura. |
-
-`PaneHeader`, `PaneBody` e `PaneFooter` são os slots da família `Pane`; a referência deles está na
-[página do Pane](/ui/pane).
-
-## Propriedades de SidebarNav
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `groups` | `SidebarNavGroup[]` | | Grupos e itens apresentados na ordem recebida. Grupos vazios são omitidos. |
-| `activeId` | `string` | | Identificador do destino atual. |
-| `onSelect` | `(id: string) => void` | | Recebe o identificador selecionado; roteamento permanece com o consumidor. |
-| `navLabel` | `string` | `'Navegação'` | Nome acessível da landmark `nav`. |
-| `className` | `string` | | Ajusta a raiz da navegação. |
-
-### Estrutura de SidebarNavGroup
-
-| Campo | Tipo | Descrição |
-|---|---|---|
-| `label` | `string` | Rótulo opcional do grupo. Rótulos vazios não reservam espaço. |
-| `items` | `SidebarNavItem[]` | Itens diretos do grupo. |
-
-`SidebarNavItem` recebe as propriedades de `SidebarItem`, exceto `active` e `onClick`, e acrescenta
-`id`. O destaque vem de `activeId` e a seleção chega por `onSelect`, ambos no `SidebarNav`. Para mais
-níveis, componha `SidebarItem` e `SidebarTreeGroup` diretamente.
-
-## Propriedades de SidebarItem
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `label` | `string` | | Nome visível do destino e conteúdo do tooltip no modo recolhido. |
-| `icon` | `ReactNode` | | Ícone apresentado antes do rótulo e preservado no modo recolhido. |
-| `badge` | `ReactNode` | | Informação curta no fim da linha, como contagem ou estado. |
-| `active` | `boolean` | `false` | Destaca o destino e aplica `aria-current="page"`. |
-| `disabled` | `boolean` | `false` | Mantém o item visível sem permitir interação. |
-| `actions` | `ReactNode` | | Controles relacionados exibidos no fim da linha. |
-| `onToggle` | `() => void` | | Adiciona o controle independente de expansão. |
-| `expanded` | `boolean` | `false` | Define o estado acessível e a rotação do controle de expansão. |
-| `dropPosition` | `'before' \| 'inside' \| 'after'` | | Indica visualmente onde um item arrastado será solto. |
-| `dragProps` | `HTMLAttributes<HTMLDivElement>` | | Encaminha atributos fornecidos pelo driver de drag-and-drop para a linha. |
-| `tooltipHint` | `ReactNode` | | Acrescenta contexto ao tooltip do modo recolhido. |
-| `className` | `string` | | Ajusta a linha nos estados aberto e recolhido. |
-| `onClick` | `() => void` | | Executa a navegação principal do item. |
-
-## Propriedades de SidebarGroupLabel
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta o rótulo discreto do grupo. |
-| `children` | `ReactNode` | | Nome do conjunto de destinos. |
-
-## Propriedades de SidebarTreeGroup
+## Responsabilidades
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta o grupo sem substituir o recuo, o espaçamento e a guia vertical padrão. |
-| `children` | `ReactNode` | | Itens ou grupos que descendem do nó anterior. |
+- `Split` organiza as regiões e o redimensionamento.
+- `Pane` declara identidade e tamanho.
+- `Sidebar` oferece a coluna de navegação.
+- `SidebarNav`, `SidebarItem` e elementos nativos organizam o conteúdo interno.
+- `Surface` oferece anatomia e tratamento visual quando a região não é uma sidebar.

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

@@ -18,33 +18,35 @@ o contêiner com `role="status"` e um nome, como `aria-label="Carregando sessõe
 </div>
 ```
 
-## Card em carregamento
+## Surface em carregamento
 
 O esqueleto reproduz o layout final do card — título, conteúdo e ações — para a tela não pular
 quando os dados chegarem. O título entra pelo slot do cabeçalho com `asChild`, porque o
-`CardHeader` só aceita os próprios slots.
+`SurfaceHeader` só aceita os próprios slots.
 
 ```tsx preview col
-<Card>
-  <CardHeader>
-    <CardTitle asChild>
+<Surface framed elevation="raised">
+  <SurfaceHeader>
+    <SurfaceTitle asChild>
       <Skeleton className="h-5 w-40" />
-    </CardTitle>
-  </CardHeader>
-  <CardBody className="space-y-2">
-    <Skeleton className="h-4 w-56" />
-    <Skeleton className="h-4 w-full" />
-    <Skeleton className="h-4 w-3/4" />
-  </CardBody>
-  <CardFooter className="gap-2">
+    </SurfaceTitle>
+  </SurfaceHeader>
+  <SurfaceBody>
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-56" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  </SurfaceBody>
+  <SurfaceFooter className="gap-2">
     <Skeleton className="h-8 w-28" />
     <Skeleton className="h-8 w-24" />
-  </CardFooter>
-</Card>
+  </SurfaceFooter>
+</Surface>
 ```
 
 ## Propriedades de Skeleton
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Dá forma ao placeholder (`h-4 w-40`, `size-10 rounded-full`); o componente só traz o pulso e o fundo. |
+| Propriedade | Tipo     | Padrão | Descrição                                                                                             |
+| ----------- | -------- | ------ | ----------------------------------------------------------------------------------------------------- |
+| `className` | `string` |        | Dá forma ao placeholder (`h-4 w-40`, `size-10 rounded-full`); o componente só traz o pulso e o fundo. |

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

@@ -93,7 +93,7 @@ const defaultLayout = readLayout('workspace-layout')
   }}
 >
   <Pane id="navigation" initialSize="28rem" minSize="28rem"><Navigation /></Pane>
-  <Pane id="content" grow><Content /></Pane>
+  <Pane id="content" grow><Surface as="section" /></Pane>
 </Split>
 ```
 
@@ -153,20 +153,20 @@ render(<Example />);
 | `defaultLayout`   | `Record<string, number>`                  |                | Layout percentual restaurado, indexado pelos ids dos panes.             |
 | `onLayoutChanged` | `(layout, { isUserInteraction }) => void` |                | Chamado ao concluir uma mudança de layout; persista onde fizer sentido. |
 | `className`       | `string`                                  |                | Ajusta o contêiner do grupo.                                            |
-| `data-slot`       | `string`                                  | `'split'`      | Identificador semântico para testes e composição de patterns.          |
+| `data-slot`       | `string`                                  | `'split'`      | Identificador semântico para testes e composição de patterns.           |
 | `children`        | `ReactNode`                               |                | Os `Pane`, diretos ou agrupados em fragment; outro filho gera erro.     |
 
 ## Propriedades de SurfaceAssistant
 
-| Propriedade      | Tipo        | Padrão  | Descrição                                               |
-| ---------------- | ----------- | ------- | ------------------------------------------------------- |
-| `open`           | `boolean`   |         | Exibe o painel complementar à direita.                  |
-| `assistantLabel` | `string`    |         | Nome acessível da região complementar.                  |
-| `children`       | `ReactNode` |         | Conteúdo principal que permanece montado.               |
-| `assistant`      | `ReactNode` |         | Painel fornecido pela superfície que conhece o recurso. |
-| `initialSize`    | `PaneSize`  | `28rem` | Largura inicial do painel.                              |
-| `minSize`        | `PaneSize`  | `20rem` | Largura mínima durante o redimensionamento.             |
-| `maxSize`        | `PaneSize`  | `40rem` | Largura máxima durante o redimensionamento.             |
-| `className`      | `string`    |         | Ajusta o contêiner do split.                            |
-| `contentClassName` | `string`  |         | Ajusta a coluna do conteúdo principal.                  |
-| `assistantClassName` | `string` |        | Ajusta a coluna do painel de assistência.               |
+| Propriedade          | Tipo        | Padrão  | Descrição                                               |
+| -------------------- | ----------- | ------- | ------------------------------------------------------- |
+| `open`               | `boolean`   |         | Exibe o painel complementar à direita.                  |
+| `assistantLabel`     | `string`    |         | Nome acessível da região complementar.                  |
+| `children`           | `ReactNode` |         | Conteúdo principal que permanece montado.               |
+| `assistant`          | `ReactNode` |         | Painel fornecido pela superfície que conhece o recurso. |
+| `initialSize`        | `PaneSize`  | `28rem` | Largura inicial do painel.                              |
+| `minSize`            | `PaneSize`  | `20rem` | Largura mínima durante o redimensionamento.             |
+| `maxSize`            | `PaneSize`  | `40rem` | Largura máxima durante o redimensionamento.             |
+| `className`          | `string`    |         | Ajusta o contêiner do split.                            |
+| `contentClassName`   | `string`    |         | Ajusta a coluna do conteúdo principal.                  |
+| `assistantClassName` | `string`    |         | Ajusta a coluna do painel de assistência.               |