@softize/opus 17.1.0 → 18.0.0

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

@@ -68,6 +68,13 @@ import { ActionForm } from "./form.tsx";
 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";
 
 interface PresentationFrameProps {
   surface: PresentationSurface;
@@ -82,6 +89,7 @@ interface PresentationFrameProps {
   onOpenChange?: (open: boolean) => void;
   className?: string;
   bodyClassName?: string;
+  listBody?: boolean;
 }
 
 const bodyClassName =
@@ -115,6 +123,7 @@ function PresentationFrame({
   onOpenChange,
   className,
   bodyClassName: bodyClassNameProp,
+  listBody = false,
 }: PresentationFrameProps): ReactElement {
   const insidePageShell = useInsidePageShell();
   const [footerTarget, setFooterTarget] = useState<HTMLElement | null>(null);
@@ -122,9 +131,7 @@ function PresentationFrame({
     setFooterTarget(node);
   }, []);
   const hasFooter = hasBodyFooter || footerActions !== undefined;
-  const renderFooterActions = (
-    equal = false,
-  ): ReactElement => (
+  const renderFooterActions = (equal = false): ReactElement => (
     <PresentationActions equal={equal}>
       {hasBodyFooter ? (
         <span
@@ -145,19 +152,49 @@ function PresentationFrame({
   );
 
   if (surface === "page") {
-    if (insidePageShell) {
-      return (
-        <Page className={cn("flex min-h-full flex-col", className)}>
-          <PageHeader>
-            {navigation === undefined ? null : (
-              <PageNavigation>{navigation}</PageNavigation>
-            )}
+    if (listBody) {
+      const content = (
+        <Content level={1} variant="page">
+          <ContentHeader>
+            <ContentTitle>{title}</ContentTitle>
             {headerActions === undefined ? null : (
-              <PageActions>
+              <ContentActions>
                 <PresentationActions>{headerActions}</PresentationActions>
-              </PageActions>
+              </ContentActions>
             )}
-          </PageHeader>
+          </ContentHeader>
+          <ContentBody>{body}</ContentBody>
+        </Content>
+      );
+      return (
+        <Page className={cn("flex min-h-full flex-col", className)}>
+          {navigation === undefined ? null : (
+            <PageHeader>
+              <PageNavigation>{navigation}</PageNavigation>
+            </PageHeader>
+          )}
+          <PageBody className="min-h-0 flex-1 overflow-y-auto">
+            {content}
+          </PageBody>
+          {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
+        </Page>
+      );
+    }
+    if (insidePageShell) {
+      return (
+        <Page className={cn("flex min-h-full flex-col", className)}>
+          {navigation === undefined && headerActions === undefined ? null : (
+            <PageHeader>
+              {navigation === undefined ? null : (
+                <PageNavigation>{navigation}</PageNavigation>
+              )}
+              {headerActions === undefined ? null : (
+                <PageActions>
+                  <PresentationActions>{headerActions}</PresentationActions>
+                </PageActions>
+              )}
+            </PageHeader>
+          )}
           <PageIntro>
             <PageTitle>{title}</PageTitle>
           </PageIntro>
@@ -173,7 +210,7 @@ function PresentationFrame({
           className,
         )}
       >
-        <PageHeader className="border-b px-3 py-4">
+        <PageHeader>
           {navigation === undefined ? null : (
             <PageNavigation>{navigation}</PageNavigation>
           )}
@@ -220,7 +257,9 @@ function PresentationFrame({
             )}
           </DialogHeader>
           <DialogBody>{body}</DialogBody>
-          {hasFooter ? <DialogFooter>{renderFooterActions(true)}</DialogFooter> : null}
+          {hasFooter ? (
+            <DialogFooter>{renderFooterActions(true)}</DialogFooter>
+          ) : null}
         </DialogContent>
       </Dialog>
     );
@@ -253,7 +292,9 @@ function PresentationFrame({
           )}
         </DrawerHeader>
         <DrawerBody>{body}</DrawerBody>
-        {hasFooter ? <DrawerFooter>{renderFooterActions(true)}</DrawerFooter> : null}
+        {hasFooter ? (
+          <DrawerFooter>{renderFooterActions(true)}</DrawerFooter>
+        ) : null}
       </DrawerContent>
     </Drawer>
   );
@@ -370,18 +411,25 @@ export function Presentation({
       effects: PresentationDefinition["body"]["onSuccess"],
       result?: unknown,
     ): void => {
-      const next = applyPresentationEffects(invocation, effects, {
-        ...context,
-        ...(result !== undefined && result !== null && typeof result === "object"
-          ? { result: result as Record<string, unknown> }
-          : {}),
-      });
+      const next = applyPresentationEffects(
+        invocation,
+        effects,
+        {
+          ...context,
+          ...(result !== undefined &&
+          result !== null &&
+          typeof result === "object"
+            ? { result: result as Record<string, unknown> }
+            : {}),
+        },
+        definitions,
+      );
       for (const action of next.refresh) onRefresh?.(action);
       if (next.invocation !== invocation || next.exit !== undefined) {
         onInvocationChange?.(next.invocation);
       }
     },
-    [context, invocation, onInvocationChange, onRefresh],
+    [context, definitions, invocation, onInvocationChange, onRefresh],
   );
 
   const closeSurface = useCallback((): void => {
@@ -419,14 +467,16 @@ export function Presentation({
     bindings: PresentationCommand["input"],
     targetContext: PresentationBindingContext = context,
   ): void => {
-    const target = definitions.find((candidate) => candidate.id === presentationId);
+    const target = definitions.find(
+      (candidate) => candidate.id === presentationId,
+    );
     if (target === undefined) {
       throw new Error(`Presentation “${presentationId}” não registrada.`);
     }
     onInvocationChange?.(
       openPresentation(invocation, {
         presentationId: target.id,
-        surface: surface ?? invocation.surface,
+        surface: surface ?? target.route?.surface ?? invocation.surface,
         input: resolvePresentationBindings(bindings, targetContext) as Record<
           string,
           PresentationJsonValue
@@ -435,7 +485,10 @@ export function Presentation({
     );
   };
 
-  const renderCommand = (command: PresentationCommand): ReactElement => {
+  const renderCommand = (
+    command: PresentationCommand,
+    size: ButtonSize = "default",
+  ): ReactElement => {
     const action = actions[command.action];
     if (action === undefined) {
       throw new Error(`Action “${command.action}” não registrada.`);
@@ -447,7 +500,6 @@ export function Presentation({
     // Header e footer são regiões de decisão da superfície, não toolbars operacionais.
     // Seus comandos textuais usam a linha padrão; listas e grids continuam donos da
     // densidade compacta de suas próprias ações.
-    const size: ButtonSize = "default";
     if (action.kind === "simple") {
       return (
         <PresentationCommandTrigger
@@ -467,6 +519,7 @@ export function Presentation({
         `A action “${command.action}” precisa declarar uma Presentation de destino.`,
       );
     }
+    const label = actionLabel(action);
     return (
       <Button
         key={`${command.placement}:${command.action}`}
@@ -480,7 +533,7 @@ export function Presentation({
           )
         }
       >
-        {actionLabel(action)}
+        {label}
       </Button>
     );
   };
@@ -500,11 +553,8 @@ export function Presentation({
           action={bodyAction as FormContract<Record<string, unknown>, unknown>}
           defaultValues={bodyInput}
           submitLabel={definition.body.submitLabel}
-          onCancel={
-            invocation.surface === "page"
-              ? undefined
-              : closeSurface
-          }
+          onCancel={invocation.surface === "page" ? undefined : closeSurface}
+          cancelVariant="outline"
           onSuccess={(data) => applyEffects(definition.body.onSuccess, data)}
           disabled={hasSurfaceBlock}
           onLoadingChange={setBodyLoading}
@@ -516,76 +566,79 @@ export function Presentation({
     }
     if (bodyAction.kind === "list") {
       return (
-      <ActionList<Record<string, unknown>, Record<string, unknown>>
-        action={bodyAction as ListContract<
-          Record<string, unknown>,
-          Record<string, unknown>
-        >}
-        input={bodyInput}
-        state={listState}
-        onStateChange={onListStateChange}
-        {...(definition.body.open === undefined
-          ? {}
-          : {
-              onRowClick: (item: Record<string, unknown>) =>
-                openTarget(
-                  definition.body.open!.presentation,
-                  definition.body.open!.surface,
-                  definition.body.open!.input,
-                  { ...context, item },
-                ),
-            })}
-      />
+        <ActionList<Record<string, unknown>, Record<string, unknown>>
+          action={
+            bodyAction as ListContract<
+              Record<string, unknown>,
+              Record<string, unknown>
+            >
+          }
+          input={bodyInput}
+          state={listState}
+          onStateChange={onListStateChange}
+          {...(definition.body.open === undefined
+            ? {}
+            : {
+                onRowClick: (item: Record<string, unknown>) =>
+                  openTarget(
+                    definition.body.open!.presentation,
+                    definition.body.open!.surface,
+                    definition.body.open!.input,
+                    { ...context, item },
+                  ),
+              })}
+        />
       );
     }
     if (bodyAction.kind === "view") {
       const fields = definition.body.fields ?? [];
       return (
-      <ActionView
-        action={bodyAction as ViewContract<Record<string, unknown>, unknown>}
-        input={bodyInput}
-      >
-        {(data) => (
-          <DetailGroup>
-            {fields.map((field) => (
-              <DetailField
-                key={field.key}
-                label={field.label}
-                value={readField(data, field.key) as ReactNode}
-                empty={field.empty}
-              />
-            ))}
-          </DetailGroup>
-        )}
-      </ActionView>
+        <ActionView
+          action={bodyAction as ViewContract<Record<string, unknown>, unknown>}
+          input={bodyInput}
+        >
+          {(data) => (
+            <DetailGroup>
+              {fields.map((field) => (
+                <DetailField
+                  key={field.key}
+                  label={field.label}
+                  value={readField(data, field.key) as ReactNode}
+                  empty={field.empty}
+                />
+              ))}
+            </DetailGroup>
+          )}
+        </ActionView>
       );
     }
-    throw new Error(`A action simple “${bodyAction.name}” não pode ocupar o body.`);
+    throw new Error(
+      `A action simple “${bodyAction.name}” não pode ocupar o body.`,
+    );
   };
 
   const headerActions = definition.actions
     .filter((command) => command.placement === "header")
-    .map(renderCommand);
+    .map((command) => renderCommand(command));
   const footerActions = definition.actions
     .filter((command) => command.placement === "footer")
-    .map(renderCommand);
+    .map((command) => renderCommand(command));
   const parentSurface = invocation.stack.at(-1)?.surface;
   const canGoBack =
     parentSurface !== undefined &&
     (invocation.surface === "page" || parentSurface !== "page");
-  const navigation =
-    !canGoBack ? undefined : (
-      <Button
-        size="icon-sm"
-        variant="ghost"
-        disabled={surfaceBlocked}
-        aria-label="Voltar"
-        title="Voltar"
-        onClick={() => applyEffects([{ effect: "back" }])}
-      >
-        <ArrowLeft aria-hidden />
-      </Button>
-    );
+  const navigation = !canGoBack ? undefined : (
+    <Button
+      size="icon-sm"
+      variant="ghost"
+      disabled={surfaceBlocked}
+      aria-label="Voltar"
+      title="Voltar"
+      onClick={() => applyEffects([{ effect: "back" }])}
+    >
+      <ArrowLeft aria-hidden />
+    </Button>
+  );
 
   return (
     <PresentationFrame
@@ -606,6 +659,7 @@ export function Presentation({
       bodyClassName={bodyClassNameProp}
       hasBodyFooter={bodyAction.kind === "form"}
       blocked={surfaceBlocked}
+      listBody={bodyAction.kind === "list"}
     >
       {renderBody}
     </PresentationFrame>

package/src/ui/components/patterns/surface-header.tsx

@@ -25,7 +25,7 @@ export const surfaceHeaderClasses: Record<
   { title: string; description: string; count: string; actions: string }
 > = {
   page: {
-    title: "text-2xl font-semibold tracking-tight",
+    title: "text-3xl font-semibold tracking-tight",
     description: "mt-1 truncate text-sm text-muted-foreground",
     count: "font-mono text-base text-muted-foreground/60",
     actions: "flex w-full shrink-0 items-center gap-4 sm:w-auto",
@@ -129,7 +129,9 @@ export function SurfaceHeader({
     // dois erros é a quantidade de tipos distintos presentes — dois PageBack são repetição,
     // não combinação, e merecem a mensagem genérica.
     const distinctLeading = new Set(
-      leading.flatMap((node) => (isValidElement(node) ? [node.type as ElementType] : [])),
+      leading.flatMap((node) =>
+        isValidElement(node) ? [node.type as ElementType] : [],
+      ),
     );
     throw new Error(
       distinctLeading.size > 1
@@ -159,10 +161,7 @@ export function SurfaceHeader({
         // wrapper assume o min-content do breadcrumb e a compressão toda cai sobre o título.
         <div
           data-slot={`${slot}-navigation`}
-          className={cn(
-            "flex min-w-0 items-center",
-            !heading && "flex-1",
-          )}
+          className={cn("flex min-w-0 items-center", !heading && "flex-1")}
         >
           {leading}
         </div>