/** Layout component prop types — @see docs/COMPONENTS.md#layout */ import type * as React from "react"; import type { ComponentType, ReactNode, SVGProps } from "react"; import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js"; import type { EmptyStateToneProp } from "./data-display.prop.js"; /** * Arrangement of the page header's title band and its `extra` slot below the 640px step. * `responsive-inline` keeps `extra` beside the title band at the `--page-header-extra-measure` * measure, letting the title/subtitle wrap into what is left. */ export type PageContainerHeaderLayoutProp = "stack" | "responsive-inline"; /** Whole-page semantic composition owned by PageContainer. */ export type PageContainerPresetProp = "default" | "admin-collection"; /** * Bounded page MEASURE — the shared inline cap applied to the page header AND body together, so * the header `extra` action ends on the same edge as the body surface. `default` applies NO cap — * the page is fluid exactly as before. */ export type PageContainerMeasureProp = "default" | "narrow" | "medium"; /** * What the page's top row IS — the question that decides its type step, not how big you want it. * `document` (default) — the row is the page's TITLE: a record, a form, a collection, a report. */ export type PageContainerHeaderScaleProp = "document" | "chrome"; /** * @see PageContainer — the header's trailing slot, one node or two named sub-slots. * * The bare node is the shape every page already passes and stays the whole API for a single * action cluster. `{ start, end }` splits that cluster in two so a page can put something AFTER * the actions: the convention a consumer's four record screens share is identity → actions → * pager LAST, and with one slot the pager had to live in a second header band inside the body, * so the app carried two header shapes (gh#734). * * The shape is `TabsExtraProp`'s, deliberately — `Tabs.extra` already accepts exactly this union * for exactly this reason, and a second spelling of one axis is what `check:prop-vocabulary` * exists to prevent. Logical inline names (`start`/`end`, never `left`/`right`), so the slots * swap sides under `dir="rtl"` with no second code path. */ export type PageContainerExtraProp = ExtraProp | { start?: ReactNode; end?: ReactNode; }; /** @see PageContainer */ export type PageContainerProp = { toolbarPad?: PadProp; footerPad?: PadProp; title: TitleProp; subtitle?: SubtitleProp; /** * Status/meta band rendered beside the title inside the heading — StatusBadge, environment tag, * "updated …" meta text. */ status?: StatusProp; /** * Pending state for the title band while the page's own record resolves. Renders the * title/subtitle as `ui-skeleton-block` placeholders and marks the header `aria-busy`, keeping * the `

` in the document with an sr-only accessible name (an empty heading is an axe * violation) so the page's heading outline never disappears mid-load. */ headerLoading?: boolean; /** @see PageContainerExtraProp */ extra?: PageContainerExtraProp; /** * FIXED chrome band between the page header and the scrolling body — a filter strip, a status * bar, a "channel workflow" rail. It is a first-class page-chrome slot precisely because the * only alternative was hand-laying `position: sticky` at the call site (which the design system * forbids) or putting the strip inside the body, where it scrolls away. */ toolbar?: ReactNode; footer?: FooterProp; breadcrumb?: BreadcrumbProp; /** * Override the breadcrumb `