@softize/opus 30.0.0 → 31.1.0

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

@@ -1,3 +1,29 @@
+import { useViewAction, useListAction } from "../../drivers/react.tsx";
+import { DataState } from "./data-state.tsx";
+import { dictionaryDescriptor } from "../../../core/dictionary.ts";
+import { objectSchemaShape } from "../../lib/object-schema.ts";
+import {
+  canAccessPresentation,
+  meetsPresentationRequirement,
+} from "../../../core/presentation.ts";
+import {
+  PresentationSwitch,
+  presentationTextCell,
+  PresentationFormFields,
+  PresentationViewSections,
+} from "./presentation-fields.tsx";
+import { PageState } from "./page-state.tsx";
+import {
+  Tabs,
+  TabsList,
+  TabsListItem,
+  TabsPanel,
+} from "../primitives/tabs.tsx";
+import {
+  PresentationSections,
+  type PresentationCompositionRuntime,
+} from "./presentation-sections.tsx";
+import { ArrowLeft, Braces, MessageCircle } from "lucide-react";
 import {
   useCallback,
   useEffect,
@@ -6,14 +32,19 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
-import { ArrowLeft, Braces, MessageCircle } from "lucide-react";
 import type {
-  PresentationActionRegistry,
+  FormContract,
+  ListContract,
+  SimpleContract,
+  ViewContract,
+} from "../../../core/contracts.ts";
+import type {
   PresentationActionBody,
+  PresentationActionRegistry,
   PresentationBindingContext,
   PresentationCommand,
-  PresentationDiagnostic,
   PresentationDefinition,
+  PresentationDiagnostic,
   PresentationInvocation,
   PresentationJsonValue,
   PresentationSurface,
@@ -22,22 +53,25 @@ import {
   applyPresentationEffects,
   createPresentationInspectionSnapshot,
   isPresentationActionBody,
+  isPresentationComponentBody,
+  isPresentationSectionsBody,
+  isPresentationTabsBody,
+  matchesPresentationConditions,
   openPresentation,
   resolvePresentationBindings,
 } from "../../../core/presentation.ts";
-import type {
-  FormContract,
-  ListContract,
-  SimpleContract,
-  ViewContract,
-} from "../../../core/contracts.ts";
 import { cn } from "../../lib/cn.ts";
+import { ButtonGroup } from "../primitives/button-group.tsx";
 import {
   Button,
   buttonVariants,
   type ButtonSize,
 } from "../primitives/button.tsx";
-import { ButtonGroup } from "../primitives/button-group.tsx";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "../primitives/tooltip.tsx";
 import { Copyable } from "../primitives/copyable.tsx";
 import { DetailField, DetailGroup } from "../primitives/detail.tsx";
 import {
@@ -47,9 +81,10 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
-  DialogIntro,
   DialogNavigation,
   DialogTitle,
+  DialogMeta,
+  DialogDescription,
 } from "../primitives/dialog.tsx";
 import {
   Drawer,
@@ -58,39 +93,38 @@ import {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
-  DrawerIntro,
   DrawerNavigation,
   DrawerTitle,
+  DrawerMeta,
+  DrawerDescription,
 } from "../primitives/drawer.tsx";
+import { fillRegionClassName, useFillRegion } from "./fill-region.ts";
+import { ActionForm } from "./form.tsx";
+import { ActionList, type ActionListState } from "./list.tsx";
 import {
   Page,
+  PageBack,
   PageActions,
   PageBody,
   PageFooter,
   PageHeader,
-  PageIntro,
-  PageNavigation,
+  PageShellContribution,
   PageTitle,
-  useInsidePageShell,
+  PageMeta,
+  PageDescription,
 } from "./page.tsx";
-import { ActionForm } from "./form.tsx";
-import { ActionList, type ActionListState } from "./list.tsx";
+import { SurfaceAssistant } from "./surface-assistant.tsx";
 import { ActionTrigger } from "./trigger.tsx";
 import { ActionView } from "./view.tsx";
-import {
-  Surface,
-  SurfaceActions,
-  SurfaceBody,
-  SurfaceHeader,
-  SurfaceTitle,
-} from "./surface.tsx";
-import { SurfaceAssistant } from "./surface-assistant.tsx";
-import { fillRegionClassName, useFillRegion } from "./fill-region.ts";
 
 interface PresentationFrameProps {
+  tabs?: ReactNode;
   surface: PresentationSurface;
   layout?: "flow" | "fill";
+  pageWidth?: "narrow" | "default" | "wide";
   title: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
   navigation?: ReactNode;
   headerActions?: ReactNode;
   footerActions?: ReactNode;
@@ -101,7 +135,7 @@ interface PresentationFrameProps {
   onOpenChange?: (open: boolean) => void;
   className?: string;
   bodyClassName?: string;
-  listBody?: boolean;
+  bodyFlush?: boolean;
   contentOwnsHeading?: boolean;
   assistantOpen?: boolean;
   assistantLabel?: string;
@@ -118,12 +152,14 @@ const bodyClassName =
  */
 function PresentationBody({
   page = false,
+  ownsPage = false,
   layout,
   className,
   children,
 }: {
   layout: "flow" | "fill";
   page?: boolean;
+  ownsPage?: boolean;
   className?: string;
   children: ReactNode;
 }): ReactElement {
@@ -134,6 +170,8 @@ function PresentationBody({
       {...fill.attributes}
       className={cn(
         !page && bodyClassName,
+        page && (layout === "fill" || ownsPage) && "h-full",
+        ownsPage && "flex min-h-0 min-w-0 flex-1 flex-col",
         (layout === "fill" || fill.filling) && fillRegionClassName,
         className,
       )}
@@ -159,9 +197,13 @@ function PresentationActions({
 
 /** A mesma Presentation em Page, Dialog ou Drawer; a superfície não redefine o recurso. */
 function PresentationFrame({
+  tabs,
   surface,
   layout = "flow",
+  pageWidth,
   title,
+  description,
+  meta,
   navigation,
   headerActions,
   footerActions,
@@ -172,14 +214,14 @@ function PresentationFrame({
   onOpenChange,
   className,
   bodyClassName: bodyClassNameProp,
-  listBody = false,
+  bodyFlush = false,
+
   contentOwnsHeading = false,
   assistantOpen = false,
   assistantLabel,
   assistantAction,
   assistantPanel,
 }: PresentationFrameProps): ReactElement {
-  const insidePageShell = useInsidePageShell();
   const [footerTarget, setFooterTarget] = useState<HTMLElement | null>(null);
   const setFooterNode = useCallback((node: HTMLSpanElement | null) => {
     setFooterTarget(node);
@@ -202,6 +244,7 @@ function PresentationFrame({
   const body = (
     <PresentationBody
       page={surface === "page"}
+      ownsPage={surface === "page" && contentOwnsHeading}
       layout={layout}
       className={bodyClassNameProp}
     >
@@ -224,99 +267,49 @@ function PresentationFrame({
     );
 
   if (surface === "page") {
-    if (listBody) {
-      const content = (
-        <Surface as="section" level={1}>
-          <SurfaceHeader>
-            <SurfaceTitle>{title}</SurfaceTitle>
-            {headerActions === undefined ? null : (
-              <SurfaceActions>
-                <PresentationActions>{headerActions}</PresentationActions>
-              </SurfaceActions>
-            )}
-          </SurfaceHeader>
-          <SurfaceBody>{body}</SurfaceBody>
-        </Surface>
-      );
-      return (
-        <Page
-          layout={layout}
-          className={cn("flex min-h-full flex-col", className)}
-        >
-          {navigation === undefined && assistantAction === undefined ? null : (
-            <PageHeader>
-              {navigation === undefined ? null : (
-                <PageNavigation>{navigation}</PageNavigation>
-              )}
-              {assistantAction === undefined ? null : (
-                <PageActions>{assistantAction}</PageActions>
-              )}
-            </PageHeader>
-          )}
-          <PageBody>{withAssistant(content)}</PageBody>
-          {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
-        </Page>
-      );
-    }
-    if (insidePageShell) {
+    if (contentOwnsHeading)
       return (
-        <Page
-          layout={layout}
-          className={cn("flex min-h-full flex-col", className)}
+        <PageShellContribution
+          width={pageWidth}
+          navigation={navigation}
+          actions={
+            <>
+              {headerActions}
+              {assistantAction}
+            </>
+          }
+          footer={hasFooter ? renderFooterActions() : undefined}
         >
-          {navigation === undefined &&
-          contentOwnsHeading &&
-          headerActions === undefined &&
-          assistantAction === undefined ? null : (
-            <PageHeader>
-              {navigation === undefined ? null : (
-                <PageNavigation>{navigation}</PageNavigation>
-              )}
-              {headerActions === undefined &&
-              assistantAction === undefined ? null : (
-                <PageActions>
-                  <PresentationActions>
-                    {headerActions}
-                    {assistantAction}
-                  </PresentationActions>
-                </PageActions>
-              )}
-            </PageHeader>
-          )}
-          <PageBody>
-            {contentOwnsHeading ? null : (
-              <PageIntro>
-                <PageTitle>{title}</PageTitle>
-              </PageIntro>
+          <div
+            data-slot="presentation-page"
+            className={cn(
+              "flex h-full min-h-0 min-w-0 flex-1 flex-col",
+              className,
             )}
+          >
             {withAssistant(body)}
-          </PageBody>
-          {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
-        </Page>
+          </div>
+        </PageShellContribution>
       );
-    }
     return (
-      <Page layout={layout} className={className} contentClassName="max-w-none">
-        <PageHeader>
-          {navigation === undefined ? null : (
-            <PageNavigation>{navigation}</PageNavigation>
+      <Page layout={layout} width={pageWidth} className={className}>
+        <PageHeader tabs={tabs}>
+          {navigation}
+          <PageTitle>{title}</PageTitle>
+          {description != null && (
+            <PageDescription>{description}</PageDescription>
           )}
-          {headerActions === undefined &&
+          {meta != null && <PageMeta>{meta}</PageMeta>}
+          {navigation === undefined &&
+          headerActions === undefined &&
           assistantAction === undefined ? null : (
             <PageActions>
-              <PresentationActions>
-                {headerActions}
-                {assistantAction}
-              </PresentationActions>
+              {headerActions}
+              {assistantAction}
             </PageActions>
           )}
         </PageHeader>
-        <PageBody>
-          <PageIntro>
-            <PageTitle>{title}</PageTitle>
-          </PageIntro>
-          {withAssistant(body)}
-        </PageBody>
+        <PageBody flush={bodyFlush}>{withAssistant(body)}</PageBody>
         {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
       </Page>
     );
@@ -335,7 +328,12 @@ function PresentationFrame({
           closeDisabled={blocked}
         >
           <div className="flex h-full min-h-0 flex-col">
-            <DialogHeader>
+            <DialogHeader tabs={tabs}>
+              <DialogTitle>{title}</DialogTitle>
+              {description != null && (
+                <DialogDescription>{description}</DialogDescription>
+              )}
+              {meta != null && <DialogMeta>{meta}</DialogMeta>}
               {navigation === undefined ? null : (
                 <DialogNavigation>{navigation}</DialogNavigation>
               )}
@@ -349,14 +347,7 @@ function PresentationFrame({
                 </DialogActions>
               )}
             </DialogHeader>
-            {withAssistant(
-              <DialogBody>
-                <DialogIntro>
-                  <DialogTitle>{title}</DialogTitle>
-                </DialogIntro>
-                {body}
-              </DialogBody>,
-            )}
+            {withAssistant(<DialogBody>{body}</DialogBody>)}
             {hasFooter ? (
               <DialogFooter>{renderFooterActions()}</DialogFooter>
             ) : null}
@@ -370,16 +361,21 @@ function PresentationFrame({
     <Drawer open={open} onOpenChange={onOpenChange}>
       <DrawerContent
         className={cn(
+          className,
           assistantOpen
             ? "w-[min(80rem,calc(100%-2rem))] max-w-none"
             : undefined,
-          className,
         )}
         aria-describedby={undefined}
         closeDisabled={blocked}
       >
         <div className="flex h-full min-h-0 flex-col">
-          <DrawerHeader>
+          <DrawerHeader tabs={tabs}>
+            <DrawerTitle>{title}</DrawerTitle>
+            {description != null && (
+              <DrawerDescription>{description}</DrawerDescription>
+            )}
+            {meta != null && <DrawerMeta>{meta}</DrawerMeta>}
             {navigation === undefined ? null : (
               <DrawerNavigation>{navigation}</DrawerNavigation>
             )}
@@ -393,14 +389,7 @@ function PresentationFrame({
               </DrawerActions>
             )}
           </DrawerHeader>
-          {withAssistant(
-            <DrawerBody>
-              <DrawerIntro>
-                <DrawerTitle>{title}</DrawerTitle>
-              </DrawerIntro>
-              {body}
-            </DrawerBody>,
-          )}
+          {withAssistant(<DrawerBody>{body}</DrawerBody>)}
           {hasFooter ? (
             <DrawerFooter>{renderFooterActions()}</DrawerFooter>
           ) : null}
@@ -412,10 +401,20 @@ function PresentationFrame({
 
 export interface PresentationAssistantRuntime {
   icon?: ReactNode;
-  render: (controls: { close: () => void }) => ReactNode;
+  render: (controls: {
+    close: () => void;
+    context: PresentationBindingContext;
+  }) => ReactNode;
+  trigger?: (controls: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    context: PresentationBindingContext;
+  }) => ReactNode;
 }
 
 export interface PresentationProps {
+  embedded?: boolean;
+  can?: (permission: string) => boolean;
   /** Definição estática registrada e publicada no manifest. */
   definition: PresentationDefinition;
   /** Definições alcançáveis por open, navigate ou back. */
@@ -439,6 +438,8 @@ export interface PresentationProps {
   bodyClassName?: string;
   /** `fill` limita a página ao shell e delega a rolagem ao conteúdo React. */
   layout?: "flow" | "fill";
+  /** Extensões nomeadas da composição e da lista; não fazem parte do JSON. */
+  compositionRuntime?: PresentationCompositionRuntime;
   /** Conteúdo React da boundary declarada por `body.component`. */
   children?: ReactNode;
   /** Painel runtime; a página fecha sobre os dados do recurso que ela carregou. */
@@ -465,6 +466,7 @@ function readField(record: unknown, key: string): unknown {
 
 function PresentationCommandTrigger({
   command,
+  icon,
   action,
   input,
   size,
@@ -473,6 +475,7 @@ function PresentationCommandTrigger({
   onSuccess,
 }: {
   command: PresentationCommand;
+  icon?: ReactNode;
   action: SimpleContract<Record<string, unknown>, unknown>;
   input: Record<string, unknown>;
   size: ButtonSize;
@@ -488,17 +491,200 @@ function PresentationCommandTrigger({
     <ActionTrigger
       action={action}
       input={input}
+      label={icon ? commandAccessibleLabel(command, action) : command.label}
+      icon={icon}
+      confirm={command.confirm}
+      aria-label={commandAccessibleLabel(command, action)}
       variant="ghost"
-      size={size}
+      size={icon ? "icon" : size}
       disabled={disabled}
       onLoadingChange={reportLoading}
+      successMessage={command.successMessage}
       onSuccess={onSuccess}
     />
   );
 }
 
+/** Mantém o recurso no nome acessível e preserva o texto visível de uma ação contextual. */
+function commandAccessibleLabel(
+  command: PresentationCommand,
+  action: Parameters<typeof actionLabel>[0],
+): string | undefined {
+  if (command.accessibleLabel !== undefined) return command.accessibleLabel;
+  if (command.label === undefined) return undefined;
+  const fullLabel = actionLabel(action);
+  return fullLabel.includes(command.label)
+    ? fullLabel
+    : `${command.label}: ${fullLabel}`;
+}
+
 /** Renderiza uma definição declarativa delegando cada kind ao pattern Opus correspondente. */
-export function Presentation({
+export function Presentation(props: PresentationProps): ReactElement {
+  if (props.compositionRuntime?.state != null)
+    return <PresentationContent {...props} />;
+  if (
+    props.definition.externalSource &&
+    canAccessPresentation(props.definition, props.actions, props.can)
+  )
+    return <PresentationExternalSource {...props} />;
+  if (
+    props.definition.source &&
+    canAccessPresentation(props.definition, props.actions, props.can)
+  )
+    return props.definition.source.record ? (
+      <PresentationListSource {...props} />
+    ) : (
+      <PresentationSource {...props} />
+    );
+  return <PresentationContent {...props} />;
+}
+
+function PresentationExternalSource(props: PresentationProps): ReactElement {
+  const source =
+    props.compositionRuntime?.recordSources?.[props.definition.externalSource!];
+  if (!source) throw new Error("Fonte externa da apresentação não registrada.");
+  const [attempt, retry] = useState(0);
+  const [state, setState] = useState<{
+    key: string;
+    source: typeof source;
+    data?: Record<string, unknown>;
+    error?: Error;
+  }>();
+  const input = props.bindingContext?.route ?? props.invocation.input;
+  const key = JSON.stringify([props.definition.externalSource, input, attempt]);
+  useEffect(() => {
+    const controller = new AbortController();
+    void source
+      .load(JSON.parse(JSON.stringify(input)), { signal: controller.signal })
+      .then(
+        (data) => {
+          if (!controller.signal.aborted) setState({ key, source, data });
+        },
+        () => {
+          if (!controller.signal.aborted)
+            setState({
+              key,
+              source,
+              error: new Error("Não foi possível carregar os dados."),
+            });
+        },
+      );
+    return () => controller.abort();
+  }, [source, key]);
+  const current =
+    state?.key === key && state.source === source ? state : undefined;
+  return (
+    <PresentationContent
+      {...props}
+      bindingContext={{ ...props.bindingContext, record: current?.data }}
+      compositionRuntime={{
+        ...props.compositionRuntime,
+        state: current?.data ? (
+          props.compositionRuntime?.state
+        ) : (
+          <DataState
+            loading={!current}
+            error={current?.error}
+            errorMessage="Não foi possível carregar os dados."
+            onRetry={() => retry((value) => value + 1)}
+          >
+            {null}
+          </DataState>
+        ),
+      }}
+    />
+  );
+}
+
+function PresentationListSource(props: PresentationProps): ReactElement {
+  const source = props.definition.source!;
+  const action = props.actions[source.action];
+  if (action?.kind !== "list")
+    throw new Error(`Seleção de registro exige action list: ${source.action}.`);
+  const route = props.bindingContext?.route ?? props.invocation.input;
+  const input = resolvePresentationBindings(source.input, {
+    ...props.bindingContext,
+    route,
+  });
+  const result = useListAction<Record<string, PresentationJsonValue>>(
+    action,
+    input,
+  );
+  const record = result.items.find(
+    (item) => item[source.record!.field] === route[source.record!.param],
+  );
+  return (
+    <PresentationContent
+      {...props}
+      bindingContext={{ ...props.bindingContext, record }}
+      compositionRuntime={{
+        ...props.compositionRuntime,
+        state:
+          (result.isLoading && !record) || result.error || !record ? (
+            <DataState
+              loading={result.isLoading}
+              error={result.error ?? null}
+              empty={!record}
+              emptyMessage="Item não encontrado neste recorte."
+              errorMessage="Não foi possível carregar o item."
+              onRetry={result.refetch}
+            >
+              {null}
+            </DataState>
+          ) : (
+            props.compositionRuntime?.state
+          ),
+      }}
+    />
+  );
+}
+
+function PresentationSource(props: PresentationProps): ReactElement {
+  const source = props.definition.source!;
+  const action = props.actions[source.action];
+  if (action?.kind !== "view")
+    throw new Error(`Fonte de registro exige action view: ${source.action}.`);
+  const input = resolvePresentationBindings(source.input, {
+    ...props.bindingContext,
+    route: props.bindingContext?.route ?? props.invocation.input,
+  });
+  const result = useViewAction<
+    Record<string, unknown>,
+    Record<string, PresentationJsonValue>
+  >(action, input);
+  return (
+    <PresentationContent
+      {...props}
+      bindingContext={{ ...props.bindingContext, record: result.data }}
+      compositionRuntime={{
+        ...props.compositionRuntime,
+        state:
+          (result.isLoading && !result.data) ||
+          (result.error && !source.retainOnError) ||
+          !result.data ? (
+            <DataState
+              loading={result.isLoading}
+              error={result.error ?? null}
+              empty={!result.data}
+              emptyMessage="Conteúdo indisponível."
+              errorMessage={
+                source.errorMessage ?? "Não foi possível carregar o conteúdo."
+              }
+              onRetry={result.refetch}
+            >
+              {null}
+            </DataState>
+          ) : (
+            props.compositionRuntime?.state
+          ),
+      }}
+    />
+  );
+}
+
+function PresentationContent({
+  embedded = false,
+  can,
   definition,
   definitions,
   actions,
@@ -512,10 +698,53 @@ export function Presentation({
   onOpenChange,
   className,
   bodyClassName: bodyClassNameProp,
-  layout = "flow",
+  layout: layoutProp,
+  compositionRuntime,
   children,
   assistant,
 }: PresentationProps): ReactElement {
+  const layout = layoutProp ?? definition.page?.layout ?? "flow";
+  const [asideOpen, setAsideOpen] = useState(true);
+  const boundSlots = Object.fromEntries(
+    Object.entries(compositionRuntime?.components ?? {}).map(
+      ([id, adapter]) => [
+        id,
+        compositionRuntime?.state != null ||
+        !canAccessPresentation(definition, actions, can) ||
+        (adapter.action !== undefined &&
+          (!actions[adapter.action] ||
+            !meetsPresentationRequirement(
+              actions[adapter.action]?.requires,
+              can,
+            )))
+          ? null
+          : adapter.render({
+              input: invocation.input,
+              context: {
+                ...bindingContext,
+                route: bindingContext?.route ?? invocation.input,
+              },
+              onClose: () => onInvocationChange?.(null),
+              asideOpen,
+              onAsideOpenChange: setAsideOpen,
+            }),
+      ],
+    ),
+  );
+  compositionRuntime = {
+    ...compositionRuntime,
+    asideOpen: compositionRuntime?.asideOpen ?? asideOpen,
+    slots: { ...compositionRuntime?.slots, ...boundSlots },
+  };
+  const headerSlot = (id: string | undefined): ReactNode => {
+    if (!canAccessPresentation(definition, actions, can)) return null;
+    if (id === undefined || compositionRuntime?.state != null) return undefined;
+    if (!Object.hasOwn(compositionRuntime?.slots ?? {}, id))
+      throw new Error(
+        `Slot “${id}” do cabeçalho da Presentation não registrado.`,
+      );
+    return compositionRuntime!.slots![id];
+  };
   if (definition.id !== invocation.presentationId) {
     throw new Error(
       `A invocação “${invocation.presentationId}” não corresponde à Presentation “${definition.id}”.`,
@@ -525,6 +754,52 @@ export function Presentation({
     ReadonlySet<PresentationCommand>
   >(() => new Set());
   const [bodyLoading, setBodyLoading] = useState(false);
+  const [inspected, setInspected] = useState<{
+    presentation: string;
+    item: Record<string, unknown>;
+  }>();
+  const [localTab, setLocalTab] = useState<{
+    presentation: string;
+    value: string;
+  }>();
+  const tabsBody = isPresentationTabsBody(definition.body)
+    ? definition.body
+    : null;
+  const tabValue =
+    compositionRuntime?.tabs?.value ??
+    (localTab?.presentation === definition.id &&
+    tabsBody?.tabs.some((tab) => tab.id === localTab.value)
+      ? localTab.value
+      : tabsBody?.defaultTab);
+  if (tabsBody !== null) {
+    if (!tabsBody.tabs.some((tab) => tab.id === tabValue))
+      throw new Error("A aba selecionada não existe na Presentation.");
+    for (const tab of tabsBody.tabs) {
+      if (
+        tab.presentation !== undefined &&
+        !Object.hasOwn(
+          compositionRuntime?.presentations ?? {},
+          tab.presentation,
+        )
+      )
+        throw new Error(
+          `Presentation embutida “${tab.presentation}” não registrada.`,
+        );
+      if (
+        tab.content !== undefined &&
+        !Object.hasOwn(compositionRuntime?.slots ?? {}, tab.content)
+      )
+        throw new Error(
+          `Slot “${tab.content}” da Presentation não registrado.`,
+        );
+      if (
+        tab.icon !== undefined &&
+        (!Object.hasOwn(compositionRuntime?.icons ?? {}, tab.icon) ||
+          compositionRuntime?.icons?.[tab.icon] == null)
+      )
+        throw new Error(`Ícone “${tab.icon}” da Presentation não registrado.`);
+    }
+  }
   const [assistantOpen, setAssistantOpen] = useState(false);
   useEffect(() => {
     setAssistantOpen(false);
@@ -535,12 +810,16 @@ export function Presentation({
   };
 
   const applyEffects = useCallback(
-    (effects: PresentationActionBody["onSuccess"], result?: unknown): void => {
+    (
+      effects: PresentationActionBody["onSuccess"],
+      result?: unknown,
+      effectContext: PresentationBindingContext = context,
+    ): void => {
       const next = applyPresentationEffects(
         invocation,
         effects,
         {
-          ...context,
+          ...effectContext,
           ...(result !== undefined &&
           result !== null &&
           typeof result === "object"
@@ -622,12 +901,21 @@ export function Presentation({
       string,
       unknown
     >;
+    const icon = command.icon
+      ? compositionRuntime?.icons?.[command.icon]
+      : undefined;
+    if (command.icon && icon == null) {
+      throw new Error(
+        `Ícone “${command.icon}” da Presentation não registrado.`,
+      );
+    }
     // A região chamadora escolhe a escala; o footer conserva o botão padrão.
-    if (action.kind === "simple") {
+    if (action.kind === "simple" && command.target === undefined) {
       return (
         <PresentationCommandTrigger
-          key={`${command.placement}:${command.action}`}
+          key={`${command.placement}:${command.id ?? command.action}`}
           command={command}
+          icon={icon}
           action={action as SimpleContract<Record<string, unknown>, unknown>}
           input={input}
           size={size}
@@ -642,11 +930,21 @@ export function Presentation({
         `A action “${command.action}” precisa declarar uma Presentation de destino.`,
       );
     }
-    const label = actionLabel(action);
-    return (
+    const label = command.label ?? actionLabel(action);
+    const accessibleLabel = commandAccessibleLabel(command, action) ?? label;
+    const button = (
       <Button
-        key={`${command.placement}:${command.action}`}
-        size={size}
+        key={`${command.placement}:${command.id ?? command.action}`}
+        size={command.icon ? "icon" : size}
+        icon={icon}
+        variant={
+          command.icon
+            ? "ghost"
+            : command.placement === "section"
+              ? "ghost"
+              : "solid"
+        }
+        aria-label={accessibleLabel}
         disabled={isBlocked(command)}
         onClick={() =>
           openTarget(
@@ -656,9 +954,17 @@ export function Presentation({
           )
         }
       >
-        {label}
+        {command.icon ? null : label}
       </Button>
     );
+    return icon ? (
+      <Tooltip key={`${command.placement}:${command.id ?? command.action}`}>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{accessibleLabel}</TooltipContent>
+      </Tooltip>
+    ) : (
+      button
+    );
   };
 
   const actionBody = isPresentationActionBody(definition.body)
@@ -668,14 +974,31 @@ export function Presentation({
   if (actionBody !== null && bodyAction === undefined) {
     throw new Error(`Action “${actionBody.action}” não registrada.`);
   }
-  if (actionBody === null && children === undefined) {
+  const componentBody = isPresentationComponentBody(definition.body)
+    ? definition.body
+    : null;
+  const componentAdapter = componentBody
+    ? compositionRuntime?.components?.[componentBody.component]
+    : undefined;
+  if (
+    componentBody?.contract &&
+    componentAdapter?.action !== componentBody.contract
+  )
+    throw new Error(
+      `Componente “${componentBody.component}” ausente ou incompatível com o contrato.`,
+    );
+  if (
+    isPresentationComponentBody(definition.body) &&
+    children === undefined &&
+    !componentAdapter
+  ) {
     throw new Error(
       `A Presentation “${definition.id}” declara body.component e exige children.`,
     );
   }
-  if (actionBody !== null && children !== undefined) {
+  if (!isPresentationComponentBody(definition.body) && children !== undefined) {
     throw new Error(
-      `A Presentation “${definition.id}” usa body.action e não aceita children.`,
+      `A Presentation “${definition.id}” não usa body.component e não aceita children.`,
     );
   }
   if (definition.assistant !== undefined && assistant === undefined) {
@@ -688,56 +1011,499 @@ export function Presentation({
       `A Presentation “${definition.id}” não declara assistência e não aceita a prop assistant.`,
     );
   }
+  const listContentAdapter =
+    actionBody?.beforeContent === undefined
+      ? undefined
+      : compositionRuntime?.listContent?.[actionBody.beforeContent];
+  if (
+    actionBody?.beforeContent !== undefined &&
+    (bodyAction?.kind !== "list" ||
+      !Object.hasOwn(
+        compositionRuntime?.listContent ?? {},
+        actionBody.beforeContent,
+      ) ||
+      listContentAdapter?.action !== actionBody.action)
+  )
+    throw new Error(
+      `Conteúdo de lista “${actionBody.beforeContent}” ausente ou incompatível com “${actionBody.action}”.`,
+    );
+  const collectionAdapter = actionBody?.collection
+    ? compositionRuntime?.collections?.[actionBody.collection]
+    : undefined;
+  const rowContentAdapter =
+    actionBody?.rowContent === undefined
+      ? undefined
+      : compositionRuntime?.rowContent?.[actionBody.rowContent];
+  const toolbarContentAdapter =
+    actionBody?.toolbarContent === undefined
+      ? undefined
+      : compositionRuntime?.listContent?.[actionBody.toolbarContent];
+  for (const [id, adapter] of [
+    [actionBody?.rowContent, rowContentAdapter],
+    [actionBody?.collection, collectionAdapter],
+    [actionBody?.toolbarContent, toolbarContentAdapter],
+  ] as const) {
+    if (
+      id !== undefined &&
+      (bodyAction?.kind !== "list" || adapter?.action !== actionBody?.action)
+    )
+      throw new Error(
+        `Conteúdo de lista “${id}” ausente ou incompatível com “${actionBody?.action}”.`,
+      );
+  }
+  const cellsAdapter =
+    actionBody?.cells === undefined
+      ? undefined
+      : compositionRuntime?.cells?.[actionBody.cells];
+  if (
+    actionBody?.cells !== undefined &&
+    (!Object.hasOwn(compositionRuntime?.cells ?? {}, actionBody.cells) ||
+      cellsAdapter?.action !== actionBody.action)
+  ) {
+    throw new Error(
+      `Adaptador de células “${actionBody.cells}” ausente ou incompatível com “${actionBody.action}”.`,
+    );
+  }
+  for (const [field, id] of Object.entries(actionBody?.fieldComponents ?? {})) {
+    const adapter = compositionRuntime?.fields?.[id];
+    if (
+      !Object.hasOwn(compositionRuntime?.fields ?? {}, id) ||
+      adapter?.action !== actionBody?.action ||
+      adapter?.field !== field
+    )
+      throw new Error(
+        `Componente de campo “${id}” ausente ou incompatível com “${actionBody?.action}.${field}”.`,
+      );
+  }
+  for (const lookup of Object.values(actionBody?.lookups ?? {})) {
+    if (
+      lookup.format !== undefined &&
+      (!Object.hasOwn(compositionRuntime?.options ?? {}, lookup.format) ||
+        compositionRuntime?.options?.[lookup.format]?.action !== lookup.action)
+    )
+      throw new Error(
+        `Formatador de opções “${lookup.format}” ausente ou incompatível com “${lookup.action}”.`,
+      );
+  }
+  const inspection = actionBody?.inspect;
+  const detailAdapter =
+    inspection === undefined
+      ? undefined
+      : compositionRuntime?.details?.[inspection.component];
+  if (
+    inspection &&
+    (!Object.hasOwn(compositionRuntime?.details ?? {}, inspection.component) ||
+      detailAdapter?.action !== actionBody?.action)
+  )
+    throw new Error(
+      `Adaptador de detalhe “${inspection.component}” ausente ou incompatível com “${actionBody?.action}”.`,
+    );
+  if (
+    inspection &&
+    (actionBody?.open || actionBody?.opens || bodyAction?.kind !== "list")
+  )
+    throw new Error(
+      "Inspect exige list e não pode coexistir com open ou opens.",
+    );
+  const canInspect = (item: Record<string, unknown>): boolean =>
+    inspection !== undefined &&
+    meetsPresentationRequirement(inspection.requires, can) &&
+    matchesPresentationConditions(inspection.when, item);
+  const canOpenPresentation = (id: string): boolean => {
+    const target = definitions.find((candidate) => candidate.id === id);
+    return target !== undefined && canAccessPresentation(target, actions, can);
+  };
+  const canUseCommand = (command: PresentationCommand): boolean => {
+    const action = actions[command.action];
+    return (
+      action !== undefined &&
+      meetsPresentationRequirement(command.requires, can) &&
+      meetsPresentationRequirement(action.requires, can) &&
+      (command.target === undefined ||
+        canOpenPresentation(command.target.presentation))
+    );
+  };
+  const rowCommands = definition.actions.filter(
+    (command) => command.placement === "row",
+  );
+  for (const command of rowCommands) {
+    if (bodyAction?.kind !== "list" || command.blocking !== "action")
+      throw new Error("Comando de linha exige lista e bloqueio por ação.");
+    if (
+      command.icon !== undefined &&
+      (!Object.hasOwn(compositionRuntime?.icons ?? {}, command.icon) ||
+        compositionRuntime?.icons?.[command.icon] == null)
+    ) {
+      throw new Error(
+        `Ícone “${command.icon}” da Presentation não registrado.`,
+      );
+    }
+  }
+  const renderRowCommand = (
+    command: PresentationCommand,
+    item: Record<string, unknown>,
+  ): ReactNode => {
+    if (
+      !canUseCommand(command) ||
+      !matchesPresentationConditions(command.when, item)
+    )
+      return null;
+    const action = actions[command.action];
+    if (action === undefined)
+      throw new Error(`Action “${command.action}” não registrada.`);
+    const rowContext = { ...context, item };
+    const input = resolvePresentationBindings(command.input, rowContext);
+    const label = command.label ?? actionLabel(action);
+    const value =
+      command.itemLabel === undefined ? undefined : item[command.itemLabel];
+    // O nome acessível usa o vocabulário do contrato, inclusive quando o item guarda um código.
+    const labelSchema =
+      command.itemLabel === undefined
+        ? undefined
+        : objectSchemaShape(bodyAction?.output)?.[command.itemLabel];
+    const itemLabel =
+      typeof value === "string" || typeof value === "number"
+        ? (dictionaryDescriptor(labelSchema)?.entries[String(value)]?.label ??
+          String(value))
+        : undefined;
+    const accessibleLabel =
+      itemLabel === undefined
+        ? (commandAccessibleLabel(command, action) ?? label)
+        : `${label} ${itemLabel}`;
+    const icon =
+      command.icon === undefined
+        ? undefined
+        : compositionRuntime?.icons?.[command.icon];
+    if (action.kind === "simple" && command.target === undefined)
+      return (
+        <ActionTrigger
+          key={command.id ?? command.action}
+          action={action as SimpleContract<Record<string, unknown>, unknown>}
+          input={input}
+          label={label}
+          aria-label={accessibleLabel}
+          icon={icon}
+          itemLabel={itemLabel}
+          confirm={command.confirm}
+          disabled={surfaceBlocked}
+          successMessage={command.successMessage}
+          onSuccess={(result) => {
+            applyEffects(command.onSuccess, result, rowContext);
+          }}
+        />
+      );
+    if (command.target === undefined)
+      throw new Error(
+        `A action “${command.action}” precisa declarar uma Presentation de destino.`,
+      );
+    const button = (
+      <Button
+        variant="ghost"
+        size={icon === undefined ? "default" : "icon-xs"}
+        aria-label={accessibleLabel}
+        disabled={surfaceBlocked}
+        className={
+          icon === undefined ? undefined : "shrink-0 text-muted-foreground/60"
+        }
+        onClick={(event) => {
+          event.stopPropagation();
+          openTarget(
+            command.target!.presentation,
+            command.target!.surface,
+            command.input,
+            rowContext,
+          );
+        }}
+      >
+        {icon ?? label}
+      </Button>
+    );
+    return icon === undefined ? (
+      <span
+        key={`${command.id ?? command.action}:${command.target?.presentation ?? "execute"}`}
+      >
+        {button}
+      </span>
+    ) : (
+      <Tooltip
+        key={`${command.id ?? command.action}:${command.target?.presentation ?? "execute"}`}
+      >
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    );
+  };
   const bodyInput =
-    actionBody === null
+    actionBody === null ||
+    compositionRuntime?.state != null ||
+    !canAccessPresentation(definition, actions, can)
       ? {}
       : (resolvePresentationBindings(actionBody.input, context) as Record<
           string,
           unknown
         >);
+  const renderLink = (
+    link: PresentationDefinition["links"][number],
+  ): ReactNode => {
+    const target = definitions.find((item) => item.id === link.presentation);
+    if (!target?.route || !canAccessPresentation(target, actions, can))
+      return null;
+    const icon = link.icon ? compositionRuntime?.icons?.[link.icon] : undefined;
+    if (link.icon && icon == null) {
+      throw new Error(`Ícone “${link.icon}” da Presentation não registrado.`);
+    }
+    const iconOnly = icon != null && link.showLabel !== true;
+    const button = (
+      <Button
+        key={link.id}
+        variant={link.placement === "section" || icon ? "ghost" : "outline"}
+        size={iconOnly ? "icon" : "default"}
+        icon={icon}
+        aria-label={link.label}
+        disabled={surfaceBlocked}
+        onClick={() =>
+          onInvocationChange?.(
+            openPresentation(invocation, {
+              presentationId: target.id,
+              surface: target.route!.surface,
+              input: resolvePresentationBindings(link.input, context) as Record<
+                string,
+                PresentationJsonValue
+              >,
+            }),
+          )
+        }
+      >
+        {iconOnly ? null : link.label}
+      </Button>
+    );
+    return iconOnly ? (
+      <Tooltip key={link.id}>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{link.label}</TooltipContent>
+      </Tooltip>
+    ) : (
+      button
+    );
+  };
   const renderBody = (footerTarget: HTMLElement | null): ReactNode => {
-    if (actionBody === null) return children;
+    if (!canAccessPresentation(definition, actions, can))
+      return <PageState status="empty" title="Sem acesso a este conteúdo" />;
+    if (compositionRuntime?.state != null) return compositionRuntime.state;
+    if (tabsBody !== null)
+      return tabsBody.tabs.map((tab) => (
+        <TabsPanel key={tab.id} value={tab.id} className="min-w-0">
+          {tab.presentation === undefined
+            ? compositionRuntime!.slots![tab.content!]
+            : compositionRuntime!.presentations![tab.presentation]}
+        </TabsPanel>
+      ));
+    if (isPresentationSectionsBody(definition.body)) {
+      return (
+        <PresentationSections
+          body={definition.body}
+          can={can}
+          context={context}
+          runtime={{
+            ...compositionRuntime,
+            slots: {
+              ...compositionRuntime?.slots,
+              ...Object.fromEntries(
+                definition.links
+                  .filter((link) => link.placement === "section")
+                  .map((link) => [link.id, renderLink(link)]),
+              ),
+              ...Object.fromEntries(
+                definition.actions
+                  .filter((command) => command.placement === "section")
+                  .map((command) => [
+                    command.id ?? command.action,
+                    canUseCommand(command) &&
+                    matchesPresentationConditions(
+                      command.when,
+                      context.record ?? {},
+                    )
+                      ? renderCommand(command)
+                      : null,
+                  ]),
+              ),
+            },
+          }}
+        />
+      );
+    }
+    if (actionBody === null)
+      return componentAdapter && componentBody
+        ? componentAdapter.render({
+            input: resolvePresentationBindings(
+              componentBody.input ?? {},
+              context,
+            ),
+            context,
+            onClose: closeSurface,
+            footerTarget,
+            onBusyChange: setBodyLoading,
+          })
+        : children;
     if (bodyAction === null) return null;
     if (bodyAction.kind === "form") {
       return (
         <ActionForm
+          key={`${definition.id}:${JSON.stringify(invocation.input)}`}
           action={bodyAction as FormContract<Record<string, unknown>, unknown>}
-          defaultValues={bodyInput}
+          defaultValues={
+            actionBody.defaultsFromRecord
+              ? { ...actionBody.initialValues, ...context.record, ...bodyInput }
+              : { ...actionBody.initialValues, ...bodyInput }
+          }
           submitLabel={actionBody.submitLabel}
           onCancel={invocation.surface === "page" ? undefined : closeSurface}
           onSuccess={(data) => applyEffects(actionBody.onSuccess, data)}
           disabled={hasSurfaceBlock}
           onLoadingChange={setBodyLoading}
-          footer={(actions) =>
-            footerTarget === null ? null : createPortal(actions, footerTarget)
+          footer={
+            embedded && invocation.surface === "page"
+              ? undefined
+              : (actions) =>
+                  footerTarget === null
+                    ? null
+                    : createPortal(actions, footerTarget)
           }
-        />
+        >
+          {actionBody.lookups !== undefined ||
+          actionBody.formFields !== undefined ||
+          actionBody.formGroups !== undefined ||
+          actionBody.fieldComponents !== undefined ? (
+            <PresentationFormFields
+              body={actionBody}
+              action={bodyAction}
+              actions={actions}
+              runtime={compositionRuntime}
+              context={context}
+              can={can}
+            />
+          ) : undefined}
+        </ActionForm>
       );
     }
     if (bodyAction.kind === "list") {
+      const findTarget = (item: Record<string, unknown>) =>
+        (actionBody.opens ?? (actionBody.open ? [actionBody.open] : [])).find(
+          (open) =>
+            meetsPresentationRequirement(open.requires, can) &&
+            canOpenPresentation(open.presentation) &&
+            matchesPresentationConditions(open.when, item),
+        );
+      const openItem = (item: Record<string, unknown>) => {
+        if (inspection) {
+          if (canInspect(item))
+            setInspected({ presentation: definition.id, item });
+          return;
+        }
+        const target = findTarget(item);
+        if (target)
+          openTarget(target.presentation, target.surface, target.input, {
+            ...context,
+            item,
+          });
+      };
+      const renderItemActions = (item: Record<string, unknown>) => (
+        <>
+          {rowContentAdapter?.render(item)}
+          {rowCommands.map((command) => renderRowCommand(command, item))}
+        </>
+      );
       return (
-        <ActionList<Record<string, unknown>, Record<string, unknown>>
-          action={
-            bodyAction as ListContract<
-              Record<string, unknown>,
-              Record<string, unknown>
-            >
-          }
-          input={bodyInput}
-          state={listState}
-          onStateChange={onListStateChange}
-          {...(actionBody.open === undefined
-            ? {}
-            : {
-                onRowClick: (item: Record<string, unknown>) =>
-                  openTarget(
-                    actionBody.open!.presentation,
-                    actionBody.open!.surface,
-                    actionBody.open!.input,
-                    { ...context, item },
-                  ),
-              })}
-        />
+        <>
+          <ActionList<Record<string, unknown>, Record<string, unknown>>
+            action={
+              bodyAction as ListContract<
+                Record<string, unknown>,
+                Record<string, unknown>
+              >
+            }
+            input={bodyInput}
+            rowId={
+              actionBody.rowKey
+                ? (item) => String(item[actionBody.rowKey!])
+                : undefined
+            }
+            beforeContent={listContentAdapter?.render}
+            cells={
+              actionBody.columns === undefined
+                ? cellsAdapter?.cells
+                : {
+                    ...cellsAdapter?.cells,
+                    ...Object.fromEntries(
+                      Object.entries(actionBody.columns).map(
+                        ([field, column]) => [
+                          field,
+                          (item: Record<string, unknown>) =>
+                            column.kind === "switch" ? (
+                              <PresentationSwitch
+                                column={column}
+                                item={item}
+                                checked={item[field] === true}
+                                actions={actions}
+                                can={can}
+                                context={context}
+                              />
+                            ) : (
+                              presentationTextCell(
+                                item[field],
+                                column,
+                                compositionRuntime?.icons,
+                              )
+                            ),
+                        ],
+                      ),
+                    ),
+                  }
+            }
+            emptyMessage={actionBody.emptyMessage}
+            filterDefaults={actionBody.filterDefaults}
+            rowActions={
+              rowCommands.length === 0 && rowContentAdapter === undefined
+                ? undefined
+                : renderItemActions
+            }
+            state={listState}
+            onStateChange={onListStateChange}
+            toolbarActions={
+              toolbarActions.length === 0 &&
+              toolbarContentAdapter === undefined ? undefined : (
+                <>
+                  {toolbarContentAdapter?.render(bodyInput)}
+                  {toolbarActions}
+                </>
+              )
+            }
+            onRowClick={
+              actionBody.open || actionBody.opens || inspection
+                ? openItem
+                : undefined
+            }
+            children={
+              collectionAdapter
+                ? (items, refetch) =>
+                    collectionAdapter.render(items, {
+                      onOpen: openItem,
+                      canOpen: (item) =>
+                        inspection
+                          ? canInspect(item)
+                          : findTarget(item) !== undefined,
+                      actions: renderItemActions,
+                      refetch,
+                    })
+                : undefined
+            }
+          />
+          {inspected?.presentation === definition.id &&
+            canInspect(inspected.item) &&
+            detailAdapter?.render(inspected.item, () =>
+              setInspected(undefined),
+            )}
+        </>
       );
     }
     if (bodyAction.kind === "view") {
@@ -747,18 +1513,22 @@ export function Presentation({
           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>
-          )}
+          {(data) =>
+            fields.some((field) => field.format !== undefined) ? (
+              <PresentationViewSections fields={fields} data={data} />
+            ) : (
+              <DetailGroup>
+                {fields.map((field) => (
+                  <DetailField
+                    key={field.key}
+                    label={field.label}
+                    value={readField(data, field.key) as ReactNode}
+                    empty={field.empty}
+                  />
+                ))}
+              </DetailGroup>
+            )
+          }
         </ActionView>
       );
     }
@@ -768,31 +1538,80 @@ export function Presentation({
   };
 
   const headerActions = definition.actions
-    .filter((command) => command.placement === "header")
-    .map((command) => renderCommand(command, "sm"));
+    .filter(
+      (command) =>
+        command.placement === "header" &&
+        matchesPresentationConditions(command.when, context.record ?? {}) &&
+        compositionRuntime?.state == null &&
+        canAccessPresentation(definition, actions, can) &&
+        canUseCommand(command),
+    )
+    .map((command) => renderCommand(command, "default"));
+  const toolbarActions = definition.actions
+    .filter(
+      (command) =>
+        command.placement === "toolbar" &&
+        matchesPresentationConditions(command.when, context.record ?? {}) &&
+        canAccessPresentation(definition, actions, can) &&
+        canUseCommand(command),
+    )
+    .map((command) => renderCommand(command));
   const footerActions = definition.actions
-    .filter((command) => command.placement === "footer")
+    .filter(
+      (command) =>
+        command.placement === "footer" &&
+        matchesPresentationConditions(command.when, context.record ?? {}) &&
+        canAccessPresentation(definition, actions, can) &&
+        canUseCommand(command),
+    )
     .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"
+  const parentTitle = definitions.find(
+    (candidate) => candidate.id === invocation.stack.at(-1)?.presentationId,
+  )?.title;
+  const backLabel = parentTitle
+    ? `Voltar para ${parentTitle}`
+    : "Voltar para a página anterior";
+  const navigation = !canGoBack ? undefined : invocation.surface === "page" ? (
+    <PageBack
       disabled={surfaceBlocked}
-      aria-label="Voltar"
-      title="Voltar"
-      onClick={() => applyEffects([{ effect: "back" }])}
+      aria-label={backLabel}
+      onBack={() => applyEffects([{ effect: "back" }])}
     >
-      <ArrowLeft aria-hidden />
-    </Button>
+      {parentTitle ?? "a página anterior"}
+    </PageBack>
+  ) : (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          disabled={surfaceBlocked}
+          aria-label={backLabel}
+          onClick={() => applyEffects([{ effect: "back" }])}
+        >
+          <ArrowLeft aria-hidden />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{backLabel}</TooltipContent>
+    </Tooltip>
   );
   const assistantAction =
-    definition.assistant === undefined || assistantOpen ? undefined : (
+    !canAccessPresentation(definition, actions, can) ||
+    definition.assistant === undefined ||
+    compositionRuntime?.state != null ||
+    assistantOpen ? undefined : assistant?.trigger ? (
+      assistant.trigger({
+        open: assistantOpen,
+        onOpenChange: setAssistantOpen,
+        context,
+      })
+    ) : (
       <Button
-        size="icon-sm"
+        size="icon"
         variant="ghost"
         aria-label={definition.assistant.triggerLabel}
         title={definition.assistant.triggerLabel}
@@ -802,42 +1621,136 @@ export function Presentation({
       </Button>
     );
   const assistantPanel =
-    definition.assistant === undefined || assistant === undefined
+    !canAccessPresentation(definition, actions, can) ||
+    definition.assistant === undefined ||
+    assistant === undefined ||
+    compositionRuntime?.state != null
       ? undefined
-      : assistant.render({ close: () => setAssistantOpen(false) });
+      : assistant.render({ close: () => setAssistantOpen(false), context });
 
-  return (
-    <PresentationFrame
-      surface={invocation.surface}
-      layout={layout}
-      title={definition.title}
-      navigation={navigation}
-      headerActions={headerActions.length === 0 ? undefined : headerActions}
-      footerActions={footerActions.length === 0 ? undefined : footerActions}
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (!nextOpen && invocation.surface !== "page") {
-          closeSurface();
-          return;
+  const renderContent = (footerTarget: HTMLElement | null) => (
+    <>
+      {actionBody?.intro && (
+        <p className="mb-4 text-sm text-muted-foreground">{actionBody.intro}</p>
+      )}
+      {renderBody(footerTarget)}
+    </>
+  );
+  const tabList =
+    tabsBody === null ? undefined : (
+      <TabsList aria-label={tabsBody.tabLabel}>
+        {tabsBody.tabs.map((tab) => (
+          <TabsListItem
+            key={tab.id}
+            value={tab.id}
+            icon={
+              tab.icon === undefined
+                ? undefined
+                : compositionRuntime!.icons![tab.icon]
+            }
+          >
+            {tab.label}
+          </TabsListItem>
+        ))}
+      </TabsList>
+    );
+  const renderedHeaderActions =
+    definition.header?.actions === undefined &&
+    headerActions.length === 0 &&
+    !definition.links.some(
+      (link) => link.placement === "header",
+    ) ? undefined : (
+      <>
+        {headerSlot(definition.header?.actions)}
+        {headerActions}
+        {definition.links
+          .filter((link) => link.placement === "header")
+          .map(renderLink)}
+      </>
+    );
+  const frame =
+    embedded && invocation.surface === "page" ? (
+      <>
+        {renderedHeaderActions !== undefined && (
+          <ButtonGroup mode="spaced" className="justify-end">
+            {renderedHeaderActions}
+          </ButtonGroup>
+        )}
+        {tabList}
+        {renderContent(null)}
+        {footerActions.length > 0 && (
+          <ButtonGroup mode="spaced" className="justify-end">
+            {footerActions}
+          </ButtonGroup>
+        )}
+      </>
+    ) : (
+      <PresentationFrame
+        tabs={tabList}
+        surface={invocation.surface}
+        layout={layout}
+        pageWidth={definition.page?.width}
+        title={headerSlot(definition.header?.title) ?? definition.title}
+        meta={headerSlot(definition.header?.meta)}
+        description={headerSlot(definition.header?.description)}
+        navigation={navigation}
+        headerActions={renderedHeaderActions}
+        footerActions={footerActions.length === 0 ? undefined : footerActions}
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen && invocation.surface !== "page") {
+            closeSurface();
+            return;
+          }
+          onOpenChange?.(nextOpen);
+        }}
+        className={cn(
+          definition.width === "wide" &&
+            (invocation.surface === "dialog"
+              ? "max-w-4xl"
+              : invocation.surface === "drawer"
+                ? "w-[56rem] max-w-[calc(100%-2rem)]"
+                : undefined),
+          className,
+        )}
+        bodyClassName={bodyClassNameProp}
+        bodyFlush={definition.page?.flush}
+        hasBodyFooter={
+          bodyAction?.kind === "form" || componentBody?.footer === true
         }
-        onOpenChange?.(nextOpen);
+        blocked={surfaceBlocked}
+        contentOwnsHeading={
+          isPresentationComponentBody(definition.body) &&
+          definition.body.heading === "content"
+        }
+        assistantOpen={assistantOpen}
+        assistantLabel={definition.assistant?.triggerLabel}
+        assistantAction={assistantAction}
+        assistantPanel={assistantPanel}
+      >
+        {renderContent}
+      </PresentationFrame>
+    );
+  return tabsBody === null ? (
+    frame
+  ) : (
+    <Tabs
+      framed={tabsBody.framed}
+      distribution={tabsBody.distribution}
+      value={tabValue}
+      onValueChange={(value) => {
+        if (compositionRuntime?.tabs !== undefined)
+          compositionRuntime.tabs.onValueChange(value);
+        else setLocalTab({ presentation: definition.id, value });
       }}
-      className={className}
-      bodyClassName={bodyClassNameProp}
-      hasBodyFooter={bodyAction?.kind === "form"}
-      blocked={surfaceBlocked}
-      listBody={bodyAction?.kind === "list"}
-      contentOwnsHeading={
-        !isPresentationActionBody(definition.body) &&
-        definition.body.heading === "content"
+      className={
+        invocation.surface === "dialog" || invocation.surface === "drawer"
+          ? "contents"
+          : "h-full min-h-0 min-w-0 flex-1"
       }
-      assistantOpen={assistantOpen}
-      assistantLabel={definition.assistant?.triggerLabel}
-      assistantAction={assistantAction}
-      assistantPanel={assistantPanel}
     >
-      {renderBody}
-    </PresentationFrame>
+      {frame}
+    </Tabs>
   );
 }