@softize/opus 22.2.0 → 24.0.0

package/src/ui/components/primitives/toggle-group.tsx

@@ -1,99 +1,141 @@
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
-import { toggleVariants } from './toggle.tsx'
+import { cn } from "../../lib/cn.ts";
+import type { ControlShape } from "./control.ts";
+import { Separator } from "./separator.tsx";
+import {
+  ToggleGroupContext,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+} from "./toggle-group-context.ts";
+import { toggleVariants } from "./toggle.tsx";
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    shape?: ControlShape
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-  shape: "default",
-})
+const horizontalInactiveSegmentDivider = [
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:relative",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:ml-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:absolute",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-left-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:top-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:h-4",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:w-[0.0625rem]",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-translate-y-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:bg-muted-foreground/35",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:content-['']",
+];
+
+const verticalInactiveSegmentDivider = [
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:relative",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:mt-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:absolute",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-top-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:left-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:h-[0.0625rem]",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:w-4",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-translate-x-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:bg-muted-foreground/35",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:content-['']",
+];
 
-type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
   VariantProps<typeof toggleVariants> & {
-    'data-slot'?: string
-    'data-state'?: string
-  }
+    mode?: ToggleGroupMode;
+    distribution?: ToggleGroupDistribution;
+    framed?: boolean;
+    shape?: ControlShape;
+  };
 
 function ToggleGroup({
   className,
   variant,
   size,
-  spacing = 0,
+  mode = "connected",
+  distribution = "content",
+  framed = false,
+  orientation = "horizontal",
   shape = "default",
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    shape?: ControlShape
-  }) {
+}: ToggleGroupProps) {
+  const effectiveSize = size ?? "default";
+  const controls = React.Children.toArray(children);
+  const content =
+    mode === "divided"
+      ? controls.flatMap((child, index) => {
+          const childKey = React.isValidElement(child) ? child.key : index;
+          return [
+            ...(index === 0
+              ? []
+              : [
+                  <Separator
+                    key={`toggle-group-separator-${childKey ?? index}`}
+                    data-slot="toggle-group-separator"
+                    orientation={
+                      orientation === "horizontal" ? "vertical" : "horizontal"
+                    }
+                    className="m-0! self-center bg-input"
+                    style={
+                      orientation === "horizontal"
+                        ? {
+                            flex: "none",
+                            width: "0.0625rem",
+                            height: "1.25rem",
+                          }
+                        : {
+                            flex: "none",
+                            width: "1.25rem",
+                            height: "0.0625rem",
+                          }
+                    }
+                  />,
+                ]),
+            child,
+          ];
+        })
+      : children;
+
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
+      data-size={effectiveSize}
+      data-mode={mode}
       data-shape={shape}
-      style={{ "--gap": spacing } as React.CSSProperties}
+      data-distribution={distribution}
+      data-framed={framed}
+      orientation={orientation}
       className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[shape=pill]:rounded-full",
-        className
+        "group/toggle-group flex w-fit items-stretch",
+        orientation === "vertical" && "flex-col",
+        mode === "connected" && "gap-0",
+        (mode === "spaced" || mode === "divided") && "gap-1",
+        mode === "segmented" &&
+          "gap-0.5 rounded-lg bg-interaction-hover p-0.5 text-muted-foreground",
+        mode === "segmented" &&
+          (orientation === "horizontal"
+            ? horizontalInactiveSegmentDivider
+            : verticalInactiveSegmentDivider),
+        distribution === "equal" &&
+          "w-full [&>[data-slot=toggle-group-item]]:min-w-0 [&>[data-slot=toggle-group-item]]:w-full [&>[data-slot=toggle-group-item]]:flex-1",
+        framed && "rounded-xl border p-1",
+        shape === "pill" && "rounded-full",
+        className,
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing, shape }}>
-        {children}
+      <ToggleGroupContext.Provider
+        value={{ mode, orientation, variant, size: effectiveSize, shape }}
+      >
+        {content}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  shape,
-  'data-slot': _composedSlot,
-  'data-state': _composedState,
-  ...props
-}: ToggleGroupItemProps) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      data-item-shape={shape}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-          shape: shape ?? context.shape,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        "group-data-[shape=pill]/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-[shape=pill]/toggle-group:data-[spacing=0]:last:rounded-r-full",
-        "data-[item-shape=pill]:data-[spacing=0]:rounded-full",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
+  );
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export {
+  ToggleGroup,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+  type ToggleGroupProps,
+};

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

@@ -1,13 +1,17 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Toggle as TogglePrimitive } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Toggle as TogglePrimitive,
+  ToggleGroup as ToggleGroupPrimitive,
+} from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import { controlHeight, focusRing } from './control.ts'
+import { cn } from "../../lib/cn.ts";
+import { controlHeight, focusRing } from "./control.ts";
+import { ToggleGroupContext } from "./toggle-group-context.ts";
 
 const toggleVariants = cva(
   [
-    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-context-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-interaction-hover hover:text-muted-foreground active:bg-interaction-pressed disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=on]:bg-interaction-selected data-[state=on]:text-accent-foreground dark:aria-invalid:ring-context-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     focusRing,
   ],
   {
@@ -15,7 +19,7 @@ const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected data-[state=on]:text-foreground",
       },
       // Alturas da escala de control.ts (`sm` = o mesmo h-8 de Button e Select).
       size: {
@@ -24,8 +28,8 @@ const toggleVariants = cva(
         lg: `${controlHeight.lg} min-w-10 px-2.5`,
       },
       shape: {
-        default: '',
-        pill: 'rounded-full',
+        default: "",
+        pill: "rounded-full",
       },
     },
     defaultVariants: {
@@ -33,25 +37,87 @@ const toggleVariants = cva(
       size: "default",
       shape: "default",
     },
-  }
-)
+  },
+);
+
+type ToggleProps = (
+  | React.ComponentProps<typeof TogglePrimitive.Root>
+  | React.ComponentProps<typeof ToggleGroupPrimitive.Item>
+) &
+  VariantProps<typeof toggleVariants> & {
+    "data-slot"?: string;
+    "data-state"?: string;
+  };
 
 function Toggle({
   className,
   variant,
   size,
   shape,
+  "data-slot": _composedSlot,
+  "data-state": _composedState,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: ToggleProps) {
+  const group = React.useContext(ToggleGroupContext);
+  const effectiveVariant = group?.variant ?? variant;
+  const effectiveSize = group?.size ?? size;
+  const effectiveShape = shape ?? group?.shape;
+
+  if (group !== null) {
+    const itemProps = props as React.ComponentProps<
+      typeof ToggleGroupPrimitive.Item
+    >;
+    if (typeof itemProps.value !== "string" || itemProps.value.length === 0) {
+      throw new Error("Toggle dentro de ToggleGroup exige value.");
+    }
+
+    return (
+      <ToggleGroupPrimitive.Item
+        data-slot="toggle-group-item"
+        data-variant={effectiveVariant}
+        data-size={effectiveSize}
+        data-mode={group.mode}
+        data-item-shape={shape}
+        className={cn(
+          toggleVariants({
+            variant: effectiveVariant,
+            size: effectiveSize,
+            shape: effectiveShape,
+          }),
+          "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+          group.mode === "connected" &&
+            group.orientation === "horizontal" && [
+              "rounded-none shadow-none first:rounded-l-md last:rounded-r-md data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+              "group-data-[shape=pill]/toggle-group:first:rounded-l-full group-data-[shape=pill]/toggle-group:last:rounded-r-full",
+              "data-[item-shape=pill]:rounded-full",
+            ],
+          group.mode === "connected" &&
+            group.orientation === "vertical" && [
+              "rounded-none shadow-none first:rounded-t-md last:rounded-b-md data-[variant=outline]:border-t-0 data-[variant=outline]:first:border-t",
+              "group-data-[shape=pill]/toggle-group:first:rounded-t-full group-data-[shape=pill]/toggle-group:last:rounded-b-full",
+            ],
+          (group.mode === "spaced" || group.mode === "divided") &&
+            "group-data-[shape=pill]/toggle-group:rounded-full",
+          group.mode === "segmented" &&
+            "rounded-md text-muted-foreground hover:bg-interaction-selected hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-card data-[state=on]:text-card-foreground data-[state=on]:shadow-sm group-data-[shape=pill]/toggle-group:rounded-full",
+          group.mode === "segmented" && effectiveSize === "sm" && "h-7",
+          group.mode === "segmented" && effectiveSize === "default" && "h-8",
+          group.mode === "segmented" && effectiveSize === "lg" && "h-9",
+          className,
+        )}
+        {...itemProps}
+      />
+    );
+  }
+
   return (
     <TogglePrimitive.Root
       data-slot="toggle"
       data-shape={shape}
       className={cn(toggleVariants({ variant, size, shape, className }))}
-      {...props}
+      {...(props as React.ComponentProps<typeof TogglePrimitive.Root>)}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, type ToggleProps, toggleVariants };

package/src/ui/docs/DocBrowser.tsx

@@ -12,40 +12,39 @@
  * Nos dois, navegar emite `popstate`: host que guarda o path por conta própria acompanha.
  * `basePath` adapta o prefixo das URLs (`/docs` no Maestro, `/__docs` nos apps).
  */
-import { useEffect, useState } from 'react'
-import { DOC_SECTIONS, type DocSection, type DocEntry } from './registry'
-import { Pane, Split } from '../components/patterns/split.tsx'
+import { useEffect, useState } from "react";
+import { DOC_SECTIONS, type DocSection, type DocEntry } from "./registry";
+import { Pane, Split } from "../components/patterns/split.tsx";
 import {
-  PaneBody,
   Sidebar,
   SidebarGroupLabel,
   SidebarItem,
   SidebarTreeGroup,
-} from '../components/patterns/sidebar.tsx'
-import { navigate, usePathname } from '../router.ts'
+} from "../components/patterns/sidebar.tsx";
+import { navigate, usePathname } from "../router.ts";
 
 function findPage(sections: DocSection[], slug: string): DocEntry | undefined {
   for (const s of sections) {
     for (const g of s.groups) {
-      const p = g.pages.find((p) => p.slug === slug)
-      if (p) return p
+      const p = g.pages.find((p) => p.slug === slug);
+      if (p) return p;
     }
   }
-  return undefined
+  return undefined;
 }
 
 export interface DocBrowserProps {
   /** Prefixo das rotas da doc. Default `/docs` (Maestro); `/__docs` na rota dev dos apps. */
-  basePath?: string
+  basePath?: string;
   /** Path controlado pelo host (modo Maestro). Ausente = standalone (gerencia o próprio). */
-  path?: string
+  path?: string;
   /** Seções a exibir (seção → grupo → página). Default = catálogo inteiro. */
-  sections?: DocSection[]
+  sections?: DocSection[];
   /** Slugs antigos que devem abrir e substituir a URL pela página canônica. */
-  redirects?: Readonly<Record<string, string>>
+  redirects?: Readonly<Record<string, string>>;
   /** Monta o `document.title` a partir do título da página atual (ex.: `(t) => `${t} · Opus``).
    *  Ausente = não mexe no title. */
-  documentTitle?: (pageTitle: string) => string
+  documentTitle?: (pageTitle: string) => string;
 }
 
 function DocSidebarTree({
@@ -53,67 +52,75 @@ function DocSidebarTree({
   activeSlug,
   onSelect,
 }: {
-  sections: DocSection[]
-  activeSlug?: string
-  onSelect: (slug: string) => void
+  sections: DocSection[];
+  activeSlug?: string;
+  onSelect: (slug: string) => void;
 }): React.ReactElement {
-  const [closedGroups, setClosedGroups] = useState<Set<string>>(() => new Set())
+  const [closedGroups, setClosedGroups] = useState<Set<string>>(
+    () => new Set(),
+  );
 
   useEffect(() => {
-    const activeGroup = sections.flatMap((section, sectionIndex) =>
-      section.groups.map((group, groupIndex) => ({
-        key: `${sectionIndex}:${groupIndex}`,
-        group,
-      })),
-    ).find(({ group }) => group.pages.some((page) => page.slug === activeSlug))
+    const activeGroup = sections
+      .flatMap((section, sectionIndex) =>
+        section.groups.map((group, groupIndex) => ({
+          key: `${sectionIndex}:${groupIndex}`,
+          group,
+        })),
+      )
+      .find(({ group }) =>
+        group.pages.some((page) => page.slug === activeSlug),
+      );
 
-    if (activeGroup === undefined) return
+    if (activeGroup === undefined) return;
     setClosedGroups((current) => {
-      if (!current.has(activeGroup.key)) return current
-      const next = new Set(current)
-      next.delete(activeGroup.key)
-      return next
-    })
-  }, [activeSlug, sections])
+      if (!current.has(activeGroup.key)) return current;
+      const next = new Set(current);
+      next.delete(activeGroup.key);
+      return next;
+    });
+  }, [activeSlug, sections]);
 
   const toggleGroup = (key: string): void => {
     setClosedGroups((current) => {
-      const next = new Set(current)
-      if (next.has(key)) next.delete(key)
-      else next.add(key)
-      return next
-    })
-  }
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
 
   const renderPage = (page: DocEntry): React.ReactElement => (
     <SidebarItem
       key={page.slug}
       label={page.title}
-      badge={page.badge === undefined ? undefined : (
-        <span className="rounded border border-border/60 px-1 font-mono text-[0.625rem] leading-tight text-muted-foreground/60">
-          {page.badge}
-        </span>
-      )}
+      badge={
+        page.badge === undefined ? undefined : (
+          <span className="rounded border border-border/60 px-1 font-mono text-[0.625rem] leading-tight text-muted-foreground/60">
+            {page.badge}
+          </span>
+        )
+      }
       active={page.slug === activeSlug}
       onClick={() => onSelect(page.slug)}
     />
-  )
+  );
 
   return (
     <nav aria-label="Navegação da documentação" className="space-y-4 p-2">
       {sections.map((section, sectionIndex) => (
         <div key={`${section.label}:${sectionIndex}`} className="space-y-0.5">
-          {section.label.trim() !== '' && (
+          {section.label.trim() !== "" && (
             <SidebarGroupLabel>{section.label}</SidebarGroupLabel>
           )}
           {section.groups.map((group, groupIndex) => {
-            const key = `${sectionIndex}:${groupIndex}`
-            if (group.pages.length === 0) return null
-            if ((group.label ?? '').trim() === '') {
-              return group.pages.map((page) => renderPage(page))
+            const key = `${sectionIndex}:${groupIndex}`;
+            if (group.pages.length === 0) return null;
+            if ((group.label ?? "").trim() === "") {
+              return group.pages.map((page) => renderPage(page));
             }
 
-            const expanded = !closedGroups.has(key)
+            const expanded = !closedGroups.has(key);
             return (
               <div key={key} className="space-y-0.5">
                 <SidebarItem
@@ -129,16 +136,16 @@ function DocSidebarTree({
                   </SidebarTreeGroup>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       ))}
     </nav>
-  )
+  );
 }
 
 export function DocBrowser({
-  basePath = '/docs',
+  basePath = "/docs",
   path: controlledPath,
   sections = DOC_SECTIONS,
   redirects = {},
@@ -147,46 +154,47 @@ export function DocBrowser({
   // Standalone: o path vem do router da casa (`usePathname` — pathname É o estado).
   // Controlado: o host manda, e este valor é ignorado. O hook roda sempre (regra dos
   // hooks); o que muda é quem vence no `??`.
-  const livePath = usePathname()
-  const path = controlledPath ?? livePath
+  const livePath = usePathname();
+  const path = controlledPath ?? livePath;
   // Default = 1ª página do 1º grupo da 1ª seção (a doc abre na 1ª página).
-  const defaultSlug = sections[0]?.groups[0]?.pages[0]?.slug ?? ''
+  const defaultSlug = sections[0]?.groups[0]?.pages[0]?.slug ?? "";
   // Slug = TODOS os segmentos após o basePath, unidos (rota aninhada: `/docs/guias/deploy`
   // → `guias/deploy`). Slug flat de 1 segmento continua igual (`join` de 1 elemento = ele).
-  const rel = path.startsWith(basePath) ? path.slice(basePath.length) : ''
-  const requestedSlug = rel.split('/').filter(Boolean).join('/') || defaultSlug
-  const slug = redirects[requestedSlug] ?? requestedSlug
-  const page = findPage(sections, slug) ?? findPage(sections, defaultSlug)
+  const rel = path.startsWith(basePath) ? path.slice(basePath.length) : "";
+  const requestedSlug = rel.split("/").filter(Boolean).join("/") || defaultSlug;
+  const slug = redirects[requestedSlug] ?? requestedSlug;
+  const page = findPage(sections, slug) ?? findPage(sections, defaultSlug);
 
   // `navigate` emite `popstate`, então o host é notificado nos dois modos — inclusive o
   // que ainda escuta o evento na unha, que era como este componente avisava antes.
-  const go = (to: string): void => navigate(to)
+  const go = (to: string): void => navigate(to);
 
   useEffect(() => {
-    if (requestedSlug !== slug) navigate(`${basePath}/${slug}`, { replace: true })
-  }, [basePath, requestedSlug, slug])
+    if (requestedSlug !== slug)
+      navigate(`${basePath}/${slug}`, { replace: true });
+  }, [basePath, requestedSlug, slug]);
 
   // O title da aba acompanha a página atual (quando o host fornece o formato).
   useEffect(() => {
-    if (page && documentTitle) document.title = documentTitle(page.title)
-  }, [page, documentTitle])
+    if (page && documentTitle) document.title = documentTitle(page.title);
+  }, [page, documentTitle]);
 
   return (
     <Split className="h-full">
-      <Pane initialSize="14rem" inset="none">
+      <Pane initialSize="14rem">
         <Sidebar className="w-full">
-          <PaneBody>
+          <div className="min-h-0 flex-1 overflow-y-auto px-3 py-6">
             <DocSidebarTree
               sections={sections}
               activeSlug={page?.slug}
               onSelect={(nextSlug) => go(`${basePath}/${nextSlug}`)}
             />
-          </PaneBody>
+          </div>
         </Sidebar>
       </Pane>
-      <Pane key={page?.slug} grow inset="none" className="overflow-y-auto">
+      <Pane key={page?.slug} grow className="overflow-y-auto">
         <div className="mx-auto max-w-3xl px-8 py-8">{page?.render()}</div>
       </Pane>
     </Split>
-  )
+  );
 }

package/src/ui/docs/content/action-form-card.md

@@ -1,7 +1,7 @@
 ## Formulário em uma seção
 
 Use `ActionFormCard` quando o formulário ocupar uma seção delimitada da página, ao lado de outros
-blocos. O componente aplica a estrutura e o espaçamento de [`Card`](/ui/card) ao
+blocos. O componente aplica a estrutura e o espaçamento de [`Surface`](/ui/surface) ao
 [`ActionForm`](/ui/action-form), sem a faixa de ações de um modal. O título é opcional e segue a
 mesma regra de um formulário modal: nomeia a operação e o recurso, como `Criar workspace`, enquanto
 a ação principal mantém `Salvar`.
@@ -16,7 +16,7 @@ As ações ficam alinhadas no fim do rodapé e preservam a largura do conteúdo.
 acrescenta `Cancelar`, os dois botões formam um `ButtonGroup` espaçado. Para interromper o fluxo
 com um modal, use [`ActionFormDialog`](/ui/action-form-dialog).
 
-O título do card é um heading `h3`, o nível padrão de `CardTitle`, adequado a uma seção dentro de
+O título do card é um heading `h3`, o nível padrão de `SurfaceTitle`, adequado a uma seção dentro de
 uma página que já tem o próprio título. Quando o card ocupar outro lugar na hierarquia — por
 exemplo, a seção principal logo abaixo do `h1` da página —, declare `titleLevel={2}`. O nível muda
 só a estrutura do documento, que leitores de tela usam para navegar; a aparência do título continua
@@ -24,11 +24,11 @@ a mesma.
 
 ## Propriedades de ActionFormCard
 
-| Propriedade        | Tipo                         | Padrão | Descrição                                                                                                                     |
-| ------------------ | ---------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------- |
-| `title`            | `string`                     |        | Título do cabeçalho. Sem ele e sem `description`, o card começa diretamente pelo corpo.                                       |
-| `titleLevel`       | `1 \| 2 \| 3 \| 4 \| 5 \| 6`    | `3`    | Nível do heading do título. Muda a hierarquia do documento, não a escala visual.                                              |
-| `description`      | `string`                     |        | Texto de apoio abaixo do título.                                                                                              |
-| `cardClassName`    | `string`                     |        | Classes aplicadas à superfície do card.                                                                                       |
-| `className`        | `string`                     |        | Classes aplicadas ao `<form>` interno.                                                                                        |
+| Propriedade         | Tipo                         | Padrão | Descrição                                                                                                                                                                                                                                                                   |
+| ------------------- | ---------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`             | `string`                     |        | Título do cabeçalho. Sem ele e sem `description`, o card começa diretamente pelo corpo.                                                                                                                                                                                     |
+| `titleLevel`        | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3`    | Nível do heading do título. Muda a hierarquia do documento, não a escala visual.                                                                                                                                                                                            |
+| `description`       | `string`                     |        | Texto de apoio abaixo do título.                                                                                                                                                                                                                                            |
+| `cardClassName`     | `string`                     |        | Classes aplicadas à superfície do card.                                                                                                                                                                                                                                     |
+| `className`         | `string`                     |        | Classes aplicadas ao `<form>` interno.                                                                                                                                                                                                                                      |
 | Demais propriedades | Propriedades de `ActionForm` |        | `action`, `defaultValues`, `fieldOptions`, `submitLabel`, `cancelLabel`, `cancelVariant`, `onCancel`, `onSuccess`, `disabled`, `onLoadingChange` e `children` mantêm o comportamento de `ActionForm`. `body` e `footer` não são aceitas: o card fornece o corpo e o rodapé. |