prime-ui-kit 0.16.0 → 0.17.0

package/src/{components/page-content → layout/page}/examples/variants.tsx

@@ -1,5 +1,5 @@
-/** The same page column at three caps: the whole main, a wide dashboard column, a reading column — `maxWidth`. */
-import { Card, PageContent, Typography } from "prime-ui-kit";
+/** The same page at three caps: the whole main, a wide dashboard column, a reading column — `maxWidth`. */
+import { Card, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -9,13 +9,13 @@ const WIDTHS = [
   { value: "readable", text: "Условия использования: не шире колонки для чтения, по центру." },
 ] as const;
 
-export default function PageContentVariantsExample() {
+export default function PageVariantsExample() {
   return (
     <>
       {WIDTHS.map(({ value, text }) => (
         <div key={value} className={styles.main}>
-          <PageContent.Root maxWidth={value}>
-            <PageContent.Body>
+          <Page.Root maxWidth={value}>
+            <Page.Body>
               <Card.Root>
                 <Card.Body>
                   <Typography variant="body-s" tone="secondary">
@@ -23,8 +23,8 @@ export default function PageContentVariantsExample() {
                   </Typography>
                 </Card.Body>
               </Card.Root>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </div>
       ))}
     </>

package/src/layout/sidebar/COMPONENT.md

@@ -89,7 +89,7 @@ useSidebar()                       state hook for custom parts inside Root (useA
 | `onModeChange` | `(mode: SidebarMode) => void` | — | Called with the new mode (Toggle, `useSidebar().setMode`). |
 | `open` | `boolean` | — | Off-canvas panel on narrow viewports (controlled). |
 | `defaultOpen` | `boolean` | `false` | Initial off-canvas state (uncontrolled). |
-| `onOpenChange` | `(open: boolean) => void` | — | Off-canvas open / close: Toggle, the AppHeader menu button, scrim, Escape, an activated item, leaving the narrow viewport. |
+| `onOpenChange` | `(open: boolean) => void` | — | Off-canvas open / close: Toggle, the menu button of `Page.TopBar`, scrim, Escape, an activated item, leaving the narrow viewport. |
 | `offCanvas` | `"auto" \| "always" \| "never"` | `"auto"` | When the rail becomes an off-canvas panel opened by `open`: `auto` — below 768px (viewport); `always` — at any width; `never` — always a rail. |
 | `closeOnOutsideClick` | `boolean` | `true` | A press on the scrim (outside the off-canvas panel) closes the panel. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the off-canvas panel. |
@@ -294,13 +294,14 @@ The rail width does not depend on `size`.
 | `closeOnEscape` (Root) | Escape closes the off-canvas panel | default; turn off with `closeOnOutsideClick` for a panel only its toggle closes | on |
 | `asChild` (ItemAction) | the row action is the consumer's link with the button look | the action opens a page or `mailto:` | off |
 
-Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header, or `Sidebar.Toggle` in the footer for a rail without a brand. Inside an `AppShell` the Sidebar publishes its navigation to the shell: on phones (`offCanvas="auto"`) or always (`offCanvas="always"`) the `AppHeader` draws the menu button that opens the panel by itself, a `Sidebar.Toggle` outside the rail brings back a hidden one, and other triggers (a BottomNav «Ещё») read `useAppShellNav()`. One current item at a time; give every top-level item an icon when the rail can go compact (child items need none).
+Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header, or `Sidebar.Toggle` in the footer for a rail without a brand. Inside an `AppShell` the Sidebar publishes its navigation to the shell: on phones (`offCanvas="auto"`) or always (`offCanvas="always"`) the page's `Page.TopBar` draws the menu button that opens the panel by itself, a `Sidebar.Toggle` outside the rail brings back a hidden one, and other triggers (a BottomNav «Ещё») read `useAppShellNav()`. One current item at a time; give every top-level item an icon when the rail can go compact (child items need none).
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
 | mode | `mode` / `defaultMode` | Root `data-mode`, `data-panel-mode` (the last visible mode while hidden); `<nav inert>` while hidden |
 | off-canvas | `offCanvas="always"`, or `"auto"` + viewport < 768px | Root `data-off-canvas`, `data-state="open" \| "closed"`; `<nav inert>` while closed; the kit scrim (`role="presentation"`) while open; in an `AppShell` the shell Root `data-off-canvas` |
+| placing | the viewport crossed the off-canvas breakpoint (not a person's choice) | Root `data-placing` for one painted frame: the rail lands at its new width with no motion (no growing from 0, no folding rows, no sliding panel) |
 | dismiss | `closeOnOutsideClick`, `closeOnEscape` | a press on the scrim / Escape closes the open panel, or not |
 | current | `current` or a router's `aria-current` | Item `aria-current="page"`, `data-state="active"` |
 | active path | a child of a Sub (or an item of a Group) is current | SubTrigger (or the `…` row of a folded Group) `data-active-path`; a closed Sub opens, a closed Group opens off the compact rail |
@@ -364,7 +365,7 @@ Leaving the narrow viewport closes the off-canvas panel; activating an item (a l
 - A row action is its own button next to the item (never nested), named by `label` with a tooltip.
 - The account avatar is hidden from screen readers; the name and the muted line name the button.
 - Off-canvas: a decorative scrim (a press on it is a press outside, `closeOnOutsideClick`), focus trap and Escape (`closeOnEscape`); focus returns to the opener.
-- Toggle, the AppHeader menu button and `useAppShellNav` triggers: `aria-expanded`, `aria-controls` → the `<nav>`, label from `labels`.
+- Toggle, the menu button of `Page.TopBar` and `useAppShellNav` triggers: `aria-expanded`, `aria-controls` → the `<nav>`, label from `labels`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -392,7 +393,7 @@ Leaving the narrow viewport closes the off-canvas panel; activating an item (a l
 | [dismiss.tsx](examples/dismiss.tsx) | An off-canvas panel only its own toggle closes: a press on the scrim and Escape leave it open, a picked item still closes it — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the rail mode: expanded, an icon rail with tooltips, or hidden; every switch is one synchronous movement — `mode`, `onModeChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | Navigation behind a menu button at any width: the parent opens the off-canvas panel, the scrim, Escape, the header toggle or a navigation closes it — `offCanvas`, `open`, `onOpenChange`. |
-| [narrow.tsx](examples/narrow.tsx) | Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. |
+| [narrow.tsx](examples/narrow.tsx) | Below 768px the rail leaves the layout and slides in over the page from the menu button the page top bar draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. |
 
 ## Mistakes
 - `icon={…}` / `badge={…}` props → use the `Sidebar.ItemIcon` and `Sidebar.ItemCount` parts.

package/src/layout/sidebar/examples/dismiss.tsx

@@ -1,5 +1,5 @@
 /** An off-canvas panel only its own toggle closes: a press on the scrim and Escape leave it open, a picked item still closes it — `closeOnOutsideClick`, `closeOnEscape`. */
-import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+import { AppShell, Icon, Page, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -35,12 +35,15 @@ export default function SidebarDismissExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Сборка заказов</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-        <AppShell.Main />
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Сборка заказов</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+          </Page.Root>
+        </AppShell.Main>
       </AppShell.Root>
     </div>
   );

package/src/layout/sidebar/examples/narrow.tsx

@@ -1,5 +1,5 @@
-/** Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
-import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button the page top bar draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
+import { AppShell, Icon, Page, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -43,12 +43,15 @@ export default function SidebarNarrowExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Сделки</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-        <AppShell.Main />
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Сделки</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+          </Page.Root>
+        </AppShell.Main>
       </AppShell.Root>
     </div>
   );

package/src/styles/theme-dark.css

@@ -32,6 +32,7 @@
   --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-200);
   --prime-color-chart-scale-fg: var(--prime-ref-color-gray-950);
   --prime-color-control-thumb: var(--prime-ref-color-gray-100);
+  --prime-color-control-thumb-disabled: var(--prime-ref-color-gray-600);
   --prime-color-danger-border: var(--prime-ref-color-red-400);
   --prime-color-danger-hover: var(--prime-ref-color-red-500);
   --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
@@ -50,35 +51,35 @@
   --prime-color-layer-0-bg: #0d0f13;
   --prime-color-layer-0-fill: #14161a;
   --prime-color-layer-0-fill-hover: #1a1c21;
-  --prime-color-layer-0-selected: #212428;
+  --prime-color-layer-0-selected: #303237;
   --prime-color-layer-1-bg: #14161a;
   --prime-color-layer-1-fill: #1a1c21;
   --prime-color-layer-1-fill-hover: #212428;
-  --prime-color-layer-1-selected: #292b2f;
+  --prime-color-layer-1-selected: #383a3f;
   --prime-color-layer-2-bg: #1a1c21;
   --prime-color-layer-2-fill: #212428;
   --prime-color-layer-2-fill-hover: #292b2f;
-  --prime-color-layer-2-selected: #303237;
+  --prime-color-layer-2-selected: #3f4247;
   --prime-color-layer-3-bg: #212428;
   --prime-color-layer-3-fill: #292b2f;
   --prime-color-layer-3-fill-hover: #303237;
-  --prime-color-layer-3-selected: #383a3f;
+  --prime-color-layer-3-selected: #474a4f;
   --prime-color-layer-4-bg: #292b2f;
   --prime-color-layer-4-fill: #303237;
   --prime-color-layer-4-fill-hover: #383a3f;
-  --prime-color-layer-4-selected: #3f4247;
+  --prime-color-layer-4-selected: #4f5257;
   --prime-color-layer-floating-bg: #1a1c21;
   --prime-color-layer-floating-fill: #212428;
   --prime-color-layer-floating-fill-hover: #292b2f;
-  --prime-color-layer-floating-selected: #303237;
+  --prime-color-layer-floating-selected: #3f4247;
   --prime-color-layer-floating1-bg: #212328;
   --prime-color-layer-floating1-fill: #282a2f;
   --prime-color-layer-floating1-fill-hover: #303237;
-  --prime-color-layer-floating1-selected: #373a3e;
+  --prime-color-layer-floating1-selected: #47494e;
   --prime-color-layer-floating2-bg: #282a2f;
   --prime-color-layer-floating2-fill: #303237;
   --prime-color-layer-floating2-fill-hover: #373a3e;
-  --prime-color-layer-floating2-selected: #3f4146;
+  --prime-color-layer-floating2-selected: #4f5257;
   --prime-color-message-outgoing-accent: var(--prime-ref-color-white);
   --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-cobalt-700);
   --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-700);
@@ -128,6 +129,7 @@
   --prime-color-palette-yellow-soft: color-mix(in srgb, var(--prime-ref-color-yellow-500) 16%, transparent);
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-950);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
+  --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
   --prime-color-success-hover: var(--prime-ref-color-green-300);
@@ -135,8 +137,8 @@
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);
   --prime-color-text-inverse: var(--prime-ref-color-gray-925);
-  --prime-color-text-muted: var(--prime-ref-color-gray-400);
-  --prime-color-text-placeholder: var(--prime-ref-color-gray-400);
+  --prime-color-text-muted: var(--prime-ref-color-gray-350);
+  --prime-color-text-placeholder: var(--prime-ref-color-gray-350);
   --prime-color-text-primary: var(--prime-ref-color-gray-100);
   --prime-color-text-secondary: var(--prime-ref-color-gray-300);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);

package/src/styles/theme-light.css

@@ -97,6 +97,7 @@
   --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-800);
   --prime-color-chart-scale-fg: var(--prime-ref-color-white);
   --prime-color-control-thumb: var(--prime-ref-color-white);
+  --prime-color-control-thumb-disabled: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
   --prime-color-danger-fg: var(--prime-ref-color-white);
@@ -203,6 +204,7 @@
   --prime-color-palette-yellow-solid: var(--prime-ref-color-yellow-400);
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-925);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
+  --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
   --prime-color-success-hover: var(--prime-ref-color-green-800);
@@ -318,6 +320,7 @@
   --prime-focus-offset-inset: -2px;
   --prime-focus-space: 4px;
   --prime-focus-width: 2px;
+  --prime-font-family-key: var(--prime-ref-font-family-key);
   --prime-font-family-mono: var(--prime-ref-font-family-mono);
   --prime-font-family-sans: var(--prime-ref-font-family-sans);
   --prime-font-tracking-normal: var(--prime-ref-font-tracking-normal);

package/src/styles/tokens.css

@@ -28,6 +28,7 @@
   --prime-ref-color-gray-100: #e8eaee;
   --prime-ref-color-gray-150: #e0e3e8;
   --prime-ref-color-gray-300: #b9bec8;
+  --prime-ref-color-gray-350: #a1a8b6;
   --prime-ref-color-gray-400: #949bab;
   --prime-ref-color-gray-50: #f3f4f6;
   --prime-ref-color-gray-500: #636a79;
@@ -100,6 +101,7 @@
   --prime-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
   --prime-ref-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
   --prime-ref-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --prime-ref-font-family-key: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, system-ui, -apple-system, "Segoe UI Symbol", Menlo, Consolas, monospace;
   --prime-ref-font-family-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --prime-ref-font-family-sans: "Golos Text", "Golos Text Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --prime-ref-font-line-height-12: 0.75rem;
@@ -145,7 +147,7 @@
   --prime-ref-radius-6: 6px;
   --prime-ref-radius-8: 8px;
   --prime-ref-radius-full: 9999px;
-  --prime-ref-space-0: 0;
+  --prime-ref-space-0: 0rem;
   --prime-ref-space-1: 0.25rem;
   --prime-ref-space-10: 2.5rem;
   --prime-ref-space-12: 3rem;

package/dist/components/page-content/PageContent.d.ts

@@ -1,192 +0,0 @@
-import * as React from "react";
-/** Cap of the page column inside `main`. */
-export type PageContentMaxWidth = "full" | "readable" | "wide";
-/** The element of the page column: a plain column, or a `<section>` that a heading names. */
-export type PageContentRootAs = "div" | "section";
-export type PageContentRootProps = React.HTMLAttributes<HTMLElement> & {
-    /**
-     * `section` — the whole app page as a region; name it with `aria-labelledby` → the Title `id`.
-     */
-    as?: PageContentRootAs;
-    /**
-     * Cap of the column, centred: `full` — the whole main; `readable` — the reading measure `--prime-layout-reading-max-width` (42rem); `wide` — the content width `--prime-layout-content-max-width` (75rem).
-     */
-    maxWidth?: PageContentMaxWidth;
-    /**
-     * The page takes the height of main (`AppShell.Root fillViewport`) and the body takes what the header leaves: for a full-height table, board, chat or `PageContent.Split`.
-     */
-    fill?: boolean;
-    ref?: React.Ref<HTMLElement>;
-};
-declare function PageContentRoot({ as: Tag, maxWidth, fill, className, ref, ...rest }: PageContentRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentRoot {
-    var displayName: string;
-}
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref?: React.Ref<HTMLDivElement>;
-};
-export type PageContentActionsProps = DivProps;
-/** Page-level actions (buttons) next to the title; wrap below the heading on narrow columns. */
-declare function PageContentActions({ className, ...rest }: PageContentActionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentActions {
-    var displayName: string;
-}
-export type PageContentHeaderProps = DivProps;
-/** Title and description stack on the left; `PageContent.Actions` children go to the end. */
-declare function PageContentHeader({ className, children, ...rest }: PageContentHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentHeader {
-    var displayName: string;
-}
-export type PageContentTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
-    ref?: React.Ref<HTMLHeadingElement>;
-};
-declare function PageContentTitle({ className, ...rest }: PageContentTitleProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentTitle {
-    var displayName: string;
-}
-export type PageContentDescriptionMeasure = "readable" | "full";
-export type PageContentDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
-    /**
-     * `readable` — no wider than the reading measure `--prime-layout-reading-max-width` (42rem); `full` — the full width of the parent.
-     */
-    measure?: PageContentDescriptionMeasure;
-    ref?: React.Ref<HTMLParagraphElement>;
-};
-declare function PageContentDescription({ className, measure, ...rest }: PageContentDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentDescription {
-    var displayName: string;
-}
-export type PageContentBodyProps = DivProps;
-declare function PageContentBody({ className, ...rest }: PageContentBodyProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentBody {
-    var displayName: string;
-}
-/** Where the heading of a section stands: over its content or in a column beside it. */
-export type PageContentSectionLayout = "stack" | "aside";
-export type PageContentSectionProps = 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?: PageContentSectionLayout;
-    ref?: React.Ref<HTMLElement>;
-};
-/**
- * A titled section of the page: an `h2` heading (with an optional description and
- * `PageContent.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 PageContentSection({ label, description, layout, className, children, ...rest }: PageContentSectionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentSection {
-    var displayName: string;
-}
-export type PageContentGridProps = 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 PageContentGrid({ className, ...rest }: PageContentGridProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentGrid {
-    var displayName: string;
-}
-/** Columns of 12 a cell spans on a wide grid. */
-export type PageContentCellSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-/** Rows a cell spans. */
-export type PageContentCellRows = 1 | 2 | 3 | 4;
-export type PageContentCellProps = DivProps & {
-    /**
-     * Columns of 12 on a wide grid (64rem+). Narrower grids round it: see Grid columns in COMPONENT.md.
-     */
-    span?: PageContentCellSpan;
-    /**
-     * Rows the cell spans from 40rem: a chart beside two stacked tiles (`ChartFrame.Plot height="fill"` fills the height).
-     */
-    rows?: PageContentCellRows;
-};
-/** One tile place in `PageContent.Grid`; its child (a Card, a ChartFrame) fills it. */
-declare function PageContentCell({ span, rows, className, ...rest }: PageContentCellProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentCell {
-    var displayName: string;
-}
-export type PageContentLabels = {
-    /** Name of `PageContent.BackButton` (back from the detail to the list on a narrow split). */
-    back: string;
-};
-export declare const PAGE_CONTENT_LABELS: PageContentLabels;
-export type PageContentSplitProps = 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;
-    /**
-     * `PageContent.BackButton` closes the detail (`false`); clear the chosen record there.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Built-in strings, see Labels.
-     */
-    labels?: Partial<PageContentLabels>;
-};
-/**
- * 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 PageContentSplit({ open: openProp, defaultOpen, onOpenChange, labels, className, children, ...rest }: PageContentSplitProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentSplit {
-    var displayName: string;
-}
-/** Which pane of the split a panel is. */
-export type PageContentPanelKind = "list" | "detail";
-export type PageContentPanelProps = DivProps & {
-    /**
-     * `list` — the 16–20rem column, or the whole split while closed; going back refocuses its last control. `detail` — the rest, or the whole split while open; focus lands here when it opens.
-     */
-    kind: PageContentPanelKind;
-};
-/**
- * A pane of the split. `list` — 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. `detail` — the
- * rest of a wide split; on a narrow one it replaces the list while open.
- */
-declare function PageContentPanel({ kind, className, ref, onFocus, onAnimationEnd, ...rest }: PageContentPanelProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentPanel {
-    var displayName: string;
-}
-export type PageContentBackButtonProps = 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 PageContentBackButton({ className, onClick, ...rest }: PageContentBackButtonProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentBackButton {
-    var displayName: string;
-}
-export declare const PageContent: {
-    Root: typeof PageContentRoot;
-    Header: typeof PageContentHeader;
-    Actions: typeof PageContentActions;
-    Title: typeof PageContentTitle;
-    Description: typeof PageContentDescription;
-    Body: typeof PageContentBody;
-    Section: typeof PageContentSection;
-    Grid: typeof PageContentGrid;
-    Cell: typeof PageContentCell;
-    Split: typeof PageContentSplit;
-    Panel: typeof PageContentPanel;
-    BackButton: typeof PageContentBackButton;
-};
-export {};

package/dist/components/page-toolbar/PageToolbar.d.ts

@@ -1,55 +0,0 @@
-import type * as React from "react";
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref?: React.Ref<HTMLDivElement>;
-};
-export type PageToolbarRootProps = DivProps;
-/**
- * The panel at the top of a page: search and filter, sections, view options and the primary
- * action, with the active filters under the top row. It lays itself out from its own width — one
- * row when wide, stacked rows when narrow — so the slots keep fixed places at any width. Parts may
- * be left out; whatever the JSX order, the DOM (and Tab) order is Tools, Sections, View, Actions,
- * Chips. Named (`aria-label`), it is a `group`.
- */
-declare function PageToolbarRoot({ className, children, ref, ...rest }: PageToolbarRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarRoot {
-    var displayName: string;
-}
-export type PageToolbarSectionsProps = DivProps;
-/** Sections of the page — a `fullWidth` SegmentedControl; after the Tools when wide, a full row under the chips when narrow. */
-declare function PageToolbarSections({ className, ...rest }: PageToolbarSectionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarSections {
-    var displayName: string;
-}
-export type PageToolbarToolsProps = DivProps;
-/** Search and filter button (`SmartFilter.Toolbar`): the first slot and the stretchy one; the Chips sit under the top row. */
-declare function PageToolbarTools({ className, ...rest }: PageToolbarToolsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarTools {
-    var displayName: string;
-}
-export type PageToolbarViewProps = DivProps;
-/** How the data is shown: period, table / cards, columns. Sized by content when wide; its own full row when narrow, its controls sharing it. */
-declare function PageToolbarView({ className, ...rest }: PageToolbarViewProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarView {
-    var displayName: string;
-}
-export type PageToolbarActionsProps = DivProps;
-/** The primary action of the page: the top row's end at every width, never wraps down. */
-declare function PageToolbarActions({ className, ...rest }: PageToolbarActionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarActions {
-    var displayName: string;
-}
-export type PageToolbarChipsProps = DivProps;
-/** Active filters (`SmartFilter.Chips`) in their own row under the top row; the row disappears when empty. */
-declare function PageToolbarChips({ className, ...rest }: PageToolbarChipsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageToolbarChips {
-    var displayName: string;
-}
-export declare const PageToolbar: {
-    Root: typeof PageToolbarRoot;
-    Sections: typeof PageToolbarSections;
-    Tools: typeof PageToolbarTools;
-    View: typeof PageToolbarView;
-    Actions: typeof PageToolbarActions;
-    Chips: typeof PageToolbarChips;
-};
-export {};

package/dist/layout/app-header/AppHeader.d.ts

@@ -1,118 +0,0 @@
-import * as React from "react";
-import { type DividerProps } from "../../components/divider/Divider";
-export type AppHeaderLabels = {
-    /** Name of the menu button that opens the off-canvas Sidebar. */
-    menu: string;
-};
-export declare const APP_HEADER_LABELS: AppHeaderLabels;
-type HeaderProps = React.HTMLAttributes<HTMLElement> & {
-    ref?: React.Ref<HTMLElement>;
-};
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-    ref?: React.Ref<HTMLDivElement>;
-};
-export type AppHeaderRootProps = HeaderProps & {
-    /**
-     * Built-in strings, see Labels.
-     */
-    labels?: Partial<AppHeaderLabels>;
-};
-/**
- * The page's bar at the very top of the content panel: a title row as high as the Sidebar brand
- * row (so the two read as one line) with only what the current page needs — the page title, the
- * page's own buttons — and the page tools (`AppHeader.Tools`) as a second row under it. Sticky;
- * lays itself out from its own width (narrow: the title icon goes, the title and its line of data
- * truncate). Inside an `AppShell` a header the page renders moves into the shell's header row, and
- * while the Sidebar is off-canvas the row starts with the menu button that opens it.
- */
-declare function AppHeaderRoot(props: AppHeaderRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderRoot {
-    var displayName: string;
-}
-export type AppHeaderStartProps = DivProps;
-/** The leading zone: the menu button, a back button, the title or breadcrumbs. Takes the free width. */
-declare function AppHeaderStart({ className, children, ...rest }: AppHeaderStartProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderStart {
-    var displayName: string;
-}
-export type AppHeaderTitleProps = DivProps;
-/**
- * Where you are: an optional `AppHeader.Icon`, the name and an optional `AppHeader.Description`
- * under it — the same anatomy as the Sidebar brand. The name is the page's `<h1>` (an app page
- * titles itself in the header); the description stays outside the heading's name. The name
- * truncates.
- */
-declare function AppHeaderTitle({ className, children, ...rest }: AppHeaderTitleProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderTitle {
-    var displayName: string;
-}
-export type AppHeaderIconProps = React.HTMLAttributes<HTMLSpanElement> & {
-    ref?: React.Ref<HTMLSpanElement>;
-};
-/**
- * Decorative glyph before the title on a tile shaped like the bar's soft buttons (control m).
- * Not a Thumbnail: its tiers (32 · 40) miss the control height the buttons beside it have.
- */
-declare function AppHeaderIcon({ className, ...rest }: AppHeaderIconProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderIcon {
-    var displayName: string;
-}
-export type AppHeaderDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
-    ref?: React.Ref<HTMLSpanElement>;
-};
-/** Muted line of data under the title (a period, a count); on a narrow header it truncates. */
-declare function AppHeaderDescription({ className, ...rest }: AppHeaderDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderDescription {
-    var displayName: string;
-}
-export type AppHeaderSeparatorProps = Omit<DividerProps, "orientation" | "children" | "align" | "size" | "inset">;
-/**
- * A short vertical line between groups in a zone (a back button | the path), with air on both
- * sides: the inset vertical Divider, one text line tall.
- */
-declare function AppHeaderSeparator({ className, ...rest }: AppHeaderSeparatorProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderSeparator {
-    var displayName: string;
-}
-export type AppHeaderToolsProps = DivProps;
-/**
- * The page's tools in the header — a `PageToolbar.Root` (sections, period, filters, the primary
- * action): the header's second row, the full width under the title row, so the toolbar lays
- * itself out from that width (one row when wide, two when narrow). Root places it there wherever
- * it is written — directly, in a fragment or inside a component of the page.
- */
-declare function AppHeaderTools(props: AppHeaderToolsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderTools {
-    var displayName: string;
-}
-export type AppHeaderActionsProps = DivProps;
-/** Buttons at the end: one primary action, notifications, the account. Never wraps. */
-declare function AppHeaderActions({ className, ...rest }: AppHeaderActionsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderActions {
-    var displayName: string;
-}
-export type AppHeaderMenuButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "aria-expanded" | "aria-controls"> & {
-    ref?: React.Ref<HTMLButtonElement>;
-};
-/**
- * Opens the off-canvas Sidebar of the shell: an icon button named by `labels.menu`, with
- * `aria-expanded` and `aria-controls` from the shell. The bar draws one itself; this part moves it
- * to another place in the header. Renders nothing while the Sidebar is a rail on screen, or
- * outside a shell with a Sidebar.
- */
-declare function AppHeaderMenuButton(props: AppHeaderMenuButtonProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderMenuButton {
-    var displayName: string;
-}
-export declare const AppHeader: {
-    Root: typeof AppHeaderRoot;
-    Start: typeof AppHeaderStart;
-    Title: typeof AppHeaderTitle;
-    Icon: typeof AppHeaderIcon;
-    Description: typeof AppHeaderDescription;
-    Separator: typeof AppHeaderSeparator;
-    Tools: typeof AppHeaderTools;
-    Actions: typeof AppHeaderActions;
-    MenuButton: typeof AppHeaderMenuButton;
-};
-export {};