@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/toolbar/toolbar.js

@@ -0,0 +1,1045 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "../../recipes-Cmy1leBm.js";
+import { a as Start, c as Root, d as End, f as Center, i as Title, l as Link, o as Separator, p as Action, qt as Item, s as Search, u as Group$1 } 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 { useState } from "react";
+import { Stack } from "@stealthscale/component-layout";
+import { Room, Sample, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { BoldIcon, Columns3Icon, DownloadIcon, EllipsisIcon, FunnelIcon, ItalicIcon, MenuIcon, PlusIcon, SearchIcon, ShareIcon, UnderlineIcon, XIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/toolbar/examples/editor.example.tsx
+var editor_example_exports = /* @__PURE__ */ __exportAll({
+	Editor: () => Editor,
+	source: () => source$5
+});
+const MARKS = [
+	{
+		Mark: BoldIcon,
+		name: "bold"
+	},
+	{
+		Mark: ItalicIcon,
+		name: "italic"
+	},
+	{
+		Mark: UnderlineIcon,
+		name: "underline"
+	}
+];
+function Editor(props) {
+	const $ = c(32);
+	const { t } = useWords("toolbar");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [marked, setMarked] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("editing");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("menu");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(MenuIcon, { size: "1em" });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Item, {
+			"aria-label": t2,
+			as: IconButton,
+			variant: "ghost",
+			children: t3
+		}) });
+		$[6] = t2;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("draft");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			weight: "medium",
+			children: t5
+		}) });
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== marked || $[13] !== t) {
+		t7 = MARKS.map((t8) => {
+			const { Mark, name } = t8;
+			return /* @__PURE__ */ jsx(Item, {
+				"aria-label": t(name),
+				"aria-pressed": marked.includes(name),
+				as: IconButton,
+				onClick: () => {
+					setMarked((held) => held.includes(name) ? held.filter((each) => each !== name) : [...held, name]);
+				},
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Mark, { size: "1em" })
+			}, name);
+		});
+		$[12] = marked;
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Group$1, { children: t7 });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Separator, {});
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ShareIcon, { size: "1em" });
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t) {
+		t11 = t("share");
+		$[19] = t;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Action, {
+			icon: t10,
+			primary: true,
+			children: t11
+		});
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t12 || $[24] !== t8) {
+		t13 = /* @__PURE__ */ jsxs(End, { children: [
+			t8,
+			t9,
+			t12
+		] });
+		$[23] = t12;
+		$[24] = t8;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== props || $[27] !== t1 || $[28] !== t13 || $[29] !== t4 || $[30] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t1,
+			size: "sm",
+			...props,
+			children: [
+				t4,
+				t6,
+				t13
+			]
+		});
+		$[26] = props;
+		$[27] = t1;
+		$[28] = t13;
+		$[29] = t4;
+		$[30] = t6;
+		$[31] = t14;
+	} else t14 = $[31];
+	return t14;
+}
+const source$5 = "import { type ReactElement, useState } from \"react\";\n\nimport { BoldIcon, ItalicIcon, MenuIcon, ShareIcon, UnderlineIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nconst MARKS = [\n  { Mark: BoldIcon, name: \"bold\" },\n  { Mark: ItalicIcon, name: \"italic\" },\n  { Mark: UnderlineIcon, name: \"underline\" },\n] as const;\n\nexport function Editor(props: Omit<Toolbar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"toolbar\");\n  const [marked, setMarked] = useState<readonly string[]>([]);\n\n  return (\n    <Toolbar.Root aria-label={t(\"editing\")} size=\"sm\" {...props}>\n      <Toolbar.Start>\n        <Toolbar.Item aria-label={t(\"menu\")} as={IconButton} variant=\"ghost\">\n          <MenuIcon size=\"1em\" />\n        </Toolbar.Item>\n      </Toolbar.Start>\n      <Toolbar.Center>\n        <Text size=\"sm\" weight=\"medium\">\n          {t(\"draft\")}\n        </Text>\n      </Toolbar.Center>\n      <Toolbar.End>\n        <Toolbar.Group>\n          {MARKS.map(({ Mark, name }) => (\n            <Toolbar.Item\n              aria-label={t(name)}\n              aria-pressed={marked.includes(name)}\n              as={IconButton}\n              key={name}\n              onClick={() => {\n                setMarked((held) =>\n                  held.includes(name) ? held.filter((each) => each !== name) : [...held, name],\n                );\n              }}\n              variant=\"outline\"\n            >\n              <Mark size=\"1em\" />\n            </Toolbar.Item>\n          ))}\n        </Toolbar.Group>\n        <Toolbar.Separator />\n        <Toolbar.Action icon={<ShareIcon size=\"1em\" />} primary>\n          {t(\"share\")}\n        </Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/examples/invoices.example.tsx
+var invoices_example_exports = /* @__PURE__ */ __exportAll({
+	Invoices: () => Invoices,
+	source: () => source$4
+});
+function Invoices(props) {
+	const $ = c(48);
+	const { t } = useWords("toolbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("invoices");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("more");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(FunnelIcon, { size: "1em" });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("filter");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Action, {
+			icon: t3,
+			priority: "primary",
+			children: t4
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(DownloadIcon, { size: "1em" });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("export");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Action, {
+			icon: t6,
+			children: t7
+		});
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Separator, {});
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Columns3Icon, { size: "1em" });
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t) {
+		t11 = t("columns");
+		$[17] = t;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Action, {
+			icon: t10,
+			priority: "tertiary",
+			children: t11
+		});
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t12 || $[22] !== t5 || $[23] !== t8) {
+		t13 = /* @__PURE__ */ jsxs(Start, { children: [
+			t5,
+			t8,
+			t9,
+			t12
+		] });
+		$[21] = t12;
+		$[22] = t5;
+		$[23] = t8;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t) {
+		t14 = t("april");
+		$[25] = t;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Text, {
+			weight: "medium",
+			children: t14
+		}) });
+		$[27] = t14;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t) {
+		t16 = t("search");
+		$[29] = t;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== t) {
+		t18 = t("clearSearch");
+		$[32] = t;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== t) {
+		t19 = t("search");
+		$[34] = t;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(SearchIcon, { size: "1em" });
+		$[36] = t20;
+	} else t20 = $[36];
+	let t21;
+	if ($[37] !== t16 || $[38] !== t18 || $[39] !== t19) {
+		t21 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t16,
+			clearIndicator: t17,
+			clearLabel: t18,
+			placeholder: t19,
+			searchIndicator: t20
+		});
+		$[37] = t16;
+		$[38] = t18;
+		$[39] = t19;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== props || $[42] !== t0 || $[43] !== t1 || $[44] !== t13 || $[45] !== t15 || $[46] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			more: t1,
+			moreIcon: t2,
+			...props,
+			children: [
+				t13,
+				t15,
+				t21
+			]
+		});
+		$[41] = props;
+		$[42] = t0;
+		$[43] = t1;
+		$[44] = t13;
+		$[45] = t15;
+		$[46] = t21;
+		$[47] = t22;
+	} else t22 = $[47];
+	return t22;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport {\n  Columns3Icon,\n  DownloadIcon,\n  EllipsisIcon,\n  FunnelIcon,\n  SearchIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nexport function Invoices(props: Omit<Toolbar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"toolbar\");\n\n  return (\n    <Toolbar.Root\n      aria-label={t(\"invoices\")}\n      more={t(\"more\")}\n      moreIcon={<EllipsisIcon size=\"1em\" />}\n      {...props}\n    >\n      <Toolbar.Start>\n        <Toolbar.Action icon={<FunnelIcon size=\"1em\" />} priority=\"primary\">\n          {t(\"filter\")}\n        </Toolbar.Action>\n        <Toolbar.Action icon={<DownloadIcon size=\"1em\" />}>{t(\"export\")}</Toolbar.Action>\n        <Toolbar.Separator />\n        <Toolbar.Action icon={<Columns3Icon size=\"1em\" />} priority=\"tertiary\">\n          {t(\"columns\")}\n        </Toolbar.Action>\n      </Toolbar.Start>\n      <Toolbar.Center>\n        <Text weight=\"medium\">{t(\"april\")}</Text>\n      </Toolbar.Center>\n      <Toolbar.Search\n        aria-label={t(\"search\")}\n        clearIndicator={<XIcon size=\"1em\" />}\n        clearLabel={t(\"clearSearch\")}\n        placeholder={t(\"search\")}\n        searchIndicator={<SearchIcon size=\"1em\" />}\n      />\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/examples/loose.example.tsx
+var loose_example_exports = /* @__PURE__ */ __exportAll({
+	Loose: () => Loose,
+	source: () => source$3
+});
+const MODES = ["light", "dark"];
+function Loose() {
+	const $ = c(15);
+	const { t } = useWords("toolbar");
+	const [mode, setMode] = useState("light");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("catalogue");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("pages");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#pages",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== mode || $[7] !== t) {
+		t3 = MODES.map((each) => /* @__PURE__ */ jsx(Button, {
+			"aria-pressed": mode === each,
+			onClick: () => {
+				setMode(each);
+			},
+			variant: "ghost",
+			children: t(each)
+		}, each));
+		$[6] = mode;
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(End, { children: t3 });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t0 || $[12] !== t2 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t2, t4]
+		});
+		$[11] = t0;
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nconst MODES = [\"light\", \"dark\"] as const;\n\nexport function Loose(): ReactElement {\n  const { t } = useWords(\"toolbar\");\n  const [mode, setMode] = useState<(typeof MODES)[number]>(\"light\");\n\n  return (\n    <Toolbar.Root aria-label={t(\"catalogue\")} size=\"sm\">\n      <Toolbar.Start>\n        <Toolbar.Link href=\"#pages\">{t(\"pages\")}</Toolbar.Link>\n      </Toolbar.Start>\n      <Toolbar.End>\n        {MODES.map((each) => (\n          <Button\n            aria-pressed={mode === each}\n            key={each}\n            onClick={() => {\n              setMode(each);\n            }}\n            variant=\"ghost\"\n          >\n            {t(each)}\n          </Button>\n        ))}\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/examples/orders.example.tsx
+var orders_example_exports = /* @__PURE__ */ __exportAll({
+	Orders: () => Orders,
+	source: () => source$2
+});
+const VIEWS = [
+	"open",
+	"shipped",
+	"returned",
+	"closed"
+];
+function Orders(props) {
+	const $ = c(38);
+	const { t } = useWords("toolbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("orders");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("moreOrders");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = VIEWS.map((view) => /* @__PURE__ */ jsx(Link, {
+			current: view === "open",
+			href: `#${view}`,
+			children: t(view)
+		}, view));
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Start, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(DownloadIcon, { size: "1em" });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("export");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Action, {
+			icon: t5,
+			children: t6
+		});
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("print");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Action, { children: t8 });
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("import");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Action, { children: t10 });
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t) {
+		t13 = t("newOrder");
+		$[23] = t;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Action, {
+			icon: t12,
+			primary: true,
+			priority: "primary",
+			children: t13
+		});
+		$[25] = t13;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t11 || $[28] !== t14 || $[29] !== t7 || $[30] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(End, { children: [
+			t7,
+			t9,
+			t11,
+			t14
+		] });
+		$[27] = t11;
+		$[28] = t14;
+		$[29] = t7;
+		$[30] = t9;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== props || $[33] !== t0 || $[34] !== t1 || $[35] !== t15 || $[36] !== t4) {
+		t16 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			more: t1,
+			moreIcon: t2,
+			size: "sm",
+			...props,
+			children: [t4, t15]
+		});
+		$[32] = props;
+		$[33] = t0;
+		$[34] = t1;
+		$[35] = t15;
+		$[36] = t4;
+		$[37] = t16;
+	} else t16 = $[37];
+	return t16;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { DownloadIcon, EllipsisIcon, PlusIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nconst VIEWS = [\"open\", \"shipped\", \"returned\", \"closed\"] as const;\n\nexport function Orders(props: Omit<Toolbar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"toolbar\");\n\n  return (\n    <Toolbar.Root\n      aria-label={t(\"orders\")}\n      more={t(\"moreOrders\")}\n      moreIcon={<EllipsisIcon size=\"1em\" />}\n      size=\"sm\"\n      {...props}\n    >\n      <Toolbar.Start>\n        {VIEWS.map((view) => (\n          <Toolbar.Link current={view === \"open\"} href={`#${view}`} key={view}>\n            {t(view)}\n          </Toolbar.Link>\n        ))}\n      </Toolbar.Start>\n      <Toolbar.End>\n        <Toolbar.Action icon={<DownloadIcon size=\"1em\" />}>{t(\"export\")}</Toolbar.Action>\n        <Toolbar.Action>{t(\"print\")}</Toolbar.Action>\n        <Toolbar.Action>{t(\"import\")}</Toolbar.Action>\n        <Toolbar.Action icon={<PlusIcon size=\"1em\" />} primary priority=\"primary\">\n          {t(\"newOrder\")}\n        </Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/examples/product.example.tsx
+var product_example_exports = /* @__PURE__ */ __exportAll({
+	Product: () => Product,
+	source: () => source$1
+});
+const SECTIONS = [
+	"overview",
+	"deploys",
+	"settings"
+];
+function Product(props) {
+	const $ = c(25);
+	const { t } = useWords("toolbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ledger");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("moreLedger");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ledger");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Title, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = SECTIONS.map((section) => /* @__PURE__ */ jsx(Link, {
+			current: section === "overview",
+			href: `#${section}`,
+			children: t(section)
+		}, section));
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Start, { children: [t4, t5] });
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(PlusIcon, { size: "1em" });
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("newDeploy");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t7,
+			primary: true,
+			priority: "primary",
+			children: t8
+		}) });
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== props || $[20] !== t0 || $[21] !== t1 || $[22] !== t6 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			more: t1,
+			moreIcon: t2,
+			size: "sm",
+			...props,
+			children: [t6, t9]
+		});
+		$[19] = props;
+		$[20] = t0;
+		$[21] = t1;
+		$[22] = t6;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { EllipsisIcon, PlusIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nconst SECTIONS = [\"overview\", \"deploys\", \"settings\"] as const;\n\nexport function Product(props: Omit<Toolbar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"toolbar\");\n\n  return (\n    <Toolbar.Root\n      aria-label={t(\"ledger\")}\n      more={t(\"moreLedger\")}\n      moreIcon={<EllipsisIcon size=\"1em\" />}\n      size=\"sm\"\n      {...props}\n    >\n      <Toolbar.Start>\n        <Toolbar.Title>{t(\"ledger\")}</Toolbar.Title>\n        {SECTIONS.map((section) => (\n          <Toolbar.Link current={section === \"overview\"} href={`#${section}`} key={section}>\n            {t(section)}\n          </Toolbar.Link>\n        ))}\n      </Toolbar.Start>\n      <Toolbar.End>\n        <Toolbar.Action icon={<PlusIcon size=\"1em\" />} primary priority=\"primary\">\n          {t(\"newDeploy\")}\n        </Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/examples/publishing.example.tsx
+var publishing_example_exports = /* @__PURE__ */ __exportAll({
+	Publishing: () => Publishing,
+	source: () => source
+});
+function Publishing(props) {
+	const $ = c(62);
+	const { t } = useWords("toolbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("publishing");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("morePublishing");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("find");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("clearFind");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("findPlaceholder");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(SearchIcon, { size: "1em" });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t3 || $[14] !== t5 || $[15] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t3,
+			clearIndicator: t4,
+			clearLabel: t5,
+			placeholder: t6,
+			searchIndicator: t7
+		});
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = t("drafts");
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Link, {
+			current: true,
+			href: "#drafts",
+			children: t9
+		});
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t) {
+		t11 = t("published");
+		$[21] = t;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Link, {
+			href: "#published",
+			children: t11
+		});
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t10 || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Start, { children: [t10, t12] });
+		$[25] = t10;
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t) {
+		t14 = t("longTitle");
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			weight: "medium",
+			children: t14
+		}) });
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(ShareIcon, { size: "1em" });
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t) {
+		t17 = t("share");
+		$[33] = t;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Action, {
+			icon: t16,
+			children: t17
+		});
+		$[35] = t17;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t) {
+		t19 = t("export");
+		$[37] = t;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Action, { children: t19 });
+		$[39] = t19;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t) {
+		t21 = t("duplicate");
+		$[41] = t;
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Action, { children: t21 });
+		$[43] = t21;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== t) {
+		t23 = t("publish");
+		$[45] = t;
+		$[46] = t23;
+	} else t23 = $[46];
+	let t24;
+	if ($[47] !== t23) {
+		t24 = /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t23
+		});
+		$[47] = t23;
+		$[48] = t24;
+	} else t24 = $[48];
+	let t25;
+	if ($[49] !== t18 || $[50] !== t20 || $[51] !== t22 || $[52] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(End, { children: [
+			t18,
+			t20,
+			t22,
+			t24
+		] });
+		$[49] = t18;
+		$[50] = t20;
+		$[51] = t22;
+		$[52] = t24;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== props || $[55] !== t0 || $[56] !== t1 || $[57] !== t13 || $[58] !== t15 || $[59] !== t25 || $[60] !== t8) {
+		t26 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			more: t1,
+			moreIcon: t2,
+			size: "sm",
+			...props,
+			children: [
+				t8,
+				t13,
+				t15,
+				t25
+			]
+		});
+		$[54] = props;
+		$[55] = t0;
+		$[56] = t1;
+		$[57] = t13;
+		$[58] = t15;
+		$[59] = t25;
+		$[60] = t8;
+		$[61] = t26;
+	} else t26 = $[61];
+	return t26;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { EllipsisIcon, SearchIcon, ShareIcon, XIcon } from \"lucide-react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toolbar } from \"@stealthscale/component-screen\";\n\nexport function Publishing(props: Omit<Toolbar.RootProps, \"aria-label\">): ReactElement {\n  const { t } = useWords(\"toolbar\");\n\n  return (\n    <Toolbar.Root\n      aria-label={t(\"publishing\")}\n      more={t(\"morePublishing\")}\n      moreIcon={<EllipsisIcon size=\"1em\" />}\n      size=\"sm\"\n      {...props}\n    >\n      <Toolbar.Search\n        aria-label={t(\"find\")}\n        clearIndicator={<XIcon size=\"1em\" />}\n        clearLabel={t(\"clearFind\")}\n        placeholder={t(\"findPlaceholder\")}\n        searchIndicator={<SearchIcon size=\"1em\" />}\n      />\n      <Toolbar.Start>\n        <Toolbar.Link current href=\"#drafts\">\n          {t(\"drafts\")}\n        </Toolbar.Link>\n        <Toolbar.Link href=\"#published\">{t(\"published\")}</Toolbar.Link>\n      </Toolbar.Start>\n      <Toolbar.Center>\n        <Text size=\"sm\" weight=\"medium\">\n          {t(\"longTitle\")}\n        </Text>\n      </Toolbar.Center>\n      <Toolbar.End>\n        <Toolbar.Action icon={<ShareIcon size=\"1em\" />}>{t(\"share\")}</Toolbar.Action>\n        <Toolbar.Action>{t(\"export\")}</Toolbar.Action>\n        <Toolbar.Action>{t(\"duplicate\")}</Toolbar.Action>\n        <Toolbar.Action primary>{t(\"publish\")}</Toolbar.Action>\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/toolbar/toolbar.specimen.tsx
+/**
+* Catalogue page for the toolbar.
+*
+* @remarks
+*   Every hand-written scene renders its toolbar plain inside an outlined sample, the box a
+*   toolbar is placed in on a page. The folding scene renders the publishing example twice: at the
+*   card's width and in a room a phone's width, because the row folds on its own width. The
+*   crowded scene renders the orders example outlined, at the card's width and in a room of
+*   `sizes.2xl`: the room is wider than the `sm` breakpoint and narrower than the example's
+*   controls, so the row folds because it is crowded. The orders row has no search and no centre,
+*   which would shrink before the row overflows. The sizes scene renders the editor at every size.
+*   `scenesOf` generates the looks and the corners from the invoices example, and the corners
+*   render on an outlined row, because a plain row has no edge. The samples and the rooms never
+*   appear in the examples. The words are keys under `toolbar` in
+*   `locales/en/specimen/toolbar.json`.
+*/
+/**
+* Hand-written scene for a toolbar with three bands, a group and a separator.
+*/
+const whole = {
+	about: "toolbar.whole.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, {
+		place: "stretch",
+		variant: "outline",
+		children: /* @__PURE__ */ jsx(Editor, {})
+	}),
+	example: editor_example_exports,
+	title: "toolbar.whole.title"
+};
+/**
+* Hand-written scene for a title before the links of the row.
+*/
+const titled = {
+	about: "toolbar.titled.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, {
+		place: "stretch",
+		variant: "outline",
+		children: /* @__PURE__ */ jsx(Product, {})
+	}),
+	example: product_example_exports,
+	title: "toolbar.titled.title"
+};
+/**
+* Hand-written scene for one toolbar wide and at a phone's width.
+*/
+const folding = {
+	about: "toolbar.folding.about",
+	draw: () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(Sample, {
+			place: "stretch",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(Publishing, {})
+		}), /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Sample, {
+				place: "stretch",
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Publishing, {})
+			})
+		})]
+	}),
+	example: publishing_example_exports,
+	title: "toolbar.folding.title"
+};
+/**
+* Hand-written scene for one toolbar at the card's width and in a room its controls do not fit.
+*/
+const crowded = {
+	about: "toolbar.crowded.about",
+	draw: () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(Orders, { variant: "outline" }), /* @__PURE__ */ jsx(Room, {
+			size: "2xl",
+			children: /* @__PURE__ */ jsx(Orders, { variant: "outline" })
+		})]
+	}),
+	example: orders_example_exports,
+	props: { variant: "outline" },
+	title: "toolbar.crowded.title"
+};
+/**
+* Sizes the sizes scene renders, from the smallest.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Hand-written scene for the editor at every size.
+*/
+const sizes = {
+	about: "toolbar.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Stack, {
+		gap: "lg",
+		children: SIZES.map((size) => /* @__PURE__ */ jsx(Sample, {
+			place: "stretch",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(Editor, { size })
+		}, size))
+	}),
+	example: editor_example_exports,
+	props: { size: "sm" },
+	title: "toolbar.size.title"
+};
+/**
+* Hand-written scene for controls with tab stops of their own.
+*/
+const loose = {
+	about: "toolbar.loose.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, {
+		place: "stretch",
+		variant: "outline",
+		children: /* @__PURE__ */ jsx(Loose, {})
+	}),
+	example: loose_example_exports,
+	title: "toolbar.loose.title"
+};
+var toolbar_specimen_default = specimen({
+	about: "toolbar.about",
+	id: "components/screen/toolbar",
+	imports: "import { Toolbar } from \"@stealthscale/component-screen\";",
+	scenes: [
+		whole,
+		titled,
+		folding,
+		crowded,
+		sizes,
+		loose,
+		...scenesOf(recipe, {
+			axes: {
+				radius: {
+					direction: "column",
+					with: { variant: "outline" }
+				},
+				variant: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Invoices, { ...props }),
+			example: invoices_example_exports,
+			namespace: "toolbar",
+			order: ["variant", "radius"],
+			skip: { size: "The sizes scene renders every size with its controls at the same size." }
+		})
+	],
+	title: "toolbar.title"
+});
+//#endregion
+export { crowded, toolbar_specimen_default as default, folding, loose, sizes, titled, whole };