@charcuterie/ui 2.9.0 → 2.10.0

package/dist/Shell/Shell.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { useMemo, } from "react";
+import { toClassName } from "../toClassName.js";
+import { DEFAULT_CONTENT_WIDTH, } from "./contentWidth.js";
+import { ShellContext } from "./shellContext.js";
+/**
+ * The page frame: one `Header`, up to two `Rail`s, one `Main`.
+ *
+ * **The largest duplicated surface in the fleet.** Ten of twelve UI
+ * repos hand-roll this, and three of them have a file literally
+ * called `AppShell.tsx` — mail-sifter's and points-market's headers
+ * are a **byte-identical** string
+ * (`sticky top-0 z-40 border-b border-border-subtle bg-surface-base/90 backdrop-blur-md`),
+ * arrived at independently, and board-games' is the same structure
+ * with `sticky` dropped. The remaining seven spell it as
+ * `PageChrome`, `Header`, `DashboardHeader`, `Layout` (twice),
+ * `TitleBar`, and inline in `App.tsx`.
+ *
+ * Three things fall out of owning it once, and each is a bug
+ * somewhere in that list today:
+ *
+ *  - **A skip link.** All ten are missing one. A keyboard user
+ *    tabs through the whole header on every page.
+ *  - **One width, not two.** `Header` and `Main` read the same
+ *    `contentWidth` through context — see `shellContext.ts` for
+ *    the app where they disagree.
+ *  - **Sticky that is actually sticky.** mux-magic's `PageHeader`
+ *    is *described* as sticky and sets only `z-index`; it never
+ *    sets `position: sticky`, so the z-index does nothing and the
+ *    header scrolls away. `Header`'s `isSticky` sets both or
+ *    neither.
+ *
+ * ## The layout is one grid, and the rails do not duplicate
+ *
+ * Three columns at `md` and up — `auto minmax(0, 1fr) auto`, so an
+ * absent rail is a **zero-width track** rather than a conditional
+ * subtree — collapsing to a single column below it, where the
+ * children simply stack in DOM order. The same `Rail` element is
+ * in the document at every width; nothing is rendered twice behind
+ * `hidden`/`lg:hidden`.
+ *
+ * That matters beyond tidiness. mux-magic's `PageHeader` renders
+ * its entire control set twice (lines 290–345 and 356–410) and
+ * mail-sifter's `TriageQueue` does the same, so every action
+ * exists twice in the DOM at every viewport: tests have to be
+ * defensively scoped with `within(toolbar)`, and any agent driving
+ * the page sees phantom controls it cannot click.
+ *
+ * `minmax(0, 1fr)` on the middle track is the horizontal-scroll
+ * fix, not a formality. A grid track's automatic minimum is
+ * `min-content`, so **one long unbroken string in `Main` widens
+ * the whole page** — which is the bug plex-channels' narrow view
+ * has today. rip-deck's `BayGrid` documents the same fix from the
+ * other end.
+ *
+ * There is no `gap`: an empty `auto` track is 0 wide, but a `gap`
+ * beside it is not, so a shell with no rails would carry two
+ * mystery gutters. `Rail` and `Main` bring their own padding.
+ *
+ * ## `overflow-x: clip` — the structural guarantee
+ *
+ * `minmax(0, 1fr)` fixes the tracks and `Main`'s `wrap-anywhere`
+ * fixes the text, but neither reaches the shape that actually
+ * broke plex-channels: **a closed panel parked at
+ * `transform: translateX(110%)`**. A transform does not take a box
+ * out of the document's scrollable overflow region — and neither
+ * does `visibility: hidden` — so an off-screen drawer that looks
+ * absent still makes the page scroll to it. It is a favourite
+ * fleet pattern and no amount of `min-width: 0` touches it.
+ *
+ * `clip`, not `hidden`, and the two are not interchangeable here:
+ * `overflow: hidden` creates a **scroll container**, which would
+ * become the sticky containing block for `Header` and freeze it in
+ * place. `overflow-x: clip` creates no scrollport, so `Header`
+ * keeps sticking to the viewport, and `overflow-y` stays `visible`
+ * — a pair that is legal for `clip` and illegal for `hidden`,
+ * which would compute the other axis to `auto`.
+ *
+ * The trade is deliberate: content wider than the frame is
+ * **clipped rather than reachable by scrolling sideways**, which is
+ * exactly the outcome asked for. Content that genuinely needs to
+ * be wider owns a scroll container of its own — the pattern
+ * `Main.mdx` documents for tables.
+ *
+ * ### `relative` is what makes the clip reach anything
+ *
+ * `overflow-x: clip` only clips descendants whose **containing
+ * block chain passes through the clipping element**. An absolutely
+ * positioned element with no positioned ancestor resolves against
+ * the *initial* containing block instead, so it sails straight
+ * past every `overflow` in the tree and lands its overflow on
+ * `documentElement` — where `document.body.scrollWidth` still
+ * reads clean and only `document.documentElement.scrollWidth`
+ * shows it.
+ *
+ * That is not hypothetical: it is measured. Before this
+ * `relative`, the parked-drawer fixture reported `shellScroll:
+ * 390`, `bodyScroll: 390` and `docScroll: 742` at a 390px
+ * viewport — the shell dutifully clipping a box it had no
+ * authority over.
+ *
+ * The obvious candidate to own it, `Main`'s content column, does
+ * **not**: `container-type: inline-size` computes `contain` to
+ * `none` in Chromium and establishes no containing block for
+ * absolute positioning, which is measured too — the drawer's
+ * `offsetParent` was `BODY`. So `Shell` takes the job, which is
+ * also the honest place for it: the frame is what an app's parked
+ * chrome is parked against.
+ */
+export const Shell = ({ children, className, contentWidth = DEFAULT_CONTENT_WIDTH, skipLinkLabel = "Skip to main content", ...divProps }) => {
+    const mainId = useUniqueId();
+    const shellContext = useMemo(() => ({ contentWidth, mainId }), [contentWidth, mainId]);
+    return (_jsx(ShellContext.Provider, { value: shellContext, children: _jsxs("div", { ...divProps, className: toClassName("relative grid min-h-dvh grid-cols-1 grid-rows-[auto_auto_1fr_auto] overflow-x-clip bg-surface-base text-content-primary md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[auto_1fr]", className), children: [_jsx("a", { className: "fixed top-0 start-0 z-[var(--layer-toast)] m-3 -translate-y-24 rounded-md border border-border-subtle bg-surface-raised px-3 py-2 font-medium text-content-primary text-sm shadow-medium focus-visible:translate-y-0", href: `#${mainId}`, children: skipLinkLabel }), children] }) }));
+};
+//# sourceMappingURL=Shell.js.map

package/dist/Shell/Shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../src/Shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAGL,OAAO,GACR,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAOhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,GAAG,qBAAqB,EACpC,aAAa,GAAG,sBAAsB,EACtC,GAAG,QAAQ,EACA,EAAa,EAAE;IAC1B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAE5B,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAChC,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAA;IAED,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACxC,kBACM,QAAQ,EACZ,SAAS,EAAE,WAAW,CACpB,wLAAwL,EACxL,SAAS,CACV,aAcD,YACE,SAAS,EAAC,sNAAsN,EAChO,IAAI,EAAE,IAAI,MAAM,EAAE,YAEjB,aAAa,GACZ,EAEH,QAAQ,IACL,GACgB,CACzB,CAAA;AACH,CAAC,CAAA"}

package/dist/Shell/contentWidth.d.ts

@@ -0,0 +1,63 @@
+/**
+ * How wide the content column is allowed to get — the one number
+ * the fleet has never agreed on.
+ *
+ * Ten repos hand-roll their page chrome and **no two of them cap
+ * the column at the same width**: `max-w-5xl` (board-games,
+ * portly), `max-w-6xl` and `max-w-3xl` mixed inside one app
+ * (mux-magic), `max-w-7xl` (gallery-downloader, spoolbuddy),
+ * `max-w-[90rem]` (mail-sifter), `80rem` (points-market), a raw
+ * `1400px` in plain CSS (plex-channels), a JS-computed one
+ * (rip-deck), and none at all in three more. It is the least
+ * standardized value in the entire fleet.
+ *
+ * Two shapes are accepted, because the fleet genuinely has two
+ * cases and collapsing them is what produced the mess:
+ *
+ *  1. A **`screen.*` step** — the ordinary page. Named, so a
+ *     reviewer reads `contentWidth="lg"` rather than deciding
+ *     whether `max-w-6xl` was chosen or inherited.
+ *  2. A **`${number}rem` literal** — the runtime-computed case.
+ *     rip-deck's `contentMaxWidthRem(columns)` widens the cap as
+ *     the grid gains columns (1 → 56rem, 2 → 72rem, 3 → 106rem),
+ *     and no fixed scale can express a number that is decided
+ *     after the viewport is measured.
+ *
+ * `"full"` is the third answer and it is deliberate rather than a
+ * hole: a wall of poster tiles wants the whole window, and an app
+ * that wants that today reaches the same place by *omitting* the
+ * cap, which is indistinguishable from having forgotten it.
+ *
+ * **`max-w-*` is not used and must not be.** Tailwind v4 owns
+ * `--container-*` for that scale at *different* sizes than our
+ * `screen.*`, which is the collision that renamed our
+ * container-query scale to `--cq-*`
+ * ([decision](../../../../docs/decisions/2026-07-29-container-query-scale-is-cq-not-container.md)).
+ * The cap is therefore an inline `max-inline-size` reading
+ * `var(--screen-*)`, so it stays a token rather than becoming a
+ * literal the moment it is written down.
+ */
+import { screen } from "@charcuterie/tokens";
+/** `sm` | `md` | `lg` | `xl` | `2xl`, from the token scale. */
+export type ScreenStep = keyof typeof screen;
+export type ContentWidth = ScreenStep | "full" | `${number}rem`;
+/**
+ * The `max-inline-size` a `contentWidth` resolves to, or
+ * `undefined` for `"full"` — which is the absence of the property
+ * rather than a very large value, so nothing has to be un-set.
+ */
+export declare const toMaxInlineSize: (contentWidth: ContentWidth) => string | undefined;
+/**
+ * The cap an app gets without asking, and it is deliberately
+ * **narrower** than most of what the fleet ships.
+ *
+ * The owner's complaint, verbatim: *"All these apps seem to be
+ * really narrow with a very large max-width. By that I mean 1
+ * column, but waaaaaaay too wide."* A single column of prose or
+ * form fields at `max-w-7xl` is one line of text the eye has to
+ * track across a monitor. `screen.lg` is 64rem — wide enough for a
+ * two-up card grid, narrow enough to read — and an app whose
+ * content genuinely fills a window says so, once, in one place.
+ */
+export declare const DEFAULT_CONTENT_WIDTH: ContentWidth;
+//# sourceMappingURL=contentWidth.d.ts.map

package/dist/Shell/contentWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contentWidth.d.ts","sourceRoot":"","sources":["../../src/Shell/contentWidth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAE5C,+DAA+D;AAC/D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAA;AAE5C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,MAAM,GACN,GAAG,MAAM,KAAK,CAAA;AASlB;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,cAAc,YAAY,KACzB,MAAM,GAAG,SAUX,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,EAAE,YAAmB,CAAA"}

package/dist/Shell/contentWidth.js

@@ -0,0 +1,74 @@
+/**
+ * How wide the content column is allowed to get — the one number
+ * the fleet has never agreed on.
+ *
+ * Ten repos hand-roll their page chrome and **no two of them cap
+ * the column at the same width**: `max-w-5xl` (board-games,
+ * portly), `max-w-6xl` and `max-w-3xl` mixed inside one app
+ * (mux-magic), `max-w-7xl` (gallery-downloader, spoolbuddy),
+ * `max-w-[90rem]` (mail-sifter), `80rem` (points-market), a raw
+ * `1400px` in plain CSS (plex-channels), a JS-computed one
+ * (rip-deck), and none at all in three more. It is the least
+ * standardized value in the entire fleet.
+ *
+ * Two shapes are accepted, because the fleet genuinely has two
+ * cases and collapsing them is what produced the mess:
+ *
+ *  1. A **`screen.*` step** — the ordinary page. Named, so a
+ *     reviewer reads `contentWidth="lg"` rather than deciding
+ *     whether `max-w-6xl` was chosen or inherited.
+ *  2. A **`${number}rem` literal** — the runtime-computed case.
+ *     rip-deck's `contentMaxWidthRem(columns)` widens the cap as
+ *     the grid gains columns (1 → 56rem, 2 → 72rem, 3 → 106rem),
+ *     and no fixed scale can express a number that is decided
+ *     after the viewport is measured.
+ *
+ * `"full"` is the third answer and it is deliberate rather than a
+ * hole: a wall of poster tiles wants the whole window, and an app
+ * that wants that today reaches the same place by *omitting* the
+ * cap, which is indistinguishable from having forgotten it.
+ *
+ * **`max-w-*` is not used and must not be.** Tailwind v4 owns
+ * `--container-*` for that scale at *different* sizes than our
+ * `screen.*`, which is the collision that renamed our
+ * container-query scale to `--cq-*`
+ * ([decision](../../../../docs/decisions/2026-07-29-container-query-scale-is-cq-not-container.md)).
+ * The cap is therefore an inline `max-inline-size` reading
+ * `var(--screen-*)`, so it stays a token rather than becoming a
+ * literal the moment it is written down.
+ */
+import { screen } from "@charcuterie/tokens";
+/**
+ * Derived from the scale rather than restated, so a step added to
+ * `screen.*` is accepted here without a second edit — and one
+ * removed stops typechecking at every call site.
+ */
+const SCREEN_STEPS = new Set(Object.keys(screen));
+/**
+ * The `max-inline-size` a `contentWidth` resolves to, or
+ * `undefined` for `"full"` — which is the absence of the property
+ * rather than a very large value, so nothing has to be un-set.
+ */
+export const toMaxInlineSize = (contentWidth) => {
+    if (contentWidth === "full") {
+        return undefined;
+    }
+    if (SCREEN_STEPS.has(contentWidth)) {
+        return `var(--screen-${contentWidth})`;
+    }
+    return contentWidth;
+};
+/**
+ * The cap an app gets without asking, and it is deliberately
+ * **narrower** than most of what the fleet ships.
+ *
+ * The owner's complaint, verbatim: *"All these apps seem to be
+ * really narrow with a very large max-width. By that I mean 1
+ * column, but waaaaaaay too wide."* A single column of prose or
+ * form fields at `max-w-7xl` is one line of text the eye has to
+ * track across a monitor. `screen.lg` is 64rem — wide enough for a
+ * two-up card grid, narrow enough to read — and an app whose
+ * content genuinely fills a window says so, once, in one place.
+ */
+export const DEFAULT_CONTENT_WIDTH = "lg";
+//# sourceMappingURL=contentWidth.js.map

package/dist/Shell/contentWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contentWidth.js","sourceRoot":"","sources":["../../src/Shell/contentWidth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAU5C;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,YAA0B,EACN,EAAE;IACtB,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,IAAI,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;QACnC,OAAO,gBAAgB,YAAY,GAAG,CAAA;IACxC,CAAC;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB,IAAI,CAAA"}

package/dist/Shell/shellContext.d.ts

@@ -0,0 +1,36 @@
+/**
+ * What `Shell` tells `Header` and `Main` so they cannot disagree.
+ *
+ * This context exists because of one specific bug, present in the
+ * fleet today: **points-market's header is width-constrained and
+ * its `<main>` is not.** `AppShell.tsx` wraps the header row in
+ * `.pm-constrained` (80rem) and then renders
+ * `<main className="px-4 py-6 sm:px-6">` with no cap at all, so on
+ * a wide monitor the page title sits above content that starts to
+ * its left and runs past its right. Nothing errors, both values
+ * are individually reasonable, and the two were simply written on
+ * different days.
+ *
+ * A width that has to be stated twice will eventually be stated
+ * twice differently. So it is stated **once**, on `Shell`, and the
+ * two elements that have to agree read it from here. Either can
+ * still override for a genuine reason — a full-bleed hero `Main`
+ * under a constrained `Header` is a real design — but that now
+ * takes a prop somebody wrote on purpose.
+ *
+ * `mainId` rides along for the same reason: the skip link's `href`
+ * and the `<main>` it lands on are one value, generated once.
+ */
+import type { ContentWidth } from "./contentWidth.ts";
+export type ShellContextValue = {
+    contentWidth: ContentWidth;
+    mainId: string;
+};
+/**
+ * `null` rather than a default object, so `Header` and `Main` can
+ * tell "no `Shell` above me" from "a `Shell` that chose the
+ * defaults" — the first case has to generate its own `<main>` id,
+ * the second must not.
+ */
+export declare const ShellContext: import("react").Context<ShellContextValue | null>;
+//# sourceMappingURL=shellContext.d.ts.map

package/dist/Shell/shellContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shellContext.d.ts","sourceRoot":"","sources":["../../src/Shell/shellContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,mDACsB,CAAA"}

package/dist/Shell/shellContext.js

@@ -0,0 +1,32 @@
+/**
+ * What `Shell` tells `Header` and `Main` so they cannot disagree.
+ *
+ * This context exists because of one specific bug, present in the
+ * fleet today: **points-market's header is width-constrained and
+ * its `<main>` is not.** `AppShell.tsx` wraps the header row in
+ * `.pm-constrained` (80rem) and then renders
+ * `<main className="px-4 py-6 sm:px-6">` with no cap at all, so on
+ * a wide monitor the page title sits above content that starts to
+ * its left and runs past its right. Nothing errors, both values
+ * are individually reasonable, and the two were simply written on
+ * different days.
+ *
+ * A width that has to be stated twice will eventually be stated
+ * twice differently. So it is stated **once**, on `Shell`, and the
+ * two elements that have to agree read it from here. Either can
+ * still override for a genuine reason — a full-bleed hero `Main`
+ * under a constrained `Header` is a real design — but that now
+ * takes a prop somebody wrote on purpose.
+ *
+ * `mainId` rides along for the same reason: the skip link's `href`
+ * and the `<main>` it lands on are one value, generated once.
+ */
+import { createContext } from "react";
+/**
+ * `null` rather than a default object, so `Header` and `Main` can
+ * tell "no `Shell` above me" from "a `Shell` that chose the
+ * defaults" — the first case has to generate its own `<main>` id,
+ * the second must not.
+ */
+export const ShellContext = createContext(null);
+//# sourceMappingURL=shellContext.js.map

package/dist/Shell/shellContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shellContext.js","sourceRoot":"","sources":["../../src/Shell/shellContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GACvB,aAAa,CAA2B,IAAI,CAAC,CAAA"}

package/dist/index.d.ts

@@ -68,6 +68,8 @@ export type { FieldGroupProps } from "./Field/FieldGroup.tsx";
 export { FieldGroup } from "./Field/FieldGroup.tsx";
 export type { FileDropZoneProps } from "./FileDropZone/FileDropZone.tsx";
 export { FileDropZone } from "./FileDropZone/FileDropZone.tsx";
+export type { HeaderProps } from "./Header/Header.tsx";
+export { Header } from "./Header/Header.tsx";
 export type { IconButtonProps } from "./IconButton/IconButton.tsx";
 export { IconButton } from "./IconButton/IconButton.tsx";
 export type { IntentAppearance } from "./intentStyles.ts";
@@ -80,6 +82,8 @@ export type { LiveStatusIndicatorProps, LiveStatusIndicatorSize, } from "./LiveS
 export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
 export type { LogLine, LogViewerProps, } from "./LogViewer/LogViewer.tsx";
 export { LogViewer } from "./LogViewer/LogViewer.tsx";
+export type { MainProps } from "./Main/Main.tsx";
+export { Main } from "./Main/Main.tsx";
 export type { MediaTileProps, MediaTileRatio, } from "./MediaTile/MediaTile.tsx";
 export { MediaTile } from "./MediaTile/MediaTile.tsx";
 export type { MediaStatus } from "./MediaTile/mediaStatus.ts";
@@ -96,6 +100,8 @@ export type { ProgressThreshold } from "./ProgressBar/progressValue.ts";
 export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.ts";
 export type { RadioGroupProps, RadioItem, } from "./RadioGroup/RadioGroup.tsx";
 export { RadioGroup } from "./RadioGroup/RadioGroup.tsx";
+export type { RailLandmark, RailProps, RailSide, } from "./Rail/Rail.tsx";
+export { Rail } from "./Rail/Rail.tsx";
 export { AnchorLink } from "./RouterLink/AnchorLink.tsx";
 export { RouterLinkProvider, useRouterLink, } from "./RouterLink/RouterLinkProvider.tsx";
 export type { RouterLinkComponent, RouterLinkProps, } from "./RouterLink/routerLink.ts";
@@ -104,6 +110,9 @@ export type { SegmentedControlProps, SegmentedItem, } from "./SegmentedControl/S
 export { SegmentedControl } from "./SegmentedControl/SegmentedControl.tsx";
 export type { SelectItem, SelectOption, SelectOptionGroup, SelectProps, } from "./Select/Select.tsx";
 export { Select } from "./Select/Select.tsx";
+export type { ContentWidth, ScreenStep, } from "./Shell/contentWidth.ts";
+export type { ShellProps } from "./Shell/Shell.tsx";
+export { Shell } from "./Shell/Shell.tsx";
 export type { SkeletonProps, SkeletonShape, } from "./Skeleton/Skeleton.tsx";
 export { Skeleton } from "./Skeleton/Skeleton.tsx";
 export type { SortableTableHeaderProps, SortDirection, } from "./SortableTableHeader/SortableTableHeader.tsx";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -49,12 +49,14 @@ export { EmptyState } from "./EmptyState/EmptyState.js";
 export { Field } from "./Field/Field.js";
 export { FieldGroup } from "./Field/FieldGroup.js";
 export { FileDropZone } from "./FileDropZone/FileDropZone.js";
+export { Header } from "./Header/Header.js";
 export { IconButton } from "./IconButton/IconButton.js";
 export { ARIA_DISABLED_CLASS, DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
 export { Lightbox } from "./Lightbox/Lightbox.js";
 export { Listbox } from "./Listbox/Listbox.js";
 export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
 export { LogViewer } from "./LogViewer/LogViewer.js";
+export { Main } from "./Main/Main.js";
 export { MediaTile } from "./MediaTile/MediaTile.js";
 export { mediaTransitions } from "./MediaTile/mediaStatus.js";
 export { Menu } from "./Menu/Menu.js";
@@ -63,11 +65,13 @@ export { Popover } from "./Popover/Popover.js";
 export { ProgressBar } from "./ProgressBar/ProgressBar.js";
 export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.js";
 export { RadioGroup } from "./RadioGroup/RadioGroup.js";
+export { Rail } from "./Rail/Rail.js";
 export { AnchorLink } from "./RouterLink/AnchorLink.js";
 export { RouterLinkProvider, useRouterLink, } from "./RouterLink/RouterLinkProvider.js";
 export { getIsRoutedHref } from "./RouterLink/routerLink.js";
 export { SegmentedControl } from "./SegmentedControl/SegmentedControl.js";
 export { Select } from "./Select/Select.js";
+export { Shell } from "./Shell/Shell.js";
 export { Skeleton } from "./Skeleton/Skeleton.js";
 export { SortableTableHeader } from "./SortableTableHeader/SortableTableHeader.js";
 export { Spinner } from "./Spinner/Spinner.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EACL,aAAa,EACb,wBAAwB,EACxB,0BAA0B,EAC1B,iCAAiC,EACjC,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EACL,6BAA6B,EAC7B,gBAAgB,EAChB,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAK7C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAMxD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA2C,CAAA;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAMxD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AACxD,OAAO,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,oCAAqC,CAAA;AAK5C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAK5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAM/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}

package/dist/viewport.testHelpers.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Resize the browser and **wait until the page agrees**.
+ *
+ * `page.viewport()` resolves when the driver has asked for the
+ * resize, not when the tester frame has been laid out at the new
+ * size. On the first resize in a file that gap is real: the
+ * assertion runs against the *previous* width, so a
+ * horizontal-scroll test at 390px silently measures a 1440px page
+ * and reports a number nobody can explain. It is a race, so it
+ * fails intermittently — which is the worst possible property for
+ * the one gate that says the shell does not scroll sideways.
+ *
+ * Polling `innerWidth` is the honest wait: it is the same number
+ * the media queries and the layout resolved against, so when it
+ * matches, the thing under test really is at the width the test
+ * claims.
+ */
+export declare const setViewport: ({ height, width, }: {
+    height: number;
+    width: number;
+}) => Promise<void>;
+/** A phone in portrait — the width plex-channels scrolls at. */
+export declare const PHONE: {
+    height: number;
+    width: number;
+};
+export declare const DESKTOP: {
+    height: number;
+    width: number;
+};
+//# sourceMappingURL=viewport.testHelpers.d.ts.map

package/dist/viewport.testHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.testHelpers.d.ts","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAU,oBAG/B;IACD,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,KAAG,OAAO,CAAC,IAAI,CAgBf,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;CAA8B,CAAA;AAEhD,eAAO,MAAM,OAAO;;;CAA+B,CAAA"}

package/dist/viewport.testHelpers.js

@@ -0,0 +1,34 @@
+import { page } from "@vitest/browser/context";
+/**
+ * Resize the browser and **wait until the page agrees**.
+ *
+ * `page.viewport()` resolves when the driver has asked for the
+ * resize, not when the tester frame has been laid out at the new
+ * size. On the first resize in a file that gap is real: the
+ * assertion runs against the *previous* width, so a
+ * horizontal-scroll test at 390px silently measures a 1440px page
+ * and reports a number nobody can explain. It is a race, so it
+ * fails intermittently — which is the worst possible property for
+ * the one gate that says the shell does not scroll sideways.
+ *
+ * Polling `innerWidth` is the honest wait: it is the same number
+ * the media queries and the layout resolved against, so when it
+ * matches, the thing under test really is at the width the test
+ * claims.
+ */
+export const setViewport = async ({ height, width, }) => {
+    await page.viewport(width, height);
+    const deadline = Date.now() + 2000;
+    while (globalThis.innerWidth !== width) {
+        if (Date.now() > deadline) {
+            throw new Error(`The viewport never reached ${width}px — it is ${globalThis.innerWidth}px. Every width assertion after this point would be measuring the wrong page.`);
+        }
+        await new Promise((resolve) => {
+            globalThis.requestAnimationFrame(resolve);
+        });
+    }
+};
+/** A phone in portrait — the width plex-channels scrolls at. */
+export const PHONE = { height: 844, width: 390 };
+export const DESKTOP = { height: 900, width: 1440 };
+//# sourceMappingURL=viewport.testHelpers.js.map

package/dist/viewport.testHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.testHelpers.js","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,EAChC,MAAM,EACN,KAAK,GAIN,EAAiB,EAAE;IAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAElC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAA;IAElC,OAAO,UAAU,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;QACvC,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,EAAE,CAAC;YAC1B,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,cAAc,UAAU,CAAC,UAAU,+EAA+E,CACtJ,CAAA;QACH,CAAC;QAED,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC5B,UAAU,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/Header/Header.mdx

@@ -0,0 +1,72 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+
+import * as HeaderStories from "./Header.stories";
+
+<Meta of={HeaderStories} />
+
+# Header
+
+The `<header>` landmark, the app's name, and the controls that belong to the frame rather
+than to the page. Ten repos hand-roll this row; two of them wrote the same string.
+
+<Canvas of={HeaderStories.Default} />
+
+## Props
+
+<Controls />
+
+<Canvas of={HeaderStories.AllStates} />
+
+## `isSticky` sets `position` **and** `z-index`
+
+That pairing is the entire reason the prop is a boolean rather than two class names.
+
+mux-magic's `PageHeader` is documented as a sticky header and sets only `z-index`
+(`PageHeader.tsx:173`). It never sets `position: sticky`, so it scrolls away like any other
+block and the z-index it carries has nothing to stack against — it is a flex-column shell
+wearing a sticky header's clothes. The CSS is valid, the intent is stated in a comment, and
+nobody scrolls a component in a review.
+
+<Canvas of={HeaderStories.AllVariants} />
+
+The z-index is `--layer-sticky` (100) from the token scale, never a hand-picked number. The
+fleet's headers currently sit at `z-40` (mail-sifter, points-market), `z-50` (rip-deck),
+`z-10` (spoolbuddy) and `z-[100]` (mux-magic) with no ordering guarantee between a header
+and anything else. On the scale, `sticky` is below `dropdown` (200), `modal` (400) and
+`toast` (500) — so a `Menu` opened *from* the header paints over it, by construction.
+
+<Canvas of={HeaderStories.NotSticky} />
+
+## It invents no colours
+
+`bg-surface-raised/85`, `backdrop-blur-md`, `border-border-subtle`. The fleet's copy of this
+line is `bg-surface-base/90` — the header at *the same colour as the page behind it*,
+leaning entirely on the blur to separate the two, so it disappears against a page that has
+not been scrolled. `raised` means *more separated from base*, which is the role this
+element actually wants.
+
+## The width comes from `Shell`
+
+<Canvas of={HeaderStories.Responsive} />
+
+The `<header>` is full-bleed — the border and the translucent fill run edge to edge — and
+only its **inner row** is capped. That is what stops a constrained header from reading as a
+floating island on an ultrawide, and it is the half points-market got right while its
+`<main>` went uncapped.
+
+The cap itself comes from `Shell`'s `contentWidth` through context, so the title always
+sits directly above the content it names. Passing `contentWidth` here overrides it for the
+rare case where they genuinely differ.
+
+## Slots, in render order
+
+`heading` → `children` → `actions`. Every one is optional: a header with only actions is
+image-viewer's `TitleBar`, one with only a heading is board-games'. `children` is the middle
+— a search field, a breadcrumb, a status pill — and `actions` is pushed to the far end with
+`ms-auto`, so it stays at the end in RTL too.
+
+<Canvas of={HeaderStories.Interactive} />
+
+`headingLevel` defaults to `1`, because on most pages the app's name *is* the document's
+top-level heading. An app whose page title is its `h1` sets `headingLevel={2}` here rather
+than leaving two of them.