@stealthscale/component-disclosure 0.2.3 → 0.2.4

package/dist/pages/menubar/menubar.js

@@ -0,0 +1,1181 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { s as recipe } from "../../recipes-95yCB2V3.js";
+import { $ as Content, Q as Menu, X as Trigger, Z as Root, at as Positioner, ct as ItemText, dt as ItemIndicator, gt as Indicator, ht as ItemCommand, it as Root$1, nt as TriggerItem, ot as OptionItem, rt as Separator, st as Item, vt as Content$1 } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@stealthscale/component-primitives";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArchiveIcon, ArrowLeftIcon, CheckIcon, ChevronRightIcon, CopyIcon, FolderInputIcon, FolderPlusIcon, MenuIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { Text } from "@stealthscale/component-typography";
+//#region src/menubar/examples/controlled.example.tsx
+var controlled_example_exports = /* @__PURE__ */ __exportAll({
+	Controlled: () => Controlled,
+	source: () => source$6
+});
+const MENUS$3 = [
+	["file", [
+		"new",
+		"open",
+		"save"
+	]],
+	["edit", ["undo", "redo"]],
+	["view", ["zoomIn", "zoomOut"]]
+];
+function Controlled() {
+	const $ = c(30);
+	const { t } = useWords("menubar");
+	const [value, setValue] = useState("");
+	let T0;
+	let T1;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t || $[1] !== value) {
+		let t5;
+		if ($[9] !== value) {
+			t5 = (t6) => {
+				const [menu] = t6;
+				return menu === value;
+			};
+			$[9] = value;
+			$[10] = t5;
+		} else t5 = $[10];
+		const open = MENUS$3.find(t5);
+		T1 = Stack;
+		t2 = "flex-start";
+		t3 = "md";
+		let t6;
+		if ($[11] !== t) {
+			t6 = t("label");
+			$[11] = t;
+			$[12] = t6;
+		} else t6 = $[12];
+		let t7;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = (details) => {
+				setValue(details.value);
+			};
+			$[13] = t7;
+		} else t7 = $[13];
+		let t8;
+		if ($[14] !== t) {
+			t8 = MENUS$3.map((t9) => {
+				const [menu_0, rows] = t9;
+				return /* @__PURE__ */ jsxs(Menu, {
+					value: menu_0,
+					children: [/* @__PURE__ */ jsx(Trigger, { children: t(menu_0) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: rows.map((row) => /* @__PURE__ */ jsx(Item, {
+						value: row,
+						children: t(row)
+					}, row)) }) })]
+				}, menu_0);
+			});
+			$[14] = t;
+			$[15] = t8;
+		} else t8 = $[15];
+		if ($[16] !== t6 || $[17] !== t8 || $[18] !== value) {
+			t4 = /* @__PURE__ */ jsx(Root, {
+				"aria-label": t6,
+				onValueChange: t7,
+				value,
+				children: t8
+			});
+			$[16] = t6;
+			$[17] = t8;
+			$[18] = value;
+			$[19] = t4;
+		} else t4 = $[19];
+		T0 = Text;
+		t0 = "output";
+		t1 = open === void 0 ? t("closed") : t("opened", { menu: t(open[0]) });
+		$[0] = t;
+		$[1] = value;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		t0 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[20] !== T0 || $[21] !== t0 || $[22] !== t1) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			as: t0,
+			children: t1
+		});
+		$[20] = T0;
+		$[21] = t0;
+		$[22] = t1;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== T1 || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T1, {
+			align: t2,
+			gap: t3,
+			children: [t4, t5]
+		});
+		$[24] = T1;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t5;
+		$[29] = t6;
+	} else t6 = $[29];
+	return t6;
+}
+const source$6 = "import { type ReactElement, useState } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nconst MENUS = [\n  [\"file\", [\"new\", \"open\", \"save\"]],\n  [\"edit\", [\"undo\", \"redo\"]],\n  [\"view\", [\"zoomIn\", \"zoomOut\"]],\n] as const;\n\nexport function Controlled(): ReactElement {\n  const { t } = useWords(\"menubar\");\n  const [value, setValue] = useState(\"\");\n  const open = MENUS.find(([menu]) => menu === value);\n\n  return (\n    <Stack align=\"flex-start\" gap=\"md\">\n      <Menubar.Root\n        aria-label={t(\"label\")}\n        onValueChange={(details) => {\n          setValue(details.value);\n        }}\n        value={value}\n      >\n        {MENUS.map(([menu, rows]) => (\n          <Menubar.Menu key={menu} value={menu}>\n            <Menubar.Trigger>{t(menu)}</Menubar.Trigger>\n            <Portal>\n              <Menubar.Content>\n                {rows.map((row) => (\n                  <Menu.Item key={row} value={row}>\n                    {t(row)}\n                  </Menu.Item>\n                ))}\n              </Menubar.Content>\n            </Portal>\n          </Menubar.Menu>\n        ))}\n      </Menubar.Root>\n      <Text as=\"output\">\n        {open === undefined ? t(\"closed\") : t(\"opened\", { menu: t(open[0]) })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/editor.example.tsx
+var editor_example_exports = /* @__PURE__ */ __exportAll({
+	Editor: () => Editor,
+	source: () => source$5
+});
+function commands(list) {
+	return list.map(({ keys, label, value }) => /* @__PURE__ */ jsxs(Item, {
+		value,
+		children: [/* @__PURE__ */ jsx(ItemText, { children: label }), keys === void 0 ? null : /* @__PURE__ */ jsx(ItemCommand, { children: keys })]
+	}, value));
+}
+function menu(value, label, rows) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		value,
+		children: [/* @__PURE__ */ jsx(Trigger, { children: label }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: rows }) })]
+	});
+}
+function Editor(props) {
+	const $ = c(41);
+	const { t } = useWords("menubar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("share");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsxs(TriggerItem, { children: [t0, t1] });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = commands([{
+			label: t("link"),
+			value: "link"
+		}, {
+			label: t("mail"),
+			value: "mail"
+		}]);
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsx(Content$1, { children: t3 }) }) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root$1, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const share = t5;
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("label");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ChevronRightIcon, {});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== share || $[16] !== t) {
+		const t9 = t("file");
+		let t10;
+		if ($[18] !== t) {
+			t10 = commands([
+				{
+					keys: "⌘N",
+					label: t("new"),
+					value: "new"
+				},
+				{
+					keys: "⌘O",
+					label: t("open"),
+					value: "open"
+				},
+				{
+					keys: "⌘S",
+					label: t("save"),
+					value: "save"
+				}
+			]);
+			$[18] = t;
+			$[19] = t10;
+		} else t10 = $[19];
+		let t11;
+		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /* @__PURE__ */ jsx(Separator, {});
+			$[20] = t11;
+		} else t11 = $[20];
+		let t12;
+		if ($[21] !== share || $[22] !== t10) {
+			t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
+				t10,
+				t11,
+				share
+			] });
+			$[21] = share;
+			$[22] = t10;
+			$[23] = t12;
+		} else t12 = $[23];
+		t8 = menu("file", t9, t12);
+		$[15] = share;
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[24] !== t) {
+		const t10 = t("edit");
+		const t11 = commands([{
+			keys: "⌘Z",
+			label: t("undo"),
+			value: "undo"
+		}, {
+			keys: "⇧⌘Z",
+			label: t("redo"),
+			value: "redo"
+		}]);
+		let t12;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx(Separator, {});
+			$[26] = t12;
+		} else t12 = $[26];
+		const t13 = commands([
+			{
+				keys: "⌘X",
+				label: t("cut"),
+				value: "cut"
+			},
+			{
+				keys: "⌘C",
+				label: t("copy"),
+				value: "copy"
+			},
+			{
+				keys: "⌘V",
+				label: t("paste"),
+				value: "paste"
+			}
+		]);
+		let t14;
+		if ($[27] !== t11 || $[28] !== t13) {
+			t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+				t11,
+				t12,
+				t13
+			] });
+			$[27] = t11;
+			$[28] = t13;
+			$[29] = t14;
+		} else t14 = $[29];
+		t9 = menu("edit", t10, t14);
+		$[24] = t;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[30] !== t) {
+		t10 = menu("view", t("view"), commands([{
+			keys: "⌘+",
+			label: t("zoomIn"),
+			value: "zoom-in"
+		}, {
+			keys: "⌘−",
+			label: t("zoomOut"),
+			value: "zoom-out"
+		}]));
+		$[30] = t;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== t) {
+		t11 = menu("help", t("help"), commands([{
+			label: t("docs"),
+			value: "docs"
+		}, {
+			label: t("shortcuts"),
+			value: "shortcuts"
+		}]));
+		$[32] = t;
+		$[33] = t11;
+	} else t11 = $[33];
+	let t12;
+	if ($[34] !== props || $[35] !== t10 || $[36] !== t11 || $[37] !== t6 || $[38] !== t8 || $[39] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t6,
+			foldIndicator: t7,
+			...props,
+			children: [
+				t8,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[34] = props;
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t6;
+		$[38] = t8;
+		$[39] = t9;
+		$[40] = t12;
+	} else t12 = $[40];
+	return t12;
+}
+const source$5 = "import { type ReactElement, type ReactNode } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\ninterface Command {\n  readonly keys?: string;\n  readonly label: string;\n  readonly value: string;\n}\n\nfunction commands(list: readonly Command[]): ReactNode {\n  return list.map(({ keys, label, value }) => (\n    <Menu.Item key={value} value={value}>\n      <Menu.ItemText>{label}</Menu.ItemText>\n      {keys === undefined ? null : <Menu.ItemCommand>{keys}</Menu.ItemCommand>}\n    </Menu.Item>\n  ));\n}\n\nfunction menu(value: string, label: string, rows: ReactNode): ReactElement {\n  return (\n    <Menubar.Menu value={value}>\n      <Menubar.Trigger>{label}</Menubar.Trigger>\n      <Portal>\n        <Menubar.Content>{rows}</Menubar.Content>\n      </Portal>\n    </Menubar.Menu>\n  );\n}\n\nexport function Editor(props: Omit<Menubar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"menubar\");\n  const share = (\n    <Menu.Root>\n      <Menu.TriggerItem>\n        {t(\"share\")}\n        <Menu.Indicator>\n          <ChevronRightIcon />\n        </Menu.Indicator>\n      </Menu.TriggerItem>\n      <Portal>\n        <Menu.Positioner>\n          <Menu.Content>\n            {commands([\n              { label: t(\"link\"), value: \"link\" },\n              { label: t(\"mail\"), value: \"mail\" },\n            ])}\n          </Menu.Content>\n        </Menu.Positioner>\n      </Portal>\n    </Menu.Root>\n  );\n\n  return (\n    <Menubar.Root aria-label={t(\"label\")} foldIndicator={<ChevronRightIcon />} {...props}>\n      {menu(\n        \"file\",\n        t(\"file\"),\n        <>\n          {commands([\n            { keys: \"⌘N\", label: t(\"new\"), value: \"new\" },\n            { keys: \"⌘O\", label: t(\"open\"), value: \"open\" },\n            { keys: \"⌘S\", label: t(\"save\"), value: \"save\" },\n          ])}\n          <Menu.Separator />\n          {share}\n        </>,\n      )}\n      {menu(\n        \"edit\",\n        t(\"edit\"),\n        <>\n          {commands([\n            { keys: \"⌘Z\", label: t(\"undo\"), value: \"undo\" },\n            { keys: \"⇧⌘Z\", label: t(\"redo\"), value: \"redo\" },\n          ])}\n          <Menu.Separator />\n          {commands([\n            { keys: \"⌘X\", label: t(\"cut\"), value: \"cut\" },\n            { keys: \"⌘C\", label: t(\"copy\"), value: \"copy\" },\n            { keys: \"⌘V\", label: t(\"paste\"), value: \"paste\" },\n          ])}\n        </>,\n      )}\n      {menu(\n        \"view\",\n        t(\"view\"),\n        commands([\n          { keys: \"⌘+\", label: t(\"zoomIn\"), value: \"zoom-in\" },\n          { keys: \"⌘−\", label: t(\"zoomOut\"), value: \"zoom-out\" },\n        ]),\n      )}\n      {menu(\n        \"help\",\n        t(\"help\"),\n        commands([\n          { label: t(\"docs\"), value: \"docs\" },\n          { label: t(\"shortcuts\"), value: \"shortcuts\" },\n        ]),\n      )}\n    </Menubar.Root>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/folded.example.tsx
+var folded_example_exports = /* @__PURE__ */ __exportAll({
+	Folded: () => Folded,
+	source: () => source$4
+});
+const MENUS$2 = [
+	["file", [
+		"new",
+		"open",
+		"save"
+	]],
+	["edit", ["undo", "redo"]],
+	["selection", ["selectAll", "expand"]],
+	["view", ["zoomIn", "zoomOut"]],
+	["go", ["goFile", "goLine"]],
+	["run", ["debug", "plain"]],
+	["terminal", ["newTerminal", "split"]],
+	["help", ["docs", "shortcuts"]]
+];
+function Folded() {
+	const $ = c(12);
+	const { t } = useWords("menubar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("fold");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": true });
+		t3 = /* @__PURE__ */ jsx(ChevronRightIcon, {});
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== t) {
+		t4 = MENUS$2.map((t5) => {
+			const [menu, rows] = t5;
+			return /* @__PURE__ */ jsxs(Menu, {
+				value: menu,
+				children: [/* @__PURE__ */ jsx(Trigger, { children: t(menu) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: rows.map((row) => /* @__PURE__ */ jsx(Item, {
+					value: row,
+					children: t(row)
+				}, row)) }) })]
+			}, menu);
+		});
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t0 || $[9] !== t1 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			fold: t1,
+			foldIcon: t2,
+			foldIndicator: t3,
+			children: t4
+		});
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon, MenuIcon } from \"lucide-react\";\n\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nconst MENUS = [\n  [\"file\", [\"new\", \"open\", \"save\"]],\n  [\"edit\", [\"undo\", \"redo\"]],\n  [\"selection\", [\"selectAll\", \"expand\"]],\n  [\"view\", [\"zoomIn\", \"zoomOut\"]],\n  [\"go\", [\"goFile\", \"goLine\"]],\n  [\"run\", [\"debug\", \"plain\"]],\n  [\"terminal\", [\"newTerminal\", \"split\"]],\n  [\"help\", [\"docs\", \"shortcuts\"]],\n] as const;\n\nexport function Folded(): ReactElement {\n  const { t } = useWords(\"menubar\");\n\n  return (\n    <Menubar.Root\n      aria-label={t(\"label\")}\n      fold={t(\"fold\")}\n      foldIcon={<MenuIcon aria-hidden />}\n      foldIndicator={<ChevronRightIcon />}\n    >\n      {MENUS.map(([menu, rows]) => (\n        <Menubar.Menu key={menu} value={menu}>\n          <Menubar.Trigger>{t(menu)}</Menubar.Trigger>\n          <Portal>\n            <Menubar.Content>\n              {rows.map((row) => (\n                <Menu.Item key={row} value={row}>\n                  {t(row)}\n                </Menu.Item>\n              ))}\n            </Menubar.Content>\n          </Portal>\n        </Menubar.Menu>\n      ))}\n    </Menubar.Root>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/icons.example.tsx
+var icons_example_exports = /* @__PURE__ */ __exportAll({
+	Icons: () => Icons,
+	source: () => source$3
+});
+function Icons() {
+	const $ = c(64);
+	const { t } = useWords("menubar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("mailbox");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("message");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Trigger, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": true });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("duplicate");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Item, {
+			value: "duplicate",
+			children: [t3, t4]
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(FolderInputIcon, { "aria-hidden": true });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("move");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Item, {
+			value: "move",
+			children: [t6, t7]
+		});
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ArchiveIcon, { "aria-hidden": true });
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t) {
+		t10 = t("archive");
+		$[17] = t;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t10) {
+		t11 = /* @__PURE__ */ jsxs(Item, {
+			value: "archive",
+			children: [t9, t10]
+		});
+		$[19] = t10;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t) {
+		t12 = t("unread");
+		$[21] = t;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Item, {
+			value: "unread",
+			children: t12
+		});
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Separator, {});
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(Trash2Icon, { "aria-hidden": true });
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t) {
+		t16 = t("delete");
+		$[27] = t;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Item, {
+			tone: "critical",
+			value: "delete",
+			children: [t15, t16]
+		});
+		$[29] = t16;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== t11 || $[32] !== t13 || $[33] !== t17 || $[34] !== t5 || $[35] !== t8) {
+		t18 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t5,
+			t8,
+			t11,
+			t13,
+			t14,
+			t17
+		] }) });
+		$[31] = t11;
+		$[32] = t13;
+		$[33] = t17;
+		$[34] = t5;
+		$[35] = t8;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t18 || $[38] !== t2) {
+		t19 = /* @__PURE__ */ jsxs(Menu, {
+			inset: true,
+			value: "message",
+			children: [t2, t18]
+		});
+		$[37] = t18;
+		$[38] = t2;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== t) {
+		t20 = t("folder");
+		$[40] = t;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Trigger, { children: t20 });
+		$[42] = t20;
+		$[43] = t21;
+	} else t21 = $[43];
+	let t22;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(FolderPlusIcon, { "aria-hidden": true });
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== t) {
+		t23 = t("create");
+		$[45] = t;
+		$[46] = t23;
+	} else t23 = $[46];
+	let t24;
+	if ($[47] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Item, {
+			value: "create",
+			children: [t22, t23]
+		});
+		$[47] = t23;
+		$[48] = t24;
+	} else t24 = $[48];
+	let t25;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = /* @__PURE__ */ jsx(PencilIcon, { "aria-hidden": true });
+		$[49] = t25;
+	} else t25 = $[49];
+	let t26;
+	if ($[50] !== t) {
+		t26 = t("rename");
+		$[50] = t;
+		$[51] = t26;
+	} else t26 = $[51];
+	let t27;
+	if ($[52] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Item, {
+			value: "rename",
+			children: [t25, t26]
+		});
+		$[52] = t26;
+		$[53] = t27;
+	} else t27 = $[53];
+	let t28;
+	if ($[54] !== t24 || $[55] !== t27) {
+		t28 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Content, { children: [t24, t27] }) });
+		$[54] = t24;
+		$[55] = t27;
+		$[56] = t28;
+	} else t28 = $[56];
+	let t29;
+	if ($[57] !== t21 || $[58] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(Menu, {
+			value: "folder",
+			children: [t21, t28]
+		});
+		$[57] = t21;
+		$[58] = t28;
+		$[59] = t29;
+	} else t29 = $[59];
+	let t30;
+	if ($[60] !== t0 || $[61] !== t19 || $[62] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			children: [t19, t29]
+		});
+		$[60] = t0;
+		$[61] = t19;
+		$[62] = t29;
+		$[63] = t30;
+	} else t30 = $[63];
+	return t30;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport {\n  ArchiveIcon,\n  CopyIcon,\n  FolderInputIcon,\n  FolderPlusIcon,\n  PencilIcon,\n  Trash2Icon,\n} from \"lucide-react\";\n\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nexport function Icons(): ReactElement {\n  const { t } = useWords(\"menubar\");\n\n  return (\n    <Menubar.Root aria-label={t(\"mailbox\")}>\n      <Menubar.Menu inset value=\"message\">\n        <Menubar.Trigger>{t(\"message\")}</Menubar.Trigger>\n        <Portal>\n          <Menubar.Content>\n            <Menu.Item value=\"duplicate\">\n              <CopyIcon aria-hidden />\n              {t(\"duplicate\")}\n            </Menu.Item>\n            <Menu.Item value=\"move\">\n              <FolderInputIcon aria-hidden />\n              {t(\"move\")}\n            </Menu.Item>\n            <Menu.Item value=\"archive\">\n              <ArchiveIcon aria-hidden />\n              {t(\"archive\")}\n            </Menu.Item>\n            <Menu.Item value=\"unread\">{t(\"unread\")}</Menu.Item>\n            <Menu.Separator />\n            <Menu.Item tone=\"critical\" value=\"delete\">\n              <Trash2Icon aria-hidden />\n              {t(\"delete\")}\n            </Menu.Item>\n          </Menubar.Content>\n        </Portal>\n      </Menubar.Menu>\n      <Menubar.Menu value=\"folder\">\n        <Menubar.Trigger>{t(\"folder\")}</Menubar.Trigger>\n        <Portal>\n          <Menubar.Content>\n            <Menu.Item value=\"create\">\n              <FolderPlusIcon aria-hidden />\n              {t(\"create\")}\n            </Menu.Item>\n            <Menu.Item value=\"rename\">\n              <PencilIcon aria-hidden />\n              {t(\"rename\")}\n            </Menu.Item>\n          </Menubar.Content>\n        </Portal>\n      </Menubar.Menu>\n    </Menubar.Root>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/options.example.tsx
+var options_example_exports = /* @__PURE__ */ __exportAll({
+	Options: () => Options,
+	source: () => source$2
+});
+const SHOWN = ["minimap", "status"];
+const PANELS = [
+	"explorer",
+	"search",
+	"timeline"
+];
+function Options() {
+	const $ = c(32);
+	const { t } = useWords("menubar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["status"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [shown, setShown] = useState(t0);
+	const [panel, setPanel] = useState("explorer");
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("layout");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("show");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Trigger, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== shown || $[8] !== t) {
+		t4 = SHOWN.map((name) => /* @__PURE__ */ jsxs(OptionItem, {
+			checked: shown.includes(name),
+			onCheckedChange: (checked) => {
+				setShown((was) => checked ? [...was, name] : was.filter((on) => on !== name));
+			},
+			type: "checkbox",
+			value: name,
+			children: [/* @__PURE__ */ jsx(ItemText, { children: t(name) }), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }) })]
+		}, name));
+		$[7] = shown;
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: t4 }) });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Menu, {
+			value: "show",
+			children: [t3, t5]
+		});
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== panel || $[16] !== t) {
+		t7 = t("panel", { panel: t(panel) });
+		$[15] = panel;
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Trigger, { children: t7 });
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== panel || $[21] !== t) {
+		t9 = PANELS.map((name_0) => /* @__PURE__ */ jsxs(OptionItem, {
+			checked: panel === name_0,
+			onCheckedChange: () => {
+				setPanel(name_0);
+			},
+			type: "radio",
+			value: name_0,
+			children: [/* @__PURE__ */ jsx(ItemText, { children: t(name_0) }), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }) })]
+		}, name_0));
+		$[20] = panel;
+		$[21] = t;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: t9 }) });
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10 || $[26] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Menu, {
+			value: "panel",
+			children: [t8, t10]
+		});
+		$[25] = t10;
+		$[26] = t8;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== t1 || $[29] !== t11 || $[30] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t1,
+			children: [t6, t11]
+		});
+		$[28] = t1;
+		$[29] = t11;
+		$[30] = t6;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nconst SHOWN = [\"minimap\", \"status\"] as const;\n\nconst PANELS = [\"explorer\", \"search\", \"timeline\"] as const;\n\nexport function Options(): ReactElement {\n  const { t } = useWords(\"menubar\");\n  const [shown, setShown] = useState<readonly string[]>([\"status\"]);\n  const [panel, setPanel] = useState<(typeof PANELS)[number]>(\"explorer\");\n\n  return (\n    <Menubar.Root aria-label={t(\"layout\")}>\n      <Menubar.Menu value=\"show\">\n        <Menubar.Trigger>{t(\"show\")}</Menubar.Trigger>\n        <Portal>\n          <Menubar.Content>\n            {SHOWN.map((name) => (\n              <Menu.OptionItem\n                checked={shown.includes(name)}\n                key={name}\n                onCheckedChange={(checked) => {\n                  setShown((was) => (checked ? [...was, name] : was.filter((on) => on !== name)));\n                }}\n                type=\"checkbox\"\n                value={name}\n              >\n                <Menu.ItemText>{t(name)}</Menu.ItemText>\n                <Menu.ItemIndicator>\n                  <CheckIcon size=\"1em\" />\n                </Menu.ItemIndicator>\n              </Menu.OptionItem>\n            ))}\n          </Menubar.Content>\n        </Portal>\n      </Menubar.Menu>\n      <Menubar.Menu value=\"panel\">\n        <Menubar.Trigger>{t(\"panel\", { panel: t(panel) })}</Menubar.Trigger>\n        <Portal>\n          <Menubar.Content>\n            {PANELS.map((name) => (\n              <Menu.OptionItem\n                checked={panel === name}\n                key={name}\n                onCheckedChange={() => {\n                  setPanel(name);\n                }}\n                type=\"radio\"\n                value={name}\n              >\n                <Menu.ItemText>{t(name)}</Menu.ItemText>\n                <Menu.ItemIndicator>\n                  <CheckIcon size=\"1em\" />\n                </Menu.ItemIndicator>\n              </Menu.OptionItem>\n            ))}\n          </Menubar.Content>\n        </Portal>\n      </Menubar.Menu>\n    </Menubar.Root>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/rtl.example.tsx
+var rtl_example_exports = /* @__PURE__ */ __exportAll({
+	Rtl: () => Rtl,
+	source: () => source$1
+});
+const MENUS$1 = [["edit", ["undo", "redo"]], ["view", ["zoomIn", "zoomOut"]]];
+function Rtl() {
+	const $ = c(46);
+	const { t } = useWords("menubar.rtl");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("file");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Trigger, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("new");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Item, {
+			value: "new",
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("open");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Item, {
+			value: "open",
+			children: t5
+		});
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("share");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(TriggerItem, { children: [t7, t8] });
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("link");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Item, {
+			value: "link",
+			children: t10
+		});
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("mail");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Item, {
+			value: "mail",
+			children: t12
+		});
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t11 || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content$1, { children: [t11, t13] }) }) });
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14 || $[31] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(Root$1, { children: [t9, t14] });
+		$[30] = t14;
+		$[31] = t9;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t15 || $[34] !== t4 || $[35] !== t6) {
+		t16 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t4,
+			t6,
+			t15
+		] }) });
+		$[33] = t15;
+		$[34] = t4;
+		$[35] = t6;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t16 || $[38] !== t2) {
+		t17 = /* @__PURE__ */ jsxs(Menu, {
+			value: "file",
+			children: [t2, t16]
+		});
+		$[37] = t16;
+		$[38] = t2;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== t) {
+		t18 = MENUS$1.map((t19) => {
+			const [menu, rows] = t19;
+			return /* @__PURE__ */ jsxs(Menu, {
+				value: menu,
+				children: [/* @__PURE__ */ jsx(Trigger, { children: t(menu) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: rows.map((row) => /* @__PURE__ */ jsx(Item, {
+					value: row,
+					children: t(row)
+				}, row)) }) })]
+			}, menu);
+		});
+		$[40] = t;
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] !== t0 || $[43] !== t17 || $[44] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			dir: "rtl",
+			children: [t17, t18]
+		});
+		$[42] = t0;
+		$[43] = t17;
+		$[44] = t18;
+		$[45] = t19;
+	} else t19 = $[45];
+	return t19;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nconst MENUS = [\n  [\"edit\", [\"undo\", \"redo\"]],\n  [\"view\", [\"zoomIn\", \"zoomOut\"]],\n] as const;\n\nexport function Rtl(): ReactElement {\n  const { t } = useWords(\"menubar.rtl\");\n\n  return (\n    <Menubar.Root aria-label={t(\"label\")} dir=\"rtl\">\n      <Menubar.Menu value=\"file\">\n        <Menubar.Trigger>{t(\"file\")}</Menubar.Trigger>\n        <Portal>\n          <Menubar.Content>\n            <Menu.Item value=\"new\">{t(\"new\")}</Menu.Item>\n            <Menu.Item value=\"open\">{t(\"open\")}</Menu.Item>\n            <Menu.Root>\n              <Menu.TriggerItem>\n                {t(\"share\")}\n                <Menu.Indicator>\n                  <ChevronRightIcon />\n                </Menu.Indicator>\n              </Menu.TriggerItem>\n              <Portal>\n                <Menu.Positioner>\n                  <Menu.Content>\n                    <Menu.Item value=\"link\">{t(\"link\")}</Menu.Item>\n                    <Menu.Item value=\"mail\">{t(\"mail\")}</Menu.Item>\n                  </Menu.Content>\n                </Menu.Positioner>\n              </Portal>\n            </Menu.Root>\n          </Menubar.Content>\n        </Portal>\n      </Menubar.Menu>\n      {MENUS.map(([menu, rows]) => (\n        <Menubar.Menu key={menu} value={menu}>\n          <Menubar.Trigger>{t(menu)}</Menubar.Trigger>\n          <Portal>\n            <Menubar.Content>\n              {rows.map((row) => (\n                <Menu.Item key={row} value={row}>\n                  {t(row)}\n                </Menu.Item>\n              ))}\n            </Menubar.Content>\n          </Portal>\n        </Menubar.Menu>\n      ))}\n    </Menubar.Root>\n  );\n}\n";
+//#endregion
+//#region src/menubar/examples/stop.example.tsx
+var stop_example_exports = /* @__PURE__ */ __exportAll({
+	Stop: () => Stop,
+	source: () => source
+});
+const MENUS = [
+	["file", [
+		"new",
+		"open",
+		"save"
+	]],
+	["edit", ["undo", "redo"]],
+	["view", ["zoomIn", "zoomOut"]]
+];
+function Stop() {
+	const $ = c(20);
+	const { t } = useWords("menubar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ArrowLeftIcon, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("back");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			children: [t0, t1]
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = MENUS.map((t5) => {
+			const [menu, rows] = t5;
+			return /* @__PURE__ */ jsxs(Menu, {
+				value: menu,
+				children: [/* @__PURE__ */ jsx(Trigger, { children: t(menu) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { children: rows.map((row) => /* @__PURE__ */ jsx(Item, {
+					value: row,
+					children: t(row)
+				}, row)) }) })]
+			}, menu);
+		});
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t3,
+			children: t4
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("publish");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Button, { children: t6 });
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t2 || $[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "md",
+			wrap: true,
+			children: [
+				t2,
+				t5,
+				t7
+			]
+		});
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ArrowLeftIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Menu, Menubar } from \"@stealthscale/component-disclosure\";\n\nconst MENUS = [\n  [\"file\", [\"new\", \"open\", \"save\"]],\n  [\"edit\", [\"undo\", \"redo\"]],\n  [\"view\", [\"zoomIn\", \"zoomOut\"]],\n] as const;\n\nexport function Stop(): ReactElement {\n  const { t } = useWords(\"menubar\");\n\n  return (\n    <Stack direction=\"row\" gap=\"md\" wrap>\n      <Button variant=\"ghost\">\n        <ArrowLeftIcon />\n        {t(\"back\")}\n      </Button>\n      <Menubar.Root aria-label={t(\"label\")}>\n        {MENUS.map(([menu, rows]) => (\n          <Menubar.Menu key={menu} value={menu}>\n            <Menubar.Trigger>{t(menu)}</Menubar.Trigger>\n            <Portal>\n              <Menubar.Content>\n                {rows.map((row) => (\n                  <Menu.Item key={row} value={row}>\n                    {t(row)}\n                  </Menu.Item>\n                ))}\n              </Menubar.Content>\n            </Portal>\n          </Menubar.Menu>\n        ))}\n      </Menubar.Root>\n      <Button>{t(\"publish\")}</Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/menubar/menubar.specimen.tsx
+/**
+* Catalogue page for the menubar.
+*
+* @remarks
+*   `scenesOf` generates the sizes, one bar per row, and the palettes from the editor example. The
+*   editor, options, icons, tab stop, right-to-left, folded and controlled scenes are hand-written,
+*   because each shows a part or a behaviour that no axis sets. Every menu renders closed and
+*   portals its panel to the document body, so a scene is as tall as its bar. The folded scene
+*   renders in an `xs` room, which a bar of eight menus does not fit at any width. The words are
+*   keys under `menubar` in `locales/en/specimen/menubar.json`.
+*/
+/**
+* Hand-written scene for an editor's bar with commands, keys, a separator and a submenu.
+*/
+const editor = {
+	about: "menubar.editor.about",
+	draw: () => /* @__PURE__ */ jsx(Editor, {}),
+	example: editor_example_exports,
+	title: "menubar.editor.title"
+};
+/**
+* Hand-written scene for checkbox and radio rows, and a name that reads the chosen radio.
+*/
+const options = {
+	about: "menubar.options.about",
+	draw: Options,
+	example: options_example_exports,
+	title: "menubar.options.title"
+};
+/**
+* Hand-written scene for rows that lead with an icon, an inset row and a critical row.
+*/
+const icons = {
+	about: "menubar.icons.about",
+	draw: Icons,
+	example: icons_example_exports,
+	title: "menubar.icons.title"
+};
+/**
+* Hand-written scene for the bar's one tab stop between two buttons.
+*/
+const stop = {
+	about: "menubar.stop.about",
+	draw: Stop,
+	example: stop_example_exports,
+	title: "menubar.stop.title"
+};
+/**
+* Hand-written scene for a bar in a right-to-left document.
+*/
+const rtl = {
+	about: "menubar.rtl.about",
+	draw: Rtl,
+	example: rtl_example_exports,
+	title: "menubar.rtl.title"
+};
+/**
+* Hand-written scene for a bar too narrow for its names, which folds into one menu.
+*/
+const folded = {
+	about: "menubar.folded.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Folded, {})
+	}),
+	example: folded_example_exports,
+	title: "menubar.folded.title"
+};
+/**
+* Hand-written scene for a bar whose open menu the caller keeps.
+*/
+const controlled = {
+	about: "menubar.controlled.about",
+	draw: Controlled,
+	example: controlled_example_exports,
+	title: "menubar.controlled.title"
+};
+var menubar_specimen_default = specimen({
+	about: "menubar.about",
+	id: "components/disclosure/menubar",
+	imports: "import { Menubar } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		editor,
+		...scenesOf(recipe, {
+			axes: { size: { direction: "column" } },
+			draw: (props) => /* @__PURE__ */ jsx(Editor, { ...props }),
+			example: editor_example_exports,
+			namespace: "menubar",
+			order: ["size", "palette"]
+		}),
+		options,
+		icons,
+		stop,
+		rtl,
+		folded,
+		controlled
+	],
+	title: "menubar.title"
+});
+//#endregion
+export { controlled, menubar_specimen_default as default, editor, folded, icons, options, rtl, stop };