@softize/opus 27.0.0 → 28.0.0

package/docs/adr/0060-surface-composition-separates-chrome-and-intro.md

@@ -0,0 +1,161 @@
+# ADR 0060 — A composição separa controles da superfície e introdução do conteúdo
+
+- **Status:** aceita.
+- **Data:** 2026-10-10.
+- **Substitui parcialmente:** ADR 0029, quanto à proibição de PageIntro.
+- **Complementa:** ADRs 0023 e 0048.
+
+## Contexto
+
+Page perdeu a intro para evitar barras vazias e identificação redundante. Depois, Dialog e Drawer
+passaram a oferecer uma intro para separar os controles da superfície do conteúdo. A mesma página
+editorial passou a mudar o lugar do título e das ações quando aberta em outro hospedeiro.
+
+## Decisão
+
+Page, Dialog e Drawer compartilham duas composições, declaradas pelos slots, sem prop redundante:
+
+- compacta: o título e a orientação ficam no Header;
+- com intro: o Header recebe navegação e ações da superfície; a Intro é o primeiro bloco do Body
+  e recebe o único título, orientação opcional e ações locais por IntroActions.
+
+Header sem controles não reserva espaço. Navegação não é repetida na intro. O fechamento continua
+sendo responsabilidade do modal; Page não ganha um botão de fechar implícito. A posição da intro
+não muda o significado de layout: continuous/sectioned controla regiões e flow/fill controla altura.
+
+Page ganha PageIntro e PageIntroActions. A forma curta passa a colocar title e description na intro,
+com actions no Header. A forma explícita preserva a composição compacta para situações deliberadas.
+PageShell continua fornecendo contexto sem criar outra barra. Estados integrais continuam substituindo
+a introdução e o conteúdo, com um único heading acessível. O teto centralizado de 80rem é preservado.
+
+Surface mantém o cabeçalho do conteúdo, inclusive ações locais: não possui navegação ou fechamento
+que justifique uma segunda região. Pane e Split continuam sendo apenas layout. Alert mantém sua
+composição especializada. Patterns de formulário, coleção e Presentation precisam respeitar a mesma
+semântica ao montar os componentes, sem reconstruir linhas no consumidor.
+
+## Verificação e migração
+
+O checker valida família, posição da intro, unicidade do título e ações no slot correspondente.
+Testes renderizados cobrem as duas composições, estados integrais, ausência de barra vazia e contexto
+do shell. Consumidores de Page explícita migram título/descrição para PageIntro quando suas ações
+pertencem à superfície; cabeçalhos de coleções em Surface mantêm criação junto à coleção.
+
+A migração inclui SDK, exemplos, documentação e aplicação. Publicação e adoção definitiva só ocorrem
+após os gates e a revisão independente do conjunto. A versão 28.0.0 consolida a migração.
+
+## Alternativas
+
+Uma prop compact duplicaria informação já expressa pelos slots, abrindo combinações contraditórias.
+Manter Page diferente preservaria compatibilidade, mas perpetuaria a diferença entre hospedeiros.
+Uma barra obrigatória recuperaria o espaço vazio e a identificação repetida que motivaram a ADR 0029.
+
+## Rolagem
+
+Page ocupa a altura disponível do hospedeiro, com header e footer fora da região rolável.
+PageBody é o viewport vertical; a intro rola com o conteúdo. PageShell conserva a rolagem horizontal do canvas mínimo e permite rolagem vertical de
+contingência para rotas sem Page ou wrappers sem altura definida. Em layout fill, quando uma ActionList assume a rolagem, o body repassa
+a altura e não cria uma segunda rolagem vertical. Sem folha fill, o próprio body continua rolando.
+A composição compacta preserva a mesma responsabilidade: o título permanece no header estável.
+A fixação resulta da divisão de altura, sem position fixed ou sticky no consumidor.
+
+O header ocupa toda a largura disponível. O limite de 80rem e o recuo pertencem ao conteúdo
+interno do Body; o viewport ocupa a largura da página para manter sua barra de rolagem na extremidade.
+
+Quando presente, o header da Page usa borda inferior em toda a largura, como o Drawer.
+
+## Divisão visual da Page
+
+Page expõe `surfaceLayout="sectioned" | "continuous"`, com padrão `sectioned`.
+O nome separa a anatomia visual de `layout="flow" | "fill"`, preservado para altura.
+As regiões usam a tabela compartilhada de anatomia e seus divisores por adjacência.
+A largura total do header e do viewport, e o limite interno do conteúdo, valem nos dois modos.
+
+O header da Page acompanha o recuo do Drawer: 1rem no modo sectioned; no modo
+continuous, 1rem com recuo inferior de 0,75rem, ou 1rem quando for a única região.
+
+Após validação visual da barra com breadcrumb, o header da Page passa a usar 1rem nas
+laterais e 0,75rem na vertical nos dois modos. Esse ajuste substitui a equivalência de
+padding com o Drawer descrita acima; os divisores continuam compartilhados.
+
+A avaliação seguinte restaurou o padding do Drawer no header da Page: 1rem no modo
+sectioned e o ritmo correspondente no continuous. O experimento de redução vertical foi descartado.
+
+## Altura estável da linha do header
+
+A linha interna reserva 2rem em Page, Dialog, Drawer e Surface, mesmo sem ações.
+No header da Page, botões textuais usam `sm` (2rem), e os de ícone, `icon-sm` (2rem).
+Os consumidores declaram o tamanho; PageBack e comandos de Presentation em página já usam
+essa escala. Coleções e headers de modais usam a mesma escala; rodapés conservam default. É uma altura mínima, permitindo crescimento do
+conteúdo. Padding e intro permanecem independentes; headers ausentes não reservam espaço.
+
+Presentation em página delega padding e rolagem ao PageBody, tanto dentro quanto fora
+de PageShell. Não intercala um viewport próprio; PresentationBody conserva somente a
+propagação de altura quando houver conteúdo fill. Headers compactos distribuem título
+e ações na linha interna, inclusive sem navegação.
+
+## Revisão: geometria comum da família
+
+A escala compacta exclusiva de Page mantinha headers de Drawer maiores com a mesma
+composição. A família inteira passa a compartilhar padding de 1rem e linha mínima
+de 2rem: Page, Dialog, Drawer e Surface delimitada, também quando hospedada em Pane.
+Vale nos layouts continuous e sectioned; o divisor continua sendo uma decisão do layout.
+Isso substitui o ritmo variável de padding inferior dos headers descrito anteriormente.
+
+Botões de header usam `sm` para texto e `icon-sm` para ícones, incluindo comandos de
+Presentation e criação de coleções. Rodapés preservam a escala anterior. A seção
+Surface sem delimitação não ganha padding externo, e legendas recortadas continuam
+com sua geometria própria. O mínimo de linha e a escala das ações permanecem comuns.
+
+As medidas têm uma fonte compartilhada, comparada em testes entre as quatro famílias.
+Os tamanhos são declarados pelos consumidores: não há CSS de redimensionamento nem
+contexto herdável que altere botões de portais, corpos ou rodapés.
+
+## Correção da escala compacta
+
+`icon-sm` passa de 1,75rem para 2rem, correspondendo à altura de `sm`. O desenho
+do ícone continua em 0,875rem. O mínimo de 2rem da linha protege headers sem ações;
+não existe mais diferença de altura entre os controles compactos textuais e quadrados.
+Paginação usa os mesmos tokens, com largura flexível para números longos.
+
+## Ritmo vertical compartilhado — 2026-10-13
+
+A validação em Conhecimento encontrou intervalos de 0,5rem, 0,75rem e 1,25rem para a mesma
+relação entre cabeçalho e conteúdo. O padrão passa a ser 1rem entre regiões contínuas e
+entre blocos diretos de um body, inclusive TabsPanel. O componente hospedeiro fornece o
+ritmo; DetailGroup e Separator não recebem margem externa própria.
+
+Surface sem delimitação e Tabs sem moldura não adicionam padding inferior. Surface delimitada
+por framed ou elevation, Dialog e Drawer reservam 1rem até a borda. No layout sectioned,
+cada região reserva 1rem entre seu conteúdo e a divisória. No continuous, a região anterior
+fornece o intervalo, evitando somar dois paddings. A ausência de header preserva o recuo
+superior de uma superfície delimitada. Fieldset com legend conserva 1rem após a legenda.
+
+Page preserva largura de leitura e recuos laterais. Seu body não reserva padding inferior
+quando encerra a página; quando há footer sectioned, reserva 1rem até a divisória. A barra
+continua fora da rolagem. O modo flush continua removendo recuos, mas conserva o ritmo
+entre blocos: tabelas e listas que ocupam a superfície controlam seu próprio interior.
+
+Tabs mantém o espaçamento interno dos botões. O intervalo até o painel é 1rem; com framed,
+o painel recebe recuos laterais e inferior de 1rem. Abas verticais mantêm o intervalo entre
+as colunas e a moldura recebe o recuo externo sem duplicá-lo no painel.
+
+Manter medidas locais dependeria de disciplina em cada tela; impor margem a cada bloco
+somaria intervalos no aninhamento. As duas alternativas foram descartadas. A migração remove
+overrides de ritmo e padding nos slots estruturais, preservando layouts internos deliberados.
+Testes em navegador medem intervalos, fechamento inferior, aninhamento, presença/ausência de
+header e footer, flush e troca de abas. O ritmo altera o default visual; a composição de Page exige a migração documentada na versão major.
+
+Uma composição pode manter `gap-0` quando Tabs hospeda um DrawerBody que já fornece o
+intervalo superior e controla a rolagem, como o painel de nós de Fluxos. Isso evita dois
+intervalos para a mesma relação; não altera a medida de 1rem percebida pelo conteúdo.
+
+## Escala do título na intro — 2026-10-13
+
+PageTitle, DrawerTitle e DialogTitle usam a mesma escala na intro: 1,875rem, com peso
+semibold e tracking compacto. Drawer e Dialog mantêm a escala menor quando o título
+está no header compacto. A hierarquia HTML continua independente do tamanho visual.
+Metadados de data e autoria permanecem na descrição; um badge de tipo pode acompanhar
+o título em uma composição inline com quebra, sem criar um novo slot estrutural.
+
+`contentClassName` em Page e PageBody configura largura e alinhamento internos; `className`
+controla a moldura e o viewport, respectivamente. Presentation fora do shell preserva largura total.

package/docs/adr/README.md

@@ -12,3 +12,5 @@ Uma ADR preserva seu contexto histórico mesmo quando é substituída. O comport
 estar documentado na superfície correspondente, sem exigir a reconstrução dessa sequência.
 
 - [ADR 0059 — Subheadings orientam sem carregar regras de negócio](0059-subheadings-orient-without-carrying-business-rules.md).
+
+- [ADR 0060 — Composição de superfícies com cabeçalho e intro](0060-surface-composition-separates-chrome-and-intro.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "27.0.0",
+  "version": "28.0.0",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/registry/skills/build-opus-ui/SKILL.md

@@ -43,17 +43,17 @@ existentes, mantendo navegação observável e componentes reutilizáveis sem la
 7. Tratar página, filtro, seleção e modal importante como estado navegável por URL quando
    o produto precisa de deep link, back/forward ou refresh. Em `Presentation`, declarar `route`
    no artefato e deixar o adaptador apenas conectar a spec ao router da aplicação.
-8. Compor superfícies pela gramática estrutural do catálogo: `PageHeader` é a única introdução
-   estrutural e reúne navegação contextual opcional, título e ações; `PageBody` contém o conteúdo.
-   Na composição explícita, declare exatamente um heading principal com `PageTitle` no header,
-   `Surface level={1}` ou um `PageState` ativo no body. `PageShell` pode fornecer navegação e ações
-   conhecidas pela aplicação, mas não cria uma barra visual. `Surface` contém `SurfaceHeader` e
-   `SurfaceBody`; Drawer e Pane usam seus respectivos `*Body`. Para o caso direto, usar a sintaxe
-   abreviada de `Page` (`title`, `actions`) ou de `Surface` (`title`, `description`, `actions` e
-   `count`); não misturá-la com o
-   header explícito. O título da página não carrega contador. Ajustar o
-   nível do heading pela hierarquia semântica, não pelo destaque visual. O `Page` mantém seu teto
-   centralizado padrão de `80rem`.
+8. Compor Page, Dialog e Drawer pela mesma gramática: no formato compacto, título e orientação
+   ficam no Header; com Intro, navegação e ações da superfície ficam no Header e a Intro abre o
+   Body com título, orientação e ações locais em IntroActions. Declarar a escolha pelos slots,
+   sem prop redundante. Usar PageIntro na Page explícita; a forma curta de Page já coloca title e
+   description na intro e actions no header. Não misturar shorthand com regiões explícitas.
+   Manter exatamente um heading principal, inclusive quando Surface level={1} nomeia uma coleção
+   ou PageState substitui a página. PageShell fornece contexto sem criar barra paralela; header
+   sem controles não reserva espaço. Preservar o teto de 80rem e separar composição de ocupação
+   de altura (flow/fill). Surface mantém o cabeçalho do conteúdo; Pane distribui espaço e recebe
+   uma superfície quando precisar de anatomia visual. Não criar Intro nem controles de navegação
+   artificiais para Surface ou Pane.
    Em `Surface framed`, usar `layout="sectioned"` e `SurfaceBody flush` quando o filho direto já
    controlar o recuo do body, como `DetailGroup` com divisores, lista ou tabela; não reconstruir
    divisor, padding ou recorte por classes no consumidor. Em grupos de formulário,

package/registry/skills/build-opus-ui/references/evaluations.md

@@ -74,3 +74,13 @@ complementar do termo. Esperado: `description` orienta a finalidade, `hint` mant
 de deixar vazio e `help` oferece somente o detalhe opcional. `intro` continua no corpo quando a
 regra afeta vários campos. Reprovar regra obrigatória somente em subheading ou tooltip, repetição
 da label, duplicação entre hint/help e perda de `aria-describedby` quando aparece um erro.
+
+## Composição de superfícies
+
+- Gatilho positivo: “Monte o detalhe de um recurso com menu da página separado do título.”
+- Gatilho negativo: “Explique por que a ADR antiga juntava título e ações”, sem pedido de UI.
+- Execução: montar o mesmo detalhe em Page, Dialog e Drawer com header de navegação/ações e intro
+  abrindo o body; montar também a versão compacta sem intro. Provar título único, ações locais em
+  IntroActions, nenhum header vazio na Page e transição de loading para conteúdo sem título duplicado.
+- Reprovar intro depois de texto, título simultâneo em header e intro, ações da superfície no título
+  ou adaptação de Pane para que ele volte a possuir anatomia visual.

package/registry/skills/build-opus-ui/references/ui-patterns.md

@@ -9,24 +9,22 @@
   lista; não reconstruir essa decisão com condicionais no componente da página.
 - `Page` fornece o `<main>` e o container centralizado com teto padrão de `80rem`. Sua forma
   explícita exige `PageBody`, exatamente um heading principal e aceita `PageHeader` e `PageFooter`.
-  Declare esse heading com `PageTitle` no header, `Surface level={1}` ou um `PageState` ativo no
-  body. `PageHeader` é a única introdução estrutural e reúne navegação, título, `PageDescription`
-  opcional e ações. `title`, `description` e `actions` no próprio `Page` abreviam o caso direto.
-  Não misturar as duas formas. Alterar `className` apenas quando a superfície tiver uma necessidade
-  real de largura; não reconstruir esse container em cada rota.
-- `PageHeader` declara navegação contextual, título, subheading opcional e ações. Em uma subpágina simples, `PageBack`
-  recebe o destino pai explícito e aparece acima da linha do título como controle somente com
-  ícone. Para mais de um ancestral relevante, use
-  `Breadcrumb` dentro de `PageNavigation`. Não combine retorno e breadcrumb nem crie um chrome
-  paralelo para uma `Page`. `PageActionsTarget` fica reservado a workspaces imersivos que já
-  possuam chrome próprio.
+  Declare esse heading com PageTitle na PageIntro ou no PageHeader compacto, Surface level={1}
+  ou PageState ativo. A intro abre o body; ações locais usam PageIntroActions, enquanto PageActions
+  pertence ao header. A forma curta coloca title/description na intro e actions no header.
+  Não misturar as duas formas. Para ajustar a largura interna, usar contentClassName; className pertence ao container externo.
+- Na composição com intro, PageHeader reúne navegação contextual e ações da superfície na mesma
+  linha. PageBack recebe o destino pai explícito; para vários ancestrais relevantes, usar Breadcrumb
+  em PageNavigation. Não combinar retorno e breadcrumb, nem criar chrome paralelo. Na composição
+  compacta, título e orientação permanecem no header. PageActionsTarget fica reservado a workspaces
+  imersivos com chrome próprio.
 - Quando shell e rota conhecem partes diferentes da mesma página, use `PageShell` ao redor da rota.
   O shell entrega navegação e ações ao `PageHeader` descendente sem criar uma barra visual.
-  Ações com texto no cabeçalho usam o tamanho `default`, como as ações de footer de Dialog e Drawer;
-  ações somente com ícone de chrome usam `icon`. O tamanho `sm` fica para ações operacionais em
+  Ações com texto no cabeçalho usam `sm`, e ações somente com ícone usam `icon-sm`.
+  Ações de footer de Dialog e Drawer conservam `default`. O tamanho `sm` fica para ações operacionais em
   toolbar, seção ou coleção densa, e `xs`/`icon-xs` para ações internas de linha ou célula. Contexto
   e variante resolvem a hierarquia visual sem alterar essa medida. Em uma coleção, a ação de
-  criar usa botão textual `default`, sem ícone, no extremo oposto do `SurfaceHeader`. Não monte
+  criar usa botão textual `sm`, sem ícone, no extremo oposto do `SurfaceHeader`. Não monte
   cabeçalho paralelo, portal ou seletor global para reconstruir essa composição.
 - `PageState` substitui todo o conteúdo principal quando a página carrega, falha ou está vazia. Na
   forma curta ele pode ser escrito como filho direto de `Page`, que cria o `PageBody`; na forma
@@ -41,7 +39,7 @@
 SurfaceTitle, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + SurfaceFooter`.
   Os slots nunca ficam soltos. `title`, `description`, `count`, `media` e `actions` são a abreviação
   para o caso direto e não podem ser misturados ao header explícito. Em `level={1}`, ações da
-  coleção ficam no extremo oposto ao título; a criação usa botão textual `default`, sem ícone, com
+  coleção ficam no extremo oposto ao título; a criação usa botão textual `sm`, sem ícone, com
   `Criar recurso`.
   O diálogo de criação usa `Criar recurso` e o de edição, `Editar recurso`. `level` preserva a
   hierarquia semântica do heading. `Surface framed` aceita `layout="sectioned"`; declare
@@ -229,3 +227,7 @@ abaixo do controle. Reservar `FieldSpec.help` ao ícone com detalhe complementar
 Omitir repetição da label; combinar ambos somente com funções distintas. Regra de vários campos
 pertence ao corpo ou ao grupo. Em composição manual, `FieldDescription` e erro entram juntos no
 `aria-describedby` do controle.
+
+- Manter header e footer de Page fora da rolagem vertical. PageBody é o viewport em flow; em fill,
+  repassar a altura à lista quando ela assume a rolagem. Não reconstruir a fixação com sticky ou
+  fixed nem tornar PageShell uma segunda região de rolagem vertical.

package/src/ui/components/patterns/list.tsx

@@ -362,6 +362,8 @@ export interface ActionListProps<TInput, TItem> {
   layout?: "flow" | "fill";
   /** Ações do consumidor no fim da barra de filtros, depois dos controles de exibição. */
   toolbarActions?: ReactNode;
+  /** Controles da visualização ativa, imediatamente após seu seletor. */
+  viewControls?: ReactNode;
   /** Tabela explícita — sobrepõe as colunas do contrato. */
   columns?: ActionListColumn<TItem>[];
   /** Células custom POR CIMA das colunas do contrato (chave = column.key). */
@@ -610,19 +612,18 @@ function FilterField({
   );
   const runtimeOptions =
     lookup.onSearch !== undefined && lookup.query !== ""
-      ? base.filter((option) =>
-          selectedValues.has(option.value) ||
-          option.label
-            .toLocaleLowerCase()
-            .includes(lookup.query.toLocaleLowerCase()),
+      ? base.filter(
+          (option) =>
+            selectedValues.has(option.value) ||
+            option.label
+              .toLocaleLowerCase()
+              .includes(lookup.query.toLocaleLowerCase()),
         )
       : base;
   const selectedResolvedOptions = [...selectedValues]
     .map((selectedValue) => resolvedOptionByValue.current.get(selectedValue))
     .filter((option): option is SelectOption => option !== undefined);
-  const mergeUniqueOptions = (
-    ...groups: SelectOption[][]
-  ): SelectOption[] => {
+  const mergeUniqueOptions = (...groups: SelectOption[][]): SelectOption[] => {
     const merged = new Map<string, SelectOption>();
     for (const group of groups) {
       for (const option of group) {
@@ -1781,6 +1782,7 @@ export function ActionList<TInput, TItem>({
   input,
   layout: layoutProp,
   toolbarActions,
+  viewControls,
   columns,
   cells,
   filterOptions,
@@ -1898,6 +1900,7 @@ export function ActionList<TInput, TItem>({
     filterSpecs.length > 0 ||
     periods.length > 0 ||
     hasSegment ||
+    viewControls != null ||
     hasTable;
 
   // — Input efetivo: escopo base + filtros preenchidos + período (→ from/to) + q + sort —
@@ -2152,9 +2155,7 @@ export function ActionList<TInput, TItem>({
     return label === null ? [] : [{ value: field, label }];
   });
   const activeSortLabel =
-    activeSort === null
-      ? null
-      : sortLabelFor(activeSort.field);
+    activeSort === null ? null : sortLabelFor(activeSort.field);
   const activeSortDirection =
     activeSort?.dir === "asc" ? "crescente" : "decrescente";
   const sortCustomized =
@@ -2219,35 +2220,6 @@ export function ActionList<TInput, TItem>({
         refreshing={isLoading}
         controls={
           <>
-            {hasSegment && (
-              <ToggleGroup
-                type="single"
-                variant="outline"
-                data-slot="action-list-views"
-                className="shrink-0"
-                value={activeView}
-                onValueChange={(key) => {
-                  // No single o Radix DESMARCA ao clicar no ativo (chega '') — o segment
-                  // de views sempre tem uma ativa, então o vazio não passa.
-                  if (key !== "")
-                    setState({
-                      ...state,
-                      view: key === viewEntries[0]?.[0] ? null : key,
-                    });
-                }}
-              >
-                {viewEntries.map(([key, label, icon]) => (
-                  <Tooltip key={key}>
-                    <TooltipTrigger asChild>
-                      <Toggle value={key} aria-label={label}>
-                        {icon ?? label}
-                      </Toggle>
-                    </TooltipTrigger>
-                    <TooltipContent>{label}</TooltipContent>
-                  </Tooltip>
-                ))}
-              </ToggleGroup>
-            )}
             {/* Configuração de EXIBIÇÃO — sempre presente (em qualquer view): colunas quando a
               tabela está ativa, itens por página sempre, e o que vier depois. */}
             <Popover>
@@ -2292,7 +2264,11 @@ export function ActionList<TInput, TItem>({
                               <button
                                 type="button"
                                 onClick={() =>
-                                  setState({ ...state, sort: defaultSort, page: 1 })
+                                  setState({
+                                    ...state,
+                                    sort: defaultSort,
+                                    page: 1,
+                                  })
                                 }
                                 className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                               >
@@ -2324,7 +2300,12 @@ export function ActionList<TInput, TItem>({
                             }
                             options={[
                               ...(defaultSort === null
-                                ? [{ value: "__none__", label: "Sem ordenação" }]
+                                ? [
+                                    {
+                                      value: "__none__",
+                                      label: "Sem ordenação",
+                                    },
+                                  ]
                                 : []),
                               ...sortableFields,
                             ]}
@@ -2468,6 +2449,36 @@ export function ActionList<TInput, TItem>({
                 </div>
               </PopoverContent>
             </Popover>
+            {hasSegment && (
+              <ToggleGroup
+                type="single"
+                variant="outline"
+                data-slot="action-list-views"
+                className="shrink-0"
+                value={activeView}
+                onValueChange={(key) => {
+                  // No single o Radix DESMARCA ao clicar no ativo (chega '') — o segment
+                  // de views sempre tem uma ativa, então o vazio não passa.
+                  if (key !== "")
+                    setState({
+                      ...state,
+                      view: key === viewEntries[0]?.[0] ? null : key,
+                    });
+                }}
+              >
+                {viewEntries.map(([key, label, icon]) => (
+                  <Tooltip key={key}>
+                    <TooltipTrigger asChild>
+                      <Toggle value={key} aria-label={label}>
+                        {icon ?? label}
+                      </Toggle>
+                    </TooltipTrigger>
+                    <TooltipContent>{label}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </ToggleGroup>
+            )}
+            {viewControls}
           </>
         }
         actions={toolbarActions}
@@ -2838,10 +2849,9 @@ export function ActionList<TInput, TItem>({
   //   Encosta na última linha: a borda de cima é o fecho da tabela, não a de um
   //   bloco solto, então o rodapé não entra no `gap` da pilha.
   //   Altura: 2.5rem de piso (a mesma do `TableHead`) para a faixa não mudar de
-  //   tamanho quando o pager aparece — ele ocupa 1.75rem e cabe dentro do piso.
-  //   O padding fica em 0.25rem só para o dia em que o conteúdo passar disso:
-  //   com `py-2` o padding empurraria o pager para fora e a faixa voltaria a
-  //   crescer —
+  //   tamanho quando o pager aparece — ele ocupa 2rem e cabe dentro do piso.
+  //   O padding vertical de 0.125rem acomoda o pager de 2rem e a borda dentro
+  //   do piso, mantendo a altura igual quando não há paginação.
   const pages =
     total !== undefined
       ? Math.max(1, Math.ceil(total / (state.limit ?? pageSize)))
@@ -2872,7 +2882,7 @@ export function ActionList<TInput, TItem>({
     total !== undefined && !isError && activeGroupBy !== null ? (
       <div
         data-slot="action-list-footer"
-        className="flex min-h-10 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-1 text-xs text-muted-foreground"
+        className="flex min-h-10 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-0.5 text-xs text-muted-foreground"
       >
         {displaySummary}
         <span className={cn(displaySummary === null && "ml-auto")}>
@@ -2882,7 +2892,7 @@ export function ActionList<TInput, TItem>({
     ) : total !== undefined && !isError ? (
       <div
         data-slot="action-list-footer"
-        className="grid min-h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-t border-border px-3 py-1 text-xs text-muted-foreground"
+        className="grid min-h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-t border-border px-3 py-0.5 text-xs text-muted-foreground"
       >
         <span className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
           <span className="whitespace-nowrap">
@@ -2893,7 +2903,7 @@ export function ActionList<TInput, TItem>({
         </span>
         {pages > 1 && (
           // A primitiva pública na escala densa do rodapé: setas no quadrado `icon-sm`,
-          // números `h-7 min-w-7` que crescem com os dígitos (5726 e 5727 não se colam).
+          // números `sm` que crescem com os dígitos (5726 e 5727 não se colam).
           <Pagination className="mx-0 w-auto">
             <PaginationContent className="gap-0.5">
               <PaginationItem>
@@ -2915,7 +2925,8 @@ export function ActionList<TInput, TItem>({
                     <PaginationLink
                       page={n}
                       isActive={n === state.page}
-                      className="h-7 min-w-7 text-xs"
+                      size="sm"
+                      className="text-xs"
                       onClick={() => goTo(n)}
                     />
                   </PaginationItem>
@@ -2977,9 +2988,7 @@ export function ActionList<TInput, TItem>({
               className={cn(
                 "min-h-0",
                 layout === "fill" && "overflow-auto",
-                busy &&
-                  items.length > 0 &&
-                  "pointer-events-none opacity-60",
+                busy && items.length > 0 && "pointer-events-none opacity-60",
               )}
             >
               {body}