@stealthscale/component-navigation 0.3.0 → 0.3.2

package/dist/pages/navigation-menu/navigation-menu.js

@@ -0,0 +1,789 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { C as Item, S as Link, T as Content, _ as Viewport, b as Root, v as ViewportPositioner, w as Indicator, x as List, y as Trigger } from "../../shared-Cz6A-cF-.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, Room, Screen, specimen, useWords } from "@stealthscale/specimen";
+import { Span, Strong, Text } from "@stealthscale/component-typography";
+import { BookOpenIcon, ChartColumnIcon, ChevronDownIcon, ChevronRightIcon, CreditCardIcon, ReceiptTextIcon } from "lucide-react";
+import { Container, Grid, Stack } from "@stealthscale/component-layout";
+//#region src/navigation-menu/examples/aligned.example.tsx
+var aligned_example_exports = /* @__PURE__ */ __exportAll({
+	Aligned: () => Aligned,
+	source: () => source$5
+});
+const SECTIONS$2 = [{
+	key: "api",
+	links: [
+		"payments",
+		"refunds",
+		"webhooks"
+	]
+}, {
+	key: "tools",
+	links: [
+		"cli",
+		"sandbox",
+		"logs"
+	]
+}];
+function Aligned(props) {
+	const $ = c(14);
+	const { t } = useWords("navigation-menu.inline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = SECTIONS$2.map((t2) => {
+			const { key, links } = t2;
+			return /* @__PURE__ */ jsxs(Item, {
+				value: key,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [t(key), /* @__PURE__ */ jsx(ChevronDownIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					href: `#${link}`,
+					children: t(link)
+				}, link)) })]
+			}, key);
+		});
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(List, { children: [t1, t2] });
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Viewport, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== props) {
+		t5 = /* @__PURE__ */ jsx(ViewportPositioner, {
+			...props,
+			children: t4
+		});
+		$[8] = props;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t0 || $[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			children: [t3, t5]
+		});
+		$[10] = t0;
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst SECTIONS = [\n  { key: \"api\", links: [\"payments\", \"refunds\", \"webhooks\"] },\n  { key: \"tools\", links: [\"cli\", \"sandbox\", \"logs\"] },\n] as const;\n\nexport function Aligned(props: NavigationMenu.ViewportPositionerProps): ReactElement {\n  const { t } = useWords(\"navigation-menu.inline\");\n\n  return (\n    <NavigationMenu.Root aria-label={t(\"label\")}>\n      <NavigationMenu.List>\n        {SECTIONS.map(({ key, links }) => (\n          <NavigationMenu.Item key={key} value={key}>\n            <NavigationMenu.Trigger>\n              {t(key)}\n              <ChevronDownIcon />\n            </NavigationMenu.Trigger>\n            <NavigationMenu.Content>\n              {links.map((link) => (\n                <NavigationMenu.Link href={`#${link}`} key={link}>\n                  {t(link)}\n                </NavigationMenu.Link>\n              ))}\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n        ))}\n        <NavigationMenu.Indicator />\n      </NavigationMenu.List>\n      <NavigationMenu.ViewportPositioner {...props}>\n        <NavigationMenu.Viewport />\n      </NavigationMenu.ViewportPositioner>\n    </NavigationMenu.Root>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/examples/click.example.tsx
+var click_example_exports = /* @__PURE__ */ __exportAll({
+	Click: () => Click,
+	source: () => source$4
+});
+const MENUS = [{
+	key: "workspace",
+	links: [
+		"switch",
+		"members",
+		"settings"
+	]
+}, {
+	key: "help",
+	links: [
+		"docs",
+		"shortcuts",
+		"support"
+	]
+}];
+function Click() {
+	const $ = c(9);
+	const { t } = useWords("navigation-menu.click");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = MENUS.map((t2) => {
+			const { key, links } = t2;
+			return /* @__PURE__ */ jsxs(Item, {
+				value: key,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [t(key), /* @__PURE__ */ jsx(ChevronDownIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					href: `#${link}`,
+					children: t(link)
+				}, link)) })]
+			}, key);
+		});
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(List, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			disableHoverTrigger: true,
+			disablePointerLeaveClose: true,
+			children: t2
+		});
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst MENUS = [\n  { key: \"workspace\", links: [\"switch\", \"members\", \"settings\"] },\n  { key: \"help\", links: [\"docs\", \"shortcuts\", \"support\"] },\n] as const;\n\nexport function Click(): ReactElement {\n  const { t } = useWords(\"navigation-menu.click\");\n\n  return (\n    <NavigationMenu.Root aria-label={t(\"label\")} disableHoverTrigger disablePointerLeaveClose>\n      <NavigationMenu.List>\n        {MENUS.map(({ key, links }) => (\n          <NavigationMenu.Item key={key} value={key}>\n            <NavigationMenu.Trigger>\n              {t(key)}\n              <ChevronDownIcon />\n            </NavigationMenu.Trigger>\n            <NavigationMenu.Content>\n              {links.map((link) => (\n                <NavigationMenu.Link href={`#${link}`} key={link}>\n                  {t(link)}\n                </NavigationMenu.Link>\n              ))}\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n        ))}\n      </NavigationMenu.List>\n    </NavigationMenu.Root>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/examples/controlled.example.tsx
+var controlled_example_exports = /* @__PURE__ */ __exportAll({
+	Controlled: () => Controlled,
+	source: () => source$3
+});
+const SECTIONS$1 = [{
+	key: "api",
+	links: [
+		"payments",
+		"refunds",
+		"webhooks"
+	]
+}, {
+	key: "tools",
+	links: [
+		"cli",
+		"sandbox",
+		"logs"
+	]
+}];
+function Controlled() {
+	const $ = c(25);
+	const { t } = useWords("navigation-menu");
+	const [value, setValue] = useState("");
+	const [picked, setPicked] = useState("");
+	let t0;
+	if ($[0] !== value) {
+		t0 = SECTIONS$1.find((section) => section.key === value);
+		$[0] = value;
+		$[1] = t0;
+	} else t0 = $[1];
+	const open = t0;
+	let t1;
+	if ($[2] !== open || $[3] !== t) {
+		t1 = open === void 0 ? t("controlled.closed") : t("controlled.open", { item: t(`inline.${open.key}`) });
+		$[2] = open;
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	const status = t1;
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("inline.label");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (details) => {
+			setValue(details.value);
+		};
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = SECTIONS$1.map((t5) => {
+			const { key, links } = t5;
+			return /* @__PURE__ */ jsxs(Item, {
+				value: key,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [t(`inline.${key}`), /* @__PURE__ */ jsx(ChevronDownIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					href: `#${link}`,
+					onSelect: () => {
+						setPicked(t(`inline.${link}`));
+					},
+					children: t(`inline.${link}`)
+				}, link)) })]
+			}, key);
+		});
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(List, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t2 || $[13] !== t5 || $[14] !== value) {
+		t6 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t2,
+			onValueChange: t3,
+			value,
+			children: t5
+		});
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = value;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== picked || $[17] !== status || $[18] !== t) {
+		t7 = picked === "" ? status : `${status} ${t("controlled.picked", { link: picked })}`;
+		$[16] = picked;
+		$[17] = status;
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: t7
+		});
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "lg",
+			wrap: true,
+			children: [t6, t8]
+		});
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst SECTIONS = [\n  { key: \"api\", links: [\"payments\", \"refunds\", \"webhooks\"] },\n  { key: \"tools\", links: [\"cli\", \"sandbox\", \"logs\"] },\n] as const;\n\nexport function Controlled(): ReactElement {\n  const { t } = useWords(\"navigation-menu\");\n  const [value, setValue] = useState(\"\");\n  const [picked, setPicked] = useState(\"\");\n  const open = SECTIONS.find((section) => section.key === value);\n  const status =\n    open === undefined\n      ? t(\"controlled.closed\")\n      : t(\"controlled.open\", { item: t(`inline.${open.key}`) });\n\n  return (\n    <Stack direction=\"row\" gap=\"lg\" wrap>\n      <NavigationMenu.Root\n        aria-label={t(\"inline.label\")}\n        onValueChange={(details) => {\n          setValue(details.value);\n        }}\n        value={value}\n      >\n        <NavigationMenu.List>\n          {SECTIONS.map(({ key, links }) => (\n            <NavigationMenu.Item key={key} value={key}>\n              <NavigationMenu.Trigger>\n                {t(`inline.${key}`)}\n                <ChevronDownIcon />\n              </NavigationMenu.Trigger>\n              <NavigationMenu.Content>\n                {links.map((link) => (\n                  <NavigationMenu.Link\n                    href={`#${link}`}\n                    key={link}\n                    onSelect={() => {\n                      setPicked(t(`inline.${link}`));\n                    }}\n                  >\n                    {t(`inline.${link}`)}\n                  </NavigationMenu.Link>\n                ))}\n              </NavigationMenu.Content>\n            </NavigationMenu.Item>\n          ))}\n        </NavigationMenu.List>\n      </NavigationMenu.Root>\n      <Text as=\"output\">\n        {picked === \"\" ? status : `${status} ${t(\"controlled.picked\", { link: picked })}`}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/examples/header.example.tsx
+var header_example_exports = /* @__PURE__ */ __exportAll({
+	Header: () => Header,
+	source: () => source$2
+});
+const PRODUCTS = [
+	{
+		icon: CreditCardIcon,
+		key: "payments"
+	},
+	{
+		icon: ReceiptTextIcon,
+		key: "invoicing"
+	},
+	{
+		icon: BookOpenIcon,
+		key: "ledger"
+	},
+	{
+		icon: ChartColumnIcon,
+		key: "reports"
+	}
+];
+const RESOURCES = [
+	"guides",
+	"reference",
+	"changelog"
+];
+const COMPANY = [
+	"story",
+	"careers",
+	"contact"
+];
+function panel(value, label, links) {
+	return /* @__PURE__ */ jsxs(Item, {
+		value,
+		children: [/* @__PURE__ */ jsxs(Trigger, { children: [label, /* @__PURE__ */ jsx(ChevronDownIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links })]
+	});
+}
+function Header(props) {
+	const $ = c(25);
+	const { t } = useWords("navigation-menu.header");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		const t2 = t("products");
+		const t4 = PRODUCTS.map((t3) => {
+			const { icon: Icon, key } = t3;
+			return /* @__PURE__ */ jsxs(Link, {
+				href: `#${key}`,
+				children: [
+					/* @__PURE__ */ jsx(Icon, {}),
+					/* @__PURE__ */ jsx(Strong, {
+						weight: "medium",
+						children: t(`${key}.title`)
+					}),
+					/* @__PURE__ */ jsx(Span, {
+						tone: "muted",
+						children: t(`${key}.about`)
+					})
+				]
+			}, key);
+		});
+		let t5;
+		if ($[4] !== t4) {
+			t5 = /* @__PURE__ */ jsx(Grid.Root, {
+				columns: "2",
+				gap: "xs",
+				children: t4
+			});
+			$[4] = t4;
+			$[5] = t5;
+		} else t5 = $[5];
+		t1 = panel("products", t2, t5);
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[6] !== t) {
+		t2 = panel("resources", t("resources"), RESOURCES.map((key_0) => /* @__PURE__ */ jsxs(Link, {
+			href: `#${key_0}`,
+			children: [/* @__PURE__ */ jsx(Strong, {
+				weight: "medium",
+				children: t(`${key_0}.title`)
+			}), /* @__PURE__ */ jsx(Span, {
+				tone: "muted",
+				children: t(`${key_0}.about`)
+			})]
+		}, key_0)));
+		$[6] = t;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t) {
+		t3 = panel("company", t("company"), COMPANY.map((key_1) => /* @__PURE__ */ jsx(Link, {
+			href: `#${key_1}`,
+			children: t(key_1)
+		}, key_1)));
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t) {
+		t4 = t("pricing");
+		$[10] = t;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Item, {
+			value: "pricing",
+			children: /* @__PURE__ */ jsx(Link, {
+				current: true,
+				href: "#pricing",
+				children: t4
+			})
+		});
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Indicator, {});
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(List, { children: [
+			t1,
+			t2,
+			t3,
+			t5,
+			t6
+		] });
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ViewportPositioner, {
+			align: "start",
+			children: /* @__PURE__ */ jsx(Viewport, {})
+		});
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== props || $[22] !== t0 || $[23] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			...props,
+			children: [t7, t8]
+		});
+		$[21] = props;
+		$[22] = t0;
+		$[23] = t7;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
+}
+const source$2 = "import { type ReactElement, type ReactNode } from \"react\";\n\nimport {\n  BookOpenIcon,\n  ChartColumnIcon,\n  ChevronDownIcon,\n  CreditCardIcon,\n  ReceiptTextIcon,\n} from \"lucide-react\";\n\nimport { Grid } from \"@stealthscale/component-layout\";\nimport { Span, Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst PRODUCTS = [\n  { icon: CreditCardIcon, key: \"payments\" },\n  { icon: ReceiptTextIcon, key: \"invoicing\" },\n  { icon: BookOpenIcon, key: \"ledger\" },\n  { icon: ChartColumnIcon, key: \"reports\" },\n] as const;\n\nconst RESOURCES = [\"guides\", \"reference\", \"changelog\"] as const;\n\nconst COMPANY = [\"story\", \"careers\", \"contact\"] as const;\n\nfunction panel(value: string, label: string, links: ReactNode): ReactElement {\n  return (\n    <NavigationMenu.Item value={value}>\n      <NavigationMenu.Trigger>\n        {label}\n        <ChevronDownIcon />\n      </NavigationMenu.Trigger>\n      <NavigationMenu.Content>{links}</NavigationMenu.Content>\n    </NavigationMenu.Item>\n  );\n}\n\nexport function Header(props: NavigationMenu.RootProps): ReactElement {\n  const { t } = useWords(\"navigation-menu.header\");\n\n  return (\n    <NavigationMenu.Root aria-label={t(\"label\")} {...props}>\n      <NavigationMenu.List>\n        {panel(\n          \"products\",\n          t(\"products\"),\n          <Grid.Root columns=\"2\" gap=\"xs\">\n            {PRODUCTS.map(({ icon: Icon, key }) => (\n              <NavigationMenu.Link href={`#${key}`} key={key}>\n                <Icon />\n                <Strong weight=\"medium\">{t(`${key}.title`)}</Strong>\n                <Span tone=\"muted\">{t(`${key}.about`)}</Span>\n              </NavigationMenu.Link>\n            ))}\n          </Grid.Root>,\n        )}\n        {panel(\n          \"resources\",\n          t(\"resources\"),\n          RESOURCES.map((key) => (\n            <NavigationMenu.Link href={`#${key}`} key={key}>\n              <Strong weight=\"medium\">{t(`${key}.title`)}</Strong>\n              <Span tone=\"muted\">{t(`${key}.about`)}</Span>\n            </NavigationMenu.Link>\n          )),\n        )}\n        {panel(\n          \"company\",\n          t(\"company\"),\n          COMPANY.map((key) => (\n            <NavigationMenu.Link href={`#${key}`} key={key}>\n              {t(key)}\n            </NavigationMenu.Link>\n          )),\n        )}\n        <NavigationMenu.Item value=\"pricing\">\n          <NavigationMenu.Link current href=\"#pricing\">\n            {t(\"pricing\")}\n          </NavigationMenu.Link>\n        </NavigationMenu.Item>\n        <NavigationMenu.Indicator />\n      </NavigationMenu.List>\n      <NavigationMenu.ViewportPositioner align=\"start\">\n        <NavigationMenu.Viewport />\n      </NavigationMenu.ViewportPositioner>\n    </NavigationMenu.Root>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/examples/inline.example.tsx
+var inline_example_exports = /* @__PURE__ */ __exportAll({
+	Inline: () => Inline,
+	source: () => source$1
+});
+const SECTIONS = [{
+	key: "api",
+	links: [
+		"payments",
+		"refunds",
+		"webhooks"
+	]
+}, {
+	key: "tools",
+	links: [
+		"cli",
+		"sandbox",
+		"logs"
+	]
+}];
+function Inline(props) {
+	const $ = c(16);
+	const { t } = useWords("navigation-menu.inline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = SECTIONS.map((t2) => {
+			const { key, links } = t2;
+			return /* @__PURE__ */ jsxs(Item, {
+				value: key,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [t(key), /* @__PURE__ */ jsx(ChevronDownIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					href: `#${link}`,
+					children: t(link)
+				}, link)) })]
+			}, key);
+		});
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("changelog");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Item, {
+			value: "changelog",
+			children: /* @__PURE__ */ jsx(Link, {
+				current: true,
+				href: "#changelog",
+				children: t2
+			})
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Indicator, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t1 || $[10] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(List, { children: [
+			t1,
+			t3,
+			t4
+		] });
+		$[9] = t1;
+		$[10] = t3;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== props || $[13] !== t0 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			...props,
+			children: t5
+		});
+		$[12] = props;
+		$[13] = t0;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst SECTIONS = [\n  { key: \"api\", links: [\"payments\", \"refunds\", \"webhooks\"] },\n  { key: \"tools\", links: [\"cli\", \"sandbox\", \"logs\"] },\n] as const;\n\nexport function Inline(props: NavigationMenu.RootProps): ReactElement {\n  const { t } = useWords(\"navigation-menu.inline\");\n\n  return (\n    <NavigationMenu.Root aria-label={t(\"label\")} {...props}>\n      <NavigationMenu.List>\n        {SECTIONS.map(({ key, links }) => (\n          <NavigationMenu.Item key={key} value={key}>\n            <NavigationMenu.Trigger>\n              {t(key)}\n              <ChevronDownIcon />\n            </NavigationMenu.Trigger>\n            <NavigationMenu.Content>\n              {links.map((link) => (\n                <NavigationMenu.Link href={`#${link}`} key={link}>\n                  {t(link)}\n                </NavigationMenu.Link>\n              ))}\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n        ))}\n        <NavigationMenu.Item value=\"changelog\">\n          <NavigationMenu.Link current href=\"#changelog\">\n            {t(\"changelog\")}\n          </NavigationMenu.Link>\n        </NavigationMenu.Item>\n        <NavigationMenu.Indicator />\n      </NavigationMenu.List>\n    </NavigationMenu.Root>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/examples/sidebar.example.tsx
+var sidebar_example_exports = /* @__PURE__ */ __exportAll({
+	Sidebar: () => Sidebar,
+	source: () => source
+});
+const GROUPS = [{
+	key: "billing",
+	links: [
+		"invoices",
+		"subscriptions",
+		"tax"
+	]
+}, {
+	key: "settings",
+	links: [
+		"team",
+		"security",
+		"keys"
+	]
+}];
+function Sidebar() {
+	const $ = c(14);
+	const { t } = useWords("navigation-menu.sidebar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("dashboard");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Item, {
+			value: "dashboard",
+			children: /* @__PURE__ */ jsx(Link, {
+				current: true,
+				href: "#dashboard",
+				children: t1
+			})
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = GROUPS.map((t4) => {
+			const { key, links } = t4;
+			return /* @__PURE__ */ jsxs(Item, {
+				value: key,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [t(key), /* @__PURE__ */ jsx(ChevronRightIcon, {})] }), /* @__PURE__ */ jsx(Content, { children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					href: `#${link}`,
+					children: t(link)
+				}, link)) })]
+			}, key);
+		});
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(List, { children: [t2, t3] });
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t0 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			orientation: "vertical",
+			children: t4
+		});
+		$[11] = t0;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { NavigationMenu } from \"@stealthscale/component-navigation\";\n\nconst GROUPS = [\n  { key: \"billing\", links: [\"invoices\", \"subscriptions\", \"tax\"] },\n  { key: \"settings\", links: [\"team\", \"security\", \"keys\"] },\n] as const;\n\nexport function Sidebar(): ReactElement {\n  const { t } = useWords(\"navigation-menu.sidebar\");\n\n  return (\n    <NavigationMenu.Root aria-label={t(\"label\")} orientation=\"vertical\">\n      <NavigationMenu.List>\n        <NavigationMenu.Item value=\"dashboard\">\n          <NavigationMenu.Link current href=\"#dashboard\">\n            {t(\"dashboard\")}\n          </NavigationMenu.Link>\n        </NavigationMenu.Item>\n        {GROUPS.map(({ key, links }) => (\n          <NavigationMenu.Item key={key} value={key}>\n            <NavigationMenu.Trigger>\n              {t(key)}\n              <ChevronRightIcon />\n            </NavigationMenu.Trigger>\n            <NavigationMenu.Content>\n              {links.map((link) => (\n                <NavigationMenu.Link href={`#${link}`} key={link}>\n                  {t(link)}\n                </NavigationMenu.Link>\n              ))}\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n        ))}\n      </NavigationMenu.List>\n    </NavigationMenu.Root>\n  );\n}\n";
+//#endregion
+//#region src/navigation-menu/navigation-menu.specimen.tsx
+/**
+* Alignments of the alignment scene, in reading order.
+*/
+const ALIGNS = [
+	"start",
+	"center",
+	"end"
+];
+/**
+* Palettes of the palette scene.
+*/
+const PALETTES = [
+	"primary",
+	"accent",
+	"neutral",
+	"success"
+];
+/**
+* Sizes of the size scene.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Renders a menu inside the page's gutter at the top of a site's window.
+*
+* @param size - The window's height.
+* @param menu - The menu.
+* @returns The window.
+*/
+function windowed(size, menu) {
+	return /* @__PURE__ */ jsx(Screen, {
+		size,
+		children: /* @__PURE__ */ jsx(Container, {
+			size: "full",
+			children: menu
+		})
+	});
+}
+/**
+* Hand-written scene for a site header with a shared viewport and an indicator.
+*/
+const header = {
+	about: "navigation-menu.header.about",
+	draw: () => windowed("sm", /* @__PURE__ */ jsx(Header, {})),
+	example: header_example_exports,
+	title: "navigation-menu.header.title"
+};
+/**
+* Hand-written scene for every size of the site header.
+*/
+const size = {
+	about: "navigation-menu.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		direction: "column",
+		knob: "size",
+		of: SIZES,
+		children: (each) => windowed("md", /* @__PURE__ */ jsx(Header, { size: each }))
+	}),
+	example: header_example_exports,
+	props: { size: "sm" },
+	title: "navigation-menu.size.title"
+};
+/**
+* Hand-written scene for the indicator and a current link in several palettes.
+*/
+const palette = {
+	about: "navigation-menu.palette.about",
+	axes: ["palette"],
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		direction: "column",
+		knob: "palette",
+		of: PALETTES,
+		children: (each) => windowed("xs", /* @__PURE__ */ jsx(Inline, { palette: each }))
+	}),
+	example: inline_example_exports,
+	props: { palette: "primary" },
+	title: "navigation-menu.palette.title"
+};
+/**
+* Hand-written scene for panels that open under their own triggers.
+*/
+const inline = {
+	about: "navigation-menu.inline.about",
+	draw: () => windowed("xs", /* @__PURE__ */ jsx(Inline, {})),
+	example: inline_example_exports,
+	title: "navigation-menu.inline.title"
+};
+/**
+* Hand-written scene for a vertical menu at a sidebar's width.
+*/
+const sidebar = {
+	about: "navigation-menu.sidebar.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Sidebar, {})
+		})
+	}),
+	example: sidebar_example_exports,
+	title: "navigation-menu.sidebar.title"
+};
+/**
+* Hand-written scene for a menu whose panels open only on a press.
+*/
+const click = {
+	about: "navigation-menu.click.about",
+	draw: () => windowed("xs", /* @__PURE__ */ jsx(Click, {})),
+	example: click_example_exports,
+	title: "navigation-menu.click.title"
+};
+/**
+* Hand-written scene for a menu whose open item the caller keeps.
+*/
+const controlled = {
+	about: "navigation-menu.controlled.about",
+	draw: () => windowed("xs", /* @__PURE__ */ jsx(Controlled, {})),
+	example: controlled_example_exports,
+	title: "navigation-menu.controlled.title"
+};
+/**
+* Hand-written scene for every alignment of the viewport against the open trigger.
+*/
+const aligned = {
+	about: "navigation-menu.aligned.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		direction: "column",
+		knob: "align",
+		of: ALIGNS,
+		children: (align) => windowed("xs", /* @__PURE__ */ jsx(Aligned, { align }))
+	}),
+	example: aligned_example_exports,
+	props: { align: "start" },
+	title: "navigation-menu.aligned.title"
+};
+var navigation_menu_specimen_default = specimen({
+	about: "navigation-menu.about",
+	id: "components/navigation/navigation-menu",
+	imports: "import { NavigationMenu } from \"@stealthscale/component-navigation\";",
+	scenes: [
+		header,
+		size,
+		palette,
+		inline,
+		sidebar,
+		click,
+		controlled,
+		aligned
+	],
+	title: "navigation-menu.title"
+});
+//#endregion
+export { aligned, click, controlled, navigation_menu_specimen_default as default, header, inline, palette, sidebar, size };