@softize/opus 29.0.0 → 30.0.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 `opus copy --check` · `base copy check` · `manifest:check`) — eles apontam o que a
 mudança cobra do seu código.
 
+## 30.0.0 — 2026-10-16
+
+PageMeta, DrawerMeta, DialogMeta e SurfaceMeta organizam badges, datas e autoria em
+faixa própria sob o título e a descrição. Page e Surface também aceitam a prop `meta`.
+
+### Breaking
+
+**Migração:** SurfaceMeta deixa de ocupar a linha do título. Contadores explícitos usam
+SurfaceCount; a prop `count` conserva o comportamento anterior. Metadados contextuais
+existentes permanecem em SurfaceMeta e passam para a faixa inferior. Revise manualmente
+os usos existentes de SurfaceMeta: os gates não distinguem um contador de metadados.
+Descrições textuais usam SurfaceDescription. DialogMeta não se aplica ao modo de alerta.
+
+Tabelas quebram texto entre palavras, preservando palavras curtas inteiras, e ActionList
+mantém a rolagem dentro dos resultados,
+sem alargar a superfície. Filtros inline podem ocupar mais de uma linha. Colunas `fit`
+preservam os valores sem quebra; a distribuição automática considera também os cabeçalhos,
+que podem quebrar quando falta espaço. Colunas de dados não recebem largura mínima forçada;
+seleção, ações de linha e células contendo apenas um switch permanecem compactas. Em tabelas
+compostas diretamente, use `whitespace-nowrap` para valores que devem permanecer inteiros.
+
 ## 29.0.0 — 2026-10-15
 
 O `CLAUDE.md` passa a importar o `AGENTS.md`, e as declarações de copy passam a ser ancoradas pelo

package/bin/lib/check.mjs

@@ -159,6 +159,7 @@ const UI_STRUCTURAL_PARENTS = new Map([
   ["PageFooter", new Set(["Page"])],
   ["PageTitle", new Set(["PageHeader", "PageIntro"])],
   ["PageDescription", new Set(["PageHeader", "PageIntro"])],
+  ["PageMeta", new Set(["PageHeader", "PageIntro"])],
   ["PageBack", new Set(["PageHeader"])],
   ["PageNavigation", new Set(["PageHeader"])],
   ["PageActions", new Set(["PageHeader"])],
@@ -171,6 +172,7 @@ const UI_STRUCTURAL_PARENTS = new Map([
   ["SurfaceTitle", new Set(["SurfaceHeader"])],
   ["SurfaceDescription", new Set(["SurfaceHeader"])],
   ["SurfaceMeta", new Set(["SurfaceHeader"])],
+  ["SurfaceCount", new Set(["SurfaceHeader"])],
   ["SurfaceActions", new Set(["SurfaceHeader"])],
   ["DialogHeader", new Set(["DialogContent"])],
   ["DialogBody", new Set(["DialogContent"])],
@@ -181,6 +183,7 @@ const UI_STRUCTURAL_PARENTS = new Map([
   ["DialogMedia", new Set(["DialogHeader"])],
   ["DialogTitle", new Set(["DialogHeader", "DialogIntro"])],
   ["DialogDescription", new Set(["DialogHeader", "DialogIntro"])],
+  ["DialogMeta", new Set(["DialogHeader", "DialogIntro"])],
   ["DialogActions", new Set(["DialogHeader"])],
   ["DrawerHeader", new Set(["DrawerContent"])],
   ["DrawerBody", new Set(["DrawerContent"])],
@@ -191,6 +194,7 @@ const UI_STRUCTURAL_PARENTS = new Map([
   ["DrawerMedia", new Set(["DrawerHeader"])],
   ["DrawerTitle", new Set(["DrawerHeader", "DrawerIntro"])],
   ["DrawerDescription", new Set(["DrawerHeader", "DrawerIntro"])],
+  ["DrawerMeta", new Set(["DrawerHeader", "DrawerIntro"])],
   ["DrawerActions", new Set(["DrawerHeader"])],
   ["AlertMedia", new Set(["Alert"])],
   ["AlertHeader", new Set(["Alert"])],
@@ -224,7 +228,7 @@ const UI_STRUCTURAL_ROOTS = new Map([
       body: "PageBody",
       footer: "PageFooter",
       headerRequired: false,
-      shorthand: new Set(["title", "description", "actions"]),
+      shorthand: new Set(["title", "description", "meta", "actions"]),
       // O contador saiu do título da página (ADR 0009). Tirar `count` do shorthand não proíbe
       // nada sozinho — só apaga o marcador que fazia o gate enxergar aquele Page —, então a
       // prop removida é cobrada aqui, nas duas formas de composição.
@@ -242,7 +246,14 @@ const UI_STRUCTURAL_ROOTS = new Map([
       // Cada região é opcional, a forma curta convive com SurfaceBody e SurfaceFooter, e sem
       // região nenhuma a Surface é uma caixa de filhos livres (ADR 0045).
       flexible: true,
-      shorthand: new Set(["title", "media", "description", "count", "actions"]),
+      shorthand: new Set([
+        "title",
+        "media",
+        "description",
+        "meta",
+        "count",
+        "actions",
+      ]),
     },
   ],
 ]);
@@ -260,6 +271,10 @@ const UI_STRICT_DIRECT_COMPONENTS = new Set([
   "SurfaceTitle",
   "SurfaceDescription",
   "SurfaceMeta",
+  "SurfaceCount",
+  "PageMeta",
+  "DrawerMeta",
+  "DialogMeta",
   "SurfaceActions",
   "AlertMedia",
   "AlertHeader",
@@ -289,10 +304,6 @@ const UI_REMOVED_PROPS = new Map([
       ["layout", "use `Surface` para anatomia visual contínua ou seccionada"],
     ]),
   ],
-  [
-    "Surface",
-    new Map([["meta", "use `count` para o total ao lado do título"]]),
-  ],
   [
     "DialogMedia",
     new Map([
@@ -340,7 +351,7 @@ const UI_REMOVED_COMPONENTS = new Map([
   ],
   ["ContentTitle", "use `SurfaceTitle`"],
   ["ContentDescription", "use `SurfaceDescription`"],
-  ["ContentMeta", "use `SurfaceMeta`"],
+  ["ContentMeta", "use `SurfaceCount`"],
   ["ContentActions", "use `SurfaceActions`"],
   ["ContentBody", "use `SurfaceBody`"],
   ["Card", 'use `Surface framed elevation="raised"`'],
@@ -364,7 +375,7 @@ const UI_STRUCTURAL_HEADERS = new Map([
     "PageIntro",
     {
       title: "PageTitle",
-      optional: new Set(["PageIntroActions", "PageDescription"]),
+      optional: new Set(["PageIntroActions", "PageDescription", "PageMeta"]),
       shorthand: new Set(),
     },
   ],
@@ -372,7 +383,11 @@ const UI_STRUCTURAL_HEADERS = new Map([
     "DialogIntro",
     {
       title: "DialogTitle",
-      optional: new Set(["DialogIntroActions", "DialogDescription"]),
+      optional: new Set([
+        "DialogIntroActions",
+        "DialogDescription",
+        "DialogMeta",
+      ]),
       shorthand: new Set(),
     },
   ],
@@ -380,7 +395,11 @@ const UI_STRUCTURAL_HEADERS = new Map([
     "DrawerIntro",
     {
       title: "DrawerTitle",
-      optional: new Set(["DrawerIntroActions", "DrawerDescription"]),
+      optional: new Set([
+        "DrawerIntroActions",
+        "DrawerDescription",
+        "DrawerMeta",
+      ]),
       shorthand: new Set(),
     },
   ],
@@ -393,6 +412,7 @@ const UI_STRUCTURAL_HEADERS = new Map([
         "PageNavigation",
         "PageActions",
         "PageDescription",
+        "PageMeta",
       ]),
       exclusive: [new Set(["PageBack", "PageNavigation"])],
       shorthand: new Set(),
@@ -407,6 +427,7 @@ const UI_STRUCTURAL_HEADERS = new Map([
         "SurfaceMedia",
         "SurfaceDescription",
         "SurfaceMeta",
+        "SurfaceCount",
         "SurfaceActions",
       ]),
       shorthand: new Set(),
@@ -2116,6 +2137,30 @@ export function checkUiStructure(file, text) {
           "ui-structure-removed-component",
         );
       }
+      if (component === "DialogMeta") {
+        let ancestor = node.parent;
+        while (ancestor !== undefined) {
+          if (
+            ts.isJsxElement(ancestor) &&
+            imports.get(jsxLocalName(ancestor)) === "Dialog"
+          ) {
+            const modes = jsxStringAttributeValues(
+              jsxOpening(ancestor),
+              "mode",
+            );
+            if (modes.length === 1 && modes[0] === "alert") {
+              add(
+                node,
+                component,
+                'DialogMeta não está disponível em Dialog com mode="alert"; coloque as informações no corpo do alerta.',
+                "ui-structure-meta",
+              );
+            }
+            break;
+          }
+          ancestor = ancestor.parent;
+        }
+      }
       const parents =
         component === null ? undefined : UI_STRUCTURAL_PARENTS.get(component);
       if (parents !== undefined) {
@@ -2234,6 +2279,37 @@ export function checkUiStructure(file, text) {
         }
       }
 
+      if (
+        [
+          "PageHeader",
+          "PageIntro",
+          "DialogHeader",
+          "DialogIntro",
+          "DrawerHeader",
+          "DrawerIntro",
+          "SurfaceHeader",
+        ].includes(component)
+      ) {
+        const family = component.replace(/(?:Header|Intro)$/, "");
+        const children = directStructuralChildren(node, imports);
+        const metas = children.names.filter(
+          (name) => name === `${family}Meta`,
+        ).length;
+        if (
+          metas > 1 ||
+          (metas > 0 &&
+            !children.names.includes(`${family}Title`) &&
+            !children.hasOpaque)
+        ) {
+          add(
+            node,
+            component,
+            `${component} aceita um único ${family}Meta e exige ${family}Title para exibi-lo.`,
+            "ui-structure-meta",
+          );
+        }
+      }
+
       const header =
         component === null ? undefined : UI_STRUCTURAL_HEADERS.get(component);
       if (header !== undefined) {

package/docs/adr/0045-surface-replaces-content-and-card.md

@@ -17,6 +17,9 @@
   `Surface`.
 - **Não altera:** `Page`, `Dialog`, `Drawer` e `Pane`, que mantêm famílias, slots e mídia próprios.
 
+A ADR 0063 substitui parcialmente esta decisão: `SurfaceMeta` passa a representar a faixa
+de metadados; o contador na linha do título passa a usar `SurfaceCount`.
+
 ## Contexto
 
 Quem monta uma tela precisa delimitar e nomear um trecho dela: uma seção da página, um grupo de

package/docs/adr/0062-listas-contidas-e-texto-flexivel.md

@@ -0,0 +1,68 @@
+# ADR 0062 — Listas contidas e texto flexível
+
+Data: 2026-10-15
+Status: Aceita
+
+## Contexto
+
+Descrições sem quebra faziam uma tabela de Habilidades ocupar 92,21rem dentro de
+63,13rem disponíveis. A coluna implícita do grid de resultados do ActionList
+crescia pelo conteúdo; o contêiner da tabela crescia junto e não oferecia sua
+rolagem horizontal. A largura mínima da página não limita a largura dos filhos.
+
+## Decisão
+
+Table contém sua largura e quebra texto entre palavras por padrão. `overflow-wrap:
+break-word` preserva a largura intrínseca das palavras, evitando que uma descrição
+comprida faça uma coluna como “Inativo” quebrar no meio. Identificadores sem espaços
+podem exigir rolagem interna; `wrap-anywhere` fica disponível como opção explícita.
+Classes explícitas continuam permitindo
+células sem quebra. ActionList limita sua coluna de resultados ao espaço
+recebido e permite encolhimento ao longo da cadeia de flex/grid.
+
+`fit` preserva valores compactos sem quebra, como números e datas. O cabeçalho
+de uma coluna declarada pode quebrar entre palavras. Textos flexíveis recebem o
+restante do espaço. Não há redução de tipografia nem ocultação automática de colunas.
+
+A barra de filtros pode ocupar mais de uma linha, mantendo a ordem dos controles.
+Uma tabela que ainda exceda a largura disponível rola dentro da lista: em flow,
+no contêiner da tabela; em fill, na região de resultados que também ancora o
+cabeçalho fixo. O rodapé e a toolbar não acompanham essa rolagem.
+
+## Alternativas e consequências
+
+Largura fixa e repartição igual sacrificariam espaço das colunas textuais mesmo
+quando controles curtos não precisam dele. Ocultar o excesso perderia dados e
+ações. Regras CSS no aplicativo duplicariam o comportamento do pacote.
+
+A quebra pode aumentar a altura das linhas. Consumidores com células compostas
+continuam responsáveis por permitir encolhimento dos filhos flex e por declarar
+larguras mínimas somente quando necessárias. Comparativos com colunas mínimas
+explícitas continuam usando rolagem horizontal.
+
+## Verificação
+
+Testes em Chromium medem contenção, textos longos, filtros, valores compactos e
+rolagem nos modos flow e fill, incluindo a posição do cabeçalho após rolar.
+Os testes estão em `tests/browser/action-list-width.test.tsx` e cobrem também
+palavras curtas ao lado de descrições longas e tokens sem espaços.
+
+## Revisão da distribuição entre colunas — 2026-10-15
+
+Na validação de Consumo, quatro colunas `fit` ficavam comprimidas enquanto a coluna
+textual recebia cerca de 70% da largura. A largura mínima forçada fazia o navegador
+quebrar títulos mesmo com espaço disponível. Retirar essa restrição reduziu a coluna
+textual para cerca de 38% e acomodou os cabeçalhos numa linha, no mesmo contêiner.
+
+Colunas de dados passam a participar da distribuição automática da tabela, considerando
+cabeçalhos e valores. `fit` continua preservando valores sem quebra, mas não impõe
+largura mínima artificial. Cabeçalhos podem quebrar quando o espaço realmente faltar.
+Seleção, ações de linha e células contendo apenas um switch continuam compactas.
+O switch pode ser filho direto ou estar envolvido pelo TooltipTrigger. A regra usa a
+estrutura do controle, sem depender do nome da coluna; células com conteúdo misto
+continuam participando da distribuição natural.
+
+Não se distribui largura igualmente nem se mede texto em JavaScript. O algoritmo
+nativo considera o conteúdo e o espaço recebido; a contenção e a rolagem descritas
+acima permanecem. Os testes de navegador cobrem várias colunas numéricas ao lado de
+texto, tanto com espaço suficiente quanto em contêiner estreito, em flow e fill.

package/docs/adr/0063-metadados-das-superficies.md

@@ -0,0 +1,44 @@
+# ADR 0063 — Metadados das superfícies em região própria
+
+- **Status:** aceita.
+- **Data:** 2026-10-15.
+- **Complementa:** ADR 0060.
+- **Substitui parcialmente:** ADR 0045 quanto à posição e função de SurfaceMeta.
+
+## Contexto
+
+Badges, autoria e datas disputam espaço com o título ou usam o subheading como container.
+A descrição é orientação textual próxima ao heading; metadados precisam de espaçamento
+próprio e quebra de linha sem alterar o tamanho ou o significado do título.
+
+## Decisão
+
+PageMeta, DrawerMeta, DialogMeta e SurfaceMeta compõem uma faixa opcional após a linha
+que contém título, descrição e ações. Não são headings nem descrições acessíveis dos modais.
+As três primeiras famílias aceitam Meta em Intro ou Header compacto; Surface mantém
+Meta em SurfaceHeader, pois não possui Intro. Meta exige título na mesma composição.
+Dialog em modo de alerta não aceita Meta; informações necessárias à resposta pertencem ao corpo.
+
+O intervalo superior é de 0,75rem; itens usam 0,75rem na horizontal e 0,5rem entre linhas.
+A faixa permite quebra, conserva a tipografia dos badges e não insere separadores nem
+busca dados. Sem Meta não há espaço reservado. Uma composição aceita no máximo um Meta.
+As formas curtas de Page e Surface aceitam a prop meta. Fieldset preserva a legend
+restrita a título e mídia decorativa; seus metadados pertencem ao corpo.
+
+SurfaceCount preserva o contador ao lado do título e recebe count na forma curta.
+SurfaceMeta deixa de ocupar essa posição: consumidores de contadores explícitos migram
+para SurfaceCount. Consumidores de contexto editorial permanecem em SurfaceMeta.
+
+## Alternativas
+
+Usar Description conservaria a mistura de prosa e metadados. Colocar wrappers livres no
+Body repetiria espaçamento nos consumidores e afastaria o contexto da identidade. Manter
+SurfaceMeta como contador faria o mesmo nome expressar funções diferentes entre famílias.
+
+## Verificação
+
+Testes renderizados e checker cobrem posição, unicidade, pai permitido e título obrigatório.
+Contadores permanecem ao lado do título. Testes no navegador conferem intervalo e quebra
+nas famílias, incluindo headers compactos com ações. As evidências pertencem aos arquivos
+`tests/ui/surface-meta.test.tsx`, `tests/browser/surface-meta.test.tsx` e
+`tests/check/check.test.ts`. Publicação e adoção dependem de autorização de entrega.

package/docs/adr/README.md

@@ -16,3 +16,7 @@ estar documentado na superfície correspondente, sem exigir a reconstrução des
 - [ADR 0060 — Composição de superfícies com cabeçalho e intro](0060-surface-composition-separates-chrome-and-intro.md).
 
 - [ADR 0061 — O `CLAUDE.md` importa o `AGENTS.md`](0061-claude-md-imports-agents-md.md).
+
+- [ADR 0062 — Listas contidas e texto flexível](0062-listas-contidas-e-texto-flexivel.md).
+
+- [ADR 0063 — Metadados das superfícies em região própria](0063-metadados-das-superficies.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "29.0.0",
+  "version": "30.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

@@ -65,7 +65,7 @@ existentes, mantendo navegação observável e componentes reutilizáveis sem la
     relativa do Tailwind. Reservar `px` a hairlines e compensações presas à geometria da borda,
     com justificativa e cobertura explícitas.
 11. Em uma página centrada em coleção, compor `Surface + ActionList`: título e criação ficam em
-    extremos opostos do `SurfaceHeader`; a criação usa botão textual `default`, sem ícone, com
+    extremos opostos do `SurfaceHeader`; a criação usa botão textual `sm`, sem ícone, com
     `Criar recurso`. Busca, filtros, atualização, estados e paginação permanecem no `ActionList`.
     Reservar `toolbarActions` a operações ligadas ao recorte atual.
 12. Evoluir um pattern compartilhado apenas quando a recorrência e o contrato estiverem claros.

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

@@ -7,7 +7,7 @@
   outra em `PageShell` com navegação contextual acima de `Page > PageHeader + PageBody`, garantindo
   exatamente um `PageTitle` no header, e uma coleção nomeada com
   `Surface > SurfaceHeader + SurfaceBody > ActionList`. Provar que criação fica em
-  `SurfaceActions`, no extremo oposto ao título, como botão textual `default` sem ícone e com
+  `SurfaceActions`, no extremo oposto ao título, como botão textual `sm` sem ícone e com
   `Criar recurso`, enquanto uma operação dependente do recorte usa `toolbarActions`; incluir
   `ActionFilterBar` separado do renderer, `ItemGroup` para
   uma coleção secundária e um `ActionFormDialog`; provar teto padrão de `80rem`, hierarquia por
@@ -84,3 +84,12 @@ da label, duplicação entre hint/help e perda de `aria-describedby` quando apar
   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.
+
+## Metadados e contadores
+
+- Execução: compor um detalhe com título, descrição e badges em PageMeta, DrawerMeta e DialogMeta;
+  conferir a faixa separada em Header compacto e Intro. Em Surface, conferir que SurfaceCount
+  fica na linha do título e SurfaceMeta abaixo dela. Migrar um contador antigo e uma descrição
+  antiga sem alterar suas funções; provar a equivalência das formas curtas com `meta`.
+- Reprova: contador em SurfaceMeta, metadados em Description, dois Meta, Meta sem título,
+  Meta em fieldset ou DialogMeta em alerta.

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

@@ -36,8 +36,8 @@
   recuperação como botão `outline` textual. Estados de seção ou coleção continuam em `DataState`,
   `ActionView`, `ActionList` ou `Alert`; não elevar uma falha parcial a estado da página.
 - `Surface` delimita uma região e segue a anatomia `Surface > SurfaceHeader (SurfaceMedia,
-SurfaceTitle, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + SurfaceFooter`.
-  Os slots nunca ficam soltos. `title`, `description`, `count`, `media` e `actions` são a abreviação
+SurfaceTitle, SurfaceCount, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + SurfaceFooter`.
+  Os slots nunca ficam soltos. `title`, `description`, `count`, `meta`, `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 `sm`, sem ícone, com
   `Criar recurso`.
@@ -45,6 +45,14 @@ SurfaceTitle, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + S
   hierarquia semântica do heading. `Surface framed` aceita `layout="sectioned"`; declare
   `SurfaceBody flush` quando o filho direto já possui recuo interno, como `DetailGroup` com
   divisores, lista ou tabela. `as="fieldset"` cria a `legend` nativa sem variante de moldura.
+- `PageMeta`, `DialogMeta` e `DrawerMeta` recebem badges, datas e autoria em faixa própria
+  após título, descrição e ações, dentro de Header compacto ou Intro da mesma família.
+  `SurfaceMeta` ocupa essa faixa em `SurfaceHeader`; `SurfaceCount` mantém o contador na linha
+  do título. Ao migrar, conferir manualmente os antigos `SurfaceMeta`: contadores passam a
+  `SurfaceCount`, frases de orientação a `SurfaceDescription`, e metadados permanecem em Meta.
+  Cada composição aceita um Meta e exige título. Page e Surface aceitam `meta` na forma curta;
+  fieldset e Dialog em `mode="alert"` não aceitam Meta. Informações necessárias à decisão
+  permanecem no corpo ou junto à ação correspondente.
 - Uma página centrada em coleção compõe `Surface + ActionList`. O `SurfaceHeader` recebe título e
   criação; o `ActionList` mantém busca, filtros, atualização, resultados, estados e paginação.
   `toolbarActions` fica reservado a operações que dependem do recorte atual.

package/src/core/types.ts

@@ -714,7 +714,7 @@ export interface ListColumnSpec {
   /** Header clicável (asc ↔ desc). Convenção: a UI escreve `sort: '<key>:<dir>'` no
    *  input; o handler implementa o orderBy. */
   sortable?: boolean
-  /** Coluna encolhe ao conteúdo (não expande). */
+  /** Preserva valores sem quebra; a largura considera também o cabeçalho e o espaço disponível. */
   fit?: boolean
   /** Nasce oculta (candidata ao column picker). */
   hidden?: boolean

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

@@ -1524,7 +1524,7 @@ export function ActionFilterBar({
   return (
     <TooltipProvider>
       <div data-slot="action-filter-bar" className="space-y-2">
-        <div className="flex min-w-0 items-end gap-3">
+        <div className="flex min-w-0 flex-wrap items-end gap-3">
           {periodPosition === "before" && periodControl}
           {inlineSpecs.map(([name, spec]) => {
             if (name === periodBasisEntry?.[0]) {
@@ -1636,7 +1636,7 @@ export function ActionFilterBar({
           {!searchAtActionsEnd && searchBox}
           <div
             data-slot="action-filter-actions"
-            className="ml-auto flex min-w-0 items-end gap-2"
+            className="ml-auto flex min-w-0 max-w-full flex-wrap items-end gap-2"
           >
             {searchAtActionsEnd && searchBox}
             {(modalSpecs.length > 0 ||
@@ -2074,7 +2074,7 @@ export function ActionList<TInput, TItem>({
             header: text(c.label, c.key),
             sortable: c.sortable === true,
             spec: c,
-            className: cn(c.fit === true && "w-px whitespace-nowrap"),
+            className: cn(c.fit === true && "whitespace-nowrap wrap-normal"),
             cell:
               cells?.[c.key] ??
               ((item: TItem): ReactNode => {
@@ -2534,7 +2534,13 @@ export function ActionList<TInput, TItem>({
           </TableCell>
         )}
         {derived.map((col) => (
-          <TableCell key={col.key} className={col.className}>
+          <TableCell
+            key={col.key}
+            className={cn(
+              "has-[>[role=switch]:only-child]:w-0 has-[>[data-slot=tooltip-trigger]:only-child>[role=switch]:only-child]:w-0",
+              col.className,
+            )}
+          >
             {col.cell(item)}
           </TableCell>
         ))}
@@ -2597,7 +2603,10 @@ export function ActionList<TInput, TItem>({
               </TableHead>
             )}
             {derived.map((col) => (
-              <TableHead key={col.key} className={col.className}>
+              <TableHead
+                key={col.key}
+                className={cn(col.className, col.spec && "whitespace-normal")}
+              >
                 {col.sortable === true ? (
                   <button
                     type="button"
@@ -2959,8 +2968,8 @@ export function ActionList<TInput, TItem>({
         data-layout={layout}
         className={cn(
           layout === "fill"
-            ? "flex h-full min-h-0 flex-1 flex-col gap-3"
-            : "space-y-3",
+            ? "flex h-full min-h-0 min-w-0 max-w-full flex-1 flex-col gap-3"
+            : "min-w-0 max-w-full space-y-3",
         )}
       >
         {/* A lista é a folha da cadeia de altura: o que ela hospeda decide a própria. */}
@@ -2975,7 +2984,7 @@ export function ActionList<TInput, TItem>({
               tem altura própria e ela vira a altura do conteúdo. */}
           <div
             className={cn(
-              "grid min-h-0 grid-rows-[1fr_auto]",
+              "grid min-h-0 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[1fr_auto]",
               layout === "fill" && "flex-1",
             )}
           >
@@ -2986,7 +2995,7 @@ export function ActionList<TInput, TItem>({
             <div
               aria-busy={busy}
               className={cn(
-                "min-h-0",
+                "min-h-0 min-w-0",
                 layout === "fill" && "overflow-auto",
                 busy && items.length > 0 && "pointer-events-none opacity-60",
               )}

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

@@ -31,6 +31,7 @@ import {
 } from "./page-heading-context.tsx";
 import {
   StructuralHeader,
+  structuralMetaClasses,
   validateSurfaceIntro,
   structuralHeaderClasses,
 } from "./structural-header.tsx";
@@ -165,6 +166,8 @@ interface PageShorthandProps extends PageBaseProps {
   title: ReactNode;
   /** Orientação opcional sobre a finalidade da página; regras pertencem ao corpo. */
   description?: ReactNode;
+  /** Badges, datas e autoria sob a orientação. */
+  meta?: ReactNode;
   actions?: ReactNode;
   children: ReactNode;
 }
@@ -172,6 +175,7 @@ interface PageShorthandProps extends PageBaseProps {
 interface PageComposedProps extends PageBaseProps {
   title?: never;
   description?: never;
+  meta?: never;
   actions?: never;
   children: ReactNode;
 }
@@ -246,6 +250,7 @@ function hasOpaquePageBodyContent(node: ReactNode): boolean {
 export function Page({
   title,
   description,
+  meta,
   actions,
   layout = "flow",
   surfaceLayout = "sectioned",
@@ -377,6 +382,7 @@ export function Page({
           {description !== undefined && (
             <PageDescription>{description}</PageDescription>
           )}
+          {meta !== undefined && <PageMeta>{meta}</PageMeta>}
         </PageIntro>
         {children}
       </PageBody>
@@ -490,6 +496,7 @@ export function PageHeader({
           leading: [PageBack, PageNavigation],
           title: PageTitle,
           description: PageDescription,
+          meta: PageMeta,
           actions: PageActions,
         }}
         leadingPlacement={
@@ -542,6 +549,7 @@ export function PageIntro({
         slots={{
           title: PageTitle,
           description: PageDescription,
+          meta: PageMeta,
           actions: PageIntroActions,
         }}
         leadingPlacement="inline"
@@ -555,6 +563,25 @@ export function PageIntro({
   );
 }
 
+/** Badges, datas e autoria abaixo do título e da orientação. */
+export function PageMeta({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const header = useContext(PageHeaderContext);
+  const intro = useContext(PageIntroContext);
+  const inside = header || intro;
+  if (!inside)
+    throw new Error("PageMeta deve estar dentro de PageHeader ou PageIntro.");
+  return (
+    <div
+      data-slot="page-meta"
+      className={cn(structuralMetaClasses, className)}
+      {...props}
+    />
+  );
+}
+
 /** Ações locais do conteúdo, distintas das ações da superfície em PageActions. */
 export function PageIntroActions({
   className,