@softize/opus 29.0.0 → 30.0.0

package/src/ui/components/patterns/structural-header.tsx

@@ -18,6 +18,10 @@ import {
 } from "react";
 import { cn } from "../../lib/cn.ts";
 
+/** Metadados contextuais, separados da orientação textual e da linha de ações. */
+export const structuralMetaClasses =
+  "mt-3 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-sm text-muted-foreground [overflow-wrap:anywhere] [&>*]:max-w-full";
+
 export type StructuralHeaderVariant = "page" | "section";
 
 /** As classes por slot, por hierarquia visual — PageTitle e SurfaceTitle no nível 1 são o mesmo. */
@@ -46,6 +50,7 @@ interface StructuralHeaderSlots {
   title: ElementType;
   count?: ElementType;
   description?: ElementType;
+  meta?: ElementType;
   actions?: ElementType;
 }
 
@@ -127,6 +132,7 @@ export function StructuralHeader({
   const counts = slots.count === undefined ? [] : of(slots.count);
   const descriptions =
     slots.description === undefined ? [] : of(slots.description);
+  const metas = slots.meta === undefined ? [] : of(slots.meta);
   const actionSlots = slots.actions === undefined ? [] : of(slots.actions);
   const slotTypes = [
     ...leadingTypes,
@@ -134,6 +140,7 @@ export function StructuralHeader({
     slots.title,
     slots.count,
     slots.description,
+    slots.meta,
     slots.actions,
   ].filter((type): type is ElementType => type !== undefined);
   const free = allowFreeContent
@@ -151,6 +158,7 @@ export function StructuralHeader({
     titles.length +
     counts.length +
     descriptions.length +
+    metas.length +
     actionSlots.length;
 
   if (
@@ -159,6 +167,7 @@ export function StructuralHeader({
     medias.length > 1 ||
     counts.length > 1 ||
     descriptions.length > 1 ||
+    metas.length > 1 ||
     actionSlots.length > 1 ||
     recognized !== nodes.length
   ) {
@@ -170,6 +179,7 @@ export function StructuralHeader({
       ...leadingTypes,
       slots.media,
       slots.description,
+      slots.meta,
       slots.count,
       slots.actions,
     ]
@@ -193,6 +203,10 @@ export function StructuralHeader({
     );
   }
 
+  if (metas.length > 0 && titles.length === 0) {
+    throw new Error(`${name} exige título para exibir metadados.`);
+  }
+
   const titleLine = titles.length + counts.length > 0 && (
     <Wrapper className="flex items-baseline gap-2">
       {titles}
@@ -342,11 +356,19 @@ export function StructuralHeader({
       </>
     );
 
+  const withMeta = (
+    <>
+      {layout}
+      {metas}
+    </>
+  );
+
   return (
     <Root
       data-slot={`${slot}-header`}
       className={cn(
-        contentClassName === undefined &&
+        metas.length === 0 &&
+          contentClassName === undefined &&
           leadingPlacement !== "inline" &&
           leading.length === 0 &&
           actionSlots.length > 0 &&
@@ -359,13 +381,13 @@ export function StructuralHeader({
       {...props}
     >
       {contentClassName === undefined ? (
-        layout
+        withMeta
       ) : (
         <Wrapper
           data-slot={`${slot}-header-content`}
           className={contentClassName}
         >
-          {layout}
+          {withMeta}
         </Wrapper>
       )}
     </Root>

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

@@ -42,6 +42,7 @@ import { headingTags, type HeadingLevel } from "./heading-level.ts";
 import { usePageHeadingPresence } from "./page-heading-context.tsx";
 import {
   StructuralHeader,
+  structuralMetaClasses,
   structuralHeaderClasses,
 } from "./structural-header.tsx";
 import {
@@ -113,6 +114,8 @@ interface SurfaceHeaderShorthandProps {
   count?: number;
   /** Forma curta: frase de apoio sob o título. */
   description?: ReactNode;
+  /** Forma curta: badges, datas e autoria sob a orientação. */
+  meta?: ReactNode;
   /** Forma curta: ações sobre a superfície inteira, no extremo oposto ao título. */
   actions?: ReactNode;
 }
@@ -124,6 +127,7 @@ interface SurfaceLegendShorthandProps {
   media?: ReactNode;
   count?: never;
   description?: never;
+  meta?: never;
   actions?: never;
 }
 
@@ -132,6 +136,7 @@ interface SurfaceNoShorthandProps {
   media?: never;
   count?: never;
   description?: never;
+  meta?: never;
   actions?: never;
 }
 
@@ -204,6 +209,7 @@ export function Surface({
   media,
   count,
   description,
+  meta,
   actions,
   className,
   children,
@@ -230,10 +236,11 @@ export function Surface({
     (hasMedia(media) ||
       count !== undefined ||
       description !== undefined ||
+      meta !== undefined ||
       actions !== undefined)
   ) {
     throw new Error(
-      "Surface exige title para usar media, count, description ou actions.",
+      "Surface exige title para usar media, count, description, meta ou actions.",
     );
   }
   if (asChild && shorthand) {
@@ -303,10 +310,11 @@ export function Surface({
       <SurfaceHeader>
         {hasMedia(media) && <SurfaceMedia>{media}</SurfaceMedia>}
         <SurfaceTitle>{title}</SurfaceTitle>
-        {count !== undefined && <SurfaceMeta>{count}</SurfaceMeta>}
+        {count !== undefined && <SurfaceCount>{count}</SurfaceCount>}
         {description !== undefined && (
           <SurfaceDescription>{description}</SurfaceDescription>
         )}
+        {meta !== undefined && <SurfaceMeta>{meta}</SurfaceMeta>}
         {actions !== undefined && <SurfaceActions>{actions}</SurfaceActions>}
       </SurfaceHeader>
       {regions > 0
@@ -370,7 +378,7 @@ export function Surface({
 export type SurfaceHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
 
 const legendInvalidMessage =
-  "SurfaceHeader de fieldset aceita somente SurfaceMedia e SurfaceTitle; contador, descrição e ações ficam fora da legenda.";
+  "SurfaceHeader de fieldset aceita somente SurfaceMedia e SurfaceTitle; contador, descrição, metadados e ações ficam fora da legenda.";
 
 /**
  * Header da superfície; não existe fora dela. Monta a linha sozinho — mídia, título com
@@ -401,7 +409,8 @@ export function SurfaceHeader({
             : {
                 media: SurfaceMedia,
                 title: SurfaceTitle,
-                count: SurfaceMeta,
+                count: SurfaceCount,
+                meta: SurfaceMeta,
                 description: SurfaceDescription,
                 actions: SurfaceActions,
               }
@@ -509,25 +518,44 @@ export function SurfaceDescription({
   );
 }
 
-/** Metadado ao lado do título — o slot do `count` da forma curta. */
-export function SurfaceMeta({
+/** Contador ao lado do título — o slot do `count` da forma curta. */
+export function SurfaceCount({
   className,
   ...props
 }: HTMLAttributes<HTMLSpanElement>): ReactElement {
   const surface = requiredContext(
     useContext(SurfaceHeaderContext),
-    "SurfaceMeta",
+    "SurfaceCount",
     "SurfaceHeader",
   );
   return (
     <span
-      data-slot="surface-meta"
+      data-slot="surface-count"
       className={cn(structuralHeaderClasses[surface.variant].count, className)}
       {...props}
     />
   );
 }
 
+/** Badges, datas e autoria sob o título e a orientação da superfície. */
+export function SurfaceMeta({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement {
+  requiredContext(
+    useContext(SurfaceHeaderContext),
+    "SurfaceMeta",
+    "SurfaceHeader",
+  );
+  return (
+    <div
+      data-slot="surface-meta"
+      className={cn(structuralMetaClasses, className)}
+      {...props}
+    />
+  );
+}
+
 /** Ações do header — a família as posiciona no extremo oposto ao título. */
 export function SurfaceActions({
   className,

package/src/ui/components/primitives/dialog.tsx

@@ -16,6 +16,7 @@ import { FillBoundary } from "../patterns/fill-region.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 import {
   StructuralHeader,
+  structuralMetaClasses,
   structuralHeaderClasses,
   validateSurfaceIntro,
 } from "../patterns/structural-header.tsx";
@@ -67,6 +68,7 @@ const DialogContentContext = React.createContext<DialogContentContextValue>({
   closeSize: "sm",
 });
 
+const DialogMetaContext = React.createContext(false);
 const DialogIntroContext = React.createContext(false);
 
 /**
@@ -589,33 +591,36 @@ export function DialogHeader({
   }
 
   return (
-    <StructuralHeader
-      name="DialogHeader"
-      slot="dialog"
-      slots={{
-        leading: DialogNavigation,
-        media: DialogMedia,
-        title: DialogTitle,
-        description: DialogDescription,
-        actions: DialogActions,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      rowClassName={surfaceHeaderRowClasses("dialog")}
-      className={cn(
-        "text-left",
-        surfaceRegionClasses("dialog", layout, "header"),
-        className,
-      )}
-      trailing={
-        showCloseButton ? (
-          <DialogCloseButton disabled={closeDisabled} size={closeSize} />
-        ) : undefined
-      }
-      {...props}
-    >
-      {children}
-    </StructuralHeader>
+    <DialogMetaContext.Provider value>
+      <StructuralHeader
+        name="DialogHeader"
+        slot="dialog"
+        slots={{
+          leading: DialogNavigation,
+          media: DialogMedia,
+          title: DialogTitle,
+          description: DialogDescription,
+          meta: DialogMeta,
+          actions: DialogActions,
+        }}
+        leadingPlacement="inline"
+        titleRequired={false}
+        rowClassName={surfaceHeaderRowClasses("dialog")}
+        className={cn(
+          "text-left",
+          surfaceRegionClasses("dialog", layout, "header"),
+          className,
+        )}
+        trailing={
+          showCloseButton ? (
+            <DialogCloseButton disabled={closeDisabled} size={closeSize} />
+          ) : undefined
+        }
+        {...props}
+      >
+        {children}
+      </StructuralHeader>
+    </DialogMetaContext.Provider>
   );
 }
 
@@ -655,25 +660,52 @@ export function DialogIntro({
 }: React.ComponentProps<"div">) {
   return (
     <DialogIntroContext.Provider value>
-      <StructuralHeader
-        name="DialogIntro"
-        slot="dialog-intro"
-        slots={{
-          title: DialogTitle,
-          description: DialogDescription,
-          actions: DialogIntroActions,
-        }}
-        leadingPlacement="inline"
-        titleRequired
-        className={cn("text-left", className)}
-        {...props}
-      >
-        {children}
-      </StructuralHeader>
+      <DialogMetaContext.Provider value>
+        <StructuralHeader
+          name="DialogIntro"
+          slot="dialog-intro"
+          slots={{
+            title: DialogTitle,
+            description: DialogDescription,
+            meta: DialogMeta,
+            actions: DialogIntroActions,
+          }}
+          leadingPlacement="inline"
+          titleRequired
+          className={cn("text-left", className)}
+          {...props}
+        >
+          {children}
+        </StructuralHeader>
+      </DialogMetaContext.Provider>
     </DialogIntroContext.Provider>
   );
 }
 
+/** Badges, datas e autoria abaixo do título e da orientação. */
+export function DialogMeta({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { mode } = useDialogContext();
+  const inside = React.useContext(DialogMetaContext);
+  if (mode === "alert")
+    throw new Error(
+      'DialogMeta não está disponível em Dialog com mode="alert"; coloque as informações no corpo do alerta.',
+    );
+  if (!inside)
+    throw new Error(
+      "DialogMeta deve estar dentro de DialogHeader ou DialogIntro.",
+    );
+  return (
+    <div
+      data-slot="dialog-meta"
+      className={cn(structuralMetaClasses, className)}
+      {...props}
+    />
+  );
+}
+
 /** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
 export function DialogIntroActions({
   className,

package/src/ui/components/primitives/drawer.tsx

@@ -15,6 +15,7 @@ import {
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 import {
   StructuralHeader,
+  structuralMetaClasses,
   structuralHeaderClasses,
   validateSurfaceIntro,
 } from "../patterns/structural-header.tsx";
@@ -50,6 +51,7 @@ const DrawerContentContext = React.createContext<DrawerContentContextValue>({
   closeSize: "sm",
 });
 
+const DrawerMetaContext = React.createContext(false);
 const DrawerIntroContext = React.createContext(false);
 
 /** Estado de aberto que a pilha de modais da camada flutuante acompanha (ADR 0052). */
@@ -257,33 +259,36 @@ function DrawerHeader({
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DrawerContentContext);
   return (
-    <StructuralHeader
-      name="DrawerHeader"
-      slot="drawer"
-      slots={{
-        leading: DrawerNavigation,
-        media: DrawerMedia,
-        title: DrawerTitle,
-        description: DrawerDescription,
-        actions: DrawerActions,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      rowClassName={surfaceHeaderRowClasses("drawer")}
-      className={cn(
-        "text-left",
-        surfaceRegionClasses("drawer", layout, "header"),
-        className,
-      )}
-      trailing={
-        showCloseButton ? (
-          <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
-        ) : undefined
-      }
-      {...props}
-    >
-      {children}
-    </StructuralHeader>
+    <DrawerMetaContext.Provider value>
+      <StructuralHeader
+        name="DrawerHeader"
+        slot="drawer"
+        slots={{
+          leading: DrawerNavigation,
+          media: DrawerMedia,
+          title: DrawerTitle,
+          description: DrawerDescription,
+          meta: DrawerMeta,
+          actions: DrawerActions,
+        }}
+        leadingPlacement="inline"
+        titleRequired={false}
+        rowClassName={surfaceHeaderRowClasses("drawer")}
+        className={cn(
+          "text-left",
+          surfaceRegionClasses("drawer", layout, "header"),
+          className,
+        )}
+        trailing={
+          showCloseButton ? (
+            <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
+          ) : undefined
+        }
+        {...props}
+      >
+        {children}
+      </StructuralHeader>
+    </DrawerMetaContext.Provider>
   );
 }
 
@@ -325,25 +330,47 @@ function DrawerIntro({
 }: React.ComponentProps<"div">) {
   return (
     <DrawerIntroContext.Provider value>
-      <StructuralHeader
-        name="DrawerIntro"
-        slot="drawer-intro"
-        slots={{
-          title: DrawerTitle,
-          description: DrawerDescription,
-          actions: DrawerIntroActions,
-        }}
-        leadingPlacement="inline"
-        titleRequired
-        className={cn("text-left", className)}
-        {...props}
-      >
-        {children}
-      </StructuralHeader>
+      <DrawerMetaContext.Provider value>
+        <StructuralHeader
+          name="DrawerIntro"
+          slot="drawer-intro"
+          slots={{
+            title: DrawerTitle,
+            description: DrawerDescription,
+            meta: DrawerMeta,
+            actions: DrawerIntroActions,
+          }}
+          leadingPlacement="inline"
+          titleRequired
+          className={cn("text-left", className)}
+          {...props}
+        >
+          {children}
+        </StructuralHeader>
+      </DrawerMetaContext.Provider>
     </DrawerIntroContext.Provider>
   );
 }
 
+/** Badges, datas e autoria abaixo do título e da orientação. */
+export function DrawerMeta({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const inside = React.useContext(DrawerMetaContext);
+  if (!inside)
+    throw new Error(
+      "DrawerMeta deve estar dentro de DrawerHeader ou DrawerIntro.",
+    );
+  return (
+    <div
+      data-slot="drawer-meta"
+      className={cn(structuralMetaClasses, className)}
+      {...props}
+    />
+  );
+}
+
 /** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
 function DrawerIntroActions({
   className,

package/src/ui/components/primitives/table.tsx

@@ -24,7 +24,7 @@ function Table({
         data-slot="table-container"
         data-variant={variant}
         className={cn(
-          "relative w-full overflow-x-auto",
+          "relative w-full min-w-0 max-w-full overflow-x-auto",
           variant === "framed" && "rounded-lg border border-border",
           containerClassName,
         )}
@@ -95,7 +95,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-3 text-left align-middle font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
+        "h-10 px-3 text-left align-middle font-medium whitespace-normal text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className,
       )}
       {...props}
@@ -108,7 +108,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
+        "px-3 py-2 align-middle whitespace-normal wrap-break-word [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className,
       )}
       {...props}

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

@@ -10,13 +10,20 @@ limites visuais da coleção; use [`Table`](/ui/table) diretamente quando a comp
 variante `framed`. Carregamento, erro e vazio usam o mesmo [`DataState`](/ui/data-state) das
 demais coleções.
 
-A barra mantém em uma única linha os controles declarados como `inline`: ela não quebra e não move
-filtros para o modal por falta de espaço. Seletores de valor único acompanham o valor escolhido até
-`20rem` e truncam o excedente; a busca varia entre `8rem` e `16rem` conforme a largura
-disponível. Quando a barra ficar longa demais, declare como `advanced` os filtros que não precisam
-ficar sempre à vista, como descreve a seção “Onde cada filtro aparece”. Recarregar e
-exibição formam um `ButtonGroup` espaçado; `toolbarActions` acrescenta, depois deles, operações
-ligadas ao recorte atual.
+A tabela usa a largura disponível e permite quebra em células textuais. Colunas com `fit`
+preservam valores compactos sem quebra. A largura das colunas de dados considera cabeçalhos e
+valores, sem comprimir todas as colunas `fit` para ampliar a primeira. Os cabeçalhos quebram
+quando falta espaço; seleção, ações de linha e células contendo apenas um switch
+(direto ou envolvido por TooltipTrigger) mantêm a largura compacta.
+Se identificadores sem espaços ou larguras mínimas explícitas excederem o espaço, a rolagem
+fica nos resultados, sem alargar a toolbar ou o rodapé. Em `layout="fill"`, o cabeçalho continua fixo nessa região.
+
+A barra distribui os controles `inline` em mais de uma linha quando necessário, preservando sua
+ordem. Ela não move filtros automaticamente para o modal. Seletores de valor único acompanham o
+valor escolhido até `20rem` e truncam o excedente; a busca varia entre `8rem` e `16rem`.
+Declare como `advanced` os filtros que não precisam ficar sempre à vista, como descreve a seção
+“Onde cada filtro aparece”. Recarregar e exibição formam um `ButtonGroup` espaçado;
+`toolbarActions` acrescenta, depois deles, operações ligadas ao recorte atual.
 
 ```tsx preview col
 render(

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

@@ -460,6 +460,32 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Arqu
   age onde a pessoa está. O modo `alert` cobre a camada até a resposta.
 - `DialogHost` apresenta uma solicitação por vez para que cada resposta tenha um alvo inequívoco.
 
+## Metadados junto à identidade
+
+Use `DialogMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `DialogDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx
+<Dialog defaultOpen>
+  <DialogContent>
+    <DialogHeader />
+    <DialogBody>
+      <DialogIntro>
+        <DialogTitle>Manual de atendimento</DialogTitle>
+        <DialogDescription>Orientações para a equipe.</DialogDescription>
+        <DialogMeta><Badge>Publicado</Badge><span>Por Ana</span></DialogMeta>
+      </DialogIntro>
+      <p>Conteúdo do manual.</p>
+    </DialogBody>
+  </DialogContent>
+</Dialog>
+```
+
+A composição aceita um único `DialogMeta` e exige um `DialogTitle`. Na forma explícita, coloque-o em `DialogIntro` ou no `DialogHeader` compacto. Não coloque o slot solto no corpo.
+
+O modo `alert` conserva sua composição especializada e não recebe `DialogMeta`.
+
 ## Propriedades de Dialog
 
 | Propriedade    | Tipo                       | Padrão      | Descrição                                                                           |
@@ -668,3 +694,16 @@ Use `flush` quando o conteúdo controlar seus próprios recuos.
 
 Na intro, `DialogTitle` usa a mesma escala de `PageTitle` (`1.875rem`). No header
 compacto, o título conserva a escala de `1.125rem`. O nível semântico não altera essas medidas.
+
+## Propriedades de DialogMeta
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `children` | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string` | Ajusta a faixa de metadados. |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não são anunciados como descrição do modal.
+`DialogMeta` não se aplica a `mode="alert"`; informações necessárias à resposta ficam no corpo do alerta.