@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/switcher/switcher.js

@@ -0,0 +1,900 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-Cmy1leBm.js";
+import { A as Nav, At as Trigger, Bt as Body, It as Navbar, L as Content, Lt as Main, Nt as Root$3, O as Search, P as Header$1, Rt as Header, _ as Name, a as Start, b as Action$1, c as Root$1, d as End, f as Center, g as Trigger$1, h as Root, j as NavLabel, k as Root$2, p as Action, qt as Item, v as Label, y as Indicator } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Portal } from "@stealthscale/component-primitives";
+import { Menu } from "@stealthscale/component-disclosure";
+import { NavList } from "@stealthscale/component-navigation";
+import { Stack } from "@stealthscale/component-layout";
+import { Room, Sample, Screen, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Building2Icon, CheckIcon, ChevronsUpDownIcon, GitBranchIcon, HouseIcon, MenuIcon, PlayIcon, PlusIcon, RocketIcon, SearchIcon, SettingsIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/switcher/examples/bar.example.tsx
+var bar_example_exports = /* @__PURE__ */ __exportAll({
+	Bar: () => Bar,
+	source: () => source$4
+});
+const WORKSPACES$2 = [
+	["ledger", "production"],
+	["northwind", "trial"],
+	["acme", "enterprise"]
+];
+function Bar() {
+	const $ = c(25);
+	const { t } = useWords("switcher");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("application");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t2 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t) {
+		t3 = WORKSPACES$2.map((t4) => {
+			const [name, plan] = t4;
+			return {
+				detail: t(plan),
+				label: t(name),
+				value: name
+			};
+		});
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("workspace");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Root, {
+			checkIcon: t1,
+			indicator: t2,
+			items: t3,
+			label: t4
+		}) });
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("runs");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "medium",
+			children: t6
+		}) });
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(PlayIcon, { size: "1em" });
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("newRun");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t8,
+			primary: true,
+			children: t9
+		}) });
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t0 || $[21] !== t10 || $[22] !== t5 || $[23] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Root$1, {
+			"aria-label": t0,
+			size: "sm",
+			children: [
+				t5,
+				t7,
+				t10
+			]
+		});
+		$[20] = t0;
+		$[21] = t10;
+		$[22] = t5;
+		$[23] = t7;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon, PlayIcon } from \"lucide-react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Switcher, Toolbar } from \"@stealthscale/component-screen\";\n\nconst WORKSPACES = [\n  [\"ledger\", \"production\"],\n  [\"northwind\", \"trial\"],\n  [\"acme\", \"enterprise\"],\n] as const;\n\nexport function Bar(): ReactElement {\n  const { t } = useWords(\"switcher\");\n\n  return (\n    <Toolbar.Root aria-label={t(\"application\")} size=\"sm\">\n      <Toolbar.Start>\n        <Switcher.Root\n          checkIcon={<CheckIcon size=\"1em\" />}\n          indicator={<ChevronsUpDownIcon size=\"1em\" />}\n          items={WORKSPACES.map(([name, plan]) => ({\n            detail: t(plan),\n            label: t(name),\n            value: name,\n          }))}\n          label={t(\"workspace\")}\n        />\n      </Toolbar.Start>\n      <Toolbar.Center>\n        <Text as=\"span\" size=\"sm\" weight=\"medium\">\n          {t(\"runs\")}\n        </Text>\n      </Toolbar.Center>\n      <Toolbar.End>\n        <Toolbar.Action icon={<PlayIcon size=\"1em\" />} primary>\n          {t(\"newRun\")}\n        </Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/switcher/examples/console.example.tsx
+var console_example_exports = /* @__PURE__ */ __exportAll({
+	Console: () => Console,
+	source: () => source$3
+});
+const GHOST = {
+	shape: "square",
+	size: "sm",
+	variant: "ghost"
+};
+const WORKSPACES$1 = [
+	["ledger", "production"],
+	["northwind", "trial"],
+	["acme", "enterprise"]
+];
+const PAGES = [
+	[
+		"overview",
+		HouseIcon,
+		void 0
+	],
+	[
+		"runs",
+		PlayIcon,
+		"page"
+	],
+	[
+		"pipelines",
+		GitBranchIcon,
+		void 0
+	]
+];
+function Console(props) {
+	const $ = c(52);
+	const { t } = useWords("switcher");
+	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, { 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;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t4 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== t) {
+		t5 = WORKSPACES$1.map((t6) => {
+			const [name, plan] = t6;
+			return {
+				detail: t(plan),
+				label: t(name),
+				value: name
+			};
+		});
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = t("workspace");
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("new");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Action$1, {
+			icon: t7,
+			children: t8
+		});
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t5 || $[17] !== t6 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Root, {
+			checkIcon: t3,
+			indicator: t4,
+			items: t5,
+			label: t6,
+			children: t9
+		});
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t) {
+		t11 = t("findPage");
+		$[20] = t;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = t("filter");
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(SearchIcon, {});
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t11 || $[26] !== t12) {
+		t14 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t11,
+			placeholder: t12,
+			searchIndicator: t13
+		});
+		$[25] = t11;
+		$[26] = t12;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== t10 || $[29] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Header$1, { children: [t10, t14] });
+		$[28] = t10;
+		$[29] = t14;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t) {
+		t16 = t("platform");
+		$[31] = t;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t16) {
+		t17 = /* @__PURE__ */ jsx(NavLabel, {
+			as: "h3",
+			children: t16
+		});
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t) {
+		t18 = PAGES.map((t19) => {
+			const [page, Glyph, current] = t19;
+			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);
+		});
+		$[35] = t;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t18) {
+		t19 = /* @__PURE__ */ jsx(NavList.Root, { children: t18 });
+		$[37] = t18;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== t17 || $[40] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Nav, { children: [t17, t19] }) });
+		$[39] = t17;
+		$[40] = t19;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t15 || $[43] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Navbar, {
+			collapse: "icons",
+			foldsBelow: "sm",
+			children: /* @__PURE__ */ jsxs(Root$2, {
+				variant: "subtle",
+				children: [t15, t20]
+			})
+		});
+		$[42] = t15;
+		$[43] = t20;
+		$[44] = t21;
+	} else t21 = $[44];
+	let t22;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(Main, {});
+		$[45] = t22;
+	} else t22 = $[45];
+	let t23;
+	if ($[46] !== t21) {
+		t23 = /* @__PURE__ */ jsxs(Body, { children: [t21, t22] });
+		$[46] = t21;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== props || $[49] !== t2 || $[50] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Root$3, {
+			...props,
+			children: [t2, t23]
+		});
+		$[48] = props;
+		$[49] = t2;
+		$[50] = t23;
+		$[51] = t24;
+	} else t24 = $[51];
+	return t24;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport {\n  CheckIcon,\n  ChevronsUpDownIcon,\n  GitBranchIcon,\n  HouseIcon,\n  MenuIcon,\n  PlayIcon,\n  PlusIcon,\n  SearchIcon,\n} from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { AppShell, Sidebar, Switcher } from \"@stealthscale/component-screen\";\n\nconst GHOST = { shape: \"square\", size: \"sm\", variant: \"ghost\" } as const;\n\nconst WORKSPACES = [\n  [\"ledger\", \"production\"],\n  [\"northwind\", \"trial\"],\n  [\"acme\", \"enterprise\"],\n] as const;\n\nconst PAGES = [\n  [\"overview\", HouseIcon, undefined],\n  [\"runs\", PlayIcon, \"page\"],\n  [\"pipelines\", GitBranchIcon, undefined],\n] as const;\n\nexport function Console(props: AppShell.RootProps): ReactElement {\n  const { t } = useWords(\"switcher\");\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              <Switcher.Root\n                checkIcon={<CheckIcon size=\"1em\" />}\n                indicator={<ChevronsUpDownIcon size=\"1em\" />}\n                items={WORKSPACES.map(([name, plan]) => ({\n                  detail: t(plan),\n                  label: t(name),\n                  value: name,\n                }))}\n                label={t(\"workspace\")}\n              >\n                <Switcher.Action icon={<PlusIcon size=\"1em\" />}>{t(\"new\")}</Switcher.Action>\n              </Switcher.Root>\n              <Sidebar.Search\n                aria-label={t(\"findPage\")}\n                placeholder={t(\"filter\")}\n                searchIndicator={<SearchIcon />}\n              />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <Sidebar.Nav>\n                <Sidebar.NavLabel 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.Root>\n        </AppShell.Navbar>\n        <AppShell.Main />\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n";
+//#endregion
+//#region src/switcher/examples/environment.example.tsx
+var environment_example_exports = /* @__PURE__ */ __exportAll({
+	Environment: () => Environment,
+	source: () => source$2
+});
+const STAGES = [
+	"production",
+	"staging",
+	"preview"
+];
+function Environment(props) {
+	const $ = c(31);
+	const { t } = useWords("switcher");
+	const [chosen, setChosen] = useState("production");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("deployments");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("environment");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== chosen || $[5] !== t) {
+		t2 = t(chosen);
+		$[4] = chosen;
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(Name, { children: t2 }) });
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" }) });
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t1 || $[11] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(Item, {
+			as: Trigger$1,
+			label: t1,
+			children: [t3, t4]
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== chosen || $[14] !== t) {
+		t6 = STAGES.map((stage) => /* @__PURE__ */ jsxs(Menu.OptionItem, {
+			checked: stage === chosen,
+			onCheckedChange: () => {
+				setChosen(stage);
+			},
+			type: "radio",
+			value: stage,
+			children: [/* @__PURE__ */ jsx(Menu.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }) }), /* @__PURE__ */ jsx(Menu.ItemText, { children: t(stage) })]
+		}, stage));
+		$[13] = chosen;
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: t6 }) }) });
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== props || $[19] !== t5 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsxs(Root, {
+			placement: "toolbar",
+			size: "sm",
+			variant: "outline",
+			...props,
+			children: [t5, t7]
+		}) });
+		$[18] = props;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(RocketIcon, { size: "1em" });
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t) {
+		t10 = t("deploy");
+		$[23] = t;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10) {
+		t11 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t9,
+			primary: true,
+			children: t10
+		}) });
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t0 || $[28] !== t11 || $[29] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(Root$1, {
+			"aria-label": t0,
+			size: "sm",
+			variant: "outline",
+			children: [t8, t11]
+		});
+		$[27] = t0;
+		$[28] = t11;
+		$[29] = t8;
+		$[30] = t12;
+	} else t12 = $[30];
+	return t12;
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon, RocketIcon } from \"lucide-react\";\n\nimport { Menu } from \"@stealthscale/component-disclosure\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Switcher, Toolbar } from \"@stealthscale/component-screen\";\n\nconst STAGES = [\"production\", \"staging\", \"preview\"] as const;\n\nexport function Environment(props: Switcher.RootProps): ReactElement {\n  const { t } = useWords(\"switcher\");\n  const [chosen, setChosen] = useState<(typeof STAGES)[number]>(\"production\");\n\n  return (\n    <Toolbar.Root aria-label={t(\"deployments\")} size=\"sm\" variant=\"outline\">\n      <Toolbar.Start>\n        <Switcher.Root placement=\"toolbar\" size=\"sm\" variant=\"outline\" {...props}>\n          <Toolbar.Item as={Switcher.Trigger} label={t(\"environment\")}>\n            <Switcher.Label>\n              <Switcher.Name>{t(chosen)}</Switcher.Name>\n            </Switcher.Label>\n            <Switcher.Indicator>\n              <ChevronsUpDownIcon size=\"1em\" />\n            </Switcher.Indicator>\n          </Toolbar.Item>\n          <Portal>\n            <Menu.Positioner>\n              <Menu.Content>\n                {STAGES.map((stage) => (\n                  <Menu.OptionItem\n                    checked={stage === chosen}\n                    key={stage}\n                    onCheckedChange={() => {\n                      setChosen(stage);\n                    }}\n                    type=\"radio\"\n                    value={stage}\n                  >\n                    <Menu.ItemIndicator>\n                      <CheckIcon size=\"1em\" />\n                    </Menu.ItemIndicator>\n                    <Menu.ItemText>{t(stage)}</Menu.ItemText>\n                  </Menu.OptionItem>\n                ))}\n              </Menu.Content>\n            </Menu.Positioner>\n          </Portal>\n        </Switcher.Root>\n      </Toolbar.Start>\n      <Toolbar.End>\n        <Toolbar.Action icon={<RocketIcon size=\"1em\" />} primary>\n          {t(\"deploy\")}\n        </Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/switcher/examples/linked.example.tsx
+var linked_example_exports = /* @__PURE__ */ __exportAll({
+	Linked: () => Linked,
+	source: () => source$1
+});
+const WORKSPACES = [
+	["ledger", "production"],
+	["northwind", "trial"],
+	["acme", "enterprise"]
+];
+function Linked() {
+	const $ = c(15);
+	const { t } = useWords("switcher");
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t1 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = WORKSPACES.map((t3) => {
+			const [name, plan] = t3;
+			return {
+				detail: t(plan),
+				href: `#${name}`,
+				label: t(name),
+				value: name
+			};
+		});
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("workspace");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("new");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Action$1, {
+			icon: t4,
+			children: t5
+		});
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t2 || $[12] !== t3 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Root, {
+			checkIcon: t0,
+			indicator: t1,
+			items: t2,
+			label: t3,
+			value: "northwind",
+			children: t6
+		});
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon, PlusIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Switcher } from \"@stealthscale/component-screen\";\n\nconst WORKSPACES = [\n  [\"ledger\", \"production\"],\n  [\"northwind\", \"trial\"],\n  [\"acme\", \"enterprise\"],\n] as const;\n\nexport function Linked(): ReactElement {\n  const { t } = useWords(\"switcher\");\n\n  return (\n    <Switcher.Root\n      checkIcon={<CheckIcon size=\"1em\" />}\n      indicator={<ChevronsUpDownIcon size=\"1em\" />}\n      items={WORKSPACES.map(([name, plan]) => ({\n        detail: t(plan),\n        href: `#${name}`,\n        label: t(name),\n        value: name,\n      }))}\n      label={t(\"workspace\")}\n      value=\"northwind\"\n    >\n      <Switcher.Action icon={<PlusIcon size=\"1em\" />}>{t(\"new\")}</Switcher.Action>\n    </Switcher.Root>\n  );\n}\n";
+//#endregion
+//#region src/switcher/examples/workspaces.example.tsx
+var workspaces_example_exports = /* @__PURE__ */ __exportAll({
+	Workspaces: () => Workspaces,
+	source: () => source
+});
+function Workspaces(props) {
+	const $ = c(54);
+	const { t } = useWords("switcher");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("production");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("ledger");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = {
+			detail: t0,
+			label: t1,
+			value: "ledger"
+		};
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("trial");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("northwind");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t5 = {
+			detail: t3,
+			label: t4,
+			value: "northwind"
+		};
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t) {
+		t6 = t("enterprise");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t) {
+		t7 = t("acme");
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Building2Icon, { size: "1em" });
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t6 || $[20] !== t7) {
+		t9 = {
+			detail: t6,
+			label: t7,
+			mark: t8,
+			value: "acme"
+		};
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t) {
+		t10 = t("suspended");
+		$[22] = t;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = t("oldBooks");
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t10 || $[27] !== t11) {
+		t12 = {
+			detail: t10,
+			disabled: true,
+			label: t11,
+			value: "oldBooks"
+		};
+		$[26] = t10;
+		$[27] = t11;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t12 || $[30] !== t2 || $[31] !== t5 || $[32] !== t9) {
+		t13 = [
+			t2,
+			t5,
+			t9,
+			t12
+		];
+		$[29] = t12;
+		$[30] = t2;
+		$[31] = t5;
+		$[32] = t9;
+		$[33] = t13;
+	} else t13 = $[33];
+	const workspaces = t13;
+	let t14;
+	let t15;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t15 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[34] = t14;
+		$[35] = t15;
+	} else {
+		t14 = $[34];
+		t15 = $[35];
+	}
+	let t16;
+	if ($[36] !== t) {
+		t16 = t("workspace");
+		$[36] = t;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t) {
+		t18 = t("new");
+		$[39] = t;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Action$1, {
+			icon: t17,
+			children: t18
+		});
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(SettingsIcon, { size: "1em" });
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t) {
+		t21 = t("settings");
+		$[44] = t;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Action$1, {
+			icon: t20,
+			children: t21
+		});
+		$[46] = t21;
+		$[47] = t22;
+	} else t22 = $[47];
+	let t23;
+	if ($[48] !== props || $[49] !== t16 || $[50] !== t19 || $[51] !== t22 || $[52] !== workspaces) {
+		t23 = /* @__PURE__ */ jsxs(Root, {
+			checkIcon: t14,
+			indicator: t15,
+			items: workspaces,
+			label: t16,
+			...props,
+			children: [t19, t22]
+		});
+		$[48] = props;
+		$[49] = t16;
+		$[50] = t19;
+		$[51] = t22;
+		$[52] = workspaces;
+		$[53] = t23;
+	} else t23 = $[53];
+	return t23;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Building2Icon, CheckIcon, ChevronsUpDownIcon, PlusIcon, SettingsIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Switcher } from \"@stealthscale/component-screen\";\n\nexport function Workspaces(props: Switcher.RootProps): ReactElement {\n  const { t } = useWords(\"switcher\");\n  const workspaces: Switcher.Choice[] = [\n    { detail: t(\"production\"), label: t(\"ledger\"), value: \"ledger\" },\n    { detail: t(\"trial\"), label: t(\"northwind\"), value: \"northwind\" },\n    {\n      detail: t(\"enterprise\"),\n      label: t(\"acme\"),\n      mark: <Building2Icon size=\"1em\" />,\n      value: \"acme\",\n    },\n    { detail: t(\"suspended\"), disabled: true, label: t(\"oldBooks\"), value: \"oldBooks\" },\n  ];\n\n  return (\n    <Switcher.Root\n      checkIcon={<CheckIcon size=\"1em\" />}\n      indicator={<ChevronsUpDownIcon size=\"1em\" />}\n      items={workspaces}\n      label={t(\"workspace\")}\n      {...props}\n    >\n      <Switcher.Action icon={<PlusIcon size=\"1em\" />}>{t(\"new\")}</Switcher.Action>\n      <Switcher.Action icon={<SettingsIcon size=\"1em\" />}>{t(\"settings\")}</Switcher.Action>\n    </Switcher.Root>\n  );\n}\n";
+//#endregion
+//#region src/switcher/switcher.specimen.tsx
+/**
+* Catalogue page for the switcher.
+*
+* @remarks
+*   The first three scenes render the switcher where an application renders it: at the head of a
+*   sidebar in an app shell whose navigation closes to icons, in a toolbar at a card's width and at
+*   a phone's width, and on its own with a page per workspace. The composed scene renders an
+*   environment switcher from the parts in a toolbar. `scenesOf` generates the looks, the palettes,
+*   the sizes and the placements from the workspaces example. Every switcher renders closed and
+*   portals its menu to the document body. The rooms and the boxes never appear in the examples.
+*   The words are keys under `switcher` in `locales/en/specimen/switcher.json`.
+*/
+/**
+* Hand-written scene for the switcher at the head of a sidebar in an app shell.
+*/
+const sidebar = {
+	about: "switcher.sidebar.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Console, {})
+	}),
+	example: console_example_exports,
+	frame: "bleed",
+	title: "switcher.sidebar.title"
+};
+/**
+* Hand-written scene for the switcher in a toolbar, wide and at a phone's width.
+*/
+const toolbar = {
+	about: "switcher.toolbar.about",
+	draw: () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		children: [/* @__PURE__ */ jsx(Sample, {
+			place: "stretch",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(Bar, {})
+		}), /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Sample, {
+				place: "stretch",
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Bar, {})
+			})
+		})]
+	}),
+	example: bar_example_exports,
+	title: "switcher.toolbar.title"
+};
+/**
+* Hand-written scene for the switcher on its own, a link per workspace.
+*/
+const alone = {
+	about: "switcher.alone.about",
+	draw: Linked,
+	example: linked_example_exports,
+	title: "switcher.alone.title"
+};
+/**
+* Hand-written scene for a switcher composed from its parts.
+*/
+const composed = {
+	about: "switcher.composed.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Environment, {})
+	}),
+	example: environment_example_exports,
+	title: "switcher.composed.title"
+};
+var switcher_specimen_default = specimen({
+	about: "switcher.about",
+	id: "components/screen/switcher",
+	imports: "import { Switcher } from \"@stealthscale/component-screen\";",
+	scenes: [
+		sidebar,
+		toolbar,
+		alone,
+		...scenesOf(recipe, {
+			axes: {
+				palette: { with: { variant: "subtle" } },
+				placement: {
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "xs",
+						children: /* @__PURE__ */ jsx(Workspaces, { ...props })
+					}),
+					with: { variant: "outline" }
+				},
+				size: {
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "xs",
+						children: /* @__PURE__ */ jsx(Workspaces, { ...props })
+					}),
+					with: {
+						placement: "sidebar",
+						variant: "outline"
+					}
+				}
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Workspaces, { ...props }),
+			example: workspaces_example_exports,
+			namespace: "switcher",
+			order: [
+				"variant",
+				"palette",
+				"size",
+				"placement"
+			]
+		}),
+		composed
+	],
+	title: "switcher.title"
+});
+//#endregion
+export { alone, composed, switcher_specimen_default as default, sidebar, toolbar };