@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/sidebar/sidebar.js

@@ -0,0 +1,1743 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { i as recipe } from "../../recipes-Cmy1leBm.js";
+import { A as Nav, At as Trigger, Bt as Body, D as Separator, F as Footer, I as Empty, It as Navbar, L as Content, Lt as Main, M as NavHeading, N as NavAction, Nt as Root$2, O as Search, P as Header, Rt as Header$1, X as Title, ct as Description, et as Root$1, j as NavLabel, k as Root, ot as Header$2, zt as Footer$1 } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useId, useState } from "react";
+import { NavList } from "@stealthscale/component-navigation";
+import { Stack } from "@stealthscale/component-layout";
+import { Room, Sample, Screen, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArchiveIcon, BoxIcon, Building2Icon, ChartColumnIcon, CompassIcon, CreditCardIcon, FileTextIcon, FolderIcon, GitBranchIcon, HouseIcon, LayoutDashboardIcon, MenuIcon, PaletteIcon, PlayIcon, PlusIcon, ReceiptIcon, SearchIcon, SettingsIcon, ShieldCheckIcon, SquareIcon, TrendingUpIcon, UserCheckIcon, UserIcon, UsersIcon, XIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/sidebar/examples/console.example.tsx
+var console_example_exports = /* @__PURE__ */ __exportAll({
+	Console: () => Console,
+	source: () => source$7
+});
+const BLOCKS = [{
+	label: "platform",
+	rows: [
+		["overview", HouseIcon],
+		["runs", PlayIcon],
+		["pipelines", GitBranchIcon],
+		["approvals", ShieldCheckIcon]
+	]
+}, {
+	label: "projects",
+	rows: [
+		"billing",
+		"checkout",
+		"onboarding",
+		"catalog",
+		"warehouse"
+	].map((project) => [project, FolderIcon])
+}];
+function Console(props) {
+	const $ = c(48);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ledger");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("production");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			tone: "subtle",
+			weight: "normal",
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Text, {
+			as: "p",
+			size: "sm",
+			truncate: true,
+			weight: "medium",
+			children: [
+				t0,
+				" ",
+				t2
+			]
+		});
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("findPage");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(XIcon, {});
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("clearFilter");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("filter");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
+		t9 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t4,
+			clearIndicator: t5,
+			clearLabel: t6,
+			placeholder: t7,
+			searchIndicator: t8,
+			shortcut: "k"
+		});
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t3 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Header, { children: [t3, t9] });
+		$[21] = t3;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = BLOCKS.map((t12, at) => {
+			const { label, rows } = t12;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [at > 0 && /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Nav, { children: [
+				/* @__PURE__ */ jsx(NavLabel, {
+					as: "h3",
+					children: t(label)
+				}),
+				label === "projects" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NavAction, {
+					"aria-label": t("newProject"),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}), /* @__PURE__ */ jsx(Search, {
+					"aria-label": t("filterProjects"),
+					clearIndicator: /* @__PURE__ */ jsx(XIcon, {}),
+					clearLabel: t("clearFilter"),
+					placeholder: t("filterProjectsHint")
+				})] }),
+				/* @__PURE__ */ jsx(NavList.Root, { children: rows.map((t13) => {
+					const [row, Glyph] = t13;
+					return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+						"aria-current": row === "runs" ? "page" : void 0,
+						href: `#${row}`,
+						tooltip: t(row),
+						children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(row) })]
+					}) }, row);
+				}) }),
+				/* @__PURE__ */ jsx(Empty, { children: t(`${label}Empty`) })
+			] })] }, label);
+		});
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Content, { children: t11 });
+		$[26] = t11;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t) {
+		t13 = t("account");
+		$[28] = t;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("person");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(UserIcon, {});
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t) {
+		t16 = t("person");
+		$[33] = t;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t16) {
+		t17 = /* @__PURE__ */ jsx("span", { children: t16 });
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t14 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsx(NavList.Root, { children: /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#account",
+			tooltip: t14,
+			children: [t15, t17]
+		}) }) });
+		$[37] = t14;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t13 || $[41] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Nav, {
+			"aria-label": t13,
+			children: t18
+		}) });
+		$[40] = t13;
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== props || $[44] !== t10 || $[45] !== t12 || $[46] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t10,
+				t12,
+				t19
+			]
+		});
+		$[43] = props;
+		$[44] = t10;
+		$[45] = t12;
+		$[46] = t19;
+		$[47] = t20;
+	} else t20 = $[47];
+	return t20;
+}
+const source$7 = "import { Fragment, type ReactElement } from \"react\";\n\nimport {\n  FolderIcon,\n  GitBranchIcon,\n  HouseIcon,\n  PlayIcon,\n  PlusIcon,\n  SearchIcon,\n  ShieldCheckIcon,\n  UserIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nconst BLOCKS = [\n  {\n    label: \"platform\",\n    rows: [\n      [\"overview\", HouseIcon],\n      [\"runs\", PlayIcon],\n      [\"pipelines\", GitBranchIcon],\n      [\"approvals\", ShieldCheckIcon],\n    ],\n  },\n  {\n    label: \"projects\",\n    rows: [\"billing\", \"checkout\", \"onboarding\", \"catalog\", \"warehouse\"].map(\n      (project) => [project, FolderIcon] as const,\n    ),\n  },\n] as const;\n\nexport function Console(props: Sidebar.RootProps): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <Sidebar.Root {...props}>\n      <Sidebar.Header>\n        <Text as=\"p\" size=\"sm\" truncate weight=\"medium\">\n          {t(\"ledger\")}{\" \"}\n          <Text as=\"span\" size=\"sm\" tone=\"subtle\" weight=\"normal\">\n            {t(\"production\")}\n          </Text>\n        </Text>\n        <Sidebar.Search\n          aria-label={t(\"findPage\")}\n          clearIndicator={<XIcon />}\n          clearLabel={t(\"clearFilter\")}\n          placeholder={t(\"filter\")}\n          searchIndicator={<SearchIcon />}\n          shortcut=\"k\"\n        />\n      </Sidebar.Header>\n      <Sidebar.Content>\n        {BLOCKS.map(({ label, rows }, at) => (\n          <Fragment key={label}>\n            {at > 0 && <Sidebar.Separator />}\n            <Sidebar.Nav>\n              <Sidebar.NavLabel as=\"h3\">{t(label)}</Sidebar.NavLabel>\n              {label === \"projects\" && (\n                <>\n                  <Sidebar.NavAction aria-label={t(\"newProject\")}>\n                    <PlusIcon />\n                  </Sidebar.NavAction>\n                  <Sidebar.Search\n                    aria-label={t(\"filterProjects\")}\n                    clearIndicator={<XIcon />}\n                    clearLabel={t(\"clearFilter\")}\n                    placeholder={t(\"filterProjectsHint\")}\n                  />\n                </>\n              )}\n              <NavList.Root>\n                {rows.map(([row, Glyph]) => (\n                  <NavList.Item key={row}>\n                    <NavList.Link\n                      aria-current={row === \"runs\" ? \"page\" : undefined}\n                      href={`#${row}`}\n                      tooltip={t(row)}\n                    >\n                      <Glyph />\n                      <span>{t(row)}</span>\n                    </NavList.Link>\n                  </NavList.Item>\n                ))}\n              </NavList.Root>\n              <Sidebar.Empty>{t(`${label}Empty`)}</Sidebar.Empty>\n            </Sidebar.Nav>\n          </Fragment>\n        ))}\n      </Sidebar.Content>\n      <Sidebar.Footer>\n        <Sidebar.Nav aria-label={t(\"account\")}>\n          <NavList.Root>\n            <NavList.Item>\n              <NavList.Link href=\"#account\" tooltip={t(\"person\")}>\n                <UserIcon />\n                <span>{t(\"person\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Footer>\n    </Sidebar.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/filter.example.tsx
+var filter_example_exports = /* @__PURE__ */ __exportAll({
+	Filter: () => Filter,
+	source: () => source$6
+});
+const PAGES$3 = [
+	["overview", LayoutDashboardIcon],
+	["invoices", FileTextIcon],
+	["customers", UsersIcon],
+	["reports", ChartColumnIcon]
+];
+function Filter() {
+	const $ = c(29);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("pages");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("filterPages");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(XIcon, {});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("clearFilter");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("filterPlaceholder");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t2 || $[13] !== t4 || $[14] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t2,
+			clearIndicator: t3,
+			clearLabel: t4,
+			placeholder: t5,
+			searchIndicator: t6
+		});
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = PAGES$3.map((t9) => {
+			const [page, Glyph] = t9;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				href: `#${page}`,
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(page) })]
+			}) }, page);
+		});
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(NavList.Root, { children: t8 });
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("noMatch");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Empty, { children: t10 });
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t1 || $[25] !== t11 || $[26] !== t7 || $[27] !== t9) {
+		t12 = /* @__PURE__ */ jsx(Root, {
+			variant: "subtle",
+			children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [
+				t1,
+				t7,
+				t9,
+				t11
+			] }) })
+		});
+		$[24] = t1;
+		$[25] = t11;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = t12;
+	} else t12 = $[28];
+	return t12;
+}
+const source$6 = "import { type ComponentType, type ReactElement } from \"react\";\n\nimport {\n  ChartColumnIcon,\n  FileTextIcon,\n  LayoutDashboardIcon,\n  SearchIcon,\n  UsersIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nconst PAGES: ReadonlyArray<readonly [string, ComponentType]> = [\n  [\"overview\", LayoutDashboardIcon],\n  [\"invoices\", FileTextIcon],\n  [\"customers\", UsersIcon],\n  [\"reports\", ChartColumnIcon],\n];\n\nexport function Filter(): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <Sidebar.Root variant=\"subtle\">\n      <Sidebar.Content>\n        <Sidebar.Nav>\n          <Sidebar.NavLabel as=\"h3\">{t(\"pages\")}</Sidebar.NavLabel>\n          <Sidebar.Search\n            aria-label={t(\"filterPages\")}\n            clearIndicator={<XIcon />}\n            clearLabel={t(\"clearFilter\")}\n            placeholder={t(\"filterPlaceholder\")}\n            searchIndicator={<SearchIcon />}\n          />\n          <NavList.Root>\n            {PAGES.map(([page, Glyph]) => (\n              <NavList.Item key={page}>\n                <NavList.Link href={`#${page}`}>\n                  <Glyph />\n                  <span>{t(page)}</span>\n                </NavList.Link>\n              </NavList.Item>\n            ))}\n          </NavList.Root>\n          <Sidebar.Empty>{t(\"noMatch\")}</Sidebar.Empty>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n    </Sidebar.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/guides.example.tsx
+var guides_example_exports = /* @__PURE__ */ __exportAll({
+	Guides: () => Guides,
+	source: () => source$5
+});
+function Guides() {
+	const $ = c(53);
+	const { t } = useWords("sidebar");
+	const id = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("handbook");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx("span", { children: t0 }) });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("documentation");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = `${id}-guides`;
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("guides");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavHeading, {
+			as: "h3",
+			id: t3,
+			children: t4
+		});
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const t6 = `${id}-guides`;
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(CompassIcon, {});
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("start");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			"aria-current": "page",
+			href: "#start",
+			children: [t7, /* @__PURE__ */ jsx("span", { children: t8 })]
+		}) });
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(PaletteIcon, {});
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t) {
+		t11 = t("theming");
+		$[17] = t;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t11) {
+		t12 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#theming",
+			children: [t10, /* @__PURE__ */ jsx("span", { children: t11 })]
+		}) });
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t12 || $[22] !== t6 || $[23] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(NavList.Root, {
+			"aria-labelledby": t6,
+			children: [t9, t12]
+		});
+		$[21] = t12;
+		$[22] = t6;
+		$[23] = t9;
+		$[24] = t13;
+	} else t13 = $[24];
+	const t14 = `${id}-components`;
+	let t15;
+	if ($[25] !== t) {
+		t15 = t("components");
+		$[25] = t;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t14 || $[28] !== t15) {
+		t16 = /* @__PURE__ */ jsx(NavHeading, {
+			as: "h3",
+			id: t14,
+			children: t15
+		});
+		$[27] = t14;
+		$[28] = t15;
+		$[29] = t16;
+	} else t16 = $[29];
+	const t17 = `${id}-components`;
+	let t18;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(SquareIcon, {});
+		$[30] = t18;
+	} else t18 = $[30];
+	let t19;
+	if ($[31] !== t) {
+		t19 = t("button");
+		$[31] = t;
+		$[32] = t19;
+	} else t19 = $[32];
+	let t20;
+	if ($[33] !== t19) {
+		t20 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#button",
+			children: [t18, /* @__PURE__ */ jsx("span", { children: t19 })]
+		}) });
+		$[33] = t19;
+		$[34] = t20;
+	} else t20 = $[34];
+	let t21;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(BoxIcon, {});
+		$[35] = t21;
+	} else t21 = $[35];
+	let t22;
+	if ($[36] !== t) {
+		t22 = t("card");
+		$[36] = t;
+		$[37] = t22;
+	} else t22 = $[37];
+	let t23;
+	if ($[38] !== t22) {
+		t23 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#card",
+			children: [t21, /* @__PURE__ */ jsx("span", { children: t22 })]
+		}) });
+		$[38] = t22;
+		$[39] = t23;
+	} else t23 = $[39];
+	let t24;
+	if ($[40] !== t17 || $[41] !== t20 || $[42] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(NavList.Root, {
+			"aria-labelledby": t17,
+			children: [t20, t23]
+		});
+		$[40] = t17;
+		$[41] = t20;
+		$[42] = t23;
+		$[43] = t24;
+	} else t24 = $[43];
+	let t25;
+	if ($[44] !== t13 || $[45] !== t16 || $[46] !== t2 || $[47] !== t24 || $[48] !== t5) {
+		t25 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, {
+			"aria-label": t2,
+			children: [
+				t5,
+				t13,
+				t16,
+				t24
+			]
+		}) });
+		$[44] = t13;
+		$[45] = t16;
+		$[46] = t2;
+		$[47] = t24;
+		$[48] = t5;
+		$[49] = t25;
+	} else t25 = $[49];
+	let t26;
+	if ($[50] !== t1 || $[51] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Root, {
+			variant: "subtle",
+			children: [t1, t25]
+		});
+		$[50] = t1;
+		$[51] = t25;
+		$[52] = t26;
+	} else t26 = $[52];
+	return t26;
+}
+const source$5 = "import { type ReactElement, useId } from \"react\";\n\nimport { BoxIcon, CompassIcon, PaletteIcon, SquareIcon } from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nexport function Guides(): ReactElement {\n  const { t } = useWords(\"sidebar\");\n  const id = useId();\n\n  return (\n    <Sidebar.Root variant=\"subtle\">\n      <Sidebar.Header>\n        <span>{t(\"handbook\")}</span>\n      </Sidebar.Header>\n      <Sidebar.Content>\n        <Sidebar.Nav aria-label={t(\"documentation\")}>\n          <Sidebar.NavHeading as=\"h3\" id={`${id}-guides`}>\n            {t(\"guides\")}\n          </Sidebar.NavHeading>\n          <NavList.Root aria-labelledby={`${id}-guides`}>\n            <NavList.Item>\n              <NavList.Link aria-current=\"page\" href=\"#start\">\n                <CompassIcon />\n                <span>{t(\"start\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n            <NavList.Item>\n              <NavList.Link href=\"#theming\">\n                <PaletteIcon />\n                <span>{t(\"theming\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n          <Sidebar.NavHeading as=\"h3\" id={`${id}-components`}>\n            {t(\"components\")}\n          </Sidebar.NavHeading>\n          <NavList.Root aria-labelledby={`${id}-components`}>\n            <NavList.Item>\n              <NavList.Link href=\"#button\">\n                <SquareIcon />\n                <span>{t(\"button\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n            <NavList.Item>\n              <NavList.Link href=\"#card\">\n                <BoxIcon />\n                <span>{t(\"card\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n    </Sidebar.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/phone.example.tsx
+var phone_example_exports = /* @__PURE__ */ __exportAll({
+	Phone: () => Phone,
+	source: () => source$4
+});
+const GHOST$1 = {
+	shape: "square",
+	size: "sm",
+	variant: "ghost"
+};
+const PAGES$2 = [
+	[
+		"overview",
+		HouseIcon,
+		void 0
+	],
+	[
+		"runs",
+		PlayIcon,
+		"page"
+	],
+	[
+		"pipelines",
+		GitBranchIcon,
+		void 0
+	],
+	[
+		"approvals",
+		ShieldCheckIcon,
+		void 0
+	]
+];
+function Phone(props) {
+	const $ = c(66);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("navigation");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Header$1, { children: /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: GHOST$1,
+			children: /* @__PURE__ */ jsx(Trigger, {
+				"aria-label": t0,
+				as: Button,
+				children: t1
+			})
+		}) });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ledger");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			size: "sm",
+			truncate: true,
+			weight: "medium",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("findPage");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(XIcon, {});
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("clearFilter");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("filter");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t5 || $[18] !== t7 || $[19] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t5,
+			clearIndicator: t6,
+			clearLabel: t7,
+			placeholder: t8,
+			searchIndicator: t9
+		});
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t4) {
+		t11 = /* @__PURE__ */ jsxs(Header, { children: [t4, t10] });
+		$[21] = t10;
+		$[22] = t4;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t) {
+		t12 = t("platform");
+		$[24] = t;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t12
+		});
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t) {
+		t14 = PAGES$2.map((t15) => {
+			const [page, Glyph, current] = t15;
+			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);
+		});
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(NavList.Root, { children: t14 });
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t13 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t13, t15] }) });
+		$[32] = t13;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t11 || $[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsxs(Root, {
+			variant: "subtle",
+			children: [t11, t16]
+		}) });
+		$[35] = t11;
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t) {
+		t18 = t("runs");
+		$[38] = t;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t18
+		});
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t) {
+		t20 = t("runsAbout");
+		$[42] = t;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Description, { children: t20 });
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t19 || $[47] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Root$1, {
+			size: "sm",
+			children: /* @__PURE__ */ jsxs(Header$2, { children: [t19, t21] })
+		}) });
+		$[46] = t19;
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t17 || $[50] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Body, { children: [t17, t22] });
+		$[49] = t17;
+		$[50] = t22;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== t) {
+		t24 = t("places");
+		$[52] = t;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t) {
+		t25 = PAGES$2.map((t26) => {
+			const [page_0, Glyph_0, current_0] = t26;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": current_0,
+				href: `#${page_0}`,
+				children: [/* @__PURE__ */ jsx(Glyph_0, {}), /* @__PURE__ */ jsx("span", { children: t(page_0) })]
+			}) }, page_0);
+		});
+		$[54] = t;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] !== t25) {
+		t26 = /* @__PURE__ */ jsx(NavList.Root, {
+			variant: "dock",
+			children: t25
+		});
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== t24 || $[59] !== t26) {
+		t27 = /* @__PURE__ */ jsx(Footer$1, {
+			when: "narrow",
+			children: /* @__PURE__ */ jsx("nav", {
+				"aria-label": t24,
+				children: t26
+			})
+		});
+		$[58] = t24;
+		$[59] = t26;
+		$[60] = t27;
+	} else t27 = $[60];
+	let t28;
+	if ($[61] !== props || $[62] !== t2 || $[63] !== t23 || $[64] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [
+				t2,
+				t23,
+				t27
+			]
+		});
+		$[61] = props;
+		$[62] = t2;
+		$[63] = t23;
+		$[64] = t27;
+		$[65] = t28;
+	} else t28 = $[65];
+	return t28;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport {\n  GitBranchIcon,\n  HouseIcon,\n  MenuIcon,\n  PlayIcon,\n  SearchIcon,\n  ShieldCheckIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Page, Sidebar } from \"@stealthscale/component-screen\";\n\nconst GHOST = { shape: \"square\", size: \"sm\", variant: \"ghost\" } as const;\n\nconst PAGES = [\n  [\"overview\", HouseIcon, undefined],\n  [\"runs\", PlayIcon, \"page\"],\n  [\"pipelines\", GitBranchIcon, undefined],\n  [\"approvals\", ShieldCheckIcon, undefined],\n] as const;\n\nexport function Phone(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <ButtonPropsProvider value={GHOST}>\n          <AppShell.Trigger aria-label={t(\"navigation\")} as={Button}>\n            <MenuIcon />\n          </AppShell.Trigger>\n        </ButtonPropsProvider>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar>\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Header>\n              <Text as=\"p\" size=\"sm\" truncate weight=\"medium\">\n                {t(\"ledger\")}\n              </Text>\n              <Sidebar.Search\n                aria-label={t(\"findPage\")}\n                clearIndicator={<XIcon />}\n                clearLabel={t(\"clearFilter\")}\n                placeholder={t(\"filter\")}\n                searchIndicator={<SearchIcon />}\n              />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel as=\"h3\">{t(\"platform\")}</Sidebar.NavLabel>\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          <Page.Root size=\"sm\">\n            <Page.Header>\n              <Page.Title as=\"h3\">{t(\"runs\")}</Page.Title>\n              <Page.Description>{t(\"runsAbout\")}</Page.Description>\n            </Page.Header>\n          </Page.Root>\n        </AppShell.Main>\n      </AppShell.Body>\n      <AppShell.Footer when=\"narrow\">\n        <nav aria-label={t(\"places\")}>\n          <NavList.Root variant=\"dock\">\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        </nav>\n      </AppShell.Footer>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/rail.example.tsx
+var rail_example_exports = /* @__PURE__ */ __exportAll({
+	Rail: () => Rail,
+	source: () => source$3
+});
+const PAGES$1 = [
+	[
+		"overview",
+		LayoutDashboardIcon,
+		"page"
+	],
+	[
+		"invoices",
+		FileTextIcon,
+		void 0
+	],
+	[
+		"customers",
+		UsersIcon,
+		void 0
+	]
+];
+function Rail() {
+	const $ = c(35);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Building2Icon, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("acme");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Header, { children: [t0, /* @__PURE__ */ jsx("span", { children: t1 })] });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("workspace");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = PAGES$1.map((t6) => {
+			const [page, Glyph, current] = t6;
+			return /* @__PURE__ */ jsx(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) })]
+			}) }, page);
+		});
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(NavList.Root, { children: t5 });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t4 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t4, t6] }) });
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = t("account");
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("person");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(UserIcon, {});
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t) {
+		t11 = t("person");
+		$[21] = t;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11) {
+		t12 = /* @__PURE__ */ jsx("span", { children: t11 });
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12 || $[26] !== t9) {
+		t13 = /* @__PURE__ */ jsx(NavList.Root, { children: /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#account",
+			tooltip: t9,
+			children: [t10, t12]
+		}) }) });
+		$[25] = t12;
+		$[26] = t9;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13 || $[29] !== t8) {
+		t14 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Nav, {
+			"aria-label": t8,
+			children: t13
+		}) });
+		$[28] = t13;
+		$[29] = t8;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t14 || $[32] !== t2 || $[33] !== t7) {
+		t15 = /* @__PURE__ */ jsxs(Root, {
+			iconic: true,
+			variant: "outline",
+			children: [
+				t2,
+				t7,
+				t14
+			]
+		});
+		$[31] = t14;
+		$[32] = t2;
+		$[33] = t7;
+		$[34] = t15;
+	} else t15 = $[34];
+	return t15;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport {\n  Building2Icon,\n  FileTextIcon,\n  LayoutDashboardIcon,\n  UserIcon,\n  UsersIcon,\n} from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nconst PAGES = [\n  [\"overview\", LayoutDashboardIcon, \"page\"],\n  [\"invoices\", FileTextIcon, undefined],\n  [\"customers\", UsersIcon, undefined],\n] as const;\n\nexport function Rail(): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <Sidebar.Root iconic variant=\"outline\">\n      <Sidebar.Header>\n        <Building2Icon />\n        <span>{t(\"acme\")}</span>\n      </Sidebar.Header>\n      <Sidebar.Content>\n        <Sidebar.Nav>\n          <Sidebar.NavLabel as=\"h3\">{t(\"workspace\")}</Sidebar.NavLabel>\n          <NavList.Root>\n            {PAGES.map(([page, Glyph, current]) => (\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              </NavList.Item>\n            ))}\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n      <Sidebar.Footer>\n        <Sidebar.Nav aria-label={t(\"account\")}>\n          <NavList.Root>\n            <NavList.Item>\n              <NavList.Link href=\"#account\" tooltip={t(\"person\")}>\n                <UserIcon />\n                <span>{t(\"person\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Footer>\n    </Sidebar.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/shell.example.tsx
+var shell_example_exports = /* @__PURE__ */ __exportAll({
+	Shell: () => Shell,
+	source: () => source$2
+});
+const GHOST = {
+	shape: "square",
+	size: "sm",
+	variant: "ghost"
+};
+const PAGES = [
+	[
+		"overview",
+		HouseIcon,
+		void 0
+	],
+	[
+		"runs",
+		PlayIcon,
+		"page"
+	],
+	[
+		"pipelines",
+		GitBranchIcon,
+		void 0
+	],
+	[
+		"approvals",
+		ShieldCheckIcon,
+		void 0
+	]
+];
+function Shell(props) {
+	const $ = c(72);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("navigation");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Header$1, { children: /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: GHOST,
+			children: /* @__PURE__ */ jsx(Trigger, {
+				"aria-label": t0,
+				as: Button,
+				children: t1
+			})
+		}) });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ledger");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			size: "sm",
+			truncate: true,
+			weight: "medium",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("findPage");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(XIcon, {});
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("clearFilter");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("filter");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t5 || $[18] !== t7 || $[19] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t5,
+			clearIndicator: t6,
+			clearLabel: t7,
+			placeholder: t8,
+			searchIndicator: t9
+		});
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t4) {
+		t11 = /* @__PURE__ */ jsxs(Header, { children: [t4, t10] });
+		$[21] = t10;
+		$[22] = t4;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t) {
+		t12 = t("platform");
+		$[24] = t;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t12
+		});
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t) {
+		t14 = PAGES.map((t15) => {
+			const [page, Glyph, current] = t15;
+			return /* @__PURE__ */ jsx(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) })]
+			}) }, page);
+		});
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(NavList.Root, { children: t14 });
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t13 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t13, t15] }) });
+		$[32] = t13;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t) {
+		t17 = t("account");
+		$[35] = t;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t) {
+		t18 = t("person");
+		$[37] = t;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(UserIcon, {});
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== t) {
+		t20 = t("person");
+		$[40] = t;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t20) {
+		t21 = /* @__PURE__ */ jsx("span", { children: t20 });
+		$[42] = t20;
+		$[43] = t21;
+	} else t21 = $[43];
+	let t22;
+	if ($[44] !== t18 || $[45] !== t21) {
+		t22 = /* @__PURE__ */ jsx(NavList.Root, { children: /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#account",
+			tooltip: t18,
+			children: [t19, t21]
+		}) }) });
+		$[44] = t18;
+		$[45] = t21;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== t17 || $[48] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Nav, {
+			"aria-label": t17,
+			children: t22
+		}) });
+		$[47] = t17;
+		$[48] = t22;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== t11 || $[51] !== t16 || $[52] !== t23) {
+		t24 = /* @__PURE__ */ jsx(Navbar, {
+			collapse: "icons",
+			foldsBelow: "sm",
+			children: /* @__PURE__ */ jsxs(Root, {
+				variant: "subtle",
+				children: [
+					t11,
+					t16,
+					t23
+				]
+			})
+		});
+		$[50] = t11;
+		$[51] = t16;
+		$[52] = t23;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t) {
+		t25 = t("runs");
+		$[54] = t;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t25
+		});
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== t) {
+		t27 = t("runsAbout");
+		$[58] = t;
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== t27) {
+		t28 = /* @__PURE__ */ jsx(Description, { children: t27 });
+		$[60] = t27;
+		$[61] = t28;
+	} else t28 = $[61];
+	let t29;
+	if ($[62] !== t26 || $[63] !== t28) {
+		t29 = /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Root$1, {
+			size: "sm",
+			children: /* @__PURE__ */ jsxs(Header$2, { children: [t26, t28] })
+		}) });
+		$[62] = t26;
+		$[63] = t28;
+		$[64] = t29;
+	} else t29 = $[64];
+	let t30;
+	if ($[65] !== t24 || $[66] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Body, { children: [t24, t29] });
+		$[65] = t24;
+		$[66] = t29;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== props || $[69] !== t2 || $[70] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Root$2, {
+			...props,
+			children: [t2, t30]
+		});
+		$[68] = props;
+		$[69] = t2;
+		$[70] = t30;
+		$[71] = t31;
+	} else t31 = $[71];
+	return t31;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport {\n  GitBranchIcon,\n  HouseIcon,\n  MenuIcon,\n  PlayIcon,\n  SearchIcon,\n  ShieldCheckIcon,\n  UserIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Page, Sidebar } from \"@stealthscale/component-screen\";\n\nconst GHOST = { shape: \"square\", size: \"sm\", variant: \"ghost\" } as const;\n\nconst PAGES = [\n  [\"overview\", HouseIcon, undefined],\n  [\"runs\", PlayIcon, \"page\"],\n  [\"pipelines\", GitBranchIcon, undefined],\n  [\"approvals\", ShieldCheckIcon, undefined],\n] as const;\n\nexport function Shell(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <AppShell.Root {...props}>\n      <AppShell.Header>\n        <ButtonPropsProvider value={GHOST}>\n          <AppShell.Trigger aria-label={t(\"navigation\")} as={Button}>\n            <MenuIcon />\n          </AppShell.Trigger>\n        </ButtonPropsProvider>\n      </AppShell.Header>\n      <AppShell.Body>\n        <AppShell.Navbar collapse=\"icons\" foldsBelow=\"sm\">\n          <Sidebar.Root variant=\"subtle\">\n            <Sidebar.Header>\n              <Text as=\"p\" size=\"sm\" truncate weight=\"medium\">\n                {t(\"ledger\")}\n              </Text>\n              <Sidebar.Search\n                aria-label={t(\"findPage\")}\n                clearIndicator={<XIcon />}\n                clearLabel={t(\"clearFilter\")}\n                placeholder={t(\"filter\")}\n                searchIndicator={<SearchIcon />}\n              />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel as=\"h3\">{t(\"platform\")}</Sidebar.NavLabel>\n                <NavList.Root>\n                  {PAGES.map(([page, Glyph, current]) => (\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                    </NavList.Item>\n                  ))}\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Content>\n            <Sidebar.Footer>\n              <Sidebar.Nav aria-label={t(\"account\")}>\n                <NavList.Root>\n                  <NavList.Item>\n                    <NavList.Link href=\"#account\" tooltip={t(\"person\")}>\n                      <UserIcon />\n                      <span>{t(\"person\")}</span>\n                    </NavList.Link>\n                  </NavList.Item>\n                </NavList.Root>\n              </Sidebar.Nav>\n            </Sidebar.Footer>\n          </Sidebar.Root>\n        </AppShell.Navbar>\n        <AppShell.Main>\n          <Page.Root size=\"sm\">\n            <Page.Header>\n              <Page.Title as=\"h3\">{t(\"runs\")}</Page.Title>\n              <Page.Description>{t(\"runsAbout\")}</Page.Description>\n            </Page.Header>\n          </Page.Root>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/sizes.example.tsx
+var sizes_example_exports = /* @__PURE__ */ __exportAll({
+	Sizes: () => Sizes,
+	source: () => source$1
+});
+const SIZES = [
+	{
+		label: "reports",
+		pages: [["revenue", TrendingUpIcon], ["expenses", ReceiptIcon]],
+		size: "sm"
+	},
+	{
+		label: "customers",
+		pages: [["active", UserCheckIcon], ["archived", ArchiveIcon]],
+		size: "md"
+	},
+	{
+		label: "settings",
+		pages: [["general", SettingsIcon], ["billing", CreditCardIcon]],
+		size: "lg"
+	}
+];
+function Sizes() {
+	const $ = c(4);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SIZES.map((t1) => {
+			const { label, pages, size } = t1;
+			return /* @__PURE__ */ jsxs(Root, {
+				size,
+				variant: "outline",
+				children: [/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx("span", { children: t("acme") }), /* @__PURE__ */ jsx(Search, {
+					"aria-label": t("findPageIn", { section: t(label) }),
+					placeholder: t("filter"),
+					searchIndicator: /* @__PURE__ */ jsx(SearchIcon, {})
+				})] }), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [/* @__PURE__ */ jsx(NavLabel, {
+					as: "h3",
+					children: t(label)
+				}), /* @__PURE__ */ jsx(NavList.Root, { children: pages.map((t2, at) => {
+					const [page, Glyph] = t2;
+					return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+						"aria-current": at === 0 ? "page" : void 0,
+						href: `#${page}`,
+						children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(page) })]
+					}) }, page);
+				}) })] }) })]
+			}, size);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			gap: "lg",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport {\n  ArchiveIcon,\n  CreditCardIcon,\n  ReceiptIcon,\n  SearchIcon,\n  SettingsIcon,\n  TrendingUpIcon,\n  UserCheckIcon,\n} from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nconst SIZES = [\n  {\n    label: \"reports\",\n    pages: [\n      [\"revenue\", TrendingUpIcon],\n      [\"expenses\", ReceiptIcon],\n    ],\n    size: \"sm\",\n  },\n  {\n    label: \"customers\",\n    pages: [\n      [\"active\", UserCheckIcon],\n      [\"archived\", ArchiveIcon],\n    ],\n    size: \"md\",\n  },\n  {\n    label: \"settings\",\n    pages: [\n      [\"general\", SettingsIcon],\n      [\"billing\", CreditCardIcon],\n    ],\n    size: \"lg\",\n  },\n] as const;\n\nexport function Sizes(): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <Stack gap=\"lg\">\n      {SIZES.map(({ label, pages, size }) => (\n        <Sidebar.Root key={size} size={size} variant=\"outline\">\n          <Sidebar.Header>\n            <span>{t(\"acme\")}</span>\n            <Sidebar.Search\n              aria-label={t(\"findPageIn\", { section: t(label) })}\n              placeholder={t(\"filter\")}\n              searchIndicator={<SearchIcon />}\n            />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Nav>\n              <Sidebar.NavLabel as=\"h3\">{t(label)}</Sidebar.NavLabel>\n              <NavList.Root>\n                {pages.map(([page, Glyph], at) => (\n                  <NavList.Item key={page}>\n                    <NavList.Link aria-current={at === 0 ? \"page\" : undefined} 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      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/examples/workspace.example.tsx
+var workspace_example_exports = /* @__PURE__ */ __exportAll({
+	Workspace: () => Workspace,
+	source: () => source
+});
+function Workspace(props) {
+	const $ = c(53);
+	const { t } = useWords("sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("acme");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("production");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			tone: "subtle",
+			weight: "normal",
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Text, {
+			as: "p",
+			size: "sm",
+			truncate: true,
+			weight: "medium",
+			children: [
+				t0,
+				" ",
+				t2
+			]
+		}) });
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("workspace");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t4
+		});
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(LayoutDashboardIcon, {});
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("overview");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			"aria-current": "page",
+			href: "#overview",
+			children: [t6, /* @__PURE__ */ jsx("span", { children: t7 })]
+		}) });
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(FileTextIcon, {});
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("invoices");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#invoices",
+			children: [t9, /* @__PURE__ */ jsx("span", { children: t10 })]
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(NavList.Badge, { children: "3" });
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t11) {
+		t13 = /* @__PURE__ */ jsxs(NavList.Item, { children: [t11, t12] });
+		$[24] = t11;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(UsersIcon, {});
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t) {
+		t15 = t("customers");
+		$[27] = t;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t15) {
+		t16 = /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#customers",
+			children: [t14, /* @__PURE__ */ jsx("span", { children: t15 })]
+		}) });
+		$[29] = t15;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== t13 || $[32] !== t16 || $[33] !== t8) {
+		t17 = /* @__PURE__ */ jsxs(NavList.Root, { children: [
+			t8,
+			t13,
+			t16
+		] });
+		$[31] = t13;
+		$[32] = t16;
+		$[33] = t8;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17 || $[36] !== t5) {
+		t18 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t5, t17] }) });
+		$[35] = t17;
+		$[36] = t5;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t) {
+		t19 = t("account");
+		$[38] = t;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(UserIcon, {});
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t) {
+		t21 = t("person");
+		$[41] = t;
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== t21) {
+		t22 = /* @__PURE__ */ jsx(NavList.Root, { children: /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			href: "#account",
+			children: [t20, /* @__PURE__ */ jsx("span", { children: t21 })]
+		}) }) });
+		$[43] = t21;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== t19 || $[46] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Nav, {
+			"aria-label": t19,
+			children: t22
+		}) });
+		$[45] = t19;
+		$[46] = t22;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== props || $[49] !== t18 || $[50] !== t23 || $[51] !== t3) {
+		t24 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t3,
+				t18,
+				t23
+			]
+		});
+		$[48] = props;
+		$[49] = t18;
+		$[50] = t23;
+		$[51] = t3;
+		$[52] = t24;
+	} else t24 = $[52];
+	return t24;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { FileTextIcon, LayoutDashboardIcon, UserIcon, UsersIcon } from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sidebar } from \"@stealthscale/component-screen\";\n\nexport function Workspace(props: Sidebar.RootProps): ReactElement {\n  const { t } = useWords(\"sidebar\");\n\n  return (\n    <Sidebar.Root {...props}>\n      <Sidebar.Header>\n        <Text as=\"p\" size=\"sm\" truncate weight=\"medium\">\n          {t(\"acme\")}{\" \"}\n          <Text as=\"span\" size=\"sm\" tone=\"subtle\" weight=\"normal\">\n            {t(\"production\")}\n          </Text>\n        </Text>\n      </Sidebar.Header>\n      <Sidebar.Content>\n        <Sidebar.Nav>\n          <Sidebar.NavLabel as=\"h3\">{t(\"workspace\")}</Sidebar.NavLabel>\n          <NavList.Root>\n            <NavList.Item>\n              <NavList.Link aria-current=\"page\" href=\"#overview\">\n                <LayoutDashboardIcon />\n                <span>{t(\"overview\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n            <NavList.Item>\n              <NavList.Link href=\"#invoices\">\n                <FileTextIcon />\n                <span>{t(\"invoices\")}</span>\n              </NavList.Link>\n              <NavList.Badge>3</NavList.Badge>\n            </NavList.Item>\n            <NavList.Item>\n              <NavList.Link href=\"#customers\">\n                <UsersIcon />\n                <span>{t(\"customers\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n      <Sidebar.Footer>\n        <Sidebar.Nav aria-label={t(\"account\")}>\n          <NavList.Root>\n            <NavList.Item>\n              <NavList.Link href=\"#account\">\n                <UserIcon />\n                <span>{t(\"person\")}</span>\n              </NavList.Link>\n            </NavList.Item>\n          </NavList.Root>\n        </Sidebar.Nav>\n      </Sidebar.Footer>\n    </Sidebar.Root>\n  );\n}\n";
+//#endregion
+//#region src/sidebar/sidebar.specimen.tsx
+/**
+* Catalogue page for the sidebar.
+*
+* @remarks
+*   The first three scenes render an operations console: in full in a box as wide as a sidebar, in
+*   an app shell whose navigation closes to icons, and in the same shell at a phone's width. The
+*   kit's `Screen` gives each shell a window of a fixed height and contains the phone's sheet.
+*   `scenesOf` generates the looks from the workspace example in an `xs` room, the width of a
+*   sidebar. The sizes scene renders the sizes example, because the search field takes the size
+*   through the sidebar. The rail scene renders without a room, because a rail is as wide as its
+*   icons. The filter scene types a query that matches no page into the example's own field, so
+*   the empty message renders. The rooms, the boxes and the typing never appear in the examples.
+*   The words are keys under `sidebar` in `locales/en/specimen/sidebar.json`.
+*/
+/**
+* Renders a sidebar and types a query into its search field after it mounts.
+*
+* @remarks
+*   The staging sets the field's value through the input element's own setter and dispatches an
+*   `input` event, so the example's change handler filters the pages the way it does under a
+*   keyboard.
+*/
+function Typed(t0) {
+	const $ = c(6);
+	const { children } = t0;
+	const { t } = useWords("sidebar");
+	const [box, setBox] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== box || $[1] !== t) {
+		t1 = () => {
+			const input = box?.querySelector("input");
+			if (input === void 0 || input === null) return;
+			Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, t("query"));
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		};
+		t2 = [box, t];
+		$[0] = box;
+		$[1] = t;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref: setBox,
+			children
+		});
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+/**
+* Hand-written scene for the console sidebar in full.
+*/
+const whole = {
+	about: "sidebar.whole.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Sample, {
+			place: "stretch",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(Console, {})
+		})
+	}),
+	example: console_example_exports,
+	title: "sidebar.whole.title"
+};
+/**
+* Hand-written scene for the sidebar in an app shell panel that closes to icons.
+*/
+const shell = {
+	about: "sidebar.shell.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Shell, {})
+	}),
+	example: shell_example_exports,
+	frame: "bleed",
+	title: "sidebar.shell.title"
+};
+/**
+* Hand-written scene for the sidebar as a sheet with a bar of destinations at a phone's width.
+*/
+const phone = {
+	about: "sidebar.phone.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Screen, {
+			size: "lg",
+			children: /* @__PURE__ */ jsx(Phone, {})
+		})
+	}),
+	example: phone_example_exports,
+	title: "sidebar.phone.title"
+};
+/**
+* Hand-written scene for the three sizes.
+*/
+const sizes = {
+	about: "sidebar.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Sizes, {})
+	}),
+	example: sizes_example_exports,
+	title: "sidebar.size.title"
+};
+/**
+* Hand-written scene for the sidebar collapsed to a rail.
+*/
+const rail = {
+	about: "sidebar.rail.about",
+	draw: Rail,
+	example: rail_example_exports,
+	title: "sidebar.rail.title"
+};
+/**
+* Hand-written scene for one nav block with a heading over each list.
+*/
+const headings = {
+	about: "sidebar.headings.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Guides, {})
+	}),
+	example: guides_example_exports,
+	title: "sidebar.headings.title"
+};
+/**
+* Hand-written scene for the search that matches no page.
+*/
+const filtering = {
+	about: "sidebar.filtering.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Typed, { children: /* @__PURE__ */ jsx(Filter, {}) })
+	}),
+	example: filter_example_exports,
+	title: "sidebar.filtering.title"
+};
+var sidebar_specimen_default = specimen({
+	about: "sidebar.about",
+	id: "components/screen/sidebar",
+	imports: "import { AppShell, Sidebar } from \"@stealthscale/component-screen\";",
+	scenes: [
+		whole,
+		shell,
+		phone,
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Workspace, { ...props })
+			}),
+			example: workspace_example_exports,
+			namespace: "sidebar",
+			order: ["variant"],
+			skip: { size: "The sizes scene renders every size with its lists and fields at the same size." }
+		}),
+		sizes,
+		rail,
+		headings,
+		filtering
+	],
+	title: "sidebar.title"
+});
+//#endregion
+export { sidebar_specimen_default as default, filtering, headings, phone, rail, shell, sizes, whole };