@softize/opus 28.0.0 → 30.0.0

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",
               )}
@@ -3058,7 +3067,7 @@ export function ActionList<TInput, TItem>({
 // URL sync — a serialização padrão do estado da toolbar (querystring compacta)
 // =============================================================================
 //
-// Convenção: `q` · `sort=chave:dir` (omitido quando é o default do contrato) ·
+// Convenção: `q` · `sort=key:dir` (omitido quando é o default do contrato) ·
 // `period=preset` relativo ou `period=from..to` (o custom é implícito; default
 // omitido) · `view` (omitida quando é a primeira) · `cols=a,b,c` (omitida no
 // default) · filtros pelo PRÓPRIO nome (multiple → CSV). Quem embala liga:

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,

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,