prime-ui-kit 0.16.0 → 0.17.0

package/dist/index.js

@@ -2,7 +2,6 @@
 
 import {
   Accordion,
-  AppHeader,
   AppShell,
   Banner,
   BottomNav,
@@ -43,8 +42,7 @@ import {
   NativeSelect,
   NotificationCard,
   NotificationProvider,
-  PageContent,
-  PageToolbar,
+  Page,
   Pagination,
   ProgressCircle,
   Radio,
@@ -88,7 +86,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-6TPHKCUJ.js";
+} from "./chunks/chunk-A4WE3UNC.js";
 import {
   Avatar,
   Badge,
@@ -123,14 +121,13 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-4PSQ64S4.js";
+} from "./chunks/chunk-7WWZYGRC.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize
-} from "./chunks/chunk-U3Q2I3MY.js";
+} from "./chunks/chunk-2ODXLPW3.js";
 export {
   Accordion,
-  AppHeader,
   AppShell,
   Avatar,
   Badge,
@@ -185,8 +182,7 @@ export {
   NotificationCard,
   NotificationProvider,
   OVERLAY_CONTENT_SIZE,
-  PageContent,
-  PageToolbar,
+  Page,
   Pagination,
   Popover,
   ProgressBar,

package/dist/internal/barPlan.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The layout plan of a page's top bar: which of its steps the row takes at a given width. One
+ * pure function of widths measured at their natural size, so a plan never feeds back into the
+ * widths it was chosen from (no re-measure loop).
+ *
+ * The steps, in the order the row gives way:
+ * - `one` — heading · tools · actions on one line;
+ * - `below` — the tools move to a line of their own under the heading and the actions;
+ * - `icons-secondary` — the secondary buttons show only their icons;
+ * - `icons` — the primary button too;
+ * - `fold` — the secondary buttons fold into «⋯» (only when that is narrower than their icons).
+ *
+ * Past the last step a heading with a path stacks (`stackHeading`): the path over the title, the
+ * title and the description wrapping, so no line of it is cut to a fragment. Without a path the
+ * heading truncates.
+ */
+export type BarPlan = "one" | "below" | "icons-secondary" | "icons" | "fold";
+/** One item of the actions: a primary or secondary Button, or anything else (never folds). */
+export type BarAction = {
+    role: "primary" | "secondary" | "other";
+    /** Natural width with its label. */
+    full: number;
+    /** Width as its icon alone; `null` — it has no icon and keeps its label. */
+    icon: number | null;
+};
+export type BarWidths = {
+    /** Natural width of the heading (its widest line); 0 — none. */
+    heading: number;
+    /** Whether the heading starts with a path (a Breadcrumb before the title): it can stack. */
+    path: boolean;
+    /** Natural width of the tools on one line; 0 — none. */
+    tools: number;
+    actions: BarAction[];
+    /** Width of the «⋯» button. */
+    more: number;
+    /** Gap between the heading, the tools and the actions. */
+    gap: number;
+    /** Gap between two actions. */
+    actionGap: number;
+};
+/** The first plan whose first line fits `available`; the narrowest of `icons` and `fold` when none does. */
+export declare function planBar(widths: BarWidths, available: number): BarPlan;
+/** Whether the heading stacks at `plan`: it has a path and its one line still does not fit. */
+export declare function stackHeading(widths: BarWidths, available: number, plan: BarPlan): boolean;

package/dist/internal/overlay/FloatingPanel.d.ts

@@ -11,7 +11,7 @@ export declare function SheetHandle({ swipe }: {
     swipe: Pick<SwipeDismiss, "enabled">;
 }): import("react/jsx-runtime").JSX.Element | null;
 /** How wide an anchored panel is (`data-width` on the floating surface). */
-export type FloatingWidth = "auto" | "trigger" | "content";
+export type FloatingWidth = "auto" | "trigger" | "min-trigger" | "content";
 /**
  * The panel is a `<div>`; `E` is the element type its consumer holds it as (a menu, a listbox:
  * `HTMLElement`), so the consumer ref needs no cast.

package/dist/internal/overlay/focus.d.ts

@@ -8,9 +8,10 @@ export declare function hasNativeTabStop(el: HTMLElement): boolean;
 /**
  * Moves focus into a layer that just opened, unless focus is already inside (a child `autoFocus`):
  * the first match of `first` (a menu's first enabled item, which is no tab stop of its own), else
- * `[data-autofocus]`, else the first tab stop, else the container itself.
+ * `[data-autofocus]`, else the first tab stop, else the container itself. `quiet` — a pointer
+ * opened the layer: focus lands without the focus ring until the person turns to the keyboard.
  */
-export declare function focusInto(container: HTMLElement, first?: string): void;
+export declare function focusInto(container: HTMLElement, first?: string, quiet?: boolean): void;
 /**
  * Focuses `el` when it is still in the document. `quiet` — the layer was opened with a pointer:
  * focus returns without the focus ring, also when a key (Escape) closed the layer; the next key

package/dist/internal/parts.d.ts

@@ -11,7 +11,7 @@ export declare function isPart<P = unknown>(node: React.ReactNode, type: React.E
 export declare function flattenChildren(nodes: React.ReactNode, prefix?: string): React.ReactNode[];
 /**
  * Splits the direct children into the elements of the given part types and the rest, each in the
- * written order (`PageToolbar.Chips` under the bar, `Badge.Action` at the end of the badge).
+ * written order (`Page.Actions` at the end of a `Page.Header`, `Badge.Action` at the end of the badge).
  */
 export declare function splitParts<P = unknown>(children: React.ReactNode, ...types: React.ElementType[]): {
     parts: React.ReactElement<P>[];

package/dist/internal/slot.d.ts

@@ -33,36 +33,6 @@ export declare function Slot<E extends HTMLElement = HTMLElement>({ children, re
 export declare namespace Slot {
     var displayName: string;
 }
-/** One part moved into an outlet: its id (a key for the outlet) and what it renders. */
-type OutletEntry = {
-    id: string;
-    node: React.ReactNode;
-};
-/**
- * The place in a host that renders parts written elsewhere in its subtree: a page's own
- * `AppHeader.Root` in the app shell's header row, page tools wrapped in a page component in the
- * header's second row. The host owns one store (`useOutletStore`) and renders its entries
- * (`useOutletEntries`); a part moves in with `useMovedToOutlet`. The store is external to React
- * state, so a part that updates re-renders the outlet only — never the host, never the part's own
- * tree.
- */
-export type OutletStore = {
-    /** Adds or replaces the part `id` (it keeps the place it first took); `null` takes it out. */
-    set: (id: string, node: React.ReactNode | null) => void;
-    subscribe: (listener: () => void) => () => void;
-    entries: () => readonly OutletEntry[];
-};
-/** The outlet store of a host, created once. */
-export declare function useOutletStore(): OutletStore;
-/** The parts moved into `store`, in the order they first arrived (none on the server). */
-export declare function useOutletEntries(store: OutletStore): readonly OutletEntry[];
-/**
- * Moves `node` into the outlet `store` (`null` — no outlet: the part stays where it is written).
- * Returns `true` once the part has moved: render nothing then. Until then — on the server and in
- * the first client render — the part renders in place, so the server HTML has it; the move happens
- * before the browser paints. The part leaves the outlet when it unmounts.
- */
-export declare function useMovedToOutlet(store: OutletStore | null, node: React.ReactNode): boolean;
 /**
  * The one element child of an `asChild` part, whose own children the part wraps
  * (`React.cloneElement(child, undefined, …child.props.children)`). Throws a named error otherwise.

package/dist/layout/app-shell/AppShell.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { type OutletStore } from "../../internal/slot";
 /**
  * The navigation of the shell, as its Sidebar publishes it: what a menu button anywhere in the
- * shell needs (`AppHeader.MenuButton`, `Sidebar.Toggle` outside the rail, a BottomNav «Ещё»).
+ * shell needs (the menu button of `Page.TopBar`, `Sidebar.Toggle` outside the rail, a BottomNav
+ * «Ещё»).
  */
 export type AppShellNavState = {
     /** `id` of the navigation landmark, for `aria-controls`. */
@@ -17,27 +17,18 @@ export type AppShellNavState = {
     /** Opens or closes the off-canvas panel; on screen, expands or folds the rail. */
     toggle: () => void;
 };
-type ShellRegistry = {
-    /** The Sidebar publishes its navigation (`null` when it leaves). */
-    publishNav: (nav: AppShellNavState | null) => void;
-    /** The header outlet: a page's own `AppHeader.Root` moves here. */
-    headers: OutletStore;
-};
+type PublishNav = (nav: AppShellNavState | null) => void;
 /**
  * The navigation of the nearest `AppShell.Root`, as its Sidebar publishes it; `null` outside a
  * shell or before a Sidebar is in it. For a trigger of the navigation outside the rail.
  */
 export declare function useAppShellNav(): AppShellNavState | null;
 /** How the Sidebar publishes its navigation into the shell (`null` outside a shell). */
-export declare function useAppShellNavPublisher(): ShellRegistry["publishNav"] | null;
-/**
- * The outlet a page's `AppHeader.Root` moves into: the shell's header row. `null` outside a
- * shell, and in the outlet itself (the header there is in place).
- */
-export declare function useAppShellHeaderOutlet(): OutletStore | null;
+export declare function useAppShellNavPublisher(): PublishNav | null;
 /**
  * Starts a frame of its own inside a shell: a preview of a screen (`ExampleFrame`) is not the
- * page, so a header or a Sidebar in it stays in the preview instead of joining the shell around it.
+ * page, so a Sidebar in it and the menu button of its top bar stay in the preview instead of
+ * joining the shell around it.
  */
 export declare function AppShellBoundary({ children }: {
     children?: React.ReactNode;
@@ -59,9 +50,9 @@ declare namespace AppShellNav {
 }
 /**
  * Grid: navigation column | content panel. Everything that is not `AppShell.Nav` goes into the
- * content panel, which is the page itself (the layer around the shell): cards on it are the next
- * layer. The root owns the navigation state the Sidebar publishes and the header row the page's
- * `AppHeader.Root` moves into.
+ * content panel — `AppShell.Main` with the page, and the phone footer — which is the page itself
+ * (the layer around the shell): cards on it are the next layer. The root owns the navigation
+ * state the Sidebar publishes.
  */
 declare function AppShellRoot({ fillViewport, className, children, ...rest }: AppShellRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellRoot {
@@ -75,17 +66,15 @@ declare function AppShellFooter({ className, ...rest }: AppShellFooterProps): im
 declare namespace AppShellFooter {
     var displayName: string;
 }
-/** `full` (default): the whole panel with responsive gutters; `contained`: centered, up to `--prime-layout-content-max-width` (long-read pages). */
-export type AppShellContentWidth = "contained" | "full";
 export type AppShellMainProps = React.HTMLAttributes<HTMLElement> & {
     ref?: React.Ref<HTMLElement>;
-    /**
-     * `full` — the whole panel with gutters; `contained` — a centred column up to `--prime-layout-content-max-width`.
-     */
-    contentWidth?: AppShellContentWidth;
 };
-/** `<main>` with the canonical gutters; scrolls inside the panel when `fillViewport` is set. */
-declare function AppShellMain({ contentWidth, className, children, ...rest }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<main>`, where the page renders: it hands the page the shell's gutters and top air
+ * (`Page.Root` takes them) and keeps the bottom air; scrolls inside the panel when `fillViewport`
+ * is set, so a sticky `Page.TopBar` sticks to its top.
+ */
+declare function AppShellMain({ className, children, ...rest }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellMain {
     var displayName: string;
 }
@@ -95,20 +84,16 @@ export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref">
      * Navigation column content; without it the panel takes the full width.
      */
     nav?: React.ReactNode;
-    /**
-     * The default header row, an `AppHeader.Root`: a page that renders its own header replaces it while that page is on screen.
-     */
-    header?: React.ReactNode;
     /**
      * Footer content (`BottomNav`); no footer when omitted.
      */
     footer?: React.ReactNode;
     /**
-     * Page content inside Main.
+     * The page inside Main (`Page.Root`).
      */
     children?: React.ReactNode;
     /**
-     * Props for Main (e.g. `contentWidth`).
+     * Props for Main (`id`, `tabIndex` for a skip link).
      */
     mainProps?: Omit<AppShellMainProps, "children" | "ref">;
     /**
@@ -116,12 +101,8 @@ export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref">
      */
     scrollResetKey?: unknown;
 };
-/**
- * Root + Nav + the header + Main + Footer in one; main scrolls to the top when `scrollResetKey`
- * changes. `header` is the default header row: a page that renders its own `AppHeader.Root`
- * replaces it while it is on screen.
- */
-declare function AppShellTemplate({ ref, nav, header, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
+/** Root + Nav + Main + Footer in one; main scrolls to the top when `scrollResetKey` changes. */
+declare function AppShellTemplate({ ref, nav, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellTemplate {
     var displayName: string;
 }

package/dist/layout/index.d.ts

@@ -1,8 +1,8 @@
-export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, AppHeaderToolsProps, } from "./app-header/AppHeader";
-export { AppHeader } from "./app-header/AppHeader";
-export type { AppShellContentWidth, AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellNavState, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
+export type { AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellNavState, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell, useAppShellNav } from "./app-shell/AppShell";
 export type { BottomNavActionProps, BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
 export { BottomNav } from "./bottom-nav/BottomNav";
+export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionLayout, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
+export { Page } from "./page/Page";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";

package/dist/layout/page/Page.d.ts

@@ -0,0 +1,263 @@
+import * as React from "react";
+export type PageLabels = {
+    /** Name of the menu button the top bar draws while the shell's Sidebar is off-canvas. */
+    menu: string;
+    /** Name of the «⋯» button the top bar's actions fold into when the row runs out of width. */
+    more: string;
+    /** Name of `Page.BackButton` (back from the detail to the list on a narrow split). */
+    back: string;
+};
+export declare const PAGE_LABELS: PageLabels;
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Cap of the page column. */
+export type PageMaxWidth = "full" | "readable" | "wide";
+export type PageRootProps = DivProps & {
+    /**
+     * Cap of everything but the top bar, centred: `full` — the whole main; `readable` — 42rem (`--prime-layout-reading-max-width`); `wide` — 75rem (`--prime-layout-content-max-width`).
+     */
+    maxWidth?: PageMaxWidth;
+    /**
+     * The page takes the height of main (`AppShell.Root fillViewport`) and the body takes what the bar and the header leave: for a full-height table, board, chat or `Page.Split`.
+     */
+    fill?: boolean;
+    /**
+     * Built-in strings of every part, see Labels.
+     */
+    labels?: Partial<PageLabels>;
+};
+/**
+ * The page: the column inside `AppShell.Main` that holds the top bar, the header and the body. In
+ * the shell it takes the shell's gutters and top air (`--page-gutter`, `--page-top` from main);
+ * outside it brings none. `maxWidth` caps and centres everything but the top bar, which runs the
+ * width of the panel.
+ */
+declare function PageRoot({ maxWidth, fill, labels: labelsProp, className, ...rest }: PageRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageRoot {
+    var displayName: string;
+}
+export type PageTopBarProps = React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Sticks to the top of the page's scroller (`AppShell.Main`); `false` — scrolls away with the page. On a screen lower than 480px it scrolls anyway.
+     */
+    sticky?: boolean;
+    /**
+     * Once the flow `Page.Title` scrolls out under the bar, the bar repeats it as the last level of its heading (of its `Breadcrumb` path, which folds for it), unless the path ends at it; it leaves when the title returns.
+     */
+    collapse?: boolean;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * The page's strip at its top edge, across the panel. Up to four groups in one grid —
+ * `Page.Heading`, `Page.Tools`, `Page.Actions` on the first line, `Page.Chips` under them — laid
+ * out by one plan chosen from their natural widths (`planBar`): one line while everything fits;
+ * then the tools take a line of their own; then the buttons give way to their icons, secondary
+ * first, and fold into «⋯»; only then does a heading with a path stack (path over title), and a
+ * heading without one truncate. Sticky inside the scroller of
+ * the page; while the shell's Sidebar is off-canvas it starts with the menu button. With
+ * `collapse` it repeats the flow `Page.Title` once that title scrolls out under the bar.
+ */
+declare function PageTopBar({ sticky, collapse, className, children, ref, ...rest }: PageTopBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageTopBar {
+    var displayName: string;
+}
+export type PageHeaderProps = DivProps;
+/**
+ * The document header in the page flow (settings, long forms, overviews): a `Page.Heading` and
+ * its `Page.Actions` in one row; the actions wrap under the heading on a narrow column. In a
+ * `Page.TopBar` the same parts stand directly in the bar.
+ */
+declare function PageHeader({ className, children, ...rest }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageHeader {
+    var displayName: string;
+}
+export type PageHeadingProps = DivProps;
+/**
+ * The title group: an optional `Breadcrumb` path, `Page.Title`, `Page.Description`. In the bar
+ * the title is the path's last level — the path, a chevron and the title on one line, the
+ * description under the whole line, both truncating; in the flow the path stands over a large
+ * title and the description wraps.
+ */
+declare function PageHeading({ className, children, ...rest }: PageHeadingProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageHeading {
+    var displayName: string;
+}
+export type PageTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+/**
+ * The page's `<h1>`: the last level of the path in the top bar (it truncates), a large title in
+ * the flow. A flow title is what a `collapse` top bar repeats once it scrolls away.
+ */
+declare function PageTitle({ className, children, ref, ...rest }: PageTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageTitle {
+    var displayName: string;
+}
+export type PageDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/** One line of context that carries data (a period, a count): truncates in the bar, wraps in the flow. */
+declare function PageDescription({ className, children, ...rest }: PageDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageDescription {
+    var displayName: string;
+}
+export type PageActionsProps = DivProps;
+/**
+ * The page's buttons: at the end of a `Page.Header` or a `Page.Section` heading in the flow (they
+ * wrap under it on a narrow column), on the first line of a `Page.TopBar` at every width. In the
+ * bar, when the line runs short, Buttons with an icon show only it — the secondary ones first,
+ * then the primary (the first solid Button) — with their label as name and tooltip; then the
+ * secondary Buttons fold into a «⋯» menu. Anything that is not a `Button.Root` stays as it is.
+ */
+declare function PageActions(props: PageActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageActions {
+    var displayName: string;
+}
+export type PageToolsProps = DivProps;
+/**
+ * The page's tools — sections, search and filter, view — as kit controls in the order written.
+ * On the bar's first line each keeps its natural width; on a line of their own they fill it:
+ * a search (`SmartFilter.Toolbar`, `Input.Root`) takes the room first, switchers share the rest
+ * (a `SegmentedControl.Root` is `fullWidth` unless set), and they wrap when one line is not
+ * enough. Named (`aria-label`), it is a `group`.
+ */
+declare function PageTools({ className, children, ref, ...rest }: PageToolsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageTools {
+    var displayName: string;
+}
+export type PageChipsProps = DivProps;
+/** Active filters (`SmartFilter.Chips`) on a line of their own under the bar; gone while empty. */
+declare function PageChips({ className, ...rest }: PageChipsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageChips {
+    var displayName: string;
+}
+export type PageBodyProps = DivProps;
+/** The page content: blocks of one screen 24 apart, a `Page.Section` 40 from its neighbours. */
+declare function PageBody({ className, ...rest }: PageBodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageBody {
+    var displayName: string;
+}
+/** Where the heading of a section stands: over its content or in a column beside it. */
+export type PageSectionLayout = "stack" | "aside";
+export type PageSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /**
+     * The visible heading (`h2`); it also names the section.
+     */
+    label: React.ReactNode;
+    /**
+     * One line of context under the heading, in secondary body-s.
+     */
+    description?: React.ReactNode;
+    /**
+     * `stack` — the heading over the content; `aside` — a ~16rem heading column beside it (a settings page), above it once the content would get narrower than 30rem.
+     */
+    layout?: PageSectionLayout;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * A titled section of the page: an `h2` heading (with an optional description and `Page.Actions`
+ * at its end) over its content. Sections stand further apart than the plain blocks of the body,
+ * so the air shows where a new topic starts.
+ */
+declare function PageSection({ label, description, layout, className, children, ...rest }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageSection {
+    var displayName: string;
+}
+export type PageGridProps = DivProps;
+/**
+ * The grid of the page's tiles (KPI cards, charts, panels): 12 columns, one gap on both axes.
+ * Columns follow the grid's own width, so tiles fold on a narrow panel by themselves.
+ */
+declare function PageGrid({ className, ...rest }: PageGridProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageGrid {
+    var displayName: string;
+}
+/** Columns of 12 a cell spans on a wide grid. */
+export type PageCellSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Rows a cell spans. */
+export type PageCellRows = 1 | 2 | 3 | 4;
+export type PageCellProps = DivProps & {
+    /**
+     * Columns of 12 on a wide grid (64rem+). Narrower grids round it: see Grid columns in COMPONENT.md.
+     */
+    span?: PageCellSpan;
+    /**
+     * Rows the cell spans from 40rem: a chart beside two stacked tiles (`ChartFrame.Plot height="fill"` fills the height).
+     */
+    rows?: PageCellRows;
+};
+/** One tile place in `Page.Grid`; its child (a Card, a ChartFrame) fills it. */
+declare function PageCell({ span, rows, className, ...rest }: PageCellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageCell {
+    var displayName: string;
+}
+export type PageSplitProps = DivProps & {
+    /**
+     * The detail is open (a record is chosen), controlled. On a narrow split it takes the place of the list; on a wide one both panes stay.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, uncontrolled.
+     */
+    defaultOpen?: boolean;
+    /**
+     * `Page.BackButton` closes the detail (`false`); clear the chosen record there.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * List + detail (mail, a messenger, a ticket queue): two panes side by side from 48rem of its own
+ * width, one at a time below it — the list, or the open detail with a back button. Takes the free
+ * height of a filling page; each pane gives its last child the free height.
+ */
+declare function PageSplit({ open: openProp, defaultOpen, onOpenChange, className, children, ...rest }: PageSplitProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageSplit {
+    var displayName: string;
+}
+export type PageListProps = DivProps;
+/**
+ * The list pane of the split: a fixed column on a wide split, the whole split while the detail is
+ * closed. It remembers the control that had focus, so going back returns there.
+ */
+declare function PageList(props: PageListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageList {
+    var displayName: string;
+}
+export type PageDetailProps = DivProps;
+/** The detail pane of the split: the rest of a wide split; on a narrow one it replaces the list while open. */
+declare function PageDetail(props: PageDetailProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageDetail {
+    var displayName: string;
+}
+export type PageBackButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Back from the detail to the list: a soft neutral icon Button named by `labels.back`, shown only
+ * while the split shows one pane. Put it at the start of the detail's header.
+ */
+declare function PageBackButton({ className, onClick, ...rest }: PageBackButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageBackButton {
+    var displayName: string;
+}
+export declare const Page: {
+    Root: typeof PageRoot;
+    TopBar: typeof PageTopBar;
+    Header: typeof PageHeader;
+    Heading: typeof PageHeading;
+    Title: typeof PageTitle;
+    Description: typeof PageDescription;
+    Actions: typeof PageActions;
+    Tools: typeof PageTools;
+    Chips: typeof PageChips;
+    Body: typeof PageBody;
+    Section: typeof PageSection;
+    Grid: typeof PageGrid;
+    Cell: typeof PageCell;
+    Split: typeof PageSplit;
+    List: typeof PageList;
+    Detail: typeof PageDetail;
+    BackButton: typeof PageBackButton;
+};
+export {};

package/dist/layout/sidebar/Sidebar.d.ts

@@ -61,7 +61,7 @@ export type SidebarRootProps = React.ComponentPropsWithoutRef<"div"> & {
      */
     defaultOpen?: boolean;
     /**
-     * Off-canvas open / close: Toggle, the AppHeader menu button, scrim, Escape, an activated item, leaving the narrow viewport.
+     * Off-canvas open / close: Toggle, the menu button of `Page.TopBar`, scrim, Escape, an activated item, leaving the narrow viewport.
      */
     onOpenChange?: (open: boolean) => void;
     /**

package/dist/skill/SKILL.md

@@ -32,8 +32,8 @@ region, `Skeleton` while it loads).
    the main action, the states, the narrow screen); the shape of the data decides the layout, every
    label must carry something new, friction matches the cost of a mistake.
 2. **The app frame, once per app** — [layouts.md](layouts.md): styles, theme, providers, `AppShell`
-   with the `Sidebar`, page wrappers, auth screens. A screen you deliver renders its page: its
-   `AppHeader.Root` (title, a line of data, its tools) and its body.
+   with the `Sidebar`, page wrappers, auth screens. A screen you deliver renders its page: one
+   `Page.Root` with its top bar (title, a line of data, its tools) and its body.
 3. **Choose** — [choosing.md](choosing.md): the category by task, then the component, then the pairs
    that are easy to confuse.
 4. **Read the component** — [components.md](components.md) links each `COMPONENT.md` (API, variants,
@@ -48,8 +48,8 @@ region, `Skeleton` while it loads).
    icon names.
 7. **States and motion** — [motion.md](motion.md): every region loads, empties and fails without
    flipping; what the kit animates by itself and when to move your own elements.
-8. **Narrow screens** — [responsive.md](responsive.md): every screen works from 320px, the page panel is
-   `PageToolbar`, nothing is hidden on phones, touch follows `(hover)` / `(pointer)`.
+8. **Narrow screens** — [responsive.md](responsive.md): every screen works from 320px, the page's top bar
+   gives way by width itself, nothing is hidden on phones, touch follows `(hover)` / `(pointer)`.
 9. **Check** — [checklist.md](checklist.md) and [anti-slop.md](anti-slop.md), then look at the screen
    in a browser ([ux.md](ux.md#9-look-at-it-before-handing-it-over)). Fix every «no», then hand
    over.
@@ -65,7 +65,7 @@ project under `node_modules/prime-ui-kit/src/`.
 |---|---|---|
 | Component reference | `reference/components/<dir>/COMPONENT.md` | `node_modules/prime-ui-kit/src/components/<dir>/COMPONENT.md` |
 | Copyable scenarios | `reference/components/<dir>/examples/*.tsx` | `node_modules/prime-ui-kit/src/components/<dir>/examples/*.tsx` |
-| AppShell, Sidebar, AppHeader, BottomNav | `reference/layout/<dir>/…` | `node_modules/prime-ui-kit/src/layout/<dir>/…` |
+| AppShell, Sidebar, BottomNav, Page | `reference/layout/<dir>/…` | `node_modules/prime-ui-kit/src/layout/<dir>/…` |
 | Whole screens | `reference/<base>/<dir>/examples/screen.tsx` | `node_modules/prime-ui-kit/src/<base>/<dir>/examples/screen.tsx` |
 
 ## Files of this skill
@@ -81,7 +81,7 @@ project under `node_modules/prime-ui-kit/src/`.
 | [foundations.md](foundations.md) | grid, proximity scale, sizes, surfaces, type, tone and color |
 | [api-contract.md](api-contract.md) | writing JSX — prop names, sizes and host tiers, controlled state, forms, helpers, icons |
 | [motion.md](motion.md) | every screen — loading / empty / error that flow, what the kit animates, when to move, recipes |
-| [responsive.md](responsive.md) | every screen — 320px and up, the page panel (`PageToolbar`), touch |
+| [responsive.md](responsive.md) | every screen — 320px and up, the page's top bar (`Page.TopBar`), touch |
 | [anti-slop.md](anti-slop.md) | before and after writing — what makes a screen look generated |
 | [checklist.md](checklist.md) | before handing the screen over |
 
@@ -97,8 +97,8 @@ applyTheme("light"); // sets data-theme on <html>; "dark" for the dark theme
 ```
 
 Wrap the app in `NotificationProvider` if it shows toasts. Styles, `applyTheme`, `NotificationProvider`
-and `AppShell` belong to the app root, once. A screen component you deliver renders its page — its
-`AppHeader.Root` and its `PageContent` body — and assumes the root exists. If the project has no app
+and `AppShell` belong to the app root, once. A screen component you deliver renders its page — one
+`Page.Root` with its `Page.TopBar` and its `Page.Body` — and assumes the root exists. If the project has no app
 frame yet, also deliver it as a separate root layout from
 [layouts.md](layouts.md#app-frame-once-per-app) — never inline the frame into a page.
 
@@ -123,8 +123,8 @@ Take a semantic `<Icon name="…" />` first, else a glyph from the full animated
 7. Labels above fields, always — once per column for records in rows (`FieldList`), never numbered
    («Пункт 1»), never repeating their heading. Placeholder is an example value, never the label.
 8. Text through `Typography` roles (`title-m` section, `title-s` group, `body-m` text, `caption` meta;
-   the page title is `AppHeader.Title` in the page's header, `PageContent.Title` only on a
-   document page). No custom font sizes.
+   the page title is `Page.Title`, one per page: in the `Page.Heading` of `Page.TopBar` on a work screen, in the flow
+   on a document page or an overview). No custom font sizes.
 9. Overlays (Modal, ConfirmDialog, Drawer, Sheet, Popover, Dropdown, Tooltip, CommandMenu, Select,
    MediaViewer) come from the kit — never hand-made — and stay mounted: drive them with `open`,
    never `{open && …}`.