@softize/opus 23.0.0 → 24.0.0

package/src/ui/components/patterns/fill-region.ts

@@ -7,15 +7,16 @@
  * coluna flexível. Este módulo faz essa cadeia se formar sem classes no consumidor:
  *
  * - a raiz (`FillRoot`) publica o contexto;
- * - os elos canônicos (`PageBody`, `Content`, `ContentBody`, o corpo da `Presentation`)
- *   leem o contexto com `useFillRegion` e o republicam para os filhos;
+ * - os elos canônicos (`PageBody`, `Surface` sem elevação, `SurfaceBody`, o corpo da
+ *   `Presentation`) leem o contexto com `useFillRegion` e o republicam para os filhos;
  * - a folha (`ActionList`) usa `useFillLeaf`: assume `fill` por padrão quando o elemento
  *   pai é um elo e se registra na cadeia;
- * - um elo só vira coluna flexível quando uma folha se registrou abaixo dele. Irmãos sem
- *   folha mantêm a altura do próprio conteúdo, e uma página `fill` sem lista não muda;
- * - superfícies com anatomia própria (Card, Dialog, Drawer, Pane) cortam a cadeia com
- *   `FillBoundary`: a altura delas é decisão delas, inclusive quando um portal as renderiza
- *   dentro de uma página `fill`.
+ * - os bodies estruturais já são colunas para governar o ritmo; quando uma folha se registra,
+ *   os elos também passam a ocupar a folga disponível. Irmãos sem folha mantêm a altura do
+ *   próprio conteúdo, e uma página `fill` sem lista não muda;
+ * - superfícies com altura própria (`Surface elevation="raised"`, Dialog, Drawer, Pane)
+ *   cortam a cadeia com `FillBoundary`: a altura delas é decisão delas, inclusive quando um
+ *   portal as renderiza dentro de uma página `fill`.
  *
  * O registro acontece em `useLayoutEffect`, então as classes chegam antes da primeira pintura.
  */

package/src/ui/components/patterns/form-dialog.tsx

@@ -66,9 +66,7 @@ export function ActionFormDialog<
           body={(fields) => (
             <DialogBody>
               {intro !== undefined && (
-                <div id={introId} className="mb-4">
-                  {intro}
-                </div>
+                <div id={introId}>{intro}</div>
               )}
               {fields}
             </DialogBody>

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

@@ -49,7 +49,8 @@ import {
 } from "../primitives/tooltip.tsx";
 import { Info } from "lucide-react";
 import { Select, type SelectOption } from "../primitives/select.tsx";
-import { ToggleGroup, ToggleGroupItem } from "../primitives/toggle-group.tsx";
+import { Toggle } from "../primitives/toggle.tsx";
+import { ToggleGroup } from "../primitives/toggle-group.tsx";
 import {
   Field,
   FieldError,
@@ -464,14 +465,14 @@ export function ActionFormField({
             value={(formValues[name] as string[] | undefined) ?? []}
             onValueChange={(value) => setValue(value)}
             variant="outline"
-            spacing={2}
+            mode="spaced"
             aria-labelledby={`${name}-label`}
             aria-invalid={errorMessage !== undefined}
             aria-describedby={describedBy}
             className="grid w-full grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] items-stretch gap-2"
           >
             {options.map((option) => (
-              <ToggleGroupItem
+              <Toggle
                 key={option.value}
                 value={option.value}
                 disabled={option.disabled}
@@ -488,7 +489,7 @@ export function ActionFormField({
                     </span>
                   )}
                 </span>
-              </ToggleGroupItem>
+              </Toggle>
             ))}
           </ToggleGroup>
         ) : (
@@ -502,7 +503,7 @@ export function ActionFormField({
               }
             }}
             variant="outline"
-            spacing={2}
+            mode="spaced"
             aria-labelledby={`${name}-label`}
             aria-required={effectiveKind.required}
             aria-invalid={errorMessage !== undefined}
@@ -510,7 +511,7 @@ export function ActionFormField({
             className="grid w-full grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] items-stretch gap-2"
           >
             {options.map((option) => (
-              <ToggleGroupItem
+              <Toggle
                 key={option.value}
                 value={option.value}
                 disabled={option.disabled}
@@ -527,7 +528,7 @@ export function ActionFormField({
                     </span>
                   )}
                 </span>
-              </ToggleGroupItem>
+              </Toggle>
             ))}
           </ToggleGroup>
         )

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

@@ -119,7 +119,7 @@ import {
   FieldLabel,
   type FieldSetVariant,
 } from "../primitives/field.tsx";
-import { Content } from "./content-header.tsx";
+import { Surface } from "./surface.tsx";
 import { Search } from "lucide-react";
 import { Select, type SelectOption } from "../primitives/select.tsx";
 import {
@@ -130,7 +130,8 @@ import {
   TableHeader,
   TableRow,
 } from "../primitives/table.tsx";
-import { ToggleGroup, ToggleGroupItem } from "../primitives/toggle-group.tsx";
+import { Toggle } from "../primitives/toggle.tsx";
+import { ToggleGroup } from "../primitives/toggle-group.tsx";
 import {
   Tooltip,
   TooltipContent,
@@ -348,7 +349,7 @@ export interface ActionListProps<TInput, TItem> {
   /**
    * `fill` ocupa a altura disponível e mantém a rolagem dentro da região de resultados.
    * Sem valor, vale `fill` quando o elemento pai repassa a altura de uma `Page` ou
-   * `Presentation` em `fill` — `PageBody`, `ContentBody` ou o corpo da Presentation — e
+   * `Presentation` em `fill` — `PageBody`, `SurfaceBody` ou o corpo da Presentation — e
    * `flow` nos demais casos (ADR 0024).
    */
   layout?: "flow" | "fill";
@@ -598,7 +599,7 @@ function FilterField({
     return (
       <ToggleGroup
         type="single"
-        variant="outline"
+        mode="segmented"
         id={`filter-${name}`}
         value={toggleValue}
         onValueChange={(next) => {
@@ -612,14 +613,12 @@ function FilterField({
         className={className ?? "max-w-full"}
       >
         {acceptsEmptyValue && (
-          <ToggleGroupItem value={ALL}>
-            {text(spec.placeholder, "Todos")}
-          </ToggleGroupItem>
+          <Toggle value={ALL}>{text(spec.placeholder, "Todos")}</Toggle>
         )}
         {base.map((option) => (
-          <ToggleGroupItem key={option.value} value={option.value}>
+          <Toggle key={option.value} value={option.value}>
             {option.content ?? option.label}
-          </ToggleGroupItem>
+          </Toggle>
         ))}
       </ToggleGroup>
     );
@@ -1047,7 +1046,7 @@ function PeriodControl({
             variant={embedded ? "ghost" : "outline"}
             data-slot="action-list-period"
             className={cn(
-              "relative max-w-full gap-1.5 overflow-hidden bg-muted/30 px-3 hover:bg-muted/30 hover:text-foreground dark:bg-input/30 dark:hover:bg-input/30",
+              "relative max-w-full gap-1.5 overflow-hidden bg-control px-3 hover:bg-interaction-hover hover:text-foreground",
               // O X e o chevron ocupam posições explícitas na ponta do controle. O
               // padding reserva os dois sem depender da largura do texto selecionado.
               clearable && "pr-16",
@@ -1271,23 +1270,20 @@ function AdvancedFiltersDialog({
         <DialogHeader>
           <DialogTitle>Filtros</DialogTitle>
         </DialogHeader>
-        <DialogBody className="space-y-4">
+        <DialogBody>
           {sectioned ? (
             sections.map(([section, entries]) => (
-              <Content
+              <Surface
                 key={section}
                 as="fieldset"
                 framed={sectionVariant === "framed"}
-                frameVariant={
-                  sectionVariant === "framed" ? "legend" : "default"
-                }
                 title={section}
                 media={sectionIcons?.[section]}
               >
                 <FieldGroup className={cn("grid gap-4", gridColumns)}>
                   {entries.map(field)}
                 </FieldGroup>
-              </Content>
+              </Surface>
             ))
           ) : (
             <FieldGroup className={cn("grid gap-4", gridColumns)}>
@@ -1485,7 +1481,7 @@ export function ActionFilterBar({
                   <div
                     data-slot="action-filter-period-group"
                     className={cn(
-                      "flex min-h-9 w-fit min-w-0 max-w-full items-center rounded-md border border-input bg-muted/30 text-foreground transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[0.1875rem] focus-within:ring-ring/50 has-[[data-state=open]]:border-ring has-[[data-state=open]]:ring-[0.1875rem] has-[[data-state=open]]:ring-ring/50 dark:bg-input/30",
+                      "flex min-h-9 w-fit min-w-0 max-w-full items-center rounded-md border border-input bg-control text-foreground transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[0.1875rem] focus-within:ring-ring/50 has-[[data-state=open]]:border-ring has-[[data-state=open]]:ring-[0.1875rem] has-[[data-state=open]]:ring-ring/50",
                       !periodGroupClearable && "pr-3",
                     )}
                   >
@@ -2035,9 +2031,9 @@ export function ActionList<TInput, TItem>({
                 {viewEntries.map(([key, label, icon]) => (
                   <Tooltip key={key}>
                     <TooltipTrigger asChild>
-                      <ToggleGroupItem value={key} aria-label={label}>
+                      <Toggle value={key} aria-label={label}>
                         {icon ?? label}
-                      </ToggleGroupItem>
+                      </Toggle>
                     </TooltipTrigger>
                     <TooltipContent>{label}</TooltipContent>
                   </Tooltip>

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

@@ -24,12 +24,15 @@ import { createPortal } from "react-dom";
 import { ArrowLeft } from "lucide-react";
 import { cn } from "../../lib/cn.ts";
 import { Button } from "../primitives/button.tsx";
-import { Content } from "./content-header.tsx";
+import { Surface } from "./surface.tsx";
 import {
   PageHeadingPresenceProvider,
   usePageHeadingPresence,
 } from "./page-heading-context.tsx";
-import { SurfaceHeader, surfaceHeaderClasses } from "./surface-header.tsx";
+import {
+  StructuralHeader,
+  structuralHeaderClasses,
+} from "./structural-header.tsx";
 import { PageState, PageStatePresenceProvider } from "./page-state.tsx";
 import { FillRoot, fillRegionClassName, useFillRegion } from "./fill-region.ts";
 
@@ -137,7 +140,7 @@ interface PageBaseProps extends Omit<
   className?: string;
   /**
    * `fill` limita a página à altura do shell para que regiões internas assumam a rolagem.
-   * A altura chega sozinha a uma `ActionList` composta por `PageBody` e `Content` (ADR 0024).
+   * A altura chega sozinha a uma `ActionList` composta por `PageBody` e `Surface` (ADR 0024).
    */
   layout?: "flow" | "fill";
 }
@@ -198,7 +201,7 @@ function countPageBodyHeadings(node: ReactNode): {
       return {
         content:
           total.content +
-          (child.type === Content && props.level === 1 ? 1 : 0) +
+          (child.type === Surface && props.level === 1 ? 1 : 0) +
           nested.content,
         state: total.state + nested.state,
       };
@@ -211,7 +214,7 @@ function hasOpaquePageBodyContent(node: ReactNode): boolean {
   return Children.toArray(node).some((child) => {
     if (!isValidElement(child)) return false;
     if (typeof child.type !== "string") {
-      return child.type !== Content && child.type !== PageState;
+      return child.type !== Surface && child.type !== PageState;
     }
     return hasOpaquePageBodyContent(
       (child.props as { children?: ReactNode }).children,
@@ -323,7 +326,7 @@ export function Page({
     );
     if (headingSources > 1 || (headingSources === 0 && !hasOpaqueBodyContent)) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, Content level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader, Surface level={1} ou PageState ativo dentro de PageBody.",
       );
     }
   }
@@ -332,7 +335,7 @@ export function Page({
     if (integralState !== hasActiveIntegralState) return;
     if (headingCount.current !== 1) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, Content level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader, Surface level={1} ou PageState ativo dentro de PageBody.",
       );
     }
   });
@@ -452,7 +455,7 @@ export function PageHeader({
   }
   return (
     <PageHeaderContext.Provider value>
-      <SurfaceHeader
+      <StructuralHeader
         name="PageHeader"
         slot="page"
         slots={{
@@ -472,7 +475,7 @@ export function PageHeader({
         )}
         {structuralChildren}
         {mergedActions}
-      </SurfaceHeader>
+      </StructuralHeader>
     </PageHeaderContext.Provider>
   );
 }
@@ -487,7 +490,7 @@ export function PageTitle({
   return (
     <h1
       data-slot="page-title"
-      className={cn(surfaceHeaderClasses.page.title, className)}
+      className={cn(structuralHeaderClasses.page.title, className)}
       {...props}
     />
   );
@@ -503,7 +506,7 @@ export function PageActions({
   const actions = (
     <div
       data-slot="page-actions"
-      className={cn(surfaceHeaderClasses.page.actions, className)}
+      className={cn(structuralHeaderClasses.page.actions, className)}
       {...props}
     />
   );
@@ -579,6 +582,7 @@ export function PageBody({
       data-slot="page-body"
       {...fill.attributes}
       className={cn(
+        "flex flex-col gap-6 *:shrink-0",
         (integralState || fill.filling) && fillRegionClassName,
         className,
       )}

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

@@ -1,45 +1,12 @@
 /**
- * Pane — a superfície encaixável de um Split: a coluna ou faixa que hospeda navegação,
- * lista ou conteúdo, com regiões fixas no topo e no rodapé e um corpo que rola.
+ * Pane — unidade dimensionável de um Split.
  *
- * Até a ADR 0023 esta família vivia partida: a raiz em `split.tsx`, os slots em
- * `sidebar.tsx`, sem validação entre eles e com padding assimétrico (header sem recuo,
- * footer com `p-2`). Agora raiz e slots moram aqui e derivam a anatomia da mesma tabela
- * das demais famílias.
- *
- *   <Pane>
- *     <PaneHeader><PaneMedia>…</PaneMedia><PaneTitle>Conversas</PaneTitle><PaneActions>…</PaneActions></PaneHeader>
- *     <PaneBody>…</PaneBody>
- *     <PaneFooter>…</PaneFooter>
- *   </Pane>
- *
- * `inset` continua existindo para o pane que NÃO usa slots — a caixa simples que recebe
- * conteúdo direto. Quando há slots, o recuo é de cada região, e o inset do pane vira
- * `none` sozinho: o divisor precisa alcançar a borda.
+ * Pane não é uma superfície visual: não aplica inset, borda, fundo, rolagem nem anatomia
+ * interna. O filho decide sua própria apresentação, normalmente com Surface ou Sidebar.
  */
-import {
-  Children,
-  Fragment,
-  isValidElement,
-  type CSSProperties,
-  type ReactElement,
-  type ReactNode,
-} from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 
 import { cn } from "../../lib/cn.ts";
-import { headingTags, type HeadingLevel } from "./heading-level.ts";
-import {
-  SurfaceLayoutProvider,
-  surfaceActionsClasses,
-  surfaceDescriptionClasses,
-  surfaceHeaderRowClasses,
-  surfaceRegionClasses,
-  surfaceTitleClasses,
-  useSurfaceLayout,
-  type SurfaceLayout,
-} from "./surface-anatomy.ts";
-import { SurfaceHeader } from "./surface-header.tsx";
-import { SurfaceMedia, type SurfaceMediaProps } from "./surface-media.tsx";
 
 export type PaneSize =
   | number
@@ -67,48 +34,15 @@ export interface PaneProps {
   maxSize?: PaneSize;
   /** Ocupa o espaço remanescente no layout simples. */
   grow?: boolean;
-  /**
-   * Respiro interno do pane sem slots. Com header, body ou footer como filhos DIRETOS o
-   * default passa a `none`, porque aí o recuo é de cada região. Quando os slots vêm
-   * dentro de outro componente — a `Sidebar`, por exemplo —, o pane não os enxerga:
-   * declare `inset="none"` você mesmo.
-   */
-  inset?: "none" | "sm" | "md" | "lg";
-  /** Anatomia das regiões: `sectioned` (default) ou `continuous` — ADR 0023. */
-  layout?: SurfaceLayout;
   className?: string;
   children: ReactNode;
 }
 
-const insets = { none: "", sm: "p-2", md: "p-4", lg: "p-6" } as const;
-
-/** Expande fragments de primeiro nível antes de procurar os slots. */
-function flatten(children: ReactNode): ReactNode[] {
-  return Children.toArray(children).flatMap((node) =>
-    isValidElement(node) && node.type === Fragment
-      ? Children.toArray((node.props as { children?: ReactNode }).children)
-      : [node],
-  );
-}
-
-function hasStructuralSlots(children: ReactNode): boolean {
-  return flatten(children).some(
-    (node) =>
-      isValidElement(node) &&
-      (node.type === PaneHeader ||
-        node.type === PaneBody ||
-        node.type === PaneContent ||
-        node.type === PaneFooter),
-  );
-}
-
-/** Um conteúdo encaixável. Sua posição é dada pela ordem dentro de <Split>. */
+/** Um conteúdo encaixável. Sua posição é dada pela ordem dentro de Split. */
 export function Pane({
   id,
   initialSize,
   grow = false,
-  inset,
-  layout = "sectioned",
   className,
   children,
 }: PaneProps): ReactElement {
@@ -116,177 +50,12 @@ export function Pane({
     initialSize === undefined
       ? undefined
       : { flexBasis: paneSizeToCss(initialSize) };
-  const structural = hasStructuralSlots(children);
-  const resolvedInset = inset ?? (structural ? "none" : "md");
-  return (
-    <SurfaceLayoutProvider value={layout}>
-      <div
-        id={id === undefined ? undefined : String(id)}
-        data-slot="pane"
-        data-inset={resolvedInset}
-        data-layout={layout}
-        className={cn(
-          "min-h-0 min-w-0 shrink-0",
-          grow && "flex-1",
-          // Com slots o pane é uma coluna: header fixo, corpo que rola, footer fixo.
-          structural && "flex flex-col",
-          insets[resolvedInset],
-          className,
-        )}
-        style={style}
-      >
-        {children}
-      </div>
-    </SurfaceLayoutProvider>
-  );
-}
-
-/** Faixa fixa no topo de um pane — marca, contexto ou ações locais. */
-export function PaneHeader({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">): ReactElement {
-  const layout = useSurfaceLayout("pane");
-  return (
-    <SurfaceHeader
-      name="PaneHeader"
-      slot="pane"
-      slots={{
-        media: PaneMedia,
-        title: PaneTitle,
-        description: PaneDescription,
-        actions: PaneActions,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      // O pane é a superfície genérica: além dos slots, o header hospeda marca, busca ou
-      // chrome que não são título nem ação (ADR 0023).
-      allowFreeContent
-      rowClassName={surfaceHeaderRowClasses("pane")}
-      className={cn(surfaceRegionClasses("pane", layout, "header"), className)}
-      {...props}
-    >
-      {children}
-    </SurfaceHeader>
-  );
-}
-
-/** Moldura de ícone ou imagem que abre a linha do header. */
-export function PaneMedia(props: SurfaceMediaProps): ReactElement {
-  return <SurfaceMedia slot="pane-media" size="xs" {...props} />;
-}
-
-export function PaneTitle({
-  className,
-  level = 2,
-  ...props
-}: React.ComponentProps<"h2"> & {
-  /** Hierarquia do documento (`h1`–`h6`). O tamanho vem do layout, nunca do nível. */
-  level?: HeadingLevel;
-}): ReactElement {
-  const layout = useSurfaceLayout("pane");
-  const Comp = headingTags[level];
-  return (
-    <Comp
-      data-slot="pane-title"
-      className={cn(
-        "min-w-0 truncate",
-        surfaceTitleClasses("pane", layout),
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function PaneDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">): ReactElement {
-  return (
-    <p
-      data-slot="pane-description"
-      className={cn("truncate", surfaceDescriptionClasses("pane"), className)}
-      {...props}
-    />
-  );
-}
-
-/** Ações do header — a família posiciona no extremo oposto ao título. */
-export function PaneActions({
-  className,
-  ...props
-}: React.ComponentProps<"div">): ReactElement {
-  return (
-    <div
-      data-slot="pane-actions"
-      className={cn(surfaceActionsClasses, className)}
-      {...props}
-    />
-  );
-}
-
-/** Região rolável que ocupa o espaço restante de um pane. */
-export function PaneBody({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">): ReactElement {
-  const layout = useSurfaceLayout("pane");
-  return (
-    <div
-      data-slot="pane-body"
-      className={cn(
-        "min-h-0 flex-1 overflow-y-auto",
-        surfaceRegionClasses("pane", layout, "body"),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** @deprecated Use PaneBody. Alias mantido para migração; sai numa próxima versão major. */
-export function PaneContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">): ReactElement {
-  const layout = useSurfaceLayout("pane");
-  return (
-    <div
-      data-slot="pane-content"
-      className={cn(
-        "min-h-0 flex-1 overflow-y-auto",
-        surfaceRegionClasses("pane", layout, "body"),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** Faixa fixa no rodapé de um pane para ações persistentes. */
-export function PaneFooter({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">): ReactElement {
-  const layout = useSurfaceLayout("pane");
   return (
     <div
-      data-slot="pane-footer"
-      className={cn(
-        "shrink-0",
-        surfaceRegionClasses("pane", layout, "footer"),
-        className,
-      )}
-      {...props}
+      id={id === undefined ? undefined : String(id)}
+      data-slot="pane"
+      className={cn("min-h-0 min-w-0 shrink-0", grow && "flex-1", className)}
+      style={style}
     >
       {children}
     </div>

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

@@ -75,12 +75,12 @@ import { ActionList, type ActionListState } from "./list.tsx";
 import { ActionTrigger } from "./trigger.tsx";
 import { ActionView } from "./view.tsx";
 import {
-  Content,
-  ContentActions,
-  ContentBody,
-  ContentHeader,
-  ContentTitle,
-} from "./content-header.tsx";
+  Surface,
+  SurfaceActions,
+  SurfaceBody,
+  SurfaceHeader,
+  SurfaceTitle,
+} from "./surface.tsx";
 import { SurfaceAssistant } from "./surface-assistant.tsx";
 import { fillRegionClassName, useFillRegion } from "./fill-region.ts";
 
@@ -221,17 +221,17 @@ function PresentationFrame({
   if (surface === "page") {
     if (listBody) {
       const content = (
-        <Content level={1}>
-          <ContentHeader>
-            <ContentTitle>{title}</ContentTitle>
+        <Surface as="section" level={1}>
+          <SurfaceHeader>
+            <SurfaceTitle>{title}</SurfaceTitle>
             {headerActions === undefined ? null : (
-              <ContentActions>
+              <SurfaceActions>
                 <PresentationActions>{headerActions}</PresentationActions>
-              </ContentActions>
+              </SurfaceActions>
             )}
-          </ContentHeader>
-          <ContentBody>{body}</ContentBody>
-        </Content>
+          </SurfaceHeader>
+          <SurfaceBody>{body}</SurfaceBody>
+        </Surface>
       );
       return (
         <Page