@softize/opus 27.1.0 → 28.0.0

package/registry/skills/build-opus-ui/references/ui-patterns.md

@@ -9,24 +9,22 @@
   lista; não reconstruir essa decisão com condicionais no componente da página.
 - `Page` fornece o `<main>` e o container centralizado com teto padrão de `80rem`. Sua forma
   explícita exige `PageBody`, exatamente um heading principal e aceita `PageHeader` e `PageFooter`.
-  Declare esse heading com `PageTitle` no header, `Surface level={1}` ou um `PageState` ativo no
-  body. `PageHeader` é a única introdução estrutural e reúne navegação, título, `PageDescription`
-  opcional e ações. `title`, `description` e `actions` no próprio `Page` abreviam o caso direto.
-  Não misturar as duas formas. Alterar `className` apenas quando a superfície tiver uma necessidade
-  real de largura; não reconstruir esse container em cada rota.
-- `PageHeader` declara navegação contextual, título, subheading opcional e ações. Em uma subpágina simples, `PageBack`
-  recebe o destino pai explícito e aparece acima da linha do título como controle somente com
-  ícone. Para mais de um ancestral relevante, use
-  `Breadcrumb` dentro de `PageNavigation`. Não combine retorno e breadcrumb nem crie um chrome
-  paralelo para uma `Page`. `PageActionsTarget` fica reservado a workspaces imersivos que já
-  possuam chrome próprio.
+  Declare esse heading com PageTitle na PageIntro ou no PageHeader compacto, Surface level={1}
+  ou PageState ativo. A intro abre o body; ações locais usam PageIntroActions, enquanto PageActions
+  pertence ao header. A forma curta coloca title/description na intro e actions no header.
+  Não misturar as duas formas. Para ajustar a largura interna, usar contentClassName; className pertence ao container externo.
+- Na composição com intro, PageHeader reúne navegação contextual e ações da superfície na mesma
+  linha. PageBack recebe o destino pai explícito; para vários ancestrais relevantes, usar Breadcrumb
+  em PageNavigation. Não combinar retorno e breadcrumb, nem criar chrome paralelo. Na composição
+  compacta, título e orientação permanecem no header. PageActionsTarget fica reservado a workspaces
+  imersivos com chrome próprio.
 - Quando shell e rota conhecem partes diferentes da mesma página, use `PageShell` ao redor da rota.
   O shell entrega navegação e ações ao `PageHeader` descendente sem criar uma barra visual.
-  Ações com texto no cabeçalho usam o tamanho `default`, como as ações de footer de Dialog e Drawer;
-  ações somente com ícone de chrome usam `icon`. O tamanho `sm` fica para ações operacionais em
+  Ações com texto no cabeçalho usam `sm`, e ações somente com ícone usam `icon-sm`.
+  Ações de footer de Dialog e Drawer conservam `default`. O tamanho `sm` fica para ações operacionais em
   toolbar, seção ou coleção densa, e `xs`/`icon-xs` para ações internas de linha ou célula. Contexto
   e variante resolvem a hierarquia visual sem alterar essa medida. Em uma coleção, a ação de
-  criar usa botão textual `default`, sem ícone, no extremo oposto do `SurfaceHeader`. Não monte
+  criar usa botão textual `sm`, sem ícone, no extremo oposto do `SurfaceHeader`. Não monte
   cabeçalho paralelo, portal ou seletor global para reconstruir essa composição.
 - `PageState` substitui todo o conteúdo principal quando a página carrega, falha ou está vazia. Na
   forma curta ele pode ser escrito como filho direto de `Page`, que cria o `PageBody`; na forma
@@ -41,7 +39,7 @@
 SurfaceTitle, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + SurfaceFooter`.
   Os slots nunca ficam soltos. `title`, `description`, `count`, `media` e `actions` são a abreviação
   para o caso direto e não podem ser misturados ao header explícito. Em `level={1}`, ações da
-  coleção ficam no extremo oposto ao título; a criação usa botão textual `default`, sem ícone, com
+  coleção ficam no extremo oposto ao título; a criação usa botão textual `sm`, sem ícone, com
   `Criar recurso`.
   O diálogo de criação usa `Criar recurso` e o de edição, `Editar recurso`. `level` preserva a
   hierarquia semântica do heading. `Surface framed` aceita `layout="sectioned"`; declare
@@ -229,3 +227,7 @@ abaixo do controle. Reservar `FieldSpec.help` ao ícone com detalhe complementar
 Omitir repetição da label; combinar ambos somente com funções distintas. Regra de vários campos
 pertence ao corpo ou ao grupo. Em composição manual, `FieldDescription` e erro entram juntos no
 `aria-describedby` do controle.
+
+- Manter header e footer de Page fora da rolagem vertical. PageBody é o viewport em flow; em fill,
+  repassar a altura à lista quando ela assume a rolagem. Não reconstruir a fixação com sticky ou
+  fixed nem tornar PageShell uma segunda região de rolagem vertical.

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

@@ -362,6 +362,8 @@ export interface ActionListProps<TInput, TItem> {
   layout?: "flow" | "fill";
   /** Ações do consumidor no fim da barra de filtros, depois dos controles de exibição. */
   toolbarActions?: ReactNode;
+  /** Controles da visualização ativa, imediatamente após seu seletor. */
+  viewControls?: ReactNode;
   /** Tabela explícita — sobrepõe as colunas do contrato. */
   columns?: ActionListColumn<TItem>[];
   /** Células custom POR CIMA das colunas do contrato (chave = column.key). */
@@ -610,19 +612,18 @@ function FilterField({
   );
   const runtimeOptions =
     lookup.onSearch !== undefined && lookup.query !== ""
-      ? base.filter((option) =>
-          selectedValues.has(option.value) ||
-          option.label
-            .toLocaleLowerCase()
-            .includes(lookup.query.toLocaleLowerCase()),
+      ? base.filter(
+          (option) =>
+            selectedValues.has(option.value) ||
+            option.label
+              .toLocaleLowerCase()
+              .includes(lookup.query.toLocaleLowerCase()),
         )
       : base;
   const selectedResolvedOptions = [...selectedValues]
     .map((selectedValue) => resolvedOptionByValue.current.get(selectedValue))
     .filter((option): option is SelectOption => option !== undefined);
-  const mergeUniqueOptions = (
-    ...groups: SelectOption[][]
-  ): SelectOption[] => {
+  const mergeUniqueOptions = (...groups: SelectOption[][]): SelectOption[] => {
     const merged = new Map<string, SelectOption>();
     for (const group of groups) {
       for (const option of group) {
@@ -1781,6 +1782,7 @@ export function ActionList<TInput, TItem>({
   input,
   layout: layoutProp,
   toolbarActions,
+  viewControls,
   columns,
   cells,
   filterOptions,
@@ -1898,6 +1900,7 @@ export function ActionList<TInput, TItem>({
     filterSpecs.length > 0 ||
     periods.length > 0 ||
     hasSegment ||
+    viewControls != null ||
     hasTable;
 
   // — Input efetivo: escopo base + filtros preenchidos + período (→ from/to) + q + sort —
@@ -2152,9 +2155,7 @@ export function ActionList<TInput, TItem>({
     return label === null ? [] : [{ value: field, label }];
   });
   const activeSortLabel =
-    activeSort === null
-      ? null
-      : sortLabelFor(activeSort.field);
+    activeSort === null ? null : sortLabelFor(activeSort.field);
   const activeSortDirection =
     activeSort?.dir === "asc" ? "crescente" : "decrescente";
   const sortCustomized =
@@ -2219,35 +2220,6 @@ export function ActionList<TInput, TItem>({
         refreshing={isLoading}
         controls={
           <>
-            {hasSegment && (
-              <ToggleGroup
-                type="single"
-                variant="outline"
-                data-slot="action-list-views"
-                className="shrink-0"
-                value={activeView}
-                onValueChange={(key) => {
-                  // No single o Radix DESMARCA ao clicar no ativo (chega '') — o segment
-                  // de views sempre tem uma ativa, então o vazio não passa.
-                  if (key !== "")
-                    setState({
-                      ...state,
-                      view: key === viewEntries[0]?.[0] ? null : key,
-                    });
-                }}
-              >
-                {viewEntries.map(([key, label, icon]) => (
-                  <Tooltip key={key}>
-                    <TooltipTrigger asChild>
-                      <Toggle value={key} aria-label={label}>
-                        {icon ?? label}
-                      </Toggle>
-                    </TooltipTrigger>
-                    <TooltipContent>{label}</TooltipContent>
-                  </Tooltip>
-                ))}
-              </ToggleGroup>
-            )}
             {/* Configuração de EXIBIÇÃO — sempre presente (em qualquer view): colunas quando a
               tabela está ativa, itens por página sempre, e o que vier depois. */}
             <Popover>
@@ -2292,7 +2264,11 @@ export function ActionList<TInput, TItem>({
                               <button
                                 type="button"
                                 onClick={() =>
-                                  setState({ ...state, sort: defaultSort, page: 1 })
+                                  setState({
+                                    ...state,
+                                    sort: defaultSort,
+                                    page: 1,
+                                  })
                                 }
                                 className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                               >
@@ -2324,7 +2300,12 @@ export function ActionList<TInput, TItem>({
                             }
                             options={[
                               ...(defaultSort === null
-                                ? [{ value: "__none__", label: "Sem ordenação" }]
+                                ? [
+                                    {
+                                      value: "__none__",
+                                      label: "Sem ordenação",
+                                    },
+                                  ]
                                 : []),
                               ...sortableFields,
                             ]}
@@ -2468,6 +2449,36 @@ export function ActionList<TInput, TItem>({
                 </div>
               </PopoverContent>
             </Popover>
+            {hasSegment && (
+              <ToggleGroup
+                type="single"
+                variant="outline"
+                data-slot="action-list-views"
+                className="shrink-0"
+                value={activeView}
+                onValueChange={(key) => {
+                  // No single o Radix DESMARCA ao clicar no ativo (chega '') — o segment
+                  // de views sempre tem uma ativa, então o vazio não passa.
+                  if (key !== "")
+                    setState({
+                      ...state,
+                      view: key === viewEntries[0]?.[0] ? null : key,
+                    });
+                }}
+              >
+                {viewEntries.map(([key, label, icon]) => (
+                  <Tooltip key={key}>
+                    <TooltipTrigger asChild>
+                      <Toggle value={key} aria-label={label}>
+                        {icon ?? label}
+                      </Toggle>
+                    </TooltipTrigger>
+                    <TooltipContent>{label}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </ToggleGroup>
+            )}
+            {viewControls}
           </>
         }
         actions={toolbarActions}
@@ -2838,10 +2849,9 @@ export function ActionList<TInput, TItem>({
   //   Encosta na última linha: a borda de cima é o fecho da tabela, não a de um
   //   bloco solto, então o rodapé não entra no `gap` da pilha.
   //   Altura: 2.5rem de piso (a mesma do `TableHead`) para a faixa não mudar de
-  //   tamanho quando o pager aparece — ele ocupa 1.75rem e cabe dentro do piso.
-  //   O padding fica em 0.25rem só para o dia em que o conteúdo passar disso:
-  //   com `py-2` o padding empurraria o pager para fora e a faixa voltaria a
-  //   crescer —
+  //   tamanho quando o pager aparece — ele ocupa 2rem e cabe dentro do piso.
+  //   O padding vertical de 0.125rem acomoda o pager de 2rem e a borda dentro
+  //   do piso, mantendo a altura igual quando não há paginação.
   const pages =
     total !== undefined
       ? Math.max(1, Math.ceil(total / (state.limit ?? pageSize)))
@@ -2872,7 +2882,7 @@ export function ActionList<TInput, TItem>({
     total !== undefined && !isError && activeGroupBy !== null ? (
       <div
         data-slot="action-list-footer"
-        className="flex min-h-10 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-1 text-xs text-muted-foreground"
+        className="flex min-h-10 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-0.5 text-xs text-muted-foreground"
       >
         {displaySummary}
         <span className={cn(displaySummary === null && "ml-auto")}>
@@ -2882,7 +2892,7 @@ export function ActionList<TInput, TItem>({
     ) : total !== undefined && !isError ? (
       <div
         data-slot="action-list-footer"
-        className="grid min-h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-t border-border px-3 py-1 text-xs text-muted-foreground"
+        className="grid min-h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-t border-border px-3 py-0.5 text-xs text-muted-foreground"
       >
         <span className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
           <span className="whitespace-nowrap">
@@ -2893,7 +2903,7 @@ export function ActionList<TInput, TItem>({
         </span>
         {pages > 1 && (
           // A primitiva pública na escala densa do rodapé: setas no quadrado `icon-sm`,
-          // números `h-7 min-w-7` que crescem com os dígitos (5726 e 5727 não se colam).
+          // números `sm` que crescem com os dígitos (5726 e 5727 não se colam).
           <Pagination className="mx-0 w-auto">
             <PaginationContent className="gap-0.5">
               <PaginationItem>
@@ -2915,7 +2925,8 @@ export function ActionList<TInput, TItem>({
                     <PaginationLink
                       page={n}
                       isActive={n === state.page}
-                      className="h-7 min-w-7 text-xs"
+                      size="sm"
+                      className="text-xs"
                       onClick={() => goTo(n)}
                     />
                   </PaginationItem>
@@ -2977,9 +2988,7 @@ export function ActionList<TInput, TItem>({
               className={cn(
                 "min-h-0",
                 layout === "fill" && "overflow-auto",
-                busy &&
-                  items.length > 0 &&
-                  "pointer-events-none opacity-60",
+                busy && items.length > 0 && "pointer-events-none opacity-60",
               )}
             >
               {body}

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

@@ -31,15 +31,27 @@ import {
 } from "./page-heading-context.tsx";
 import {
   StructuralHeader,
+  validateSurfaceIntro,
   structuralHeaderClasses,
 } from "./structural-header.tsx";
 import { PageState, PageStatePresenceProvider } from "./page-state.tsx";
-import { FillRoot, fillRegionClassName, useFillRegion } from "./fill-region.ts";
+import { FillRoot, useFillRegion } from "./fill-region.ts";
 
-interface PageContextValue {}
+import {
+  surfaceHeaderRowClasses,
+  surfaceRegionClasses,
+  type SurfaceLayout,
+} from "./surface-anatomy.ts";
+
+interface PageContextValue {
+  surfaceLayout: SurfaceLayout;
+  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 {
@@ -101,7 +113,7 @@ export function PageShell({
       <PageShellContext.Provider value={shell}>
         <div
           data-slot="page-shell-content"
-          className="min-h-0 min-w-0 flex-1 overflow-auto [&>*]:min-w-[64rem]"
+          className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-auto overflow-y-auto [&>*]:min-w-[64rem]"
         >
           {children}
         </div>
@@ -136,13 +148,17 @@ interface PageBaseProps extends Omit<
   HTMLAttributes<HTMLElement>,
   "children" | "title"
 > {
-  /** Classes do container. Default: centralizado com `max-w-7xl` (80rem). */
+  /** Classes do container externo. O conteúdo do Body mantém o teto de 80rem. */
   className?: string;
+  /** Classes do conteúdo centralizado, incluindo largura máxima e alinhamento. */
+  contentClassName?: string;
   /**
-   * `fill` limita a página à altura do shell para que regiões internas assumam a rolagem.
+   * `flow` mantém a rolagem no body; `fill` permite que regiões internas assumam a rolagem.
    * 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;
 }
 
 interface PageShorthandProps extends PageBaseProps {
@@ -183,6 +199,7 @@ function countDirectChildrenOfType(
 
 function countPageBodyHeadings(node: ReactNode): {
   content: number;
+  intro: number;
   state: number;
 } {
   return Children.toArray(node).reduce(
@@ -196,6 +213,7 @@ function countPageBodyHeadings(node: ReactNode): {
       if (child.type === PageState && props.status !== "ready") {
         return {
           content: total.content,
+          intro: total.intro,
           state: total.state + 1,
         };
       }
@@ -205,10 +223,11 @@ 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, state: 0 },
+    { content: 0, intro: 0, state: 0 },
   );
 }
 
@@ -229,12 +248,13 @@ export function Page({
   description,
   actions,
   layout = "flow",
+  surfaceLayout = "sectioned",
+  contentClassName,
   className,
   children,
   ...props
 }: PageProps): ReactElement {
   const shell = useContext(PageShellContext);
-  const insideShell = shell !== null;
   const shorthand = title !== undefined;
   const nodes = flattenPageHeaderChildren(children);
   const headers = nodes.filter(
@@ -298,6 +318,7 @@ export function Page({
       );
     }
     const bodyHeadingSources = bodies.reduce<{
+      intro: number;
       content: number;
       state: number;
     }>(
@@ -307,17 +328,20 @@ export function Page({
         );
         return {
           content: total.content + count.content,
+          intro: total.intro + count.intro,
           state: total.state + count.state,
         };
       },
-      { content: 0, state: 0 },
+      { content: 0, intro: 0, state: 0 },
     );
     const structuralHeadingSources =
       headers.reduce<number>(
         (total, header) =>
           total + countDirectChildrenOfType(header as ReactElement, PageTitle),
         0,
-      ) + bodyHeadingSources.content;
+      ) +
+      bodyHeadingSources.content +
+      bodyHeadingSources.intro;
     const headingSources =
       bodyHeadingSources.state > 0
         ? bodyHeadingSources.state + bodyHeadingSources.content
@@ -329,7 +353,7 @@ export function Page({
     );
     if (headingSources > 1 || (headingSources === 0 && !hasOpaqueBodyContent)) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, Surface level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Surface level={1} ou PageState ativo dentro de PageBody.",
       );
     }
   }
@@ -338,20 +362,24 @@ export function Page({
     if (integralState !== hasActiveIntegralState) return;
     if (headingCount.current !== 1) {
       throw new Error(
-        "Page explícito exige exatamente um heading principal em PageHeader, Surface level={1} ou PageState ativo dentro de PageBody.",
+        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Surface level={1} ou PageState ativo dentro de PageBody.",
       );
     }
   });
   const content = shorthand ? (
     <>
       <PageHeader>
-        <PageTitle>{title}</PageTitle>
-        {description !== undefined && (
-          <PageDescription>{description}</PageDescription>
-        )}
         {actions !== undefined && <PageActions>{actions}</PageActions>}
       </PageHeader>
-      <PageBody>{children}</PageBody>
+      <PageBody>
+        <PageIntro>
+          <PageTitle>{title}</PageTitle>
+          {description !== undefined && (
+            <PageDescription>{description}</PageDescription>
+          )}
+        </PageIntro>
+        {children}
+      </PageBody>
     </>
   ) : (
     <>
@@ -364,29 +392,22 @@ export function Page({
   );
 
   return (
-    <PageContext.Provider value={{}}>
+    <PageContext.Provider value={{ surfaceLayout, contentClassName }}>
       <PageIntegralStateContext.Provider value={integralState}>
         <PageStatePresenceProvider register={registerIntegralState}>
           <PageHeadingPresenceProvider register={registerHeading}>
             <main
               data-slot="page"
               data-layout={layout}
+              data-surface-layout={surfaceLayout}
               className={cn(
-                "min-w-[64rem] flex-1",
-                insideShell && "min-h-full",
-                layout === "fill" &&
-                  "flex h-full min-h-0 flex-col overflow-hidden",
-                integralState && "flex min-h-full flex-col",
+                "flex h-full min-h-0 min-w-[64rem] flex-1 flex-col overflow-hidden",
               )}
               {...props}
             >
               <div
                 className={cn(
-                  "mx-auto max-w-7xl space-y-6 px-8 py-8",
-                  layout === "fill" &&
-                    "flex h-full min-h-0 w-full flex-1 flex-col",
-                  integralState &&
-                    "flex min-h-full w-full flex-1 flex-col space-y-0",
+                  "flex h-full min-h-0 w-full flex-1 flex-col",
                   className,
                 )}
               >
@@ -455,6 +476,7 @@ export function PageHeader({
   if (
     structuralChildren.length === 0 &&
     mergedActions === null &&
+    localNavigation.length === 0 &&
     shell?.navigation === undefined
   ) {
     return <></>;
@@ -470,9 +492,25 @@ export function PageHeader({
           description: PageDescription,
           actions: PageActions,
         }}
-        leadingPlacement="above"
+        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}
-        className={className}
+        rowClassName={surfaceHeaderRowClasses("page")}
+        className={cn(
+          "shrink-0",
+          surfaceRegionClasses("page", page!.surfaceLayout, "header"),
+          className,
+        )}
         {...props}
       >
         {shell?.navigation === undefined ? (
@@ -487,12 +525,62 @@ 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({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement {
+  requireParent(useContext(PageIntroContext), "PageIntroActions", "PageIntro");
+  return (
+    <div
+      data-slot="page-intro-actions"
+      className={cn(structuralHeaderClasses.page.actions, className)}
+      {...props}
+    />
+  );
+}
+
 export function PageTitle({
   className,
   ...props
 }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
   const insideHeader = useContext(PageHeaderContext);
-  requireParent(insideHeader, "PageTitle", "PageHeader");
+  const insideIntro = useContext(PageIntroContext);
+  requireParent(
+    insideHeader || insideIntro,
+    "PageTitle",
+    "PageHeader ou PageIntro",
+  );
   usePageHeadingPresence();
   return (
     <h1
@@ -508,7 +596,9 @@ export function PageDescription({
   className,
   ...props
 }: HTMLAttributes<HTMLParagraphElement>): ReactElement {
-  requireParent(useContext(PageHeaderContext), "PageDescription", "PageHeader");
+  const header = useContext(PageHeaderContext);
+  const intro = useContext(PageIntroContext);
+  requireParent(header || intro, "PageDescription", "PageHeader ou PageIntro");
   return (
     <p
       data-slot="page-description"
@@ -574,7 +664,7 @@ export function PageBack({
     typeof children === "string" ? children : "a página anterior";
   const accessibleLabel = ariaLabel ?? `Voltar para ${destination}`;
   const back = (
-    <Button asChild variant="ghost" size="icon">
+    <Button asChild variant="ghost" size="icon-sm">
       <a
         data-slot="page-back"
         aria-label={accessibleLabel}
@@ -592,25 +682,42 @@ export function PageBack({
 
 export function PageBody({
   className,
+  contentClassName,
   children,
   ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
+}: HTMLAttributes<HTMLDivElement> & {
+  contentClassName?: string;
+}): ReactElement {
   const page = useContext(PageContext);
-  const integralState = useContext(PageIntegralStateContext);
   const fill = useFillRegion();
   requireParent(page !== null, "PageBody", "Page");
+  validateSurfaceIntro(children, PageIntro, "PageBody");
   return (
     <div
       data-slot="page-body"
       {...fill.attributes}
       className={cn(
-        "flex flex-col gap-6 *:shrink-0",
-        (integralState || fill.filling) && fillRegionClassName,
+        "flex min-h-0 flex-1 flex-col",
+        fill.filling ? "overflow-hidden" : "overflow-y-auto",
         className,
       )}
       {...props}
     >
-      {fill.provide(children)}
+      <PageBodyContext.Provider value>
+        <div
+          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",
+            page!.contentClassName,
+            contentClassName,
+          )}
+        >
+          {fill.provide(children)}
+        </div>
+      </PageBodyContext.Provider>
     </div>
   );
 }
@@ -625,7 +732,8 @@ export function PageFooter({
     <div
       data-slot="page-footer"
       className={cn(
-        "mt-auto flex h-[3.75rem] shrink-0 items-center justify-end border-t bg-muted/30 p-3",
+        "mt-auto flex min-h-[3.75rem] shrink-0 items-center justify-end",
+        surfaceRegionClasses("page", page!.surfaceLayout, "footer"),
         className,
       )}
       {...props}