@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/splitter/splitter.js

@@ -0,0 +1,1563 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { r as recipe } from "../../recipes-Cmy1leBm.js";
+import { C as ResizeTrigger, S as Root, T as useSplitter, w as Panel } 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 { ScrollArea } from "@stealthscale/component-primitives";
+import { NavList } from "@stealthscale/component-navigation";
+import { Switch } from "@stealthscale/component-forms";
+import { Group, Stack } from "@stealthscale/component-layout";
+import { Focused, Screen, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { FileTextIcon, PanelLeftIcon, RotateCcwIcon } from "lucide-react";
+import { Code, Heading, Text } from "@stealthscale/component-typography";
+//#region src/splitter/examples/basic.example.tsx
+var basic_example_exports = /* @__PURE__ */ __exportAll({
+	Basic: () => Basic,
+	source: () => source$6
+});
+function pane$2(title, text) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		inset: "md",
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": title,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					weight: "semibold",
+					children: title
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					tone: "muted",
+					children: text
+				})]
+			}) })
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {})]
+	});
+}
+function Basic(props) {
+	const $ = c(19);
+	const { t } = useWords("splitter");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultSize: [40, 60],
+			panels: [{
+				id: "offers",
+				minSize: 25
+			}, {
+				id: "detail",
+				minSize: 30
+			}]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const splitter = useSplitter(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = pane$2(t("basic.offers"), t("basic.waiting"));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Panel, {
+			id: "offers",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("basic.resize");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "offers:detail",
+			label: t3
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = pane$2(t("basic.detail"), t("basic.empty"));
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Panel, {
+			id: "detail",
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== props || $[14] !== splitter || $[15] !== t2 || $[16] !== t4 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			splitter,
+			...props,
+			children: [
+				t2,
+				t4,
+				t6
+			]
+		});
+		$[13] = props;
+		$[14] = splitter;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nfunction pane(title: string, text: string): ReactElement {\n  return (\n    <ScrollArea.Root inset=\"md\">\n      <ScrollArea.Viewport aria-label={title}>\n        <ScrollArea.Content>\n          <Stack gap=\"xs\">\n            <Text weight=\"semibold\">{title}</Text>\n            <Text size=\"sm\" tone=\"muted\">\n              {text}\n            </Text>\n          </Stack>\n        </ScrollArea.Content>\n      </ScrollArea.Viewport>\n      <ScrollArea.Scrollbar />\n    </ScrollArea.Root>\n  );\n}\n\nexport function Basic(props: Omit<Splitter.RootProps, \"splitter\">): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const splitter = Splitter.useSplitter({\n    defaultSize: [40, 60],\n    panels: [\n      { id: \"offers\", minSize: 25 },\n      { id: \"detail\", minSize: 30 },\n    ],\n  });\n\n  return (\n    <Splitter.Root splitter={splitter} {...props}>\n      <Splitter.Panel id=\"offers\">{pane(t(\"basic.offers\"), t(\"basic.waiting\"))}</Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"offers:detail\" label={t(\"basic.resize\")} />\n      <Splitter.Panel id=\"detail\">{pane(t(\"basic.detail\"), t(\"basic.empty\"))}</Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/controlled.example.tsx
+var controlled_example_exports = /* @__PURE__ */ __exportAll({
+	Controlled: () => Controlled,
+	source: () => source$5
+});
+const FIRST = [50, 50];
+function Controlled() {
+	const $ = c(77);
+	const { t } = useWords("splitter");
+	const [size, setSize] = useState(FIRST);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			setSize(FIRST);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const reset = t0;
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (details) => {
+			setSize(details.size);
+		};
+		t2 = [{
+			id: "chart",
+			minSize: 20
+		}, {
+			id: "table",
+			minSize: 20
+		}];
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== size) {
+		t3 = {
+			onResize: t1,
+			panels: t2,
+			size
+		};
+		$[3] = size;
+		$[4] = t3;
+	} else t3 = $[4];
+	const splitter = useSplitter(t3);
+	let T0;
+	let T1;
+	let T2;
+	let T3;
+	let T4;
+	let T5;
+	let T6;
+	let t10;
+	let t11;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[5] !== splitter || $[6] !== t) {
+		const [t12, t13] = splitter.getSizes();
+		const chart = t12 === void 0 ? 0 : t12;
+		const table = t13 === void 0 ? 0 : t13;
+		T6 = Root;
+		t11 = splitter;
+		T5 = Panel;
+		t10 = "chart";
+		T4 = ScrollArea.Root;
+		t9 = "md";
+		T3 = ScrollArea.Viewport;
+		if ($[22] !== t) {
+			t8 = t("controlled.chart");
+			$[22] = t;
+			$[23] = t8;
+		} else t8 = $[23];
+		T2 = ScrollArea.Content;
+		T1 = Stack;
+		t6 = "flex-start";
+		t7 = "sm";
+		T0 = Text;
+		t4 = "output";
+		t5 = t("controlled.sizes", {
+			chart: Math.round(chart),
+			table: Math.round(table)
+		});
+		$[5] = splitter;
+		$[6] = t;
+		$[7] = T0;
+		$[8] = T1;
+		$[9] = T2;
+		$[10] = T3;
+		$[11] = T4;
+		$[12] = T5;
+		$[13] = T6;
+		$[14] = t10;
+		$[15] = t11;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else {
+		T0 = $[7];
+		T1 = $[8];
+		T2 = $[9];
+		T3 = $[10];
+		T4 = $[11];
+		T5 = $[12];
+		T6 = $[13];
+		t10 = $[14];
+		t11 = $[15];
+		t4 = $[16];
+		t5 = $[17];
+		t6 = $[18];
+		t7 = $[19];
+		t8 = $[20];
+		t9 = $[21];
+	}
+	let t12;
+	if ($[24] !== T0 || $[25] !== t4 || $[26] !== t5) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			as: t4,
+			children: t5
+		});
+		$[24] = T0;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t) {
+		t14 = t("controlled.reset");
+		$[29] = t;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Button, {
+			onClick: reset,
+			size: "sm",
+			variant: "outline",
+			children: [t13, t14]
+		});
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== T1 || $[34] !== t12 || $[35] !== t15 || $[36] !== t6 || $[37] !== t7) {
+		t16 = /* @__PURE__ */ jsxs(T1, {
+			align: t6,
+			gap: t7,
+			children: [t12, t15]
+		});
+		$[33] = T1;
+		$[34] = t12;
+		$[35] = t15;
+		$[36] = t6;
+		$[37] = t7;
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== T2 || $[40] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T2, { children: t16 });
+		$[39] = T2;
+		$[40] = t16;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== T3 || $[43] !== t17 || $[44] !== t8) {
+		t18 = /* @__PURE__ */ jsx(T3, {
+			"aria-label": t8,
+			children: t17
+		});
+		$[42] = T3;
+		$[43] = t17;
+		$[44] = t8;
+		$[45] = t18;
+	} else t18 = $[45];
+	let t19;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[46] = t19;
+	} else t19 = $[46];
+	let t20;
+	if ($[47] !== T4 || $[48] !== t18 || $[49] !== t9) {
+		t20 = /* @__PURE__ */ jsxs(T4, {
+			inset: t9,
+			children: [t18, t19]
+		});
+		$[47] = T4;
+		$[48] = t18;
+		$[49] = t9;
+		$[50] = t20;
+	} else t20 = $[50];
+	let t21;
+	if ($[51] !== T5 || $[52] !== t10 || $[53] !== t20) {
+		t21 = /* @__PURE__ */ jsx(T5, {
+			id: t10,
+			children: t20
+		});
+		$[51] = T5;
+		$[52] = t10;
+		$[53] = t20;
+		$[54] = t21;
+	} else t21 = $[54];
+	let t22;
+	if ($[55] !== t) {
+		t22 = t("controlled.resize");
+		$[55] = t;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== t22) {
+		t23 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "chart:table",
+			label: t22,
+			onDoubleClick: reset
+		});
+		$[57] = t22;
+		$[58] = t23;
+	} else t23 = $[58];
+	let t24;
+	if ($[59] !== t) {
+		t24 = t("controlled.table");
+		$[59] = t;
+		$[60] = t24;
+	} else t24 = $[60];
+	let t25;
+	if ($[61] !== t) {
+		t25 = t("controlled.hint");
+		$[61] = t;
+		$[62] = t25;
+	} else t25 = $[62];
+	let t26;
+	if ($[63] !== t25) {
+		t26 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t25
+		}) });
+		$[63] = t25;
+		$[64] = t26;
+	} else t26 = $[64];
+	let t27;
+	if ($[65] !== t24 || $[66] !== t26) {
+		t27 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t24,
+			children: t26
+		});
+		$[65] = t24;
+		$[66] = t26;
+		$[67] = t27;
+	} else t27 = $[67];
+	let t28;
+	if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[68] = t28;
+	} else t28 = $[68];
+	let t29;
+	if ($[69] !== t27) {
+		t29 = /* @__PURE__ */ jsx(Panel, {
+			id: "table",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				children: [t27, t28]
+			})
+		});
+		$[69] = t27;
+		$[70] = t29;
+	} else t29 = $[70];
+	let t30;
+	if ($[71] !== T6 || $[72] !== t11 || $[73] !== t21 || $[74] !== t23 || $[75] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(T6, {
+			splitter: t11,
+			children: [
+				t21,
+				t23,
+				t29
+			]
+		});
+		$[71] = T6;
+		$[72] = t11;
+		$[73] = t21;
+		$[74] = t23;
+		$[75] = t29;
+		$[76] = t30;
+	} else t30 = $[76];
+	return t30;
+}
+const source$5 = "import { type ReactElement, useState } from \"react\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nconst FIRST: Splitter.PanelSize[] = [50, 50];\n\nexport function Controlled(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const [size, setSize] = useState(FIRST);\n  const reset = (): void => {\n    setSize(FIRST);\n  };\n  const splitter = Splitter.useSplitter({\n    onResize: (details) => {\n      setSize(details.size);\n    },\n    panels: [\n      { id: \"chart\", minSize: 20 },\n      { id: \"table\", minSize: 20 },\n    ],\n    size,\n  });\n  const [chart = 0, table = 0] = splitter.getSizes();\n\n  return (\n    <Splitter.Root splitter={splitter}>\n      <Splitter.Panel id=\"chart\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"controlled.chart\")}>\n            <ScrollArea.Content>\n              <Stack align=\"flex-start\" gap=\"sm\">\n                <Text as=\"output\">\n                  {t(\"controlled.sizes\", { chart: Math.round(chart), table: Math.round(table) })}\n                </Text>\n                <Button onClick={reset} size=\"sm\" variant=\"outline\">\n                  <RotateCcwIcon />\n                  {t(\"controlled.reset\")}\n                </Button>\n              </Stack>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n      <Splitter.ResizeTrigger\n        id=\"chart:table\"\n        label={t(\"controlled.resize\")}\n        onDoubleClick={reset}\n      />\n      <Splitter.Panel id=\"table\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"controlled.table\")}>\n            <ScrollArea.Content>\n              <Text size=\"sm\" tone=\"muted\">\n                {t(\"controlled.hint\")}\n              </Text>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/locked.example.tsx
+var locked_example_exports = /* @__PURE__ */ __exportAll({
+	Locked: () => Locked,
+	source: () => source$4
+});
+function Locked() {
+	const $ = c(47);
+	const { t } = useWords("splitter");
+	const [editing, setEditing] = useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultSize: [60, 40],
+			panels: [{
+				id: "revenue",
+				minSize: 30
+			}, {
+				id: "activity",
+				minSize: 25
+			}]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const splitter = useSplitter(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("locked.revenue");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("locked.revenue");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (details) => {
+			setEditing(details.checked);
+		};
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = t("locked.edit");
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Switch.Label, { children: t6 });
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== editing || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Switch.Root, {
+			checked: editing,
+			onCheckedChange: t4,
+			children: [t5, t7]
+		});
+		$[13] = editing;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t3 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			gap: "sm",
+			children: [t3, t8]
+		}) });
+		$[16] = t3;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t1 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t1,
+			children: t9
+		});
+		$[19] = t1;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t10) {
+		t12 = /* @__PURE__ */ jsx(Panel, {
+			id: "revenue",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				children: [t10, t11]
+			})
+		});
+		$[23] = t10;
+		$[24] = t12;
+	} else t12 = $[24];
+	const t13 = !editing;
+	let t14;
+	if ($[25] !== t) {
+		t14 = t("locked.resize");
+		$[25] = t;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t13 || $[28] !== t14) {
+		t15 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			disabled: t13,
+			id: "revenue:activity",
+			label: t14
+		});
+		$[27] = t13;
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t) {
+		t16 = t("locked.activity");
+		$[30] = t;
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] !== t) {
+		t17 = t("locked.activityText");
+		$[32] = t;
+		$[33] = t17;
+	} else t17 = $[33];
+	let t18;
+	if ($[34] !== t17) {
+		t18 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t17
+		}) });
+		$[34] = t17;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== t16 || $[37] !== t18) {
+		t19 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t16,
+			children: t18
+		});
+		$[36] = t16;
+		$[37] = t18;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[39] = t20;
+	} else t20 = $[39];
+	let t21;
+	if ($[40] !== t19) {
+		t21 = /* @__PURE__ */ jsx(Panel, {
+			id: "activity",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				children: [t19, t20]
+			})
+		});
+		$[40] = t19;
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== splitter || $[43] !== t12 || $[44] !== t15 || $[45] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Root, {
+			splitter,
+			children: [
+				t12,
+				t15,
+				t21
+			]
+		});
+		$[42] = splitter;
+		$[43] = t12;
+		$[44] = t15;
+		$[45] = t21;
+		$[46] = t22;
+	} else t22 = $[46];
+	return t22;
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { Switch } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nexport function Locked(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const [editing, setEditing] = useState(false);\n  const splitter = Splitter.useSplitter({\n    defaultSize: [60, 40],\n    panels: [\n      { id: \"revenue\", minSize: 30 },\n      { id: \"activity\", minSize: 25 },\n    ],\n  });\n\n  return (\n    <Splitter.Root splitter={splitter}>\n      <Splitter.Panel id=\"revenue\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"locked.revenue\")}>\n            <ScrollArea.Content>\n              <Stack align=\"flex-start\" gap=\"sm\">\n                <Text weight=\"semibold\">{t(\"locked.revenue\")}</Text>\n                <Switch.Root\n                  checked={editing}\n                  onCheckedChange={(details) => {\n                    setEditing(details.checked);\n                  }}\n                >\n                  <Switch.Control>\n                    <Switch.Thumb />\n                  </Switch.Control>\n                  <Switch.Label>{t(\"locked.edit\")}</Switch.Label>\n                </Switch.Root>\n              </Stack>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n      <Splitter.ResizeTrigger\n        disabled={!editing}\n        id=\"revenue:activity\"\n        label={t(\"locked.resize\")}\n      />\n      <Splitter.Panel id=\"activity\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"locked.activity\")}>\n            <ScrollArea.Content>\n              <Text size=\"sm\" tone=\"muted\">\n                {t(\"locked.activityText\")}\n              </Text>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/mail.example.tsx
+var mail_example_exports = /* @__PURE__ */ __exportAll({
+	Mail: () => Mail,
+	source: () => source$3
+});
+const FOLDERS = [
+	"inbox",
+	"sent",
+	"archive"
+];
+const MESSAGES = [
+	"invoice",
+	"standup",
+	"offsite"
+];
+function pane$1(title, lines) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		inset: "md",
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": title,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					weight: "semibold",
+					children: title
+				}), lines.map((line) => /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					tone: "muted",
+					children: line
+				}, line))]
+			}) })
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {})]
+	});
+}
+function Mail() {
+	const $ = c(40);
+	const { t } = useWords("splitter");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultSize: ["160px", 35],
+			panels: [
+				{
+					id: "folders",
+					maxSize: "280px",
+					minSize: "112px",
+					resizeBehavior: "preserve-pixel-size"
+				},
+				{
+					id: "messages",
+					minSize: 25
+				},
+				{
+					id: "message",
+					minSize: 30
+				}
+			]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const splitter = useSplitter(t0);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[1] !== splitter || $[2] !== t) {
+		let t6;
+		if ($[10] !== t) {
+			t6 = (folder) => t(`mail.folders.${folder}`);
+			$[10] = t;
+			$[11] = t6;
+		} else t6 = $[11];
+		const folders = FOLDERS.map(t6);
+		let t7;
+		if ($[12] !== t) {
+			t7 = (message) => t(`mail.messages.${message}`);
+			$[12] = t;
+			$[13] = t7;
+		} else t7 = $[13];
+		const messages = MESSAGES.map(t7);
+		T1 = Root;
+		t3 = splitter;
+		const t8 = pane$1(t("mail.folder"), folders);
+		if ($[14] !== t8) {
+			t4 = /* @__PURE__ */ jsx(Panel, {
+				id: "folders",
+				children: t8
+			});
+			$[14] = t8;
+			$[15] = t4;
+		} else t4 = $[15];
+		let t9;
+		if ($[16] !== t) {
+			t9 = t("mail.resizeFolders");
+			$[16] = t;
+			$[17] = t9;
+		} else t9 = $[17];
+		if ($[18] !== t9) {
+			t5 = /* @__PURE__ */ jsx(ResizeTrigger, {
+				id: "folders:messages",
+				label: t9
+			});
+			$[18] = t9;
+			$[19] = t5;
+		} else t5 = $[19];
+		T0 = Panel;
+		t1 = "messages";
+		t2 = pane$1(t("mail.inbox"), messages);
+		$[1] = splitter;
+		$[2] = t;
+		$[3] = T0;
+		$[4] = T1;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		T0 = $[3];
+		T1 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+	}
+	let t6;
+	if ($[20] !== T0 || $[21] !== t1 || $[22] !== t2) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			id: t1,
+			children: t2
+		});
+		$[20] = T0;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[24] !== t) {
+		t7 = t("mail.resizeMessages");
+		$[24] = t;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "messages:message",
+			label: t7
+		});
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t) {
+		t9 = pane$1(t("mail.subject"), [t("mail.body")]);
+		$[28] = t;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Panel, {
+			id: "message",
+			children: t9
+		});
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== T1 || $[33] !== t10 || $[34] !== t3 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6 || $[38] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(T1, {
+			splitter: t3,
+			children: [
+				t4,
+				t5,
+				t6,
+				t8,
+				t10
+			]
+		});
+		$[32] = T1;
+		$[33] = t10;
+		$[34] = t3;
+		$[35] = t4;
+		$[36] = t5;
+		$[37] = t6;
+		$[38] = t8;
+		$[39] = t11;
+	} else t11 = $[39];
+	return t11;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nconst FOLDERS = [\"inbox\", \"sent\", \"archive\"] as const;\n\nconst MESSAGES = [\"invoice\", \"standup\", \"offsite\"] as const;\n\nfunction pane(title: string, lines: readonly string[]): ReactElement {\n  return (\n    <ScrollArea.Root inset=\"md\">\n      <ScrollArea.Viewport aria-label={title}>\n        <ScrollArea.Content>\n          <Stack gap=\"xs\">\n            <Text weight=\"semibold\">{title}</Text>\n            {lines.map((line) => (\n              <Text key={line} size=\"sm\" tone=\"muted\">\n                {line}\n              </Text>\n            ))}\n          </Stack>\n        </ScrollArea.Content>\n      </ScrollArea.Viewport>\n      <ScrollArea.Scrollbar />\n    </ScrollArea.Root>\n  );\n}\n\nexport function Mail(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const splitter = Splitter.useSplitter({\n    defaultSize: [\"160px\", 35],\n    panels: [\n      { id: \"folders\", maxSize: \"280px\", minSize: \"112px\", resizeBehavior: \"preserve-pixel-size\" },\n      { id: \"messages\", minSize: 25 },\n      { id: \"message\", minSize: 30 },\n    ],\n  });\n  const folders = FOLDERS.map((folder) => t(`mail.folders.${folder}`));\n  const messages = MESSAGES.map((message) => t(`mail.messages.${message}`));\n\n  return (\n    <Splitter.Root splitter={splitter}>\n      <Splitter.Panel id=\"folders\">{pane(t(\"mail.folder\"), folders)}</Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"folders:messages\" label={t(\"mail.resizeFolders\")} />\n      <Splitter.Panel id=\"messages\">{pane(t(\"mail.inbox\"), messages)}</Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"messages:message\" label={t(\"mail.resizeMessages\")} />\n      <Splitter.Panel id=\"message\">{pane(t(\"mail.subject\"), [t(\"mail.body\")])}</Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/nested.example.tsx
+var nested_example_exports = /* @__PURE__ */ __exportAll({
+	Nested: () => Nested,
+	source: () => source$2
+});
+function pane(title, text) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		inset: "md",
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": title,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					weight: "semibold",
+					children: title
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					tone: "muted",
+					children: text
+				})]
+			}) })
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {})]
+	});
+}
+function Nested() {
+	const $ = c(33);
+	const { t } = useWords("splitter");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultSize: [25, 75],
+			panels: [{
+				id: "project",
+				minSize: 15
+			}, { id: "work" }]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const outer = useSplitter(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [65, 35];
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			defaultSize: t1,
+			orientation: "vertical",
+			panels: [{ id: "editor" }, {
+				id: "output",
+				minSize: 20
+			}]
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	const inner = useSplitter(t2);
+	let t3;
+	if ($[3] !== t) {
+		t3 = pane(t("nested.project"), t("nested.projectText"));
+		$[3] = t;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Panel, {
+			id: "project",
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("nested.resizeProject");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "project:work",
+			label: t5
+		});
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = pane(t("nested.editor"), t("nested.editorText"));
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Panel, {
+			id: "editor",
+			children: t7
+		});
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("nested.resizeOutput");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t9) {
+		t10 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "editor:output",
+			label: t9
+		});
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t) {
+		t11 = pane(t("nested.output"), t("nested.outputText"));
+		$[19] = t;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Panel, {
+			id: "output",
+			children: t11
+		});
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== inner || $[24] !== t10 || $[25] !== t12 || $[26] !== t8) {
+		t13 = /* @__PURE__ */ jsx(Panel, {
+			id: "work",
+			children: /* @__PURE__ */ jsxs(Root, {
+				splitter: inner,
+				children: [
+					t8,
+					t10,
+					t12
+				]
+			})
+		});
+		$[23] = inner;
+		$[24] = t10;
+		$[25] = t12;
+		$[26] = t8;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== outer || $[29] !== t13 || $[30] !== t4 || $[31] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(Root, {
+			splitter: outer,
+			children: [
+				t4,
+				t6,
+				t13
+			]
+		});
+		$[28] = outer;
+		$[29] = t13;
+		$[30] = t4;
+		$[31] = t6;
+		$[32] = t14;
+	} else t14 = $[32];
+	return t14;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nfunction pane(title: string, text: string): ReactElement {\n  return (\n    <ScrollArea.Root inset=\"md\">\n      <ScrollArea.Viewport aria-label={title}>\n        <ScrollArea.Content>\n          <Stack gap=\"xs\">\n            <Text weight=\"semibold\">{title}</Text>\n            <Text size=\"sm\" tone=\"muted\">\n              {text}\n            </Text>\n          </Stack>\n        </ScrollArea.Content>\n      </ScrollArea.Viewport>\n      <ScrollArea.Scrollbar />\n    </ScrollArea.Root>\n  );\n}\n\nexport function Nested(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const outer = Splitter.useSplitter({\n    defaultSize: [25, 75],\n    panels: [{ id: \"project\", minSize: 15 }, { id: \"work\" }],\n  });\n  const inner = Splitter.useSplitter({\n    defaultSize: [65, 35],\n    orientation: \"vertical\",\n    panels: [{ id: \"editor\" }, { id: \"output\", minSize: 20 }],\n  });\n\n  return (\n    <Splitter.Root splitter={outer}>\n      <Splitter.Panel id=\"project\">\n        {pane(t(\"nested.project\"), t(\"nested.projectText\"))}\n      </Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"project:work\" label={t(\"nested.resizeProject\")} />\n      <Splitter.Panel id=\"work\">\n        <Splitter.Root splitter={inner}>\n          <Splitter.Panel id=\"editor\">\n            {pane(t(\"nested.editor\"), t(\"nested.editorText\"))}\n          </Splitter.Panel>\n          <Splitter.ResizeTrigger id=\"editor:output\" label={t(\"nested.resizeOutput\")} />\n          <Splitter.Panel id=\"output\">\n            {pane(t(\"nested.output\"), t(\"nested.outputText\"))}\n          </Splitter.Panel>\n        </Splitter.Root>\n      </Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/notes.example.tsx
+var notes_example_exports = /* @__PURE__ */ __exportAll({
+	Notes: () => Notes,
+	source: () => source$1
+});
+const NOTES = [
+	"launch",
+	"hiring",
+	"budget",
+	"offsite"
+];
+function Notes() {
+	const $ = c(51);
+	const { t } = useWords("splitter");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultSize: [30, 70],
+			panels: [{
+				collapsedSize: 0,
+				collapsible: true,
+				id: "notes",
+				maxSize: 50,
+				minSize: 20
+			}, {
+				id: "note",
+				minSize: 40
+			}]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const splitter = useSplitter(t0);
+	let t1;
+	if ($[1] !== splitter) {
+		t1 = splitter.isPanelExpanded("notes");
+		$[1] = splitter;
+		$[2] = t1;
+	} else t1 = $[2];
+	const shown = t1;
+	let t2;
+	if ($[3] !== t) {
+		t2 = NOTES.map((note) => /* @__PURE__ */ jsx(NavList.Item, { children: /* @__PURE__ */ jsxs(NavList.Link, {
+			"aria-current": note === "launch" ? "page" : void 0,
+			href: "#note",
+			children: [/* @__PURE__ */ jsx(FileTextIcon, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children: t(`notes.titles.${note}`) })]
+		}) }, note));
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(NavList.Root, {
+				size: "sm",
+				children: t2
+			}) })
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Panel, {
+			id: "notes",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "xs",
+				children: [t3, t4]
+			})
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("notes.resize");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "notes:note",
+			label: t6
+		});
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("notes.titles.launch");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("notes.list");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== shown || $[19] !== splitter) {
+		t10 = () => {
+			if (shown) splitter.collapsePanel("notes");
+			else splitter.expandPanel("notes");
+		};
+		$[18] = shown;
+		$[19] = splitter;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(PanelLeftIcon, {});
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== shown || $[23] !== t10 || $[24] !== t9) {
+		t12 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-expanded": shown,
+			"aria-label": t9,
+			onClick: t10,
+			size: "sm",
+			variant: "ghost",
+			children: t11
+		});
+		$[22] = shown;
+		$[23] = t10;
+		$[24] = t9;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t) {
+		t13 = t("notes.titles.launch");
+		$[26] = t;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			size: "sm",
+			children: t13
+		});
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t12 || $[31] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Group, {
+			gap: "sm",
+			children: [t12, t14]
+		});
+		$[30] = t12;
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t) {
+		t16 = t("notes.body");
+		$[33] = t;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t16
+		});
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t15 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t15, t17]
+		}) });
+		$[37] = t15;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18 || $[41] !== t8) {
+		t19 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t8,
+			children: t18
+		});
+		$[40] = t18;
+		$[41] = t8;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t19) {
+		t21 = /* @__PURE__ */ jsx(Panel, {
+			id: "note",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				children: [t19, t20]
+			})
+		});
+		$[44] = t19;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== splitter || $[47] !== t21 || $[48] !== t5 || $[49] !== t7) {
+		t22 = /* @__PURE__ */ jsxs(Root, {
+			splitter,
+			children: [
+				t5,
+				t7,
+				t21
+			]
+		});
+		$[46] = splitter;
+		$[47] = t21;
+		$[48] = t5;
+		$[49] = t7;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { FileTextIcon, PanelLeftIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Group, Stack } from \"@stealthscale/component-layout\";\nimport { NavList } from \"@stealthscale/component-navigation\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nconst NOTES = [\"launch\", \"hiring\", \"budget\", \"offsite\"] as const;\n\nexport function Notes(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const splitter = Splitter.useSplitter({\n    defaultSize: [30, 70],\n    panels: [\n      { collapsedSize: 0, collapsible: true, id: \"notes\", maxSize: 50, minSize: 20 },\n      { id: \"note\", minSize: 40 },\n    ],\n  });\n  const shown = splitter.isPanelExpanded(\"notes\");\n\n  return (\n    <Splitter.Root splitter={splitter}>\n      <Splitter.Panel id=\"notes\">\n        <ScrollArea.Root inset=\"xs\">\n          <ScrollArea.Viewport focusable={false}>\n            <ScrollArea.Content>\n              <NavList.Root size=\"sm\">\n                {NOTES.map((note) => (\n                  <NavList.Item key={note}>\n                    <NavList.Link\n                      aria-current={note === \"launch\" ? \"page\" : undefined}\n                      href=\"#note\"\n                    >\n                      <FileTextIcon aria-hidden />\n                      <span>{t(`notes.titles.${note}`)}</span>\n                    </NavList.Link>\n                  </NavList.Item>\n                ))}\n              </NavList.Root>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"notes:note\" label={t(\"notes.resize\")} />\n      <Splitter.Panel id=\"note\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"notes.titles.launch\")}>\n            <ScrollArea.Content>\n              <Stack gap=\"sm\">\n                <Group gap=\"sm\">\n                  <IconButton\n                    aria-expanded={shown}\n                    aria-label={t(\"notes.list\")}\n                    onClick={() => {\n                      if (shown) splitter.collapsePanel(\"notes\");\n                      else splitter.expandPanel(\"notes\");\n                    }}\n                    size=\"sm\"\n                    variant=\"ghost\"\n                  >\n                    <PanelLeftIcon />\n                  </IconButton>\n                  <Heading as=\"h3\" size=\"sm\">\n                    {t(\"notes.titles.launch\")}\n                  </Heading>\n                </Group>\n                <Text size=\"sm\">{t(\"notes.body\")}</Text>\n              </Stack>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/examples/query.example.tsx
+var query_example_exports = /* @__PURE__ */ __exportAll({
+	Query: () => Query,
+	source: () => source
+});
+const ROWS = [
+	"ada",
+	"grace",
+	"katherine",
+	"margaret"
+];
+function Query() {
+	const $ = c(49);
+	const { t } = useWords("splitter");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [40, 60];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			defaultSize: t0,
+			keyboardResizeBy: 5,
+			orientation: "vertical",
+			panels: [{
+				collapsedSize: 0,
+				collapsible: true,
+				id: "query",
+				minSize: 20
+			}, {
+				id: "results",
+				minSize: 30
+			}]
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const splitter = useSplitter(t1);
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("query.editor");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("query.editor");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: t3
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("query.statement");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Code, { children: t5 });
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t4 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [t4, t6]
+		}) });
+		$[12] = t4;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t2 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t2,
+			children: t7
+		});
+		$[15] = t2;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t10;
+	let t11;
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		t10 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "horizontal" });
+		t11 = /* @__PURE__ */ jsx(ScrollArea.Corner, {});
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t9;
+	} else {
+		t10 = $[18];
+		t11 = $[19];
+		t9 = $[20];
+	}
+	let t12;
+	if ($[21] !== t8) {
+		t12 = /* @__PURE__ */ jsx(Panel, {
+			id: "query",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				scrolls: "both",
+				children: [
+					t8,
+					t9,
+					t10,
+					t11
+				]
+			})
+		});
+		$[21] = t8;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t) {
+		t13 = t("query.resize");
+		$[23] = t;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t13) {
+		t14 = /* @__PURE__ */ jsx(ResizeTrigger, {
+			id: "query:results",
+			label: t13
+		});
+		$[25] = t13;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t) {
+		t15 = t("query.results");
+		$[27] = t;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t) {
+		t16 = t("query.results");
+		$[29] = t;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: t16
+		});
+		$[31] = t16;
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t) {
+		t18 = ROWS.map((row) => /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t(`query.rows.${row}`)
+		}, row));
+		$[33] = t;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t17 || $[36] !== t18) {
+		t19 = /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [t17, t18]
+		}) });
+		$[35] = t17;
+		$[36] = t18;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] !== t15 || $[39] !== t19) {
+		t20 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			"aria-label": t15,
+			children: t19
+		});
+		$[38] = t15;
+		$[39] = t19;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== t20) {
+		t22 = /* @__PURE__ */ jsx(Panel, {
+			id: "results",
+			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				inset: "md",
+				children: [t20, t21]
+			})
+		});
+		$[42] = t20;
+		$[43] = t22;
+	} else t22 = $[43];
+	let t23;
+	if ($[44] !== splitter || $[45] !== t12 || $[46] !== t14 || $[47] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Root, {
+			splitter,
+			children: [
+				t12,
+				t14,
+				t22
+			]
+		});
+		$[44] = splitter;
+		$[45] = t12;
+		$[46] = t14;
+		$[47] = t22;
+		$[48] = t23;
+	} else t23 = $[48];
+	return t23;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { Code, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Splitter } from \"@stealthscale/component-screen\";\n\nconst ROWS = [\"ada\", \"grace\", \"katherine\", \"margaret\"] as const;\n\nexport function Query(): ReactElement {\n  const { t } = useWords(\"splitter\");\n  const splitter = Splitter.useSplitter({\n    defaultSize: [40, 60],\n    keyboardResizeBy: 5,\n    orientation: \"vertical\",\n    panels: [\n      { collapsedSize: 0, collapsible: true, id: \"query\", minSize: 20 },\n      { id: \"results\", minSize: 30 },\n    ],\n  });\n\n  return (\n    <Splitter.Root splitter={splitter}>\n      <Splitter.Panel id=\"query\">\n        <ScrollArea.Root inset=\"md\" scrolls=\"both\">\n          <ScrollArea.Viewport aria-label={t(\"query.editor\")}>\n            <ScrollArea.Content>\n              <Stack gap=\"xs\">\n                <Text weight=\"semibold\">{t(\"query.editor\")}</Text>\n                <Code>{t(\"query.statement\")}</Code>\n              </Stack>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n          <ScrollArea.Scrollbar orientation=\"horizontal\" />\n          <ScrollArea.Corner />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n      <Splitter.ResizeTrigger id=\"query:results\" label={t(\"query.resize\")} />\n      <Splitter.Panel id=\"results\">\n        <ScrollArea.Root inset=\"md\">\n          <ScrollArea.Viewport aria-label={t(\"query.results\")}>\n            <ScrollArea.Content>\n              <Stack gap=\"xs\">\n                <Text weight=\"semibold\">{t(\"query.results\")}</Text>\n                {ROWS.map((row) => (\n                  <Text key={row} size=\"sm\">\n                    {t(`query.rows.${row}`)}\n                  </Text>\n                ))}\n              </Stack>\n            </ScrollArea.Content>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar />\n        </ScrollArea.Root>\n      </Splitter.Panel>\n    </Splitter.Root>\n  );\n}\n";
+//#endregion
+//#region src/splitter/splitter.specimen.tsx
+/**
+* Catalogue page for the splitter.
+*
+* @remarks
+*   `scenesOf` generates the palette scene from the basic example. Each cell stages focus on the
+*   trigger through the kit's `Focused`, because the palette colours a trigger only while the
+*   pointer is over it, while it has focus and while it drags. `Focused` targets the trigger,
+*   because a panel's scroll area takes a tab stop until it has measured its content, and would
+*   otherwise take the staged focus. The other scenes are hand-written
+*   and draw their example in a kit `Screen` 20rem tall, because a splitter fills its container.
+*   The words are keys under `splitter` in `locales/en/specimen/splitter.json`.
+*/
+/**
+* Hand-written scene for a list of notes that collapses beside the open note.
+*/
+const notes = {
+	about: "splitter.notes.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Notes, {})
+	}),
+	example: notes_example_exports,
+	title: "splitter.notes.title"
+};
+/**
+* Hand-written scene for a query over its results, in a column.
+*/
+const query = {
+	about: "splitter.query.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Query, {})
+	}),
+	example: query_example_exports,
+	title: "splitter.query.title"
+};
+/**
+* Hand-written scene for three panels with a trigger between each two.
+*/
+const mail = {
+	about: "splitter.mail.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Mail, {})
+	}),
+	example: mail_example_exports,
+	title: "splitter.mail.title"
+};
+/**
+* Hand-written scene for a splitter in a column inside a panel of a splitter in a row.
+*/
+const nested = {
+	about: "splitter.nested.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Nested, {})
+	}),
+	example: nested_example_exports,
+	title: "splitter.nested.title"
+};
+/**
+* Hand-written scene for sizes an application holds, with a reset.
+*/
+const controlled = {
+	about: "splitter.controlled.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Controlled, {})
+	}),
+	example: controlled_example_exports,
+	title: "splitter.controlled.title"
+};
+/**
+* Hand-written scene for a trigger disabled until a switch turns editing on.
+*/
+const locked = {
+	about: "splitter.locked.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Locked, {})
+	}),
+	example: locked_example_exports,
+	title: "splitter.locked.title"
+};
+var splitter_specimen_default = specimen({
+	about: "splitter.about",
+	id: "components/screen/splitter",
+	imports: "import { Splitter } from \"@stealthscale/component-screen\";",
+	scenes: [
+		notes,
+		query,
+		mail,
+		nested,
+		controlled,
+		locked,
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Focused, {
+				target: "[role=separator]",
+				children: /* @__PURE__ */ jsx(Basic, { ...props })
+			}) }),
+			example: basic_example_exports,
+			namespace: "splitter"
+		})
+	],
+	title: "splitter.title"
+});
+//#endregion
+export { controlled, splitter_specimen_default as default, locked, mail, nested, notes, query };