@stealthscale/component-screen 0.0.0-stage → 0.2.1

package/dist/recipe-sZAQY6Kq.js

@@ -0,0 +1,2623 @@
+import { i as NARROW$1, n as FOLDING } from "./recipe-DRMsitrw.js";
+import { CONTROL_INSET_END, CONTROL_INSET_START, axis, below, cornerVariants, defineSlotRecipe, dense, divider, interactive, motion, onSlot, onSlots, paletteVariants, sizeVariants, surface, truncate } from "@stealthscale/theme/authoring";
+//#region src/action-bar/recipe.ts
+/**
+* Styles the action bar, a panel fixed to the bottom of the window with the actions for what a
+* person has selected.
+*
+* @remarks
+*   The root has `display: contents`, because the positioner is fixed to the window and a slot
+*   recipe passes its variants from an ancestor. The positioner spans the window inside the inset
+*   and takes no pointer events, so the page around the bar remains pressable. The toolbar inside
+*   the bar is as wide as the bar, which is at least `sizes.2xl`, 672px. The toolbar folds when it
+*   is narrower than the `sm` breakpoint, 640px, and while its controls need more room than the
+*   window leaves the bar. The minimum width makes it fold on the width of the window and not on
+*   the width of its folded content. The recipe has no `palette` axis,
+*   because the bar reads the neutral `bg.panel`, and no `effect` axis, because the bar is not a
+*   control.
+*/
+/**
+* Distance of the bar from the edges of the window.
+*/
+const OFFSET = "{spacing.inset.lg}";
+/**
+* Places the bar may take along the bottom of the window, in the order a line reads them.
+*/
+const PLACEMENTS = [
+	"bottom-start",
+	"bottom",
+	"bottom-end"
+];
+/**
+* Maps each placement to where the positioner puts the bar along its row.
+*/
+const ALIGNED = {
+	bottom: "center",
+	"bottom-end": "flex-end",
+	"bottom-start": "flex-start"
+};
+/**
+* Defines the action bar recipe, which places the bar in the middle of the bottom edge by default.
+*/
+const recipe$7 = defineSlotRecipe({
+	base: {
+		closeTrigger: { flexShrink: "0" },
+		content: {
+			...motion("sheet.bottom.in", "sheet.bottom.out"),
+			background: "bg.panel",
+			borderColor: "transparent",
+			borderRadius: "l3",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "lg",
+			color: "fg",
+			inlineSize: "fit-content",
+			maxInlineSize: "full",
+			minInlineSize: "min(100%, {sizes.2xl})",
+			padding: dense("{spacing.inset.xs}"),
+			pointerEvents: "auto"
+		},
+		positioner: {
+			display: "flex",
+			insetBlockEnd: `calc({spacing.safe.bottom} + ${OFFSET})`,
+			insetInline: "0",
+			paddingInline: OFFSET,
+			pointerEvents: "none",
+			position: "fixed",
+			zIndex: "banner"
+		},
+		root: { display: "contents" }
+	},
+	className: "action-bar",
+	defaultVariants: { placement: "bottom" },
+	jsx: [/^ActionBar(\.\w+)?$/u],
+	slots: [
+		"root",
+		"positioner",
+		"content",
+		"closeTrigger"
+	],
+	variants: { 
+	/**
+	* Place of the bar along the bottom of the window: at the start, in the middle or at the end.
+	*
+	* @remarks
+	*   Start and end follow the writing direction.
+	*/
+placement: onSlot("positioner", axis(PLACEMENTS, (placement) => ({ justifyContent: ALIGNED[placement] }))()) }
+});
+//#endregion
+//#region src/resize/widths.ts
+/**
+* Attribute an element has while a drag inside it resizes a panel or a column.
+*/
+const RESIZING = "data-resizing";
+/**
+* Returns the CSS length of a width a person resized an element to: the width, and never wider than
+* its limit, so a width stored on a wide screen fits a narrow one.
+*
+* @param width - The width, in pixels.
+* @param max - The widest width, in pixels. Half the window where left out.
+* @returns The length, such as `min(320px, 50vw)`.
+*/
+function lengthOf(width, max) {
+	const limit = max === void 0 ? "50vw" : `${String(max)}px`;
+	return `min(${String(width)}px, ${limit})`;
+}
+/**
+* Returns a width held between the bounds.
+*
+* @param width - The width asked for.
+* @param bounds - The narrowest and the widest width.
+* @returns The width, raised to the narrowest or lowered to the widest.
+*/
+function clamped(width, { max, min }) {
+	return Math.min(Math.max(width, min), max);
+}
+/**
+* Returns 1 where the pointer moving to the physical right widens the element, and -1 where it
+* narrows it.
+*
+* @param edge - Side of the page the element is on.
+* @param rtl - Whether the page reads right to left.
+*/
+function growthOf(edge, rtl) {
+	return edge === "start" === !rtl ? 1 : -1;
+}
+/**
+* Returns the width a key moves the element to.
+*
+* @param key - The key pressed, as `KeyboardEvent.key` spells it.
+* @param shift - Whether Shift is held.
+* @param width - The element's width now.
+* @param scale - The narrowest and the widest width, and the direction the width grows in.
+* @returns The new width, or undefined for a key that resizes nothing.
+*/
+function keyedWidth(key, shift, width, scale) {
+	const step = (shift ? 50 : 10) * scale.growth;
+	if (key === "ArrowRight") return clamped(width + step, scale);
+	if (key === "ArrowLeft") return clamped(width - step, scale);
+	if (key === "Home") return scale.min;
+	if (key === "End") return scale.max;
+}
+//#endregion
+//#region src/resize/strip.ts
+/**
+* Styles the strip on the edge of a panel or a column that a person presses, drags or focuses.
+*
+* @remarks
+*   The strip is 24px wide and transparent, with a line down its middle under the pointer, on
+*   keyboard focus and while a drag inside its holder runs. A separator, the strip of an element a
+*   person resizes, takes the column resize cursor. The strip is hidden under a coarse pointer,
+*   where a finger presses the menu button instead. The module imports no React, because the theme
+*   plugin evaluates the recipes that read it in Node.
+*/
+/**
+* Styles the strip, with its placement left to the recipe that reads it.
+*/
+const STRIP$3 = {
+	...interactive(),
+	_after: {
+		background: "transparent",
+		content: "\"\"",
+		inlineSize: "{borderWidths.indicator}",
+		insetBlock: "0",
+		insetInlineStart: "calc(50% - {borderWidths.indicator} / 2)",
+		position: "absolute"
+	},
+	_focusVisible: { _after: { background: "colorPalette.focusRing" } },
+	_hover: { _after: { background: "border.emphasized" } },
+	_touch: { display: "none" },
+	"&[role=separator]": { cursor: "resizeColumn" },
+	[`[${RESIZING}] &`]: { _after: { background: "border.emphasized" } },
+	appearance: "none",
+	background: "transparent",
+	borderWidth: "0",
+	colorPalette: "neutral",
+	inlineSize: "6",
+	padding: "0",
+	zIndex: "docked"
+};
+//#endregion
+//#region src/app-shell/metrics.ts
+/**
+* Names the custom properties and attributes the app shell reads, and defines the style objects
+* its recipe is written from.
+*
+* @remarks
+*   The module keeps the recipe under the 300-line limit. It imports no React, because the theme
+*   plugin evaluates the recipe in Node.
+*/
+/**
+* The recipe's class name, used to build the selectors from one part to another.
+*
+* @remarks
+*   The binding writes one class per part, such as `app-shell__main`, and no part attribute, so a
+*   selector across parts targets the class built from this constant.
+*/
+const CLASS$5 = "app-shell";
+/**
+* Custom property with the width a panel opens to.
+*/
+const PANEL_SIZE = "--app-shell-panel-size";
+/**
+* Custom property with the width a panel closes to.
+*/
+const PANEL_RAIL = "--app-shell-panel-rail";
+/**
+* Custom property with the height of the pinned bars above a pinned bar.
+*/
+const STICKY_OFFSET$1 = "--app-shell-sticky-offset";
+/**
+* Custom property on the root with the height of every pinned bar, the bars in a pane included,
+* which a page's sticky bands stick under.
+*/
+const STICKY_TOP$1 = "--app-shell-sticky-top";
+/**
+* Custom property on the root with the height of the pinned bars above the body, which a panel
+* that sticks under them reads.
+*
+* @remarks
+*   A bar in a pane is beside the panels and not above them, so a panel sticks under the root's
+*   own bars alone.
+*/
+const PANEL_TOP = "--app-shell-panel-top";
+/**
+* Custom property on the root with the height of the pinned bars in a pane.
+*/
+const PANE_TOP = "--app-shell-pane-top";
+/**
+* Custom property an ancestor sets to the height of the shell's window.
+*
+* @remarks
+*   A box that stages a shell at a fixed height sets it, and also contains the shell's fixed
+*   parts with `contain: layout`. Unset, the window is the viewport.
+*/
+const WINDOW_HEIGHT = "--app-shell-window-height";
+/**
+* Height of the shell's window: the ancestor's `WINDOW_HEIGHT`, or the dynamic viewport height.
+*/
+const WINDOW = `var(${WINDOW_HEIGHT}, 100dvh)`;
+/**
+* Attribute the root writes after its first paint.
+*
+* @remarks
+*   A panel measures the shell after its first render and may open, close or leave the body. No
+*   part transitions before the root has this attribute, so a panel takes its measured state
+*   without a slide on load.
+*/
+const SETTLED = "data-settled";
+/**
+* Styles the transition of a moving part, with no motion under reduced motion, before the root has
+* settled, or while a person drags a panel's width.
+*/
+const MOVING = {
+	_motionReduce: { transitionDuration: "0s" },
+	transitionDuration: "move",
+	transitionTimingFunction: "move",
+	[`.${CLASS$5}__root:not([${SETTLED}]) &`]: { transitionDuration: "0s" },
+	[`.${CLASS$5}__root[${RESIZING}] &`]: { transitionDuration: "0s" }
+};
+/**
+* Width of a panel over the page: its open width, and never closer than a rail's width to the far
+* edge of the window.
+*
+* @remarks
+*   The percentage resolves against the sheet's containing block, which is the viewport, or a box
+*   with `contain: layout` that stages the shell.
+*/
+const SHEET = `min(var(${PANEL_SIZE}), calc(100% - {sizes.rail}))`;
+/**
+* Styles a panel over the page: fixed to the window, a rail's width short of the far edge, and
+* inside the safe area.
+*
+* @remarks
+*   The panel is fixed to the window, so one rule applies to both scroll modes. A closed sheet
+*   keeps its width and slides out. Its visibility changes with no duration: a closing sheet
+*   becomes hidden after a delay as long as the slide, and an opening sheet becomes visible at
+*   once. The shell moves focus into a sheet in the commit that opens it, and a browser does not
+*   focus a hidden element. A sheet is a raised surface over the backdrop: the panel ground and the
+*   `lg` shadow. A sidebar inside it paints its own ground over the panel's.
+*/
+const OVERLAID = {
+	_motionReduce: { transitionDelay: "0s" },
+	background: "bg.panel",
+	blockSize: WINDOW,
+	boxShadow: "lg",
+	inlineSize: SHEET,
+	insetBlock: "0",
+	paddingBlockEnd: "safe.bottom",
+	paddingBlockStart: "safe.top",
+	position: "fixed",
+	transitionDelay: "0s",
+	transitionDuration: "{durations.move}, 0s",
+	transitionProperty: "translate, visibility",
+	zIndex: "modal"
+};
+/**
+* Styles a closed sheet on either side: it keeps its open width, and the visibility changes after
+* the slide has ended.
+*
+* @remarks
+*   The width is written again here, because the panel's closed width is an equally specific rule
+*   that the compiler emits after the sheet's own.
+*/
+const SLID_OUT = {
+	inlineSize: SHEET,
+	transitionDelay: "0s, {durations.moderate}"
+};
+/**
+* Styles both panels: a track between the open and closed widths.
+*
+* @remarks
+*   A panel closed to nothing becomes hidden after its transition, so a border the application
+*   gives it is not visible. The shell sets the visibility, and the application sets the border.
+*/
+const PANEL = {
+	...MOVING,
+	display: "flex",
+	flexShrink: "0",
+	inlineSize: `var(${PANEL_SIZE})`,
+	overflow: "hidden",
+	[PANEL_RAIL]: "0px",
+	position: "relative",
+	transitionProperty: "inline-size, visibility",
+	"&[data-collapse=hide][data-state=closed]": { visibility: "hidden" },
+	"&[data-collapse=icons]": { [PANEL_RAIL]: "sizes.rail" },
+	"&[data-stacked]": {
+		flexBasis: "100%",
+		inlineSize: "100%",
+		order: "1",
+		position: "static"
+	},
+	"&[data-state=closed]": { inlineSize: `var(${PANEL_RAIL})` }
+};
+/**
+* Styles a bar pinned to the window, filled with `bg.panel`.
+*
+* @remarks
+*   The page scrolls under a pinned bar, so the bar has a fill. The fill is `bg.panel`, so the bar
+*   reads as a layer over the page.
+*/
+const PINNED = {
+	background: "bg.panel",
+	position: "sticky",
+	zIndex: "sticky"
+};
+/**
+* Styles a panel in the body while the window scrolls: stuck under the root's pinned bars and as
+* tall as the height they leave.
+*
+* @remarks
+*   The rule selects a panel beside the page only, because the window-scroll look is a variant and
+*   applies over the base, where a sheet is fixed and a panel under the page is static.
+*/
+const STUCK$1 = { ["&:not([data-overlaid], [data-stacked])"]: {
+	blockSize: `calc(${WINDOW} - var(${PANEL_TOP}, 0px))`,
+	insetBlockStart: `var(${PANEL_TOP}, 0px)`,
+	position: "sticky"
+} };
+/**
+* Styles a band of a panel or of the main region: a padded column, growing to the room left with
+* `data-grows`.
+*
+* @remarks
+*   A band that scrolls is inside a scroll area whose root is the `scroller`, so the band pads what
+*   scrolls and the bar is at the scroller's edge.
+*/
+const SECTION = {
+	display: "flex",
+	flexDirection: "column",
+	flexShrink: "0",
+	gap: dense("{spacing.gap.md}"),
+	minBlockSize: "0",
+	minInlineSize: "0",
+	padding: dense("{spacing.gap.lg}"),
+	"&[data-grows]": { flex: "1" }
+};
+/**
+* Styles the root of a band that scrolls: it keeps its height, or grows to the room left with
+* `data-grows`, and shrinks below its content, so its viewport scrolls.
+*/
+const SCROLLER = {
+	flexShrink: "0",
+	minBlockSize: "0",
+	minInlineSize: "0",
+	"&[data-grows]": { flex: "1" }
+};
+/**
+* Styles the content of a region's scroll area: a column at least as tall as the viewport.
+*
+* @remarks
+*   A page grows to the column's height, so a short page still fills the main region. A sidebar
+*   in a panel takes the column's height exactly and scrolls its own list, so the header and the
+*   footer of the sidebar remain in place.
+*/
+const COLUMN = {
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: "100%",
+	"& > .sidebar__root": {
+		flex: "1 1 0",
+		minBlockSize: "0"
+	}
+};
+/**
+* Styles the rail: the 24px strip centred on the edge between a panel and the page.
+*
+* @remarks
+*   The negative margins take the strip's width back from the row, so the strip overlaps the panel
+*   and the page by 12px each and moves neither.
+*/
+const RAIL = {
+	...STRIP$3,
+	alignSelf: "stretch",
+	flexShrink: "0",
+	marginInline: "calc({sizes.6} / -2)",
+	position: "relative"
+};
+//#endregion
+//#region src/app-shell/recipe.ts
+/**
+* Declares the app shell's slot recipe, which lays out a column of bars with a body between them
+* and a panel on either side of the page in the body.
+*
+* @remarks
+*   The recipe has nineteen slots. The body, the main region, a panel's content and a band that
+*   scrolls are the primitives package's scroll areas, so every bar in the shell is the theme's:
+*   `bodyViewport` and `row` are the body's viewport and content, `mainViewport` is the `main`
+*   element, `column` is the content of the main region and of a panel, and `scroller` is the root
+*   of a band that scrolls. A pane is a column in the row between the panels, with bars above and
+*   below the main region, so the panels run the full height beside the bars. A part that is left
+*   out takes no room. Every part is a container: the recipe sets the layout, the scrolling, the
+*   motion, the hairlines between regions and the grounds, and the application styles the rest
+*   through a theme. The plain look fills no region, so the shell shows the ground it is placed
+*   on. The backdrop, a sheet and a pinned bar are filled, because the page is visible under each.
+*   A sheet is raised by a shadow. A panel in the body is a track whose width moves between its
+*   open and closed widths, and its content keeps the open width, so the track clips the content
+*   instead of reflowing it. A panel over the page is fixed to the window with a backdrop behind
+*   it. The open and closed widths are the theme's `sizes.sidebar`, `sizes.aside` and `sizes.rail`
+*   unless a panel states its own. The window's height is `100dvh` unless an ancestor sets
+*   `WINDOW_HEIGHT`, so a shell staged in a box of a fixed height fills the box. The header and
+*   the footer pad their content by the middle gap, the status bar pads its row of entries by the
+*   smallest gap above and below and the middle gap at the sides, and takes no room while every
+*   entry renders nothing. A section pads by the large gap. The recipe has no `palette` and no
+*   `effect` axis, because the parts are containers and the components inside them offer their
+*   own.
+*/
+/**
+* Styles a plain, divided shell that scrolls its page.
+*
+* @remarks
+*   `staticCss` lists every value of `content`, `scroll` and `variant`. A product's frame states
+*   them as data, and the compiler emits a variant only where a source states it as a literal.
+*/
+const recipe$6 = defineSlotRecipe({
+	base: {
+		aside: {
+			...PANEL,
+			[PANEL_SIZE]: "sizes.aside",
+			"&[data-overlaid]": {
+				...OVERLAID,
+				"&[data-state=closed]": {
+					...SLID_OUT,
+					_rtl: { translate: "-100% 0" },
+					translate: "100% 0"
+				},
+				insetInlineEnd: "0"
+			}
+		},
+		backdrop: {
+			...MOVING,
+			background: "bg.inverted/40",
+			inset: "0",
+			opacity: "0",
+			pointerEvents: "none",
+			position: "fixed",
+			transitionProperty: "opacity",
+			zIndex: "overlay",
+			"&[data-state=open]": {
+				opacity: "1",
+				pointerEvents: "auto"
+			}
+		},
+		body: {
+			flex: "1",
+			minBlockSize: "0",
+			position: "relative"
+		},
+		column: COLUMN,
+		content: {
+			flexShrink: "0",
+			inlineSize: `var(${PANEL_SIZE})`,
+			minBlockSize: "0",
+			"[data-collapse=icons] > &, [data-overlaid] > &, [data-stacked] > &": { inlineSize: "100%" }
+		},
+		footer: {
+			flexShrink: "0",
+			padding: dense("{spacing.gap.md}"),
+			"&[data-sticky]": {
+				...PINNED,
+				insetBlockEnd: "0",
+				paddingBlockEnd: `calc(${dense("{spacing.gap.md}")} + {spacing.safe.bottom})`
+			}
+		},
+		header: {
+			flexShrink: "0",
+			padding: dense("{spacing.gap.md}"),
+			"&[data-sticky]": {
+				...PINNED,
+				insetBlockStart: `var(${STICKY_OFFSET$1}, 0px)`
+			},
+			[`.${CLASS$5}__pane > &`]: { "&[data-sticky]": { insetBlockStart: `calc(var(${PANEL_TOP}, 0px) + var(${STICKY_OFFSET$1}, 0px))` } }
+		},
+		main: {
+			flex: "1",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		navbar: {
+			...PANEL,
+			[PANEL_SIZE]: "sizes.sidebar",
+			"&[data-overlaid]": {
+				...OVERLAID,
+				"&[data-state=closed]": {
+					...SLID_OUT,
+					_rtl: { translate: "100% 0" },
+					translate: "-100% 0"
+				},
+				insetInlineStart: "0"
+			}
+		},
+		pane: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		rail: RAIL,
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "100%",
+			[STICKY_TOP$1]: `calc(var(${PANEL_TOP}, 0px) + var(${PANE_TOP}, 0px))`,
+			[`&[${RESIZING}]`]: {
+				cursor: "resizeColumn",
+				userSelect: "none"
+			}
+		},
+		row: {
+			display: "flex",
+			"&:has(> [data-stacked])": { flexWrap: "wrap" },
+			[`&:has(> [data-stacked]) > :is(.${CLASS$5}__main, .${CLASS$5}__pane)`]: { flexBasis: "100%" }
+		},
+		scroller: SCROLLER,
+		section: SECTION,
+		status: {
+			alignItems: "center",
+			columnGap: dense("{spacing.gap.md}"),
+			display: "flex",
+			flexShrink: "0",
+			flexWrap: "wrap",
+			paddingBlock: dense("{spacing.gap.xs}"),
+			paddingInline: dense("{spacing.gap.md}"),
+			rowGap: dense("{spacing.gap.xs}"),
+			"&:empty": { display: "none" }
+		},
+		trigger: { flexShrink: "0" }
+	},
+	className: CLASS$5,
+	defaultVariants: {
+		content: "fluid",
+		divided: true,
+		scroll: "page",
+		variant: "plain"
+	},
+	jsx: [/^AppShell(\.\w+)?$/u],
+	slots: [
+		"root",
+		"header",
+		"body",
+		"bodyViewport",
+		"row",
+		"navbar",
+		"pane",
+		"main",
+		"mainViewport",
+		"aside",
+		"footer",
+		"status",
+		"content",
+		"column",
+		"section",
+		"scroller",
+		"trigger",
+		"rail",
+		"backdrop"
+	],
+	staticCss: [{
+		content: ["constrained", "fluid"],
+		scroll: ["page", "window"],
+		variant: [
+			"floating",
+			"inset",
+			"plain"
+		]
+	}],
+	variants: {
+		/**
+		* Width of the page in the main region: the whole region, or at most the theme's wide page
+		* measure, centred in the region.
+		*/
+		content: {
+			constrained: { column: { [`.${CLASS$5}__mainViewport > &`]: {
+				marginInline: "auto",
+				maxInlineSize: "{sizes.page.wide}"
+			} } },
+			fluid: { column: { [`.${CLASS$5}__mainViewport > &`]: { maxInlineSize: "none" } } }
+		},
+		/**
+		* Whether a hairline separates each bar and each panel from the page.
+		*
+		* @remarks
+		*   The shell renders the lines, because only the shell knows where two of its regions meet. A
+		*   sidebar inside a panel sets its ground and no line.
+		*/
+		divided: { true: {
+			aside: {
+				borderColor: "border",
+				borderInlineStartWidth: "hairline"
+			},
+			footer: {
+				borderBlockStartWidth: "hairline",
+				borderColor: "border"
+			},
+			header: {
+				borderBlockEndWidth: "hairline",
+				borderColor: "border"
+			},
+			navbar: {
+				borderColor: "border",
+				borderInlineEndWidth: "hairline"
+			},
+			status: {
+				borderBlockStartWidth: "hairline",
+				borderColor: "border"
+			}
+		} },
+		/**
+		* What scrolls under the bars: the main region inside a shell the height of the window, or the
+		* window itself, with sticky bars pinned to it.
+		*
+		* @remarks
+		*   The main region and the body are scroll areas, and this axis turns each viewport's
+		*   scrolling on or off. While a panel has dropped under the page, the body scrolls the main
+		*   region and the panel together, so a person scrolls down to the panel under the page. While
+		*   the window scrolls, neither viewport scrolls, and the browser's own bar scrolls the page.
+		*/
+		scroll: {
+			page: {
+				bodyViewport: {
+					[`&:has(> .${CLASS$5}__row > [data-stacked])`]: { overflow: "auto" },
+					overflow: "visible"
+				},
+				mainViewport: { [`.${CLASS$5}__row:has(> [data-stacked]) > :is(.${CLASS$5}__main, .${CLASS$5}__pane > .${CLASS$5}__main) > &`]: { overflow: "visible" } },
+				root: { blockSize: WINDOW },
+				row: {
+					"&:has(> [data-stacked])": { blockSize: "auto" },
+					blockSize: "100%"
+				}
+			},
+			window: {
+				aside: STUCK$1,
+				bodyViewport: { overflow: "visible" },
+				mainViewport: { overflow: "visible" },
+				navbar: STUCK$1,
+				root: { minBlockSize: WINDOW },
+				row: { alignItems: "flex-start" }
+			}
+		},
+		/**
+		* How the page and the panels are set against the root's ground.
+		*
+		* @remarks
+		*   `plain` fills nothing, so every region shows the ground the shell is placed on: the page's
+		*   `bg` in an application, or a staging box's own fill. A sidebar in a panel paints its own
+		*   ground. `inset` gives the main region `surface()`, the panel ground with a hairline and a
+		*   shadow, over a `bg.subtle` root, and gives it to the pane instead where the main region is
+		*   in one, so the bars in the pane are on the card too. `floating` gives each panel's content
+		*   `surface()` instead.
+		*/
+		variant: {
+			floating: {
+				aside: { padding: dense("{spacing.gap.xs}") },
+				content: {
+					...surface(),
+					inlineSize: `calc(var(${PANEL_SIZE}) - {spacing.gap.md})`
+				},
+				navbar: { padding: dense("{spacing.gap.xs}") },
+				root: { background: "bg.subtle" }
+			},
+			inset: {
+				main: { [`&:not(.${CLASS$5}__pane > *)`]: {
+					...surface(),
+					margin: dense("{spacing.gap.xs}")
+				} },
+				pane: {
+					...surface(),
+					margin: dense("{spacing.gap.xs}")
+				},
+				root: { background: "bg.subtle" }
+			},
+			plain: { root: { background: "transparent" } }
+		}
+	}
+});
+//#endregion
+//#region src/floating-panel/recipe.ts
+/**
+* Recipe for a floating panel: a window over the page that a person drags by its header, resizes
+* from its edges and corners, minimizes, maximizes and closes.
+*
+* @remarks
+*   The machine has no root part. The recipe adds a root with `display: contents`, because the
+*   trigger and the portalled positioner are siblings and a slot recipe passes its variants from an
+*   element above both. The machine fixes the positioner to the window and writes its place and
+*   size inline. The positioner stacks at `banner` plus the panel's place in the stack of open
+*   panels: above the page's sticky bands, and under a backdrop, a dialog, a popover, a toast and a
+*   tooltip. The panel has the dialog's surface, a transparent hairline edge that forced colors
+*   paint in `CanvasText`, and a ring outside it while it has keyboard focus. The resize triggers
+*   are strips `sizes.2` wide inside the panel's edges, and squares of that side at its corners.
+*   The panel does not clip its children, so a corner's square takes the pointer beyond the rounded
+*   corner. The machine clips a minimized panel to its header inline. The header pads its controls
+*   clear of the strips, and the body's scroll area ends clear of the end and bottom strips, so its
+*   bar takes the pointer. The recipe has no `palette` axis, because
+*   the panel reads the neutral `bg.panel`, and no `effect` axis, because a panel is not a
+*   control.
+*/
+/**
+* Class name of the recipe, which a selector across its parts writes.
+*/
+const CLASS$4 = "floating-panel";
+/**
+* Width of a resize trigger's strip, and the side of a corner's square.
+*/
+const STRIP$2 = "{sizes.2}";
+/**
+* Stacking level of the positioner: the banner level of the z-index scale plus the panel's place in
+* the stack of open panels, which the machine writes as `--z-index`.
+*/
+const LAYERED = "calc({zIndex.banner} + var(--z-index, 0))";
+/**
+* Custom property the primitives scroll area reads on its root for the offset of its focus ring.
+*/
+const RING_OFFSET = "--scroll-area-ring-offset";
+/**
+* Defines the floating panel recipe.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		body: {
+			textStyle: "body.sm",
+			padding: dense("{spacing.inset.sm}")
+		},
+		closeTrigger: { flexShrink: "0" },
+		content: {
+			...motion("scale-fade.in", "scale-fade.out"),
+			focusVisibleRing: "outside",
+			background: "bg.panel",
+			borderColor: "transparent",
+			borderRadius: "l3",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "lg",
+			color: "fg",
+			display: "flex",
+			flexDirection: "column",
+			focusRingColor: "colorPalette.focusRing",
+			position: "relative"
+		},
+		control: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: "0",
+			gap: dense("{spacing.gap.xs}")
+		},
+		dragTrigger: {
+			"&[data-disabled]": { cursor: "auto" },
+			"& > svg": {
+				boxSize: "icon.sm",
+				color: "fg.subtle",
+				flexShrink: "0"
+			},
+			[`.${CLASS$4}__header[data-dragging] > &`]: { cursor: "dragging" },
+			alignItems: "center",
+			alignSelf: "stretch",
+			cursor: "drag",
+			display: "flex",
+			flex: "1",
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "0",
+			touchAction: "none",
+			userSelect: "none"
+		},
+		header: {
+			alignItems: "center",
+			borderBlockEndColor: "border",
+			borderBlockEndStyle: "solid",
+			borderBlockEndWidth: "hairline",
+			display: "flex",
+			flexShrink: "0",
+			gap: dense("{spacing.gap.sm}"),
+			paddingBlock: dense("{spacing.inset.xs}"),
+			paddingInlineEnd: dense("{spacing.inset.xs}"),
+			paddingInlineStart: dense("{spacing.inset.sm}")
+		},
+		positioner: { zIndex: LAYERED },
+		resizeTrigger: {
+			"&:is([data-axis=e], [data-axis=w])": { inlineSize: STRIP$2 },
+			"&:is([data-axis=n], [data-axis=s])": { blockSize: STRIP$2 },
+			"&:is([data-axis=ne], [data-axis=nw], [data-axis=se], [data-axis=sw])": {
+				blockSize: STRIP$2,
+				inlineSize: STRIP$2
+			},
+			"&[data-disabled]": { display: "none" },
+			zIndex: "docked"
+		},
+		root: { display: "contents" },
+		scroller: {
+			"&[hidden]": { display: "none" },
+			flex: "1",
+			marginBlockEnd: STRIP$2,
+			marginInlineEnd: STRIP$2,
+			minBlockSize: "0",
+			[RING_OFFSET]: "calc({borderWidths.ring} * -1)"
+		},
+		stageTrigger: {
+			"&[hidden]": { display: "none" },
+			flexShrink: "0"
+		},
+		title: {
+			...truncate(),
+			textStyle: "label.md",
+			fontWeight: "semibold"
+		},
+		trigger: {
+			...interactive(),
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.xs}")
+		}
+	},
+	className: CLASS$4,
+	jsx: [/^FloatingPanel(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"positioner",
+		"content",
+		"header",
+		"dragTrigger",
+		"title",
+		"control",
+		"stageTrigger",
+		"closeTrigger",
+		"scroller",
+		"body",
+		"resizeTrigger"
+	]
+});
+//#endregion
+//#region src/page/metrics.ts
+/**
+* Computes the rules the page recipe writes at each of its sizes: the padding and gaps of the
+* bands, the tabs in the navigation band, the panel the tab picker opens and the title's heading
+* role.
+*
+* @remarks
+*   The module is separate from the recipe so the recipe is under the 300-line limit. It imports no
+*   React, because the theme plugin evaluates the recipe in Node.
+*/
+/**
+* Class name of the page's recipe, which a selector across bands reads.
+*
+* @remarks
+*   The binding writes one class per band, such as `page__nav`, and no attribute that names the
+*   band. A selector for another band builds that class from this constant.
+*/
+const CLASS$3 = "page";
+/**
+* Class name of the tabs' recipe, whose root the navigation band shrinks to its tabs.
+*/
+const TABS = "tabs";
+/**
+* Class name of the command palette's recipe, whose root the palette panel renders flat.
+*/
+const COMMAND = "command";
+/**
+* Selects the strip of tabs in the navigation band: the tabs' root, or the `Page.Tabs` slot where
+* the tabs' root contains the panels too and the band contains the list alone.
+*/
+const STRIP$1 = `:is(.${TABS}__root, .${CLASS$3}__tabs)`;
+/**
+* Selects the strip of tabs as a child of the navigation band.
+*/
+const TABS_IN_NAV = `& > ${STRIP$1}`;
+/**
+* Selects every tab of a strip in the navigation band.
+*/
+const TAB_IN_NAV = `& .${TABS}__trigger`;
+/**
+* Sizes the page offers, which a section in the page reads too.
+*/
+const STEPS = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a band followed by the navigation, which then has the hairline.
+*/
+const BEFORE_NAV = `&:has(+ .${CLASS$3}__nav)`;
+/**
+* Selects a navigation band with a strip of tabs, which is flush with the band's hairline.
+*/
+const WITH_TABS = `&:has(> ${STRIP$1})`;
+/**
+* Tab height and inline inset per page size: a medium or large page's tabs are 48px tall and inset
+* by the `md` inset, a small page's 44px and the `sm` inset.
+*/
+const TABBED = {
+	lg: ["xl", "md"],
+	md: ["xl", "md"],
+	sm: ["lg", "sm"]
+};
+/**
+* Returns the navigation band's rules for its tabs at a page size.
+*
+* @remarks
+*   The tabs are taller than a control of their text's size, so the band's other controls centre
+*   on them with room above and below. Each tab reads its inline inset from the control inset
+*   properties, and the strip starts one inset before the gutter, so the first tab's words start
+*   where the title starts. The recipe writes the rules in its size variant, because the tabs' own
+*   size variant sets the height in the same layer and these selectors outweigh it.
+* @param size - The page's size.
+*/
+function tabbed(size) {
+	const [height, inset] = TABBED[size];
+	const room = dense(`{spacing.inset.${inset}}`);
+	return {
+		[TAB_IN_NAV]: {
+			[CONTROL_INSET_END]: room,
+			[CONTROL_INSET_START]: room,
+			height: dense(`{sizes.control.${height}}`)
+		},
+		[TABS_IN_NAV]: { marginInlineStart: `calc(${room} * -1)` }
+	};
+}
+/**
+* Styles the panel the tab picker opens as one box: the popover's edge and shadow around the
+* command palette's rows, with neither the popover's padding nor the palette's own edge.
+*
+* @remarks
+*   The popover pads its content and the palette draws a raised panel, so without these rules the
+*   list renders as a box inside a box. The padding rule selects the machine's `data-state` too,
+*   because the popover's size variant sets the padding in the same layer.
+*/
+const FLAT_PALETTE = {
+	"&[data-state]": { padding: "0" },
+	[`& > .${COMMAND}__root`]: {
+		borderRadius: "0",
+		borderWidth: "0",
+		boxShadow: "none",
+		maxBlockSize: "inherit"
+	},
+	maxBlockSize: "min(var(--available-height), {sizes.60})"
+};
+/**
+* Selects the title of a narrow page.
+*/
+const NARROW_TITLE = `.${CLASS$3}__root[data-narrow] > .${CLASS$3}__header > &`;
+/**
+* Heading role of the title at each size, one size larger than a section title's at that size, and
+* one size smaller on a narrow page.
+*
+* @remarks
+*   The page title is the one heading above every section title on the page, so it reads a larger
+*   role than theirs. A narrow page gives the title's row less room, so the title reads one role
+*   smaller there.
+*/
+const TITLES = {
+	lg: {
+		textStyle: "heading.xl",
+		[NARROW_TITLE]: { textStyle: "heading.lg" }
+	},
+	md: {
+		textStyle: "heading.lg",
+		[NARROW_TITLE]: { textStyle: "heading.md" }
+	},
+	sm: {
+		textStyle: "heading.md",
+		[NARROW_TITLE]: { textStyle: "heading.sm" }
+	}
+};
+/**
+* Rules the recipe's `size` axis writes on each slot it sizes, at the page's three sizes.
+*/
+const SIZES = onSlots({
+	actions: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), STEPS),
+	aside: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	banner: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	body: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	context: sizeVariants((size) => ({
+		textStyle: `body.${below(size)}`,
+		gap: dense(`{spacing.gap.${size}}`),
+		marginBlockEnd: size === "lg" ? "{spacing.1}" : "{spacing.0.5}"
+	}), STEPS),
+	description: {
+		lg: { textStyle: "body.md" },
+		md: { textStyle: "body.md" },
+		sm: { textStyle: "body.sm" }
+	},
+	footer: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.inset.${size}}`)
+	}), STEPS),
+	header: sizeVariants((size) => ({
+		[BEFORE_NAV]: { paddingBlockEnd: dense(`{spacing.gap.${size}}`) },
+		paddingBlock: dense(`{spacing.inset.${size}}`)
+	}), STEPS),
+	meta: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		marginInlineStart: dense(`{spacing.gap.${size}}`)
+	}), STEPS),
+	nav: sizeVariants((size) => ({
+		...tabbed(size),
+		paddingBlock: dense(`{spacing.gap.${size}}`),
+		[WITH_TABS]: { paddingBlock: "0" }
+	}), STEPS),
+	palette: sizeVariants(() => FLAT_PALETTE, STEPS),
+	sidebar: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	title: TITLES,
+	toolbar: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.gap.${size}}`)
+	}), STEPS),
+	trail: sizeVariants((size) => ({
+		textStyle: `body.${below(size)}`,
+		gap: dense(`{spacing.gap.${below(size)}}`)
+	}), STEPS)
+});
+//#endregion
+//#region src/page/recipe.ts
+/**
+* Recipe for a page: a column of bands, from a banner and a header to a body and a footer.
+*
+* @remarks
+*   The root is a column at least as tall as its container, so the footer of a short page renders
+*   at the container's end. Every band runs edge to edge, so a sticky band's fill and hairline span
+*   the full width, and each band's content starts at the gutter. A page with a measure stops its
+*   content there, at the start or centred as `align` sets. The header is a grid of three rows, so
+*   the context, the leading mark, the title, the meta, the actions and the description are
+*   siblings placed by area name, and a part left out takes no room. The title's column shrinks,
+*   so its text wraps while the actions keep the end of its row. The root sets the gutter and the
+*   measure as custom properties that every band reads. The page measures its own width and sets
+*   `folded` below the `sm` breakpoint. From the `lg` breakpoint of the window, a page with an
+*   aside becomes a grid with the aside beside the body, because a rail beside the text needs the
+*   window's width. Below it the aside stacks under the body, or leaves the page with
+*   `folds="hide"`. A page at least as wide as the `md` breakpoint, by its own measurement, becomes
+*   a grid with its sidebar at the start of the body's row, and a narrower page renders the
+*   sidebar's picker as a band above the body. A sticky aside keeps to the top of its row, under
+*   the shell's sticky bars, and so does a sticky sidebar. The recipe has no `palette` axis,
+*   because a page is layout on the page's surface, and no `effect` axis, because a page is not a
+*   control.
+*/
+/**
+* Custom property the root sets to the room at the page's inline edges.
+*/
+const GUTTER = "--page-gutter";
+/**
+* Custom property the root sets to the width of the page's content.
+*/
+const MEASURE = "--page-measure";
+/**
+* Custom property a band reads as its start padding before the measure.
+*
+* @remarks
+*   A band runs edge to edge, so its fill is full bleed, and its padding keeps the content in the
+*   measure. The `align` axis sets this property and every band reads it, so the header, the body
+*   and the footer share one column at either alignment.
+*/
+const LEAD = "--page-lead";
+/**
+* Styles every band: edge to edge, with padding that keeps the content in the measure.
+*/
+const BAND$1 = {
+	flexShrink: "0",
+	minInlineSize: "0",
+	paddingInlineEnd: `max(var(${GUTTER}), calc(100% - var(${MEASURE}, 100%) - var(${LEAD}, var(${GUTTER}))))`,
+	paddingInlineStart: `var(${LEAD}, var(${GUTTER}))`
+};
+/**
+* Custom property the shell sets to the height of its sticky bars, under which a sticky band stops.
+*/
+const SHELL_TOP = "--app-shell-sticky-top";
+/**
+* Custom property the root sets on each sticky band to the height of the sticky bands before it.
+*/
+const STICKY_OFFSET = "--page-sticky-offset";
+/**
+* Custom property the root sets on itself to the height of every band that sticks to the top.
+*/
+const STICKY_TOP = "--page-sticky-top";
+/**
+* Custom property a sticky aside or sidebar takes, set to the height of the area that scrolls the
+* page.
+*/
+const SCROLLPORT = "--page-scrollport";
+/**
+* Custom property the sidebar sets to the width a person resized it to.
+*/
+const SIDEBAR_SIZE = "--page-sidebar-size";
+/**
+* Room a focus ring takes outside an element: its offset and its width.
+*/
+const RING_ROOM = "calc(var(--focus-ring-offset, 0px) + var(--focus-ring-width, 0px))";
+/**
+* Styles a sticky band: at the top, under the shell's sticky bars and the page's sticky bands
+* before it, on the page's fill.
+*
+* @remarks
+*   A sticky band takes the page's fill, because the page scrolls under it. Its inset reads the
+*   shell's sticky height and the height of the sticky bands before it, because a sticky element
+*   with an `auto` inset does not stick and two bands at one inset cover each other. Its z-index is
+*   the `sticky` token the shell's bars use, so a band and a bar at one edge share one order.
+*/
+const STUCK = {
+	background: "bg",
+	insetBlockStart: `calc(var(${SHELL_TOP}, 0px) + var(${STICKY_OFFSET}, 0px))`,
+	position: "sticky",
+	zIndex: "sticky"
+};
+/**
+* Styles a column that sticks to the top of its row, under the shell's sticky bars and the page's
+* sticky bands, a gap below them.
+*/
+const STICKY_COLUMN = {
+	alignSelf: "start",
+	insetBlockStart: `calc(var(${SHELL_TOP}, 0px) + var(${STICKY_TOP}, 0px) + {spacing.gap.xl})`,
+	position: "sticky"
+};
+/**
+* Caps a sticky column at the height of the area that scrolls the page, less the sticky bars and
+* bands above it and a gap at each end, as a flex column that its scroll area fills.
+*/
+const CAPPED_COLUMN = {
+	display: "flex",
+	flexDirection: "column",
+	maxBlockSize: `calc(var(${SCROLLPORT}, 100dvh) - var(${SHELL_TOP}, 0px) - var(${STICKY_TOP}, 0px) - {spacing.gap.xl} * 2)`
+};
+/**
+* Styles a row that centres its items, wraps and shrinks.
+*/
+const ROW$1 = {
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "wrap",
+	minInlineSize: "0"
+};
+/**
+* Selects a root with an aside, which lays its bands out as a grid from the `lg` breakpoint.
+*/
+const WITH_ASIDE = `&:has(> .${CLASS$3}__aside)`;
+/**
+* Selects a root with a sidebar beside its body, which lays its bands out as a grid.
+*/
+const WITH_SIDEBAR = `&:has(> .${CLASS$3}__sidebar[data-beside])`;
+/**
+* Selects a toolbar in the navigation band.
+*/
+const TOOLBAR_IN_NAV = `& > .toolbar__root`;
+/**
+* Selects a strip of tabs in the navigation band, by the orientation the tabs' own line look
+* selects too.
+*/
+const STRIP_IN_NAV = `& .${CLASS$3}__tabs[data-orientation]`;
+/**
+* Styles the grid of a page with an aside: every band across, and the body beside the aside.
+*
+* @remarks
+*   The body's row takes the remaining height and every other row takes its content's height,
+*   because the root is at least as tall as the shell's main region and a grid shares spare height
+*   between its `auto` rows. The sidebar's row holds the picker a narrow page renders in the
+*   sidebar's place, and takes no height without one.
+*/
+const BESIDE = {
+	columnGap: dense("{spacing.gap.xl}"),
+	display: "grid",
+	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"sidebar sidebar\" \"body aside\" \"footer footer\"",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	gridTemplateRows: "auto auto auto auto auto 1fr auto"
+};
+/**
+* Styles the grid of a page with a sidebar beside its body: every band across, the sidebar at the
+* start, and an aside under the body.
+*/
+const SIDEBAR_BESIDE = {
+	columnGap: dense("{spacing.gap.xl}"),
+	display: "grid",
+	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"sidebar body\" \"sidebar aside\" \"footer footer\"",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	gridTemplateRows: "auto auto auto auto 1fr auto auto"
+};
+/**
+* Styles the grid of a page with a sidebar beside its body and an aside beside it from the `lg`
+* breakpoint: the sidebar, the body and the aside in one row.
+*/
+const SIDEBAR_AND_ASIDE = {
+	gridTemplateAreas: "\"banner banner banner\" \"header header header\" \"nav nav nav\" \"toolbar toolbar toolbar\" \"sidebar body aside\" \"footer footer footer\"",
+	gridTemplateColumns: "auto minmax(0, 1fr) auto",
+	gridTemplateRows: "auto auto auto auto 1fr auto"
+};
+/**
+* Defines the page recipe: a full-width page at size `md` by default.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		action: {
+			...FOLDING,
+			flexShrink: "0"
+		},
+		actions: {
+			...ROW$1,
+			flexWrap: "nowrap",
+			gridArea: "actions",
+			justifySelf: "end",
+			paddingInlineStart: dense("{spacing.inset.xl}")
+		},
+		/**
+		* The aside, beside the body from the `lg` breakpoint and under it below.
+		*
+		* @remarks
+		*   Beside the body a sticky aside is a column at most as tall as the area that scrolls the
+		*   page, less the sticky bars and bands above it and a gap at each end. Its scroll area fills
+		*   the column, so the end of a long aside remains reachable while it sticks.
+		*/
+		aside: {
+			"&[data-folds=hide]": { lgDown: { display: "none" } },
+			"&[data-sticky]": {
+				...STICKY_COLUMN,
+				lg: CAPPED_COLUMN
+			},
+			gridArea: "aside",
+			lg: { paddingInlineStart: "0" },
+			minInlineSize: "0",
+			paddingInline: `var(${GUTTER})`
+		},
+		/**
+		* The padding of a sticky aside's scroll area, the room a focus ring takes at its edges.
+		*/
+		asideContent: { padding: RING_ROOM },
+		/**
+		* A sticky aside's scroll area, pulled out on every side by the room its content's padding
+		* takes, so the content keeps its place.
+		*/
+		asideScroller: { margin: `calc(${RING_ROOM} * -1)` },
+		banner: {
+			...BAND$1,
+			flexShrink: "0",
+			gridArea: "banner"
+		},
+		body: {
+			...BAND$1,
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gridArea: "body",
+			minBlockSize: "0"
+		},
+		context: {
+			...ROW$1,
+			gridArea: "context",
+			minInlineSize: "0"
+		},
+		description: {
+			color: "fg.subtle",
+			gridArea: "description",
+			maxInlineSize: "prose",
+			minInlineSize: "0"
+		},
+		/**
+		* Lays the footer out as a row that sticks to the bottom edge when told to.
+		*
+		* @remarks
+		*   A sticky footer resets the top inset the shared sticky rule sets.
+		*/
+		footer: {
+			...BAND$1,
+			...ROW$1,
+			"&[data-sticky]": {
+				...STUCK,
+				insetBlockEnd: "0",
+				insetBlockStart: "auto"
+			},
+			gridArea: "footer"
+		},
+		/**
+		* Lays the header out in three rows: the context, the title's row and the description.
+		*
+		* @remarks
+		*   The rows have no gap. The context row keeps a small margin above the title's row, and the
+		*   line heights part the title from the description. The columns have no gap, because the
+		*   parts beside the title belong to its line. Every part names its area, because the grid
+		*   places a part without one in the first free cell.
+		*/
+		header: {
+			...BAND$1,
+			"&[data-sticky]": STUCK,
+			alignItems: "center",
+			display: "grid",
+			gridArea: "header",
+			gridTemplateAreas: "\"context context context context\" \"leading title meta actions\" \"description description description description\"",
+			gridTemplateColumns: "auto auto minmax(0, 1fr) auto"
+		},
+		leading: {
+			display: "flex",
+			gridArea: "leading",
+			marginInlineEnd: dense("{spacing.gap.lg}")
+		},
+		meta: {
+			...ROW$1,
+			gridArea: "meta"
+		},
+		nav: {
+			...BAND$1,
+			"&[data-sticky]": STUCK,
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.lg}"),
+			gridArea: "nav",
+			justifyContent: "space-between",
+			[TABS_IN_NAV]: {
+				flex: "0 1 auto",
+				inlineSize: "auto",
+				minInlineSize: "0"
+			},
+			[TOOLBAR_IN_NAV]: {
+				flex: "0 1 auto",
+				inlineSize: "auto"
+			}
+		},
+		palette: {
+			inlineSize: "var(--reference-width)",
+			overflow: "clip"
+		},
+		picker: {
+			"& > span": truncate(),
+			flex: "1",
+			justifyContent: "space-between",
+			minInlineSize: "0"
+		},
+		root: {
+			[`&[${RESIZING}]`]: {
+				cursor: "resizeColumn",
+				userSelect: "none"
+			},
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: "1",
+			inlineSize: "100%",
+			minBlockSize: "100%",
+			minInlineSize: "0",
+			[WITH_ASIDE]: { lg: BESIDE },
+			[WITH_SIDEBAR]: {
+				...SIDEBAR_BESIDE,
+				[WITH_ASIDE]: { lg: SIDEBAR_AND_ASIDE }
+			}
+		},
+		/**
+		* The sidebar: a column beside the body on a page as wide as the `md` breakpoint, and a band
+		* with the picker on a narrower page.
+		*
+		* @remarks
+		*   Beside the body the column starts at the gutter, so the fills of its rows start where the
+		*   title starts. The column is as wide as the theme's sidebar unless a person resized it. A
+		*   sticky sidebar keeps to the top of its row and is at most as tall as the room under the
+		*   sticky bands, as a sticky aside is. The handle is centred on the column's end edge, in the
+		*   gap before the body.
+		*/
+		sidebar: {
+			...BAND$1,
+			"&[data-beside]": {
+				"&[data-sticky]": {
+					...STICKY_COLUMN,
+					...CAPPED_COLUMN
+				},
+				inlineSize: `var(${SIDEBAR_SIZE}, {sizes.sidebar})`,
+				paddingInlineEnd: "0",
+				position: "relative"
+			},
+			gridArea: "sidebar"
+		},
+		/**
+		* The padding of a sticky sidebar's scroll area, the room a focus ring takes at its edges.
+		*/
+		sidebarContent: { padding: RING_ROOM },
+		/**
+		* The strip on a resizable sidebar's end edge, centred on the edge.
+		*/
+		sidebarHandle: {
+			...STRIP$3,
+			insetBlock: "0",
+			insetInlineEnd: "calc({sizes.6} / -2)",
+			position: "absolute"
+		},
+		/**
+		* A sticky sidebar's scroll area, pulled out on every side by the room its content's padding
+		* takes, so the content keeps its place.
+		*/
+		sidebarScroller: { margin: `calc(${RING_ROOM} * -1)` },
+		title: {
+			gridArea: "title",
+			minInlineSize: "0",
+			overflowWrap: "anywhere"
+		},
+		toolbar: {
+			...BAND$1,
+			...ROW$1,
+			"&[data-sticky]": STUCK,
+			gridArea: "toolbar"
+		},
+		trail: {
+			"& > svg": { _rtl: { transform: "scaleX(-1)" } },
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex",
+			gridArea: "context",
+			justifySelf: "start",
+			minInlineSize: "0"
+		}
+	},
+	className: CLASS$3,
+	compoundVariants: [(
+	/**
+	* Moves the meta of a folded header onto its own row under the title.
+	*
+	* @remarks
+	*   The meta drops the start margin it has beside the title, so it starts where the title and
+	*   the description start, and keeps a small margin above and below. The actions keep the `sm`
+	*   inset from the title.
+	*/
+	{
+		css: {
+			actions: { paddingInlineStart: dense("{spacing.inset.sm}") },
+			header: {
+				gridTemplateAreas: "\"context context context\" \"leading title actions\" \"meta meta meta\" \"description description description\"",
+				gridTemplateColumns: "auto minmax(0, 1fr) auto"
+			},
+			meta: {
+				marginBlock: dense("{spacing.gap.sm}"),
+				marginInlineStart: "0"
+			}
+		},
+		folded: true,
+		name: "stacked"
+	})],
+	defaultVariants: {
+		align: "start",
+		divided: true,
+		gutter: "xl",
+		measure: "full",
+		size: "md"
+	},
+	jsx: [/^Page(\.\w+)?$/u],
+	slots: [
+		"root",
+		"banner",
+		"header",
+		"context",
+		"leading",
+		"title",
+		"meta",
+		"description",
+		"actions",
+		"action",
+		"nav",
+		"tabs",
+		"picker",
+		"palette",
+		"toolbar",
+		"sidebar",
+		"sidebarScroller",
+		"sidebarContent",
+		"sidebarHandle",
+		"body",
+		"aside",
+		"asideScroller",
+		"asideContent",
+		"footer",
+		"trail"
+	],
+	variants: {
+		/**
+		* Position of the content when the measure is narrower than the page.
+		*
+		* @remarks
+		*   The axis sets the start padding of every band. The root runs edge to edge, so a band's fill
+		*   is full bleed, and automatic margins on a full-width root would move nothing.
+		*/
+		align: {
+			start: { root: { [LEAD]: `var(${GUTTER})` } },
+			center: { root: { [LEAD]: `max(var(${GUTTER}), calc((100% - var(${MEASURE}, 100%)) / 2))` } }
+		},
+		/**
+		* Whether a hairline separates the bands.
+		*
+		* @remarks
+		*   A header followed by the navigation leaves the hairline to the navigation, and a strip of
+		*   tabs in the navigation drops its own line, so the strip has one line under it and none
+		*   above. The strip's rule outweighs the tabs' own line look, whose selector names the
+		*   orientation, because both are in the variants layer.
+		*/
+		divided: { true: {
+			footer: {
+				...divider("horizontal"),
+				borderBlockStartWidth: "hairline"
+			},
+			header: {
+				...divider("horizontal"),
+				[BEFORE_NAV]: { borderBlockEndWidth: "0" },
+				borderBlockEndWidth: "hairline"
+			},
+			nav: {
+				...divider("horizontal"),
+				borderBlockEndWidth: "hairline",
+				[STRIP_IN_NAV]: { borderBlockEndWidth: "0" }
+			},
+			toolbar: {
+				...divider("horizontal"),
+				borderBlockEndWidth: "hairline"
+			}
+		} },
+		/**
+		* Room at the page's inline edges, which every band reads.
+		*
+		* @remarks
+		*   The default is the `xl` inset. A folded page sets the `md` inset.
+		*/
+		gutter: onSlots({ root: sizeVariants((size) => ({ [GUTTER]: `{spacing.inset.${size}}` })) }),
+		/**
+		* Width of the page's content.
+		*
+		* @remarks
+		*   The axis is not named `width`, because `width` is a style prop of a styled element.
+		*   `narrow` and `wide` read the theme's page sizes.
+		*/
+		measure: {
+			full: { root: { [MEASURE]: "100%" } },
+			narrow: { root: { [MEASURE]: "{sizes.page.narrow}" } },
+			wide: { root: { [MEASURE]: "{sizes.page.wide}" } }
+		},
+		/**
+		* Whether the page is narrower than the `sm` breakpoint, which the page sets from its own
+		* width.
+		*
+		* @remarks
+		*   A folded page has the `md` gutter. The axis is not named `narrow`, because `measure` has a
+		*   `narrow` value and two values of one name compile to one class.
+		*/
+		folded: { true: { root: { [GUTTER]: "{spacing.inset.md}" } } },
+		/**
+		* Size of the title, the description, the actions and the bands' padding.
+		*
+		* @remarks
+		*   The page offers three sizes, because larger steps belong to a display heading. A section in
+		*   the page reads this size too.
+		*/
+		size: SIZES
+	}
+});
+//#endregion
+//#region src/section/recipe.ts
+/**
+* Recipe for a section of a page: a header over a body and a footer, plain or on a card.
+*
+* @remarks
+*   The header is a grid of two rows, so the title, the actions and the description are siblings
+*   placed by area name. The title's column shrinks, and the actions keep the end of the title's
+*   row at every width. The root sets four custom properties per size: the gap between the bands,
+*   the gap after the section before it, the card's inner room and the footer's block padding. A
+*   card's bands pad themselves from them, so a body with `data-bleed` drops its padding while the
+*   other bands keep theirs. A bleeding body overlaps the footer by one hairline, so a table's rule
+*   under its last row and the footer's rule render as one line. The room is the inset of the
+*   section's size, the inline padding of a table cell at that size, so a table in a bleeding body
+*   starts its first column under the title. The description stops at the reading measure and
+*   reads the body role one size smaller than the section. The title reads the heading role one
+*   size smaller, so a section reads as part of its page. `annotated` moves the header into a
+*   column beside the body and folds it back over the body while the root is `data-narrow`, which
+*   the component measures. An annotated card raises the body and the footer as one card and leaves
+*   the header on the page. A section scrolled to by its id stops one gap under the shell's sticky
+*   bars and the page's sticky bands. The recipe has no `palette` axis, because a section is layout
+*   on the page's surface and its content sets its own palettes, and no `effect` axis, because a
+*   section is not a control.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS$2 = "section";
+/**
+* Selects a section that follows another section.
+*/
+const AFTER = `.${CLASS$2}__root + &`;
+/**
+* Selects a band of a narrow section.
+*/
+const NARROW = `.${CLASS$2}__root[data-narrow] > &`;
+/**
+* Selects the actions of a narrow section.
+*/
+const NARROW_ACTIONS = `.${CLASS$2}__root[data-narrow] > .${CLASS$2}__header > &`;
+/**
+* Selects a band followed by the footer.
+*/
+const BEFORE_FOOTER = `&:has(+ .${CLASS$2}__footer)`;
+/**
+* Custom property the root sets to the card's inner room, which every band's padding reads.
+*/
+const ROOM = "--section-room";
+/**
+* Custom property the root sets to the gap between its bands.
+*/
+const BANDS = "--section-bands";
+/**
+* Custom property the root sets to the gap after the section before it.
+*/
+const APART = "--section-apart";
+/**
+* Custom property the root sets to the block padding of a card's footer.
+*/
+const FOOTING = "--section-footing";
+/**
+* Maps each size to the gap two sizes larger, between the bands.
+*/
+const AIRED = {
+	lg: "2xl",
+	md: "xl",
+	sm: "lg"
+};
+/**
+* Maps each size to the gap three sizes larger, after the section before.
+*/
+const SPACED = {
+	lg: "3xl",
+	md: "2xl",
+	sm: "xl"
+};
+/**
+* Styles a row that centres its items, wraps and shrinks.
+*/
+const ROW = {
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "wrap",
+	minInlineSize: "0"
+};
+/**
+* Defines the section recipe: a plain section at size `md` by default.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		action: {
+			...FOLDING,
+			flexShrink: "0"
+		},
+		actions: {
+			...ROW,
+			flexWrap: "nowrap",
+			gridArea: "actions",
+			justifySelf: "end",
+			[NARROW_ACTIONS]: { paddingInlineStart: dense("{spacing.inset.sm}") },
+			paddingInlineStart: dense("{spacing.inset.md}")
+		},
+		body: { minInlineSize: "0" },
+		description: {
+			color: "fg.subtle",
+			gridArea: "description",
+			maxInlineSize: "prose",
+			minInlineSize: "0"
+		},
+		footer: {
+			...ROW,
+			"& > :last-child:not(:first-child)": { marginInlineStart: "auto" },
+			justifyContent: "space-between"
+		},
+		header: {
+			alignItems: "center",
+			display: "grid",
+			gridTemplateAreas: "\"title actions\" \"description description\"",
+			gridTemplateColumns: "minmax(0, 1fr) auto",
+			minInlineSize: "0"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: `var(${BANDS})`,
+			minInlineSize: "0",
+			scrollMarginBlockStart: "calc(var(--app-shell-sticky-top, 0px) + var(--page-sticky-top, 0px) + {spacing.gap.lg})"
+		},
+		title: {
+			gridArea: "title",
+			minInlineSize: "0",
+			overflowWrap: "anywhere"
+		}
+	},
+	className: CLASS$2,
+	compoundVariants: [
+		{
+			annotated: true,
+			css: {
+				actions: {
+					justifySelf: "start",
+					marginBlockStart: dense("{spacing.gap.md}"),
+					paddingInlineStart: "0"
+				},
+				body: { gridArea: "body" },
+				footer: { gridArea: "footer" },
+				header: {
+					alignItems: "flex-start",
+					display: "flex",
+					flexDirection: "column",
+					gridArea: "header"
+				},
+				root: {
+					"&[data-narrow]": {
+						gridTemplateAreas: "\"header\" \"body\" \"footer\"",
+						gridTemplateColumns: "minmax(0, 1fr)",
+						gridTemplateRows: "none"
+					},
+					alignItems: "start",
+					display: "grid",
+					gridTemplateAreas: "\"header body\" \"header footer\"",
+					gridTemplateColumns: "minmax({sizes.xs}, 1fr) minmax(0, 2fr)",
+					gridTemplateRows: "auto 1fr"
+				}
+			},
+			name: "aside"
+		},
+		{
+			css: {
+				body: {
+					"&:first-child": { paddingBlockStart: `var(${ROOM})` },
+					"&[data-bleed]": {
+						"&:first-child": { borderBlockStartWidth: "0" },
+						[BEFORE_FOOTER]: { marginBlockEnd: "calc({borderWidths.hairline} * -1)" },
+						borderBlockStartWidth: "hairline",
+						borderColor: "border",
+						padding: "0"
+					},
+					padding: `var(${ROOM})`,
+					paddingBlockStart: "0"
+				},
+				footer: {
+					borderBlockStartWidth: "hairline",
+					borderColor: "border",
+					paddingBlock: `var(${FOOTING})`,
+					paddingInline: `var(${ROOM})`
+				},
+				header: {
+					"&:last-child": { paddingBlockEnd: `var(${ROOM})` },
+					padding: `var(${ROOM})`,
+					paddingBlockEnd: `var(${BANDS})`
+				},
+				root: {
+					...surface(),
+					gap: "0"
+				}
+			},
+			name: "raised",
+			variant: "surface"
+		},
+		{
+			annotated: true,
+			css: {
+				body: {
+					...surface(),
+					[BEFORE_FOOTER]: {
+						borderBlockEndWidth: "0",
+						borderEndEndRadius: "0",
+						borderEndStartRadius: "0"
+					},
+					overflow: "clip",
+					paddingBlockStart: `var(${ROOM})`
+				},
+				footer: {
+					...surface(),
+					[`.${CLASS$2}__body + &`]: {
+						borderStartEndRadius: "0",
+						borderStartStartRadius: "0"
+					}
+				},
+				header: {
+					[NARROW]: { marginBlockEnd: `var(${BANDS})` },
+					padding: "0"
+				},
+				root: {
+					background: "none",
+					borderWidth: "0",
+					boxShadow: "none",
+					overflow: "visible",
+					rowGap: "0"
+				}
+			},
+			name: "beside",
+			variant: "surface"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Section(\.\w+)?$/u],
+	slots: [
+		"root",
+		"header",
+		"title",
+		"description",
+		"actions",
+		"action",
+		"body",
+		"footer"
+	],
+	variants: {
+		/**
+		* Whether the header renders in a column beside the body.
+		*/
+		annotated: { true: { root: { columnGap: dense("{spacing.gap.3xl}") } } },
+		/**
+		* Size of the title, the description, the gaps and the card's inner room.
+		*/
+		size: onSlots({
+			actions: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			description: sizeVariants((size) => ({
+				textStyle: `body.${below(size)}`,
+				marginBlockStart: size === "lg" ? "{spacing.1}" : "{spacing.0.5}"
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			footer: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({
+				[APART]: dense(`{spacing.gap.${SPACED[size]}}`),
+				[BANDS]: dense(`{spacing.gap.${AIRED[size]}}`),
+				[FOOTING]: dense(`{spacing.inset.${below(size)}}`),
+				[ROOM]: dense(`{spacing.inset.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			title: sizeVariants((size) => ({ textStyle: `heading.${below(size)}` }), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* Look of the section: plain on the page, or raised as a card.
+		*
+		* @remarks
+		*   Both looks keep the size's gap after a section before them. A plain section after another
+		*   plain section renders a hairline in the middle of that gap. `surface` raises the section
+		*   as a card and clips its content to the card's corners, so a body with `data-bleed` keeps
+		*   them.
+		*/
+		variant: {
+			surface: { root: {
+				[AFTER]: { marginBlockStart: `var(${APART})` },
+				overflow: "clip"
+			} },
+			plain: { root: {
+				"& + &": {
+					borderBlockStartWidth: "hairline",
+					borderColor: "border",
+					paddingBlockStart: `var(${APART})`
+				},
+				[AFTER]: { marginBlockStart: `var(${APART})` }
+			} }
+		}
+	}
+});
+//#endregion
+//#region src/sidebar/recipe.ts
+/**
+* Declares the sidebar's slot recipe, which lays out a fixed header, scrolling content and a fixed
+* footer in a column.
+*
+* @remarks
+*   The recipe has twelve slots. The content scrolls in the primitives package's scroll area, whose
+*   root is the `scroller` and fills the column, and the root does not scroll, so the header and
+*   the footer remain in place however long the list of destinations is. The header and the footer
+*   are columns padded like the content, so a search, a nav block or a switcher in a band is as
+*   wide as the rows' fills, and a line of words in a band starts where the rows' icons start. A
+*   nav block is a grid of two columns: the label and the headings take the first, the block's
+*   control takes the second, and every other child spans both. A block's label is as tall as a
+*   row, small, uppercase and in `fg.subtle`. A block whose rows a query matches none of is hidden,
+*   unless it renders an empty message. On a rail the labels, the headings and the lines of words
+*   in the bands are hidden visually and kept for screen readers, the empty message and the block's
+*   control are removed, and the search centres its button. The app shell sets the sidebar's width,
+*   and the root reads the shell's panel to render the rail. The recipe has no `palette` and no
+*   `effect` axis: its looks are neutral grounds, and the navigation list inside it offers its own
+*   palette and effect for the current row.
+*/
+/**
+* Selects a part inside a sidebar collapsed to a rail.
+*/
+const ICONIC = "[data-iconic] &";
+/**
+* Selects the children of a band that fold to an icon by themselves: a search, a nav block, a
+* navigation list and a switcher.
+*/
+const FOLDS = ".sidebar__search, .sidebar__nav, .nav-list__root, .switcher__root";
+/**
+* Selects the children of a band a caller writes around its words and marks: every child that does
+* not fold by itself.
+*/
+const LINES = `& > :not(${FOLDS})`;
+/**
+* Selects the lines of a band that have no icon form: every line except a bare `svg`.
+*/
+const WORDS = `& > :not(svg, ${FOLDS})`;
+/**
+* Styles the header and the footer as a column that keeps its height, and hides its words visually
+* on a rail.
+*
+* @remarks
+*   On a rail only a bare `svg` and the parts that fold by themselves remain visible, so the rail
+*   is as wide as its icons. The words remain in the accessibility tree, because the header's words
+*   identify the workspace and the footer's words identify the signed-in person.
+*/
+const BANDED = {
+	display: "flex",
+	flexDirection: "column",
+	flexShrink: "0",
+	[ICONIC]: {
+		alignItems: "center",
+		[WORDS]: { srOnly: true }
+	},
+	minInlineSize: "0"
+};
+/**
+* Maps each sidebar size to the height of a navigation list row at the same size: 24px, 32px and
+* 40px at the foundation's metrics.
+*/
+const ROWS = {
+	lg: "control.md",
+	md: "control.xs",
+	sm: "tag.md"
+};
+/**
+* Maps each sidebar size to the gap between the content's blocks, two gap sizes larger than the
+* content's padding: 12, 16 and 24px at the foundation's metrics.
+*/
+const BLOCKS = {
+	lg: "2xl",
+	md: "xl",
+	sm: "lg"
+};
+/**
+* Returns the inline inset of a navigation list row at the sidebar's size.
+*
+* @remarks
+*   The navigation list insets a row by `spacing.inset` two sizes smaller than the row. The
+*   labels, the headings, the block's control and the lines of words in the bands use the same
+*   inset, so their text and icons start and end where the rows' do: 8, 8 and 12px at `sm`, `md`
+*   and `lg`.
+* @param size - The sidebar's size.
+* @returns The inset, multiplied by the density.
+*/
+function marked(size) {
+	return dense(`{spacing.inset.${below(below(size))}}`);
+}
+/**
+* Returns the side of the block control's square: the tag size one size smaller than the sidebar,
+* and never under `sizes.6`.
+*
+* @remarks
+*   The navigation list sizes the control and the count at the end of a row with the same
+*   expression, so the block's control is in the rows' end column: 24px at every size.
+* @param size - The sidebar's size.
+* @returns The side of the square.
+*/
+function squared(size) {
+	return `max({sizes.6}, ${dense(`{sizes.tag.${below(size)}}`)})`;
+}
+/**
+* Returns the size styles of a band: the content's padding, the gap between its children, the rows'
+* inset on its lines of words and the text style of the rows' words one size up.
+*
+* @param size - The sidebar's size.
+* @returns The styles of the header or the footer at that size.
+*/
+function banded(size) {
+	return {
+		textStyle: `label.${below(size)}`,
+		gap: dense(`{spacing.gap.${below(size)}}`),
+		[LINES]: { marginInline: marked(size) },
+		padding: dense(`{spacing.gap.${size}}`)
+	};
+}
+/**
+* Styles a plain sidebar at the middle size.
+*
+* @remarks
+*   `staticCss` lists every size and every look. A sidebar in a panel over the page renders at `lg`
+*   whatever its `size`, a product's frame states the size and the look as data, and the compiler
+*   emits a variant only where a source states it as a literal.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		content: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		empty: {
+			color: "fg.muted",
+			[ICONIC]: { display: "none" },
+			textAlign: "center"
+		},
+		footer: BANDED,
+		header: BANDED,
+		nav: {
+			alignItems: "center",
+			display: "grid",
+			gridTemplateColumns: "minmax(0, 1fr) auto",
+			minInlineSize: "0",
+			"&[data-unmatched]:not(:has(.sidebar__empty))": { display: "none" },
+			"& > *": { gridColumn: "1 / -1" }
+		},
+		navAction: {
+			...interactive(),
+			_active: { background: "colorPalette.emphasized" },
+			_hover: {
+				background: "colorPalette.muted",
+				color: "fg"
+			},
+			alignItems: "center",
+			appearance: "none",
+			background: "transparent",
+			borderRadius: "l1",
+			color: "fg.muted",
+			display: "flex",
+			flexShrink: "0",
+			gridColumn: "2 / 3",
+			[ICONIC]: { display: "none" },
+			justifyContent: "center",
+			padding: "0"
+		},
+		navHeading: {
+			...truncate(),
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "flex",
+			fontWeight: "medium",
+			gridColumn: "1 / 2",
+			[ICONIC]: { srOnly: true },
+			textTransform: "uppercase"
+		},
+		navLabel: {
+			...truncate(),
+			textStyle: "label.xs",
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "flex",
+			fontWeight: "medium",
+			gridColumn: "1 / 2",
+			[ICONIC]: { srOnly: true },
+			textTransform: "uppercase"
+		},
+		root: {
+			blockSize: "100%",
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		scroller: {
+			flex: "1",
+			minBlockSize: "0"
+		},
+		search: {
+			[ICONIC]: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			inlineSize: "full",
+			minInlineSize: "0"
+		},
+		separator: divider("horizontal")
+	},
+	className: "sidebar",
+	defaultVariants: {
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Sidebar(\.\w+)?$/u],
+	slots: [
+		"root",
+		"header",
+		"scroller",
+		"content",
+		"footer",
+		"nav",
+		"navLabel",
+		"navHeading",
+		"navAction",
+		"search",
+		"empty",
+		"separator"
+	],
+	staticCss: [{
+		size: [
+			"sm",
+			"md",
+			"lg"
+		],
+		variant: [
+			"outline",
+			"plain",
+			"subtle",
+			"surface"
+		]
+	}],
+	variants: {
+		size: onSlots({
+			/**
+			* The blocks are three to four times as far apart as the rows inside them, so each block
+			* reads as its own group. A separator between two blocks sets no margin of its own, so the
+			* gap on either side of it is the block gap.
+			*/
+			content: sizeVariants((size) => ({
+				"& > .sidebar__separator": { marginBlock: "0" },
+				gap: dense(`{spacing.gap.${BLOCKS[size]}}`),
+				padding: dense(`{spacing.gap.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			empty: sizeVariants((size) => ({
+				textStyle: `body.${size}`,
+				padding: dense(`{spacing.inset.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			footer: sizeVariants(banded, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			header: sizeVariants(banded, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The label and the first row are as far apart as two rows.
+			*/
+			nav: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(below(size))}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The block's control is a square in the rows' end column, with the rows' end inset after
+			* it and an icon the size of a row's leading icon.
+			*/
+			navAction: sizeVariants((size) => ({
+				"& > svg": { boxSize: dense(`{sizes.icon.${below(size)}}`) },
+				blockSize: squared(size),
+				marginInlineEnd: marked(size),
+				minInlineSize: squared(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			navHeading: sizeVariants((size) => ({
+				textStyle: "label.xs",
+				marginBlockEnd: `calc(${dense(`{spacing.gap.${size}}`)} * -0.5)`,
+				paddingBlock: dense("{spacing.gap.xs}"),
+				paddingInline: marked(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The label is as tall as a row of the navigation list, so it reads as the list's first row.
+			*/
+			navLabel: sizeVariants((size) => ({
+				blockSize: `max({sizes.6}, ${dense(`{sizes.${ROWS[size]}}`)})`,
+				paddingInline: marked(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The search has zero inline padding, so the field is as wide as the rows under it.
+			*/
+			search: sizeVariants(() => ({ paddingInline: "0" }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			separator: sizeVariants((size) => ({ marginBlock: dense(`{spacing.gap.${size}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* The ground and the edge of the sidebar.
+		*
+		* @remarks
+		*   `subtle` is a muted ground without an edge, for a sidebar inside an app shell panel. The
+		*   shell renders the hairline between the panel and the page.
+		*/
+		variant: onSlot("root", {
+			subtle: { background: "bg.subtle" },
+			surface: {
+				...surface(),
+				borderRadius: "0"
+			},
+			outline: {
+				borderColor: "border",
+				borderInlineEndWidth: "hairline"
+			},
+			plain: { background: "transparent" }
+		})
+	}
+});
+//#endregion
+//#region src/splitter/recipe.ts
+/**
+* Recipe for a splitter: panels in a row or a column, with a resize trigger between two panels.
+*
+* @remarks
+*   The root is a flex row or column that fills its container: it grows in a flex container and is
+*   as tall and as wide as any other container. The machine sizes each panel inline, and a panel is
+*   a column its content can shrink in, so a scroll area inside it scrolls. The trigger is a strip
+*   `sizes.2` across, pulled over both panels by half its width, so the panels share the root as if
+*   it took no room. It stacks at `docked`, above a scroll area or other positioned content in the
+*   panel after it, which would take the pointer off half the strip. Under a coarse pointer a
+*   transparent pseudo-element widens the strip to `sizes.6`, the WCAG 2.5.8 target. The separator
+*   is a hairline along the strip's middle, and the indicator a pill `sizes.6` long on its centre.
+*   The line and the pill take the palette's solid while the pointer is over the strip, while it
+*   has focus and while it drags. The focus ring is on the pill, because the strip's own box is
+*   narrower than a ring, and on the strip of a trigger rendered without the pill. A disabled
+*   trigger keeps the line and hides the pill. Under forced colours the line is `CanvasText`, an
+*   active pill `Highlight` and the pill's ring `CanvasText`.
+*/
+/**
+* Class name of the recipe, which a selector across its parts writes.
+*/
+const CLASS$1 = "splitter";
+/**
+* Width of the trigger's strip across its line.
+*/
+const STRIP = "{sizes.2}";
+/**
+* Width of the strip under a coarse pointer, the WCAG 2.5.8 target.
+*/
+const TOUCH = "{sizes.6}";
+/**
+* Length of the indicator's pill along the line.
+*/
+const PILL = "{sizes.6}";
+/**
+* Selects a part of a splitter whose panels sit in a row, where a trigger's line is vertical.
+*/
+const ACROSS = "&[data-orientation=horizontal]";
+/**
+* Selects a part of a splitter whose panels sit in a column, where a trigger's line is horizontal.
+*/
+const DOWN = "&[data-orientation=vertical]";
+/**
+* Selects a line or a pill while its trigger is under the pointer, has focus or drags.
+*
+* @remarks
+*   `data-focus-visible` is the attribute a still scene stages focus with.
+*/
+const ACTIVE = `.${CLASS$1}__resizeTrigger:is(:hover, [data-focus], [data-focus-visible], [data-dragging]):not([data-disabled]) > &`;
+/**
+* Selects the pill while its trigger has keyboard focus.
+*/
+const RINGED = `.${CLASS$1}__resizeTrigger:is(:focus-visible, [data-focus-visible]) > &`;
+/**
+* Selects a trigger that renders the pill, which then takes the trigger's focus ring.
+*/
+const PILLED = `&:has(> .${CLASS$1}__resizeTriggerIndicator)`;
+/**
+* Defines the splitter recipe, in the primary palette by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		panel: {
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		resizeTrigger: {
+			focusVisibleRing: "outside",
+			_touch: {
+				_before: {
+					content: "\"\"",
+					position: "absolute"
+				},
+				[ACROSS]: { _before: {
+					insetBlock: "0",
+					insetInline: `calc((${TOUCH} - ${STRIP}) * -0.5)`
+				} },
+				[DOWN]: { _before: {
+					insetBlock: `calc((${TOUCH} - ${STRIP}) * -0.5)`,
+					insetInline: "0"
+				} }
+			},
+			[ACROSS]: {
+				inlineSize: STRIP,
+				marginInline: `calc(${STRIP} * -0.5)`
+			},
+			alignItems: "center",
+			display: "grid",
+			[DOWN]: {
+				blockSize: STRIP,
+				marginBlock: `calc(${STRIP} * -0.5)`
+			},
+			focusRingColor: "colorPalette.focusRing",
+			justifyItems: "center",
+			[PILLED]: { _focusVisible: { outlineStyle: "none" } },
+			position: "relative",
+			zIndex: "docked"
+		},
+		resizeTriggerIndicator: {
+			_highContrast: {
+				background: "Canvas",
+				borderColor: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			"&[data-disabled]": { visibility: "hidden" },
+			[ACROSS]: {
+				blockSize: PILL,
+				inlineSize: STRIP
+			},
+			[ACTIVE]: {
+				_highContrast: {
+					background: "Highlight",
+					borderColor: "Highlight"
+				},
+				background: "colorPalette.solid",
+				borderColor: "colorPalette.solid"
+			},
+			background: "bg.panel",
+			borderColor: "border.emphasized",
+			borderRadius: "full",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "xs",
+			[DOWN]: {
+				blockSize: STRIP,
+				inlineSize: PILL
+			},
+			gridArea: "1 / 1 / 2 / 2",
+			position: "relative",
+			[RINGED]: {
+				_highContrast: { outlineColor: "CanvasText" },
+				outlineColor: "colorPalette.focusRing",
+				outlineOffset: "{spacing.ring}",
+				outlineStyle: "solid",
+				outlineWidth: "ring"
+			},
+			transitionDuration: "fast",
+			transitionProperty: "common"
+		},
+		resizeTriggerSeparator: {
+			_highContrast: {
+				background: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			[ACROSS]: {
+				blockSize: "full",
+				inlineSize: "{borderWidths.hairline}"
+			},
+			[ACTIVE]: {
+				_highContrast: { background: "Highlight" },
+				background: "colorPalette.solid"
+			},
+			background: "border",
+			[DOWN]: {
+				blockSize: "{borderWidths.hairline}",
+				inlineSize: "full"
+			},
+			gridArea: "1 / 1 / 2 / 2",
+			transitionDuration: "fast",
+			transitionProperty: "common"
+		},
+		root: {
+			[ACROSS]: { flexDirection: "row" },
+			blockSize: "full",
+			colorPalette: "primary",
+			display: "flex",
+			[DOWN]: { flexDirection: "column" },
+			flex: "1",
+			inlineSize: "full",
+			minBlockSize: "0",
+			minInlineSize: "0",
+			overflow: "hidden"
+		}
+	},
+	className: CLASS$1,
+	jsx: [/^Splitter(\.\w+)?$/u],
+	slots: [
+		"root",
+		"panel",
+		"resizeTrigger",
+		"resizeTriggerSeparator",
+		"resizeTriggerIndicator"
+	],
+	variants: { 
+	/**
+	* Semantic palette of the line and the pill while the pointer is over a trigger, while it has
+	* focus and while it drags, and of the focus ring. Without a value the root reads `primary`.
+	*/
+palette: onSlot("root", paletteVariants()) }
+});
+//#endregion
+//#region src/toolbar/recipe.ts
+/**
+* Recipe for a toolbar: a row of controls with a start, a centre and an end band, and a search.
+*
+* @remarks
+*   A band left out takes no room. The centre takes the room the other bands leave and truncates a
+*   long title, because a toolbar on two lines moves everything under it. The root sets the gap as
+*   `--toolbar-gap`, which every band reads: the gap token of the toolbar's size, 8px at `md`. The
+*   layout package's `Group` joins controls, and the separator is the layout divider stretched to
+*   the row's height. The search is 15rem wide and does not grow, because the centre takes the free
+*   room. As a child of the row it shrinks down to zero before a band's controls do. A field's
+*   percentage width gives a band no content width, so the search states an inline size. An opened
+*   search covers the whole row, the padding and the edge of an outline or surface row included,
+*   and the root hides its other children while it is open, so the row needs no fill of its own on
+*   any surface. The title is semibold and leaves twice the gap after it, so the control after it
+*   reads as the first of the row's controls and not as part of the title. A narrow row folds
+*   those controls, and its title leaves the row's gap alone. The recipe has no
+*   `palette` axis, because the controls in the row set their own palettes, and no `effect` axis,
+*   because the row is not a control.
+*/
+/**
+* Custom property the root sets to the gap between controls, which every band reads.
+*/
+const GAP = "--toolbar-gap";
+/**
+* Custom property the root sets to its own padding in the outline and surface looks.
+*/
+const INSET = "--toolbar-inset";
+/**
+* Custom property the outline and surface looks set to the root's edge width, which an opened
+* search covers.
+*/
+const EDGE = "--toolbar-edge";
+/**
+* Styles every band: a row of controls, centred on the cross axis.
+*/
+const BAND = {
+	alignItems: "center",
+	display: "flex",
+	gap: `var(${GAP})`,
+	minInlineSize: "0"
+};
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS = "toolbar";
+/**
+* Selects a root while its search is open.
+*/
+const SEARCHING = `&:has(.${CLASS}__search[data-opened])`;
+/**
+* Defines the toolbar recipe: a plain row at size `md` with `l2` corners by default.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		action: {
+			...FOLDING,
+			flexShrink: "0"
+		},
+		center: {
+			...BAND,
+			...truncate(),
+			"& > *": {
+				minInlineSize: "0",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			flex: "1",
+			justifyContent: "center"
+		},
+		end: {
+			...BAND,
+			flexShrink: "0",
+			marginInlineStart: "auto"
+		},
+		group: { flexShrink: "0" },
+		root: {
+			...BAND,
+			inlineSize: "100%",
+			position: "relative",
+			[SEARCHING]: { [`& > :not(.${CLASS}__search)`]: { visibility: "hidden" } }
+		},
+		search: {
+			"&[data-opened]": {
+				"& > :first-child": { flex: "1" },
+				alignItems: "stretch",
+				display: "flex",
+				inlineSize: "auto",
+				inset: `calc(var(${EDGE}, 0px) * -1)`,
+				position: "absolute",
+				zIndex: "1"
+			},
+			"& > *": { minInlineSize: "0" },
+			flex: "0 1 auto",
+			inlineSize: "60",
+			minInlineSize: "0"
+		},
+		separator: {
+			alignSelf: "stretch",
+			blockSize: "auto"
+		},
+		start: {
+			...BAND,
+			flexShrink: "0"
+		},
+		title: {
+			...BAND,
+			[`&[${NARROW$1}]`]: { marginInlineEnd: "0" },
+			flexShrink: "0",
+			fontWeight: "semibold",
+			marginInlineEnd: `calc(var(${GAP}) * 2)`
+		}
+	},
+	className: CLASS,
+	defaultVariants: {
+		radius: "l2",
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Toolbar(\.\w+)?$/u],
+	slots: [
+		"root",
+		"start",
+		"center",
+		"end",
+		"action",
+		"group",
+		"separator",
+		"search",
+		"title"
+	],
+	variants: {
+		/**
+		* Corner radius of an outlined or surface row.
+		*/
+		radius: onSlot("root", cornerVariants([
+			"l1",
+			"l2",
+			"l3"
+		])),
+		/**
+		* Size of the gap and of the separator's block margin.
+		*/
+		size: onSlots({
+			root: sizeVariants((size) => ({ [GAP]: `{spacing.gap.${size}}` })),
+			separator: sizeVariants((size) => ({ marginBlock: dense(`{spacing.gap.${size}}`) }))
+		}),
+		/**
+		* Look of the row.
+		*
+		* @remarks
+		*   `outline` and `surface` pad the row by its gap, so the controls start inside the row's
+		*   edge. `plain` has no edge and no padding.
+		*/
+		variant: {
+			surface: { root: {
+				...surface(),
+				[EDGE]: "{borderWidths.hairline}",
+				[INSET]: `var(${GAP})`,
+				padding: `var(${INSET})`
+			} },
+			outline: { root: {
+				borderColor: "border",
+				borderWidth: "hairline",
+				[EDGE]: "{borderWidths.hairline}",
+				[INSET]: `var(${GAP})`,
+				padding: `var(${INSET})`
+			} },
+			plain: { root: { background: "transparent" } }
+		}
+	}
+});
+//#endregion
+export { lengthOf as C, keyedWidth as S, STICKY_OFFSET$1 as _, SCROLLPORT as a, clamped as b, STICKY_TOP as c, recipe$6 as d, PANEL_RAIL as f, SETTLED as g, PANE_TOP as h, recipe$3 as i, recipe$4 as l, PANEL_TOP as m, recipe$1 as n, SIDEBAR_SIZE as o, PANEL_SIZE as p, recipe$2 as r, STICKY_OFFSET as s, recipe as t, recipe$5 as u, WINDOW_HEIGHT as v, recipe$7 as w, growthOf as x, RESIZING as y };