@stealthscale/component-screen 0.0.0-stage → 0.0.1

package/dist/recipe-CRJrRAI8.js

@@ -0,0 +1,2612 @@
+import { CONTROL_INSET_END, CONTROL_INSET_START, axis, below, cornerVariants, defineSlotRecipe, dense, divider, interactive, lookVariants, 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. 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$8 = 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/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.
+*/
+const STICKY_TOP$1 = "--app-shell-sticky-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 or before the root
+* has settled.
+*/
+const MOVING = {
+	_motionReduce: { transitionDuration: "0s" },
+	transitionDuration: "move",
+	transitionTimingFunction: "move",
+	[`.${CLASS$5}__root:not([${SETTLED}]) &`]: { 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 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(${STICKY_TOP$1}, 0px))`,
+	insetBlockStart: `var(${STICKY_TOP$1}, 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: a 24px strip centred on the edge between a panel and the page, with a line down
+* its middle under the pointer and on keyboard focus.
+*
+* @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. The strip is hidden under a coarse pointer, where
+*   a finger presses the menu button instead.
+*/
+const RAIL = {
+	...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" },
+	alignSelf: "stretch",
+	appearance: "none",
+	background: "transparent",
+	borderWidth: "0",
+	colorPalette: "neutral",
+	flexShrink: "0",
+	inlineSize: "6",
+	marginInline: "calc({sizes.6} / -2)",
+	padding: "0",
+	position: "relative",
+	zIndex: "docked"
+};
+//#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 eighteen 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 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 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.
+*/
+const recipe$7 = 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)`
+			}
+		},
+		main: {
+			flex: "1",
+			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"
+			}
+		},
+		rail: RAIL,
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "100%"
+		},
+		row: {
+			display: "flex",
+			"&:has(> [data-stacked])": { flexWrap: "wrap" },
+			[`&:has(> [data-stacked]) > .${CLASS$5}__main`]: { 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}")
+		},
+		trigger: { flexShrink: "0" }
+	},
+	className: CLASS$5,
+	defaultVariants: {
+		divided: true,
+		scroll: "page",
+		variant: "plain"
+	},
+	jsx: [/^AppShell(\.\w+)?$/u],
+	slots: [
+		"root",
+		"header",
+		"body",
+		"bodyViewport",
+		"row",
+		"navbar",
+		"main",
+		"mainViewport",
+		"aside",
+		"footer",
+		"status",
+		"content",
+		"column",
+		"section",
+		"scroller",
+		"trigger",
+		"rail",
+		"backdrop"
+	],
+	variants: {
+		/**
+		* 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]) > .${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. `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: {
+					...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$1 = "{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$6 = defineSlotRecipe({
+	base: {
+		body: {
+			padding: dense("{spacing.inset.sm}"),
+			textStyle: "body.sm"
+		},
+		closeTrigger: { flexShrink: "0" },
+		content: {
+			...motion("scale-fade.in", "scale-fade.out"),
+			background: "bg.panel",
+			borderColor: "transparent",
+			borderRadius: "l3",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "lg",
+			color: "fg",
+			display: "flex",
+			flexDirection: "column",
+			focusRingColor: "colorPalette.focusRing",
+			focusVisibleRing: "outside",
+			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$1 },
+			"&:is([data-axis=n], [data-axis=s])": { blockSize: STRIP$1 },
+			"&:is([data-axis=ne], [data-axis=nw], [data-axis=se], [data-axis=sw])": {
+				blockSize: STRIP$1,
+				inlineSize: STRIP$1
+			},
+			"&[data-disabled]": { display: "none" },
+			zIndex: "docked"
+		},
+		root: { display: "contents" },
+		scroller: {
+			"&[hidden]": { display: "none" },
+			flex: "1",
+			marginBlockEnd: STRIP$1,
+			marginInlineEnd: STRIP$1,
+			minBlockSize: "0",
+			[RING_OFFSET]: "calc({borderWidths.ring} * -1)"
+		},
+		stageTrigger: {
+			"&[hidden]": { display: "none" },
+			flexShrink: "0"
+		},
+		title: {
+			...truncate(),
+			fontWeight: "semibold",
+			textStyle: "label.md"
+		},
+		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/folding/folding.ts
+/**
+* Styles an action that folds to its icon while its row is narrow, for the page, the toolbar and
+* the section.
+*
+* @remarks
+*   A secondary action shows its icon alone, and its words remain for a screen reader. A tertiary
+*   action renders nothing on a narrow row and runs from the row's menu, which the action registers
+*   with. The row measures its own width, so a row beside an open sidebar folds on its own width
+*   and the caller does not write a breakpoint.
+*/
+/**
+* Attribute an action sets on itself while its own row is narrow.
+*
+* @remarks
+*   The action reads the state from its row's context, so a narrow ancestor folds no action of a
+*   wider row inside it. A bar fixed to the window is wider than the page around it in the
+*   document.
+*/
+const NARROW$2 = "data-narrow";
+/**
+* Attribute an action sets to its priority.
+*
+* @remarks
+*   The priority is an attribute and not an axis, because a slot recipe resolves its variants once,
+*   at the root, and each action in a row folds on its own priority.
+*/
+const PRIORITY = "data-priority";
+/**
+* Styles an action by its priority while its row is narrow.
+*
+* @remarks
+*   Every action keeps its words on one line at every width, because a wrapped control would make
+*   the row taller. A secondary action hides its element children other than its icon with
+*   `srOnly`, so it keeps its accessible name, and renders as a square around its icon. Its words
+*   must be in an element, because a CSS selector cannot select a bare text node. A primary action
+*   is unchanged.
+*/
+const FOLDING = {
+	[`&[${PRIORITY}=secondary]`]: { [`&[${NARROW$2}]`]: {
+		"& > :not(svg)": { srOnly: true },
+		aspectRatio: "square",
+		justifyContent: "center",
+		paddingInline: "0"
+	} },
+	whiteSpace: "nowrap"
+};
+//#endregion
+//#region src/page/metrics.ts
+/**
+* Computes the rules the page recipe writes for 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 root of the tabs in the navigation band.
+*/
+const TABS_IN_NAV = `& > .${TABS}__root`;
+/**
+* Selects every tab of a strip in the navigation band.
+*/
+const TAB_IN_NAV = `& .${TABS}__trigger`;
+/**
+* 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: {
+		[NARROW_TITLE]: { textStyle: "heading.lg" },
+		textStyle: "heading.xl"
+	},
+	md: {
+		[NARROW_TITLE]: { textStyle: "heading.md" },
+		textStyle: "heading.lg"
+	},
+	sm: {
+		[NARROW_TITLE]: { textStyle: "heading.sm" },
+		textStyle: "heading.md"
+	}
+};
+//#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 sticky aside keeps to the top of its row, under the shell's sticky bars. 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 takes, set to the height of the area that scrolls the page.
+*/
+const SCROLLPORT = "--page-scrollport";
+/**
+* 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 row that centres its items, wraps and shrinks.
+*/
+const ROW$2 = {
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "wrap",
+	minInlineSize: "0"
+};
+/**
+* Selects a band followed by the navigation, which then has the hairline.
+*/
+const BEFORE_NAV = `&:has(+ .${CLASS$3}__nav)`;
+/**
+* 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 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.
+*/
+const BESIDE = {
+	columnGap: dense("{spacing.gap.xl}"),
+	display: "grid",
+	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"body aside\" \"footer footer\"",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	gridTemplateRows: "auto auto auto auto 1fr auto"
+};
+/**
+* Sizes the page offers, which a section in the page reads too.
+*/
+const STEPS = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a navigation band with a strip of tabs, which is flush with the band's hairline.
+*/
+const WITH_TABS = `&:has(> .${TABS}__root)`;
+/**
+* Defines the page recipe: a full-width page at size `md` by default.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		action: {
+			...FOLDING,
+			flexShrink: "0"
+		},
+		actions: {
+			...ROW$2,
+			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]": {
+				alignSelf: "start",
+				insetBlockStart: `calc(var(${SHELL_TOP}, 0px) + var(${STICKY_TOP}, 0px) + {spacing.gap.xl})`,
+				lg: {
+					display: "flex",
+					flexDirection: "column",
+					maxBlockSize: `calc(var(${SCROLLPORT}, 100dvh) - var(${SHELL_TOP}, 0px) - var(${STICKY_TOP}, 0px) - {spacing.gap.xl} * 2)`
+				},
+				position: "sticky"
+			},
+			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$2,
+			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$2,
+			"&[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$2,
+			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: {
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: "1",
+			inlineSize: "100%",
+			minBlockSize: "100%",
+			minInlineSize: "0",
+			[WITH_ASIDE]: { lg: BESIDE }
+		},
+		title: {
+			gridArea: "title",
+			minInlineSize: "0",
+			overflowWrap: "anywhere"
+		},
+		toolbar: {
+			...BAND$1,
+			...ROW$2,
+			"&[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",
+		"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: 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) => ({
+				gap: dense(`{spacing.gap.${size}}`),
+				marginBlockEnd: size === "lg" ? "{spacing.1}" : "{spacing.0.5}",
+				textStyle: `body.${below(size)}`
+			}), 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),
+			title: TITLES,
+			toolbar: sizeVariants((size) => ({
+				gap: dense(`{spacing.gap.${size}}`),
+				paddingBlock: dense(`{spacing.gap.${size}}`)
+			}), STEPS),
+			trail: sizeVariants((size) => ({
+				gap: dense(`{spacing.gap.${below(size)}}`),
+				textStyle: `body.${below(size)}`
+			}), STEPS)
+		})
+	}
+});
+//#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$1 = `.${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$1 = {
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "wrap",
+	minInlineSize: "0"
+};
+/**
+* Defines the section recipe: a plain section at size `md` by default.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		action: {
+			...FOLDING,
+			flexShrink: "0"
+		},
+		actions: {
+			...ROW$1,
+			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$1,
+			"& > :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$1]: { 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) => ({
+				marginBlockStart: size === "lg" ? "{spacing.1}" : "{spacing.0.5}",
+				textStyle: `body.${below(size)}`
+			}), [
+				"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$1 = "[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$1]: {
+		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 {
+		gap: dense(`{spacing.gap.${below(size)}}`),
+		[LINES]: { marginInline: marked(size) },
+		padding: dense(`{spacing.gap.${size}}`),
+		textStyle: `label.${below(size)}`
+	};
+}
+/**
+* Styles a plain sidebar at the middle size.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		content: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		empty: {
+			color: "fg.muted",
+			[ICONIC$1]: { 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$1]: { display: "none" },
+			justifyContent: "center",
+			padding: "0"
+		},
+		navHeading: {
+			...truncate(),
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "flex",
+			fontWeight: "medium",
+			gridColumn: "1 / 2",
+			[ICONIC$1]: { srOnly: true },
+			textTransform: "uppercase"
+		},
+		navLabel: {
+			...truncate(),
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "flex",
+			fontWeight: "medium",
+			gridColumn: "1 / 2",
+			[ICONIC$1]: { srOnly: true },
+			textStyle: "label.xs",
+			textTransform: "uppercase"
+		},
+		root: {
+			blockSize: "100%",
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		scroller: {
+			flex: "1",
+			minBlockSize: "0"
+		},
+		search: {
+			[ICONIC$1]: {
+				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"
+	],
+	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) => ({
+				padding: dense(`{spacing.inset.${size}}`),
+				textStyle: `body.${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) => ({
+				marginBlockEnd: `calc(${dense(`{spacing.gap.${size}}`)} * -0.5)`,
+				paddingBlock: dense("{spacing.gap.xs}"),
+				paddingInline: marked(size),
+				textStyle: "label.xs"
+			}), [
+				"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$2 = defineSlotRecipe({
+	base: {
+		panel: {
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		resizeTrigger: {
+			_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",
+			focusVisibleRing: "outside",
+			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/switcher/recipe.ts
+/**
+* Declares the switcher's slot recipe, which styles the control that shows the current workspace,
+* project or environment and opens the menu of the others.
+*
+* @remarks
+*   The recipe has six slots. The root slot is the trigger, and the mark, the label, the name, the
+*   detail and the indicator are inside it. `Switcher.Root` is the disclosure package's menu, so
+*   the menu's recipe styles the panel and its rows. The trigger takes the button's looks and
+*   palettes from the same layer styles, so an outlined switcher has the button's light edge. The
+*   mark is a square in the palette's muted fill for an initial, an icon or an avatar. The name and
+*   the detail truncate to keep the control at one height. A pair of chevrons marks a control that
+*   switches and not a direction, so the indicator does not rotate while the menu is open. In a
+*   sidebar closed to icons the control is its mark alone, square, and in a narrow toolbar a
+*   switcher with a mark hides its name. The words remain in the accessible name in both.
+*/
+/**
+* Selects a part of a switcher drawn as its mark alone, in a sidebar closed to icons.
+*/
+const ICONIC = ".switcher__root[data-iconic] &";
+/**
+* Selects a part of a switcher with a mark in a toolbar too narrow for the name. A switcher
+* without a mark keeps its name, because the name is the only content that identifies it.
+*/
+const NARROW = ".switcher__root[data-narrow]:has(.switcher__mark) &";
+/**
+* Custom property the size axis sets to the height of a button at the switcher's size.
+*/
+const HEIGHT = "--switcher-height";
+/**
+* Styles a control that is one line as wide as its words: in a toolbar and on its own.
+*
+* @remarks
+*   `inlineSize: fit` keeps the control as wide as its words, because a flex container fills its
+*   line otherwise. The detail is hidden, because the control is one line tall. The control is at
+*   least as tall as a button of its size, so it lines up with the buttons in a toolbar: 36px at
+*   `sm` and 40px at `md`.
+*/
+const INLINE = {
+	detail: { display: "none" },
+	root: {
+		inlineSize: "fit",
+		minBlockSize: `var(${HEIGHT})`
+	}
+};
+/**
+* Styles the control in a sidebar: a row as wide as the column, and the mark alone on a rail.
+*
+* @remarks
+*   On a rail the control has no padding and no edge, so it is the mark's square, as tall as the
+*   rows under it: 32px at `md`.
+*/
+const ROW = { root: {
+	"&[data-iconic]": {
+		alignSelf: "center",
+		aspectRatio: "square",
+		borderWidth: "0",
+		inlineSize: "auto",
+		justifyContent: "center",
+		padding: "0"
+	},
+	inlineSize: "full"
+} };
+/**
+* Styles a ghost switcher at the middle size, alone.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		detail: {
+			...truncate(),
+			color: "fg.subtle",
+			textStyle: "caption"
+		},
+		indicator: {
+			_open: { rotate: "0deg" },
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "inline-flex",
+			flexShrink: "0",
+			[ICONIC]: { display: "none" },
+			justifyContent: "center",
+			marginInlineStart: "auto",
+			transitionDuration: "press",
+			transitionProperty: "common",
+			transitionTimingFunction: "press"
+		},
+		label: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			[ICONIC]: { srOnly: true },
+			minInlineSize: "0",
+			[NARROW]: { srOnly: true },
+			textAlign: "start"
+		},
+		mark: {
+			alignItems: "center",
+			background: "colorPalette.muted",
+			borderRadius: "l1",
+			color: "colorPalette.fg",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontWeight: "semibold",
+			justifyContent: "center",
+			lineHeight: "tight",
+			overflow: "clip"
+		},
+		name: {
+			...truncate(),
+			fontWeight: "medium"
+		},
+		root: {
+			...interactive(),
+			alignItems: "center",
+			appearance: "none",
+			borderColor: "transparent",
+			borderWidth: "control",
+			colorPalette: "neutral",
+			display: "flex",
+			minInlineSize: "0"
+		}
+	},
+	className: "switcher",
+	compoundVariants: [{
+		css: { mark: {
+			boxSize: dense("{sizes.icon.lg}"),
+			fontSize: "xs"
+		} },
+		name: "marked",
+		placement: ["alone", "toolbar"]
+	}, (
+	/**
+	* Sets the detail and the indicator in the trigger's own ink on the solid look, where the
+	* page's subtle ink is not read against the fill.
+	*/
+	{
+		css: {
+			detail: { color: "inherit" },
+			indicator: { color: "inherit" }
+		},
+		name: "inked",
+		variant: "solid"
+	})],
+	defaultVariants: {
+		placement: "alone",
+		size: "md",
+		variant: "ghost"
+	},
+	jsx: [/^Switcher(\.\w+)?$/u],
+	slots: [
+		"root",
+		"mark",
+		"label",
+		"name",
+		"detail",
+		"indicator"
+	],
+	variants: {
+		/**
+		* The palette of the look and the mark.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Where the control is placed, which sets its width and its lines.
+		*
+		* @remarks
+		*   `Switcher.Root` reads the placement from the sidebar or the toolbar around it unless a
+		*   caller states one. The `marked` compound sizes the mark to `icon.lg` on one line, because
+		*   the size axis sizes it for a sidebar and a compound applies over an axis.
+		*/
+		placement: {
+			alone: INLINE,
+			sidebar: ROW,
+			toolbar: INLINE
+		},
+		size: onSlots({
+			indicator: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			mark: sizeVariants((size) => ({
+				boxSize: dense(`{sizes.control.${below(below(size))}}`),
+				fontSize: below(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			name: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({
+				borderRadius: "l2",
+				gap: dense(`{spacing.gap.${size}}`),
+				[HEIGHT]: dense(`{sizes.control.${size}}`),
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.gap.${size}}`),
+				textStyle: `body.${below(size)}`
+			}), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* The button's six looks, each one of the theme's layer styles.
+		*
+		* @remarks
+		*   `ghost`, the default, has no fill at rest, so a switcher at the head of a sidebar shows the
+		*   sidebar's own ground and fills under a pointer.
+		*/
+		variant: onSlot("root", lookVariants())
+	}
+});
+//#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 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"
+		}
+	},
+	className: CLASS,
+	defaultVariants: {
+		radius: "l2",
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Toolbar(\.\w+)?$/u],
+	slots: [
+		"root",
+		"start",
+		"center",
+		"end",
+		"action",
+		"group",
+		"separator",
+		"search"
+	],
+	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 { STICKY_OFFSET$1 as _, recipe$4 as a, recipe$8 as b, STICKY_TOP as c, PRIORITY as d, recipe$6 as f, SETTLED as g, PANEL_SIZE as h, recipe$3 as i, recipe$5 as l, PANEL_RAIL as m, recipe$1 as n, SCROLLPORT as o, recipe$7 as p, recipe$2 as r, STICKY_OFFSET as s, recipe as t, NARROW$2 as u, STICKY_TOP$1 as v, WINDOW_HEIGHT as y };