@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/app-shell/app-shell.js

@@ -0,0 +1,4899 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { A as Nav, At as Trigger, Bt as Body, F as Footer$1, Ft as Pane, I as Empty, It as Navbar, L as Content, Lt as Main, Mt as Section, Nt as Root$2, O as Search, P as Header$1, Pt as Rail, Rt as Header, Vt as Aside, a as Start, c as Root, d as End, f as Center, j as NavLabel, jt as Status$1, k as Root$1, l as Link$1, p as Action, qt as Item, s as Search$1, zt as Footer } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { Button, IconButton } from "@stealthscale/component-actions";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Link, NavList, Toc } from "@stealthscale/component-navigation";
+import { Status, Tag } from "@stealthscale/component-data";
+import { Field, InputGroup } from "@stealthscale/component-forms";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Screen, specimen, useWords } from "@stealthscale/specimen";
+import { ArchiveIcon, AtSignIcon, BellIcon, BookOpenIcon, BotIcon, BriefcaseIcon, Building2Icon, CalendarIcon, ChartColumnIcon, CheckIcon, CompassIcon, CreditCardIcon, EllipsisIcon, FileTextIcon, FlaskConicalIcon, FolderIcon, FolderKanbanIcon, ForwardIcon, FrameIcon, GitBranchIcon, HashIcon, ImageIcon, InboxIcon, InfoIcon, LayersIcon, LayoutDashboardIcon, LibraryIcon, ListMusicIcon, LockIcon, MailIcon, MenuIcon, MousePointerClickIcon, PanelBottomIcon, PanelRightIcon, PanelTopIcon, PauseIcon, PlayIcon, RadioIcon, ReceiptIcon, ReplyIcon, SearchIcon, SendHorizontalIcon, SendIcon, SettingsIcon, ShieldAlertIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, SkipBackIcon, SkipForwardIcon, StarIcon, UserIcon, WrenchIcon } from "lucide-react";
+import { Blockquote, Code, Heading, Span, Text } from "@stealthscale/component-typography";
+import { Alert, EmptyState, Progress } from "@stealthscale/component-feedback";
+import { Card } from "@stealthscale/component-surfaces";
+import { Avatar } from "@stealthscale/component-media";
+import { DataList, Listbox, Table, useListCollection } from "@stealthscale/component-collections";
+//#region src/app-shell/examples/billing.example.tsx
+var billing_example_exports = /* @__PURE__ */ __exportAll({
+	Billing: () => Billing,
+	source: () => source$13
+});
+const PAGES$1 = [
+	[
+		"overview",
+		LayoutDashboardIcon,
+		void 0
+	],
+	[
+		"invoices",
+		ReceiptIcon,
+		"page"
+	],
+	[
+		"usage",
+		ChartColumnIcon,
+		void 0
+	],
+	[
+		"plan",
+		CreditCardIcon,
+		void 0
+	]
+];
+function Billing(props) {
+	const $ = c(63);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Alert.Indicator, { children: /* @__PURE__ */ jsx(InfoIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("trialEnds");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Alert.Content, { children: /* @__PURE__ */ jsx(Alert.Description, { children: t1 }) });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("choosePlan");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Alert.Aside, { children: /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "outline",
+			children: t3
+		}) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Header, {
+			as: "div",
+			children: /* @__PURE__ */ jsxs(Alert.Root, {
+				layout: "inline",
+				size: "sm",
+				children: [
+					t0,
+					t2,
+					t4
+				]
+			})
+		});
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("billingBrand");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("navigation");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t7,
+			as: Trigger,
+			shape: "square",
+			children: t8
+		});
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("billingBrand");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t10
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Start, { children: [t9, t11] });
+		$[23] = t11;
+		$[24] = t9;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t) {
+		t13 = t("addCard");
+		$[26] = t;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t13
+		}) });
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t12 || $[31] !== t14 || $[32] !== t6) {
+		t15 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t6,
+			size: "sm",
+			children: [t12, t14]
+		}) });
+		$[30] = t12;
+		$[31] = t14;
+		$[32] = t6;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = t("billingBrand");
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t) {
+		t17 = PAGES$1.map((t18) => {
+			const [page, Glyph, current] = t18;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${page}`,
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(page) })]
+			}) }, page);
+		});
+		$[36] = t;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t17) {
+		t18 = /* @__PURE__ */ jsx(NavList.Root, { children: t17 });
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t16 || $[41] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "sm",
+			width: "11rem",
+			children: /* @__PURE__ */ jsx(Root$1, {
+				variant: "subtle",
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Nav, {
+					"aria-label": t16,
+					children: t18
+				}) })
+			})
+		});
+		$[40] = t16;
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(EmptyState.Indicator, { children: /* @__PURE__ */ jsx(ReceiptIcon, {}) });
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t) {
+		t21 = t("noInvoices");
+		$[44] = t;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t21) {
+		t22 = /* @__PURE__ */ jsx(EmptyState.Title, {
+			as: "h2",
+			children: t21
+		});
+		$[46] = t21;
+		$[47] = t22;
+	} else t22 = $[47];
+	let t23;
+	if ($[48] !== t) {
+		t23 = t("invoicesAppear");
+		$[48] = t;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== t23) {
+		t24 = /* @__PURE__ */ jsx(EmptyState.Description, { children: t23 });
+		$[50] = t23;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t22 || $[53] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(EmptyState.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [
+				t20,
+				t22,
+				t24
+			] })
+		}) });
+		$[52] = t22;
+		$[53] = t24;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[55] !== t19 || $[56] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Body, { children: [t19, t25] });
+		$[55] = t19;
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== props || $[59] !== t15 || $[60] !== t26 || $[61] !== t5) {
+		t27 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [
+				t5,
+				t15,
+				t26
+			]
+		});
+		$[58] = props;
+		$[59] = t15;
+		$[60] = t26;
+		$[61] = t5;
+		$[62] = t27;
+	} else t27 = $[62];
+	return t27;
+}
+const source$13 = "import { type ReactElement } from \"react\";\n\nimport {\n  ChartColumnIcon,\n  CreditCardIcon,\n  InfoIcon,\n  LayoutDashboardIcon,\n  MenuIcon,\n  ReceiptIcon,\n} from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Alert, EmptyState } from \"@stealthscale/component-feedback\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PAGES = [\n  [\"overview\", LayoutDashboardIcon, undefined],\n  [\"invoices\", ReceiptIcon, \"page\"],\n  [\"usage\", ChartColumnIcon, undefined],\n  [\"plan\", CreditCardIcon, undefined],\n] as const;\n\nexport function Billing(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header as=\"div\">\n        <Alert.Root layout=\"inline\" size=\"sm\">\n          <Alert.Indicator>\n            <InfoIcon />\n          </Alert.Indicator>\n          <Alert.Content>\n            <Alert.Description>{t(\"trialEnds\")}</Alert.Description>\n          </Alert.Content>\n          <Alert.Aside>\n            <Button size=\"xs\" variant=\"outline\">\n              {t(\"choosePlan\")}\n            </Button>\n          </Alert.Aside>\n        </Alert.Root>\n      </AppShell.Header>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"billingBrand\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item aria-label={t(\"navigation\")} as={AppShell.Trigger} shape=\"square\">\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"billingBrand\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Action primary>{t(\"addCard\")}</Toolbar.Action>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar foldsBelow=\"sm\" width=\"11rem\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Content>\n              <Sidebar.Nav aria-label={t(\"billingBrand\")}>\n                <NavList.Root>\n                  {PAGES.map(([page, Glyph, current]) => (\n                    <NavList.Item key={page}>\n                      <NavList.Link aria-current={current} href={`#${page}`}>\n                        <Glyph />\n                        <span>{t(page)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <EmptyState.Root size=\"sm\">\n            <EmptyState.Content>\n              <EmptyState.Indicator>\n                <ReceiptIcon />\n              </EmptyState.Indicator>\n              <EmptyState.Title as=\"h2\">{t(\"noInvoices\")}</EmptyState.Title>\n              <EmptyState.Description>{t(\"invoicesAppear\")}</EmptyState.Description>\n            </EmptyState.Content>\n          </EmptyState.Root>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/canvas.example.tsx
+var canvas_example_exports = /* @__PURE__ */ __exportAll({
+	Canvas: () => Canvas,
+	source: () => source$12
+});
+const LAYERS = [
+	[
+		"canvasLayer",
+		FrameIcon,
+		void 0
+	],
+	[
+		"headerLayer",
+		PanelTopIcon,
+		void 0
+	],
+	[
+		"hero",
+		ImageIcon,
+		"page"
+	],
+	[
+		"cta",
+		MousePointerClickIcon,
+		void 0
+	],
+	[
+		"footerLayer",
+		PanelBottomIcon,
+		void 0
+	]
+];
+const SIZES = [[
+	"W",
+	"width",
+	"1200"
+], [
+	"H",
+	"height",
+	"640"
+]];
+function Canvas(props) {
+	const $ = c(92);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("draft");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("layers");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t1,
+			as: Trigger,
+			panel: "layers",
+			shape: "square",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("draft");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("share");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t7
+		});
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("properties");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(PanelRightIcon, {});
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t9,
+			as: Trigger,
+			panel: "properties",
+			shape: "square",
+			children: t10
+		});
+		$[21] = t9;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(End, { children: [t8, t11] });
+		$[23] = t11;
+		$[24] = t8;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t0 || $[27] !== t12 || $[28] !== t6) {
+		t13 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t6, t12]
+		}) });
+		$[26] = t0;
+		$[27] = t12;
+		$[28] = t6;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("layers");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t14
+		});
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = t("layers");
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t) {
+		t17 = LAYERS.map((t18) => {
+			const [layer, Glyph, current] = t18;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${layer}`,
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(layer) })]
+			}) }, layer);
+		});
+		$[36] = t;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t16 || $[39] !== t17) {
+		t18 = /* @__PURE__ */ jsx(NavList.Root, {
+			"aria-label": t16,
+			size: "sm",
+			children: t17
+		});
+		$[38] = t16;
+		$[39] = t17;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t15 || $[42] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "sm",
+			name: "layers",
+			width: "12rem",
+			children: /* @__PURE__ */ jsxs(Section, {
+				grows: true,
+				scrolls: true,
+				children: [t15, t18]
+			})
+		});
+		$[41] = t15;
+		$[42] = t18;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== t) {
+		t20 = t("heroTitle");
+		$[44] = t;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Card.Title, { children: t20 });
+		$[46] = t20;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t) {
+		t22 = t("heroBody");
+		$[48] = t;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Card.Description, { children: t22 });
+		$[50] = t22;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== t21 || $[53] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Card.Header, { children: [t21, t23] });
+		$[52] = t21;
+		$[53] = t23;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== t) {
+		t25 = t("heroAction");
+		$[55] = t;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Card.Footer, { children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t25
+		}) });
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] !== t24 || $[60] !== t26) {
+		t27 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Card.Root, {
+			size: "sm",
+			variant: "outline",
+			children: [t24, t26]
+		}) }) });
+		$[59] = t24;
+		$[60] = t26;
+		$[61] = t27;
+	} else t27 = $[61];
+	let t28;
+	if ($[62] !== t) {
+		t28 = t("hero");
+		$[62] = t;
+		$[63] = t28;
+	} else t28 = $[63];
+	let t29;
+	if ($[64] !== t28) {
+		t29 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t28
+		});
+		$[64] = t28;
+		$[65] = t29;
+	} else t29 = $[65];
+	let t30;
+	if ($[66] !== t) {
+		t30 = SIZES.map((t31) => {
+			const [mark, name, value] = t31;
+			return /* @__PURE__ */ jsxs(InputGroup.Row, { children: [/* @__PURE__ */ jsx(InputGroup.Mark, {
+				"aria-hidden": true,
+				children: mark
+			}), /* @__PURE__ */ jsx(InputGroup.Field, {
+				"aria-label": t(name),
+				defaultValue: value,
+				inputMode: "numeric"
+			})] }, name);
+		});
+		$[66] = t;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== t30) {
+		t31 = /* @__PURE__ */ jsx(InputGroup.Root, {
+			size: "sm",
+			children: t30
+		});
+		$[68] = t30;
+		$[69] = t31;
+	} else t31 = $[69];
+	let t32;
+	if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+		t32 = /* @__PURE__ */ jsx(InputGroup.Mark, {
+			"aria-hidden": true,
+			children: "#"
+		});
+		$[70] = t32;
+	} else t32 = $[70];
+	let t33;
+	if ($[71] !== t) {
+		t33 = t("fill");
+		$[71] = t;
+		$[72] = t33;
+	} else t33 = $[72];
+	let t34;
+	if ($[73] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(InputGroup.Root, {
+			size: "sm",
+			children: [t32, /* @__PURE__ */ jsx(InputGroup.Field, {
+				"aria-label": t33,
+				defaultValue: "1F6FEB"
+			})]
+		});
+		$[73] = t33;
+		$[74] = t34;
+	} else t34 = $[74];
+	let t35;
+	if ($[75] !== t) {
+		t35 = t("replace");
+		$[75] = t;
+		$[76] = t35;
+	} else t35 = $[76];
+	let t36;
+	if ($[77] !== t35) {
+		t36 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t35
+		});
+		$[77] = t35;
+		$[78] = t36;
+	} else t36 = $[78];
+	let t37;
+	if ($[79] !== t29 || $[80] !== t31 || $[81] !== t34 || $[82] !== t36) {
+		t37 = /* @__PURE__ */ jsx(Aside, {
+			name: "properties",
+			width: "14rem",
+			children: /* @__PURE__ */ jsxs(Section, { children: [
+				t29,
+				t31,
+				t34,
+				t36
+			] })
+		});
+		$[79] = t29;
+		$[80] = t31;
+		$[81] = t34;
+		$[82] = t36;
+		$[83] = t37;
+	} else t37 = $[83];
+	let t38;
+	if ($[84] !== t19 || $[85] !== t27 || $[86] !== t37) {
+		t38 = /* @__PURE__ */ jsxs(Body, { children: [
+			t19,
+			t27,
+			t37
+		] });
+		$[84] = t19;
+		$[85] = t27;
+		$[86] = t37;
+		$[87] = t38;
+	} else t38 = $[87];
+	let t39;
+	if ($[88] !== props || $[89] !== t13 || $[90] !== t38) {
+		t39 = /* @__PURE__ */ jsxs(Root$2, {
+			divided: false,
+			variant: "floating",
+			...props,
+			children: [t13, t38]
+		});
+		$[88] = props;
+		$[89] = t13;
+		$[90] = t38;
+		$[91] = t39;
+	} else t39 = $[91];
+	return t39;
+}
+const source$12 = "import { type ReactElement } from \"react\";\n\nimport {\n  FrameIcon,\n  ImageIcon,\n  MenuIcon,\n  MousePointerClickIcon,\n  PanelBottomIcon,\n  PanelRightIcon,\n  PanelTopIcon,\n} from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { InputGroup } from \"@stealthscale/component-forms\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Card } from \"@stealthscale/component-surfaces\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Toolbar } from \"@stealthscale/component-screen\";\n\nconst LAYERS = [\n  [\"canvasLayer\", FrameIcon, undefined],\n  [\"headerLayer\", PanelTopIcon, undefined],\n  [\"hero\", ImageIcon, \"page\"],\n  [\"cta\", MousePointerClickIcon, undefined],\n  [\"footerLayer\", PanelBottomIcon, undefined],\n] as const;\n\nconst SIZES = [\n  [\"W\", \"width\", \"1200\"],\n  [\"H\", \"height\", \"640\"],\n] as const;\n\nexport function Canvas(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root divided={false} variant=\"floating\" {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"draft\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item\n              aria-label={t(\"layers\")}\n              as={AppShell.Trigger}\n              panel=\"layers\"\n              shape=\"square\"\n            >\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"draft\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Action primary>{t(\"share\")}</Toolbar.Action>\n            <Toolbar.Item\n              aria-label={t(\"properties\")}\n              as={AppShell.Trigger}\n              panel=\"properties\"\n              shape=\"square\"\n            >\n              <PanelRightIcon />\n            </Toolbar.Item>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar foldsBelow=\"sm\" name=\"layers\" width=\"12rem\">\n          <AppShell.Section grows scrolls>\n            <Heading as=\"h2\" size=\"xs\">\n              {t(\"layers\")}\n            </Heading>\n            <NavList.Root aria-label={t(\"layers\")} size=\"sm\">\n              {LAYERS.map(([layer, Glyph, current]) => (\n                <NavList.Item key={layer}>\n                  <NavList.Link aria-current={current} href={`#${layer}`}>\n                    <Glyph />\n                    <span>{t(layer)}</span>\n                  </NavList.Link>\n                </NavList.Item>\n              ))}\n            </NavList.Root>\n          </AppShell.Section>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Card.Root size=\"sm\" variant=\"outline\">\n              <Card.Header>\n                <Card.Title>{t(\"heroTitle\")}</Card.Title>\n                <Card.Description>{t(\"heroBody\")}</Card.Description>\n              </Card.Header>\n              <Card.Footer>\n                <Button size=\"sm\">{t(\"heroAction\")}</Button>\n              </Card.Footer>\n            </Card.Root>\n          </AppShell.Section>\n        </AppShell.Main>\n        <AppShell.Aside name=\"properties\" width=\"14rem\">\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"xs\">\n              {t(\"hero\")}\n            </Heading>\n            <InputGroup.Root size=\"sm\">\n              {SIZES.map(([mark, name, value]) => (\n                <InputGroup.Row key={name}>\n                  <InputGroup.Mark aria-hidden>{mark}</InputGroup.Mark>\n                  <InputGroup.Field aria-label={t(name)} defaultValue={value} inputMode=\"numeric\" />\n                </InputGroup.Row>\n              ))}\n            </InputGroup.Root>\n            <InputGroup.Root size=\"sm\">\n              <InputGroup.Mark aria-hidden>#</InputGroup.Mark>\n              <InputGroup.Field aria-label={t(\"fill\")} defaultValue=\"1F6FEB\" />\n            </InputGroup.Root>\n            <Button size=\"sm\" variant=\"outline\">\n              {t(\"replace\")}\n            </Button>\n          </AppShell.Section>\n        </AppShell.Aside>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/chat.example.tsx
+var chat_example_exports = /* @__PURE__ */ __exportAll({
+	Chat: () => Chat,
+	source: () => source$11
+});
+const WORKSPACES = [
+	[
+		"stealth",
+		Building2Icon,
+		"page"
+	],
+	[
+		"operations",
+		WrenchIcon,
+		void 0
+	],
+	[
+		"quality",
+		FlaskConicalIcon,
+		void 0
+	]
+];
+const ROOMS = [[
+	"channels",
+	HashIcon,
+	[
+		["general"],
+		["deploys", "page"],
+		[
+			"incidents",
+			void 0,
+			"2"
+		]
+	]
+], [
+	"direct",
+	AtSignIcon,
+	[["mara"], [
+		"jonas",
+		void 0,
+		"1"
+	]]
+]];
+const MESSAGES = [
+	[
+		"09:02",
+		"jonas",
+		"tagged"
+	],
+	[
+		"09:05",
+		"mara",
+		"starting"
+	],
+	[
+		"09:08",
+		"bot",
+		"live"
+	],
+	[
+		"09:12",
+		"mara",
+		"rolling"
+	],
+	[
+		"09:14",
+		"jonas",
+		"canary"
+	],
+	[
+		"09:15",
+		"mara",
+		"fleet"
+	],
+	[
+		"09:17",
+		"bot",
+		"hosts"
+	],
+	[
+		"09:19",
+		"bot",
+		"deployed"
+	],
+	[
+		"09:20",
+		"jonas",
+		"closing"
+	],
+	[
+		"09:21",
+		"mara",
+		"thanks"
+	]
+];
+const AUTHORS = {
+	bot: {
+		palette: "primary",
+		shape: "rounded",
+		variant: "solid"
+	},
+	jonas: { palette: "accent" },
+	mara: { palette: "secondary" }
+};
+function Chat(props) {
+	const $ = c(76);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("relay");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("channels");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t1,
+			as: Trigger,
+			panel: "channels",
+			shape: "square",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("relay");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t0 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: t6
+		}) });
+		$[14] = t0;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t) {
+		t8 = t("workspaces");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = WORKSPACES.map((t10) => {
+			const [workspace, Glyph, current] = t10;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${workspace}`,
+				tooltip: t(workspace),
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(workspace) })]
+			}) }, workspace);
+		});
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(NavList.Root, { children: t9 });
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "never",
+			name: "rail",
+			width: "3.5rem",
+			children: /* @__PURE__ */ jsx(Root$1, {
+				iconic: true,
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Nav, {
+					"aria-label": t8,
+					children: t10
+				}) })
+			})
+		});
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("jumpTo");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t) {
+		t13 = t("jumpTo");
+		$[28] = t;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t12 || $[32] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Header$1, { children: /* @__PURE__ */ jsx(Search, {
+			"aria-label": t12,
+			placeholder: t13,
+			searchIndicator: t14
+		}) });
+		$[31] = t12;
+		$[32] = t13;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = ROOMS.map((t17) => {
+			const [group, Glyph_0, rooms] = t17;
+			return /* @__PURE__ */ jsxs(Nav, { children: [/* @__PURE__ */ jsx(NavLabel, { children: t(group) }), /* @__PURE__ */ jsx(NavList.Root, { children: rooms.map((t18) => {
+				const [room, current_0, unread] = t18;
+				return /* @__PURE__ */ jsxs(NavList.Item, { children: [/* @__PURE__ */ jsxs(NavList.Link, {
+					"aria-current": current_0,
+					href: `#${room}`,
+					children: [/* @__PURE__ */ jsx(Glyph_0, {}), /* @__PURE__ */ jsx("span", { children: t(room) })]
+				}), unread === void 0 ? null : /* @__PURE__ */ jsx(NavList.Badge, { children: unread })] }, room);
+			}) })] }, group);
+		});
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t) {
+		t17 = t("noRoom");
+		$[36] = t;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Empty, { children: t17 });
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t16 || $[41] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Content, { children: [t16, t18] });
+		$[40] = t16;
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t15 || $[44] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Navbar, {
+			name: "channels",
+			width: "14rem",
+			children: /* @__PURE__ */ jsxs(Root$1, {
+				variant: "subtle",
+				children: [t15, t19]
+			})
+		});
+		$[43] = t15;
+		$[44] = t19;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t) {
+		t21 = MESSAGES.map((t22) => {
+			const [time, who, said] = t22;
+			return /* @__PURE__ */ jsxs(Stack, {
+				align: "flex-start",
+				direction: "row",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx(Avatar.Root, {
+					"aria-hidden": true,
+					name: t(who),
+					size: "xs",
+					...AUTHORS[who],
+					children: /* @__PURE__ */ jsx(Avatar.Fallback, { children: who === "bot" ? /* @__PURE__ */ jsx(BotIcon, {}) : null })
+				}), /* @__PURE__ */ jsxs(Stack, {
+					gap: "xs",
+					children: [/* @__PURE__ */ jsxs(Text, {
+						size: "sm",
+						children: [
+							/* @__PURE__ */ jsx(Span, {
+								weight: "semibold",
+								children: t(who)
+							}),
+							" ",
+							/* @__PURE__ */ jsx(Span, {
+								tone: "muted",
+								children: time
+							})
+						]
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						children: t(said)
+					})]
+				})]
+			}, said);
+		});
+		$[46] = t;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(Stack, {
+			gap: "md",
+			children: t21
+		}) });
+		$[48] = t21;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== t) {
+		t23 = t("message");
+		$[50] = t;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== t) {
+		t24 = t("messageDeploys");
+		$[52] = t;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t23 || $[55] !== t24) {
+		t25 = /* @__PURE__ */ jsx(InputGroup.Field, {
+			"aria-label": t23,
+			placeholder: t24
+		});
+		$[54] = t23;
+		$[55] = t24;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t) {
+		t26 = t("send");
+		$[57] = t;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(SendHorizontalIcon, {});
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== t26) {
+		t28 = /* @__PURE__ */ jsx(InputGroup.Mark, { children: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t26,
+			size: "xs",
+			variant: "ghost",
+			children: t27
+		}) });
+		$[60] = t26;
+		$[61] = t28;
+	} else t28 = $[61];
+	let t29;
+	if ($[62] !== t25 || $[63] !== t28) {
+		t29 = /* @__PURE__ */ jsx(Footer, {
+			sticky: true,
+			children: /* @__PURE__ */ jsxs(InputGroup.Root, {
+				size: "sm",
+				children: [t25, t28]
+			})
+		});
+		$[62] = t25;
+		$[63] = t28;
+		$[64] = t29;
+	} else t29 = $[64];
+	let t30;
+	if ($[65] !== t22 || $[66] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Main, { children: [t22, t29] });
+		$[65] = t22;
+		$[66] = t29;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== t11 || $[69] !== t20 || $[70] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Body, { children: [
+			t11,
+			t20,
+			t30
+		] });
+		$[68] = t11;
+		$[69] = t20;
+		$[70] = t30;
+		$[71] = t31;
+	} else t31 = $[71];
+	let t32;
+	if ($[72] !== props || $[73] !== t31 || $[74] !== t7) {
+		t32 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [t7, t31]
+		});
+		$[72] = props;
+		$[73] = t31;
+		$[74] = t7;
+		$[75] = t32;
+	} else t32 = $[75];
+	return t32;
+}
+const source$11 = "import { type ReactElement } from \"react\";\n\nimport {\n  AtSignIcon,\n  BotIcon,\n  Building2Icon,\n  FlaskConicalIcon,\n  HashIcon,\n  type LucideIcon,\n  MenuIcon,\n  SearchIcon,\n  SendHorizontalIcon,\n  WrenchIcon,\n} from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { InputGroup } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Span, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\ntype Room = readonly [name: string, current?: \"page\" | undefined, unread?: string | undefined];\n\nconst WORKSPACES = [\n  [\"stealth\", Building2Icon, \"page\"],\n  [\"operations\", WrenchIcon, undefined],\n  [\"quality\", FlaskConicalIcon, undefined],\n] as const;\n\nconst ROOMS: ReadonlyArray<readonly [string, LucideIcon, readonly Room[]]> = [\n  [\"channels\", HashIcon, [[\"general\"], [\"deploys\", \"page\"], [\"incidents\", undefined, \"2\"]]],\n  [\"direct\", AtSignIcon, [[\"mara\"], [\"jonas\", undefined, \"1\"]]],\n];\n\nconst MESSAGES = [\n  [\"09:02\", \"jonas\", \"tagged\"],\n  [\"09:05\", \"mara\", \"starting\"],\n  [\"09:08\", \"bot\", \"live\"],\n  [\"09:12\", \"mara\", \"rolling\"],\n  [\"09:14\", \"jonas\", \"canary\"],\n  [\"09:15\", \"mara\", \"fleet\"],\n  [\"09:17\", \"bot\", \"hosts\"],\n  [\"09:19\", \"bot\", \"deployed\"],\n  [\"09:20\", \"jonas\", \"closing\"],\n  [\"09:21\", \"mara\", \"thanks\"],\n] as const;\n\nconst AUTHORS = {\n  bot: { palette: \"primary\", shape: \"rounded\", variant: \"solid\" },\n  jonas: { palette: \"accent\" },\n  mara: { palette: \"secondary\" },\n} as const;\n\nexport function Chat(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"relay\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item\n              aria-label={t(\"channels\")}\n              as={AppShell.Trigger}\n              panel=\"channels\"\n              shape=\"square\"\n            >\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"relay\")}\n            </Text>\n          </Toolbar.Start>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar foldsBelow=\"never\" name=\"rail\" width=\"3.5rem\">\n          <Sidebar.Root iconic>\n            <Sidebar.Content>\n              <Sidebar.Nav aria-label={t(\"workspaces\")}>\n                <NavList.Root>\n                  {WORKSPACES.map(([workspace, Glyph, current]) => (\n                    <NavList.Item key={workspace}>\n                      <NavList.Link\n                        aria-current={current}\n                        href={`#${workspace}`}\n                        tooltip={t(workspace)}\n                      >\n                        <Glyph />\n                        <span>{t(workspace)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Navbar name=\"channels\" width=\"14rem\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Header>\n              <Sidebar.Search\n                aria-label={t(\"jumpTo\")}\n                placeholder={t(\"jumpTo\")}\n                searchIndicator={<SearchIcon />}\n              />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              {ROOMS.map(([group, Glyph, rooms]) => (\n                <Sidebar.Nav key={group}>\n                  <Sidebar.NavLabel>{t(group)}</Sidebar.NavLabel>\n                  <NavList.Root>\n                    {rooms.map(([room, current, unread]) => (\n                      <NavList.Item key={room}>\n                        <NavList.Link aria-current={current} href={`#${room}`}>\n                          <Glyph />\n                          <span>{t(room)}</span>\n                        </NavList.Link>\n                        {unread === undefined ? null : <NavList.Badge>{unread}</NavList.Badge>}\n                      </NavList.Item>\n                    ))}\n                  </NavList.Root>\n                </Sidebar.Nav>\n              ))}\n              <Sidebar.Empty>{t(\"noRoom\")}</Sidebar.Empty>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Stack gap=\"md\">\n              {MESSAGES.map(([time, who, said]) => (\n                <Stack align=\"flex-start\" direction=\"row\" gap=\"sm\" key={said}>\n                  <Avatar.Root aria-hidden name={t(who)} size=\"xs\" {...AUTHORS[who]}>\n                    <Avatar.Fallback>{who === \"bot\" ? <BotIcon /> : null}</Avatar.Fallback>\n                  </Avatar.Root>\n                  <Stack gap=\"xs\">\n                    <Text size=\"sm\">\n                      <Span weight=\"semibold\">{t(who)}</Span> <Span tone=\"muted\">{time}</Span>\n                    </Text>\n                    <Text size=\"sm\">{t(said)}</Text>\n                  </Stack>\n                </Stack>\n              ))}\n            </Stack>\n          </AppShell.Section>\n          <AppShell.Footer sticky>\n            <InputGroup.Root size=\"sm\">\n              <InputGroup.Field aria-label={t(\"message\")} placeholder={t(\"messageDeploys\")} />\n              <InputGroup.Mark>\n                <IconButton aria-label={t(\"send\")} size=\"xs\" variant=\"ghost\">\n                  <SendHorizontalIcon />\n                </IconButton>\n              </InputGroup.Mark>\n            </InputGroup.Root>\n          </AppShell.Footer>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/checkout.example.tsx
+var checkout_example_exports = /* @__PURE__ */ __exportAll({
+	Checkout: () => Checkout,
+	source: () => source$10
+});
+const ORDER = [
+	["mugs", "£36.00"],
+	["shipping", "£4.00"],
+	["vat", "£8.00"]
+];
+function Checkout(props) {
+	const $ = c(80);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("northwind");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("northwind");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(LockIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("secure");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(End, { children: [t3, /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			tone: "muted",
+			children: t4
+		})] });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t0 || $[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t2, t5]
+		}) });
+		$[11] = t0;
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t) {
+		t7 = t("summary");
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t7
+		});
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = ORDER.map((t10) => {
+			const [line, amount] = t10;
+			return /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(line) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: amount })] }, line);
+		});
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t) {
+		t10 = t("total");
+		$[21] = t;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10) {
+		t11 = /* @__PURE__ */ jsx(DataList.ItemLabel, { children: t10 });
+		$[23] = t10;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(Span, {
+			weight: "semibold",
+			children: "£48.00"
+		}) });
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t11) {
+		t13 = /* @__PURE__ */ jsxs(DataList.Item, { children: [t11, t12] });
+		$[26] = t11;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13 || $[29] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(DataList.Root, {
+			divided: true,
+			orientation: "horizontal",
+			size: "sm",
+			children: [t9, t13]
+		});
+		$[28] = t13;
+		$[29] = t9;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t14 || $[32] !== t8) {
+		t15 = /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t8, t14]
+		}) });
+		$[31] = t14;
+		$[32] = t8;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = t("payment");
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t16
+		});
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t) {
+		t18 = t("email");
+		$[38] = t;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Field.Label, { children: t18 });
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(Field.Control, {
+			autoComplete: "email",
+			type: "email"
+		});
+		$[42] = t20;
+	} else t20 = $[42];
+	let t21;
+	if ($[43] !== t19) {
+		t21 = /* @__PURE__ */ jsxs(Field.Root, {
+			size: "sm",
+			children: [t19, t20]
+		});
+		$[43] = t19;
+		$[44] = t21;
+	} else t21 = $[44];
+	let t22;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(InputGroup.Mark, {
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(CreditCardIcon, {})
+		});
+		$[45] = t22;
+	} else t22 = $[45];
+	let t23;
+	if ($[46] !== t) {
+		t23 = t("card");
+		$[46] = t;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(InputGroup.Row, { children: [t22, /* @__PURE__ */ jsx(InputGroup.Field, {
+			"aria-label": t23,
+			autoComplete: "cc-number",
+			inputMode: "numeric",
+			placeholder: "1234 1234 1234 1234"
+		})] });
+		$[48] = t23;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t) {
+		t25 = t("expiry");
+		$[50] = t;
+		$[51] = t25;
+	} else t25 = $[51];
+	let t26;
+	if ($[52] !== t25) {
+		t26 = /* @__PURE__ */ jsx(InputGroup.Field, {
+			"aria-label": t25,
+			autoComplete: "cc-exp",
+			inputMode: "numeric",
+			placeholder: "MM / YY"
+		});
+		$[52] = t25;
+		$[53] = t26;
+	} else t26 = $[53];
+	let t27;
+	if ($[54] !== t) {
+		t27 = t("code");
+		$[54] = t;
+		$[55] = t27;
+	} else t27 = $[55];
+	let t28;
+	if ($[56] !== t27) {
+		t28 = /* @__PURE__ */ jsx(InputGroup.Field, {
+			"aria-label": t27,
+			autoComplete: "cc-csc",
+			inputMode: "numeric",
+			placeholder: "CVC"
+		});
+		$[56] = t27;
+		$[57] = t28;
+	} else t28 = $[57];
+	let t29;
+	if ($[58] !== t26 || $[59] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(InputGroup.Row, { children: [t26, t28] });
+		$[58] = t26;
+		$[59] = t28;
+		$[60] = t29;
+	} else t29 = $[60];
+	let t30;
+	if ($[61] !== t24 || $[62] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(InputGroup.Root, {
+			size: "sm",
+			children: [t24, t29]
+		});
+		$[61] = t24;
+		$[62] = t29;
+		$[63] = t30;
+	} else t30 = $[63];
+	let t31;
+	if ($[64] !== t) {
+		t31 = t("pay");
+		$[64] = t;
+		$[65] = t31;
+	} else t31 = $[65];
+	let t32;
+	if ($[66] !== t31) {
+		t32 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t31
+		});
+		$[66] = t31;
+		$[67] = t32;
+	} else t32 = $[67];
+	let t33;
+	if ($[68] !== t17 || $[69] !== t21 || $[70] !== t30 || $[71] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				t17,
+				t21,
+				t30,
+				t32
+			]
+		}) });
+		$[68] = t17;
+		$[69] = t21;
+		$[70] = t30;
+		$[71] = t32;
+		$[72] = t33;
+	} else t33 = $[72];
+	let t34;
+	if ($[73] !== t15 || $[74] !== t33) {
+		t34 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Grid.Root, {
+			columns: "fit-xs",
+			gap: "xl",
+			children: [t15, t33]
+		}) }) }) });
+		$[73] = t15;
+		$[74] = t33;
+		$[75] = t34;
+	} else t34 = $[75];
+	let t35;
+	if ($[76] !== props || $[77] !== t34 || $[78] !== t6) {
+		t35 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [t6, t34]
+		});
+		$[76] = props;
+		$[77] = t34;
+		$[78] = t6;
+		$[79] = t35;
+	} else t35 = $[79];
+	return t35;
+}
+const source$10 = "import { type ReactElement } from \"react\";\n\nimport { CreditCardIcon, LockIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Field, InputGroup } from \"@stealthscale/component-forms\";\nimport { Grid, Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Span, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Toolbar } from \"@stealthscale/component-screen\";\n\nconst ORDER = [\n  [\"mugs\", \"£36.00\"],\n  [\"shipping\", \"£4.00\"],\n  [\"vat\", \"£8.00\"],\n] as const;\n\nexport function Checkout(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"northwind\")} size=\"sm\">\n          <Toolbar.Start>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"northwind\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <LockIcon aria-hidden size=\"1em\" />\n            <Text as=\"span\" size=\"sm\" tone=\"muted\">\n              {t(\"secure\")}\n            </Text>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Grid.Root columns=\"fit-xs\" gap=\"xl\">\n              <Grid.Item>\n                <Stack gap=\"md\">\n                  <Heading as=\"h2\" size=\"xs\">\n                    {t(\"summary\")}\n                  </Heading>\n                  <DataList.Root divided orientation=\"horizontal\" size=\"sm\">\n                    {ORDER.map(([line, amount]) => (\n                      <DataList.Item key={line}>\n                        <DataList.ItemLabel>{t(line)}</DataList.ItemLabel>\n                        <DataList.ItemValue>{amount}</DataList.ItemValue>\n                      </DataList.Item>\n                    ))}\n                    <DataList.Item>\n                      <DataList.ItemLabel>{t(\"total\")}</DataList.ItemLabel>\n                      <DataList.ItemValue>\n                        <Span weight=\"semibold\">£48.00</Span>\n                      </DataList.ItemValue>\n                    </DataList.Item>\n                  </DataList.Root>\n                </Stack>\n              </Grid.Item>\n              <Grid.Item>\n                <Stack gap=\"md\">\n                  <Heading as=\"h2\" size=\"xs\">\n                    {t(\"payment\")}\n                  </Heading>\n                  <Field.Root size=\"sm\">\n                    <Field.Label>{t(\"email\")}</Field.Label>\n                    <Field.Control autoComplete=\"email\" type=\"email\" />\n                  </Field.Root>\n                  <InputGroup.Root size=\"sm\">\n                    <InputGroup.Row>\n                      <InputGroup.Mark aria-hidden>\n                        <CreditCardIcon />\n                      </InputGroup.Mark>\n                      <InputGroup.Field\n                        aria-label={t(\"card\")}\n                        autoComplete=\"cc-number\"\n                        inputMode=\"numeric\"\n                        placeholder=\"1234 1234 1234 1234\"\n                      />\n                    </InputGroup.Row>\n                    <InputGroup.Row>\n                      <InputGroup.Field\n                        aria-label={t(\"expiry\")}\n                        autoComplete=\"cc-exp\"\n                        inputMode=\"numeric\"\n                        placeholder=\"MM / YY\"\n                      />\n                      <InputGroup.Field\n                        aria-label={t(\"code\")}\n                        autoComplete=\"cc-csc\"\n                        inputMode=\"numeric\"\n                        placeholder=\"CVC\"\n                      />\n                    </InputGroup.Row>\n                  </InputGroup.Root>\n                  <Button size=\"sm\">{t(\"pay\")}</Button>\n                </Stack>\n              </Grid.Item>\n            </Grid.Root>\n          </AppShell.Section>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/console.example.tsx
+var console_example_exports = /* @__PURE__ */ __exportAll({
+	Console: () => Console,
+	source: () => source$9
+});
+const PAGES = [
+	[
+		"runs",
+		PlayIcon,
+		"page",
+		"12"
+	],
+	[
+		"pipelines",
+		GitBranchIcon,
+		void 0,
+		void 0
+	],
+	[
+		"approvals",
+		ShieldCheckIcon,
+		void 0,
+		"3"
+	],
+	[
+		"environments",
+		LayersIcon,
+		void 0,
+		void 0
+	],
+	[
+		"settings",
+		SettingsIcon,
+		void 0,
+		void 0
+	]
+];
+const RUNS = [
+	[
+		"4128",
+		"main",
+		"success",
+		"passed",
+		"4m 12s"
+	],
+	[
+		"4127",
+		"main",
+		"success",
+		"passed",
+		"4m 34s"
+	],
+	[
+		"4126",
+		"fix/retry",
+		"error",
+		"failed",
+		"1m 08s"
+	]
+];
+const FACTS$1 = [
+	["started", "clock"],
+	["duration", "took"],
+	["trigger", "push"]
+];
+function Console(props) {
+	const $ = c(126);
+	const { t } = useWords("app-shell");
+	const runs = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ledger");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("navigation");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t1,
+			as: Trigger,
+			shape: "square",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("ledger");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("newRun");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t7
+		});
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("details");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(PanelRightIcon, {});
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t9,
+			as: Trigger,
+			panel: "aside",
+			shape: "square",
+			children: t10
+		});
+		$[21] = t9;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(End, { children: [t8, t11] });
+		$[23] = t11;
+		$[24] = t8;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t0 || $[27] !== t12 || $[28] !== t6) {
+		t13 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t6, t12]
+		}) });
+		$[26] = t0;
+		$[27] = t12;
+		$[28] = t6;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("findPage");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t) {
+		t15 = t("filter");
+		$[32] = t;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t14 || $[36] !== t15) {
+		t17 = /* @__PURE__ */ jsx(Header$1, { children: /* @__PURE__ */ jsx(Search, {
+			"aria-label": t14,
+			placeholder: t15,
+			searchIndicator: t16
+		}) });
+		$[35] = t14;
+		$[36] = t15;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t) {
+		t18 = t("platform");
+		$[38] = t;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(NavLabel, { children: t18 });
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t) {
+		t20 = PAGES.map((t21) => {
+			const [page, Glyph, current, count] = t21;
+			return /* @__PURE__ */ jsxs(NavList.Item, { children: [/* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${page}`,
+				tooltip: t(page),
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(page) })]
+			}), count === void 0 ? null : /* @__PURE__ */ jsx(NavList.Badge, { children: count })] }, page);
+		});
+		$[42] = t;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t20) {
+		t21 = /* @__PURE__ */ jsx(NavList.Root, { children: t20 });
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t19 || $[47] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t19, t21] }) });
+		$[46] = t19;
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t) {
+		t23 = t("version");
+		$[49] = t;
+		$[50] = t23;
+	} else t23 = $[50];
+	let t24;
+	if ($[51] !== t23) {
+		t24 = /* @__PURE__ */ jsx(Footer$1, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t23
+		}) });
+		$[51] = t23;
+		$[52] = t24;
+	} else t24 = $[52];
+	let t25;
+	if ($[53] !== t17 || $[54] !== t22 || $[55] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Navbar, {
+			collapse: "icons",
+			foldsBelow: "sm",
+			shortcut: "b",
+			children: /* @__PURE__ */ jsxs(Root$1, {
+				variant: "subtle",
+				children: [
+					t17,
+					t22,
+					t24
+				]
+			})
+		});
+		$[53] = t17;
+		$[54] = t22;
+		$[55] = t24;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = /* @__PURE__ */ jsx(Rail, {});
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== t) {
+		t27 = t("runs");
+		$[58] = t;
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== runs || $[61] !== t27) {
+		t28 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			id: runs,
+			size: "sm",
+			children: t27
+		});
+		$[60] = runs;
+		$[61] = t27;
+		$[62] = t28;
+	} else t28 = $[62];
+	let t29;
+	if ($[63] !== t) {
+		t29 = /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: [
+			"run",
+			"branch",
+			"status",
+			"duration"
+		].map((column) => /* @__PURE__ */ jsx(Table.ColumnHeader, { children: t(column) }, column)) }) });
+		$[63] = t;
+		$[64] = t29;
+	} else t29 = $[64];
+	let t30;
+	if ($[65] !== t) {
+		t30 = RUNS.map((t31) => {
+			const [run, branch, palette, state, took] = t31;
+			return /* @__PURE__ */ jsxs(Table.Row, { children: [
+				/* @__PURE__ */ jsxs(Table.RowHeader, { children: ["#", run] }),
+				/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, {
+					size: "sm",
+					children: branch
+				}) }),
+				/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs(Status.Root, {
+					palette,
+					size: "inherit",
+					children: [/* @__PURE__ */ jsx(Status.Indicator, {}), t(state)]
+				}) }),
+				/* @__PURE__ */ jsx(Table.Cell, { children: took })
+			] }, run);
+		});
+		$[65] = t;
+		$[66] = t30;
+	} else t30 = $[66];
+	let t31;
+	if ($[67] !== t30) {
+		t31 = /* @__PURE__ */ jsx(Table.Body, { children: t30 });
+		$[67] = t30;
+		$[68] = t31;
+	} else t31 = $[68];
+	let t32;
+	if ($[69] !== t29 || $[70] !== t31) {
+		t32 = /* @__PURE__ */ jsxs(Table.Root, { children: [t29, t31] });
+		$[69] = t29;
+		$[70] = t31;
+		$[71] = t32;
+	} else t32 = $[71];
+	let t33;
+	if ($[72] !== runs || $[73] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Table.Scroller, {
+			"aria-labelledby": runs,
+			size: "sm",
+			variant: "surface",
+			children: t32
+		});
+		$[72] = runs;
+		$[73] = t32;
+		$[74] = t33;
+	} else t33 = $[74];
+	let t34;
+	if ($[75] !== t28 || $[76] !== t33) {
+		t34 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [t28, t33] }) });
+		$[75] = t28;
+		$[76] = t33;
+		$[77] = t34;
+	} else t34 = $[77];
+	let t35;
+	if ($[78] !== t) {
+		t35 = t("run4128");
+		$[78] = t;
+		$[79] = t35;
+	} else t35 = $[79];
+	let t36;
+	if ($[80] !== t35) {
+		t36 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t35
+		});
+		$[80] = t35;
+		$[81] = t36;
+	} else t36 = $[81];
+	let t37;
+	if ($[82] !== t) {
+		t37 = t("status");
+		$[82] = t;
+		$[83] = t37;
+	} else t37 = $[83];
+	let t38;
+	if ($[84] !== t37) {
+		t38 = /* @__PURE__ */ jsx(DataList.ItemLabel, { children: t37 });
+		$[84] = t37;
+		$[85] = t38;
+	} else t38 = $[85];
+	let t39;
+	if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
+		t39 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[86] = t39;
+	} else t39 = $[86];
+	let t40;
+	if ($[87] !== t) {
+		t40 = t("passed");
+		$[87] = t;
+		$[88] = t40;
+	} else t40 = $[88];
+	let t41;
+	if ($[89] !== t40) {
+		t41 = /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "success",
+			size: "inherit",
+			children: [t39, t40]
+		}) });
+		$[89] = t40;
+		$[90] = t41;
+	} else t41 = $[90];
+	let t42;
+	if ($[91] !== t38 || $[92] !== t41) {
+		t42 = /* @__PURE__ */ jsxs(DataList.Item, { children: [t38, t41] });
+		$[91] = t38;
+		$[92] = t41;
+		$[93] = t42;
+	} else t42 = $[93];
+	let t43;
+	if ($[94] !== t) {
+		t43 = FACTS$1.map((t44) => {
+			const [label, value] = t44;
+			return /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(label) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: t(value) })] }, label);
+		});
+		$[94] = t;
+		$[95] = t43;
+	} else t43 = $[95];
+	let t44;
+	if ($[96] !== t42 || $[97] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(DataList.Root, {
+			orientation: "horizontal",
+			size: "sm",
+			children: [t42, t43]
+		});
+		$[96] = t42;
+		$[97] = t43;
+		$[98] = t44;
+	} else t44 = $[98];
+	let t45;
+	if ($[99] !== t36 || $[100] !== t44) {
+		t45 = /* @__PURE__ */ jsx(Aside, {
+			width: "18rem",
+			children: /* @__PURE__ */ jsxs(Section, { children: [t36, t44] })
+		});
+		$[99] = t36;
+		$[100] = t44;
+		$[101] = t45;
+	} else t45 = $[101];
+	let t46;
+	if ($[102] !== t25 || $[103] !== t34 || $[104] !== t45) {
+		t46 = /* @__PURE__ */ jsxs(Body, { children: [
+			t25,
+			t26,
+			t34,
+			t45
+		] });
+		$[102] = t25;
+		$[103] = t34;
+		$[104] = t45;
+		$[105] = t46;
+	} else t46 = $[105];
+	let t47;
+	if ($[106] !== t) {
+		t47 = t("statusBar");
+		$[106] = t;
+		$[107] = t47;
+	} else t47 = $[107];
+	let t48;
+	if ($[108] === Symbol.for("react.memo_cache_sentinel")) {
+		t48 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[108] = t48;
+	} else t48 = $[108];
+	let t49;
+	if ($[109] !== t) {
+		t49 = t("connected");
+		$[109] = t;
+		$[110] = t49;
+	} else t49 = $[110];
+	let t50;
+	if ($[111] !== t49) {
+		t50 = /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "success",
+			size: "sm",
+			children: [t48, t49]
+		});
+		$[111] = t49;
+		$[112] = t50;
+	} else t50 = $[112];
+	let t51;
+	if ($[113] !== t) {
+		t51 = t("agents");
+		$[113] = t;
+		$[114] = t51;
+	} else t51 = $[114];
+	let t52;
+	if ($[115] !== t51) {
+		t52 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			tone: "muted",
+			children: t51
+		});
+		$[115] = t51;
+		$[116] = t52;
+	} else t52 = $[116];
+	let t53;
+	if ($[117] !== t47 || $[118] !== t50 || $[119] !== t52) {
+		t53 = /* @__PURE__ */ jsxs(Status$1, {
+			label: t47,
+			children: [t50, t52]
+		});
+		$[117] = t47;
+		$[118] = t50;
+		$[119] = t52;
+		$[120] = t53;
+	} else t53 = $[120];
+	let t54;
+	if ($[121] !== props || $[122] !== t13 || $[123] !== t46 || $[124] !== t53) {
+		t54 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [
+				t13,
+				t46,
+				t53
+			]
+		});
+		$[121] = props;
+		$[122] = t13;
+		$[123] = t46;
+		$[124] = t53;
+		$[125] = t54;
+	} else t54 = $[125];
+	return t54;
+}
+const source$9 = "import { type ReactElement, useId } from \"react\";\n\nimport {\n  GitBranchIcon,\n  LayersIcon,\n  MenuIcon,\n  PanelRightIcon,\n  PlayIcon,\n  SearchIcon,\n  SettingsIcon,\n  ShieldCheckIcon,\n} from \"lucide-react\";\n\nimport { DataList, Table } from \"@stealthscale/component-collections\";\nimport { Status } from \"@stealthscale/component-data\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Code, Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PAGES = [\n  [\"runs\", PlayIcon, \"page\", \"12\"],\n  [\"pipelines\", GitBranchIcon, undefined, undefined],\n  [\"approvals\", ShieldCheckIcon, undefined, \"3\"],\n  [\"environments\", LayersIcon, undefined, undefined],\n  [\"settings\", SettingsIcon, undefined, undefined],\n] as const;\n\nconst RUNS = [\n  [\"4128\", \"main\", \"success\", \"passed\", \"4m 12s\"],\n  [\"4127\", \"main\", \"success\", \"passed\", \"4m 34s\"],\n  [\"4126\", \"fix/retry\", \"error\", \"failed\", \"1m 08s\"],\n] as const;\n\nconst FACTS = [\n  [\"started\", \"clock\"],\n  [\"duration\", \"took\"],\n  [\"trigger\", \"push\"],\n] as const;\n\nexport function Console(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n  const runs = useId();\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"ledger\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item aria-label={t(\"navigation\")} as={AppShell.Trigger} shape=\"square\">\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"ledger\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Action primary>{t(\"newRun\")}</Toolbar.Action>\n            <Toolbar.Item\n              aria-label={t(\"details\")}\n              as={AppShell.Trigger}\n              panel=\"aside\"\n              shape=\"square\"\n            >\n              <PanelRightIcon />\n            </Toolbar.Item>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar collapse=\"icons\" foldsBelow=\"sm\" shortcut=\"b\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Header>\n              <Sidebar.Search\n                aria-label={t(\"findPage\")}\n                placeholder={t(\"filter\")}\n                searchIndicator={<SearchIcon />}\n              />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel>{t(\"platform\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {PAGES.map(([page, Glyph, current, count]) => (\n                    <NavList.Item key={page}>\n                      <NavList.Link aria-current={current} href={`#${page}`} tooltip={t(page)}>\n                        <Glyph />\n                        <span>{t(page)}</span>\n                      </NavList.Link>\n                      {count === undefined ? null : <NavList.Badge>{count}</NavList.Badge>}\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n            <Sidebar.Footer>\n              <Text size=\"sm\" tone=\"muted\">\n                {t(\"version\")}\n              </Text>\n            </Sidebar.Footer>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail />\n        <AppShell.Main>\n          <AppShell.Section>\n            <Heading as=\"h2\" id={runs} size=\"sm\">\n              {t(\"runs\")}\n            </Heading>\n            <Table.Scroller aria-labelledby={runs} size=\"sm\" variant=\"surface\">\n              <Table.Root>\n                <Table.Header>\n                  <Table.Row>\n                    {[\"run\", \"branch\", \"status\", \"duration\"].map((column) => (\n                      <Table.ColumnHeader key={column}>{t(column)}</Table.ColumnHeader>\n                    ))}\n                  </Table.Row>\n                </Table.Header>\n                <Table.Body>\n                  {RUNS.map(([run, branch, palette, state, took]) => (\n                    <Table.Row key={run}>\n                      <Table.RowHeader>#{run}</Table.RowHeader>\n                      <Table.Cell>\n                        <Code size=\"sm\">{branch}</Code>\n                      </Table.Cell>\n                      <Table.Cell>\n                        <Status.Root palette={palette} size=\"inherit\">\n                          <Status.Indicator />\n                          {t(state)}\n                        </Status.Root>\n                      </Table.Cell>\n                      <Table.Cell>{took}</Table.Cell>\n                    </Table.Row>\n                  ))}\n                </Table.Body>\n              </Table.Root>\n            </Table.Scroller>\n          </AppShell.Section>\n        </AppShell.Main>\n        <AppShell.Aside width=\"18rem\">\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"xs\">\n              {t(\"run4128\")}\n            </Heading>\n            <DataList.Root orientation=\"horizontal\" size=\"sm\">\n              <DataList.Item>\n                <DataList.ItemLabel>{t(\"status\")}</DataList.ItemLabel>\n                <DataList.ItemValue>\n                  <Status.Root palette=\"success\" size=\"inherit\">\n                    <Status.Indicator />\n                    {t(\"passed\")}\n                  </Status.Root>\n                </DataList.ItemValue>\n              </DataList.Item>\n              {FACTS.map(([label, value]) => (\n                <DataList.Item key={label}>\n                  <DataList.ItemLabel>{t(label)}</DataList.ItemLabel>\n                  <DataList.ItemValue>{t(value)}</DataList.ItemValue>\n                </DataList.Item>\n              ))}\n            </DataList.Root>\n          </AppShell.Section>\n        </AppShell.Aside>\n      </AppShell.Body>\n      <AppShell.Status label={t(\"statusBar\")}>\n        <Status.Root palette=\"success\" size=\"sm\">\n          <Status.Indicator />\n          {t(\"connected\")}\n        </Status.Root>\n        <Text as=\"span\" size=\"sm\" tone=\"muted\">\n          {t(\"agents\")}\n        </Text>\n      </AppShell.Status>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/files.example.tsx
+var files_example_exports = /* @__PURE__ */ __exportAll({
+	Files: () => Files,
+	source: () => source$8
+});
+const FOLDERS$1 = [
+	["contracts", "page"],
+	["invoices", void 0],
+	["receipts", void 0],
+	["reports", void 0]
+];
+const DOCUMENTS = [
+	"agreementNorthwind",
+	"orderLedger",
+	"renewalRelay"
+];
+const WIDTH = 240;
+function Files(props) {
+	const $ = c(65);
+	const { t } = useWords("app-shell");
+	const [width, setWidth] = useState(WIDTH);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("filesApp");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("moreFiles");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("folders");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t3,
+			as: Trigger,
+			panel: "folders",
+			shape: "square",
+			children: t4
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("filesApp");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t6
+		});
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t5 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Start, { children: [t5, t7] });
+		$[14] = t5;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t || $[18] !== width) {
+		t9 = t("foldersWidth", { width });
+		$[17] = t;
+		$[18] = width;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t9
+		});
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = () => {
+			setWidth(WIDTH);
+		};
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("resetWidth");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Action, {
+			onClick: t11,
+			children: t12
+		});
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t10 || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(End, { children: [t10, t13] });
+		$[27] = t10;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t0 || $[31] !== t1 || $[32] !== t14 || $[33] !== t8) {
+		t15 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			more: t1,
+			moreIcon: t2,
+			size: "sm",
+			children: [t8, t14]
+		}) });
+		$[30] = t0;
+		$[31] = t1;
+		$[32] = t14;
+		$[33] = t8;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== t) {
+		t16 = t("folders");
+		$[35] = t;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t16) {
+		t17 = /* @__PURE__ */ jsx(NavLabel, { children: t16 });
+		$[37] = t16;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t) {
+		t18 = FOLDERS$1.map((t19) => {
+			const [folder, current] = t19;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${folder}`,
+				children: [/* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: t(folder) })]
+			}) }, folder);
+		});
+		$[39] = t;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t18) {
+		t19 = /* @__PURE__ */ jsx(NavList.Root, { children: t18 });
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t17 || $[44] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t17, t19] }) }) });
+		$[43] = t17;
+		$[44] = t19;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t20 || $[47] !== width) {
+		t21 = /* @__PURE__ */ jsx(Navbar, {
+			maxSize: 360,
+			minSize: 200,
+			name: "folders",
+			onSizeChange: setWidth,
+			resizable: true,
+			size: width,
+			children: t20
+		});
+		$[46] = t20;
+		$[47] = width;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== t) {
+		t22 = t("resizeFolders");
+		$[49] = t;
+		$[50] = t22;
+	} else t22 = $[50];
+	let t23;
+	if ($[51] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Rail, {
+			panel: "folders",
+			resizeLabel: t22
+		});
+		$[51] = t22;
+		$[52] = t23;
+	} else t23 = $[52];
+	let t24;
+	if ($[53] !== t) {
+		t24 = DOCUMENTS.map((document) => /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(FileTextIcon, {
+				"aria-hidden": true,
+				size: "1em"
+			}), /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children: t(document)
+			})]
+		}, document));
+		$[53] = t;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Section, { children: t24 }) });
+		$[55] = t24;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t21 || $[58] !== t23 || $[59] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Body, { children: [
+			t21,
+			t23,
+			t25
+		] });
+		$[57] = t21;
+		$[58] = t23;
+		$[59] = t25;
+		$[60] = t26;
+	} else t26 = $[60];
+	let t27;
+	if ($[61] !== props || $[62] !== t15 || $[63] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [t15, t26]
+		});
+		$[61] = props;
+		$[62] = t15;
+		$[63] = t26;
+		$[64] = t27;
+	} else t27 = $[64];
+	return t27;
+}
+const source$8 = "import { type ReactElement, useState } from \"react\";\n\nimport { EllipsisIcon, FileTextIcon, FolderIcon, MenuIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst FOLDERS = [\n  [\"contracts\", \"page\"],\n  [\"invoices\", undefined],\n  [\"receipts\", undefined],\n  [\"reports\", undefined],\n] as const;\n\nconst DOCUMENTS = [\"agreementNorthwind\", \"orderLedger\", \"renewalRelay\"] as const;\n\nconst WIDTH = 240;\n\nexport function Files(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n  const [width, setWidth] = useState(WIDTH);\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <Toolbar.Root\n          aria-label={t(\"filesApp\")}\n          more={t(\"moreFiles\")}\n          moreIcon={<EllipsisIcon size=\"1em\" />}\n          size=\"sm\"\n        >\n          <Toolbar.Start>\n            <Toolbar.Item\n              aria-label={t(\"folders\")}\n              as={AppShell.Trigger}\n              panel=\"folders\"\n              shape=\"square\"\n            >\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"filesApp\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Text as=\"output\" size=\"sm\" tone=\"muted\">\n              {t(\"foldersWidth\", { width })}\n            </Text>\n            <Toolbar.Action\n              onClick={() => {\n                setWidth(WIDTH);\n              }}\n            >\n              {t(\"resetWidth\")}\n            </Toolbar.Action>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar\n          maxSize={360}\n          minSize={200}\n          name=\"folders\"\n          onSizeChange={setWidth}\n          resizable\n          size={width}\n        >\n          <Sidebar.Root>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel>{t(\"folders\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {FOLDERS.map(([folder, current]) => (\n                    <NavList.Item key={folder}>\n                      <NavList.Link aria-current={current} href={`#${folder}`}>\n                        <FolderIcon />\n                        <span>{t(folder)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail panel=\"folders\" resizeLabel={t(\"resizeFolders\")} />\n        <AppShell.Main>\n          <AppShell.Section>\n            {DOCUMENTS.map((document) => (\n              <Stack direction=\"row\" gap=\"xs\" key={document}>\n                <FileTextIcon aria-hidden size=\"1em\" />\n                <Text size=\"sm\">{t(document)}</Text>\n              </Stack>\n            ))}\n          </AppShell.Section>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/handbook.example.tsx
+var handbook_example_exports = /* @__PURE__ */ __exportAll({
+	Handbook: () => Handbook,
+	source: () => source$7
+});
+const CHAPTERS = [
+	[
+		"gettingStarted",
+		CompassIcon,
+		void 0
+	],
+	[
+		"workingHere",
+		BriefcaseIcon,
+		"page"
+	],
+	[
+		"tools",
+		WrenchIcon,
+		void 0
+	],
+	[
+		"onCall",
+		BookOpenIcon,
+		void 0
+	],
+	[
+		"leave",
+		CalendarIcon,
+		void 0
+	]
+];
+const SECTIONS$2 = [
+	"hours",
+	"meetings",
+	"writing"
+];
+function Handbook(props) {
+	const $ = c(59);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("handbookName");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(NavLabel, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = CHAPTERS.map((t3) => {
+			const [chapter, Glyph, current] = t3;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${chapter}`,
+				tooltip: t(chapter),
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(chapter) })]
+			}) }, chapter);
+		});
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(NavList.Root, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Navbar, {
+			collapse: "icons",
+			foldsBelow: "sm",
+			width: "13rem",
+			children: /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t1, t3] }) }) })
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Rail, {});
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("handbookBrand");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("navigation");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t7,
+			as: Trigger,
+			shape: "square",
+			children: t8
+		});
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("handbookBrand");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t10
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Start, { children: [t9, t11] });
+		$[23] = t11;
+		$[24] = t9;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12 || $[27] !== t6) {
+		t13 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Root, {
+			"aria-label": t6,
+			size: "sm",
+			children: t12
+		}) });
+		$[26] = t12;
+		$[27] = t6;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t) {
+		t14 = t("workingHere");
+		$[29] = t;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "md",
+			children: t14
+		});
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t) {
+		t16 = t("workingHereAbout");
+		$[33] = t;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t16
+		});
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t15 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Section, { children: [t15, t17] });
+		$[37] = t15;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t) {
+		t19 = SECTIONS$2.map((section) => /* @__PURE__ */ jsxs(Section, { children: [
+			/* @__PURE__ */ jsx(Heading, {
+				as: "h3",
+				size: "xs",
+				children: t(section)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children: t(`${section}One`)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children: t(`${section}Two`)
+			})
+		] }, section));
+		$[40] = t;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t18 || $[43] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Main, { children: [t18, t19] });
+		$[42] = t18;
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== t) {
+		t21 = t("update");
+		$[45] = t;
+		$[46] = t21;
+	} else t21 = $[46];
+	let t22;
+	if ($[47] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t21
+		}) });
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t13 || $[50] !== t20 || $[51] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Pane, { children: [
+			t13,
+			t20,
+			t22
+		] });
+		$[49] = t13;
+		$[50] = t20;
+		$[51] = t22;
+		$[52] = t23;
+	} else t23 = $[52];
+	let t24;
+	if ($[53] !== t23 || $[54] !== t4) {
+		t24 = /* @__PURE__ */ jsxs(Body, { children: [
+			t4,
+			t5,
+			t23
+		] });
+		$[53] = t23;
+		$[54] = t4;
+		$[55] = t24;
+	} else t24 = $[55];
+	let t25;
+	if ($[56] !== props || $[57] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Root$2, {
+			variant: "inset",
+			...props,
+			children: t24
+		});
+		$[56] = props;
+		$[57] = t24;
+		$[58] = t25;
+	} else t25 = $[58];
+	return t25;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport {\n  BookOpenIcon,\n  BriefcaseIcon,\n  CalendarIcon,\n  CompassIcon,\n  MenuIcon,\n  WrenchIcon,\n} from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst CHAPTERS = [\n  [\"gettingStarted\", CompassIcon, undefined],\n  [\"workingHere\", BriefcaseIcon, \"page\"],\n  [\"tools\", WrenchIcon, undefined],\n  [\"onCall\", BookOpenIcon, undefined],\n  [\"leave\", CalendarIcon, undefined],\n] as const;\n\nconst SECTIONS = [\"hours\", \"meetings\", \"writing\"] as const;\n\nexport function Handbook(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root variant=\"inset\" {...props}>\n      <AppShell.Body>\n        <AppShell.Navbar collapse=\"icons\" foldsBelow=\"sm\" width=\"13rem\">\n          <Sidebar.Root>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel>{t(\"handbookName\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {CHAPTERS.map(([chapter, Glyph, current]) => (\n                    <NavList.Item key={chapter}>\n                      <NavList.Link\n                        aria-current={current}\n                        href={`#${chapter}`}\n                        tooltip={t(chapter)}\n                      >\n                        <Glyph />\n                        <span>{t(chapter)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail />\n        <AppShell.Pane>\n          <AppShell.Header>\n            <Toolbar.Root aria-label={t(\"handbookBrand\")} size=\"sm\">\n              <Toolbar.Start>\n                <Toolbar.Item aria-label={t(\"navigation\")} as={AppShell.Trigger} shape=\"square\">\n                  <MenuIcon />\n                </Toolbar.Item>\n                <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n                  {t(\"handbookBrand\")}\n                </Text>\n              </Toolbar.Start>\n            </Toolbar.Root>\n          </AppShell.Header>\n          <AppShell.Main>\n            <AppShell.Section>\n              <Heading as=\"h2\" size=\"md\">\n                {t(\"workingHere\")}\n              </Heading>\n              <Text size=\"sm\" tone=\"muted\">\n                {t(\"workingHereAbout\")}\n              </Text>\n            </AppShell.Section>\n            {SECTIONS.map((section) => (\n              <AppShell.Section key={section}>\n                <Heading as=\"h3\" size=\"xs\">\n                  {t(section)}\n                </Heading>\n                <Text size=\"sm\">{t(`${section}One`)}</Text>\n                <Text size=\"sm\">{t(`${section}Two`)}</Text>\n              </AppShell.Section>\n            ))}\n          </AppShell.Main>\n          <AppShell.Footer>\n            <Text size=\"sm\" tone=\"muted\">\n              {t(\"update\")}\n            </Text>\n          </AppShell.Footer>\n        </AppShell.Pane>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/journal.example.tsx
+var journal_example_exports = /* @__PURE__ */ __exportAll({
+	Journal: () => Journal,
+	source: () => source$6
+});
+const SECTIONS$1 = [
+	[
+		"journal-moved",
+		"whyMoved",
+		"moved"
+	],
+	[
+		"journal-broke",
+		"whatBroke",
+		"broke"
+	],
+	[
+		"journal-kept",
+		"whatKept",
+		"kept"
+	],
+	[
+		"journal-next",
+		"whatNext",
+		"next"
+	]
+];
+const ITEMS = SECTIONS$1.map(([value]) => ({
+	depth: 2,
+	value
+}));
+function Journal(props) {
+	const $ = c(45);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("journalBrand");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("contents");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t1,
+			as: Trigger,
+			panel: "contents",
+			shape: "square",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("journalBrand");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("subscribe");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t7
+		}) });
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t0 || $[19] !== t6 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Header, {
+			sticky: true,
+			children: /* @__PURE__ */ jsxs(Root, {
+				"aria-label": t0,
+				size: "sm",
+				children: [t6, t8]
+			})
+		});
+		$[18] = t0;
+		$[19] = t6;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t) {
+		t10 = t("contents");
+		$[22] = t;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Toc.Title, { children: t10 });
+		$[24] = t10;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(Toc.Indicator, {});
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t) {
+		t13 = SECTIONS$1.map((t14) => {
+			const [value, heading] = t14;
+			return /* @__PURE__ */ jsx(Toc.Item, {
+				item: {
+					depth: 2,
+					value
+				},
+				children: /* @__PURE__ */ jsx(Toc.Link, {
+					href: `#${value}`,
+					item: {
+						depth: 2,
+						value
+					},
+					children: t(heading)
+				})
+			}, value);
+		});
+		$[27] = t;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Toc.List, { children: [t12, t13] });
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t11 || $[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "sm",
+			name: "contents",
+			width: "12rem",
+			children: /* @__PURE__ */ jsx(Section, {
+				grows: true,
+				scrolls: true,
+				children: /* @__PURE__ */ jsxs(Toc.Root, {
+					items: ITEMS,
+					size: "sm",
+					children: [t11, t14]
+				})
+			})
+		});
+		$[31] = t11;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = SECTIONS$1.map((t17) => {
+			const [value_0, heading_0, body] = t17;
+			return /* @__PURE__ */ jsxs(Section, { children: [
+				/* @__PURE__ */ jsx(Heading, {
+					as: "h2",
+					id: value_0,
+					size: "xs",
+					children: t(heading_0)
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					children: t(`${body}One`)
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					children: t(`${body}Two`)
+				})
+			] }, value_0);
+		});
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Main, { children: t16 });
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t15 || $[39] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Body, { children: [t15, t17] });
+		$[38] = t15;
+		$[39] = t17;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== props || $[42] !== t18 || $[43] !== t9) {
+		t19 = /* @__PURE__ */ jsxs(Root$2, {
+			scroll: "window",
+			...props,
+			children: [t9, t18]
+		});
+		$[41] = props;
+		$[42] = t18;
+		$[43] = t9;
+		$[44] = t19;
+	} else t19 = $[44];
+	return t19;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { MenuIcon } from \"lucide-react\";\n\nimport { Toc } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Toolbar } from \"@stealthscale/component-screen\";\n\nconst SECTIONS = [\n  [\"journal-moved\", \"whyMoved\", \"moved\"],\n  [\"journal-broke\", \"whatBroke\", \"broke\"],\n  [\"journal-kept\", \"whatKept\", \"kept\"],\n  [\"journal-next\", \"whatNext\", \"next\"],\n] as const;\n\nconst ITEMS: Toc.TocItem[] = SECTIONS.map(([value]) => ({ depth: 2, value }));\n\nexport function Journal(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root scroll=\"window\" {...props}>\n      <AppShell.Header sticky>\n        <Toolbar.Root aria-label={t(\"journalBrand\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item\n              aria-label={t(\"contents\")}\n              as={AppShell.Trigger}\n              panel=\"contents\"\n              shape=\"square\"\n            >\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"journalBrand\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Action primary>{t(\"subscribe\")}</Toolbar.Action>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar foldsBelow=\"sm\" name=\"contents\" width=\"12rem\">\n          <AppShell.Section grows scrolls>\n            <Toc.Root items={ITEMS} size=\"sm\">\n              <Toc.Title>{t(\"contents\")}</Toc.Title>\n              <Toc.List>\n                <Toc.Indicator />\n                {SECTIONS.map(([value, heading]) => (\n                  <Toc.Item item={{ depth: 2, value }} key={value}>\n                    <Toc.Link href={`#${value}`} item={{ depth: 2, value }}>\n                      {t(heading)}\n                    </Toc.Link>\n                  </Toc.Item>\n                ))}\n              </Toc.List>\n            </Toc.Root>\n          </AppShell.Section>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          {SECTIONS.map(([value, heading, body]) => (\n            <AppShell.Section key={value}>\n              <Heading as=\"h2\" id={value} size=\"xs\">\n                {t(heading)}\n              </Heading>\n              <Text size=\"sm\">{t(`${body}One`)}</Text>\n              <Text size=\"sm\">{t(`${body}Two`)}</Text>\n            </AppShell.Section>\n          ))}\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/mail.example.tsx
+var mail_example_exports = /* @__PURE__ */ __exportAll({
+	Mail: () => Mail,
+	source: () => source$5
+});
+const FOLDERS = [
+	[
+		"inbox",
+		InboxIcon,
+		"page",
+		"12"
+	],
+	[
+		"starred",
+		StarIcon,
+		void 0,
+		void 0
+	],
+	[
+		"sent",
+		SendIcon,
+		void 0,
+		void 0
+	],
+	[
+		"archive",
+		ArchiveIcon,
+		void 0,
+		void 0
+	],
+	[
+		"spam",
+		ShieldAlertIcon,
+		void 0,
+		"3"
+	]
+];
+const MAIL = [
+	"invoiceOverdue",
+	"offsite",
+	"buildFailed",
+	"lunch"
+];
+const ACTIONS = [
+	["reply", ReplyIcon],
+	["forward", ForwardIcon],
+	["archive", ArchiveIcon]
+];
+function Mail(props) {
+	const $ = c(97);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = MAIL.map((id) => ({
+			from: t(`${id}From`),
+			id,
+			subject: t(id)
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$1,
+			itemToValue: _temp2,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("post");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("folders");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t3,
+			as: Trigger,
+			panel: "folders",
+			shape: "square",
+			children: t4
+		});
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("post");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t6
+		});
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Start, { children: [t5, t7] });
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("compose");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t9
+		}) });
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10 || $[23] !== t2 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t2,
+			size: "sm",
+			children: [t8, t10]
+		}) });
+		$[22] = t10;
+		$[23] = t2;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("folders");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t) {
+		t13 = FOLDERS.map((t14) => {
+			const [folder, Glyph, current, count] = t14;
+			return /* @__PURE__ */ jsxs(NavList.Item, { children: [/* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${folder}`,
+				tooltip: t(folder),
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(folder) })]
+			}), count === void 0 ? null : /* @__PURE__ */ jsx(NavList.Badge, { children: count })] }, folder);
+		});
+		$[28] = t;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t13) {
+		t14 = /* @__PURE__ */ jsx(NavList.Root, { children: t13 });
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t12 || $[33] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Navbar, {
+			collapse: "icons",
+			foldsBelow: "sm",
+			name: "folders",
+			width: "11rem",
+			children: /* @__PURE__ */ jsx(Root$1, {
+				variant: "subtle",
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Nav, {
+					"aria-label": t12,
+					children: t14
+				}) })
+			})
+		});
+		$[32] = t12;
+		$[33] = t14;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(Rail, { panel: "folders" });
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = ["invoiceOverdue"];
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t) {
+		t18 = t("inbox");
+		$[37] = t;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== collection || $[41] !== t18) {
+		t20 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "sm",
+			name: "list",
+			width: "16rem",
+			children: /* @__PURE__ */ jsx(Section, {
+				grows: true,
+				scrolls: true,
+				children: /* @__PURE__ */ jsx(Listbox.Simple, {
+					collection,
+					defaultValue: t17,
+					description: _temp3,
+					label: t18,
+					mark: t19,
+					size: "sm"
+				})
+			})
+		});
+		$[40] = collection;
+		$[41] = t18;
+		$[42] = t20;
+	} else t20 = $[42];
+	let t21;
+	if ($[43] !== t) {
+		t21 = t("messageActions");
+		$[43] = t;
+		$[44] = t21;
+	} else t21 = $[44];
+	let t22;
+	if ($[45] !== t) {
+		t22 = ACTIONS.map((t23) => {
+			const [action, Glyph_0] = t23;
+			return /* @__PURE__ */ jsx(Action, {
+				icon: /* @__PURE__ */ jsx(Glyph_0, {}),
+				children: t(action)
+			}, action);
+		});
+		$[45] = t;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Start, { children: t22 });
+		$[47] = t22;
+		$[48] = t23;
+	} else t23 = $[48];
+	let t24;
+	if ($[49] !== t21 || $[50] !== t23) {
+		t24 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t21,
+			size: "sm",
+			children: t23
+		});
+		$[49] = t21;
+		$[50] = t23;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t) {
+		t25 = t("invoiceOverdue");
+		$[52] = t;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "sm",
+			children: t25
+		});
+		$[54] = t25;
+		$[55] = t26;
+	} else t26 = $[55];
+	let t27;
+	if ($[56] !== t) {
+		t27 = t("accounts");
+		$[56] = t;
+		$[57] = t27;
+	} else t27 = $[57];
+	let t28;
+	if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(Avatar.Fallback, {});
+		$[58] = t28;
+	} else t28 = $[58];
+	let t29;
+	if ($[59] !== t27) {
+		t29 = /* @__PURE__ */ jsx(Avatar.Root, {
+			"aria-hidden": true,
+			name: t27,
+			palette: "accent",
+			size: "sm",
+			children: t28
+		});
+		$[59] = t27;
+		$[60] = t29;
+	} else t29 = $[60];
+	let t30;
+	if ($[61] !== t) {
+		t30 = t("accounts");
+		$[61] = t;
+		$[62] = t30;
+	} else t30 = $[62];
+	let t31;
+	if ($[63] !== t30) {
+		t31 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			weight: "semibold",
+			children: t30
+		});
+		$[63] = t30;
+		$[64] = t31;
+	} else t31 = $[64];
+	let t32;
+	if ($[65] !== t) {
+		t32 = t("accountsWhen");
+		$[65] = t;
+		$[66] = t32;
+	} else t32 = $[66];
+	let t33;
+	if ($[67] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Text, {
+			size: "xs",
+			tone: "muted",
+			children: t32
+		});
+		$[67] = t32;
+		$[68] = t33;
+	} else t33 = $[68];
+	let t34;
+	if ($[69] !== t31 || $[70] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [t31, t33]
+		});
+		$[69] = t31;
+		$[70] = t33;
+		$[71] = t34;
+	} else t34 = $[71];
+	let t35;
+	if ($[72] !== t29 || $[73] !== t34) {
+		t35 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			children: [t29, t34]
+		});
+		$[72] = t29;
+		$[73] = t34;
+		$[74] = t35;
+	} else t35 = $[74];
+	let t36;
+	if ($[75] !== t) {
+		t36 = t("invoiceBody");
+		$[75] = t;
+		$[76] = t36;
+	} else t36 = $[76];
+	let t37;
+	if ($[77] !== t36) {
+		t37 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t36
+		});
+		$[77] = t36;
+		$[78] = t37;
+	} else t37 = $[78];
+	let t38;
+	if ($[79] !== t) {
+		t38 = t("invoiceThanks");
+		$[79] = t;
+		$[80] = t38;
+	} else t38 = $[80];
+	let t39;
+	if ($[81] !== t38) {
+		t39 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t38
+		});
+		$[81] = t38;
+		$[82] = t39;
+	} else t39 = $[82];
+	let t40;
+	if ($[83] !== t24 || $[84] !== t26 || $[85] !== t35 || $[86] !== t37 || $[87] !== t39) {
+		t40 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [
+			t24,
+			t26,
+			t35,
+			t37,
+			t39
+		] }) });
+		$[83] = t24;
+		$[84] = t26;
+		$[85] = t35;
+		$[86] = t37;
+		$[87] = t39;
+		$[88] = t40;
+	} else t40 = $[88];
+	let t41;
+	if ($[89] !== t15 || $[90] !== t20 || $[91] !== t40) {
+		t41 = /* @__PURE__ */ jsxs(Body, { children: [
+			t15,
+			t16,
+			t20,
+			t40
+		] });
+		$[89] = t15;
+		$[90] = t20;
+		$[91] = t40;
+		$[92] = t41;
+	} else t41 = $[92];
+	let t42;
+	if ($[93] !== props || $[94] !== t11 || $[95] !== t41) {
+		t42 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [t11, t41]
+		});
+		$[93] = props;
+		$[94] = t11;
+		$[95] = t41;
+		$[96] = t42;
+	} else t42 = $[96];
+	return t42;
+}
+function _temp3(message_1) {
+	return message_1.from;
+}
+function _temp2(message_0) {
+	return message_0.id;
+}
+function _temp$1(message) {
+	return message.subject;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport {\n  ArchiveIcon,\n  CheckIcon,\n  ForwardIcon,\n  InboxIcon,\n  MenuIcon,\n  ReplyIcon,\n  SendIcon,\n  ShieldAlertIcon,\n  StarIcon,\n} from \"lucide-react\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\ninterface Message {\n  readonly from: string;\n  readonly id: string;\n  readonly subject: string;\n}\n\nconst FOLDERS = [\n  [\"inbox\", InboxIcon, \"page\", \"12\"],\n  [\"starred\", StarIcon, undefined, undefined],\n  [\"sent\", SendIcon, undefined, undefined],\n  [\"archive\", ArchiveIcon, undefined, undefined],\n  [\"spam\", ShieldAlertIcon, undefined, \"3\"],\n] as const;\n\nconst MAIL = [\"invoiceOverdue\", \"offsite\", \"buildFailed\", \"lunch\"] as const;\n\nconst ACTIONS = [\n  [\"reply\", ReplyIcon],\n  [\"forward\", ForwardIcon],\n  [\"archive\", ArchiveIcon],\n] as const;\n\nexport function Mail(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n  const { collection } = useListCollection<Message>({\n    itemToString: (message) => message.subject,\n    itemToValue: (message) => message.id,\n    rows: MAIL.map((id) => ({ from: t(`${id}From`), id, subject: t(id) })),\n  });\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"post\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item\n              aria-label={t(\"folders\")}\n              as={AppShell.Trigger}\n              panel=\"folders\"\n              shape=\"square\"\n            >\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"post\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Action primary>{t(\"compose\")}</Toolbar.Action>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar collapse=\"icons\" foldsBelow=\"sm\" name=\"folders\" width=\"11rem\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Content>\n              <Sidebar.Nav aria-label={t(\"folders\")}>\n                <NavList.Root>\n                  {FOLDERS.map(([folder, Glyph, current, count]) => (\n                    <NavList.Item key={folder}>\n                      <NavList.Link aria-current={current} href={`#${folder}`} tooltip={t(folder)}>\n                        <Glyph />\n                        <span>{t(folder)}</span>\n                      </NavList.Link>\n                      {count === undefined ? null : <NavList.Badge>{count}</NavList.Badge>}\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail panel=\"folders\" />\n        <AppShell.Navbar foldsBelow=\"sm\" name=\"list\" width=\"16rem\">\n          <AppShell.Section grows scrolls>\n            <Listbox.Simple<Message>\n              collection={collection}\n              defaultValue={[\"invoiceOverdue\"]}\n              description={(message) => message.from}\n              label={t(\"inbox\")}\n              mark={<CheckIcon size=\"100%\" />}\n              size=\"sm\"\n            />\n          </AppShell.Section>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Toolbar.Root aria-label={t(\"messageActions\")} size=\"sm\">\n              <Toolbar.Start>\n                {ACTIONS.map(([action, Glyph]) => (\n                  <Toolbar.Action icon={<Glyph />} key={action}>\n                    {t(action)}\n                  </Toolbar.Action>\n                ))}\n              </Toolbar.Start>\n            </Toolbar.Root>\n            <Heading as=\"h2\" size=\"sm\">\n              {t(\"invoiceOverdue\")}\n            </Heading>\n            <Stack direction=\"row\" gap=\"sm\">\n              <Avatar.Root aria-hidden name={t(\"accounts\")} palette=\"accent\" size=\"sm\">\n                <Avatar.Fallback />\n              </Avatar.Root>\n              <Stack gap=\"xs\">\n                <Text size=\"sm\" weight=\"semibold\">\n                  {t(\"accounts\")}\n                </Text>\n                <Text size=\"xs\" tone=\"muted\">\n                  {t(\"accountsWhen\")}\n                </Text>\n              </Stack>\n            </Stack>\n            <Text size=\"sm\">{t(\"invoiceBody\")}</Text>\n            <Text size=\"sm\">{t(\"invoiceThanks\")}</Text>\n          </AppShell.Section>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/player.example.tsx
+var player_example_exports = /* @__PURE__ */ __exportAll({
+	Player: () => Player,
+	source: () => source$4
+});
+const PLACES = [
+	[
+		"library",
+		LibraryIcon,
+		"page"
+	],
+	[
+		"playlists",
+		ListMusicIcon,
+		void 0
+	],
+	[
+		"radio",
+		RadioIcon,
+		void 0
+	]
+];
+const TRACKS = [
+	[
+		"Northern Lights",
+		"Halden Quartet",
+		"4:05"
+	],
+	[
+		"Tidewater",
+		"Mara Okafor",
+		"3:41"
+	],
+	[
+		"Slow Harbour",
+		"The Ledger Band",
+		"5:12"
+	],
+	[
+		"Paper Kites",
+		"Jonas Berg",
+		"2:58"
+	],
+	[
+		"Ember and Ash",
+		"Halden Quartet",
+		"4:27"
+	],
+	[
+		"Glasswork",
+		"Lantern",
+		"3:33"
+	],
+	[
+		"Low Tide",
+		"Mara Okafor",
+		"4:49"
+	],
+	[
+		"Coastline",
+		"Pebble",
+		"3:15"
+	],
+	[
+		"Night Shift",
+		"The Ledger Band",
+		"6:02"
+	],
+	[
+		"Quiet Hours",
+		"Lantern",
+		"4:11"
+	],
+	[
+		"First Light",
+		"Jonas Berg",
+		"3:07"
+	],
+	[
+		"Driftwood",
+		"Pebble",
+		"5:36"
+	]
+];
+const CONTROLS = [
+	["previous", SkipBackIcon],
+	["pause", PauseIcon],
+	["next", SkipForwardIcon]
+];
+function Player(props) {
+	const $ = c(77);
+	const { t } = useWords("app-shell");
+	const library = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("tracks");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("navigation");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t1,
+			as: Trigger,
+			shape: "square",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("tracks");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t0 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Header, {
+			sticky: true,
+			children: /* @__PURE__ */ jsx(Root, {
+				"aria-label": t0,
+				size: "sm",
+				children: t6
+			})
+		});
+		$[14] = t0;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t) {
+		t8 = t("tracks");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = PLACES.map((t10) => {
+			const [place, Glyph, current] = t10;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${place}`,
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(place) })]
+			}) }, place);
+		});
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(NavList.Root, { children: t9 });
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsx(Navbar, {
+			foldsBelow: "sm",
+			width: "11rem",
+			children: /* @__PURE__ */ jsx(Root$1, {
+				variant: "subtle",
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Nav, {
+					"aria-label": t8,
+					children: t10
+				}) })
+			})
+		});
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("library");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== library || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			id: library,
+			size: "sm",
+			children: t12
+		});
+		$[28] = library;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== t) {
+		t14 = /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: [
+			"trackTitle",
+			"artist",
+			"length"
+		].map((column) => /* @__PURE__ */ jsx(Table.ColumnHeader, { children: t(column) }, column)) }) });
+		$[31] = t;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(Table.Body, { children: TRACKS.map(_temp) });
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t14) {
+		t16 = /* @__PURE__ */ jsxs(Table.Root, { children: [t14, t15] });
+		$[34] = t14;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== library || $[37] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Table.Scroller, {
+			"aria-labelledby": library,
+			size: "sm",
+			children: t16
+		});
+		$[36] = library;
+		$[37] = t16;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t13 || $[40] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [t13, t17] }) });
+		$[39] = t13;
+		$[40] = t17;
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] !== t11 || $[43] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Body, { children: [t11, t18] });
+		$[42] = t11;
+		$[43] = t18;
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== t) {
+		t20 = t("position");
+		$[45] = t;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] !== t) {
+		t21 = t("played");
+		$[47] = t;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(Progress.Range, {});
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== t20 || $[51] !== t21) {
+		t23 = /* @__PURE__ */ jsx(Progress.Root, {
+			max: 245,
+			size: "xs",
+			value: 161,
+			children: /* @__PURE__ */ jsx(Progress.Track, {
+				"aria-label": t20,
+				"aria-valuetext": t21,
+				children: t22
+			})
+		});
+		$[50] = t20;
+		$[51] = t21;
+		$[52] = t23;
+	} else t23 = $[52];
+	let t24;
+	if ($[53] !== t) {
+		t24 = t("playback");
+		$[53] = t;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== t) {
+		t25 = CONTROLS.map((t26) => {
+			const [control, Glyph_0] = t26;
+			return /* @__PURE__ */ jsx(Item, {
+				"aria-label": t(control),
+				as: IconButton,
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(Glyph_0, {})
+			}, control);
+		});
+		$[55] = t;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Start, { children: t25 });
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(Span, {
+			weight: "semibold",
+			children: TRACKS[0][0]
+		});
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsxs(Text, {
+			as: "span",
+			size: "sm",
+			children: [
+				t27,
+				" ",
+				/* @__PURE__ */ jsx(Span, {
+					tone: "muted",
+					children: TRACKS[0][1]
+				})
+			]
+		}) });
+		$[60] = t28;
+	} else t28 = $[60];
+	let t29;
+	if ($[61] !== t) {
+		t29 = t("time");
+		$[61] = t;
+		$[62] = t29;
+	} else t29 = $[62];
+	let t30;
+	if ($[63] !== t29) {
+		t30 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			tone: "muted",
+			children: t29
+		}) });
+		$[63] = t29;
+		$[64] = t30;
+	} else t30 = $[64];
+	let t31;
+	if ($[65] !== t24 || $[66] !== t26 || $[67] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t24,
+			size: "sm",
+			children: [
+				t26,
+				t28,
+				t30
+			]
+		});
+		$[65] = t24;
+		$[66] = t26;
+		$[67] = t30;
+		$[68] = t31;
+	} else t31 = $[68];
+	let t32;
+	if ($[69] !== t23 || $[70] !== t31) {
+		t32 = /* @__PURE__ */ jsx(Footer, {
+			sticky: true,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [t23, t31]
+			})
+		});
+		$[69] = t23;
+		$[70] = t31;
+		$[71] = t32;
+	} else t32 = $[71];
+	let t33;
+	if ($[72] !== props || $[73] !== t19 || $[74] !== t32 || $[75] !== t7) {
+		t33 = /* @__PURE__ */ jsxs(Root$2, {
+			scroll: "window",
+			...props,
+			children: [
+				t7,
+				t19,
+				t32
+			]
+		});
+		$[72] = props;
+		$[73] = t19;
+		$[74] = t32;
+		$[75] = t7;
+		$[76] = t33;
+	} else t33 = $[76];
+	return t33;
+}
+function _temp(t0) {
+	const [title, artist, length] = t0;
+	return /* @__PURE__ */ jsxs(Table.Row, { children: [
+		/* @__PURE__ */ jsx(Table.RowHeader, { children: title }),
+		/* @__PURE__ */ jsx(Table.Cell, { children: artist }),
+		/* @__PURE__ */ jsx(Table.Cell, { children: length })
+	] }, title);
+}
+const source$4 = "import { type ReactElement, useId } from \"react\";\n\nimport {\n  LibraryIcon,\n  ListMusicIcon,\n  MenuIcon,\n  PauseIcon,\n  RadioIcon,\n  SkipBackIcon,\n  SkipForwardIcon,\n} from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Table } from \"@stealthscale/component-collections\";\nimport { Progress } from \"@stealthscale/component-feedback\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Heading, Span, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PLACES = [\n  [\"library\", LibraryIcon, \"page\"],\n  [\"playlists\", ListMusicIcon, undefined],\n  [\"radio\", RadioIcon, undefined],\n] as const;\n\nconst TRACKS = [\n  [\"Northern Lights\", \"Halden Quartet\", \"4:05\"],\n  [\"Tidewater\", \"Mara Okafor\", \"3:41\"],\n  [\"Slow Harbour\", \"The Ledger Band\", \"5:12\"],\n  [\"Paper Kites\", \"Jonas Berg\", \"2:58\"],\n  [\"Ember and Ash\", \"Halden Quartet\", \"4:27\"],\n  [\"Glasswork\", \"Lantern\", \"3:33\"],\n  [\"Low Tide\", \"Mara Okafor\", \"4:49\"],\n  [\"Coastline\", \"Pebble\", \"3:15\"],\n  [\"Night Shift\", \"The Ledger Band\", \"6:02\"],\n  [\"Quiet Hours\", \"Lantern\", \"4:11\"],\n  [\"First Light\", \"Jonas Berg\", \"3:07\"],\n  [\"Driftwood\", \"Pebble\", \"5:36\"],\n] as const;\n\nconst CONTROLS = [\n  [\"previous\", SkipBackIcon],\n  [\"pause\", PauseIcon],\n  [\"next\", SkipForwardIcon],\n] as const;\n\nexport function Player(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n  const library = useId();\n\n  return (\n    <AppShell.Root scroll=\"window\" {...props}>\n      <AppShell.Header sticky>\n        <Toolbar.Root aria-label={t(\"tracks\")} size=\"sm\">\n          <Toolbar.Start>\n            <Toolbar.Item aria-label={t(\"navigation\")} as={AppShell.Trigger} shape=\"square\">\n              <MenuIcon />\n            </Toolbar.Item>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"tracks\")}\n            </Text>\n          </Toolbar.Start>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar foldsBelow=\"sm\" width=\"11rem\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Content>\n              <Sidebar.Nav aria-label={t(\"tracks\")}>\n                <NavList.Root>\n                  {PLACES.map(([place, Glyph, current]) => (\n                    <NavList.Item key={place}>\n                      <NavList.Link aria-current={current} href={`#${place}`}>\n                        <Glyph />\n                        <span>{t(place)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Heading as=\"h2\" id={library} size=\"sm\">\n              {t(\"library\")}\n            </Heading>\n            <Table.Scroller aria-labelledby={library} size=\"sm\">\n              <Table.Root>\n                <Table.Header>\n                  <Table.Row>\n                    {[\"trackTitle\", \"artist\", \"length\"].map((column) => (\n                      <Table.ColumnHeader key={column}>{t(column)}</Table.ColumnHeader>\n                    ))}\n                  </Table.Row>\n                </Table.Header>\n                <Table.Body>\n                  {TRACKS.map(([title, artist, length]) => (\n                    <Table.Row key={title}>\n                      <Table.RowHeader>{title}</Table.RowHeader>\n                      <Table.Cell>{artist}</Table.Cell>\n                      <Table.Cell>{length}</Table.Cell>\n                    </Table.Row>\n                  ))}\n                </Table.Body>\n              </Table.Root>\n            </Table.Scroller>\n          </AppShell.Section>\n        </AppShell.Main>\n      </AppShell.Body>\n      <AppShell.Footer sticky>\n        <Stack gap=\"xs\">\n          <Progress.Root max={245} size=\"xs\" value={161}>\n            <Progress.Track aria-label={t(\"position\")} aria-valuetext={t(\"played\")}>\n              <Progress.Range />\n            </Progress.Track>\n          </Progress.Root>\n          <Toolbar.Root aria-label={t(\"playback\")} size=\"sm\">\n            <Toolbar.Start>\n              {CONTROLS.map(([control, Glyph]) => (\n                <Toolbar.Item aria-label={t(control)} as={IconButton} key={control} variant=\"ghost\">\n                  <Glyph />\n                </Toolbar.Item>\n              ))}\n            </Toolbar.Start>\n            <Toolbar.Center>\n              <Text as=\"span\" size=\"sm\">\n                <Span weight=\"semibold\">{TRACKS[0][0]}</Span>{\" \"}\n                <Span tone=\"muted\">{TRACKS[0][1]}</Span>\n              </Text>\n            </Toolbar.Center>\n            <Toolbar.End>\n              <Text as=\"span\" size=\"sm\" tone=\"muted\">\n                {t(\"time\")}\n              </Text>\n            </Toolbar.End>\n          </Toolbar.Root>\n        </Stack>\n      </AppShell.Footer>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/reader.example.tsx
+var reader_example_exports = /* @__PURE__ */ __exportAll({
+	Reader: () => Reader,
+	source: () => source$3
+});
+const NOTES = [
+	"retries",
+	"idempotency",
+	"outage"
+];
+const TOPICS = ["reliability", "queues"];
+function Reader(props) {
+	const $ = c(71);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("fieldNotes");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("fieldNotes");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("related");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Item, {
+			as: Trigger,
+			panel: "aside",
+			children: t3
+		}) });
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t0 || $[11] !== t2 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t2, t4]
+		}) });
+		$[10] = t0;
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t) {
+		t6 = t("whyMoved");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "md",
+			children: t6
+		});
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t) {
+		t8 = t("byline");
+		$[18] = t;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t8
+		});
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t) {
+		t10 = t("movedOne");
+		$[22] = t;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t10
+		});
+		$[24] = t10;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("movedQuote");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Blockquote.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Blockquote.Content, { children: t12 })
+		});
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("whatBroke");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			size: "xs",
+			children: t14
+		});
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = t("brokeOne");
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t16
+		});
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t) {
+		t18 = t("brokeTwo");
+		$[38] = t;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t18
+		});
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t11 || $[43] !== t13 || $[44] !== t15 || $[45] !== t17 || $[46] !== t19 || $[47] !== t7 || $[48] !== t9) {
+		t20 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [
+			t7,
+			t9,
+			t11,
+			t13,
+			t15,
+			t17,
+			t19
+		] }) });
+		$[42] = t11;
+		$[43] = t13;
+		$[44] = t15;
+		$[45] = t17;
+		$[46] = t19;
+		$[47] = t7;
+		$[48] = t9;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] !== t) {
+		t21 = t("related");
+		$[50] = t;
+		$[51] = t21;
+	} else t21 = $[51];
+	let t22;
+	if ($[52] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t21
+		});
+		$[52] = t21;
+		$[53] = t22;
+	} else t22 = $[53];
+	let t23;
+	if ($[54] !== t) {
+		t23 = NOTES.map((note) => /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Link, {
+				href: `#${note}`,
+				children: t(note)
+			})
+		}, note));
+		$[54] = t;
+		$[55] = t23;
+	} else t23 = $[55];
+	let t24;
+	if ($[56] !== t) {
+		t24 = TOPICS.map((topic) => /* @__PURE__ */ jsx(Tag.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Tag.Label, { children: t(topic) })
+		}, topic));
+		$[56] = t;
+		$[57] = t24;
+	} else t24 = $[57];
+	let t25;
+	if ($[58] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "xs",
+			wrap: true,
+			children: t24
+		});
+		$[58] = t24;
+		$[59] = t25;
+	} else t25 = $[59];
+	let t26;
+	if ($[60] !== t22 || $[61] !== t23 || $[62] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Aside, {
+			folds: "under",
+			width: "15rem",
+			children: /* @__PURE__ */ jsxs(Section, { children: [
+				t22,
+				t23,
+				t25
+			] })
+		});
+		$[60] = t22;
+		$[61] = t23;
+		$[62] = t25;
+		$[63] = t26;
+	} else t26 = $[63];
+	let t27;
+	if ($[64] !== t20 || $[65] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Body, { children: [t20, t26] });
+		$[64] = t20;
+		$[65] = t26;
+		$[66] = t27;
+	} else t27 = $[66];
+	let t28;
+	if ($[67] !== props || $[68] !== t27 || $[69] !== t5) {
+		t28 = /* @__PURE__ */ jsxs(Root$2, {
+			content: "constrained",
+			...props,
+			children: [t5, t27]
+		});
+		$[67] = props;
+		$[68] = t27;
+		$[69] = t5;
+		$[70] = t28;
+	} else t28 = $[70];
+	return t28;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Tag } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { Blockquote, Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Toolbar } from \"@stealthscale/component-screen\";\n\nconst NOTES = [\"retries\", \"idempotency\", \"outage\"] as const;\n\nconst TOPICS = [\"reliability\", \"queues\"] as const;\n\nexport function Reader(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root content=\"constrained\" {...props}>\n      <AppShell.Header>\n        <Toolbar.Root aria-label={t(\"fieldNotes\")} size=\"sm\">\n          <Toolbar.Start>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"fieldNotes\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Item as={AppShell.Trigger} panel=\"aside\">\n              {t(\"related\")}\n            </Toolbar.Item>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"md\">\n              {t(\"whyMoved\")}\n            </Heading>\n            <Text size=\"sm\" tone=\"muted\">\n              {t(\"byline\")}\n            </Text>\n            <Text size=\"sm\">{t(\"movedOne\")}</Text>\n            <Blockquote.Root size=\"sm\">\n              <Blockquote.Content>{t(\"movedQuote\")}</Blockquote.Content>\n            </Blockquote.Root>\n            <Heading as=\"h3\" size=\"xs\">\n              {t(\"whatBroke\")}\n            </Heading>\n            <Text size=\"sm\">{t(\"brokeOne\")}</Text>\n            <Text size=\"sm\">{t(\"brokeTwo\")}</Text>\n          </AppShell.Section>\n        </AppShell.Main>\n        <AppShell.Aside folds=\"under\" width=\"15rem\">\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"xs\">\n              {t(\"related\")}\n            </Heading>\n            {NOTES.map((note) => (\n              <Text key={note} size=\"sm\">\n                <Link href={`#${note}`}>{t(note)}</Link>\n              </Text>\n            ))}\n            <Stack direction=\"row\" gap=\"xs\" wrap>\n              {TOPICS.map((topic) => (\n                <Tag.Root key={topic} size=\"sm\">\n                  <Tag.Label>{t(topic)}</Tag.Label>\n                </Tag.Root>\n              ))}\n            </Stack>\n          </AppShell.Section>\n        </AppShell.Aside>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/storefront.example.tsx
+var storefront_example_exports = /* @__PURE__ */ __exportAll({
+	Storefront: () => Storefront,
+	source: () => source$2
+});
+const PRODUCTS = [
+	["mug", "£18.00"],
+	["bowl", "£24.00"],
+	["plate", "£16.00"],
+	["jug", "£32.00"],
+	["vase", "£45.00"],
+	["teapot", "£58.00"]
+];
+function Storefront(props) {
+	const $ = c(41);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("northwind");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("northwind");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("searchProducts");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("searchProducts");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t6 = /* @__PURE__ */ jsx(Search$1, {
+			"aria-label": t3,
+			placeholder: t4,
+			searchIndicator: t5
+		});
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ShoppingBagIcon, {});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("basket");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Action, {
+			icon: t7,
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(End, { children: [t6, t9] });
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t0 || $[23] !== t10 || $[24] !== t2) {
+		t11 = /* @__PURE__ */ jsx(Header, {
+			sticky: true,
+			children: /* @__PURE__ */ jsxs(Root, {
+				"aria-label": t0,
+				size: "sm",
+				children: [t2, t10]
+			})
+		});
+		$[22] = t0;
+		$[23] = t10;
+		$[24] = t2;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("newIn");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "sm",
+			children: t12
+		});
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = PRODUCTS.map((t15) => {
+			const [product, price] = t15;
+			return /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Card.Root, {
+				justify: "between",
+				size: "sm",
+				variant: "outline",
+				children: [/* @__PURE__ */ jsxs(Card.Header, { children: [/* @__PURE__ */ jsx(Card.Title, { children: t(product) }), /* @__PURE__ */ jsx(Card.Description, { children: t(`${product}About`) })] }), /* @__PURE__ */ jsxs(Card.Footer, { children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: "sm",
+					weight: "semibold",
+					children: price
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "outline",
+					children: t("add")
+				})] })]
+			}) }, product);
+		});
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fit-xs",
+			gap: "md",
+			children: t14
+		});
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t13 || $[35] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [t13, t15] }) }) });
+		$[34] = t13;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== props || $[38] !== t11 || $[39] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Root$2, {
+			scroll: "window",
+			...props,
+			children: [t11, t16]
+		});
+		$[37] = props;
+		$[38] = t11;
+		$[39] = t16;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { SearchIcon, ShoppingBagIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Grid } from \"@stealthscale/component-layout\";\nimport { Card } from \"@stealthscale/component-surfaces\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PRODUCTS = [\n  [\"mug\", \"£18.00\"],\n  [\"bowl\", \"£24.00\"],\n  [\"plate\", \"£16.00\"],\n  [\"jug\", \"£32.00\"],\n  [\"vase\", \"£45.00\"],\n  [\"teapot\", \"£58.00\"],\n] as const;\n\nexport function Storefront(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root scroll=\"window\" {...props}>\n      <AppShell.Header sticky>\n        <Toolbar.Root aria-label={t(\"northwind\")} size=\"sm\">\n          <Toolbar.Start>\n            <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n              {t(\"northwind\")}\n            </Text>\n          </Toolbar.Start>\n          <Toolbar.End>\n            <Toolbar.Search\n              aria-label={t(\"searchProducts\")}\n              placeholder={t(\"searchProducts\")}\n              searchIndicator={<SearchIcon />}\n            />\n            <Toolbar.Action icon={<ShoppingBagIcon />}>{t(\"basket\")}</Toolbar.Action>\n          </Toolbar.End>\n        </Toolbar.Root>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Main>\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"sm\">\n              {t(\"newIn\")}\n            </Heading>\n            <Grid.Root columns=\"fit-xs\" gap=\"md\">\n              {PRODUCTS.map(([product, price]) => (\n                <Grid.Item key={product}>\n                  <Card.Root justify=\"between\" size=\"sm\" variant=\"outline\">\n                    <Card.Header>\n                      <Card.Title>{t(product)}</Card.Title>\n                      <Card.Description>{t(`${product}About`)}</Card.Description>\n                    </Card.Header>\n                    <Card.Footer>\n                      <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n                        {price}\n                      </Text>\n                      <Button size=\"xs\" variant=\"outline\">\n                        {t(\"add\")}\n                      </Button>\n                    </Card.Footer>\n                  </Card.Root>\n                </Grid.Item>\n              ))}\n            </Grid.Root>\n          </AppShell.Section>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/suite.example.tsx
+var suite_example_exports = /* @__PURE__ */ __exportAll({
+	Suite: () => Suite,
+	source: () => source$1
+});
+const APPS = [
+	[
+		"mailApp",
+		MailIcon,
+		void 0
+	],
+	[
+		"calendarApp",
+		CalendarIcon,
+		void 0
+	],
+	[
+		"filesApp",
+		FolderIcon,
+		void 0
+	],
+	[
+		"settings",
+		SettingsIcon,
+		"page"
+	]
+];
+const SECTIONS = [
+	[
+		"profile",
+		UserIcon,
+		void 0
+	],
+	[
+		"notifications",
+		BellIcon,
+		"page"
+	],
+	[
+		"security",
+		ShieldIcon,
+		void 0
+	],
+	[
+		"plan",
+		CreditCardIcon,
+		void 0
+	]
+];
+const RULES = [
+	"notifyMentions",
+	"notifyDigest",
+	"notifyQuiet"
+];
+function Suite(props) {
+	const $ = c(80);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("apps");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = APPS.map((t2) => {
+			const [app, Glyph, current] = t2;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${app}`,
+				tooltip: t(app),
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(app) })]
+			}) }, app);
+		});
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(NavList.Root, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Navbar, {
+			folds: "hide",
+			name: "apps",
+			width: "4rem",
+			children: /* @__PURE__ */ jsx(Root$1, {
+				iconic: true,
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Nav, {
+					"aria-label": t0,
+					children: t2
+				}) })
+			})
+		});
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("settings");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavLabel, { children: t4 });
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = SECTIONS.map((t7) => {
+			const [section, Glyph_0, current_0] = t7;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current_0,
+				href: `#${section}`,
+				children: [/* @__PURE__ */ jsx(Glyph_0, {}), /* @__PURE__ */ jsx("span", { children: t(section) })]
+			}) }, section);
+		});
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(NavList.Root, { children: t6 });
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Navbar, {
+			name: "sections",
+			resizable: true,
+			children: /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t5, t7] }) }) })
+		});
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("resizeSections");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Rail, {
+			panel: "sections",
+			resizeLabel: t9
+		});
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = t("northwind");
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t) {
+		t12 = t("navigation");
+		$[26] = t;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t12) {
+		t14 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t12,
+			as: Trigger,
+			panel: "sections",
+			shape: "square",
+			children: t13
+		});
+		$[29] = t12;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t) {
+		t15 = t("northwind");
+		$[31] = t;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t15
+		});
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t14 || $[36] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Start, { children: [t14, t16] });
+		$[35] = t14;
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t11 || $[39] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Root, {
+			"aria-label": t11,
+			size: "sm",
+			children: t17
+		}) });
+		$[38] = t11;
+		$[39] = t17;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t) {
+		t19 = t("notifications");
+		$[41] = t;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "md",
+			children: t19
+		});
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== t) {
+		t21 = t("notificationsAbout");
+		$[45] = t;
+		$[46] = t21;
+	} else t21 = $[46];
+	let t22;
+	if ($[47] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t21
+		});
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t20 || $[50] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Section, { children: [t20, t22] });
+		$[49] = t20;
+		$[50] = t22;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== t) {
+		t24 = RULES.map((rule) => /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t(rule)
+		}, rule));
+		$[52] = t;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Section, { children: t24 });
+		$[54] = t24;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] !== t23 || $[57] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Main, { children: [t23, t25] });
+		$[56] = t23;
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] !== t) {
+		t27 = t("apps");
+		$[59] = t;
+		$[60] = t27;
+	} else t27 = $[60];
+	let t28;
+	if ($[61] !== t) {
+		t28 = APPS.map((t29) => {
+			const [app_0, Glyph_1, current_1] = t29;
+			return /* @__PURE__ */ jsx(Link$1, {
+				current: current_1 === "page",
+				href: `#${app_0}`,
+				icon: /* @__PURE__ */ jsx(Glyph_1, {}),
+				children: t(app_0)
+			}, app_0);
+		});
+		$[61] = t;
+		$[62] = t28;
+	} else t28 = $[62];
+	let t29;
+	if ($[63] !== t28) {
+		t29 = /* @__PURE__ */ jsx(Center, { children: t28 });
+		$[63] = t28;
+		$[64] = t29;
+	} else t29 = $[64];
+	let t30;
+	if ($[65] !== t27 || $[66] !== t29) {
+		t30 = /* @__PURE__ */ jsx(Footer, {
+			when: "narrow",
+			children: /* @__PURE__ */ jsx(Root, {
+				"aria-label": t27,
+				size: "sm",
+				children: t29
+			})
+		});
+		$[65] = t27;
+		$[66] = t29;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== t18 || $[69] !== t26 || $[70] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Pane, { children: [
+			t18,
+			t26,
+			t30
+		] });
+		$[68] = t18;
+		$[69] = t26;
+		$[70] = t30;
+		$[71] = t31;
+	} else t31 = $[71];
+	let t32;
+	if ($[72] !== t10 || $[73] !== t3 || $[74] !== t31 || $[75] !== t8) {
+		t32 = /* @__PURE__ */ jsxs(Body, { children: [
+			t3,
+			t8,
+			t10,
+			t31
+		] });
+		$[72] = t10;
+		$[73] = t3;
+		$[74] = t31;
+		$[75] = t8;
+		$[76] = t32;
+	} else t32 = $[76];
+	let t33;
+	if ($[77] !== props || $[78] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Root$2, {
+			variant: "inset",
+			...props,
+			children: t32
+		});
+		$[77] = props;
+		$[78] = t32;
+		$[79] = t33;
+	} else t33 = $[79];
+	return t33;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport {\n  BellIcon,\n  CalendarIcon,\n  CreditCardIcon,\n  FolderIcon,\n  MailIcon,\n  MenuIcon,\n  SettingsIcon,\n  ShieldIcon,\n  UserIcon,\n} from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst APPS = [\n  [\"mailApp\", MailIcon, undefined],\n  [\"calendarApp\", CalendarIcon, undefined],\n  [\"filesApp\", FolderIcon, undefined],\n  [\"settings\", SettingsIcon, \"page\"],\n] as const;\n\nconst SECTIONS = [\n  [\"profile\", UserIcon, undefined],\n  [\"notifications\", BellIcon, \"page\"],\n  [\"security\", ShieldIcon, undefined],\n  [\"plan\", CreditCardIcon, undefined],\n] as const;\n\nconst RULES = [\"notifyMentions\", \"notifyDigest\", \"notifyQuiet\"] as const;\n\nexport function Suite(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root variant=\"inset\" {...props}>\n      <AppShell.Body>\n        <AppShell.Navbar folds=\"hide\" name=\"apps\" width=\"4rem\">\n          <Sidebar.Root iconic>\n            <Sidebar.Content>\n              <Sidebar.Nav aria-label={t(\"apps\")}>\n                <NavList.Root>\n                  {APPS.map(([app, Glyph, current]) => (\n                    <NavList.Item key={app}>\n                      <NavList.Link aria-current={current} href={`#${app}`} tooltip={t(app)}>\n                        <Glyph />\n                        <span>{t(app)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Navbar name=\"sections\" resizable>\n          <Sidebar.Root>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel>{t(\"settings\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {SECTIONS.map(([section, Glyph, current]) => (\n                    <NavList.Item key={section}>\n                      <NavList.Link aria-current={current} href={`#${section}`}>\n                        <Glyph />\n                        <span>{t(section)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail panel=\"sections\" resizeLabel={t(\"resizeSections\")} />\n        <AppShell.Pane>\n          <AppShell.Header>\n            <Toolbar.Root aria-label={t(\"northwind\")} size=\"sm\">\n              <Toolbar.Start>\n                <Toolbar.Item\n                  aria-label={t(\"navigation\")}\n                  as={AppShell.Trigger}\n                  panel=\"sections\"\n                  shape=\"square\"\n                >\n                  <MenuIcon />\n                </Toolbar.Item>\n                <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n                  {t(\"northwind\")}\n                </Text>\n              </Toolbar.Start>\n            </Toolbar.Root>\n          </AppShell.Header>\n          <AppShell.Main>\n            <AppShell.Section>\n              <Heading as=\"h2\" size=\"md\">\n                {t(\"notifications\")}\n              </Heading>\n              <Text size=\"sm\" tone=\"muted\">\n                {t(\"notificationsAbout\")}\n              </Text>\n            </AppShell.Section>\n            <AppShell.Section>\n              {RULES.map((rule) => (\n                <Text key={rule} size=\"sm\">\n                  {t(rule)}\n                </Text>\n              ))}\n            </AppShell.Section>\n          </AppShell.Main>\n          <AppShell.Footer when=\"narrow\">\n            <Toolbar.Root aria-label={t(\"apps\")} size=\"sm\">\n              <Toolbar.Center>\n                {APPS.map(([app, Glyph, current]) => (\n                  <Toolbar.Link\n                    current={current === \"page\"}\n                    href={`#${app}`}\n                    icon={<Glyph />}\n                    key={app}\n                  >\n                    {t(app)}\n                  </Toolbar.Link>\n                ))}\n              </Toolbar.Center>\n            </Toolbar.Root>\n          </AppShell.Footer>\n        </AppShell.Pane>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/examples/tracker.example.tsx
+var tracker_example_exports = /* @__PURE__ */ __exportAll({
+	Tracker: () => Tracker,
+	source: () => source
+});
+const PROJECTS = [
+	["projectCheckout", "page"],
+	["projectPayouts", void 0],
+	["projectSearch", void 0]
+];
+const FACTS = [
+	["assignee", "mara"],
+	["priority", "priorityHigh"],
+	["opened", "openedWhen"]
+];
+function Tracker(props) {
+	const $ = c(97);
+	const { t } = useWords("app-shell");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("projects");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(NavLabel, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = PROJECTS.map((t3) => {
+			const [project, current] = t3;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current,
+				href: `#${project}`,
+				children: [/* @__PURE__ */ jsx(FolderKanbanIcon, {}), /* @__PURE__ */ jsx("span", { children: t(project) })]
+			}) }, project);
+		});
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(NavList.Root, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t1, t3] }) }) }) });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Rail, {});
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("issue");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("navigation");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t7,
+			as: Trigger,
+			shape: "square",
+			children: t8
+		});
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("issue");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t10
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Start, { children: [t9, t11] });
+		$[23] = t11;
+		$[24] = t9;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t) {
+		t13 = t("resolve");
+		$[26] = t;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t13
+		});
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t) {
+		t15 = t("details");
+		$[30] = t;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(PanelRightIcon, {});
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t15) {
+		t17 = /* @__PURE__ */ jsx(Item, {
+			"aria-label": t15,
+			as: Trigger,
+			panel: "aside",
+			shape: "square",
+			children: t16
+		});
+		$[33] = t15;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t14 || $[36] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(End, { children: [t14, t17] });
+		$[35] = t14;
+		$[36] = t17;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t12 || $[39] !== t18 || $[40] !== t6) {
+		t19 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t6,
+			size: "sm",
+			children: [t12, t18]
+		}) });
+		$[38] = t12;
+		$[39] = t18;
+		$[40] = t6;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t) {
+		t20 = t("issueTitle");
+		$[42] = t;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "sm",
+			children: t20
+		});
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t) {
+		t22 = t("issueOne");
+		$[46] = t;
+		$[47] = t22;
+	} else t22 = $[47];
+	let t23;
+	if ($[48] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t22
+		});
+		$[48] = t22;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== t) {
+		t24 = t("issueTwo");
+		$[50] = t;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t24
+		});
+		$[52] = t24;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== t21 || $[55] !== t23 || $[56] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Section, { children: [
+			t21,
+			t23,
+			t25
+		] }) });
+		$[54] = t21;
+		$[55] = t23;
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== t) {
+		t27 = t("issueUpdated");
+		$[58] = t;
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== t27) {
+		t28 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t27
+		}) });
+		$[60] = t27;
+		$[61] = t28;
+	} else t28 = $[61];
+	let t29;
+	if ($[62] !== t19 || $[63] !== t26 || $[64] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(Pane, { children: [
+			t19,
+			t26,
+			t28
+		] });
+		$[62] = t19;
+		$[63] = t26;
+		$[64] = t28;
+		$[65] = t29;
+	} else t29 = $[65];
+	let t30;
+	if ($[66] !== t) {
+		t30 = t("details");
+		$[66] = t;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== t30) {
+		t31 = /* @__PURE__ */ jsx(Heading, {
+			as: "h2",
+			size: "xs",
+			children: t30
+		});
+		$[68] = t30;
+		$[69] = t31;
+	} else t31 = $[69];
+	let t32;
+	if ($[70] !== t) {
+		t32 = t("status");
+		$[70] = t;
+		$[71] = t32;
+	} else t32 = $[71];
+	let t33;
+	if ($[72] !== t32) {
+		t33 = /* @__PURE__ */ jsx(DataList.ItemLabel, { children: t32 });
+		$[72] = t32;
+		$[73] = t33;
+	} else t33 = $[73];
+	let t34;
+	if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[74] = t34;
+	} else t34 = $[74];
+	let t35;
+	if ($[75] !== t) {
+		t35 = t("inProgress");
+		$[75] = t;
+		$[76] = t35;
+	} else t35 = $[76];
+	let t36;
+	if ($[77] !== t35) {
+		t36 = /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "warning",
+			size: "inherit",
+			children: [t34, t35]
+		}) });
+		$[77] = t35;
+		$[78] = t36;
+	} else t36 = $[78];
+	let t37;
+	if ($[79] !== t33 || $[80] !== t36) {
+		t37 = /* @__PURE__ */ jsxs(DataList.Item, { children: [t33, t36] });
+		$[79] = t33;
+		$[80] = t36;
+		$[81] = t37;
+	} else t37 = $[81];
+	let t38;
+	if ($[82] !== t) {
+		t38 = FACTS.map((t39) => {
+			const [label, value] = t39;
+			return /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(label) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: t(value) })] }, label);
+		});
+		$[82] = t;
+		$[83] = t38;
+	} else t38 = $[83];
+	let t39;
+	if ($[84] !== t37 || $[85] !== t38) {
+		t39 = /* @__PURE__ */ jsxs(DataList.Root, {
+			orientation: "horizontal",
+			size: "sm",
+			children: [t37, t38]
+		});
+		$[84] = t37;
+		$[85] = t38;
+		$[86] = t39;
+	} else t39 = $[86];
+	let t40;
+	if ($[87] !== t31 || $[88] !== t39) {
+		t40 = /* @__PURE__ */ jsx(Aside, {
+			width: "16rem",
+			children: /* @__PURE__ */ jsxs(Section, { children: [t31, t39] })
+		});
+		$[87] = t31;
+		$[88] = t39;
+		$[89] = t40;
+	} else t40 = $[89];
+	let t41;
+	if ($[90] !== t29 || $[91] !== t4 || $[92] !== t40) {
+		t41 = /* @__PURE__ */ jsxs(Body, { children: [
+			t4,
+			t5,
+			t29,
+			t40
+		] });
+		$[90] = t29;
+		$[91] = t4;
+		$[92] = t40;
+		$[93] = t41;
+	} else t41 = $[93];
+	let t42;
+	if ($[94] !== props || $[95] !== t41) {
+		t42 = /* @__PURE__ */ jsx(Root$2, {
+			...props,
+			children: t41
+		});
+		$[94] = props;
+		$[95] = t41;
+		$[96] = t42;
+	} else t42 = $[96];
+	return t42;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { FolderKanbanIcon, MenuIcon, PanelRightIcon } from \"lucide-react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Status } from \"@stealthscale/component-data\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Toolbar } from \"@stealthscale/component-screen\";\n\nconst PROJECTS = [\n  [\"projectCheckout\", \"page\"],\n  [\"projectPayouts\", undefined],\n  [\"projectSearch\", undefined],\n] as const;\n\nconst FACTS = [\n  [\"assignee\", \"mara\"],\n  [\"priority\", \"priorityHigh\"],\n  [\"opened\", \"openedWhen\"],\n] as const;\n\nexport function Tracker(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"app-shell\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Body>\n        <AppShell.Navbar>\n          <Sidebar.Root>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel>{t(\"projects\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {PROJECTS.map(([project, current]) => (\n                    <NavList.Item key={project}>\n                      <NavList.Link aria-current={current} href={`#${project}`}>\n                        <FolderKanbanIcon />\n                        <span>{t(project)}</span>\n                      </NavList.Link>\n                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Rail />\n        <AppShell.Pane>\n          <AppShell.Header>\n            <Toolbar.Root aria-label={t(\"issue\")} size=\"sm\">\n              <Toolbar.Start>\n                <Toolbar.Item aria-label={t(\"navigation\")} as={AppShell.Trigger} shape=\"square\">\n                  <MenuIcon />\n                </Toolbar.Item>\n                <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n                  {t(\"issue\")}\n                </Text>\n              </Toolbar.Start>\n              <Toolbar.End>\n                <Toolbar.Action primary>{t(\"resolve\")}</Toolbar.Action>\n                <Toolbar.Item\n                  aria-label={t(\"details\")}\n                  as={AppShell.Trigger}\n                  panel=\"aside\"\n                  shape=\"square\"\n                >\n                  <PanelRightIcon />\n                </Toolbar.Item>\n              </Toolbar.End>\n            </Toolbar.Root>\n          </AppShell.Header>\n          <AppShell.Main>\n            <AppShell.Section>\n              <Heading as=\"h2\" size=\"sm\">\n                {t(\"issueTitle\")}\n              </Heading>\n              <Text size=\"sm\">{t(\"issueOne\")}</Text>\n              <Text size=\"sm\">{t(\"issueTwo\")}</Text>\n            </AppShell.Section>\n          </AppShell.Main>\n          <AppShell.Footer>\n            <Text size=\"sm\" tone=\"muted\">\n              {t(\"issueUpdated\")}\n            </Text>\n          </AppShell.Footer>\n        </AppShell.Pane>\n        <AppShell.Aside width=\"16rem\">\n          <AppShell.Section>\n            <Heading as=\"h2\" size=\"xs\">\n              {t(\"details\")}\n            </Heading>\n            <DataList.Root orientation=\"horizontal\" size=\"sm\">\n              <DataList.Item>\n                <DataList.ItemLabel>{t(\"status\")}</DataList.ItemLabel>\n                <DataList.ItemValue>\n                  <Status.Root palette=\"warning\" size=\"inherit\">\n                    <Status.Indicator />\n                    {t(\"inProgress\")}\n                  </Status.Root>\n                </DataList.ItemValue>\n              </DataList.Item>\n              {FACTS.map(([label, value]) => (\n                <DataList.Item key={label}>\n                  <DataList.ItemLabel>{t(label)}</DataList.ItemLabel>\n                  <DataList.ItemValue>{t(value)}</DataList.ItemValue>\n                </DataList.Item>\n              ))}\n            </DataList.Root>\n          </AppShell.Section>\n        </AppShell.Aside>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/app-shell/app-shell.specimen.tsx
+/**
+* Returns a scene that renders one application in a window.
+*
+* @param name - The scene's key under `app-shell`, and the example's name.
+* @param example - The example module.
+* @param Application - The example's component.
+* @param window - The window's height, whether it scrolls and the axes the scene renders.
+* @returns The scene.
+*/
+function applied(name, example, Application, window) {
+	return {
+		about: `app-shell.${name}.about`,
+		axes: [...window.axes ?? []],
+		draw: () => /* @__PURE__ */ jsx(Screen, {
+			scrolls: window.scrolls ?? false,
+			size: window.size,
+			children: /* @__PURE__ */ jsx(Application, {})
+		}),
+		example,
+		frame: "bleed",
+		title: `app-shell.${name}.title`
+	};
+}
+var app_shell_specimen_default = specimen({
+	about: "app-shell.about",
+	id: "components/screen/app-shell",
+	imports: "import { AppShell } from \"@stealthscale/component-screen\";",
+	scenes: [
+		applied("console", console_example_exports, Console, { size: "lg" }),
+		applied("chat", chat_example_exports, Chat, { size: "sm" }),
+		applied("suite", suite_example_exports, Suite, { size: "sm" }),
+		applied("tracker", tracker_example_exports, Tracker, { size: "sm" }),
+		applied("files", files_example_exports, Files, { size: "sm" }),
+		applied("mail", mail_example_exports, Mail, { size: "sm" }),
+		applied("checkout", checkout_example_exports, Checkout, { size: "sm" }),
+		applied("handbook", handbook_example_exports, Handbook, {
+			axes: ["variant"],
+			size: "md"
+		}),
+		applied("canvas", canvas_example_exports, Canvas, {
+			axes: ["divided", "variant"],
+			size: "sm"
+		}),
+		applied("billing", billing_example_exports, Billing, { size: "sm" }),
+		applied("reader", reader_example_exports, Reader, {
+			axes: ["content"],
+			size: "sm"
+		}),
+		applied("storefront", storefront_example_exports, Storefront, {
+			axes: ["scroll"],
+			scrolls: true,
+			size: "xs"
+		}),
+		applied("journal", journal_example_exports, Journal, {
+			scrolls: true,
+			size: "xs"
+		}),
+		applied("player", player_example_exports, Player, {
+			scrolls: true,
+			size: "xs"
+		})
+	],
+	title: "app-shell.title"
+});
+//#endregion
+export { app_shell_specimen_default as default };