@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/page/page.js

@@ -0,0 +1,2308 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { u as recipe } from "../../recipes-Cmy1leBm.js";
+import { $ as Sidebar, J as When, Q as TabList, X as Title, Y as Toolbar, Z as Tab, at as Leading, c as Root$1, ct as Description, dt as Body, et as Root, ft as Banner, ht as Action, it as Meta, lt as Breadcrumbs, mt as Actions, nt as Palette, ot as Header, pt as Aside, qt as Item, rt as Nav, st as Footer, tt as Picker, u as Group$1, ut as Trail } 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 { Portal } from "@stealthscale/component-primitives";
+import { Menu } from "@stealthscale/component-disclosure";
+import { Link, NavList } from "@stealthscale/component-navigation";
+import { Badge, Status } from "@stealthscale/component-data";
+import { Switch } from "@stealthscale/component-forms";
+import { Stack } from "@stealthscale/component-layout";
+import { Room, Screen, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowLeftIcon, ChevronDownIcon, ChevronRightIcon, ChevronsUpDownIcon, CreditCardIcon, EllipsisIcon, FilterIcon, GitBranchIcon, LayoutGridIcon, ListIcon, PaletteIcon, PlusIcon, RocketIcon, RotateCcwIcon, RotateCwIcon, ServerCrashIcon, SettingsIcon, UsersIcon } from "lucide-react";
+import { Heading, Icon, Text } from "@stealthscale/component-typography";
+import { EmptyState, Skeleton, SkeletonText } from "@stealthscale/component-feedback";
+import { DataList } from "@stealthscale/component-collections";
+//#region src/page/examples/deployment.example.tsx
+var deployment_example_exports = /* @__PURE__ */ __exportAll({
+	Deployment: () => Deployment,
+	source: () => source$10
+});
+function Deployment() {
+	const $ = c(66);
+	const { t } = useWords("page");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ArrowLeftIcon, { size: "1em" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("deployment.parent");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Trail, {
+			href: "#deployments",
+			children: [t0, t1]
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("deployment.title");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("deployment.public");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Badge, {
+			palette: "neutral",
+			size: "sm",
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("deployment.template");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Badge, {
+			palette: "neutral",
+			size: "sm",
+			variant: "outline",
+			children: t7
+		});
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t6 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Meta, { children: [t6, t8] });
+		$[17] = t6;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(GitBranchIcon, { size: "1em" });
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t) {
+		t11 = t("deployment.branch");
+		$[21] = t;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Stack, {
+			as: "span",
+			direction: "row",
+			gap: "xs",
+			children: [t10, t11]
+		});
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "•"
+		});
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t) {
+		t15 = t("deployment.ready");
+		$[27] = t;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "success",
+			size: "inherit",
+			children: [t14, t15]
+		});
+		$[29] = t15;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "•"
+		});
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== t) {
+		t18 = t("deployment.deployed");
+		$[32] = t;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== t18) {
+		t19 = /* @__PURE__ */ jsx("span", { children: t18 });
+		$[34] = t18;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] !== t12 || $[37] !== t16 || $[38] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsxs(Stack, {
+			as: "span",
+			direction: "row",
+			gap: "md",
+			wrap: true,
+			children: [
+				t12,
+				t13,
+				t16,
+				t17,
+				t19
+			]
+		}) });
+		$[36] = t12;
+		$[37] = t16;
+		$[38] = t19;
+		$[39] = t20;
+	} else t20 = $[39];
+	let t21;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(RotateCcwIcon, { size: "1em" });
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== t) {
+		t22 = t("deployment.rollBack");
+		$[41] = t;
+		$[42] = t22;
+	} else t22 = $[42];
+	let t23;
+	if ($[43] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Action, {
+			icon: t21,
+			children: t22
+		});
+		$[43] = t22;
+		$[44] = t23;
+	} else t23 = $[44];
+	let t24;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(RocketIcon, { size: "1em" });
+		$[45] = t24;
+	} else t24 = $[45];
+	let t25;
+	if ($[46] !== t) {
+		t25 = t("deployment.deploy");
+		$[46] = t;
+		$[47] = t25;
+	} else t25 = $[47];
+	let t26;
+	if ($[48] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Action, {
+			icon: t24,
+			primary: true,
+			children: t25
+		});
+		$[48] = t25;
+		$[49] = t26;
+	} else t26 = $[49];
+	let t27;
+	if ($[50] !== t23 || $[51] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Actions, { children: [t23, t26] });
+		$[50] = t23;
+		$[51] = t26;
+		$[52] = t27;
+	} else t27 = $[52];
+	let t28;
+	if ($[53] !== t2 || $[54] !== t20 || $[55] !== t27 || $[56] !== t4 || $[57] !== t9) {
+		t28 = /* @__PURE__ */ jsxs(Header, { children: [
+			t2,
+			t4,
+			t9,
+			t20,
+			t27
+		] });
+		$[53] = t2;
+		$[54] = t20;
+		$[55] = t27;
+		$[56] = t4;
+		$[57] = t9;
+		$[58] = t28;
+	} else t28 = $[58];
+	let t29;
+	if ($[59] !== t) {
+		t29 = t("deployment.body");
+		$[59] = t;
+		$[60] = t29;
+	} else t29 = $[60];
+	let t30;
+	if ($[61] !== t29) {
+		t30 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t29
+		}) });
+		$[61] = t29;
+		$[62] = t30;
+	} else t30 = $[62];
+	let t31;
+	if ($[63] !== t28 || $[64] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Root, { children: [t28, t30] });
+		$[63] = t28;
+		$[64] = t30;
+		$[65] = t31;
+	} else t31 = $[65];
+	return t31;
+}
+const source$10 = "import { type ReactElement } from \"react\";\n\nimport { ArrowLeftIcon, GitBranchIcon, RocketIcon, RotateCcwIcon } from \"lucide-react\";\n\nimport { Badge, Status } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nexport function Deployment(): ReactElement {\n  const { t } = useWords(\"page\");\n\n  return (\n    <Page.Root>\n      <Page.Header>\n        <Page.Trail href=\"#deployments\">\n          <ArrowLeftIcon size=\"1em\" />\n          {t(\"deployment.parent\")}\n        </Page.Trail>\n        <Page.Title as=\"h3\">{t(\"deployment.title\")}</Page.Title>\n        <Page.Meta>\n          <Badge palette=\"neutral\" size=\"sm\">\n            {t(\"deployment.public\")}\n          </Badge>\n          <Badge palette=\"neutral\" size=\"sm\" variant=\"outline\">\n            {t(\"deployment.template\")}\n          </Badge>\n        </Page.Meta>\n        <Page.Description>\n          <Stack as=\"span\" direction=\"row\" gap=\"md\" wrap>\n            <Stack as=\"span\" direction=\"row\" gap=\"xs\">\n              <GitBranchIcon size=\"1em\" />\n              {t(\"deployment.branch\")}\n            </Stack>\n            <span aria-hidden>•</span>\n            <Status.Root palette=\"success\" size=\"inherit\">\n              <Status.Indicator />\n              {t(\"deployment.ready\")}\n            </Status.Root>\n            <span aria-hidden>•</span>\n            <span>{t(\"deployment.deployed\")}</span>\n          </Stack>\n        </Page.Description>\n        <Page.Actions>\n          <Page.Action icon={<RotateCcwIcon size=\"1em\" />}>{t(\"deployment.rollBack\")}</Page.Action>\n          <Page.Action icon={<RocketIcon size=\"1em\" />} primary>\n            {t(\"deployment.deploy\")}\n          </Page.Action>\n        </Page.Actions>\n      </Page.Header>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"deployment.body\")}\n        </Text>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/failed.example.tsx
+var failed_example_exports = /* @__PURE__ */ __exportAll({
+	Failed: () => Failed,
+	source: () => source$9
+});
+function Failed() {
+	const $ = c(25);
+	const { t } = useWords("page");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("approvals.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		}) });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EmptyState.Indicator, { children: /* @__PURE__ */ jsx(ServerCrashIcon, {}) });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("approvals.heading");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(EmptyState.Title, {
+			as: "h4",
+			children: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("approvals.about");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(EmptyState.Description, { children: t5 });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(RotateCwIcon, { size: "1em" });
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("approvals.retry");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Button, {
+			size: "sm",
+			variant: "outline",
+			children: [t7, t8]
+		});
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t4 || $[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(EmptyState.Root, { children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [
+			t2,
+			t4,
+			t6,
+			t9
+		] }) }) });
+		$[18] = t4;
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t1 || $[23] !== t10) {
+		t11 = /* @__PURE__ */ jsxs(Root, {
+			size: "sm",
+			children: [t1, t10]
+		});
+		$[22] = t1;
+		$[23] = t10;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+}
+const source$9 = "import { type ReactElement } from \"react\";\n\nimport { RotateCwIcon, ServerCrashIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { EmptyState } from \"@stealthscale/component-feedback\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nexport function Failed(): ReactElement {\n  const { t } = useWords(\"page\");\n\n  return (\n    <Page.Root size=\"sm\">\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"approvals.title\")}</Page.Title>\n      </Page.Header>\n      <Page.Body>\n        <EmptyState.Root>\n          <EmptyState.Content>\n            <EmptyState.Indicator>\n              <ServerCrashIcon />\n            </EmptyState.Indicator>\n            <EmptyState.Title as=\"h4\">{t(\"approvals.heading\")}</EmptyState.Title>\n            <EmptyState.Description>{t(\"approvals.about\")}</EmptyState.Description>\n            <Button size=\"sm\" variant=\"outline\">\n              <RotateCwIcon size=\"1em\" />\n              {t(\"approvals.retry\")}\n            </Button>\n          </EmptyState.Content>\n        </EmptyState.Root>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/incident.example.tsx
+var incident_example_exports = /* @__PURE__ */ __exportAll({
+	Incident: () => Incident,
+	source: () => source$8
+});
+const EVENTS$1 = [
+	"detected",
+	"paged",
+	"scoped",
+	"queued",
+	"posted",
+	"slowed",
+	"asked",
+	"moved",
+	"recovered",
+	"drained",
+	"closed",
+	"reviewed",
+	"shared"
+];
+const FACTS = [
+	"severity",
+	"owner",
+	"started",
+	"duration"
+];
+function Incident(props) {
+	const $ = c(53);
+	const { t } = useWords("page");
+	const details = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("incident.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("incident.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Header, { children: [t1, t3] });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = EVENTS$1.map((event) => /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t(`incident.events.${event}`)
+		}, event));
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("incident.runbook");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Link, {
+			href: "#runbook",
+			children: t6
+		});
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t5, t7]
+		}) });
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("incident.details");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== details || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Heading, {
+			as: "h4",
+			id: details,
+			size: "xs",
+			children: t9
+		});
+		$[22] = details;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t) {
+		t11 = t("incident.status");
+		$[25] = t;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t11) {
+		t12 = /* @__PURE__ */ jsx(DataList.ItemLabel, { children: t11 });
+		$[27] = t11;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("incident.resolved");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "success",
+			size: "inherit",
+			children: [t13, t14]
+		}) });
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t12 || $[35] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(DataList.Item, { children: [t12, t15] });
+		$[34] = t12;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t) {
+		t17 = FACTS.map((fact) => /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(`incident.facts.${fact}.label`) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: t(`incident.facts.${fact}.value`) })] }, fact));
+		$[37] = t;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t16 || $[40] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(DataList.Root, {
+			orientation: "horizontal",
+			size: "sm",
+			children: [t16, t17]
+		});
+		$[39] = t16;
+		$[40] = t17;
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] !== t10 || $[43] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t10, t18]
+		});
+		$[42] = t10;
+		$[43] = t18;
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== details || $[46] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Aside, {
+			"aria-labelledby": details,
+			sticky: true,
+			children: t19
+		});
+		$[45] = details;
+		$[46] = t19;
+		$[47] = t20;
+	} else t20 = $[47];
+	let t21;
+	if ($[48] !== props || $[49] !== t20 || $[50] !== t4 || $[51] !== t8) {
+		t21 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t4,
+				t8,
+				t20
+			]
+		});
+		$[48] = props;
+		$[49] = t20;
+		$[50] = t4;
+		$[51] = t8;
+		$[52] = t21;
+	} else t21 = $[52];
+	return t21;
+}
+const source$8 = "import { type ReactElement, useId } from \"react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Status } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst EVENTS = [\n  \"detected\",\n  \"paged\",\n  \"scoped\",\n  \"queued\",\n  \"posted\",\n  \"slowed\",\n  \"asked\",\n  \"moved\",\n  \"recovered\",\n  \"drained\",\n  \"closed\",\n  \"reviewed\",\n  \"shared\",\n] as const;\n\nconst FACTS = [\"severity\", \"owner\", \"started\", \"duration\"] as const;\n\nexport function Incident(props: Page.RootProps): ReactElement {\n  const { t } = useWords(\"page\");\n  const details = useId();\n\n  return (\n    <Page.Root {...props}>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"incident.title\")}</Page.Title>\n        <Page.Description>{t(\"incident.about\")}</Page.Description>\n      </Page.Header>\n      <Page.Body>\n        <Stack gap=\"sm\">\n          {EVENTS.map((event) => (\n            <Text key={event} size=\"sm\">\n              {t(`incident.events.${event}`)}\n            </Text>\n          ))}\n          <Link href=\"#runbook\">{t(\"incident.runbook\")}</Link>\n        </Stack>\n      </Page.Body>\n      <Page.Aside aria-labelledby={details} sticky>\n        <Stack gap=\"sm\">\n          <Heading as=\"h4\" id={details} size=\"xs\">\n            {t(\"incident.details\")}\n          </Heading>\n          <DataList.Root orientation=\"horizontal\" size=\"sm\">\n            <DataList.Item>\n              <DataList.ItemLabel>{t(\"incident.status\")}</DataList.ItemLabel>\n              <DataList.ItemValue>\n                <Status.Root palette=\"success\" size=\"inherit\">\n                  <Status.Indicator />\n                  {t(\"incident.resolved\")}\n                </Status.Root>\n              </DataList.ItemValue>\n            </DataList.Item>\n            {FACTS.map((fact) => (\n              <DataList.Item key={fact}>\n                <DataList.ItemLabel>{t(`incident.facts.${fact}.label`)}</DataList.ItemLabel>\n                <DataList.ItemValue>{t(`incident.facts.${fact}.value`)}</DataList.ItemValue>\n              </DataList.Item>\n            ))}\n          </DataList.Root>\n        </Stack>\n      </Page.Aside>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/loading.example.tsx
+var loading_example_exports = /* @__PURE__ */ __exportAll({
+	Loading: () => Loading,
+	source: () => source$7
+});
+function Loading() {
+	const $ = c(19);
+	const { t } = useWords("page");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("pending.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("pending.title");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Skeleton, {
+			as: "span",
+			children: /* @__PURE__ */ jsx("span", { children: t1 })
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, {
+			"aria-label": t0,
+			as: "h3",
+			children: t2
+		});
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("pending.about");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Skeleton, {
+			as: "span",
+			children: /* @__PURE__ */ jsx("span", { children: t4 })
+		}) });
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t3, t5] });
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Body, {
+			"aria-busy": "true",
+			children: /* @__PURE__ */ jsx(SkeletonText, { lines: 4 })
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			size: "sm",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { Skeleton, SkeletonText } from \"@stealthscale/component-feedback\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nexport function Loading(): ReactElement {\n  const { t } = useWords(\"page\");\n\n  return (\n    <Page.Root size=\"sm\">\n      <Page.Header>\n        <Page.Title aria-label={t(\"pending.label\")} as=\"h3\">\n          <Skeleton as=\"span\">\n            <span>{t(\"pending.title\")}</span>\n          </Skeleton>\n        </Page.Title>\n        <Page.Description>\n          <Skeleton as=\"span\">\n            <span>{t(\"pending.about\")}</span>\n          </Skeleton>\n        </Page.Description>\n      </Page.Header>\n      <Page.Body aria-busy=\"true\">\n        <SkeletonText lines={4} />\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/measured.example.tsx
+var measured_example_exports = /* @__PURE__ */ __exportAll({
+	Measured: () => Measured,
+	source: () => source$6
+});
+function Measured(props) {
+	const $ = c(24);
+	const { t } = useWords("page");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("measured.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("measured.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Header, { children: [t1, t3] });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("measured.body");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t5
+		}) });
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t) {
+		t7 = t("measured.updated");
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t7
+		}) });
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== props || $[20] !== t4 || $[21] !== t6 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			measure: "narrow",
+			size: "sm",
+			...props,
+			children: [
+				t4,
+				t6,
+				t8
+			]
+		});
+		$[19] = props;
+		$[20] = t4;
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nexport function Measured(props: Page.RootProps): ReactElement {\n  const { t } = useWords(\"page\");\n\n  return (\n    <Page.Root measure=\"narrow\" size=\"sm\" {...props}>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"measured.title\")}</Page.Title>\n        <Page.Description>{t(\"measured.about\")}</Page.Description>\n      </Page.Header>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"measured.body\")}\n        </Text>\n      </Page.Body>\n      <Page.Footer>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"measured.updated\")}\n        </Text>\n      </Page.Footer>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/notifications.example.tsx
+var notifications_example_exports = /* @__PURE__ */ __exportAll({
+	Notifications: () => Notifications,
+	source: () => source$5
+});
+const EVENTS = [
+	"deployed",
+	"failed",
+	"invited",
+	"joined",
+	"renewed",
+	"billed",
+	"limited",
+	"expired"
+];
+const CHANNELS = [
+	{
+		count: 8,
+		value: "email"
+	},
+	{
+		count: 3,
+		value: "push"
+	},
+	{
+		count: 2,
+		value: "digest"
+	}
+];
+function Notifications() {
+	const $ = c(66);
+	const { t } = useWords("page");
+	const [channel, setChannel] = useState("email");
+	let T0;
+	let T1;
+	let T2;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== channel || $[1] !== t) {
+		const shown = CHANNELS.find((t5) => {
+			const { value } = t5;
+			return value === channel;
+		})?.count ?? 0;
+		T2 = Root;
+		t2 = "sm";
+		let t6;
+		if ($[10] !== t) {
+			t6 = t("notifications.title");
+			$[10] = t;
+			$[11] = t6;
+		} else t6 = $[11];
+		let t7;
+		if ($[12] !== t6) {
+			t7 = /* @__PURE__ */ jsx(Title, {
+				as: "h3",
+				children: t6
+			});
+			$[12] = t6;
+			$[13] = t7;
+		} else t7 = $[13];
+		let t8;
+		if ($[14] !== t) {
+			t8 = t("notifications.about");
+			$[14] = t;
+			$[15] = t8;
+		} else t8 = $[15];
+		let t9;
+		if ($[16] !== t8) {
+			t9 = /* @__PURE__ */ jsx(Description, { children: t8 });
+			$[16] = t8;
+			$[17] = t9;
+		} else t9 = $[17];
+		let t10;
+		if ($[18] !== t) {
+			t10 = t("notifications.reset");
+			$[18] = t;
+			$[19] = t10;
+		} else t10 = $[19];
+		let t11;
+		if ($[20] !== t10) {
+			t11 = /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Action, { children: t10 }) });
+			$[20] = t10;
+			$[21] = t11;
+		} else t11 = $[21];
+		if ($[22] !== t11 || $[23] !== t7 || $[24] !== t9) {
+			t3 = /* @__PURE__ */ jsxs(Header, {
+				sticky: true,
+				children: [
+					t7,
+					t9,
+					t11
+				]
+			});
+			$[22] = t11;
+			$[23] = t7;
+			$[24] = t9;
+			$[25] = t3;
+		} else t3 = $[25];
+		let t12;
+		if ($[26] !== t) {
+			t12 = t("notifications.channels");
+			$[26] = t;
+			$[27] = t12;
+		} else t12 = $[27];
+		let t13;
+		if ($[28] !== t) {
+			t13 = t("notifications.channels");
+			$[28] = t;
+			$[29] = t13;
+		} else t13 = $[29];
+		let t14;
+		if ($[30] !== t) {
+			t14 = CHANNELS.map((t15) => {
+				const { value: value_0 } = t15;
+				return /* @__PURE__ */ jsx(Tab, {
+					value: value_0,
+					children: t(`notifications.${value_0}`)
+				}, value_0);
+			});
+			$[30] = t;
+			$[31] = t14;
+		} else t14 = $[31];
+		let t15;
+		if ($[32] !== channel || $[33] !== t13 || $[34] !== t14) {
+			t15 = /* @__PURE__ */ jsx(TabList, {
+				"aria-label": t13,
+				onValueChange: setChannel,
+				value: channel,
+				children: t14
+			});
+			$[32] = channel;
+			$[33] = t13;
+			$[34] = t14;
+			$[35] = t15;
+		} else t15 = $[35];
+		if ($[36] !== t12 || $[37] !== t15) {
+			t4 = /* @__PURE__ */ jsx(Nav, {
+				"aria-label": t12,
+				sticky: true,
+				children: t15
+			});
+			$[36] = t12;
+			$[37] = t15;
+			$[38] = t4;
+		} else t4 = $[38];
+		T1 = Body;
+		T0 = Stack;
+		t0 = "md";
+		let t16;
+		if ($[39] !== t) {
+			t16 = (event, at) => /* @__PURE__ */ jsxs(Switch.Root, {
+				defaultChecked: at % 3 !== 2,
+				size: "sm",
+				spread: true,
+				children: [/* @__PURE__ */ jsx(Switch.Label, { children: t(`notifications.events.${event}`) }), /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) })]
+			}, event);
+			$[39] = t;
+			$[40] = t16;
+		} else t16 = $[40];
+		t1 = EVENTS.slice(0, shown).map(t16);
+		$[0] = channel;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = T2;
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		T2 = $[4];
+		t0 = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
+	}
+	let t5;
+	if ($[41] !== T0 || $[42] !== t0 || $[43] !== t1) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			gap: t0,
+			children: t1
+		});
+		$[41] = T0;
+		$[42] = t0;
+		$[43] = t1;
+		$[44] = t5;
+	} else t5 = $[44];
+	let t6;
+	if ($[45] !== T1 || $[46] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T1, { children: t5 });
+		$[45] = T1;
+		$[46] = t5;
+		$[47] = t6;
+	} else t6 = $[47];
+	let t7;
+	if ($[48] !== t) {
+		t7 = t("notifications.save");
+		$[48] = t;
+		$[49] = t7;
+	} else t7 = $[49];
+	let t8;
+	if ($[50] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t7
+		});
+		$[50] = t7;
+		$[51] = t8;
+	} else t8 = $[51];
+	let t9;
+	if ($[52] !== t) {
+		t9 = t("notifications.cancel");
+		$[52] = t;
+		$[53] = t9;
+	} else t9 = $[53];
+	let t10;
+	if ($[54] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			children: t9
+		});
+		$[54] = t9;
+		$[55] = t10;
+	} else t10 = $[55];
+	let t11;
+	if ($[56] !== t10 || $[57] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Footer, {
+			sticky: true,
+			children: [t8, t10]
+		});
+		$[56] = t10;
+		$[57] = t8;
+		$[58] = t11;
+	} else t11 = $[58];
+	let t12;
+	if ($[59] !== T2 || $[60] !== t11 || $[61] !== t2 || $[62] !== t3 || $[63] !== t4 || $[64] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(T2, {
+			size: t2,
+			children: [
+				t3,
+				t4,
+				t6,
+				t11
+			]
+		});
+		$[59] = T2;
+		$[60] = t11;
+		$[61] = t2;
+		$[62] = t3;
+		$[63] = t4;
+		$[64] = t6;
+		$[65] = t12;
+	} else t12 = $[65];
+	return t12;
+}
+const source$5 = "import { type ReactElement, useState } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Switch } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst EVENTS = [\n  \"deployed\",\n  \"failed\",\n  \"invited\",\n  \"joined\",\n  \"renewed\",\n  \"billed\",\n  \"limited\",\n  \"expired\",\n];\n\nconst CHANNELS = [\n  { count: 8, value: \"email\" },\n  { count: 3, value: \"push\" },\n  { count: 2, value: \"digest\" },\n] as const;\n\nexport function Notifications(): ReactElement {\n  const { t } = useWords(\"page\");\n  const [channel, setChannel] = useState(\"email\");\n  const shown = CHANNELS.find(({ value }) => value === channel)?.count ?? 0;\n\n  return (\n    <Page.Root size=\"sm\">\n      <Page.Header sticky>\n        <Page.Title as=\"h3\">{t(\"notifications.title\")}</Page.Title>\n        <Page.Description>{t(\"notifications.about\")}</Page.Description>\n        <Page.Actions>\n          <Page.Action>{t(\"notifications.reset\")}</Page.Action>\n        </Page.Actions>\n      </Page.Header>\n      <Page.Nav aria-label={t(\"notifications.channels\")} sticky>\n        <Page.TabList\n          aria-label={t(\"notifications.channels\")}\n          onValueChange={setChannel}\n          value={channel}\n        >\n          {CHANNELS.map(({ value }) => (\n            <Page.Tab key={value} value={value}>\n              {t(`notifications.${value}`)}\n            </Page.Tab>\n          ))}\n        </Page.TabList>\n      </Page.Nav>\n      <Page.Body>\n        <Stack gap=\"md\">\n          {EVENTS.slice(0, shown).map((event, at) => (\n            <Switch.Root defaultChecked={at % 3 !== 2} key={event} size=\"sm\" spread>\n              <Switch.Label>{t(`notifications.events.${event}`)}</Switch.Label>\n              <Switch.Control>\n                <Switch.Thumb />\n              </Switch.Control>\n            </Switch.Root>\n          ))}\n        </Stack>\n      </Page.Body>\n      <Page.Footer sticky>\n        <Button size=\"sm\">{t(\"notifications.save\")}</Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          {t(\"notifications.cancel\")}\n        </Button>\n      </Page.Footer>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/sections.example.tsx
+var sections_example_exports = /* @__PURE__ */ __exportAll({
+	Sections: () => Sections,
+	source: () => source$4
+});
+const SECTIONS$1 = [
+	["general", SettingsIcon],
+	["members", UsersIcon],
+	["billing", CreditCardIcon]
+];
+function Sections() {
+	const $ = c(36);
+	const { t } = useWords("page");
+	const [current, setCurrent] = useState("general");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("settings");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		}) });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== current || $[5] !== t) {
+		t2 = t(current);
+		$[4] = current;
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("sections");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ChevronDownIcon, { size: "1em" });
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("resizeSections");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("sections");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== current || $[15] !== t) {
+		t7 = SECTIONS$1.map((t8) => {
+			const [section, Glyph] = t8;
+			return /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+				"aria-current": section === current ? "page" : void 0,
+				href: `#${section}`,
+				onClick: () => {
+					setCurrent(section);
+				},
+				children: [/* @__PURE__ */ jsx(Glyph, {}), /* @__PURE__ */ jsx("span", { children: t(section) })]
+			}) }, section);
+		});
+		$[14] = current;
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(NavList.Root, { children: t7 });
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t6 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx("nav", {
+			"aria-label": t6,
+			children: t8
+		});
+		$[19] = t6;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t2 || $[23] !== t3 || $[24] !== t5 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Sidebar, {
+			current: t2,
+			label: t3,
+			pickerIcon: t4,
+			resizable: true,
+			resizeLabel: t5,
+			children: t9
+		});
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t5;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	const t11 = `${current}Body`;
+	let t12;
+	if ($[27] !== t || $[28] !== t11) {
+		t12 = t(t11);
+		$[27] = t;
+		$[28] = t11;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t12
+		}) });
+		$[30] = t12;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== t1 || $[33] !== t10 || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Root, { children: [
+			t1,
+			t10,
+			t13
+		] });
+		$[32] = t1;
+		$[33] = t10;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	return t14;
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronDownIcon, CreditCardIcon, SettingsIcon, UsersIcon } from \"lucide-react\";\n\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst SECTIONS = [\n  [\"general\", SettingsIcon],\n  [\"members\", UsersIcon],\n  [\"billing\", CreditCardIcon],\n] as const;\n\ntype Section = (typeof SECTIONS)[number][0];\n\nexport function Sections(): ReactElement {\n  const { t } = useWords(\"page\");\n  const [current, setCurrent] = useState<Section>(\"general\");\n\n  return (\n    <Page.Root>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"settings\")}</Page.Title>\n      </Page.Header>\n      <Page.Sidebar\n        current={t(current)}\n        label={t(\"sections\")}\n        pickerIcon={<ChevronDownIcon size=\"1em\" />}\n        resizable\n        resizeLabel={t(\"resizeSections\")}\n      >\n        <nav aria-label={t(\"sections\")}>\n          <NavList.Root>\n            {SECTIONS.map(([section, Glyph]) => (\n              <NavList.Item key={section}>\n                <NavList.Link\n                  aria-current={section === current ? \"page\" : undefined}\n                  href={`#${section}`}\n                  onClick={() => {\n                    setCurrent(section);\n                  }}\n                >\n                  <Glyph />\n                  <span>{t(section)}</span>\n                </NavList.Link>\n              </NavList.Item>\n            ))}\n          </NavList.Root>\n        </nav>\n      </Page.Sidebar>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(`${current}Body`)}\n        </Text>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/settings.example.tsx
+var settings_example_exports = /* @__PURE__ */ __exportAll({
+	Settings: () => Settings,
+	source: () => source$3
+});
+const SECTIONS = [
+	"general",
+	"members",
+	"billing"
+];
+function Settings(props) {
+	const $ = c(41);
+	const { t } = useWords("page");
+	const [current, setCurrent] = useState("general");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("settings");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		}) });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("sections");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== current || $[7] !== t) {
+		t3 = SECTIONS.map((section) => /* @__PURE__ */ jsx(Link, {
+			"aria-current": section === current ? "page" : void 0,
+			href: `#${section}`,
+			inherit: section !== current,
+			onClick: () => {
+				setCurrent(section);
+			},
+			variant: "plain",
+			children: t(section)
+		}, section));
+		$[6] = current;
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(When, {
+			when: "wide",
+			children: /* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				gap: "xl",
+				children: t3
+			})
+		});
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== current) {
+		t5 = (t6) => {
+			const { value } = t6;
+			setCurrent(SECTIONS.find((section_0) => section_0 === value) ?? current);
+		};
+		$[11] = current;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== current || $[14] !== t) {
+		t6 = t(current);
+		$[13] = current;
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ChevronDownIcon, { size: "1em" });
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Menu.Trigger, {
+			as: Picker,
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = SECTIONS.map((section_1) => /* @__PURE__ */ jsx(Menu.Item, {
+			value: section_1,
+			children: t(section_1)
+		}, section_1));
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, {
+			as: Palette,
+			children: t9
+		}) }) });
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t5 || $[25] !== t8) {
+		t11 = /* @__PURE__ */ jsx(When, {
+			when: "narrow",
+			children: /* @__PURE__ */ jsxs(Menu.Root, {
+				onSelect: t5,
+				children: [t8, t10]
+			})
+		});
+		$[23] = t10;
+		$[24] = t5;
+		$[25] = t8;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== props || $[28] !== t11 || $[29] !== t2 || $[30] !== t4) {
+		t12 = /* @__PURE__ */ jsxs(Nav, {
+			"aria-label": t2,
+			...props,
+			children: [t4, t11]
+		});
+		$[27] = props;
+		$[28] = t11;
+		$[29] = t2;
+		$[30] = t4;
+		$[31] = t12;
+	} else t12 = $[31];
+	const t13 = `${current}Body`;
+	let t14;
+	if ($[32] !== t || $[33] !== t13) {
+		t14 = t(t13);
+		$[32] = t;
+		$[33] = t13;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t14
+		}) });
+		$[35] = t14;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== t1 || $[38] !== t12 || $[39] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Root, { children: [
+			t1,
+			t12,
+			t15
+		] });
+		$[37] = t1;
+		$[38] = t12;
+		$[39] = t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Menu } from \"@stealthscale/component-disclosure\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst SECTIONS = [\"general\", \"members\", \"billing\"] as const;\n\ntype Section = (typeof SECTIONS)[number];\n\nexport function Settings(props: Page.NavProps): ReactElement {\n  const { t } = useWords(\"page\");\n  const [current, setCurrent] = useState<Section>(\"general\");\n\n  return (\n    <Page.Root>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"settings\")}</Page.Title>\n      </Page.Header>\n      <Page.Nav aria-label={t(\"sections\")} {...props}>\n        <Page.When when=\"wide\">\n          <Stack direction=\"row\" gap=\"xl\">\n            {SECTIONS.map((section) => (\n              <Link\n                aria-current={section === current ? \"page\" : undefined}\n                href={`#${section}`}\n                inherit={section !== current}\n                key={section}\n                onClick={() => {\n                  setCurrent(section);\n                }}\n                variant=\"plain\"\n              >\n                {t(section)}\n              </Link>\n            ))}\n          </Stack>\n        </Page.When>\n        <Page.When when=\"narrow\">\n          <Menu.Root\n            onSelect={({ value }) => {\n              setCurrent(SECTIONS.find((section) => section === value) ?? current);\n            }}\n          >\n            <Menu.Trigger as={Page.Picker}>\n              {t(current)}\n              <ChevronDownIcon size=\"1em\" />\n            </Menu.Trigger>\n            <Portal>\n              <Menu.Positioner>\n                <Menu.Content as={Page.Palette}>\n                  {SECTIONS.map((section) => (\n                    <Menu.Item key={section} value={section}>\n                      {t(section)}\n                    </Menu.Item>\n                  ))}\n                </Menu.Content>\n              </Menu.Positioner>\n            </Portal>\n          </Menu.Root>\n        </Page.When>\n      </Page.Nav>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(`${current}Body`)}\n        </Text>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/tokens.example.tsx
+var tokens_example_exports = /* @__PURE__ */ __exportAll({
+	Tokens: () => Tokens,
+	source: () => source$2
+});
+const VIEWS$1 = [{
+	count: 4,
+	value: "tokens"
+}, {
+	count: 1,
+	value: "automations"
+}];
+const LAYOUTS = [{
+	Mark: ListIcon,
+	name: "list"
+}, {
+	Mark: LayoutGridIcon,
+	name: "tiles"
+}];
+function Tokens() {
+	const $ = c(53);
+	const { t } = useWords("page");
+	const [view, setView] = useState("tokens");
+	const [layout, setLayout] = useState("list");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Leading, {
+			when: "wide",
+			children: /* @__PURE__ */ jsx(Icon, {
+				as: PaletteIcon,
+				size: "lg",
+				tone: "muted"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("tokens.title");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("tokens.add");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t3,
+			primary: true,
+			children: t4
+		}) });
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t2 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [
+			t0,
+			t2,
+			t5
+		] });
+		$[10] = t2;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("tokens.lists");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("views");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = t("noView");
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("filterViews");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = VIEWS$1.map((t13) => {
+			const { count, value } = t13;
+			return /* @__PURE__ */ jsx(Tab, {
+				count,
+				value,
+				children: t(`tokens.${value}`)
+			}, value);
+		});
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t10 || $[25] !== t12 || $[26] !== t8 || $[27] !== t9 || $[28] !== view) {
+		t13 = /* @__PURE__ */ jsx(TabList, {
+			"aria-label": t8,
+			emptyLabel: t9,
+			filterLabel: t10,
+			onValueChange: setView,
+			pickerIcon: t11,
+			value: view,
+			children: t12
+		});
+		$[24] = t10;
+		$[25] = t12;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = view;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("tokens.layout");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== layout || $[33] !== t) {
+		t15 = LAYOUTS.map((t16) => {
+			const { Mark, name } = t16;
+			return /* @__PURE__ */ jsx(Item, {
+				"aria-label": t(`tokens.${name}`),
+				"aria-pressed": layout === name,
+				as: IconButton,
+				onClick: () => {
+					setLayout(name);
+				},
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Mark, { size: "1em" })
+			}, name);
+		});
+		$[32] = layout;
+		$[33] = t;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Group$1, { children: t15 });
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t14 || $[38] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Root$1, {
+			"aria-label": t14,
+			size: "xs",
+			children: t16
+		});
+		$[37] = t14;
+		$[38] = t16;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== t13 || $[41] !== t17 || $[42] !== t7) {
+		t18 = /* @__PURE__ */ jsxs(Nav, {
+			"aria-label": t7,
+			children: [t13, t17]
+		});
+		$[40] = t13;
+		$[41] = t17;
+		$[42] = t7;
+		$[43] = t18;
+	} else t18 = $[43];
+	const t19 = `tokens.bodies.${view}`;
+	let t20;
+	if ($[44] !== t || $[45] !== t19) {
+		t20 = t(t19);
+		$[44] = t;
+		$[45] = t19;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t20
+		}) });
+		$[47] = t20;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== t18 || $[50] !== t21 || $[51] !== t6) {
+		t22 = /* @__PURE__ */ jsxs(Root, { children: [
+			t6,
+			t18,
+			t21
+		] });
+		$[49] = t18;
+		$[50] = t21;
+		$[51] = t6;
+		$[52] = t22;
+	} else t22 = $[52];
+	return t22;
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronsUpDownIcon, LayoutGridIcon, ListIcon, PaletteIcon, PlusIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Icon, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page, Toolbar } from \"@stealthscale/component-screen\";\n\nconst VIEWS = [\n  { count: 4, value: \"tokens\" },\n  { count: 1, value: \"automations\" },\n] as const;\n\nconst LAYOUTS = [\n  { Mark: ListIcon, name: \"list\" },\n  { Mark: LayoutGridIcon, name: \"tiles\" },\n] as const;\n\nexport function Tokens(): ReactElement {\n  const { t } = useWords(\"page\");\n  const [view, setView] = useState(\"tokens\");\n  const [layout, setLayout] = useState(\"list\");\n\n  return (\n    <Page.Root>\n      <Page.Header>\n        <Page.Leading when=\"wide\">\n          <Icon as={PaletteIcon} size=\"lg\" tone=\"muted\" />\n        </Page.Leading>\n        <Page.Title as=\"h3\">{t(\"tokens.title\")}</Page.Title>\n        <Page.Actions>\n          <Page.Action icon={<PlusIcon size=\"1em\" />} primary>\n            {t(\"tokens.add\")}\n          </Page.Action>\n        </Page.Actions>\n      </Page.Header>\n      <Page.Nav aria-label={t(\"tokens.lists\")}>\n        <Page.TabList\n          aria-label={t(\"views\")}\n          emptyLabel={t(\"noView\")}\n          filterLabel={t(\"filterViews\")}\n          onValueChange={setView}\n          pickerIcon={<ChevronsUpDownIcon size=\"1em\" />}\n          value={view}\n        >\n          {VIEWS.map(({ count, value }) => (\n            <Page.Tab count={count} key={value} value={value}>\n              {t(`tokens.${value}`)}\n            </Page.Tab>\n          ))}\n        </Page.TabList>\n        <Toolbar.Root aria-label={t(\"tokens.layout\")} size=\"xs\">\n          <Toolbar.Group>\n            {LAYOUTS.map(({ Mark, name }) => (\n              <Toolbar.Item\n                aria-label={t(`tokens.${name}`)}\n                aria-pressed={layout === name}\n                as={IconButton}\n                key={name}\n                onClick={() => {\n                  setLayout(name);\n                }}\n                variant=\"outline\"\n              >\n                <Mark size=\"1em\" />\n              </Toolbar.Item>\n            ))}\n          </Toolbar.Group>\n        </Toolbar.Root>\n      </Page.Nav>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(`tokens.bodies.${view}`)}\n        </Text>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/users.example.tsx
+var users_example_exports = /* @__PURE__ */ __exportAll({
+	Users: () => Users,
+	source: () => source$1
+});
+const VIEWS = [
+	{
+		count: 412,
+		value: "all"
+	},
+	{
+		count: 9,
+		value: "invited"
+	},
+	{ value: "suspended" }
+];
+function Users(props) {
+	const $ = c(81);
+	const { t } = useWords("page");
+	const [view, setView] = useState("all");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ArrowLeftIcon, { size: "1em" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("ledger");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = {
+			href: "#ledger",
+			label: t1
+		};
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("users.parent");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = {
+			href: "#collections",
+			label: t3
+		};
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = [t2, t4];
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "1em" });
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Breadcrumbs, {
+			backIcon: t0,
+			items: t5,
+			separator: t6
+		});
+		$[13] = t5;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("users.title");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Meta, {
+			when: "wide",
+			children: /* @__PURE__ */ jsx(Badge, {
+				palette: "neutral",
+				size: "sm",
+				children: "412"
+			})
+		});
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t) {
+		t11 = t("users.about");
+		$[20] = t;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Description, { children: t11 });
+		$[22] = t11;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t) {
+		t13 = t("users.more");
+		$[24] = t;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(SettingsIcon, { size: "1em" });
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== t) {
+		t16 = t("users.settings");
+		$[28] = t;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Action, {
+			icon: t15,
+			children: t16
+		});
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== t) {
+		t18 = t("users.preview");
+		$[32] = t;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Action, { children: t18 });
+		$[34] = t18;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[36] = t20;
+	} else t20 = $[36];
+	let t21;
+	if ($[37] !== t) {
+		t21 = t("users.add");
+		$[37] = t;
+		$[38] = t21;
+	} else t21 = $[38];
+	let t22;
+	if ($[39] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Action, {
+			icon: t20,
+			primary: true,
+			children: t21
+		});
+		$[39] = t21;
+		$[40] = t22;
+	} else t22 = $[40];
+	let t23;
+	if ($[41] !== t13 || $[42] !== t17 || $[43] !== t19 || $[44] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Actions, {
+			more: t13,
+			moreIcon: t14,
+			children: [
+				t17,
+				t19,
+				t22
+			]
+		});
+		$[41] = t13;
+		$[42] = t17;
+		$[43] = t19;
+		$[44] = t22;
+		$[45] = t23;
+	} else t23 = $[45];
+	let t24;
+	if ($[46] !== t12 || $[47] !== t23 || $[48] !== t7 || $[49] !== t9) {
+		t24 = /* @__PURE__ */ jsxs(Header, { children: [
+			t7,
+			t9,
+			t10,
+			t12,
+			t23
+		] });
+		$[46] = t12;
+		$[47] = t23;
+		$[48] = t7;
+		$[49] = t9;
+		$[50] = t24;
+	} else t24 = $[50];
+	let t25;
+	if ($[51] !== t) {
+		t25 = t("users.lists");
+		$[51] = t;
+		$[52] = t25;
+	} else t25 = $[52];
+	let t26;
+	if ($[53] !== t) {
+		t26 = t("views");
+		$[53] = t;
+		$[54] = t26;
+	} else t26 = $[54];
+	let t27;
+	if ($[55] !== t) {
+		t27 = t("noView");
+		$[55] = t;
+		$[56] = t27;
+	} else t27 = $[56];
+	let t28;
+	if ($[57] !== t) {
+		t28 = t("filterViews");
+		$[57] = t;
+		$[58] = t28;
+	} else t28 = $[58];
+	let t29;
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+		t29 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[59] = t29;
+	} else t29 = $[59];
+	let t30;
+	if ($[60] !== t) {
+		t30 = VIEWS.map((t31) => {
+			const { count, value } = t31;
+			return /* @__PURE__ */ jsx(Tab, {
+				count,
+				value,
+				children: t(`users.${value}`)
+			}, value);
+		});
+		$[60] = t;
+		$[61] = t30;
+	} else t30 = $[61];
+	let t31;
+	if ($[62] !== t26 || $[63] !== t27 || $[64] !== t28 || $[65] !== t30 || $[66] !== view) {
+		t31 = /* @__PURE__ */ jsx(TabList, {
+			"aria-label": t26,
+			emptyLabel: t27,
+			filterLabel: t28,
+			onValueChange: setView,
+			pickerIcon: t29,
+			value: view,
+			children: t30
+		});
+		$[62] = t26;
+		$[63] = t27;
+		$[64] = t28;
+		$[65] = t30;
+		$[66] = view;
+		$[67] = t31;
+	} else t31 = $[67];
+	let t32;
+	if ($[68] !== t25 || $[69] !== t31) {
+		t32 = /* @__PURE__ */ jsx(Nav, {
+			"aria-label": t25,
+			children: t31
+		});
+		$[68] = t25;
+		$[69] = t31;
+		$[70] = t32;
+	} else t32 = $[70];
+	const t33 = `users.bodies.${view}`;
+	let t34;
+	if ($[71] !== t || $[72] !== t33) {
+		t34 = t(t33);
+		$[71] = t;
+		$[72] = t33;
+		$[73] = t34;
+	} else t34 = $[73];
+	let t35;
+	if ($[74] !== t34) {
+		t35 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t34
+		}) });
+		$[74] = t34;
+		$[75] = t35;
+	} else t35 = $[75];
+	let t36;
+	if ($[76] !== props || $[77] !== t24 || $[78] !== t32 || $[79] !== t35) {
+		t36 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t24,
+				t32,
+				t35
+			]
+		});
+		$[76] = props;
+		$[77] = t24;
+		$[78] = t32;
+		$[79] = t35;
+		$[80] = t36;
+	} else t36 = $[80];
+	return t36;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport {\n  ArrowLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n  EllipsisIcon,\n  PlusIcon,\n  SettingsIcon,\n} from \"lucide-react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst VIEWS: ReadonlyArray<{ readonly count?: number; readonly value: string }> = [\n  { count: 412, value: \"all\" },\n  { count: 9, value: \"invited\" },\n  { value: \"suspended\" },\n];\n\nexport function Users(props: Page.RootProps): ReactElement {\n  const { t } = useWords(\"page\");\n  const [view, setView] = useState(\"all\");\n\n  return (\n    <Page.Root {...props}>\n      <Page.Header>\n        <Page.Breadcrumbs\n          backIcon={<ArrowLeftIcon size=\"1em\" />}\n          items={[\n            { href: \"#ledger\", label: t(\"ledger\") },\n            { href: \"#collections\", label: t(\"users.parent\") },\n          ]}\n          separator={<ChevronRightIcon size=\"1em\" />}\n        />\n        <Page.Title as=\"h3\">{t(\"users.title\")}</Page.Title>\n        <Page.Meta when=\"wide\">\n          <Badge palette=\"neutral\" size=\"sm\">\n            412\n          </Badge>\n        </Page.Meta>\n        <Page.Description>{t(\"users.about\")}</Page.Description>\n        <Page.Actions more={t(\"users.more\")} moreIcon={<EllipsisIcon size=\"1em\" />}>\n          <Page.Action icon={<SettingsIcon size=\"1em\" />}>{t(\"users.settings\")}</Page.Action>\n          <Page.Action>{t(\"users.preview\")}</Page.Action>\n          <Page.Action icon={<PlusIcon size=\"1em\" />} primary>\n            {t(\"users.add\")}\n          </Page.Action>\n        </Page.Actions>\n      </Page.Header>\n      <Page.Nav aria-label={t(\"users.lists\")}>\n        <Page.TabList\n          aria-label={t(\"views\")}\n          emptyLabel={t(\"noView\")}\n          filterLabel={t(\"filterViews\")}\n          onValueChange={setView}\n          pickerIcon={<ChevronsUpDownIcon size=\"1em\" />}\n          value={view}\n        >\n          {VIEWS.map(({ count, value }) => (\n            <Page.Tab count={count} key={value} value={value}>\n              {t(`users.${value}`)}\n            </Page.Tab>\n          ))}\n        </Page.TabList>\n      </Page.Nav>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(`users.bodies.${view}`)}\n        </Text>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/examples/workspace.example.tsx
+var workspace_example_exports = /* @__PURE__ */ __exportAll({
+	Workspace: () => Workspace,
+	source: () => source
+});
+const HEADINGS = [
+	"usage",
+	"seats",
+	"limits"
+];
+function Workspace(props) {
+	const $ = c(45);
+	const { t } = useWords("page");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("trial");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Banner, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t0
+		}) });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("workspace");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("workspaceAbout");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Description, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t3, t5] });
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(FilterIcon, { size: "1em" });
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = t("filter");
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Toolbar, {
+			sticky: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "outline",
+				children: [t7, t8]
+			})
+		});
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("workspaceBody");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t10
+		}) });
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t) {
+		t12 = t("contents");
+		$[24] = t;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t) {
+		t13 = HEADINGS.map((heading) => /* @__PURE__ */ jsx(Link, {
+			href: `#${heading}`,
+			children: t(heading)
+		}, heading));
+		$[26] = t;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Stack, {
+			gap: "xs",
+			children: t13
+		});
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t12 || $[31] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Aside, {
+			"aria-label": t12,
+			folds: "hide",
+			sticky: true,
+			children: t14
+		});
+		$[30] = t12;
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t) {
+		t16 = t("updated");
+		$[33] = t;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t16
+		}) });
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== props || $[38] !== t1 || $[39] !== t11 || $[40] !== t15 || $[41] !== t17 || $[42] !== t6 || $[43] !== t9) {
+		t18 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t1,
+				t6,
+				t9,
+				t11,
+				t15,
+				t17
+			]
+		});
+		$[37] = props;
+		$[38] = t1;
+		$[39] = t11;
+		$[40] = t15;
+		$[41] = t17;
+		$[42] = t6;
+		$[43] = t9;
+		$[44] = t18;
+	} else t18 = $[44];
+	return t18;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { FilterIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Link } from \"@stealthscale/component-navigation\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page } from \"@stealthscale/component-screen\";\n\nconst HEADINGS = [\"usage\", \"seats\", \"limits\"] as const;\n\nexport function Workspace(props: Page.RootProps): ReactElement {\n  const { t } = useWords(\"page\");\n\n  return (\n    <Page.Root {...props}>\n      <Page.Banner>\n        <Text size=\"sm\">{t(\"trial\")}</Text>\n      </Page.Banner>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"workspace\")}</Page.Title>\n        <Page.Description>{t(\"workspaceAbout\")}</Page.Description>\n      </Page.Header>\n      <Page.Toolbar sticky>\n        <Button size=\"sm\" variant=\"outline\">\n          <FilterIcon size=\"1em\" />\n          {t(\"filter\")}\n        </Button>\n      </Page.Toolbar>\n      <Page.Body>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"workspaceBody\")}\n        </Text>\n      </Page.Body>\n      <Page.Aside aria-label={t(\"contents\")} folds=\"hide\" sticky>\n        <Stack gap=\"xs\">\n          {HEADINGS.map((heading) => (\n            <Link href={`#${heading}`} key={heading}>\n              {t(heading)}\n            </Link>\n          ))}\n        </Stack>\n      </Page.Aside>\n      <Page.Footer>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"updated\")}\n        </Text>\n      </Page.Footer>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/page/page.specimen.tsx
+/**
+* Renders an example in a screen box at the scene's width and in a room a phone's width.
+*/
+function Both(t0) {
+	const $ = c(7);
+	const { page: Shown } = t0;
+	let t1;
+	if ($[0] !== Shown) {
+		t1 = /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Shown, {}) });
+		$[0] = Shown;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== Shown) {
+		t2 = /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Shown, {}) })
+		});
+		$[2] = Shown;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "xl",
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/**
+* Hand-written scene for a header and each of its parts.
+*/
+const header = {
+	about: "page.header.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Deployment, {}) }),
+	example: deployment_example_exports,
+	title: "page.header.title"
+};
+/**
+* Hand-written scene for a page wide and folded at a phone's width.
+*/
+const folding = {
+	about: "page.folding.about",
+	axes: ["folded"],
+	draw: () => /* @__PURE__ */ jsx(Both, { page: Users }),
+	example: users_example_exports,
+	title: "page.folding.title"
+};
+/**
+* Hand-written scene for tabs and a toolbar on the navigation band.
+*/
+const tabbed = {
+	about: "page.tabbed.about",
+	draw: () => /* @__PURE__ */ jsx(Both, { page: Tokens }),
+	example: tokens_example_exports,
+	title: "page.tabbed.title"
+};
+/**
+* Hand-written scene for the bands that stick while the page scrolls.
+*/
+const sticking = {
+	about: "page.sticking.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		scrolls: true,
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Notifications, {})
+	}),
+	example: notifications_example_exports,
+	title: "page.sticking.title"
+};
+/**
+* Hand-written scene for links in the navigation band and the menu that replaces them.
+*/
+const navigation = {
+	about: "page.navigation.about",
+	draw: () => /* @__PURE__ */ jsx(Both, { page: Settings }),
+	example: settings_example_exports,
+	title: "page.navigation.title"
+};
+/**
+* Hand-written scene for a sidebar of the page's own sections, beside the body and folded.
+*/
+const sidebar = {
+	about: "page.sidebar.about",
+	draw: () => /* @__PURE__ */ jsx(Both, { page: Sections }),
+	example: sections_example_exports,
+	title: "page.sidebar.title"
+};
+/**
+* Hand-written scene for an aside of details beside a body that scrolls.
+*/
+const aside = {
+	about: "page.aside.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		scrolls: true,
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Incident, {})
+	}),
+	example: incident_example_exports,
+	title: "page.aside.title"
+};
+/**
+* Hand-written scene for the banner, the toolbar band, the aside and the footer.
+*/
+const bands = {
+	about: "page.bands.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Workspace, {}) }),
+	example: workspace_example_exports,
+	title: "page.bands.title"
+};
+/**
+* Measures the measures scene renders, from the narrowest.
+*/
+const MEASURES = [
+	"narrow",
+	"wide",
+	"full"
+];
+/**
+* Hand-written scene for the three measures.
+*/
+const measures = {
+	about: "page.measure.about",
+	axes: ["measure"],
+	draw: () => /* @__PURE__ */ jsx(Stack, {
+		gap: "xl",
+		children: MEASURES.map((measure) => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Measured, { measure }) }, measure))
+	}),
+	example: measured_example_exports,
+	props: { measure: "narrow" },
+	title: "page.measure.title"
+};
+/**
+* Sizes the sizes scene renders, from the smallest.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Hand-written scene for the three sizes.
+*/
+const sizes = {
+	about: "page.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Stack, {
+		gap: "xl",
+		children: SIZES.map((size) => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Users, { size }) }, size))
+	}),
+	example: users_example_exports,
+	props: { size: "sm" },
+	title: "page.size.title"
+};
+/**
+* Hand-written scene for a page whose content is loading.
+*/
+const loading = {
+	about: "page.loading.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Loading, {}) }),
+	example: loading_example_exports,
+	title: "page.loading.title"
+};
+/**
+* Hand-written scene for a page whose content failed to load.
+*/
+const failed = {
+	about: "page.failure.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Failed, {}) }),
+	example: failed_example_exports,
+	title: "page.failure.title"
+};
+var page_specimen_default = specimen({
+	about: "page.about",
+	id: "components/screen/page",
+	imports: "import { Page } from \"@stealthscale/component-screen\";",
+	scenes: [
+		header,
+		folding,
+		tabbed,
+		sticking,
+		measures,
+		sizes,
+		loading,
+		failed,
+		navigation,
+		sidebar,
+		aside,
+		bands,
+		...scenesOf(recipe, {
+			axes: {
+				align: { direction: "column" },
+				divided: { direction: "column" },
+				gutter: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Measured, { ...props }) }),
+			example: measured_example_exports,
+			namespace: "page",
+			order: [
+				"gutter",
+				"align",
+				"divided"
+			],
+			skip: {
+				folded: "The page sets folded from its own width, and the folding scene renders it.",
+				measure: "The measures scene renders every measure in a box wider than the narrow one.",
+				size: "The sizes scene renders every size with its tabs and actions."
+			}
+		})
+	],
+	title: "page.title"
+});
+//#endregion
+export { aside, bands, page_specimen_default as default, failed, folding, header, loading, measures, navigation, sidebar, sizes, sticking, tabbed };