@softize/opus 29.0.0 → 31.0.0

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

@@ -2,9 +2,10 @@
  * <Page /> — esqueleto composto de página do back-office.
  *
  * A forma curta cobre o caso comum; PageShell coordena contexto conhecido pelo shell sem criar
- * uma segunda região visual. Todas preservam o container centralizado com teto de 80rem.
+ * uma segunda região visual. O header reúne título e ações; largura e rolagem são independentes.
  */
 
+import { ArrowLeft } from "lucide-react";
 import {
   Children,
   Fragment,
@@ -15,49 +16,63 @@ import {
   useLayoutEffect,
   useRef,
   useState,
-  type HTMLAttributes,
   type ComponentProps,
+  type HTMLAttributes,
   type ReactElement,
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
-import { ArrowLeft } from "lucide-react";
 import { cn } from "../../lib/cn.ts";
 import { Button } from "../primitives/button.tsx";
-import { Surface } from "./surface.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../primitives/tooltip.tsx";
+import { FillRoot, useFillRegion } from "./fill-region.ts";
 import {
   PageHeadingPresenceProvider,
   usePageHeadingPresence,
 } from "./page-heading-context.tsx";
+import { PageState, PageStatePresenceProvider } from "./page-state.tsx";
 import {
   StructuralHeader,
-  validateSurfaceIntro,
   structuralHeaderClasses,
+  structuralMetaClasses,
 } from "./structural-header.tsx";
-import { PageState, PageStatePresenceProvider } from "./page-state.tsx";
-import { FillRoot, useFillRegion } from "./fill-region.ts";
+import { Surface } from "./surface.tsx";
 
 import {
+  surfaceTitleClasses,
   surfaceHeaderRowClasses,
   surfaceRegionClasses,
-  type SurfaceLayout,
 } from "./surface-anatomy.ts";
 
+type PageWidth = "narrow" | "default" | "wide";
+const pageWidthClasses: Record<PageWidth, string> = {
+  narrow: "max-w-[42rem]",
+  default: "max-w-[58rem]",
+  wide: "max-w-none",
+};
+
 interface PageContextValue {
-  surfaceLayout: SurfaceLayout;
+  layout: "flow" | "fill";
   contentClassName?: string;
 }
 
 const PageContext = createContext<PageContextValue | null>(null);
 const PageHeaderContext = createContext(false);
-const PageIntroContext = createContext(false);
 const PageBodyContext = createContext(false);
 const PageIntegralStateContext = createContext(false);
 const PageActionsTargetContext = createContext<HTMLElement | null>(null);
 interface PageShellContextValue {
   navigation?: ReactNode;
+  width?: PageWidth;
   actions?: ReactNode;
+  footer?: ReactNode;
 }
+const PageConsumerContext = createContext<(() => () => void) | null>(null);
 const PageShellContext = createContext<PageShellContextValue | null>(null);
 
 function hasRenderableNode(node: ReactNode): boolean {
@@ -72,17 +87,10 @@ function hasRenderableNode(node: ReactNode): boolean {
   return true;
 }
 
-/** Uso interno de patterns que precisam adaptar a Page ao shell sem duplicar sua anatomia. */
-export function useInsidePageShell(): boolean {
-  return useContext(PageShellContext) !== null;
-}
-
 export interface PageShellProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   "children"
 > {
-  /** Navegação contextual conhecida pelo shell, normalmente um Breadcrumb. */
-  navigation?: ReactNode;
   /** Ações do shell ou do recurso que antecedem as ações declaradas pela Page. */
   actions?: ReactNode;
   /** Uma Page descendente, diretamente ou através da rota ativa. */
@@ -91,14 +99,12 @@ export interface PageShellProps extends Omit<
 
 /** Moldura que coordena contexto do shell com o PageHeader da página ativa. */
 export function PageShell({
-  navigation,
   actions,
   children,
   className,
   ...props
 }: PageShellProps): ReactElement {
   const shell = {
-    ...(hasRenderableNode(navigation) ? { navigation } : {}),
     ...(hasRenderableNode(actions) ? { actions } : {}),
   };
   return (
@@ -122,6 +128,60 @@ export function PageShell({
   );
 }
 
+/** Contribuições da Presentation à Page completa fornecida pelo consumidor. */
+export function PageShellContribution({
+  navigation,
+  width,
+  actions,
+  footer,
+  children,
+}: {
+  navigation?: ReactNode;
+  width?: PageWidth;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}): ReactElement {
+  const parent = useContext(PageShellContext);
+  const consumers = useRef(0);
+  const register = useCallback(() => {
+    consumers.current += 1;
+    return () => {
+      consumers.current -= 1;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (consumers.current !== 1)
+      throw new Error(
+        "Presentation com heading de conteúdo exige uma Page completa.",
+      );
+  });
+  return (
+    <PageConsumerContext.Provider value={register}>
+      <PageShellContext.Provider
+        value={{
+          ...parent,
+          ...(navigation === undefined ? {} : { navigation }),
+          ...(width === undefined ? {} : { width }),
+          ...(hasRenderableNode(actions)
+            ? {
+                actions: (
+                  <>
+                    {parent?.actions}
+                    {actions}
+                  </>
+                ),
+              }
+            : {}),
+          ...(hasRenderableNode(footer) ? { footer } : {}),
+        }}
+      >
+        {children}
+      </PageShellContext.Provider>
+    </PageConsumerContext.Provider>
+  );
+}
+
 export function PageActionsTarget({
   target,
   children,
@@ -148,23 +208,25 @@ interface PageBaseProps extends Omit<
   HTMLAttributes<HTMLElement>,
   "children" | "title"
 > {
-  /** Classes do container externo. O conteúdo do Body mantém o teto de 80rem. */
+  /** Classes da coluna. O conteúdo do Body ocupa a largura disponível. */
   className?: string;
-  /** Classes do conteúdo centralizado, incluindo largura máxima e alinhamento. */
+  /** Classes adicionais do conteúdo do body. */
   contentClassName?: string;
   /**
-   * `flow` mantém a rolagem no body; `fill` permite que regiões internas assumam a rolagem.
+   * `flow` rola título e corpo na Page; `fill` mantém o header visível e delega às regiões internas.
    * A altura chega sozinha a uma `ActionList` composta por `PageBody` e `Surface` (ADR 0024).
    */
   layout?: "flow" | "fill";
-  /** Divisão visual das regiões, independente da distribuição de altura. */
-  surfaceLayout?: SurfaceLayout;
+  /** Limita a coluna inteira, mantendo header e body alinhados. */
+  width?: PageWidth;
 }
 
 interface PageShorthandProps extends PageBaseProps {
   title: ReactNode;
   /** Orientação opcional sobre a finalidade da página; regras pertencem ao corpo. */
   description?: ReactNode;
+  /** Badges, datas e autoria sob a orientação. */
+  meta?: ReactNode;
   actions?: ReactNode;
   children: ReactNode;
 }
@@ -172,6 +234,7 @@ interface PageShorthandProps extends PageBaseProps {
 interface PageComposedProps extends PageBaseProps {
   title?: never;
   description?: never;
+  meta?: never;
   actions?: never;
   children: ReactNode;
 }
@@ -199,7 +262,6 @@ function countDirectChildrenOfType(
 
 function countPageBodyHeadings(node: ReactNode): {
   content: number;
-  intro: number;
   state: number;
 } {
   return Children.toArray(node).reduce(
@@ -213,7 +275,6 @@ function countPageBodyHeadings(node: ReactNode): {
       if (child.type === PageState && props.status !== "ready") {
         return {
           content: total.content,
-          intro: total.intro,
           state: total.state + 1,
         };
       }
@@ -223,11 +284,10 @@ function countPageBodyHeadings(node: ReactNode): {
           total.content +
           (child.type === Surface && props.level === 1 ? 1 : 0) +
           nested.content,
-        intro: total.intro + (child.type === PageIntro ? 1 : 0) + nested.intro,
         state: total.state + nested.state,
       };
     },
-    { content: 0, intro: 0, state: 0 },
+    { content: 0, state: 0 },
   );
 }
 
@@ -246,15 +306,17 @@ function hasOpaquePageBodyContent(node: ReactNode): boolean {
 export function Page({
   title,
   description,
+  meta,
   actions,
   layout = "flow",
-  surfaceLayout = "sectioned",
+  width: widthProp,
   contentClassName,
   className,
   children,
   ...props
 }: PageProps): ReactElement {
   const shell = useContext(PageShellContext);
+  const width = widthProp ?? shell?.width ?? "wide";
   const shorthand = title !== undefined;
   const nodes = flattenPageHeaderChildren(children);
   const headers = nodes.filter(
@@ -266,6 +328,8 @@ export function Page({
   const footers = nodes.filter(
     (node) => isValidElement(node) && node.type === PageFooter,
   );
+  const registerConsumer = useContext(PageConsumerContext);
+  useLayoutEffect(() => registerConsumer?.(), [registerConsumer]);
   const activeStateCount = useRef(0);
   const headingCount = useRef(0);
   const [integralState, setIntegralState] = useState(false);
@@ -318,7 +382,6 @@ export function Page({
       );
     }
     const bodyHeadingSources = bodies.reduce<{
-      intro: number;
       content: number;
       state: number;
     }>(
@@ -328,20 +391,21 @@ export function Page({
         );
         return {
           content: total.content + count.content,
-          intro: total.intro + count.intro,
           state: total.state + count.state,
         };
       },
-      { content: 0, intro: 0, state: 0 },
+      { content: 0, state: 0 },
     );
+    if (bodyHeadingSources.content > 0)
+      throw new Error(
+        "Page explícito exige exatamente um heading principal em PageHeader ou PageState ativo dentro de PageBody.",
+      );
     const structuralHeadingSources =
       headers.reduce<number>(
         (total, header) =>
           total + countDirectChildrenOfType(header as ReactElement, PageTitle),
         0,
-      ) +
-      bodyHeadingSources.content +
-      bodyHeadingSources.intro;
+      ) + bodyHeadingSources.content;
     const headingSources =
       bodyHeadingSources.state > 0
         ? bodyHeadingSources.state + bodyHeadingSources.content
@@ -353,7 +417,7 @@ export function Page({
     );
     if (headingSources > 1 || (headingSources === 0 && !hasOpaqueBodyContent)) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Surface level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader ou PageState ativo dentro de PageBody.",
       );
     }
   }
@@ -362,52 +426,64 @@ export function Page({
     if (integralState !== hasActiveIntegralState) return;
     if (headingCount.current !== 1) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Surface level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader ou PageState ativo dentro de PageBody.",
       );
     }
   });
+  if (shell?.footer !== undefined && footers.length > 0) {
+    throw new Error(
+      "Page recebe o rodapé da Presentation; não declare outro PageFooter no conteúdo.",
+    );
+  }
+
   const content = shorthand ? (
     <>
       <PageHeader>
+        <PageTitle>{title}</PageTitle>
+        {description !== undefined && (
+          <PageDescription>{description}</PageDescription>
+        )}
+        {meta !== undefined && <PageMeta>{meta}</PageMeta>}
         {actions !== undefined && <PageActions>{actions}</PageActions>}
       </PageHeader>
-      <PageBody>
-        <PageIntro>
-          <PageTitle>{title}</PageTitle>
-          {description !== undefined && (
-            <PageDescription>{description}</PageDescription>
-          )}
-        </PageIntro>
-        {children}
-      </PageBody>
+      <PageBody>{children}</PageBody>
+      {shell?.footer === undefined ? null : (
+        <PageFooter>{shell.footer}</PageFooter>
+      )}
     </>
   ) : (
     <>
-      {headers.length === 0 &&
-      (shell?.navigation !== undefined || shell?.actions !== undefined) ? (
-        <PageHeader />
-      ) : null}
       {children}
+      {shell?.footer === undefined || footers.length > 0 ? null : (
+        <PageFooter>{shell.footer}</PageFooter>
+      )}
     </>
   );
 
   return (
-    <PageContext.Provider value={{ surfaceLayout, contentClassName }}>
+    <PageContext.Provider value={{ contentClassName, layout }}>
       <PageIntegralStateContext.Provider value={integralState}>
         <PageStatePresenceProvider register={registerIntegralState}>
           <PageHeadingPresenceProvider register={registerHeading}>
             <main
               data-slot="page"
               data-layout={layout}
-              data-surface-layout={surfaceLayout}
+              data-width={width}
               className={cn(
-                "flex h-full min-h-0 min-w-[64rem] flex-1 flex-col overflow-hidden",
+                "flex h-full min-h-0 min-w-[64rem] flex-1 flex-col",
+                layout === "flow" ? "overflow-y-auto" : "overflow-hidden",
               )}
               {...props}
             >
               <div
+                data-slot="page-column"
                 className={cn(
-                  "flex h-full min-h-0 w-full flex-1 flex-col",
+                  "mx-auto flex w-full flex-col",
+                  pageWidthClasses[width],
+                  "gap-4 p-10",
+                  layout === "flow"
+                    ? "min-h-full shrink-0"
+                    : "h-full min-h-0 flex-1",
                   className,
                 )}
               >
@@ -422,7 +498,10 @@ export function Page({
 }
 
 /** Cabeçalho único da Page: navegação contextual, título e ações. */
-export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** TabsList abaixo do título; acompanha a rolagem definida por layout. */
+  tabs?: ReactNode;
+}
 
 export function PageHeader({
   className,
@@ -436,39 +515,40 @@ export function PageHeader({
   if (integralState) return <></>;
 
   const nodes = flattenPageHeaderChildren(children);
-  const localNavigation = nodes.filter(
-    (node) =>
-      isValidElement(node) &&
-      node.type === PageNavigation &&
-      hasRenderableNode((node.props as { children?: ReactNode }).children),
-  );
   const localActions = nodes.filter(
     (node) =>
       isValidElement(node) &&
       node.type === PageActions &&
       hasRenderableNode((node.props as { children?: ReactNode }).children),
   ) as ReactElement<HTMLAttributes<HTMLDivElement>>[];
-  if (shell?.navigation !== undefined && localNavigation.length > 0) {
-    throw new Error(
-      "PageHeader não combina a navegação de PageShell com PageNavigation local.",
-    );
-  }
   if (localActions.length > 1) {
     throw new Error("PageHeader aceita no máximo um PageActions.");
   }
+  const backs = nodes.filter(
+    (node) => isValidElement(node) && node.type === PageBack,
+  );
+  if (backs.length > 1)
+    throw new Error(
+      "PageHeader aceita no máximo um de cada slot, incluindo PageBack.",
+    );
   const structuralChildren = nodes.filter(
     (node) =>
       !(
         isValidElement(node) &&
-        [PageNavigation, PageActions].includes(
-          node.type as typeof PageNavigation,
-        )
+        [PageBack, PageActions].includes(node.type as typeof PageActions)
       ),
   );
   const pageActions = localActions[0];
   const mergedActions =
-    shell?.actions === undefined && pageActions === undefined ? null : (
+    shell?.actions === undefined &&
+    shell?.navigation === undefined &&
+    pageActions === undefined &&
+    !nodes.some(
+      (node) => isValidElement(node) && node.type === PageBack,
+    ) ? null : (
       <PageActions {...pageActions?.props}>
+        {nodes.filter((node) => isValidElement(node) && node.type === PageBack)}
+        {backs.length === 0 ? shell?.navigation : null}
         {shell?.actions}
         {pageActions?.props.children}
       </PageActions>
@@ -476,8 +556,7 @@ export function PageHeader({
   if (
     structuralChildren.length === 0 &&
     mergedActions === null &&
-    localNavigation.length === 0 &&
-    shell?.navigation === undefined
+    !hasRenderableNode(props.tabs)
   ) {
     return <></>;
   }
@@ -487,37 +566,23 @@ export function PageHeader({
         name="PageHeader"
         slot="page"
         slots={{
-          leading: [PageBack, PageNavigation],
           title: PageTitle,
           description: PageDescription,
+          meta: PageMeta,
           actions: PageActions,
         }}
-        leadingPlacement={
-          nodes.some(
-            (node) => isValidElement(node) && node.type === PageTitle,
-          ) ||
-          (localNavigation.length === 0 &&
-            shell?.navigation === undefined &&
-            !nodes.some(
-              (node) => isValidElement(node) && node.type === PageBack,
-            ))
-            ? "above"
-            : "inline"
-        }
-        titleRequired={false}
+        leadingPlacement="inline"
+        titleRequired
         rowClassName={surfaceHeaderRowClasses("page")}
         className={cn(
-          "shrink-0",
-          surfaceRegionClasses("page", page!.surfaceLayout, "header"),
+          "mb-2 shrink-0",
+          surfaceRegionClasses("page", "header", {
+            bounded: false,
+          }),
           className,
         )}
         {...props}
       >
-        {shell?.navigation === undefined ? (
-          localNavigation
-        ) : (
-          <PageNavigation>{shell.navigation}</PageNavigation>
-        )}
         {structuralChildren}
         {mergedActions}
       </StructuralHeader>
@@ -525,46 +590,18 @@ export function PageHeader({
   );
 }
 
-/** Primeiro bloco do corpo, separado dos controles do cabeçalho. */
-export function PageIntro({
-  className,
-  children,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
-  requireParent(useContext(PageBodyContext), "PageIntro", "PageBody");
-  const integralState = useContext(PageIntegralStateContext);
-  if (integralState) return <></>;
-  return (
-    <PageIntroContext.Provider value>
-      <StructuralHeader
-        name="PageIntro"
-        slot="page-intro"
-        slots={{
-          title: PageTitle,
-          description: PageDescription,
-          actions: PageIntroActions,
-        }}
-        leadingPlacement="inline"
-        titleRequired
-        className={className}
-        {...props}
-      >
-        {children}
-      </StructuralHeader>
-    </PageIntroContext.Provider>
-  );
-}
-
-/** Ações locais do conteúdo, distintas das ações da superfície em PageActions. */
-export function PageIntroActions({
+/** Badges, datas e autoria abaixo do título e da orientação. */
+export function PageMeta({
   className,
   ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
-  requireParent(useContext(PageIntroContext), "PageIntroActions", "PageIntro");
+}: HTMLAttributes<HTMLDivElement>) {
+  const header = useContext(PageHeaderContext);
+  const inside = header;
+  if (!inside) throw new Error("PageMeta deve estar dentro de PageHeader.");
   return (
     <div
-      data-slot="page-intro-actions"
-      className={cn(structuralHeaderClasses.page.actions, className)}
+      data-slot="page-meta"
+      className={cn(structuralMetaClasses, className)}
       {...props}
     />
   );
@@ -575,17 +612,12 @@ export function PageTitle({
   ...props
 }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
   const insideHeader = useContext(PageHeaderContext);
-  const insideIntro = useContext(PageIntroContext);
-  requireParent(
-    insideHeader || insideIntro,
-    "PageTitle",
-    "PageHeader ou PageIntro",
-  );
+  requireParent(insideHeader, "PageTitle", "PageHeader");
   usePageHeadingPresence();
   return (
     <h1
       data-slot="page-title"
-      className={cn(structuralHeaderClasses.page.title, className)}
+      className={cn(surfaceTitleClasses("page"), "text-3xl", className)}
       {...props}
     />
   );
@@ -597,8 +629,7 @@ export function PageDescription({
   ...props
 }: HTMLAttributes<HTMLParagraphElement>): ReactElement {
   const header = useContext(PageHeaderContext);
-  const intro = useContext(PageIntroContext);
-  requireParent(header || intro, "PageDescription", "PageHeader ou PageIntro");
+  requireParent(header, "PageDescription", "PageHeader");
   return (
     <p
       data-slot="page-description"
@@ -616,41 +647,29 @@ export function PageActions({
   requireParent(insideHeader, "PageActions", "PageHeader");
   const target = useContext(PageActionsTargetContext);
   const actions = (
-    <div
+    <ButtonGroup
+      mode="spaced"
       data-slot="page-actions"
-      className={cn(structuralHeaderClasses.page.actions, className)}
+      className={cn("w-auto shrink-0 items-center", className)}
       {...props}
     />
   );
   return target === null ? actions : createPortal(actions, target);
 }
 
-export interface PageBackProps extends Omit<
-  ComponentProps<"a">,
-  "children" | "href"
-> {
+export type PageBackProps = {
   /** Nome visível do destino pai e base do nome acessível. */
   children: ReactNode;
-  /** Destino explícito. Obrigatório: sem `href` o elemento não é tabulável nem expõe
-   *  `role="link"`. */
-  href: string;
-}
-
-/** Região introdutória para uma trilha estrutural com mais de um ancestral relevante. */
-export function PageNavigation({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
-  const insideHeader = useContext(PageHeaderContext);
-  requireParent(insideHeader, "PageNavigation", "PageHeader");
-  return (
-    <div
-      data-slot="page-navigation-content"
-      className={cn("min-w-0", className)}
-      {...props}
-    />
-  );
-}
+  className?: string;
+  "aria-label"?: string;
+} & (
+  | (Omit<ComponentProps<"a">, "children" | "href"> & {
+      href: string;
+      onBack?: never;
+      disabled?: never;
+    })
+  | { onBack: () => void; href?: never; disabled?: boolean }
+);
 
 export function PageBack({
   children,
@@ -663,42 +682,73 @@ export function PageBack({
   const destination =
     typeof children === "string" ? children : "a página anterior";
   const accessibleLabel = ariaLabel ?? `Voltar para ${destination}`;
-  const back = (
-    <Button asChild variant="ghost" size="icon-sm">
-      <a
+  const content = (
+    <>
+      <ArrowLeft aria-hidden="true" />
+      <span className="sr-only">{children}</span>
+    </>
+  );
+  const back =
+    props.onBack !== undefined ? (
+      <Button
+        context="neutral"
+        variant="ghost"
+        size="icon"
         data-slot="page-back"
         aria-label={accessibleLabel}
-        title={accessibleLabel}
         className={className}
-        {...props}
+        disabled={props.disabled}
+        onClick={props.onBack}
       >
-        <ArrowLeft aria-hidden="true" />
-        <span className="sr-only">{children}</span>
-      </a>
-    </Button>
+        {content}
+      </Button>
+    ) : (
+      <Button asChild context="neutral" variant="ghost" size="icon">
+        <a
+          data-slot="page-back"
+          aria-label={accessibleLabel}
+          className={className}
+          {...props}
+        >
+          {content}
+        </a>
+      </Button>
+    );
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{back}</TooltipTrigger>
+      <TooltipContent>{accessibleLabel}</TooltipContent>
+    </Tooltip>
   );
-  return back;
 }
 
 export function PageBody({
+  flush = false,
   className,
   contentClassName,
   children,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   contentClassName?: string;
+  /** Canvas e outras regiões que governam o próprio recuo. */
+  flush?: boolean;
 }): ReactElement {
   const page = useContext(PageContext);
   const fill = useFillRegion();
+  const integralState = useContext(PageIntegralStateContext);
   requireParent(page !== null, "PageBody", "Page");
-  validateSurfaceIntro(children, PageIntro, "PageBody");
   return (
     <div
       data-slot="page-body"
       {...fill.attributes}
       className={cn(
-        "flex min-h-0 flex-1 flex-col",
-        fill.filling ? "overflow-hidden" : "overflow-y-auto",
+        "flex flex-col",
+        page!.layout === "flow" && !integralState
+          ? "shrink-0"
+          : [
+              "min-h-0 flex-1",
+              fill.filling ? "overflow-hidden" : "overflow-y-auto",
+            ],
         className,
       )}
       {...props}
@@ -708,9 +758,14 @@ export function PageBody({
           data-slot="page-body-content"
           {...fill.attributes}
           className={cn(
-            "mx-auto w-full max-w-7xl",
-            surfaceRegionClasses("page", page!.surfaceLayout, "body"),
-            fill.filling ? "min-h-0 flex-1" : "min-h-full shrink-0",
+            "w-full",
+            surfaceRegionClasses("page", "body", {
+              flush,
+              bounded: false,
+            }),
+            fill.filling || integralState
+              ? "min-h-0 flex-1"
+              : "min-h-full shrink-0",
             page!.contentClassName,
             contentClassName,
           )}
@@ -733,7 +788,9 @@ export function PageFooter({
       data-slot="page-footer"
       className={cn(
         "mt-auto flex min-h-[3.75rem] shrink-0 items-center justify-end",
-        surfaceRegionClasses("page", page!.surfaceLayout, "footer"),
+        surfaceRegionClasses("page", "footer", {
+          bounded: false,
+        }),
         className,
       )}
       {...props}