@softize/opus 22.2.0 → 24.0.0

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} variant="page">
-          <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

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

@@ -8,18 +8,6 @@ import { ChevronRight } from "lucide-react";
 import { useOverflowing } from "../../lib/overflow.ts";
 import { cn } from "../../lib/cn.ts";
 
-// Os slots de Pane moram em `pane.tsx` desde a ADR 0023. A Sidebar continua sendo uma
-// das superfícies que os compõe, então reexporta o que antes definia.
-export {
-  PaneActions,
-  PaneBody,
-  PaneContent,
-  PaneDescription,
-  PaneFooter,
-  PaneHeader,
-  PaneMedia,
-  PaneTitle,
-} from "./pane.tsx";
 import { focusRing } from "../primitives/control.ts";
 import {
   Tooltip,
@@ -127,8 +115,8 @@ export function SidebarItem({
           "outline-none",
           focusRing,
           active
-            ? "bg-muted font-medium text-foreground"
-            : "text-foreground/80 hover:bg-muted/60",
+            ? "bg-interaction-selected font-medium text-foreground"
+            : "text-foreground/80 hover:bg-interaction-hover",
         )}
       >
         <span
@@ -159,8 +147,10 @@ export function SidebarItem({
       data-slot="sidebar-item"
       className={cn(
         "group/sidebar-item relative flex items-center rounded-md transition-colors",
-        disabled ? "text-muted-foreground/50 opacity-40" : "hover:bg-muted/60",
-        active && "bg-muted",
+        disabled
+          ? "text-muted-foreground/50 opacity-40"
+          : "hover:bg-interaction-hover",
+        active && "bg-interaction-selected",
         dropPosition === "inside" &&
           "bg-primary/5 ring-2 ring-inset ring-primary/60",
         className,
@@ -333,7 +323,7 @@ export function SidebarTreeGroup({
   );
 }
 
-/** Navegação controlada para Sidebar. Header/footer continuam slots explícitos do pai. */
+/** Navegação controlada para Sidebar. Chrome adicional pertence à composição hospedeira. */
 export function SidebarNav({
   groups,
   activeId,

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

@@ -1,33 +1,43 @@
-import { Children, cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react'
-import { cn } from '../../lib/cn.ts'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../primitives/resizable.tsx'
-import { Pane, paneSizeToCss, type PaneProps, type PaneSize } from './pane.tsx'
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "../../lib/cn.ts";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "../primitives/resizable.tsx";
+import { Pane, paneSizeToCss, type PaneProps, type PaneSize } from "./pane.tsx";
 
-// A família Pane mora em `pane.tsx` desde a ADR 0023; o Split continua sendo sua casa
-// pública, então reexporta o que já era importado daqui.
-export { Pane, PaneActions, PaneBody, PaneContent, PaneDescription, PaneFooter, PaneHeader, PaneMedia, PaneTitle } from './pane.tsx'
-export type { PaneProps, PaneSize }
+// Pane é a unidade espacial de Split; sua apresentação pertence ao filho (ADR 0047).
+export { Pane } from "./pane.tsx";
+export type { PaneProps, PaneSize };
 
-export type SplitLayout = Record<string, number>
+export type SplitLayout = Record<string, number>;
 export interface SplitLayoutChange {
-  isUserInteraction: boolean
+  isUserInteraction: boolean;
 }
 
 export interface SplitProps {
   /** Identidade estável do grupo redimensionável. */
-  id?: string
-  direction?: 'horizontal' | 'vertical'
+  id?: string;
+  direction?: "horizontal" | "vertical";
   /** Quando ligado, cada fronteira ganha um separador acessível e arrastável. */
-  resizable?: boolean
-  handle?: boolean
+  resizable?: boolean;
+  handle?: boolean;
   /** Layout percentual restaurado, indexado pelos ids dos panes. */
-  defaultLayout?: SplitLayout
+  defaultLayout?: SplitLayout;
   /** Chamado ao concluir uma mudança de layout; pode persistir o resultado em localStorage. */
-  onLayoutChanged?: (layout: SplitLayout, meta: SplitLayoutChange) => void
-  className?: string
+  onLayoutChanged?: (layout: SplitLayout, meta: SplitLayoutChange) => void;
+  className?: string;
   /** Identificador semântico opcional para testes e composição de patterns. */
-  'data-slot'?: string
-  children: ReactNode
+  "data-slot"?: string;
+  children: ReactNode;
 }
 
 /**
@@ -35,27 +45,36 @@ export interface SplitProps {
  * `Children.toArray` numera as chaves por nível, então o filho de um fragment herda a
  * chave do fragment como prefixo — sem isso, `.0` de dentro colidiria com `.0` de fora.
  */
-function flattenFragments(children: ReactNode, prefix = ''): ReactNode[] {
+function flattenFragments(children: ReactNode, prefix = ""): ReactNode[] {
   return Children.toArray(children).flatMap((node): ReactNode[] => {
     if (isValidElement(node) && node.type === Fragment)
-      return flattenFragments((node.props as { children?: ReactNode }).children, `${prefix}${String(node.key)}/`)
-    if (prefix !== '' && isValidElement(node)) return [cloneElement(node, { key: `${prefix}${String(node.key)}` })]
-    return [node]
-  })
+      return flattenFragments(
+        (node.props as { children?: ReactNode }).children,
+        `${prefix}${String(node.key)}/`,
+      );
+    if (prefix !== "" && isValidElement(node))
+      return [cloneElement(node, { key: `${prefix}${String(node.key)}` })];
+    return [node];
+  });
 }
 
 /** Nome legível do filho recusado, para a mensagem apontar o nó certo. */
 function describeChild(node: ReactNode): string {
-  if (typeof node === 'string' || typeof node === 'number' || typeof node === 'bigint') {
-    const text = String(node).trim()
-    return `o texto "${text.length > 40 ? `${text.slice(0, 40)}…` : text}"`
+  if (
+    typeof node === "string" ||
+    typeof node === "number" ||
+    typeof node === "bigint"
+  ) {
+    const text = String(node).trim();
+    return `o texto "${text.length > 40 ? `${text.slice(0, 40)}…` : text}"`;
   }
   if (isValidElement(node)) {
-    const type = node.type as string | { displayName?: string; name?: string }
-    const name = typeof type === 'string' ? type : (type.displayName ?? type.name ?? '')
-    return name === '' ? 'um componente sem nome' : `<${name}>`
+    const type = node.type as string | { displayName?: string; name?: string };
+    const name =
+      typeof type === "string" ? type : (type.displayName ?? type.name ?? "");
+    return name === "" ? "um componente sem nome" : `<${name}>`;
   }
-  return 'um nó que não é elemento React'
+  return "um nó que não é elemento React";
 }
 
 /**
@@ -65,27 +84,27 @@ function describeChild(node: ReactNode): string {
  */
 function panesOf(children: ReactNode): ReactElement<PaneProps>[] {
   return flattenFragments(children).flatMap((child) => {
-    if (isValidElement<PaneProps>(child) && child.type === Pane) return [child]
+    if (isValidElement<PaneProps>(child) && child.type === Pane) return [child];
     // Espaço em branco (um `{' '}` da formatação) não é conteúdo: nunca ocupou lugar.
-    if (typeof child === 'string' && child.trim() === '') return []
+    if (typeof child === "string" && child.trim() === "") return [];
     throw new Error(
       `Split recebeu ${describeChild(child)} como filho, mas só distribui <Pane>: esse conteúdo ficaria fora do layout. ` +
-        'Envolva-o em um <Pane>. Se ele vem de um componente que devolve um <Pane>, escreva o <Pane> dentro do Split e ' +
-        'passe o componente como filho dele: o Split lê o tamanho de cada pane antes de renderizá-lo.',
-    )
-  })
+        "Envolva-o em um <Pane>. Se ele vem de um componente que devolve um <Pane>, escreva o <Pane> dentro do Split e " +
+        "passe o componente como filho dele: o Split lê o tamanho de cada pane antes de renderizá-lo.",
+    );
+  });
 }
 
 // Números continuam percentuais por compatibilidade com Split/Pane. Strings preservam
 // a unidade explícita para layouts que precisam de um limite físico, como `28rem`.
 function resizableSize(value: PaneSize | undefined): string | undefined {
-  return value === undefined ? undefined : paneSizeToCss(value)
+  return value === undefined ? undefined : paneSizeToCss(value);
 }
 
 function percentage(value: PaneSize | undefined): number | undefined {
-  if (typeof value === 'number') return value
-  if (value?.endsWith('%')) return Number.parseFloat(value)
-  return undefined
+  if (typeof value === "number") return value;
+  if (value?.endsWith("%")) return Number.parseFloat(value);
+  return undefined;
 }
 
 /**
@@ -95,31 +114,47 @@ function percentage(value: PaneSize | undefined): number | undefined {
  */
 export function Split({
   id,
-  direction = 'horizontal',
+  direction = "horizontal",
   resizable = false,
   handle = false,
   defaultLayout,
   onLayoutChanged,
   className,
-  'data-slot': dataSlot = 'split',
+  "data-slot": dataSlot = "split",
   children,
 }: SplitProps): React.ReactElement {
-  const panes = panesOf(children)
-  const vertical = direction === 'vertical'
+  const panes = panesOf(children);
+  const vertical = direction === "vertical";
 
   if (!resizable) {
     return (
-      <div id={id === undefined ? undefined : String(id)} data-slot={dataSlot} data-direction={direction} className={cn('flex min-h-0 min-w-0 flex-1', vertical && 'flex-col', className)}>
+      <div
+        id={id === undefined ? undefined : String(id)}
+        data-slot={dataSlot}
+        data-direction={direction}
+        className={cn(
+          "flex min-h-0 min-w-0 flex-1",
+          vertical && "flex-col",
+          className,
+        )}
+      >
         {panes}
       </div>
-    )
+    );
   }
 
-  const fixed = panes.reduce((sum, pane) => sum + (percentage(pane.props.initialSize) ?? 0), 0)
-  const hasAbsoluteSize = panes.some((pane) => typeof pane.props.initialSize === 'string' && !pane.props.initialSize.endsWith('%'))
-  const growing = panes.filter((pane) => pane.props.grow)
-  const rest = Math.max(0, 100 - fixed)
-  const fallback = panes.length === 0 ? 100 : 100 / panes.length
+  const fixed = panes.reduce(
+    (sum, pane) => sum + (percentage(pane.props.initialSize) ?? 0),
+    0,
+  );
+  const hasAbsoluteSize = panes.some(
+    (pane) =>
+      typeof pane.props.initialSize === "string" &&
+      !pane.props.initialSize.endsWith("%"),
+  );
+  const growing = panes.filter((pane) => pane.props.grow);
+  const rest = Math.max(0, 100 - fixed);
+  const fallback = panes.length === 0 ? 100 : 100 / panes.length;
 
   return (
     <ResizablePanelGroup
@@ -128,11 +163,16 @@ export function Split({
       defaultLayout={defaultLayout}
       onLayoutChanged={onLayoutChanged}
       data-slot={dataSlot}
-      className={cn('min-h-0 min-w-0 flex-1', className)}
+      className={cn("min-h-0 min-w-0 flex-1", className)}
     >
       {panes.flatMap((pane, index) => {
-        const size = pane.props.initialSize
-          ?? (hasAbsoluteSize ? undefined : pane.props.grow ? rest / Math.max(1, growing.length) : fallback)
+        const size =
+          pane.props.initialSize ??
+          (hasAbsoluteSize
+            ? undefined
+            : pane.props.grow
+              ? rest / Math.max(1, growing.length)
+              : fallback);
         const panel = (
           <ResizablePanel
             key={pane.key ?? index}
@@ -141,11 +181,23 @@ export function Split({
             minSize={resizableSize(pane.props.minSize)}
             maxSize={resizableSize(pane.props.maxSize)}
           >
-            <Pane {...pane.props} id={undefined} className={cn('h-full w-full', pane.props.className)} />
+            <Pane
+              {...pane.props}
+              id={undefined}
+              className={cn("h-full w-full", pane.props.className)}
+            />
           </ResizablePanel>
-        )
-        return index === 0 ? [panel] : [<ResizableHandle key={`handle-${pane.key ?? index}`} withHandle={handle} />, panel]
+        );
+        return index === 0
+          ? [panel]
+          : [
+              <ResizableHandle
+                key={`handle-${pane.key ?? index}`}
+                withHandle={handle}
+              />,
+              panel,
+            ];
       })}
     </ResizablePanelGroup>
-  )
+  );
 }