@stealthscale/sdk-host 0.1.0 → 0.4.0

package/dist/frame-HZM1zS7g.js

@@ -0,0 +1,2500 @@
+import { a as settingsListed, d as HostContent, i as menusOf, n as HostRoot, o as useListed, s as usePalette, u as useInternals } from "./create-routes-D4iCBYZe.js";
+import { r as useProductName, t as pluginWordsOf } from "./words-yI-WdYM3.js";
+import { hostContract, subjectOf } from "@stealthscale/sdk-core";
+import { Slot, useNavigation, useResolvedProduct, useSession, useSlot } from "@stealthscale/sdk-plugin";
+import { settingKey } from "@stealthscale/settings";
+import { createLink, useDeclaredRoute, useLinkProps, useLocation } from "@stealthscale/provider-router";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { useTranslation } from "@stealthscale/provider-i18n";
+import { Button, ButtonPropsProvider, ColorModeToggle } from "@stealthscale/component-actions";
+import * as lucide from "lucide-react";
+import { CheckIcon, ChevronRightIcon, ChevronsUpDownIcon, EllipsisIcon, MoonIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightCloseIcon, PanelRightIcon, SearchIcon, SunIcon, XIcon } from "lucide-react";
+import { Group } from "@stealthscale/component-layout";
+import { Link, NavList } from "@stealthscale/component-navigation";
+import { AppShell, Sidebar, Toolbar } from "@stealthscale/component-screen";
+import { Icon, Text } from "@stealthscale/component-typography";
+import { LocaleSwitcher, ThemeSwitcher } from "@stealthscale/component-screen/shell";
+import { Avatar } from "@stealthscale/component-media";
+import { SkipNav } from "@stealthscale/component-a11y";
+import { useBreakpoint } from "@stealthscale/provider-viewport";
+//#region src/app/opener.tsx
+/**
+* The icons of each side's panel while it is closed and while it is open.
+*/
+const ICONS = {
+	end: {
+		closed: PanelRightIcon,
+		open: PanelRightCloseIcon
+	},
+	start: {
+		closed: PanelLeftIcon,
+		open: PanelLeftCloseIcon
+	}
+};
+/**
+* Renders the shell's trigger as a small square ghost button with the panel's icon.
+*
+* @remarks
+*   The toolbar's item renders it through `as`, and it renders the trigger through `as` in turn, so
+*   one element takes the row's tab stop, the reference to the panel and the button's styles. While
+*   the panel is open, the icon points into the panel. The icon is hidden from a screen reader, and
+*   the trigger has the name and the state.
+* @returns The control.
+*/
+function Opener(t0) {
+	const $ = c(11);
+	let rest;
+	let side;
+	let t1;
+	if ($[0] !== t0) {
+		({panel: t1, side, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = side;
+		$[3] = t1;
+	} else {
+		rest = $[1];
+		side = $[2];
+		t1 = $[3];
+	}
+	const panel = t1 === void 0 ? "navbar" : t1;
+	const open = AppShell.useAppShellPanel(panel)?.open ?? false;
+	const icons = ICONS[side];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			palette: "neutral",
+			shape: "square",
+			size: "sm",
+			variant: "ghost"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = open ? icons.open : icons.closed;
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Icon, {
+			as: t3,
+			size: "sm"
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== panel || $[8] !== rest || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t2,
+			children: /* @__PURE__ */ jsx(AppShell.Trigger, {
+				as: Button,
+				panel,
+				...rest,
+				children: t4
+			})
+		});
+		$[7] = panel;
+		$[8] = rest;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+//#endregion
+//#region src/app/switchers.tsx
+/**
+* Glyph that marks the picked row of a switcher's menu.
+*/
+const CHECK = /* @__PURE__ */ jsx(CheckIcon, {
+	"aria-hidden": true,
+	size: "1em"
+});
+/**
+* Glyph at the end of a switcher's control, which opens a list to pick from.
+*/
+const INDICATOR = /* @__PURE__ */ jsx(Icon, {
+	as: ChevronsUpDownIcon,
+	size: "sm"
+});
+/**
+* Where a switcher's menu opens: below the control and aligned to its end, at the bar's end.
+*/
+const POSITIONING = { placement: "bottom-end" };
+/**
+* Renders each switcher as an item of the bar's row.
+*
+* @remarks
+*   The language and the theme switchers are the screen package's, in the outline look, named in
+*   the host's words. The colour mode toggle shows a moon and a sun. Each reads a provider of the
+*   product's shell, so the frame renders them inside `Shell`.
+*/
+function FrameSwitchers(t0) {
+	const $ = c(7);
+	const { switchers } = t0;
+	const { t } = useTranslation("host");
+	let t1;
+	if ($[0] !== switchers || $[1] !== t) {
+		let t2;
+		if ($[3] !== t) {
+			t2 = (switcher) => {
+				if (switcher === "locale") return /* @__PURE__ */ jsx(LocaleSwitcher, {
+					checkIcon: CHECK,
+					indicator: INDICATOR,
+					label: t("frame.language"),
+					positioning: POSITIONING,
+					variant: "outline"
+				}, switcher);
+				if (switcher === "theme") return /* @__PURE__ */ jsx(ThemeSwitcher, {
+					checkIcon: CHECK,
+					indicator: INDICATOR,
+					label: t("frame.theme"),
+					positioning: POSITIONING,
+					variant: "outline"
+				}, switcher);
+				return /* @__PURE__ */ jsx(Toolbar.Item, {
+					as: ColorModeToggle,
+					dark: /* @__PURE__ */ jsx(Icon, {
+						as: MoonIcon,
+						size: "sm"
+					}),
+					label: t("frame.darkMode"),
+					light: /* @__PURE__ */ jsx(Icon, {
+						as: SunIcon,
+						size: "sm"
+					}),
+					size: "sm"
+				}, switcher);
+			};
+			$[3] = t;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = switchers.map(t2);
+		$[0] = switchers;
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+//#region src/app/bar-end.tsx
+/**
+* Renders the end band of the bar's toolbar.
+*
+* @remarks
+*   The search is an action that opens the palette `Mod+K` opens, which lists the commands and
+*   every page of the main menu. A narrow bar shows its icon alone.
+* @returns The toolbar's end band.
+*/
+function BarEnd(t0) {
+	const $ = c(14);
+	const { bar, panel } = t0;
+	const { t } = useTranslation("host");
+	const { setOpen } = usePalette();
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.header });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== bar.search || $[2] !== setOpen || $[3] !== t) {
+		t2 = bar.search ? /* @__PURE__ */ jsx(Toolbar.Action, {
+			"aria-keyshortcuts": "Control+K Meta+K",
+			icon: /* @__PURE__ */ jsx(Icon, {
+				as: SearchIcon,
+				size: "sm"
+			}),
+			onClick: () => {
+				setOpen(true);
+			},
+			children: t("frame.search")
+		}) : null;
+		$[1] = bar.search;
+		$[2] = setOpen;
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== bar.switchers) {
+		t3 = /* @__PURE__ */ jsx(FrameSwitchers, { switchers: bar.switchers });
+		$[5] = bar.switchers;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== panel || $[8] !== t) {
+		t4 = panel ? /* @__PURE__ */ jsx(Toolbar.Item, {
+			"aria-label": t("frame.panel"),
+			as: Opener,
+			panel: "panel",
+			side: "end"
+		}) : null;
+		$[7] = panel;
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Toolbar.End, { children: [
+			t1,
+			t2,
+			t3,
+			t4
+		] });
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+//#endregion
+//#region src/app/brand.tsx
+/**
+* Renders the brand as the router's link, so it opens the site root without a reload.
+*/
+const Home = createLink(Link);
+/**
+* Renders the logo and the product's name in the bar's own ink.
+*
+* @remarks
+*   The logo is the media package's avatar in its rounded shape, the mark of a company, with no
+*   text alternative, because the name beside it names the link. A compact brand renders the mark
+*   alone and takes the name as its link's name. The name is semibold at the small size. The
+*   router's link passes its children to the element as one list, so the mark and the name are one
+*   fragment.
+* @returns The link.
+*/
+function FrameBrand(t0) {
+	const $ = c(18);
+	let logo;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({compact: t1, logo, ...rest} = t0);
+		$[0] = t0;
+		$[1] = logo;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		logo = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const compact = t1 === void 0 ? false : t1;
+	const name = useProductName(useResolvedProduct());
+	const marked = compact || logo !== void 0;
+	const t2 = compact ? name : void 0;
+	let t3;
+	if ($[4] !== logo || $[5] !== marked || $[6] !== name) {
+		t3 = marked ? /* @__PURE__ */ jsxs(Avatar.Root, {
+			"aria-hidden": true,
+			name,
+			shape: "rounded",
+			size: "xs",
+			children: [logo === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
+				alt: "",
+				src: logo
+			}), /* @__PURE__ */ jsx(Avatar.Fallback, {})]
+		}) : null;
+		$[4] = logo;
+		$[5] = marked;
+		$[6] = name;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== compact || $[9] !== name) {
+		t4 = compact ? null : /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: name
+		});
+		$[8] = compact;
+		$[9] = name;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== rest || $[15] !== t2 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Home, {
+			"aria-label": t2,
+			inherit: true,
+			to: "/",
+			variant: "plain",
+			...rest,
+			children: t5
+		});
+		$[14] = rest;
+		$[15] = t2;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+//#endregion
+//#region src/app/section-link.tsx
+/**
+* Renders the section's link as a toolbar link in the neutral ghost look.
+*
+* @remarks
+*   The router's link props open the section without a reload and leave a press with a modifier
+*   key to the browser. A narrow bar renders the link as a row of the bar's menu, which calls the
+*   same handler.
+* @returns The toolbar's link.
+*/
+function SectionLink(t0) {
+	const $ = c(7);
+	const { current, section } = t0;
+	let t1;
+	if ($[0] !== section.href) {
+		t1 = { to: section.href };
+		$[0] = section.href;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { href: t2, onClick } = useLinkProps(t1);
+	const href = t2 === void 0 ? "" : t2;
+	let t3;
+	if ($[2] !== current || $[3] !== href || $[4] !== onClick || $[5] !== section.label) {
+		t3 = /* @__PURE__ */ jsx(Toolbar.Link, {
+			current,
+			href,
+			onClick,
+			palette: "neutral",
+			children: section.label
+		});
+		$[2] = current;
+		$[3] = href;
+		$[4] = onClick;
+		$[5] = section.label;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/app/bar-start.tsx
+/**
+* Renders the start band of the bar's toolbar.
+*
+* @remarks
+*   The opener renders while the sidebar is beside the page, and while a sidebar shown only as a
+*   sheet lies over a narrow page. The brand is the toolbar's title, so the sections start a wider
+*   gap after it. The `brand` region renders in place of the logo and the name while a plugin fills
+*   it. A narrow bar moves the sections into its menu.
+* @returns The toolbar's start band.
+*/
+function BarStart(t0) {
+	const $ = c(14);
+	const { brand, links, logo, navigation, sections } = t0;
+	const { t } = useTranslation("host");
+	const branded = useSlot(hostContract.slots.brand).filled;
+	const overlaid = AppShell.useAppShellPanel("navigation")?.overlaid === true;
+	const opened = navigation === "body" || navigation === "sheet" && overlaid;
+	let t1;
+	if ($[0] !== opened || $[1] !== t) {
+		t1 = opened ? /* @__PURE__ */ jsx(Toolbar.Item, {
+			"aria-label": t("frame.navigation"),
+			as: Opener,
+			panel: "navigation",
+			side: "start"
+		}) : null;
+		$[0] = opened;
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== brand || $[4] !== branded || $[5] !== logo) {
+		t2 = brand ? /* @__PURE__ */ jsx(Toolbar.Title, { children: branded ? /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.brand }) : /* @__PURE__ */ jsx(Toolbar.Item, {
+			as: FrameBrand,
+			logo
+		}) }) : null;
+		$[3] = brand;
+		$[4] = branded;
+		$[5] = logo;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== links || $[8] !== sections) {
+		t3 = links ? sections.sections.map((section) => /* @__PURE__ */ jsx(SectionLink, {
+			current: section === sections.current,
+			section
+		}, section.routeId)) : null;
+		$[7] = links;
+		$[8] = sections;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Toolbar.Start, { children: [
+			t1,
+			t2,
+			t3
+		] });
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+//#endregion
+//#region src/app/mode.ts
+/**
+* Returns the attribute that renders a part in a colour mode, or none where the part takes the
+* page's mode.
+*
+* @remarks
+*   The theme writes every colour that differs between the modes as one `light-dark()` value. The
+*   browser evaluates it against the `color-scheme` of the element that uses it, so the mode
+*   attribute alone switches every colour inside the part.
+* @param mode - The part's colour mode. The page's where left out.
+*/
+function modeAttributes(mode) {
+	return mode === void 0 ? {} : { "data-color-mode": mode };
+}
+//#endregion
+//#region src/app/bar.tsx
+/**
+* Renders the bar as the shell's header, with the toolbar and the user menu in a row.
+*
+* @remarks
+*   Every control of the toolbar is an item of its row, so the row is one tab stop and the arrow
+*   keys move between the controls. A narrow toolbar moves the controls it folds into a menu behind
+*   an ellipsis at the end of the row. The user menu is a region of its own after the toolbar,
+*   because a plugin's menu there is no item of the row.
+* @returns The `header` element.
+*/
+function FrameBar(t0) {
+	const $ = c(26);
+	const { frame, panel, start, userMenu } = t0;
+	const { t } = useTranslation("host");
+	let t1;
+	if ($[0] !== frame.bar.mode) {
+		t1 = modeAttributes(frame.bar.mode);
+		$[0] = frame.bar.mode;
+		$[1] = t1;
+	} else t1 = $[1];
+	const mode = t1;
+	const t2 = frame.bar.sticky;
+	let t3;
+	if ($[2] !== t) {
+		t3 = t("frame.bar");
+		$[2] = t;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t) {
+		t4 = t("frame.more");
+		$[4] = t;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(EllipsisIcon, { "aria-hidden": true });
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== start) {
+		t6 = /* @__PURE__ */ jsx(BarStart, { ...start });
+		$[7] = start;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== frame.bar || $[10] !== panel) {
+		t7 = /* @__PURE__ */ jsx(BarEnd, {
+			bar: frame.bar,
+			panel
+		});
+		$[9] = frame.bar;
+		$[10] = panel;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t3 || $[13] !== t4 || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Toolbar.Root, {
+			"aria-label": t3,
+			more: t4,
+			moreIcon: t5,
+			size: "sm",
+			children: [t6, t7]
+		});
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== userMenu) {
+		t9 = userMenu ? /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.userMenu }) : null;
+		$[17] = userMenu;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t8 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Group, {
+			justify: "between",
+			children: [t8, t9]
+		});
+		$[19] = t8;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== frame.bar.sticky || $[23] !== mode || $[24] !== t10) {
+		t11 = /* @__PURE__ */ jsx(AppShell.Header, {
+			...mode,
+			sticky: t2,
+			children: t10
+		});
+		$[22] = frame.bar.sticky;
+		$[23] = mode;
+		$[24] = t10;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
+}
+//#endregion
+//#region src/app/panels.ts
+/**
+* Keeps a person's open state and width of each panel of the frame in the host's setting store,
+* and states the panel's options as the app shell takes them.
+*
+* @remarks
+*   A panel's choice is `{"open":false,"size":280}` under
+*   `stealth.<productId>.<subject>.frame.<panel>`, where the subject is the session's person and
+*   tenant, or `anyone` for a session nobody signed in to. The stored open state applies while the
+*   panel is beside the page, because the app shell keeps a sheet's state apart, so a phone opens
+*   with its sheets closed. Below the panel's `closedBelow` the panel starts closed for the visit,
+*   and its changes there leave the stored choice alone.
+*/
+/**
+* The narrowest width a resizable panel takes where its options state none, in pixels.
+*/
+const MIN_SIZE = 192;
+/**
+* Returns true for a plain object.
+*/
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* Returns true for a width in pixels.
+*/
+function isSize(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+/**
+* Returns the choice stored text contains, with the reason for each member it ignores.
+*
+* @param text - The stored text, or null where nothing is stored.
+*/
+function storedPanelOf(text) {
+	if (text === null) return {
+		dropped: [],
+		panel: {}
+	};
+	let parsed;
+	try {
+		parsed = JSON.parse(text);
+	} catch {
+		return {
+			dropped: ["the stored value is not JSON"],
+			panel: {}
+		};
+	}
+	if (!isRecord(parsed)) return {
+		dropped: ["the stored value is not an object"],
+		panel: {}
+	};
+	const { open, size } = parsed;
+	return {
+		dropped: [...open === void 0 || typeof open === "boolean" ? [] : ["open is not a boolean"], ...size === void 0 || isSize(size) ? [] : ["size is not a width in pixels"]],
+		panel: {
+			...typeof open === "boolean" ? { open } : {},
+			...isSize(size) ? { size } : {}
+		}
+	};
+}
+/**
+* Returns a panel's options as the app shell takes them.
+*
+* @param options - The panel's resolved options.
+*/
+function panelPropsOf(options) {
+	const { collapse, folds, foldsBelow, railWidth, resizable, shortcut, width } = options;
+	const sizes = typeof resizable === "object" ? resizable : {};
+	return {
+		collapse,
+		folds,
+		foldsBelow,
+		maxSize: sizes.max,
+		minSize: resizable === false ? void 0 : sizes.min ?? MIN_SIZE,
+		railWidth,
+		resizable: resizable !== false,
+		shortcut: shortcut === false ? void 0 : shortcut,
+		width
+	};
+}
+/**
+* Returns true while the window is narrower than a breakpoint, and false where none is given.
+*
+* @param breakpoint - The panel's `closedBelow`.
+*/
+function useBelow(breakpoint) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== breakpoint) {
+		t0 = { breakpoints: breakpoint === void 0 ? [] : [breakpoint] };
+		$[0] = breakpoint;
+		$[1] = t0;
+	} else t0 = $[1];
+	const at = useBreakpoint(t0);
+	return breakpoint !== void 0 && at !== breakpoint;
+}
+/**
+* Returns a panel's open state for the visit below `closedBelow`, which starts closed and closes
+* again each time the window narrows past the breakpoint.
+*
+* @remarks
+*   The hook keeps the window's side of the breakpoint with the state, and resets the state while
+*   it renders, so a panel never shows its earlier state for one frame.
+* @param below - True while the window is narrower than the panel's `closedBelow`.
+*/
+function useVisit(below) {
+	const $ = c(7);
+	let t0;
+	if ($[0] !== below) {
+		t0 = {
+			below,
+			open: false
+		};
+		$[0] = below;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [visit, setVisit] = useState(t0);
+	if (visit.below !== below) setVisit({
+		below,
+		open: false
+	});
+	const t1 = visit.below === below && visit.open;
+	let t2;
+	if ($[2] !== below) {
+		t2 = (open) => {
+			setVisit({
+				below,
+				open
+			});
+		};
+		$[2] = below;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = [t1, t2];
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/**
+* Returns the person's choice for a panel of the frame, and renders again when it changes in this
+* tab or another.
+*
+* @remarks
+*   The hook reports each member of a stored choice it ignores as `setting-dropped`, once per
+*   stored text. Below `closedBelow` the panel starts closed, and closes again each time the window
+*   narrows past the breakpoint.
+* @param name - The panel, whose name the stored choice's key contains.
+* @param options - The panel's resolved options.
+*/
+function usePanelChoice(name, options) {
+	const $ = c(31);
+	const { runtime } = useInternals();
+	const { report, settings } = runtime;
+	const t0 = `${subjectOf(useSession()) ?? "anyone"}.frame.${name}`;
+	let t1;
+	if ($[0] !== runtime.product.productId || $[1] !== t0) {
+		t1 = settingKey(runtime.product.productId, t0);
+		$[0] = runtime.product.productId;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	const key = t1;
+	let t2;
+	if ($[3] !== key || $[4] !== settings) {
+		t2 = () => settings.read(key);
+		$[3] = key;
+		$[4] = settings;
+		$[5] = t2;
+	} else t2 = $[5];
+	const read = t2;
+	let t3;
+	if ($[6] !== key || $[7] !== settings) {
+		t3 = (changed) => settings.subscribe(key, changed);
+		$[6] = key;
+		$[7] = settings;
+		$[8] = t3;
+	} else t3 = $[8];
+	const text = useSyncExternalStore(t3, read, read);
+	let t4;
+	if ($[9] !== text) {
+		t4 = storedPanelOf(text);
+		$[9] = text;
+		$[10] = t4;
+	} else t4 = $[10];
+	const stored = t4.panel;
+	const below = useBelow(options.closedBelow);
+	const [visited, setVisited] = useVisit(below);
+	let t5;
+	let t6;
+	if ($[11] !== key || $[12] !== report || $[13] !== text) {
+		t5 = () => {
+			for (const reason of storedPanelOf(text).dropped) report({
+				key,
+				kind: "setting-dropped",
+				reason
+			});
+		};
+		t6 = [
+			key,
+			report,
+			text
+		];
+		$[11] = key;
+		$[12] = report;
+		$[13] = text;
+		$[14] = t5;
+		$[15] = t6;
+	} else {
+		t5 = $[14];
+		t6 = $[15];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[16] !== key || $[17] !== settings || $[18] !== stored) {
+		t7 = (change) => {
+			settings.write(key, JSON.stringify({
+				...stored,
+				...change
+			}));
+		};
+		$[16] = key;
+		$[17] = settings;
+		$[18] = stored;
+		$[19] = t7;
+	} else t7 = $[19];
+	const write = t7;
+	let t8;
+	if ($[20] !== below || $[21] !== setVisited || $[22] !== write) {
+		t8 = (open) => {
+			if (below) setVisited(open);
+			else write({ open });
+		};
+		$[20] = below;
+		$[21] = setVisited;
+		$[22] = write;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== write) {
+		t9 = (size) => {
+			write({ size });
+		};
+		$[24] = write;
+		$[25] = t9;
+	} else t9 = $[25];
+	const t10 = below ? visited : stored.open ?? options.defaultOpen;
+	let t11;
+	if ($[26] !== stored.size || $[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
+		t11 = {
+			onOpenChange: t8,
+			onSizeChange: t9,
+			open: t10,
+			size: stored.size
+		};
+		$[26] = stored.size;
+		$[27] = t10;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
+}
+//#endregion
+//#region src/app/targets.ts
+/**
+* Names the elements the frame's skip links move focus to.
+*/
+/**
+* Id of the main region, the first skip link's target.
+*/
+const MAIN = "frame-main";
+/**
+* Id of the sidebar.
+*/
+const NAVIGATION = "frame-navigation";
+/**
+* Id of the content of the panel at the end side that renders the `aside` region.
+*/
+const ASIDE = "frame-aside";
+/**
+* Id of the content of the panel at the end side that renders the `panel` region.
+*/
+const PANEL = "frame-panel";
+//#endregion
+//#region src/app/end-panel.tsx
+/**
+* The id of each panel's content, which its skip link moves focus to.
+*/
+const TARGETS = {
+	aside: ASIDE,
+	panel: PANEL
+};
+/**
+* Renders the region in the shell's end panel of the same name, a complementary landmark named in
+* the host's words.
+*
+* @remarks
+*   The panel keeps the person's choice of its open state and width. The two end panels take
+*   distinct names, so a screen reader tells their landmarks apart.
+* @returns The strip on the panel's edge where its options keep one, and the panel.
+*/
+function EndPanel(t0) {
+	const $ = c(26);
+	const { name, options } = t0;
+	const { t } = useTranslation("host");
+	const choice = usePanelChoice(name, options);
+	let t1;
+	if ($[0] !== options.mode) {
+		t1 = modeAttributes(options.mode);
+		$[0] = options.mode;
+		$[1] = t1;
+	} else t1 = $[1];
+	const mode = t1;
+	let t2;
+	if ($[2] !== name || $[3] !== options.edge || $[4] !== t) {
+		t2 = options.edge ? /* @__PURE__ */ jsx(AppShell.Rail, {
+			closeLabel: t(`frame.edge.close.${name}`),
+			openLabel: t(`frame.edge.open.${name}`),
+			panel: name,
+			resizeLabel: t(`frame.edge.resize.${name}`)
+		}) : null;
+		$[2] = name;
+		$[3] = options.edge;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== options) {
+		t3 = panelPropsOf(options);
+		$[6] = options;
+		$[7] = t3;
+	} else t3 = $[7];
+	const t4 = `frame.${name}`;
+	let t5;
+	if ($[8] !== t || $[9] !== t4) {
+		t5 = t(t4);
+		$[8] = t;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const t6 = TARGETS[name];
+	const t7 = hostContract.slots[name];
+	let t8;
+	if ($[11] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Slot, { slot: t7 });
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== t6 || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(SkipNav.Target, {
+			id: t6,
+			children: t8
+		});
+		$[13] = t6;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== choice || $[17] !== mode || $[18] !== name || $[19] !== t3 || $[20] !== t5 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(AppShell.Aside, {
+			...t3,
+			...choice,
+			...mode,
+			"aria-label": t5,
+			name,
+			children: t9
+		});
+		$[16] = choice;
+		$[17] = mode;
+		$[18] = name;
+		$[19] = t3;
+		$[20] = t5;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t2) {
+		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t10] });
+		$[23] = t10;
+		$[24] = t2;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
+}
+//#endregion
+//#region src/app/entry-icon.tsx
+/**
+* Returns an icon's data as lucide's component takes it, with each element keyed by its position.
+*
+* @remarks
+*   The component renders the elements as one list of children. The `lucide` package writes no
+*   key into an icon's data, and the elements of an icon never change order.
+*/
+function iconNodeOf(icon) {
+	return icon.map(([tag, attributes], index) => {
+		return [tag, {
+			...attributes,
+			key: String(index)
+		}];
+	});
+}
+/**
+* Renders the entry's icon from lucide's data, or the initials of its text in an avatar where the
+* row needs a mark, or nothing.
+*
+* @remarks
+*   Both are hidden from assistive technology, because the entry's text names the row. A list
+*   collapsed to a rail keeps either visible in place of the text.
+* @returns The `svg` element, the mark with the avatar, or nothing.
+*/
+function EntryIcon(t0) {
+	const $ = c(7);
+	const { entry, marked } = t0;
+	if (entry.icon !== void 0) {
+		let t1;
+		if ($[0] !== entry.icon) {
+			t1 = iconNodeOf(entry.icon);
+			$[0] = entry.icon;
+			$[1] = t1;
+		} else t1 = $[1];
+		let t2;
+		if ($[2] !== t1) {
+			t2 = /* @__PURE__ */ jsx(lucide.Icon, {
+				"aria-hidden": true,
+				iconNode: t1
+			});
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	if (!marked) return null;
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Avatar.Fallback, {});
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== entry.label) {
+		t2 = /* @__PURE__ */ jsx(NavList.Mark, { children: /* @__PURE__ */ jsx(Avatar.Root, {
+			name: entry.label,
+			shape: "rounded",
+			size: "2xs",
+			children: t1
+		}) });
+		$[5] = entry.label;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+//#region src/app/nested.ts
+/**
+* Returns true for an entry whose route's parent the menu lists.
+*/
+function isNested(entry, listed) {
+	return entry.parent !== void 0 && listed.has(entry.parent);
+}
+/**
+* Returns the entries of a menu whose routes' parents the menu does not list, in menu order.
+*/
+function topOf(entries) {
+	const listed = new Set(entries.map(({ routeId }) => routeId));
+	return entries.filter((entry) => !isNested(entry, listed));
+}
+/**
+* Returns a menu's entries as a tree: each entry under the entry of its route's parent where the
+* menu lists that parent, and at the top level otherwise.
+*
+* @remarks
+*   Every level keeps the menu's order.
+*/
+function nestedOf(entries) {
+	/**
+	* Returns the entries whose routes nest under a route, each with its own children.
+	*/
+	const under = (routeId) => entries.filter(({ parent }) => parent === routeId).map((entry) => ({
+		children: under(entry.routeId),
+		entry
+	}));
+	return topOf(entries).map((entry) => ({
+		children: under(entry.routeId),
+		entry
+	}));
+}
+//#endregion
+//#region src/app/sections.ts
+/**
+* Reads the sections of the main menu and the section the page on screen belongs to.
+*/
+/**
+* Returns true where an address is an entry's own address or an address below it.
+*
+* @param href - The entry's address.
+* @param pathname - The address on screen.
+*/
+function isWithin(href, pathname) {
+	return pathname === href || pathname.startsWith(href.endsWith("/") ? href : `${href}/`);
+}
+/**
+* Returns the section a page belongs to: the section whose address is the longest prefix of the
+* page's address, else the first section of the page's plugin.
+*
+* @param sections - The sections, in menu order.
+* @param pathname - The page's address.
+* @param plugin - Id of the plugin that declares the page's route. Absent on a page no plugin
+*   declares.
+*/
+function currentOf(sections, pathname, plugin) {
+	return sections.filter(({ href }) => isWithin(href, pathname)).toSorted((one, other) => other.href.length - one.href.length)[0] ?? sections.find((section) => section.plugin === plugin);
+}
+/**
+* Returns the main menu's entries, its sections and the current section, and renders again when
+* the address or an entry changes.
+*
+* @remarks
+*   A settings page belongs to the plugin that declares it, so a section's settings pages keep the
+*   section current.
+*/
+function useSections() {
+	const $ = c(5);
+	const entries = useNavigation();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp$1 };
+		$[0] = t0;
+	} else t0 = $[0];
+	const pathname = useLocation(t0);
+	const routeId = useDeclaredRoute()?.id;
+	const plugin = useResolvedProduct().routes.find((t1) => {
+		const { id } = t1;
+		return id === routeId;
+	})?.plugin;
+	const sections = topOf(entries);
+	const t2 = currentOf(sections, pathname, plugin);
+	let t3;
+	if ($[1] !== entries || $[2] !== sections || $[3] !== t2) {
+		t3 = {
+			current: t2,
+			entries,
+			sections
+		};
+		$[1] = entries;
+		$[2] = sections;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+function _temp$1(location) {
+	return location.pathname;
+}
+//#endregion
+//#region src/app/entry-row.tsx
+/**
+* Renders a row's link as the router's link, current on its page.
+*/
+const EntryLink = createLink(NavList.Link);
+/**
+* Renders the entry's link as a row, or a branch that opens the entries nested under it.
+*
+* @remarks
+*   A branch's trigger names the entry, and its first row opens the entry's own page, which is
+*   current on that page alone. A branch starts open while the address is inside the entry. A
+*   nested row renders its icon and no initials. A link names itself in a tooltip while its list is
+*   collapsed to a rail. The router's link passes its children to the element as one list, so the
+*   mark and the text are one fragment, which adds no element between the link and them.
+* @returns The `li` element of the row or the branch.
+*/
+function EntryRow(t0) {
+	const $ = c(40);
+	const { marked, nested } = t0;
+	const { children, entry } = nested;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { select: _temp };
+		$[0] = t1;
+	} else t1 = $[0];
+	const pathname = useLocation(t1);
+	if (children.length === 0) {
+		let t2;
+		if ($[1] !== entry || $[2] !== marked) {
+			t2 = /* @__PURE__ */ jsx(EntryIcon, {
+				entry,
+				marked
+			});
+			$[1] = entry;
+			$[2] = marked;
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== entry.label) {
+			t3 = /* @__PURE__ */ jsx("span", { children: entry.label });
+			$[4] = entry.label;
+			$[5] = t3;
+		} else t3 = $[5];
+		let t4;
+		if ($[6] !== t2 || $[7] !== t3) {
+			t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
+			$[6] = t2;
+			$[7] = t3;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== entry.href || $[10] !== entry.label || $[11] !== t4) {
+			t5 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsx(EntryLink, {
+				to: entry.href,
+				tooltip: entry.label,
+				children: t4
+			}) });
+			$[9] = entry.href;
+			$[10] = entry.label;
+			$[11] = t4;
+			$[12] = t5;
+		} else t5 = $[12];
+		return t5;
+	}
+	let t2;
+	if ($[13] !== entry.href || $[14] !== pathname) {
+		t2 = isWithin(entry.href, pathname);
+		$[13] = entry.href;
+		$[14] = pathname;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== entry || $[17] !== marked) {
+		t3 = /* @__PURE__ */ jsx(EntryIcon, {
+			entry,
+			marked
+		});
+		$[16] = entry;
+		$[17] = marked;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== entry.label) {
+		t4 = /* @__PURE__ */ jsx("span", { children: entry.label });
+		$[19] = entry.label;
+		$[20] = t4;
+	} else t4 = $[20];
+	let t5;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(NavList.Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		}) });
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== t3 || $[23] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(NavList.Trigger, { children: [
+			t3,
+			t4,
+			t5
+		] });
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { exact: true };
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== entry.label) {
+		t8 = /* @__PURE__ */ jsx("span", { children: entry.label });
+		$[26] = entry.label;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== entry.href || $[29] !== t8) {
+		t9 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsx(EntryLink, {
+			activeOptions: t7,
+			to: entry.href,
+			children: t8
+		}) });
+		$[28] = entry.href;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	let t10;
+	if ($[31] !== children) {
+		t10 = children.map(_temp2);
+		$[31] = children;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== t10 || $[34] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(NavList.Content, { children: [t9, t10] });
+		$[33] = t10;
+		$[34] = t9;
+		$[35] = t11;
+	} else t11 = $[35];
+	let t12;
+	if ($[36] !== t11 || $[37] !== t2 || $[38] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(NavList.Branch, {
+			defaultOpen: t2,
+			children: [t6, t11]
+		});
+		$[36] = t11;
+		$[37] = t2;
+		$[38] = t6;
+		$[39] = t12;
+	} else t12 = $[39];
+	return t12;
+}
+function _temp2(child) {
+	return /* @__PURE__ */ jsx(EntryRow, {
+		marked: false,
+		nested: child
+	}, child.entry.routeId);
+}
+function _temp(location) {
+	return location.pathname;
+}
+//#endregion
+//#region src/app/menu-block.tsx
+/**
+* Renders the menu's entries the person may open in a nav block, or nothing where it lists none.
+*
+* @returns The `nav` element, or nothing.
+*/
+function MenuBlock(t0) {
+	const $ = c(22);
+	const { label, marked, menu, plugin } = t0;
+	const t1 = useNavigation(menu);
+	let T0;
+	let T1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== label || $[1] !== marked || $[2] !== plugin || $[3] !== t1) {
+		t4 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let t5;
+			if ($[9] !== plugin) {
+				t5 = (entry) => plugin === void 0 || entry.plugin === plugin;
+				$[9] = plugin;
+				$[10] = t5;
+			} else t5 = $[10];
+			const entries = t1.filter(t5);
+			if (entries.length === 0) {
+				t4 = null;
+				break bb0;
+			}
+			T1 = Sidebar.Nav;
+			if ($[11] !== label) {
+				t3 = /* @__PURE__ */ jsx(Sidebar.NavLabel, { children: label });
+				$[11] = label;
+				$[12] = t3;
+			} else t3 = $[12];
+			T0 = NavList.Root;
+			let t6;
+			if ($[13] !== marked) {
+				t6 = (nested) => /* @__PURE__ */ jsx(EntryRow, {
+					marked,
+					nested
+				}, nested.entry.routeId);
+				$[13] = marked;
+				$[14] = t6;
+			} else t6 = $[14];
+			t2 = nestedOf(entries).map(t6);
+		}
+		$[0] = label;
+		$[1] = marked;
+		$[2] = plugin;
+		$[3] = t1;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	let t5;
+	if ($[15] !== T0 || $[16] !== t2) {
+		t5 = /* @__PURE__ */ jsx(T0, { children: t2 });
+		$[15] = T0;
+		$[16] = t2;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== T1 || $[19] !== t3 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T1, { children: [t3, t5] });
+		$[18] = T1;
+		$[19] = t3;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+//#endregion
+//#region src/app/section-row.tsx
+/**
+* Renders the section's link with its icon or initials, current where the page belongs to the
+* section.
+*
+* @remarks
+*   The link is current on every page of the section's plugin that no other section contains, such
+*   as its settings pages, so it reads the frame's current section and not the router's match. The
+*   router's link props open the section without a reload and leave a press with a modifier key to
+*   the browser. A list collapsed to a rail names the link in a tooltip.
+* @returns The `li` element of the row.
+*/
+function SectionRow(t0) {
+	const $ = c(13);
+	const { current, section } = t0;
+	let t1;
+	if ($[0] !== section.href) {
+		t1 = { to: section.href };
+		$[0] = section.href;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { href: t2, onClick } = useLinkProps(t1);
+	const href = t2 === void 0 ? "" : t2;
+	const t3 = current ? "page" : void 0;
+	let t4;
+	if ($[2] !== section) {
+		t4 = /* @__PURE__ */ jsx(EntryIcon, {
+			entry: section,
+			marked: true
+		});
+		$[2] = section;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== section.label) {
+		t5 = /* @__PURE__ */ jsx("span", { children: section.label });
+		$[4] = section.label;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== href || $[7] !== onClick || $[8] !== section.label || $[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			"aria-current": t3,
+			href,
+			onClick,
+			tooltip: section.label,
+			children: [t4, t5]
+		}) });
+		$[6] = href;
+		$[7] = onClick;
+		$[8] = section.label;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+//#endregion
+//#region src/app/rail.tsx
+/**
+* The rail's width where its options state none: the theme's rail.
+*/
+const RAIL_WIDTH = "var(--sizes-rail)";
+/**
+* Renders the rail as the shell's start panel named `rail`, with an iconic sidebar of the
+* sections.
+*
+* @remarks
+*   Each section is a square with its icon or initials, named in a tooltip, and the current one is
+*   marked. Picking a section opens its first page, and the sidebar follows the address. The rail
+*   keeps the person's choice of its open state and width.
+* @returns The panel, and the strip on its edge where its options keep one.
+*/
+function FrameRail(t0) {
+	const $ = c(34);
+	const { brand, current, logo, options, sections } = t0;
+	const { t } = useTranslation("host");
+	const choice = usePanelChoice("rail", options);
+	let t1;
+	if ($[0] !== options.mode) {
+		t1 = modeAttributes(options.mode);
+		$[0] = options.mode;
+		$[1] = t1;
+	} else t1 = $[1];
+	const mode = t1;
+	let t2;
+	if ($[2] !== options) {
+		t2 = panelPropsOf(options);
+		$[2] = options;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = options.width ?? RAIL_WIDTH;
+	let t4;
+	if ($[4] !== brand || $[5] !== logo) {
+		t4 = brand ? /* @__PURE__ */ jsx(Sidebar.Header, { children: /* @__PURE__ */ jsx(FrameBrand, {
+			compact: true,
+			logo
+		}) }) : null;
+		$[4] = brand;
+		$[5] = logo;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("frame.sections");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== current || $[10] !== sections) {
+		let t7;
+		if ($[12] !== current) {
+			t7 = (section) => /* @__PURE__ */ jsx(SectionRow, {
+				current: section === current,
+				section
+			}, section.routeId);
+			$[12] = current;
+			$[13] = t7;
+		} else t7 = $[13];
+		t6 = sections.map(t7);
+		$[9] = current;
+		$[10] = sections;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(NavList.Root, { children: t6 });
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t5 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Sidebar.Content, { children: /* @__PURE__ */ jsx(Sidebar.Nav, {
+			"aria-label": t5,
+			children: t7
+		}) });
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t4 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Sidebar.Root, {
+			iconic: true,
+			children: [t4, t8]
+		});
+		$[19] = t4;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== choice || $[23] !== mode || $[24] !== t2 || $[25] !== t3 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsx(AppShell.Navbar, {
+			...t2,
+			...choice,
+			...mode,
+			name: "rail",
+			width: t3,
+			children: t9
+		});
+		$[22] = choice;
+		$[23] = mode;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== options.edge || $[29] !== t) {
+		t11 = options.edge ? /* @__PURE__ */ jsx(AppShell.Rail, {
+			closeLabel: t("frame.edge.close.rail"),
+			openLabel: t("frame.edge.open.rail"),
+			panel: "rail",
+			resizeLabel: t("frame.edge.resize.rail")
+		}) : null;
+		$[28] = options.edge;
+		$[29] = t;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== t10 || $[32] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
+		$[31] = t10;
+		$[32] = t11;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
+}
+//#endregion
+//#region src/app/section-nav.tsx
+/**
+* Renders a block per menu the plugin declares, the `navigation` region with the plugin's
+* extensions alone, and a block of the plugin's settings pages.
+*
+* @remarks
+*   Each menu's label is a key of its plugin's catalogue. A menu that lists no page the person may
+*   open renders nothing.
+* @returns The blocks, in that order.
+*/
+function SectionNavigation(t0) {
+	const $ = c(17);
+	const { marked, plugin, settings } = t0;
+	const product = useResolvedProduct();
+	const listed = useListed();
+	const { i18n, t } = useTranslation("host");
+	let t1;
+	if ($[0] !== i18n || $[1] !== listed || $[2] !== marked || $[3] !== plugin || $[4] !== product) {
+		const words = pluginWordsOf(i18n);
+		t1 = menusOf(product, listed, plugin).map((menu) => /* @__PURE__ */ jsx(MenuBlock, {
+			label: words.t(menu.plugin, menu.label),
+			marked,
+			menu: {
+				id: menu.id,
+				kind: "menu"
+			}
+		}, menu.id));
+		$[0] = i18n;
+		$[1] = listed;
+		$[2] = marked;
+		$[3] = plugin;
+		$[4] = product;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== plugin) {
+		t2 = /* @__PURE__ */ jsx(Slot, {
+			plugin,
+			slot: hostContract.slots.navigation
+		});
+		$[6] = plugin;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== marked || $[9] !== plugin || $[10] !== settings || $[11] !== t) {
+		t3 = settings ? /* @__PURE__ */ jsx(MenuBlock, {
+			label: t("settings.title"),
+			marked,
+			menu: hostContract.menus.settings,
+			plugin
+		}) : null;
+		$[8] = marked;
+		$[9] = plugin;
+		$[10] = settings;
+		$[11] = t;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t1,
+			t2,
+			t3
+		] });
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+}
+//#endregion
+//#region src/app/sheet-sections.tsx
+/**
+* Renders a block of the sections while the sidebar lies over the page, and nothing beside it.
+*
+* @remarks
+*   The rail hides below its fold, and a frame with more sections than a dock takes lists them in
+*   the sheet, as a sidebar block above the section's navigation.
+* @returns The `nav` element, or nothing.
+*/
+function SheetSections(t0) {
+	const $ = c(14);
+	const { sections } = t0;
+	const { t } = useTranslation("host");
+	const { overlaid } = AppShell.useNearestPanel();
+	if (!overlaid) return null;
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("frame.sections");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Sidebar.NavLabel, { children: t1 });
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== sections.current || $[5] !== sections.sections) {
+		let t4;
+		if ($[7] !== sections.current) {
+			t4 = (section) => /* @__PURE__ */ jsx(SectionRow, {
+				current: section === sections.current,
+				section
+			}, section.routeId);
+			$[7] = sections.current;
+			$[8] = t4;
+		} else t4 = $[8];
+		t3 = sections.sections.map(t4);
+		$[4] = sections.current;
+		$[5] = sections.sections;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(NavList.Root, { children: t3 });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t2 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Sidebar.Nav, { children: [t2, t4] });
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+//#endregion
+//#region src/app/sidebar-header.tsx
+/**
+* Renders the sidebar's header, or nothing where it has neither the brand nor a search.
+*
+* @remarks
+*   The search filters the rows of every block, and its shortcut moves focus to the field with the
+*   platform's modifier pressed.
+* @returns The header, or nothing.
+*/
+function SidebarHeader(t0) {
+	const $ = c(9);
+	const { brand, logo, search } = t0;
+	const { t } = useTranslation("host");
+	if (!brand && search === false) return null;
+	let t1;
+	if ($[0] !== brand || $[1] !== logo) {
+		t1 = brand ? /* @__PURE__ */ jsx(FrameBrand, { logo }) : null;
+		$[0] = brand;
+		$[1] = logo;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== search || $[4] !== t) {
+		t2 = search === false ? null : /* @__PURE__ */ jsx(Sidebar.Search, {
+			"aria-label": t("frame.find"),
+			clearIndicator: /* @__PURE__ */ jsx(XIcon, {}),
+			clearLabel: t("frame.clear"),
+			placeholder: t("frame.find"),
+			searchIndicator: /* @__PURE__ */ jsx(SearchIcon, {}),
+			shortcut: search.shortcut
+		});
+		$[3] = search;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Sidebar.Header, { children: [t1, t2] });
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+//#region src/app/sidebar.tsx
+/**
+* Renders the sidebar as the shell's start panel named `navigation`.
+*
+* @remarks
+*   The sidebar keeps the person's choice of its open state and width. The sidebar's root is the
+*   target of the skip link to the navigation. A sidebar shown only as a sheet is always closed
+*   beside the page. It has neither a shortcut nor a strip on its edge.
+* @returns The panel, and the strip on its edge where its options keep one.
+*/
+function FrameSidebar(props) {
+	const $ = c(38);
+	const { brand, children, logo, options, shown, userMenu } = props;
+	const { t } = useTranslation("host");
+	const choice = usePanelChoice("sidebar", options);
+	let t0;
+	if ($[0] !== options.mode) {
+		t0 = modeAttributes(options.mode);
+		$[0] = options.mode;
+		$[1] = t0;
+	} else t0 = $[1];
+	const mode = t0;
+	let t1;
+	if ($[2] !== options) {
+		t1 = panelPropsOf(options);
+		$[2] = options;
+		$[3] = t1;
+	} else t1 = $[3];
+	const panel = t1;
+	let t2;
+	if ($[4] !== options.search) {
+		t2 = options.search === true ? {} : options.search;
+		$[4] = options.search;
+		$[5] = t2;
+	} else t2 = $[5];
+	const search = t2;
+	const t3 = shown && choice.open;
+	const t4 = shown ? panel.shortcut : void 0;
+	let t5;
+	if ($[6] !== brand || $[7] !== logo || $[8] !== search) {
+		t5 = /* @__PURE__ */ jsx(SidebarHeader, {
+			brand,
+			logo,
+			search
+		});
+		$[6] = brand;
+		$[7] = logo;
+		$[8] = search;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== search || $[11] !== t) {
+		t6 = search === false ? null : /* @__PURE__ */ jsx(Sidebar.Empty, { children: t("frame.empty") });
+		$[10] = search;
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== children || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Sidebar.Content, { children: [children, t6] });
+		$[13] = children;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== userMenu) {
+		t8 = userMenu ? /* @__PURE__ */ jsx(Sidebar.Footer, { children: /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.userMenu }) }) : null;
+		$[16] = userMenu;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== options.look || $[19] !== options.size || $[20] !== t5 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Sidebar.Root, {
+			id: NAVIGATION,
+			size: options.size,
+			tabIndex: -1,
+			variant: options.look,
+			children: [
+				t5,
+				t7,
+				t8
+			]
+		});
+		$[18] = options.look;
+		$[19] = options.size;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== choice || $[25] !== mode || $[26] !== panel || $[27] !== t3 || $[28] !== t4 || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsx(AppShell.Navbar, {
+			...panel,
+			...choice,
+			...mode,
+			name: "navigation",
+			open: t3,
+			shortcut: t4,
+			children: t9
+		});
+		$[24] = choice;
+		$[25] = mode;
+		$[26] = panel;
+		$[27] = t3;
+		$[28] = t4;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== options.edge || $[32] !== shown || $[33] !== t) {
+		t11 = options.edge && shown ? /* @__PURE__ */ jsx(AppShell.Rail, {
+			closeLabel: t("frame.edge.close.navigation"),
+			openLabel: t("frame.edge.open.navigation"),
+			panel: "navigation",
+			resizeLabel: t("frame.edge.resize.navigation")
+		}) : null;
+		$[31] = options.edge;
+		$[32] = shown;
+		$[33] = t;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== t10 || $[36] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+	} else t12 = $[37];
+	return t12;
+}
+//#endregion
+//#region src/app/start-panels.tsx
+/**
+* Renders the rail and the sidebar the layout calls for.
+*
+* @remarks
+*   The `sidebar` layout's sidebar lists the main menu as its first block, then every plugin's
+*   navigation. The `split` and `rail` layouts' sidebar lists the current section's navigation,
+*   after the sections where its sheet lists them on a narrow page. A top-level entry without an
+*   icon renders its initials in the main menu, and in a sidebar that closes to its icons.
+*/
+function StartPanels(t0) {
+	const $ = c(20);
+	const { model } = t0;
+	const { frame, parts, sections } = model;
+	const { t } = useTranslation("host");
+	const scoped = frame.layout !== "sidebar";
+	const marked = frame.sidebar.collapse === "icons";
+	let t1;
+	if ($[0] !== frame.bar || $[1] !== frame.rail || $[2] !== parts.brand || $[3] !== parts.rail || $[4] !== sections) {
+		t1 = parts.rail ? /* @__PURE__ */ jsx(FrameRail, {
+			brand: parts.brand === "rail",
+			current: sections.current,
+			logo: frame.bar.logo,
+			options: frame.rail,
+			sections: sections.sections
+		}) : null;
+		$[0] = frame.bar;
+		$[1] = frame.rail;
+		$[2] = parts.brand;
+		$[3] = parts.rail;
+		$[4] = sections;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== frame.bar || $[7] !== frame.sidebar || $[8] !== marked || $[9] !== parts.brand || $[10] !== parts.sheetSections || $[11] !== parts.sidebar || $[12] !== parts.userMenu || $[13] !== scoped || $[14] !== sections || $[15] !== t) {
+		t2 = parts.sidebar === "none" ? null : /* @__PURE__ */ jsxs(FrameSidebar, {
+			brand: parts.brand === "sidebar",
+			logo: frame.bar.logo,
+			options: frame.sidebar,
+			shown: parts.sidebar === "body",
+			userMenu: parts.userMenu === "sidebar",
+			children: [
+				parts.sheetSections ? /* @__PURE__ */ jsx(SheetSections, { sections }) : null,
+				scoped ? null : /* @__PURE__ */ jsx(MenuBlock, {
+					label: t("frame.menu"),
+					marked: true,
+					menu: hostContract.menus.main
+				}),
+				parts.sidebar === "body" ? /* @__PURE__ */ jsx(SectionNavigation, {
+					marked,
+					plugin: scoped ? sections.current?.plugin : void 0,
+					settings: frame.sidebar.settings
+				}) : null
+			]
+		});
+		$[6] = frame.bar;
+		$[7] = frame.sidebar;
+		$[8] = marked;
+		$[9] = parts.brand;
+		$[10] = parts.sheetSections;
+		$[11] = parts.sidebar;
+		$[12] = parts.userMenu;
+		$[13] = scoped;
+		$[14] = sections;
+		$[15] = t;
+		$[16] = t2;
+	} else t2 = $[16];
+	let t3;
+	if ($[17] !== t1 || $[18] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	return t3;
+}
+//#endregion
+//#region src/app/body.tsx
+/**
+* Renders the shell's body around the page the router matched.
+*
+* @remarks
+*   The main region is the first skip link's target. With the bar beside the start panels, a pane
+*   contains the bar, the main region and the footer, so the start panels run the full height of
+*   the window. The aside renders before the panel at the end side.
+*/
+function FrameBody(t0) {
+	const $ = c(19);
+	const { bar, model } = t0;
+	const { frame, parts } = model;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AppShell.Main, {
+			id: MAIN,
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx(HostContent, {})
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	const main = t1;
+	let t2;
+	if ($[1] !== model) {
+		t2 = /* @__PURE__ */ jsx(StartPanels, { model });
+		$[1] = model;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== bar || $[4] !== frame.bar.placement || $[5] !== frame.footer || $[6] !== parts.footer) {
+		t3 = frame.bar.placement === "beside" ? /* @__PURE__ */ jsxs(AppShell.Pane, { children: [
+			/* @__PURE__ */ jsx(FrameBar, { ...bar }),
+			main,
+			parts.footer ? /* @__PURE__ */ jsx(AppShell.Footer, {
+				sticky: frame.footer.sticky,
+				children: /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.footer })
+			}) : null
+		] }) : main;
+		$[3] = bar;
+		$[4] = frame.bar.placement;
+		$[5] = frame.footer;
+		$[6] = parts.footer;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== frame.aside || $[9] !== parts.aside) {
+		t4 = parts.aside ? /* @__PURE__ */ jsx(EndPanel, {
+			name: "aside",
+			options: frame.aside
+		}) : null;
+		$[8] = frame.aside;
+		$[9] = parts.aside;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== frame.panel || $[12] !== parts.panel) {
+		t5 = parts.panel ? /* @__PURE__ */ jsx(EndPanel, {
+			name: "panel",
+			options: frame.panel
+		}) : null;
+		$[11] = frame.panel;
+		$[12] = parts.panel;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(AppShell.Body, { children: [
+			t2,
+			t3,
+			t4,
+			t5
+		] });
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+//#endregion
+//#region src/app/dock.tsx
+/**
+* Renders the sections as a dock in a footer that pins to the bottom of a narrow window.
+*
+* @remarks
+*   The footer renders below the `md` breakpoint alone, where the rail hides, and it is the last
+*   bar of the shell, after the footer region and the status bar.
+* @returns The `footer` element, or nothing at a width the footer leaves out.
+*/
+function FrameDock(t0) {
+	const $ = c(12);
+	const { sections } = t0;
+	const { t } = useTranslation("host");
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("frame.sections");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== sections.current || $[3] !== sections.sections) {
+		let t3;
+		if ($[5] !== sections.current) {
+			t3 = (section) => /* @__PURE__ */ jsx(SectionRow, {
+				current: section === sections.current,
+				section
+			}, section.routeId);
+			$[5] = sections.current;
+			$[6] = t3;
+		} else t3 = $[6];
+		t2 = sections.sections.map(t3);
+		$[2] = sections.current;
+		$[3] = sections.sections;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(NavList.Root, {
+			variant: "dock",
+			children: t2
+		});
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t1 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(AppShell.Footer, {
+			sticky: true,
+			when: "narrow",
+			children: /* @__PURE__ */ jsx("nav", {
+				"aria-label": t1,
+				children: t3
+			})
+		});
+		$[9] = t1;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+//#endregion
+//#region src/app/foot.tsx
+/**
+* Renders the footer region, the status region and the dock, each while it renders, in that
+* order, so the dock is the last bar of a phone's window.
+*
+* @remarks
+*   The footer renders here while the bar is across the top, and in the pane while the bar is
+*   beside the start panels. The status bar's name is the key the frame states in the product's
+*   catalogue, and the host's word where it states none.
+* @returns The bars.
+*/
+function FrameFoot(t0) {
+	const $ = c(17);
+	const { model } = t0;
+	const { frame, parts, sections } = model;
+	const { productId } = useResolvedProduct();
+	const { i18n, t } = useTranslation("host");
+	const { label } = frame.status;
+	let t1;
+	if ($[0] !== frame.bar.placement || $[1] !== frame.footer || $[2] !== parts.footer) {
+		t1 = frame.bar.placement === "across" && parts.footer ? /* @__PURE__ */ jsx(AppShell.Footer, {
+			sticky: frame.footer.sticky,
+			children: /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.footer })
+		}) : null;
+		$[0] = frame.bar.placement;
+		$[1] = frame.footer;
+		$[2] = parts.footer;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== i18n || $[5] !== label || $[6] !== parts.status || $[7] !== productId || $[8] !== t) {
+		t2 = parts.status ? /* @__PURE__ */ jsx(AppShell.Status, {
+			label: label === void 0 ? t("frame.status") : pluginWordsOf(i18n).t(productId, label),
+			children: /* @__PURE__ */ jsx(Slot, { slot: hostContract.slots.status })
+		}) : null;
+		$[4] = i18n;
+		$[5] = label;
+		$[6] = parts.status;
+		$[7] = productId;
+		$[8] = t;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== parts.dock || $[11] !== sections) {
+		t3 = parts.dock ? /* @__PURE__ */ jsx(FrameDock, { sections }) : null;
+		$[10] = parts.dock;
+		$[11] = sections;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t1,
+			t2,
+			t3
+		] });
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+}
+//#endregion
+//#region src/app/parts.ts
+/**
+* Decides which parts of the frame render for the page on screen.
+*
+* @remarks
+*   A region nobody fills renders no part of the shell. A rail and a dock list two sections or
+*   more, and a dock five at most, as a navigation bar takes three to five destinations. In the
+*   `rail` layout without a dock, a narrow window lists the sections in the sidebar's sheet.
+*/
+/**
+* The fewest sections a rail or a dock lists.
+*/
+const FEWEST = 2;
+/**
+* The most sections a dock lists.
+*/
+const MOST = 5;
+/**
+* Returns true where the sidebar has a block to list: a menu, an extension in the `navigation`
+* region, or a settings page.
+*/
+function listsBlocks(frame, sections, listing) {
+	const { navigation, plugin, product, routes } = listing;
+	const scoped = frame.layout !== "sidebar";
+	if (scoped && plugin === void 0) return false;
+	return navigation || menusOf(product, routes, plugin).length > 0 || frame.sidebar.settings && settingsListed(product, routes, plugin) || !scoped && sections.entries.length > 0;
+}
+/**
+* Returns how the sidebar renders.
+*
+* @param frame - The resolved frame.
+* @param blocks - True where the sidebar has a block to list.
+* @param sheetSections - True where the sidebar's sheet lists the sections.
+*/
+function sidebarOf(frame, blocks, sheetSections) {
+	if (frame.layout === "stacked") return "none";
+	if (blocks) return "body";
+	return sheetSections ? "sheet" : "none";
+}
+/**
+* Returns where the brand renders.
+*
+* @param frame - The resolved frame.
+* @param rail - True where the rail renders.
+* @param sidebar - How the sidebar renders.
+*/
+function brandOf(frame, rail, sidebar) {
+	if (frame.bar.placement === "across") return "bar";
+	if (rail) return "rail";
+	return sidebar === "body" ? "sidebar" : "bar";
+}
+/**
+* Returns the product's resolved frame.
+*
+* @throws {@link Error} Where the product renders its own frame, which the build resolves no
+*   options for.
+*/
+function useFrame() {
+	const { frame } = useResolvedProduct();
+	if (frame === void 0) throw new Error("ProductFrame renders the frame a product's definition states, and this product renders its own frame.");
+	return frame;
+}
+/**
+* Returns where the `userMenu` region renders: at the foot of a sidebar beside the page where the
+* frame places it there, and in the bar otherwise.
+*
+* @param frame - The resolved frame.
+* @param sidebar - How the sidebar renders.
+*/
+function userMenuOf(frame, sidebar) {
+	return frame.sidebar.userMenu === "sidebar" && sidebar === "body" ? "sidebar" : "bar";
+}
+/**
+* Returns the parts of the frame that render for the page on screen, and renders again when a
+* region fills or empties, a section changes, or a menu lists another page.
+*
+* @param frame - The resolved frame.
+* @param sections - The main menu's sections and the current one.
+*/
+function useFrameParts(frame, sections) {
+	const $ = c(11);
+	const { slots } = hostContract;
+	const product = useResolvedProduct();
+	const routes = useListed();
+	const plugin = frame.layout === "sidebar" ? void 0 : sections.current?.plugin;
+	const navigation = useSlot(slots.navigation, void 0, plugin).filled;
+	const count = sections.sections.length;
+	const rail = frame.layout === "rail" && count >= FEWEST;
+	const dock = frame.dock && count >= FEWEST && count <= MOST;
+	const sheetSections = rail && !dock;
+	const sidebar = sidebarOf(frame, listsBlocks(frame, sections, {
+		navigation,
+		plugin,
+		product,
+		routes
+	}), sheetSections);
+	const t0 = useSlot(slots.aside);
+	const t1 = t0.filled;
+	const t2 = brandOf(frame, rail, sidebar);
+	const t3 = useSlot(slots.footer);
+	const t4 = t3.filled;
+	const t5 = useSlot(slots.panel);
+	const t6 = t5.filled;
+	const t7 = useSlot(slots.status);
+	const t8 = t7.filled;
+	const t9 = userMenuOf(frame, sidebar);
+	let t10;
+	if ($[0] !== dock || $[1] !== rail || $[2] !== sheetSections || $[3] !== sidebar || $[4] !== t0.filled || $[5] !== t2 || $[6] !== t3.filled || $[7] !== t5.filled || $[8] !== t7.filled || $[9] !== t9) {
+		t10 = {
+			aside: t1,
+			brand: t2,
+			dock,
+			footer: t4,
+			panel: t6,
+			rail,
+			sheetSections,
+			sidebar,
+			status: t8,
+			userMenu: t9
+		};
+		$[0] = dock;
+		$[1] = rail;
+		$[2] = sheetSections;
+		$[3] = sidebar;
+		$[4] = t0.filled;
+		$[5] = t2;
+		$[6] = t3.filled;
+		$[7] = t5.filled;
+		$[8] = t7.filled;
+		$[9] = t9;
+		$[10] = t10;
+	} else t10 = $[10];
+	return t10;
+}
+//#endregion
+//#region src/app/skip-links.tsx
+/**
+* Returns true while a panel of the shell renders its content beside the page, where the target of
+* its skip link takes focus.
+*
+* @remarks
+*   Focus cannot move into a panel the frame does not render, a panel the shell hides, a sheet over
+*   the page, or a panel closed to nothing, because each is absent or inert. A panel closed to its
+*   icons keeps its rows in the tab order.
+* @param name - The panel's name.
+*/
+function useReachable(name) {
+	const panel = AppShell.useAppShellPanel(name);
+	return panel !== void 0 && !panel.hidden && !panel.overlaid && (panel.open || panel.collapse === "icons");
+}
+/**
+* Renders a skip link per region that focus can reach, hidden until it takes focus.
+*
+* @remarks
+*   The first Tab reaches the link to the page, so one key press moves focus past the bar and the
+*   panels. The links to the navigation and the end panels follow in the order the regions render.
+*   A panel publishes its state after its first render, so its link renders from the render after.
+*/
+function SkipLinks() {
+	const $ = c(18);
+	const { t } = useTranslation("host");
+	const navigation = useReachable("navigation");
+	const aside = useReachable("aside");
+	const panel = useReachable("panel");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("frame.skip.main");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SkipNav.Link, {
+			href: `#${MAIN}`,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== navigation || $[5] !== t) {
+		t2 = navigation ? /* @__PURE__ */ jsx(SkipNav.Link, {
+			href: `#${NAVIGATION}`,
+			children: t("frame.skip.navigation")
+		}) : null;
+		$[4] = navigation;
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== aside || $[8] !== t) {
+		t3 = aside ? /* @__PURE__ */ jsx(SkipNav.Link, {
+			href: `#${ASIDE}`,
+			children: t("frame.skip.aside")
+		}) : null;
+		$[7] = aside;
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== panel || $[11] !== t) {
+		t4 = panel ? /* @__PURE__ */ jsx(SkipNav.Link, {
+			href: `#${PANEL}`,
+			children: t("frame.skip.panel")
+		}) : null;
+		$[10] = panel;
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t1,
+			t2,
+			t3,
+			t4
+		] });
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+//#endregion
+//#region src/app/frame.tsx
+/**
+* Renders the shell inside the host's root, around the page the router matched.
+*
+* @remarks
+*   The frame reads the resolved frame, the main menu's sections and the filled regions, so it
+*   renders a part only while the layout calls for it and a plugin fills it. The skip links come
+*   first, then the bar across the top, the body, and the bars at the foot. The `stacked` and
+*   `split` layouts list the sections in the bar.
+* @returns The host's root around the shell.
+* @throws {@link Error} Where the product renders its own frame.
+*/
+function ProductFrame() {
+	const $ = c(32);
+	const frame = useFrame();
+	const sections = useSections();
+	const parts = useFrameParts(frame, sections);
+	let t0;
+	if ($[0] !== frame || $[1] !== parts || $[2] !== sections) {
+		t0 = {
+			frame,
+			parts,
+			sections
+		};
+		$[0] = frame;
+		$[1] = parts;
+		$[2] = sections;
+		$[3] = t0;
+	} else t0 = $[3];
+	const model = t0;
+	const { bar, layout, shell } = frame;
+	const t1 = parts.brand === "bar";
+	const t2 = layout === "stacked" || layout === "split";
+	let t3;
+	if ($[4] !== bar.logo || $[5] !== parts.sidebar || $[6] !== sections || $[7] !== t1 || $[8] !== t2) {
+		t3 = {
+			brand: t1,
+			links: t2,
+			logo: bar.logo,
+			navigation: parts.sidebar,
+			sections
+		};
+		$[4] = bar.logo;
+		$[5] = parts.sidebar;
+		$[6] = sections;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	const t4 = parts.userMenu === "bar";
+	let t5;
+	if ($[10] !== frame || $[11] !== parts.panel || $[12] !== t3 || $[13] !== t4) {
+		t5 = {
+			frame,
+			panel: parts.panel,
+			start: t3,
+			userMenu: t4
+		};
+		$[10] = frame;
+		$[11] = parts.panel;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	const props = t5;
+	let t6;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(SkipLinks, {});
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== bar.placement || $[17] !== props) {
+		t7 = bar.placement === "across" ? /* @__PURE__ */ jsx(FrameBar, { ...props }) : null;
+		$[16] = bar.placement;
+		$[17] = props;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== model || $[20] !== props) {
+		t8 = /* @__PURE__ */ jsx(FrameBody, {
+			bar: props,
+			model
+		});
+		$[19] = model;
+		$[20] = props;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== model) {
+		t9 = /* @__PURE__ */ jsx(FrameFoot, { model });
+		$[22] = model;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== shell.content || $[25] !== shell.divided || $[26] !== shell.scroll || $[27] !== shell.variant || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx(HostRoot, { children: /* @__PURE__ */ jsxs(AppShell.Root, {
+			content: shell.content,
+			divided: shell.divided,
+			scroll: shell.scroll,
+			variant: shell.variant,
+			children: [
+				t6,
+				t7,
+				t8,
+				t9
+			]
+		}) });
+		$[24] = shell.content;
+		$[25] = shell.divided;
+		$[26] = shell.scroll;
+		$[27] = shell.variant;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
+}
+//#endregion
+export { useSections as n, ProductFrame as t };