@softize/opus 15.2.2 → 16.1.0

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

@@ -0,0 +1,539 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Braces, X } from "lucide-react";
+import type {
+  PresentationDiagnostic,
+  PresentationDefinition,
+  PresentationInvocation,
+  PresentationSurface,
+} from "../../../core/presentation.ts";
+import { createPresentationInspectionSnapshot } from "../../../core/presentation.ts";
+import { cn } from "../../lib/cn.ts";
+import { Button, buttonVariants } from "../primitives/button.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
+import { Copyable } from "../primitives/copyable.tsx";
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../primitives/dialog.tsx";
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuTrigger,
+} from "../primitives/menu.tsx";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "../primitives/drawer.tsx";
+import {
+  Page,
+  PageActions,
+  PageBody,
+  PageFooter,
+  PageHeader,
+  PageIntro,
+  PageNavigation,
+  PageTitle,
+  useInsidePageShell,
+} from "./page.tsx";
+
+interface PresentationBaseProps {
+  surface: PresentationSurface;
+  title: ReactNode;
+  navigation?: ReactNode;
+  headerActions?: ReactNode;
+  footerActions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+}
+
+export type PresentationProps = PresentationBaseProps &
+  (
+    | { open?: undefined; onOpenChange?: (open: boolean) => void }
+    | { open: boolean; onOpenChange: (open: boolean) => void }
+  );
+
+const bodyClassName =
+  "h-full min-h-full [&>[data-slot=data-state]]:flex [&>[data-slot=data-state]]:min-h-full [&>[data-slot=data-state]]:items-center [&>[data-slot=data-state]]:justify-center";
+
+function PresentationActions({
+  children,
+  equal = false,
+}: {
+  children: ReactNode;
+  equal?: boolean;
+}) {
+  return (
+    <ButtonGroup mode="spaced" distribution={equal ? "equal" : "content"}>
+      {children}
+    </ButtonGroup>
+  );
+}
+
+function CloseAction({
+  surface,
+}: {
+  surface: "dialog" | "drawer";
+}): ReactElement {
+  const button = (
+    <Button size="icon-sm" variant="ghost" aria-label="Fechar">
+      <X aria-hidden />
+    </Button>
+  );
+  return surface === "dialog" ? (
+    <DialogClose asChild>{button}</DialogClose>
+  ) : (
+    <DrawerClose asChild>{button}</DrawerClose>
+  );
+}
+
+/** A mesma Presentation em Page, Dialog ou Drawer; a superfície não redefine o recurso. */
+export function Presentation({
+  surface,
+  title,
+  navigation,
+  headerActions,
+  footerActions,
+  children,
+  open,
+  onOpenChange,
+  className,
+  bodyClassName: bodyClassNameProp,
+}: PresentationProps): ReactElement {
+  const insidePageShell = useInsidePageShell();
+  const [internalOpen, setInternalOpen] = useState(true);
+  const modalOpen = open ?? internalOpen;
+  function handleOpenChange(nextOpen: boolean): void {
+    if (open === undefined) setInternalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }
+  const body = (
+    <div
+      data-slot="presentation-body"
+      className={cn(bodyClassName, bodyClassNameProp)}
+    >
+      {children}
+    </div>
+  );
+
+  if (surface === "page") {
+    if (insidePageShell) {
+      return (
+        <Page className={cn("flex min-h-full flex-col", className)}>
+          <PageIntro>
+            {navigation === undefined ? null : (
+              <PageNavigation>{navigation}</PageNavigation>
+            )}
+            <PageTitle>{title}</PageTitle>
+            {headerActions === undefined ? null : (
+              <PageActions>
+                <PresentationActions>{headerActions}</PresentationActions>
+              </PageActions>
+            )}
+          </PageIntro>
+          <PageBody className="min-h-0 flex-1 overflow-y-auto">{body}</PageBody>
+          {footerActions === undefined ? null : (
+            <PageFooter>
+              <PresentationActions>{footerActions}</PresentationActions>
+            </PageFooter>
+          )}
+        </Page>
+      );
+    }
+    return (
+      <Page
+        className={cn(
+          "flex min-h-full max-w-none flex-col space-y-0 px-0 py-0",
+          className,
+        )}
+      >
+        <PageHeader className="border-b px-3 py-4">
+          {navigation === undefined ? null : (
+            <PageNavigation>{navigation}</PageNavigation>
+          )}
+          <PageTitle className="text-lg leading-none">{title}</PageTitle>
+          {headerActions === undefined ? null : (
+            <PageActions>
+              <PresentationActions>{headerActions}</PresentationActions>
+            </PageActions>
+          )}
+        </PageHeader>
+        <PageBody className="min-h-0 flex-1 overflow-y-auto px-8 py-8">
+          {body}
+        </PageBody>
+        {footerActions === undefined ? null : (
+          <PageFooter>
+            <PresentationActions>{footerActions}</PresentationActions>
+          </PageFooter>
+        )}
+      </Page>
+    );
+  }
+
+  if (surface === "dialog") {
+    return (
+      <Dialog open={modalOpen} onOpenChange={handleOpenChange}>
+        <DialogContent
+          className={className}
+          showCloseButton={false}
+          aria-describedby={undefined}
+        >
+          <DialogHeader>
+            <div className="flex items-center justify-between gap-4">
+              {navigation}
+              <DialogTitle className="min-w-0 flex-1 truncate">
+                {title}
+              </DialogTitle>
+              <PresentationActions>
+                {headerActions}
+                <CloseAction surface="dialog" />
+              </PresentationActions>
+            </div>
+          </DialogHeader>
+          <DialogBody className={bodyClassNameProp}>{body}</DialogBody>
+          {footerActions === undefined ? null : (
+            <DialogFooter>
+              <PresentationActions equal>{footerActions}</PresentationActions>
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer open={modalOpen} onOpenChange={handleOpenChange}>
+      <DrawerContent
+        className={className}
+        showCloseButton={false}
+        aria-describedby={undefined}
+      >
+        <DrawerHeader>
+          <div className="flex items-center justify-between gap-4">
+            {navigation}
+            <DrawerTitle className="min-w-0 flex-1 truncate">
+              {title}
+            </DrawerTitle>
+            <PresentationActions>
+              {headerActions}
+              <CloseAction surface="drawer" />
+            </PresentationActions>
+          </div>
+        </DrawerHeader>
+        <DrawerBody className={bodyClassNameProp}>{body}</DrawerBody>
+        {footerActions === undefined ? null : (
+          <DrawerFooter>
+            <PresentationActions equal>{footerActions}</PresentationActions>
+          </DrawerFooter>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+export interface PresentationInspectorProps {
+  definition: PresentationDefinition | unknown;
+  invocation?: PresentationInvocation | unknown;
+  resolved?: unknown;
+  diagnostics?: readonly PresentationDiagnostic[];
+  triggerLabel?: string;
+  title?: string;
+  /** Apresenta o gatilho como FAB; o consumidor continua responsável por posicioná-lo. */
+  floating?: boolean;
+  className?: string;
+}
+
+export interface PresentationRegistration
+  extends Pick<
+    PresentationInspectorProps,
+    "invocation" | "resolved" | "diagnostics"
+  > {
+  definition: PresentationDefinition;
+  /** Retira temporariamente a Presentation do inventário ativo sem desmontar o consumidor. */
+  enabled?: boolean;
+}
+
+interface ActivePresentationRegistration
+  extends Omit<PresentationRegistration, "enabled"> {
+  key: string;
+}
+
+interface PresentationRegistrationContextValue {
+  upsert: (key: string, registration: ActivePresentationRegistration) => void;
+  remove: (key: string) => void;
+}
+
+interface PresentationDevtoolsContextValue {
+  keys: readonly string[];
+  read: (key: string) => ActivePresentationRegistration | undefined;
+}
+
+const PresentationRegistrationContext =
+  createContext<PresentationRegistrationContextValue | null>(null);
+const PresentationDevtoolsContext =
+  createContext<PresentationDevtoolsContextValue | null>(null);
+
+export interface PresentationDevtoolsProviderProps {
+  children: ReactNode;
+}
+
+/** Mantém o inventário das Presentations montadas para uma única ferramenta do shell. */
+export function PresentationDevtoolsProvider({
+  children,
+}: PresentationDevtoolsProviderProps): ReactElement {
+  const registrations = useRef(
+    new Map<string, ActivePresentationRegistration>(),
+  );
+  const [keys, setKeys] = useState<readonly string[]>([]);
+  const upsert = useCallback(
+    (key: string, registration: ActivePresentationRegistration): void => {
+      const exists = registrations.current.has(key);
+      registrations.current.set(key, registration);
+      if (!exists) setKeys((current) => [...current, key]);
+    },
+    [],
+  );
+  const remove = useCallback((key: string): void => {
+    if (!registrations.current.delete(key)) return;
+    setKeys((current) => current.filter((candidate) => candidate !== key));
+  }, []);
+  const read = useCallback(
+    (key: string) => registrations.current.get(key),
+    [],
+  );
+  const registration = useMemo(() => ({ upsert, remove }), [upsert, remove]);
+  const devtools = useMemo(() => ({ keys, read }), [keys, read]);
+
+  return (
+    <PresentationRegistrationContext.Provider value={registration}>
+      <PresentationDevtoolsContext.Provider value={devtools}>
+        {children}
+      </PresentationDevtoolsContext.Provider>
+    </PresentationRegistrationContext.Provider>
+  );
+}
+
+/** Anuncia um snapshot ao provider mais próximo; fora dele, permanece inofensivo. */
+export function usePresentationRegistration({
+  definition,
+  invocation,
+  resolved,
+  diagnostics,
+  enabled = true,
+}: PresentationRegistration): void {
+  const context = useContext(PresentationRegistrationContext);
+  const upsert = context?.upsert;
+  const remove = context?.remove;
+  const key = useId();
+
+  // Sem dependências de propósito: os dados podem mudar mantendo a mesma Presentation.
+  // `upsert` substitui o snapshot em memória sem provocar um ciclo de render.
+  useEffect(() => {
+    if (upsert === undefined || !enabled) {
+      remove?.(key);
+      return;
+    }
+    upsert(key, { key, definition, invocation, resolved, diagnostics });
+  });
+
+  useEffect(
+    () => () => {
+      remove?.(key);
+    },
+    [key, remove],
+  );
+}
+
+interface SelectedPresentation {
+  key: string;
+  title: string;
+  json: string;
+}
+
+export interface PresentationDevtoolsProps {
+  /** Nome acessível e tooltip do launcher. */
+  triggerLabel?: string;
+  className?: string;
+}
+
+/** Launcher único do shell para escolher e inspecionar qualquer Presentation ativa. */
+export function PresentationDevtools({
+  triggerLabel = "Inspecionar Presentations ativas",
+  className,
+}: PresentationDevtoolsProps): ReactElement | null {
+  const registry = useContext(PresentationDevtoolsContext);
+  const [selected, setSelected] = useState<SelectedPresentation | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const registrations =
+    registry?.keys.flatMap((key) => {
+      const registration = registry.read(key);
+      return registration === undefined ? [] : [registration];
+    }) ?? [];
+
+  useEffect(() => {
+    if (selected !== null && !registry?.keys.includes(selected.key)) {
+      setSelected(null);
+    }
+  }, [registry?.keys, selected]);
+
+  if (registrations.length === 0) return null;
+
+  function inspect(key: string): void {
+    const registration = registry?.read(key);
+    if (registration === undefined) return;
+    const json =
+      JSON.stringify(createPresentationInspectionSnapshot(registration), null, 2) ??
+      "null";
+    setSelected({ key, title: registration.definition.title, json });
+  }
+
+  return (
+    <>
+      <Menu open={menuOpen} onOpenChange={setMenuOpen}>
+        <MenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="outline"
+            data-slot="presentation-devtools"
+            data-appearance="fab"
+            className={cn("rounded-full shadow-md", className)}
+            aria-label={triggerLabel}
+            title={triggerLabel}
+          >
+            <Braces aria-hidden />
+          </Button>
+        </MenuTrigger>
+        <MenuContent side="left" align="center" className="min-w-64">
+          <MenuLabel>Presentations ativas</MenuLabel>
+          {[...registrations].reverse().map((registration) => (
+            <MenuItem key={registration.key} onSelect={() => inspect(registration.key)}>
+              <span className="min-w-0 flex-1 truncate">
+                {registration.definition.title}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {registration.invocation === undefined ||
+                registration.invocation === null ||
+                typeof registration.invocation !== "object" ||
+                !("surface" in registration.invocation)
+                  ? "Presentation"
+                  : String(registration.invocation.surface)}
+              </span>
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Menu>
+      {selected === null ? null : (
+        <Dialog open onOpenChange={(open) => !open && setSelected(null)}>
+          <DialogContent className="sm:max-w-3xl" aria-describedby={undefined}>
+            <DialogHeader>
+              <DialogTitle>{selected.title}</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <pre className="max-h-[65vh] overflow-auto rounded-lg bg-muted p-4 text-xs leading-relaxed">
+                {selected.json}
+              </pre>
+            </DialogBody>
+            <DialogFooter>
+              <Copyable
+                value={selected.json}
+                className={buttonVariants({ variant: "outline" })}
+              >
+                Copiar JSON
+              </Copyable>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+/** Ferramenta de desenvolvimento para conferir e copiar o artefato consumido pelo renderer. */
+export function PresentationInspector({
+  definition,
+  invocation,
+  resolved,
+  diagnostics,
+  triggerLabel = "Ver JSON da Presentation",
+  title = "JSON da Presentation",
+  floating = false,
+  className,
+}: PresentationInspectorProps): ReactElement {
+  const [open, setOpen] = useState(false);
+  const [json, setJson] = useState<string | null>(null);
+
+  function inspect(): void {
+    const snapshot = createPresentationInspectionSnapshot({
+      definition,
+      invocation,
+      resolved,
+      diagnostics,
+    });
+    setJson(JSON.stringify(snapshot, null, 2) ?? "null");
+    setOpen(true);
+  }
+
+  function handleOpenChange(nextOpen: boolean): void {
+    setOpen(nextOpen);
+    if (!nextOpen) setJson(null);
+  }
+
+  return (
+    <>
+      <Button
+        size={floating ? "icon" : "icon-sm"}
+        variant={floating ? "outline" : "ghost"}
+        data-appearance={floating ? "fab" : "inline"}
+        className={cn(floating && "rounded-full shadow-md", className)}
+        aria-label={triggerLabel}
+        title={triggerLabel}
+        onClick={inspect}
+      >
+        <Braces aria-hidden />
+      </Button>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-3xl" aria-describedby={undefined}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <pre className="max-h-[65vh] overflow-auto rounded-lg bg-muted p-4 text-xs leading-relaxed">
+              {json ?? ""}
+            </pre>
+          </DialogBody>
+          <DialogFooter>
+            <Copyable
+              value={json ?? ""}
+              className={buttonVariants({ variant: "outline" })}
+            >
+              Copiar JSON
+            </Copyable>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -48,7 +48,7 @@ export function Sidebar({
         className={cn(
           "group/sidebar flex h-full min-h-0 shrink-0 flex-col transition-[width] duration-200 ease-out",
           divider && "border-r border-border",
-          collapsed ? "w-14" : "w-64",
+          collapsed ? "w-16" : "w-64",
           className,
         )}
       >
@@ -182,7 +182,7 @@ export function SidebarItem({
         aria-current={active ? "page" : undefined}
         onClick={onClick}
         className={cn(
-          "mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40",
+          "mx-auto grid size-10 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40",
           "outline-none",
           focusRing,
           active
@@ -423,7 +423,7 @@ export function SidebarNav({
     <nav
       aria-label={navLabel}
       data-slot="sidebar-nav"
-      className={cn("space-y-4 p-2", className)}
+      className={cn("space-y-4 p-3", className)}
     >
       {groups.map((group, gi) =>
         !groupFilled(group) ? null : (

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

@@ -13,7 +13,7 @@
  */
 
 import type { ReactNode } from 'react'
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import type { SimpleContract } from '../../../core/index.ts'
 import { useTriggerAction } from '../../drivers/react.tsx'
 import { toast } from '../primitives/sonner.tsx'
@@ -23,9 +23,9 @@ import { Button, type ButtonProps } from '../primitives/button.tsx'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
 import {
   Dialog,
+  DialogBody,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -59,7 +59,8 @@ export interface ActionTriggerProps<TInput, TData> {
    *  contrato — declarativo). Sem nenhum dos dois, dispara direto. */
   confirm?: {
     title: string
-    description?: string
+    /** Conteúdo relevante apresentado antes das ações. */
+    body?: ReactNode
     actionLabel?: string
     cancelLabel?: string
   }
@@ -88,6 +89,7 @@ export function ActionTrigger<TInput, TData>({
   itemLabel,
   className,
 }: ActionTriggerProps<TInput, TData>) {
+  const confirmBodyId = useId()
   const [open, setOpen] = useState(false)
   const { trigger, isLoading } = useTriggerAction(action, {
     onSuccess: (data) => {
@@ -98,7 +100,9 @@ export function ActionTrigger<TInput, TData>({
     onError: (err) => {
       // A frase de negócio do servidor vence o rótulo do contrato (ver lib/action-errors.ts);
       // fora da allowlist, vale o rótulo — nunca o texto técnico cru.
-      toast.error(humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível concluir.')))
+      toast.error(
+        humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível concluir.')),
+      )
     },
   })
 
@@ -111,9 +115,13 @@ export function ActionTrigger<TInput, TData>({
     (spec !== undefined
       ? {
           title: msgText(spec.title, 'Confirmar?'),
-          ...(spec.message !== undefined ? { description: msgText(spec.message, '') } : {}),
-          ...(spec.confirmLabel !== undefined ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) } : {}),
-          ...(spec.cancelLabel !== undefined ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') } : {}),
+          ...(spec.message !== undefined ? { body: msgText(spec.message, '') } : {}),
+          ...(spec.confirmLabel !== undefined
+            ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) }
+            : {}),
+          ...(spec.cancelLabel !== undefined
+            ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') }
+            : {}),
         }
       : undefined)
   const destructive = spec?.destructive === true
@@ -126,7 +134,8 @@ export function ActionTrigger<TInput, TData>({
    *   botão é sempre `solid` — não herda o `variant` do gatilho, que descreve o item, não a
    *   decisão.
    */
-  const triggerContext = context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
+  const triggerContext =
+    context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
   const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : 'solid')
   const confirmContext = destructive ? 'danger' : (context ?? 'primary')
   const confirmVariant = 'solid'
@@ -173,24 +182,36 @@ export function ActionTrigger<TInput, TData>({
       {renderButton(() => setOpen(true))}
 
       <Dialog mode="alert" open={open} onOpenChange={setOpen}>
-        <DialogContent data-action={action.name}>
+        <DialogContent
+          data-action={action.name}
+          aria-describedby={
+            itemLabel !== undefined || confirm.body !== undefined ? confirmBodyId : undefined
+          }
+        >
           <DialogHeader>
             <DialogTitle>{confirm.title}</DialogTitle>
-            {(itemLabel !== undefined || confirm.description !== undefined) && (
-              <DialogDescription>
-                {itemLabel !== undefined && <span className="font-medium text-foreground">“{itemLabel}”</span>}
-                {itemLabel !== undefined && confirm.description !== undefined ? ' — ' : ''}
-                {confirm.description}
-              </DialogDescription>
-            )}
           </DialogHeader>
+          {(itemLabel !== undefined || confirm.body !== undefined) && (
+            <DialogBody id={confirmBodyId} className="text-sm text-muted-foreground">
+              {itemLabel !== undefined && (
+                <span className="font-medium text-foreground">“{itemLabel}”</span>
+              )}
+              {itemLabel !== undefined && confirm.body !== undefined ? ' — ' : ''}
+              {confirm.body}
+            </DialogBody>
+          )}
           <DialogFooter>
             <DialogClose initialFocus asChild>
               <Button context="neutral" variant="ghost" disabled={isLoading}>
                 {confirm.cancelLabel ?? 'Cancelar'}
               </Button>
             </DialogClose>
-            <Button context={confirmContext} variant={confirmVariant} busy={isLoading} onClick={fire}>
+            <Button
+              context={confirmContext}
+              variant={confirmVariant}
+              busy={isLoading}
+              onClick={fire}
+            >
               {confirm.actionLabel ?? buttonLabel}
             </Button>
           </DialogFooter>