@stealthscale/component-collections 0.1.2 → 0.1.3

package/dist/pages/tree-view/tree-view.js

@@ -0,0 +1,1059 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as NodeRenameInput, c as Item, d as BranchText, f as BranchIndicator, i as Nodes, l as ItemText, m as BranchControl, n as Tree, o as NodeCheckbox, p as BranchIndentGuide, r as Root, rt as TreeCollection, s as Label, u as BranchTrigger } from "../../shared-DVn824MJ.js";
+import { t as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@stealthscale/component-actions";
+import { Matrix, Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, ChevronRightIcon, FileIcon, FileTextIcon, FolderIcon, FolderOpenIcon, LoaderCircleIcon, LockIcon, MinusIcon, SearchIcon, XIcon } from "lucide-react";
+import { Icon, Kbd, Text } from "@stealthscale/component-typography";
+import { Group, Stack } from "@stealthscale/component-layout";
+import { SearchInput } from "@stealthscale/component-forms";
+//#region src/tree-view/examples/docs.example.tsx
+var docs_example_exports = /* @__PURE__ */ __exportAll({
+	Docs: () => Docs,
+	source: () => source$6
+});
+const PAGES = new TreeCollection({
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: [
+			{
+				children: [
+					{ id: "install" },
+					{ id: "configure" },
+					{ id: "themes" }
+				],
+				id: "start"
+			},
+			{
+				children: [{
+					children: [{ id: "button" }, { id: "toggle-group" }],
+					id: "actions"
+				}, {
+					children: [{ id: "listbox" }, { id: "tree-view" }],
+					id: "collections"
+				}],
+				id: "components"
+			},
+			{ id: "changelog" }
+		],
+		id: "root"
+	}
+});
+function Docs() {
+	const $ = c(12);
+	const { t } = useWords("tree-view");
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["components", "collections"];
+		t1 = ["tree-view"];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("docs.label");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: t2 });
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(BranchIndentGuide, {});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, {
+			indentGuide: t4,
+			render: (t6) => {
+				const { node, nodeState } = t6;
+				return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [/* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }), /* @__PURE__ */ jsx(BranchText, { children: t(`docs.${node.id}`) })] }) : /* @__PURE__ */ jsx(Item, {
+					href: `#docs-${node.id}`,
+					children: /* @__PURE__ */ jsx(ItemText, { children: t(`docs.${node.id}`) })
+				});
+			}
+		}) });
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Root, {
+			collection: PAGES,
+			defaultExpandedValue: t0,
+			defaultSelectedValue: t1,
+			size: "sm",
+			children: [t3, t5]
+		});
+		$[9] = t3;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	return t6;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Page {\n  children?: Page[];\n  id: string;\n}\n\nconst PAGES = new TreeCollection<Page>({\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: [\n      { children: [{ id: \"install\" }, { id: \"configure\" }, { id: \"themes\" }], id: \"start\" },\n      {\n        children: [\n          { children: [{ id: \"button\" }, { id: \"toggle-group\" }], id: \"actions\" },\n          { children: [{ id: \"listbox\" }, { id: \"tree-view\" }], id: \"collections\" },\n        ],\n        id: \"components\",\n      },\n      { id: \"changelog\" },\n    ],\n    id: \"root\",\n  },\n});\n\nexport function Docs(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n\n  return (\n    <TreeView.Root\n      collection={PAGES}\n      defaultExpandedValue={[\"components\", \"collections\"]}\n      defaultSelectedValue={[\"tree-view\"]}\n      size=\"sm\"\n    >\n      <TreeView.Label>{t(\"docs.label\")}</TreeView.Label>\n      <TreeView.Tree>\n        <TreeView.Nodes\n          indentGuide={<TreeView.BranchIndentGuide />}\n          render={({ node, nodeState }: TreeView.NodeDetails<Page>) =>\n            nodeState.isBranch ? (\n              <TreeView.BranchControl>\n                <TreeView.BranchIndicator>\n                  <ChevronRightIcon />\n                </TreeView.BranchIndicator>\n                <TreeView.BranchText>{t(`docs.${node.id}`)}</TreeView.BranchText>\n              </TreeView.BranchControl>\n            ) : (\n              <TreeView.Item href={`#docs-${node.id}`}>\n                <TreeView.ItemText>{t(`docs.${node.id}`)}</TreeView.ItemText>\n              </TreeView.Item>\n            )\n          }\n        />\n      </TreeView.Tree>\n    </TreeView.Root>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/explorer.example.tsx
+var explorer_example_exports = /* @__PURE__ */ __exportAll({
+	Explorer: () => Explorer,
+	source: () => source$5
+});
+const FILES = new TreeCollection({
+	nodeToString: (node) => node.name,
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: [
+			{
+				children: [{
+					children: [{
+						id: "src/components/button.tsx",
+						name: "button.tsx"
+					}, {
+						id: "src/components/card.tsx",
+						name: "card.tsx"
+					}],
+					id: "src/components",
+					name: "components"
+				}, {
+					id: "src/index.ts",
+					name: "index.ts"
+				}],
+				id: "src",
+				name: "src"
+			},
+			{
+				id: "package.json",
+				name: "package.json"
+			},
+			{
+				id: "README.md",
+				name: "README.md"
+			}
+		],
+		id: "root",
+		name: ""
+	}
+});
+function Explorer(props) {
+	const $ = c(10);
+	const { t } = useWords("tree-view");
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["src", "src/components"];
+		t1 = ["src/components/card.tsx"];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("explorer.label");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: t2 });
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, { render: _temp$2 }) });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== props || $[8] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			collection: FILES,
+			defaultExpandedValue: t0,
+			defaultSelectedValue: t1,
+			...props,
+			children: [t3, t4]
+		});
+		$[7] = props;
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function _temp$2(t0) {
+	const { node, nodeState } = t0;
+	return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [
+		/* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }),
+		nodeState.expanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+		/* @__PURE__ */ jsx(BranchText, { children: node.name })
+	] }) : /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(FileIcon, {}), /* @__PURE__ */ jsx(ItemText, { children: node.name })] });
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface FileNode {\n  children?: FileNode[];\n  id: string;\n  name: string;\n}\n\nconst FILES = new TreeCollection<FileNode>({\n  nodeToString: (node): string => node.name,\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: [\n      {\n        children: [\n          {\n            children: [\n              { id: \"src/components/button.tsx\", name: \"button.tsx\" },\n              { id: \"src/components/card.tsx\", name: \"card.tsx\" },\n            ],\n            id: \"src/components\",\n            name: \"components\",\n          },\n          { id: \"src/index.ts\", name: \"index.ts\" },\n        ],\n        id: \"src\",\n        name: \"src\",\n      },\n      { id: \"package.json\", name: \"package.json\" },\n      { id: \"README.md\", name: \"README.md\" },\n    ],\n    id: \"root\",\n    name: \"\",\n  },\n});\n\nexport function Explorer(props: TreeView.RootProps): ReactElement {\n  const { t } = useWords(\"tree-view\");\n\n  return (\n    <TreeView.Root\n      collection={FILES}\n      defaultExpandedValue={[\"src\", \"src/components\"]}\n      defaultSelectedValue={[\"src/components/card.tsx\"]}\n      {...props}\n    >\n      <TreeView.Label>{t(\"explorer.label\")}</TreeView.Label>\n      <TreeView.Tree>\n        <TreeView.Nodes\n          render={({ node, nodeState }: TreeView.NodeDetails<FileNode>) =>\n            nodeState.isBranch ? (\n              <TreeView.BranchControl>\n                <TreeView.BranchIndicator>\n                  <ChevronRightIcon />\n                </TreeView.BranchIndicator>\n                {nodeState.expanded ? <FolderOpenIcon /> : <FolderIcon />}\n                <TreeView.BranchText>{node.name}</TreeView.BranchText>\n              </TreeView.BranchControl>\n            ) : (\n              <TreeView.Item>\n                <FileIcon />\n                <TreeView.ItemText>{node.name}</TreeView.ItemText>\n              </TreeView.Item>\n            )\n          }\n        />\n      </TreeView.Tree>\n    </TreeView.Root>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/lazy.example.tsx
+var lazy_example_exports = /* @__PURE__ */ __exportAll({
+	Lazy: () => Lazy,
+	source: () => source$4
+});
+const OFFICES = {
+	americas: ["new-york", "sao-paulo"],
+	asia: ["singapore", "tokyo"],
+	europe: [
+		"amsterdam",
+		"berlin",
+		"lisbon"
+	]
+};
+const REGIONS = new TreeCollection({
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: Object.entries(OFFICES).map(([id, cities]) => ({
+			childrenCount: cities.length,
+			id
+		})),
+		id: "root"
+	}
+});
+function load({ signal, valuePath }) {
+	return new Promise((resolve) => {
+		const timer = setTimeout(() => {
+			resolve((OFFICES[valuePath.at(-1) ?? ""] ?? []).map((id) => ({ id })));
+		}, 800);
+		signal.addEventListener("abort", () => {
+			clearTimeout(timer);
+		});
+	});
+}
+function Lazy() {
+	const $ = c(11);
+	const { t } = useWords("tree-view");
+	const [collection, setCollection] = useState(REGIONS);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (details) => {
+			setCollection(details.collection);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("lazy.label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Label, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, { render: (t4) => {
+			const { node, nodeState } = t4;
+			return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [/* @__PURE__ */ jsx(BranchIndicator, { children: nodeState.loading ? /* @__PURE__ */ jsx(Icon, {
+				as: LoaderCircleIcon,
+				motion: "spin"
+			}) : /* @__PURE__ */ jsx(ChevronRightIcon, {}) }), /* @__PURE__ */ jsx(BranchText, { children: t(`lazy.${node.id}`) })] }) : /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(ItemText, { children: t(`lazy.${node.id}`) }) });
+		} }) });
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== collection || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			collection,
+			loadChildren: load,
+			onLoadChildrenComplete: t0,
+			children: [t2, t3]
+		});
+		$[7] = collection;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronRightIcon, LoaderCircleIcon } from \"lucide-react\";\n\nimport { Icon } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Place {\n  children?: Place[];\n  childrenCount?: number;\n  id: string;\n}\n\nconst OFFICES: Readonly<Record<string, readonly string[]>> = {\n  americas: [\"new-york\", \"sao-paulo\"],\n  asia: [\"singapore\", \"tokyo\"],\n  europe: [\"amsterdam\", \"berlin\", \"lisbon\"],\n};\n\nconst REGIONS = new TreeCollection<Place>({\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: Object.entries(OFFICES).map(([id, cities]) => ({ childrenCount: cities.length, id })),\n    id: \"root\",\n  },\n});\n\nfunction load({\n  signal,\n  valuePath,\n}: {\n  signal: AbortSignal;\n  valuePath: string[];\n}): Promise<Place[]> {\n  return new Promise((resolve) => {\n    const timer = setTimeout(() => {\n      resolve((OFFICES[valuePath.at(-1) ?? \"\"] ?? []).map((id) => ({ id })));\n    }, 800);\n\n    signal.addEventListener(\"abort\", () => {\n      clearTimeout(timer);\n    });\n  });\n}\n\nexport function Lazy(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n  const [collection, setCollection] = useState(REGIONS);\n\n  return (\n    <TreeView.Root\n      collection={collection}\n      loadChildren={load}\n      onLoadChildrenComplete={(details: { collection: TreeCollection<Place> }) => {\n        setCollection(details.collection);\n      }}\n    >\n      <TreeView.Label>{t(\"lazy.label\")}</TreeView.Label>\n      <TreeView.Tree>\n        <TreeView.Nodes\n          render={({ node, nodeState }: TreeView.NodeDetails<Place>) =>\n            nodeState.isBranch ? (\n              <TreeView.BranchControl>\n                <TreeView.BranchIndicator>\n                  {nodeState.loading ? (\n                    <Icon as={LoaderCircleIcon} motion=\"spin\" />\n                  ) : (\n                    <ChevronRightIcon />\n                  )}\n                </TreeView.BranchIndicator>\n                <TreeView.BranchText>{t(`lazy.${node.id}`)}</TreeView.BranchText>\n              </TreeView.BranchControl>\n            ) : (\n              <TreeView.Item>\n                <TreeView.ItemText>{t(`lazy.${node.id}`)}</TreeView.ItemText>\n              </TreeView.Item>\n            )\n          }\n        />\n      </TreeView.Tree>\n    </TreeView.Root>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/outline.example.tsx
+var outline_example_exports = /* @__PURE__ */ __exportAll({
+	Outline: () => Outline,
+	source: () => source$3
+});
+const OUTLINE = new TreeCollection({
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: [
+			{
+				children: [{ id: "summary" }, { id: "goals" }],
+				id: "introduction"
+			},
+			{
+				children: [{ id: "survey" }, {
+					children: [{ id: "latency" }, { id: "errors" }],
+					id: "results"
+				}],
+				id: "findings"
+			},
+			{
+				children: [{ id: "raw-data" }],
+				disabled: true,
+				id: "appendix"
+			}
+		],
+		id: "root"
+	}
+});
+function Outline() {
+	const $ = c(28);
+	const { t } = useWords("tree-view");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["introduction"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [expanded, setExpanded] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			setExpanded(OUTLINE.getBranchValues());
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("outline.expand");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			onClick: t1,
+			size: "sm",
+			variant: "outline",
+			children: t2
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			setExpanded([]);
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("outline.collapse");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			onClick: t4,
+			size: "sm",
+			variant: "outline",
+			children: t5
+		});
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t3 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			children: [t3, t6]
+		});
+		$[11] = t3;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (details) => {
+			setExpanded(details.expandedValue);
+		};
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("outline.label");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Label, { children: t9 });
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t) {
+		t11 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, { render: (t12) => {
+			const { node, nodeState } = t12;
+			return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [
+				/* @__PURE__ */ jsx(BranchTrigger, { children: /* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) }),
+				/* @__PURE__ */ jsx(BranchText, { children: t(`outline.${node.id}`) }),
+				nodeState.disabled ? /* @__PURE__ */ jsx(LockIcon, {}) : null
+			] }) : /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(ItemText, { children: t(`outline.${node.id}`) }) });
+		} }) });
+		$[19] = t;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== expanded || $[22] !== t10 || $[23] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			collection: OUTLINE,
+			expandedValue: expanded,
+			expandOnClick: false,
+			onExpandedChange: t8,
+			children: [t10, t11]
+		});
+		$[21] = expanded;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12 || $[26] !== t7) {
+		t13 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t7, t12]
+		});
+		$[25] = t12;
+		$[26] = t7;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronRightIcon, LockIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Group, Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Section {\n  children?: Section[];\n  disabled?: boolean;\n  id: string;\n}\n\nconst OUTLINE = new TreeCollection<Section>({\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: [\n      { children: [{ id: \"summary\" }, { id: \"goals\" }], id: \"introduction\" },\n      {\n        children: [\n          { id: \"survey\" },\n          { children: [{ id: \"latency\" }, { id: \"errors\" }], id: \"results\" },\n        ],\n        id: \"findings\",\n      },\n      { children: [{ id: \"raw-data\" }], disabled: true, id: \"appendix\" },\n    ],\n    id: \"root\",\n  },\n});\n\nexport function Outline(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n  const [expanded, setExpanded] = useState([\"introduction\"]);\n\n  return (\n    <Stack gap=\"sm\">\n      <Group gap=\"xs\">\n        <Button\n          onClick={() => {\n            setExpanded(OUTLINE.getBranchValues());\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {t(\"outline.expand\")}\n        </Button>\n        <Button\n          onClick={() => {\n            setExpanded([]);\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {t(\"outline.collapse\")}\n        </Button>\n      </Group>\n      <TreeView.Root\n        collection={OUTLINE}\n        expandedValue={expanded}\n        expandOnClick={false}\n        onExpandedChange={(details) => {\n          setExpanded(details.expandedValue);\n        }}\n      >\n        <TreeView.Label>{t(\"outline.label\")}</TreeView.Label>\n        <TreeView.Tree>\n          <TreeView.Nodes\n            render={({ node, nodeState }: TreeView.NodeDetails<Section>) =>\n              nodeState.isBranch ? (\n                <TreeView.BranchControl>\n                  <TreeView.BranchTrigger>\n                    <TreeView.BranchIndicator>\n                      <ChevronRightIcon />\n                    </TreeView.BranchIndicator>\n                  </TreeView.BranchTrigger>\n                  <TreeView.BranchText>{t(`outline.${node.id}`)}</TreeView.BranchText>\n                  {nodeState.disabled ? <LockIcon /> : null}\n                </TreeView.BranchControl>\n              ) : (\n                <TreeView.Item>\n                  <TreeView.ItemText>{t(`outline.${node.id}`)}</TreeView.ItemText>\n                </TreeView.Item>\n              )\n            }\n          />\n        </TreeView.Tree>\n      </TreeView.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/permissions.example.tsx
+var permissions_example_exports = /* @__PURE__ */ __exportAll({
+	Permissions: () => Permissions,
+	source: () => source$2
+});
+const GROUPS = {
+	billing: [
+		"view-invoices",
+		"download-invoices",
+		"change-plan"
+	],
+	members: ["invite-members", "remove-members"],
+	settings: ["rename-workspace", "delete-workspace"]
+};
+const LEAVES = Object.values(GROUPS).flat();
+const PERMISSIONS = new TreeCollection({
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: Object.entries(GROUPS).map(([id, leaves]) => ({
+			children: leaves.map((leaf) => ({ id: leaf })),
+			id
+		})),
+		id: "root"
+	}
+});
+function Permissions() {
+	const $ = c(36);
+	const { t } = useWords("tree-view");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["view-invoices", "download-invoices"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [checked, setChecked] = useState(t0);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[1] !== checked || $[2] !== t) {
+		let t7;
+		if ($[11] !== checked) {
+			t7 = (leaf) => checked.includes(leaf);
+			$[11] = checked;
+			$[12] = t7;
+		} else t7 = $[12];
+		const granted = LEAVES.filter(t7).length;
+		T1 = Stack;
+		t5 = "sm";
+		let t8;
+		let t9;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = ["billing", "members"];
+			t9 = (details) => {
+				setChecked(details.checkedValue);
+			};
+			$[13] = t8;
+			$[14] = t9;
+		} else {
+			t8 = $[13];
+			t9 = $[14];
+		}
+		let t10;
+		if ($[15] !== t) {
+			t10 = t("permissions.label");
+			$[15] = t;
+			$[16] = t10;
+		} else t10 = $[16];
+		let t11;
+		if ($[17] !== t10) {
+			t11 = /* @__PURE__ */ jsx(Label, { children: t10 });
+			$[17] = t10;
+			$[18] = t11;
+		} else t11 = $[18];
+		let t12;
+		if ($[19] !== t) {
+			t12 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, { render: (t13) => {
+				const { node, nodeState } = t13;
+				const box = /* @__PURE__ */ jsx(NodeCheckbox, { children: nodeState.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) });
+				return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [
+					/* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }),
+					box,
+					/* @__PURE__ */ jsx(BranchText, { children: t(`permissions.${node.id}`) })
+				] }) : /* @__PURE__ */ jsxs(Item, { children: [box, /* @__PURE__ */ jsx(ItemText, { children: t(`permissions.${node.id}`) })] });
+			} }) });
+			$[19] = t;
+			$[20] = t12;
+		} else t12 = $[20];
+		if ($[21] !== checked || $[22] !== t11 || $[23] !== t12) {
+			t6 = /* @__PURE__ */ jsxs(Root, {
+				checkable: true,
+				checkedValue: checked,
+				collection: PERMISSIONS,
+				defaultExpandedValue: t8,
+				onCheckedChange: t9,
+				children: [t11, t12]
+			});
+			$[21] = checked;
+			$[22] = t11;
+			$[23] = t12;
+			$[24] = t6;
+		} else t6 = $[24];
+		T0 = Text;
+		t1 = "output";
+		t2 = "sm";
+		t3 = "muted";
+		t4 = t("permissions.count", {
+			count: granted,
+			total: LEAVES.length
+		});
+		$[1] = checked;
+		$[2] = t;
+		$[3] = T0;
+		$[4] = T1;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		T0 = $[3];
+		T1 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+	}
+	let t7;
+	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t3 || $[29] !== t4) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			as: t1,
+			size: t2,
+			tone: t3,
+			children: t4
+		});
+		$[25] = T0;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t7;
+	} else t7 = $[30];
+	let t8;
+	if ($[31] !== T1 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T1, {
+			gap: t5,
+			children: [t6, t7]
+		});
+		$[31] = T1;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	return t8;
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, ChevronRightIcon, MinusIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Permission {\n  children?: Permission[];\n  id: string;\n}\n\nconst GROUPS = {\n  billing: [\"view-invoices\", \"download-invoices\", \"change-plan\"],\n  members: [\"invite-members\", \"remove-members\"],\n  settings: [\"rename-workspace\", \"delete-workspace\"],\n};\n\nconst LEAVES = Object.values(GROUPS).flat();\n\nconst PERMISSIONS = new TreeCollection<Permission>({\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: Object.entries(GROUPS).map(([id, leaves]) => ({\n      children: leaves.map((leaf) => ({ id: leaf })),\n      id,\n    })),\n    id: \"root\",\n  },\n});\n\nexport function Permissions(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n  const [checked, setChecked] = useState([\"view-invoices\", \"download-invoices\"]);\n  const granted = LEAVES.filter((leaf) => checked.includes(leaf)).length;\n\n  return (\n    <Stack gap=\"sm\">\n      <TreeView.Root\n        checkable\n        checkedValue={checked}\n        collection={PERMISSIONS}\n        defaultExpandedValue={[\"billing\", \"members\"]}\n        onCheckedChange={(details) => {\n          setChecked(details.checkedValue);\n        }}\n      >\n        <TreeView.Label>{t(\"permissions.label\")}</TreeView.Label>\n        <TreeView.Tree>\n          <TreeView.Nodes\n            render={({ node, nodeState }: TreeView.NodeDetails<Permission>) => {\n              const box = (\n                <TreeView.NodeCheckbox>\n                  {nodeState.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n                </TreeView.NodeCheckbox>\n              );\n\n              return nodeState.isBranch ? (\n                <TreeView.BranchControl>\n                  <TreeView.BranchIndicator>\n                    <ChevronRightIcon />\n                  </TreeView.BranchIndicator>\n                  {box}\n                  <TreeView.BranchText>{t(`permissions.${node.id}`)}</TreeView.BranchText>\n                </TreeView.BranchControl>\n              ) : (\n                <TreeView.Item>\n                  {box}\n                  <TreeView.ItemText>{t(`permissions.${node.id}`)}</TreeView.ItemText>\n                </TreeView.Item>\n              );\n            }}\n          />\n        </TreeView.Tree>\n      </TreeView.Root>\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {t(\"permissions.count\", { count: granted, total: LEAVES.length })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/rename.example.tsx
+var rename_example_exports = /* @__PURE__ */ __exportAll({
+	Rename: () => Rename,
+	source: () => source$1
+});
+const DRAFTS = new TreeCollection({
+	nodeToString: (node) => node.name,
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: [{
+			children: [{
+				id: "brief",
+				name: "Brief.md"
+			}, {
+				id: "moodboard",
+				name: "Moodboard.png"
+			}],
+			id: "launch",
+			name: "Launch"
+		}, {
+			id: "notes",
+			name: "Notes.md"
+		}],
+		id: "root",
+		name: ""
+	}
+});
+function Rename() {
+	const $ = c(22);
+	const { t } = useWords("tree-view");
+	const [collection, setCollection] = useState(DRAFTS);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["launch"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== collection) {
+		t1 = (t2) => {
+			const { indexPath, label } = t2;
+			const node = collection.at(indexPath);
+			if (node !== void 0) setCollection(collection.replace(indexPath, {
+				...node,
+				name: label
+			}));
+		};
+		$[1] = collection;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("rename.label");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = /* @__PURE__ */ jsx(Tree, { children: /* @__PURE__ */ jsx(Nodes, { render: (t5) => {
+			const { node: node_0, nodeState } = t5;
+			return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [
+				/* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }),
+				/* @__PURE__ */ jsx(FolderIcon, {}),
+				/* @__PURE__ */ jsx(BranchText, { children: node_0.name }),
+				/* @__PURE__ */ jsx(NodeRenameInput, { label: t("rename.input") })
+			] }) : /* @__PURE__ */ jsxs(Item, { children: [
+				/* @__PURE__ */ jsx(FileIcon, {}),
+				/* @__PURE__ */ jsx(ItemText, { children: node_0.name }),
+				/* @__PURE__ */ jsx(NodeRenameInput, { label: t("rename.input") })
+			] });
+		} }) });
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== collection || $[10] !== t1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			canRename: _temp$1,
+			collection,
+			defaultExpandedValue: t0,
+			onRenameComplete: t1,
+			children: [t3, t4]
+		});
+		$[9] = collection;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t) {
+		t6 = t("rename.hint");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Kbd.Root, { children: "F2" });
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Text, {
+			size: "sm",
+			tone: "muted",
+			children: [
+				t6,
+				" ",
+				t7
+			]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t5 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t5, t8]
+		});
+		$[19] = t5;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	return t9;
+}
+function _temp$1() {
+	return true;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronRightIcon, FileIcon, FolderIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Kbd, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Entry {\n  children?: Entry[];\n  id: string;\n  name: string;\n}\n\nconst DRAFTS = new TreeCollection<Entry>({\n  nodeToString: (node): string => node.name,\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: [\n      {\n        children: [\n          { id: \"brief\", name: \"Brief.md\" },\n          { id: \"moodboard\", name: \"Moodboard.png\" },\n        ],\n        id: \"launch\",\n        name: \"Launch\",\n      },\n      { id: \"notes\", name: \"Notes.md\" },\n    ],\n    id: \"root\",\n    name: \"\",\n  },\n});\n\nexport function Rename(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n  const [collection, setCollection] = useState(DRAFTS);\n\n  return (\n    <Stack gap=\"sm\">\n      <TreeView.Root\n        canRename={() => true}\n        collection={collection}\n        defaultExpandedValue={[\"launch\"]}\n        onRenameComplete={({ indexPath, label }) => {\n          const node = collection.at(indexPath);\n\n          if (node !== undefined)\n            setCollection(collection.replace(indexPath, { ...node, name: label }));\n        }}\n      >\n        <TreeView.Label>{t(\"rename.label\")}</TreeView.Label>\n        <TreeView.Tree>\n          <TreeView.Nodes\n            render={({ node, nodeState }: TreeView.NodeDetails<Entry>) =>\n              nodeState.isBranch ? (\n                <TreeView.BranchControl>\n                  <TreeView.BranchIndicator>\n                    <ChevronRightIcon />\n                  </TreeView.BranchIndicator>\n                  <FolderIcon />\n                  <TreeView.BranchText>{node.name}</TreeView.BranchText>\n                  <TreeView.NodeRenameInput label={t(\"rename.input\")} />\n                </TreeView.BranchControl>\n              ) : (\n                <TreeView.Item>\n                  <FileIcon />\n                  <TreeView.ItemText>{node.name}</TreeView.ItemText>\n                  <TreeView.NodeRenameInput label={t(\"rename.input\")} />\n                </TreeView.Item>\n              )\n            }\n          />\n        </TreeView.Tree>\n      </TreeView.Root>\n      <Text size=\"sm\" tone=\"muted\">\n        {t(\"rename.hint\")} <Kbd.Root>F2</Kbd.Root>\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/examples/search.example.tsx
+var search_example_exports = /* @__PURE__ */ __exportAll({
+	Search: () => Search,
+	source: () => source
+});
+const DOCS = new TreeCollection({
+	nodeToString: (node) => node.name,
+	nodeToValue: (node) => node.id,
+	rootNode: {
+		children: [
+			{
+				children: [
+					{
+						id: "q3-plan",
+						name: "Q3 plan.md"
+					},
+					{
+						id: "q3-review",
+						name: "Q3 review.md"
+					},
+					{
+						id: "hiring",
+						name: "Hiring plan.md"
+					}
+				],
+				id: "planning",
+				name: "Planning"
+			},
+			{
+				children: [{
+					id: "invoice-2031",
+					name: "Invoice 2031.pdf"
+				}, {
+					id: "invoice-2032",
+					name: "Invoice 2032.pdf"
+				}],
+				id: "finance",
+				name: "Finance"
+			},
+			{
+				id: "handbook",
+				name: "Handbook.md"
+			}
+		],
+		id: "root",
+		name: ""
+	}
+});
+function Search() {
+	const $ = c(48);
+	const { t } = useWords("tree-view");
+	const [query, setQuery] = useState("");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [expanded, setExpanded] = useState(t0);
+	let T0;
+	let T1;
+	let empty;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let typed;
+	if ($[1] !== expanded || $[2] !== query || $[3] !== t) {
+		typed = query.trim().toLowerCase();
+		const shown = typed === "" ? DOCS : DOCS.filter((node) => node.name.toLowerCase().includes(typed));
+		empty = shown.getNodeChildren(shown.rootNode).length === 0;
+		T1 = Stack;
+		t3 = "sm";
+		let t5;
+		if ($[12] !== t) {
+			t5 = t("search.field");
+			$[12] = t;
+			$[13] = t5;
+		} else t5 = $[13];
+		let t6;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = /* @__PURE__ */ jsx(XIcon, {});
+			$[14] = t6;
+		} else t6 = $[14];
+		let t7;
+		if ($[15] !== t) {
+			t7 = t("search.clear");
+			$[15] = t;
+			$[16] = t7;
+		} else t7 = $[16];
+		let t8;
+		if ($[17] !== t) {
+			t8 = t("search.field");
+			$[17] = t;
+			$[18] = t8;
+		} else t8 = $[18];
+		let t9;
+		if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = /* @__PURE__ */ jsx(SearchIcon, {});
+			$[19] = t9;
+		} else t9 = $[19];
+		if ($[20] !== query || $[21] !== t5 || $[22] !== t7 || $[23] !== t8) {
+			t4 = /* @__PURE__ */ jsx(SearchInput, {
+				"aria-label": t5,
+				clearIndicator: t6,
+				clearLabel: t7,
+				onValueChange: setQuery,
+				placeholder: t8,
+				searchIndicator: t9,
+				value: query
+			});
+			$[20] = query;
+			$[21] = t5;
+			$[22] = t7;
+			$[23] = t8;
+			$[24] = t4;
+		} else t4 = $[24];
+		T0 = Root;
+		t1 = shown;
+		t2 = typed === "" ? expanded : shown.getBranchValues();
+		$[1] = expanded;
+		$[2] = query;
+		$[3] = t;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = empty;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = typed;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		empty = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		typed = $[11];
+	}
+	let t5;
+	if ($[25] !== typed) {
+		t5 = (details) => {
+			if (typed === "") setExpanded(details.expandedValue);
+		};
+		$[25] = typed;
+		$[26] = t5;
+	} else t5 = $[26];
+	let t6;
+	if ($[27] !== t) {
+		t6 = t("search.label");
+		$[27] = t;
+		$[28] = t6;
+	} else t6 = $[28];
+	let t7;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Nodes, { render: _temp });
+		$[29] = t7;
+	} else t7 = $[29];
+	let t8;
+	if ($[30] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Tree, {
+			"aria-label": t6,
+			children: t7
+		});
+		$[30] = t6;
+		$[31] = t8;
+	} else t8 = $[31];
+	let t9;
+	if ($[32] !== T0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t5 || $[36] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			collection: t1,
+			expandedValue: t2,
+			onExpandedChange: t5,
+			children: t8
+		});
+		$[32] = T0;
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t5;
+		$[36] = t8;
+		$[37] = t9;
+	} else t9 = $[37];
+	let t10;
+	if ($[38] !== empty || $[39] !== query || $[40] !== t) {
+		t10 = empty ? /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t("search.empty", { query })
+		}) : null;
+		$[38] = empty;
+		$[39] = query;
+		$[40] = t;
+		$[41] = t10;
+	} else t10 = $[41];
+	let t11;
+	if ($[42] !== T1 || $[43] !== t10 || $[44] !== t3 || $[45] !== t4 || $[46] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(T1, {
+			gap: t3,
+			children: [
+				t4,
+				t9,
+				t10
+			]
+		});
+		$[42] = T1;
+		$[43] = t10;
+		$[44] = t3;
+		$[45] = t4;
+		$[46] = t9;
+		$[47] = t11;
+	} else t11 = $[47];
+	return t11;
+}
+function _temp(t0) {
+	const { node: node_0, nodeState } = t0;
+	return nodeState.isBranch ? /* @__PURE__ */ jsxs(BranchControl, { children: [
+		/* @__PURE__ */ jsx(BranchIndicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }),
+		/* @__PURE__ */ jsx(FolderIcon, {}),
+		/* @__PURE__ */ jsx(BranchText, { children: node_0.name })
+	] }) : /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(FileTextIcon, {}), /* @__PURE__ */ jsx(ItemText, { children: node_0.name })] });
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronRightIcon, FileTextIcon, FolderIcon, SearchIcon, XIcon } from \"lucide-react\";\n\nimport { SearchInput } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TreeCollection, TreeView } from \"@stealthscale/component-collections\";\n\ninterface Doc {\n  children?: Doc[];\n  id: string;\n  name: string;\n}\n\nconst DOCS = new TreeCollection<Doc>({\n  nodeToString: (node): string => node.name,\n  nodeToValue: (node): string => node.id,\n  rootNode: {\n    children: [\n      {\n        children: [\n          { id: \"q3-plan\", name: \"Q3 plan.md\" },\n          { id: \"q3-review\", name: \"Q3 review.md\" },\n          { id: \"hiring\", name: \"Hiring plan.md\" },\n        ],\n        id: \"planning\",\n        name: \"Planning\",\n      },\n      {\n        children: [\n          { id: \"invoice-2031\", name: \"Invoice 2031.pdf\" },\n          { id: \"invoice-2032\", name: \"Invoice 2032.pdf\" },\n        ],\n        id: \"finance\",\n        name: \"Finance\",\n      },\n      { id: \"handbook\", name: \"Handbook.md\" },\n    ],\n    id: \"root\",\n    name: \"\",\n  },\n});\n\nexport function Search(): ReactElement {\n  const { t } = useWords(\"tree-view\");\n  const [query, setQuery] = useState(\"\");\n  const [expanded, setExpanded] = useState<string[]>([]);\n  const typed = query.trim().toLowerCase();\n  const shown =\n    typed === \"\" ? DOCS : DOCS.filter((node) => node.name.toLowerCase().includes(typed));\n  const empty = shown.getNodeChildren(shown.rootNode).length === 0;\n\n  return (\n    <Stack gap=\"sm\">\n      <SearchInput\n        aria-label={t(\"search.field\")}\n        clearIndicator={<XIcon />}\n        clearLabel={t(\"search.clear\")}\n        onValueChange={setQuery}\n        placeholder={t(\"search.field\")}\n        searchIndicator={<SearchIcon />}\n        value={query}\n      />\n      <TreeView.Root\n        collection={shown}\n        expandedValue={typed === \"\" ? expanded : shown.getBranchValues()}\n        onExpandedChange={(details) => {\n          if (typed === \"\") setExpanded(details.expandedValue);\n        }}\n      >\n        <TreeView.Tree aria-label={t(\"search.label\")}>\n          <TreeView.Nodes\n            render={({ node, nodeState }: TreeView.NodeDetails<Doc>) =>\n              nodeState.isBranch ? (\n                <TreeView.BranchControl>\n                  <TreeView.BranchIndicator>\n                    <ChevronRightIcon />\n                  </TreeView.BranchIndicator>\n                  <FolderIcon />\n                  <TreeView.BranchText>{node.name}</TreeView.BranchText>\n                </TreeView.BranchControl>\n              ) : (\n                <TreeView.Item>\n                  <FileTextIcon />\n                  <TreeView.ItemText>{node.name}</TreeView.ItemText>\n                </TreeView.Item>\n              )\n            }\n          />\n        </TreeView.Tree>\n      </TreeView.Root>\n      {empty ? (\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"search.empty\", { query })}\n        </Text>\n      ) : null}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/tree-view/tree-view.specimen.tsx
+/**
+* Selection modes of the selection scene.
+*/
+const MODES = ["single", "multiple"];
+/**
+* Selected rows per mode, so the multiple cell shows two.
+*/
+const SELECTED = {
+	multiple: ["src/components/button.tsx", "src/components/card.tsx"],
+	single: ["src/components/card.tsx"]
+};
+/**
+* Hand-written scene for each selection mode.
+*/
+const selection = {
+	about: "tree-view.selection.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "selectionMode",
+		of: MODES,
+		children: (mode) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Explorer, {
+				defaultSelectedValue: SELECTED[mode],
+				selectionMode: mode
+			})
+		})
+	}),
+	example: explorer_example_exports,
+	props: {
+		defaultSelectedValue: SELECTED.single,
+		selectionMode: "single"
+	},
+	title: "tree-view.selection.title"
+};
+/**
+* Builds a hand-written scene for one example in a sidebar's room.
+*
+* @param name - The key of the scene's words under `tree-view`.
+* @param example - The example module.
+* @param Drawn - The example's component.
+* @returns The scene.
+*/
+function roomed(name, example, Drawn) {
+	return {
+		about: `tree-view.${name}.about`,
+		draw: () => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Drawn, {})
+		}),
+		example,
+		title: `tree-view.${name}.title`
+	};
+}
+var tree_view_specimen_default = specimen({
+	about: "tree-view.about",
+	id: "components/collections/tree-view",
+	imports: "import { TreeCollection, TreeView } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				selected: { direction: "row" },
+				size: { direction: "row" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Explorer, { ...props })
+			}),
+			example: explorer_example_exports,
+			namespace: "tree-view",
+			order: [
+				"size",
+				"selected",
+				"palette",
+				"effect"
+			]
+		}),
+		selection,
+		roomed("permissions", permissions_example_exports, Permissions),
+		roomed("docs", docs_example_exports, Docs),
+		roomed("lazy", lazy_example_exports, Lazy),
+		roomed("search", search_example_exports, Search),
+		roomed("rename", rename_example_exports, Rename),
+		roomed("outline", outline_example_exports, Outline)
+	],
+	title: "tree-view.title"
+});
+//#endregion
+export { tree_view_specimen_default as default, selection };