@ecoma-io/loom 0.4.0 → 0.5.0

package/dist/packages/primitives/tree-view/src/TreeView.vue.d.ts

@@ -0,0 +1,99 @@
+import type { LabelOverrides, TreeViewLabels } from "../../../labels/src/index";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it.
+ * Everything else a tree renders is a node's own label, so the bag is one
+ * string — but it is a string a reader waits on.
+ */
+export declare const TREE_VIEW_LABELS: TreeViewLabels;
+/**
+ * One node of the tree. `children`'s shape is the contract for expansion: an
+ * array of any length (including empty — a known leaf) is static data the
+ * tree renders directly, while a node *without* one under a `loadChildren`
+ * tree is treated as a branch still to fetch.
+ */
+export interface TreeNode {
+    /** The value bound to `v-model` when this node is chosen. Unique within the tree. */
+    value: string | number;
+    /** The text shown on the row and matched by the typeahead. */
+    label: string;
+    /** This node's children. Their presence is what makes the row expandable. */
+    children?: TreeNode[];
+    /** Present but unchoosable: visible, arrow-reachable, refuses selection and expansion. */
+    disabled?: boolean;
+}
+/** Whether one node or several can be chosen at once. */
+export type TreeViewSelectionMode = "single" | "multiple";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The nodes, in the order they are shown, parents before children. */
+    nodes: TreeNode[];
+    /**
+     * The chosen node's `value` — or every chosen value, when `selectionMode`
+     * is "multiple". The union, not two generic shapes, for the same reason
+     * Combobox is: `v-model` needs one binding whose type does not depend on
+     * another prop's value, and a scalar/array mismatch is caught the same
+     * place the tree catches it — at the render.
+     */
+    modelValue?: string | number | Array<string | number> | undefined;
+    /** Whether one node or several can be chosen at once. */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * Fetch a branch's children the first time it is expanded. A node with no
+     * `children` of its own is treated as lazily loadable; one that resolves
+     * to an empty array becomes a leaf, and a rejected fetch leaves the node
+     * collapsed so the next activation retries rather than caching failure.
+     */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    /** Node values expanded on mount. After mount the tree owns the state. */
+    defaultExpanded?: Array<string | number>;
+    /**
+     * Unavailable: the rows dim, refuse selection and expansion, and drop out
+     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`
+     * read straight off the DOM.
+     */
+    disabled?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<TreeViewLabels> | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The nodes, in the order they are shown, parents before children. */
+    nodes: TreeNode[];
+    /**
+     * The chosen node's `value` — or every chosen value, when `selectionMode`
+     * is "multiple". The union, not two generic shapes, for the same reason
+     * Combobox is: `v-model` needs one binding whose type does not depend on
+     * another prop's value, and a scalar/array mismatch is caught the same
+     * place the tree catches it — at the render.
+     */
+    modelValue?: string | number | Array<string | number> | undefined;
+    /** Whether one node or several can be chosen at once. */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * Fetch a branch's children the first time it is expanded. A node with no
+     * `children` of its own is treated as lazily loadable; one that resolves
+     * to an empty array becomes a leaf, and a rejected fetch leaves the node
+     * collapsed so the next activation retries rather than caching failure.
+     */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    /** Node values expanded on mount. After mount the tree owns the state. */
+    defaultExpanded?: Array<string | number>;
+    /**
+     * Unavailable: the rows dim, refuse selection and expansion, and drop out
+     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`
+     * read straight off the DOM.
+     */
+    disabled?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<TreeViewLabels> | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | number | (string | number)[]) => any;
+}>, {
+    disabled: boolean | undefined;
+    modelValue: string | number | Array<string | number> | undefined;
+    labels: LabelOverrides<TreeViewLabels> | undefined;
+    selectionMode: TreeViewSelectionMode;
+    defaultExpanded: Array<string | number>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=TreeView.vue.d.ts.map

package/dist/packages/primitives/tree-view/src/TreeView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,310 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { TREE_VIEW_CONTEXT } from "./context.js";
+import TreeViewNode_default from "./TreeViewNode.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, nextTick, onScopeDispose, openBlock, provide, ref, renderList, watch } from "vue";
+//#region packages/primitives/tree-view/src/TreeView.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-multiselectable", "aria-disabled"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* Everything else a tree renders is a node's own label, so the bag is one
+* string — but it is a string a reader waits on.
+*/
+var TREE_VIEW_LABELS = { loading: "Loading…" };
+var TreeView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TreeView",
+	props: {
+		nodes: {},
+		modelValue: { default: void 0 },
+		selectionMode: { default: "single" },
+		loadChildren: {},
+		defaultExpanded: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/**
+		* A row as the keyboard sees it: one step of the depth-first walk of the
+		* visible tree, with everything the key map needs resolved once per change
+		* instead of per keystroke.
+		*/
+		const rootEl = ref(null);
+		const ancestorDisabled = useAncestorDisabled(() => rootEl.value);
+		const controlDisabled = computed(() => (props.disabled ?? false) || ancestorDisabled.value);
+		const text = useLabels("treeView", TREE_VIEW_LABELS, () => props.labels);
+		const expandedKeys = ref(new Set(props.defaultExpanded));
+		const loadingKeys = ref(/* @__PURE__ */ new Set());
+		const lazyChildren = ref(/* @__PURE__ */ new Map());
+		const focusValue = ref(null);
+		function toKeySet(model) {
+			if (model == null) return /* @__PURE__ */ new Set();
+			return new Set(Array.isArray(model) ? model : [model]);
+		}
+		const selectedKeys = ref(toKeySet(props.modelValue));
+		watch(() => props.modelValue, (next) => {
+			selectedKeys.value = toKeySet(next);
+		});
+		function childrenOf(node) {
+			if (Array.isArray(node.children)) return node.children;
+			return lazyChildren.value.get(node.value) ?? [];
+		}
+		/**
+		* A row can open when it has children to show: a non-empty `children` array,
+		* or a fetch already resolved beneath it — an empty resolution *is* the
+		* answer, and the row collapses back to a leaf rather than offering a branch
+		* that opens onto nothing.
+		*/
+		function isExpandable(node) {
+			if (Array.isArray(node.children)) return node.children.length > 0;
+			const loaded = lazyChildren.value.get(node.value);
+			if (loaded) return loaded.length > 0;
+			return props.loadChildren != null;
+		}
+		const flatRows = computed(() => {
+			const rows = [];
+			const walk = (nodes, level, parentId) => {
+				for (let index = 0; index < nodes.length; index++) {
+					const node = nodes[index];
+					if (!node) continue;
+					const expandable = isExpandable(node);
+					const expanded = expandable && expandedKeys.value.has(node.value);
+					rows.push({
+						value: node.value,
+						node,
+						level,
+						setsize: nodes.length,
+						posinset: index + 1,
+						parentId,
+						expandable,
+						expanded,
+						selected: selectedKeys.value.has(node.value),
+						busy: loadingKeys.value.has(node.value),
+						disabled: (node.disabled ?? false) || controlDisabled.value
+					});
+					if (expanded) walk(childrenOf(node), level + 1, node.value);
+				}
+			};
+			walk(props.nodes, 1, null);
+			return rows;
+		});
+		const rowByValue = computed(() => new Map(flatRows.value.map((row) => [row.value, row])));
+		const tabStopValue = computed(() => {
+			const focused = focusValue.value != null ? rowByValue.value.get(focusValue.value) : void 0;
+			if (focused && !focused.disabled) return focusValue.value;
+			return flatRows.value.find((row) => !row.disabled)?.value ?? null;
+		});
+		function stateFor(node) {
+			const row = rowByValue.value.get(node.value);
+			return {
+				expandable: row?.expandable ?? false,
+				expanded: row?.expanded ?? false,
+				selected: row?.selected ?? false,
+				busy: row?.busy ?? false,
+				disabled: row?.disabled ?? false,
+				focusable: !controlDisabled.value && row?.value === tabStopValue.value
+			};
+		}
+		async function expandRow(row) {
+			const value = row.node.value;
+			if (row.disabled || !row.expandable || expandedKeys.value.has(value) || loadingKeys.value.has(value)) return;
+			if (!Array.isArray(row.node.children) && props.loadChildren != null && !lazyChildren.value.has(value) && props.loadChildren) {
+				loadingKeys.value = new Set(loadingKeys.value).add(value);
+				try {
+					const children = await props.loadChildren(row.node);
+					const next = new Map(lazyChildren.value);
+					next.set(value, children);
+					lazyChildren.value = next;
+				} catch {
+					return;
+				} finally {
+					const settled = new Set(loadingKeys.value);
+					settled.delete(value);
+					loadingKeys.value = settled;
+				}
+			}
+			expandedKeys.value = new Set(expandedKeys.value).add(value);
+		}
+		function collapseRow(value) {
+			const next = new Set(expandedKeys.value);
+			next.delete(value);
+			expandedKeys.value = next;
+		}
+		function selectRow(node) {
+			if (controlDisabled.value || node.disabled) return;
+			if (props.selectionMode === "multiple") {
+				const next = new Set(selectedKeys.value);
+				if (next.has(node.value)) next.delete(node.value);
+				else next.add(node.value);
+				selectedKeys.value = next;
+				emit("update:modelValue", [...next]);
+				return;
+			}
+			selectedKeys.value = /* @__PURE__ */ new Set([node.value]);
+			emit("update:modelValue", node.value);
+		}
+		function rowElement(value) {
+			const root = rootEl.value;
+			if (!root) return null;
+			return root.querySelector(`[data-tree-value="${CSS.escape(String(value))}"]`);
+		}
+		function focusRow(row) {
+			if (!row) return;
+			focusValue.value = row.node.value;
+			nextTick(() => {
+				rowElement(row.value)?.focus();
+			});
+		}
+		function onRowFocus(node) {
+			focusValue.value = node.value;
+		}
+		function onRowActivate(node) {
+			const row = rowByValue.value.get(node.value);
+			if (!row || controlDisabled.value) return;
+			focusRow(row);
+			selectRow(node);
+		}
+		function onChevronActivate(node) {
+			const row = rowByValue.value.get(node.value);
+			if (!row || controlDisabled.value || row.disabled) return;
+			focusRow(row);
+			if (row.expanded) collapseRow(node.value);
+			else expandRow(row);
+		}
+		function currentRowIndex() {
+			if (focusValue.value == null) return -1;
+			return flatRows.value.findIndex((row) => row.value === focusValue.value);
+		}
+		const TYPEAHEAD_RESET_MS = 500;
+		let typeaheadBuffer = "";
+		let typeaheadTimer;
+		function handleTypeahead(event) {
+			if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (flatRows.value.length === 0) return;
+			const char = event.key.toLowerCase();
+			if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;
+			const query = typeaheadBuffer;
+			const start = currentRowIndex() + 1;
+			for (let step = 0; step < flatRows.value.length; step++) {
+				const row = flatRows.value[(start + step) % flatRows.value.length];
+				if (row && !row.disabled && row.node.label.toLowerCase().startsWith(query)) {
+					focusRow(row);
+					break;
+				}
+			}
+			event.preventDefault();
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+				typeaheadTimer = void 0;
+			}, TYPEAHEAD_RESET_MS);
+		}
+		onScopeDispose(() => {
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+		});
+		/**
+		* One keydown on the root, reached from every row by bubbling: the key map is
+		* written once against the flat visible walk instead of duplicated per row.
+		* Disabled rows stay in the arrow walk — present and reachable, per the APG —
+		* but Enter, Space and the disclosure keys refuse them.
+		*/
+		function onKeydown(event) {
+			if (controlDisabled.value) return;
+			const rows = flatRows.value;
+			if (rows.length === 0) return;
+			const index = currentRowIndex();
+			const row = index >= 0 ? rows[index] : void 0;
+			switch (event.key) {
+				case "ArrowDown": {
+					const next = rows[index + 1];
+					if (next) focusRow(next);
+					break;
+				}
+				case "ArrowUp": {
+					const previous = index > 0 ? rows[index - 1] : void 0;
+					if (previous) focusRow(previous);
+					break;
+				}
+				case "Home":
+					focusRow(rows[0]);
+					break;
+				case "End":
+					focusRow(rows[rows.length - 1]);
+					break;
+				case "ArrowRight":
+					if (!row) break;
+					if (row.disabled) break;
+					if (row.expandable && !row.expanded) {
+						expandRow(row);
+						break;
+					}
+					if (row.expanded) {
+						const child = rows[index + 1];
+						if (child && child.level === row.level + 1) focusRow(child);
+					}
+					break;
+				case "ArrowLeft":
+					if (!row) break;
+					if (row.disabled) break;
+					if (row.expandable && row.expanded) {
+						collapseRow(row.value);
+						break;
+					}
+					if (row.parentId != null) {
+						const parent = rowByValue.value.get(row.parentId);
+						if (parent) focusRow(parent);
+					}
+					break;
+				case "Enter":
+				case " ":
+					if (row) selectRow(row.node);
+					break;
+				default:
+					handleTypeahead(event);
+					return;
+			}
+			event.preventDefault();
+		}
+		provide(TREE_VIEW_CONTEXT, {
+			stateFor,
+			childrenOf,
+			loadingText: computed(() => text.value.loading),
+			onRowFocus,
+			onRowActivate,
+			onChevronActivate
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				role: "tree",
+				"aria-multiselectable": __props.selectionMode === "multiple" ? "true" : void 0,
+				"aria-disabled": controlDisabled.value ? "true" : void 0,
+				class: "m-0 list-none select-none p-0 text-sm text-foreground",
+				onKeydown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes, (node, index) => {
+				return openBlock(), createBlock(TreeViewNode_default, {
+					key: node.value,
+					node,
+					level: 1,
+					setsize: __props.nodes.length,
+					posinset: index + 1
+				}, null, 8, [
+					"node",
+					"setsize",
+					"posinset"
+				]);
+			}), 128))], 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TREE_VIEW_LABELS, TreeView_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TreeView.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/tree-view/src/TreeView.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeView.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOverrides, TreeViewLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Everything else a tree renders is a node's own label, so the bag is one\n * string — but it is a string a reader waits on.\n */\nexport const TREE_VIEW_LABELS: TreeViewLabels = {\n  loading: \"Loading…\",\n};\n\n/**\n * One node of the tree. `children`'s shape is the contract for expansion: an\n * array of any length (including empty — a known leaf) is static data the\n * tree renders directly, while a node *without* one under a `loadChildren`\n * tree is treated as a branch still to fetch.\n */\nexport interface TreeNode {\n  /** The value bound to `v-model` when this node is chosen. Unique within the tree. */\n  value: string | number;\n  /** The text shown on the row and matched by the typeahead. */\n  label: string;\n  /** This node's children. Their presence is what makes the row expandable. */\n  children?: TreeNode[];\n  /** Present but unchoosable: visible, arrow-reachable, refuses selection and expansion. */\n  disabled?: boolean;\n}\n\n/** Whether one node or several can be chosen at once. */\nexport type TreeViewSelectionMode = \"single\" | \"multiple\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onScopeDispose, provide, ref, watch } from \"vue\";\nimport { useAncestorDisabled, useLabels } from \"@ecoma-io/loom-labels\";\nimport { TREE_VIEW_CONTEXT, type TreeViewContext, type TreeViewNodeState } from \"./context\";\nimport TreeViewNode from \"./TreeViewNode.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The nodes, in the order they are shown, parents before children. */\n    nodes: TreeNode[];\n    /**\n     * The chosen node's `value` — or every chosen value, when `selectionMode`\n     * is \"multiple\". The union, not two generic shapes, for the same reason\n     * Combobox is: `v-model` needs one binding whose type does not depend on\n     * another prop's value, and a scalar/array mismatch is caught the same\n     * place the tree catches it — at the render.\n     */\n    modelValue?: string | number | Array<string | number> | undefined;\n    /** Whether one node or several can be chosen at once. */\n    selectionMode?: TreeViewSelectionMode;\n    /**\n     * Fetch a branch's children the first time it is expanded. A node with no\n     * `children` of its own is treated as lazily loadable; one that resolves\n     * to an empty array becomes a leaf, and a rejected fetch leaves the node\n     * collapsed so the next activation retries rather than caching failure.\n     */\n    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;\n    /** Node values expanded on mount. After mount the tree owns the state. */\n    defaultExpanded?: Array<string | number>;\n    /**\n     * Unavailable: the rows dim, refuse selection and expansion, and drop out\n     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`\n     * read straight off the DOM.\n     */\n    disabled?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<TreeViewLabels> | undefined;\n  }>(),\n  {\n    modelValue: undefined,\n    selectionMode: \"single\",\n    defaultExpanded: () => [],\n    disabled: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen node's `value` — or the whole chosen list, when `selectionMode` is \"multiple\". */\n  \"update:modelValue\": [value: string | number | Array<string | number>];\n}>();\n\n/**\n * A row as the keyboard sees it: one step of the depth-first walk of the\n * visible tree, with everything the key map needs resolved once per change\n * instead of per keystroke.\n */\ninterface FlatRow {\n  value: string | number;\n  node: TreeNode;\n  level: number;\n  setsize: number;\n  posinset: number;\n  parentId: string | number | null;\n  expandable: boolean;\n  expanded: boolean;\n  selected: boolean;\n  busy: boolean;\n  disabled: boolean;\n}\n\nconst rootEl = ref<HTMLUListElement | null>(null);\n\nconst ancestorDisabled = useAncestorDisabled(() => rootEl.value);\nconst controlDisabled = computed(() => (props.disabled ?? false) || ancestorDisabled.value);\n\nconst text = useLabels(\"treeView\", TREE_VIEW_LABELS, () => props.labels);\n\n// Seeded once from `defaultExpanded`, then the tree owns it — a prop the user\n// edits after mount silently losing their edits is worse than a seed.\nconst expandedKeys = ref(new Set<string | number>(props.defaultExpanded));\nconst loadingKeys = ref(new Set<string | number>());\nconst lazyChildren = ref(new Map<string | number, TreeNode[]>());\nconst focusValue = ref<string | number | null>(null);\n\nfunction toKeySet(\n  model: string | number | Array<string | number> | undefined,\n): Set<string | number> {\n  if (model == null) return new Set();\n  return new Set(Array.isArray(model) ? model : [model]);\n}\n\n// A mirror rather than a read-through, so the tree works uncontrolled (`v-model`\n// absent, `modelValue` never supplied) exactly as it does controlled — the same\n// contract Combobox keeps.\nconst selectedKeys = ref(toKeySet(props.modelValue));\nwatch(\n  () => props.modelValue,\n  (next) => {\n    selectedKeys.value = toKeySet(next);\n  },\n);\n\nfunction childrenOf(node: TreeNode): TreeNode[] {\n  if (Array.isArray(node.children)) return node.children;\n  return lazyChildren.value.get(node.value) ?? [];\n}\n\n/**\n * A row can open when it has children to show: a non-empty `children` array,\n * or a fetch already resolved beneath it — an empty resolution *is* the\n * answer, and the row collapses back to a leaf rather than offering a branch\n * that opens onto nothing.\n */\nfunction isExpandable(node: TreeNode): boolean {\n  if (Array.isArray(node.children)) return node.children.length > 0;\n  const loaded = lazyChildren.value.get(node.value);\n  if (loaded) return loaded.length > 0;\n  return props.loadChildren != null;\n}\n\nconst flatRows = computed<FlatRow[]>(() => {\n  const rows: FlatRow[] = [];\n  const walk = (nodes: TreeNode[], level: number, parentId: string | number | null): void => {\n    for (let index = 0; index < nodes.length; index++) {\n      const node = nodes[index];\n      if (!node) continue;\n      const expandable = isExpandable(node);\n      const expanded = expandable && expandedKeys.value.has(node.value);\n      rows.push({\n        value: node.value,\n        node,\n        level,\n        setsize: nodes.length,\n        posinset: index + 1,\n        parentId,\n        expandable,\n        expanded,\n        selected: selectedKeys.value.has(node.value),\n        busy: loadingKeys.value.has(node.value),\n        disabled: (node.disabled ?? false) || controlDisabled.value,\n      });\n      if (expanded) walk(childrenOf(node), level + 1, node.value);\n    }\n  };\n  walk(props.nodes, 1, null);\n  return rows;\n});\n\nconst rowByValue = computed(() => new Map(flatRows.value.map((row) => [row.value, row])));\n\n// The roving tab stop: wherever the reader last was, or — before the first\n// arrow key — the first row a Tab is allowed to land on. A disabled row is\n// reachable from inside the tree but never *entered* from outside it.\nconst tabStopValue = computed<string | number | null>(() => {\n  // The stop answers \"where Tab would land\", not \"where the reader is\": the\n  // arrows deliberately rest on disabled rows, but entering the tree from\n  // outside must land on the first enabled one.\n  const focused = focusValue.value != null ? rowByValue.value.get(focusValue.value) : undefined;\n  if (focused && !focused.disabled) return focusValue.value;\n  const firstEnabled = flatRows.value.find((row) => !row.disabled);\n  return firstEnabled?.value ?? null;\n});\n\nfunction stateFor(node: TreeNode): TreeViewNodeState {\n  const row = rowByValue.value.get(node.value);\n  return {\n    expandable: row?.expandable ?? false,\n    expanded: row?.expanded ?? false,\n    selected: row?.selected ?? false,\n    busy: row?.busy ?? false,\n    disabled: row?.disabled ?? false,\n    focusable: !controlDisabled.value && row?.value === tabStopValue.value,\n  };\n}\n\nasync function expandRow(row: FlatRow): Promise<void> {\n  const value = row.node.value;\n  if (\n    row.disabled ||\n    !row.expandable ||\n    expandedKeys.value.has(value) ||\n    loadingKeys.value.has(value)\n  ) {\n    return;\n  }\n  const isLazy =\n    !Array.isArray(row.node.children) &&\n    props.loadChildren != null &&\n    !lazyChildren.value.has(value);\n  if (isLazy && props.loadChildren) {\n    loadingKeys.value = new Set(loadingKeys.value).add(value);\n    try {\n      const children = await props.loadChildren(row.node);\n      const next = new Map(lazyChildren.value);\n      next.set(value, children);\n      lazyChildren.value = next;\n    } catch {\n      // The fetch failed: leave the row collapsed and still expandable, so\n      // the next activation retries rather than caching a broken branch.\n      return;\n    } finally {\n      const settled = new Set(loadingKeys.value);\n      settled.delete(value);\n      loadingKeys.value = settled;\n    }\n  }\n  expandedKeys.value = new Set(expandedKeys.value).add(value);\n}\n\nfunction collapseRow(value: string | number): void {\n  const next = new Set(expandedKeys.value);\n  next.delete(value);\n  expandedKeys.value = next;\n}\n\nfunction selectRow(node: TreeNode): void {\n  if (controlDisabled.value || node.disabled) return;\n  if (props.selectionMode === \"multiple\") {\n    const next = new Set(selectedKeys.value);\n    if (next.has(node.value)) next.delete(node.value);\n    else next.add(node.value);\n    selectedKeys.value = next;\n    emit(\"update:modelValue\", [...next]);\n    return;\n  }\n  selectedKeys.value = new Set([node.value]);\n  emit(\"update:modelValue\", node.value);\n}\n\nfunction rowElement(value: string | number): HTMLElement | null {\n  const root = rootEl.value;\n  if (!root) return null;\n  return root.querySelector<HTMLElement>(`[data-tree-value=\"${CSS.escape(String(value))}\"]`);\n}\n\nfunction focusRow(row: FlatRow | undefined): void {\n  if (!row) return;\n  focusValue.value = row.node.value;\n  void nextTick(() => {\n    rowElement(row.value)?.focus();\n  });\n}\n\nfunction onRowFocus(node: TreeNode): void {\n  focusValue.value = node.value;\n}\n\nfunction onRowActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value) return;\n  focusRow(row);\n  selectRow(node);\n}\n\nfunction onChevronActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value || row.disabled) return;\n  focusRow(row);\n  if (row.expanded) collapseRow(node.value);\n  else void expandRow(row);\n}\n\nfunction currentRowIndex(): number {\n  if (focusValue.value == null) return -1;\n  return flatRows.value.findIndex((row) => row.value === focusValue.value);\n}\n\n/*\n * The typeahead. APG trees match a prefix of the row's label, starting after\n * the current row and wrapping; the same character typed again cycles to that\n * character's next match rather than extending a prefix to itself. The buffer\n * is 500 ms, and the timer is released with the scope so a tree torn down\n * mid-typeahead leaves nothing pending.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction handleTypeahead(event: KeyboardEvent): void {\n  if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return;\n  if (flatRows.value.length === 0) return;\n  const char = event.key.toLowerCase();\n  // Repeat detection reads the buffer's LAST character: a multi-character\n  // prefix must survive a repeated final character so the walk cycles to\n  // the next match instead of extending the prefix to a non-match.\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  const query = typeaheadBuffer;\n  const start = currentRowIndex() + 1;\n  for (let step = 0; step < flatRows.value.length; step++) {\n    const row = flatRows.value[(start + step) % flatRows.value.length];\n    // Typeahead is a jump made from outside the walk, like the entry tab\n    // stop: it lands on a row the reader can act on. The arrows remain the\n    // way to deliberately rest on a disabled row.\n    if (row && !row.disabled && row.node.label.toLowerCase().startsWith(query)) {\n      focusRow(row);\n      break;\n    }\n  }\n  event.preventDefault();\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonScopeDispose(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * One keydown on the root, reached from every row by bubbling: the key map is\n * written once against the flat visible walk instead of duplicated per row.\n * Disabled rows stay in the arrow walk — present and reachable, per the APG —\n * but Enter, Space and the disclosure keys refuse them.\n */\nfunction onKeydown(event: KeyboardEvent): void {\n  if (controlDisabled.value) return;\n  const rows = flatRows.value;\n  if (rows.length === 0) return;\n  const index = currentRowIndex();\n  const row = index >= 0 ? rows[index] : undefined;\n\n  switch (event.key) {\n    case \"ArrowDown\": {\n      const next = rows[index + 1];\n      if (next) focusRow(next);\n      break;\n    }\n    case \"ArrowUp\": {\n      const previous = index > 0 ? rows[index - 1] : undefined;\n      if (previous) focusRow(previous);\n      break;\n    }\n    case \"Home\":\n      focusRow(rows[0]);\n      break;\n    case \"End\":\n      focusRow(rows[rows.length - 1]);\n      break;\n    case \"ArrowRight\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && !row.expanded) {\n        void expandRow(row);\n        break;\n      }\n      if (row.expanded) {\n        const child = rows[index + 1];\n        if (child && child.level === row.level + 1) focusRow(child);\n      }\n      break;\n    }\n    case \"ArrowLeft\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && row.expanded) {\n        collapseRow(row.value);\n        break;\n      }\n      if (row.parentId != null) {\n        const parent = rowByValue.value.get(row.parentId);\n        if (parent) focusRow(parent);\n      }\n      break;\n    }\n    case \"Enter\":\n    case \" \":\n      if (row) selectRow(row.node);\n      break;\n    default:\n      handleTypeahead(event);\n      return;\n  }\n  event.preventDefault();\n}\n\nprovide(TREE_VIEW_CONTEXT, {\n  stateFor,\n  childrenOf,\n  loadingText: computed(() => text.value.loading),\n  onRowFocus,\n  onRowActivate,\n  onChevronActivate,\n} satisfies TreeViewContext);\n</script>\n\n<!--\n  The tree is a plain `<ul>`, so the caller's `aria-label`, `aria-labelledby`\n  and `id` fall through to it untouched — naming the tree is naming the\n  element, exactly as the APG example does. Rows render one tab stop at a\n  time (roving tabindex); the keydown above is the only keyboard listener.\n-->\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the container is deliberately not focusable: focus roves across the rows (APG tree view), so exactly one row holds the tab stop and the `<ul>` itself never takes one. -->\n  <ul\n    ref=\"rootEl\"\n    role=\"tree\"\n    :aria-multiselectable=\"selectionMode === 'multiple' ? 'true' : undefined\"\n    :aria-disabled=\"controlDisabled ? 'true' : undefined\"\n    class=\"m-0 list-none select-none p-0 text-sm text-foreground\"\n    @keydown=\"onKeydown\"\n  >\n    <TreeViewNode\n      v-for=\"(node, index) in nodes\"\n      :key=\"node.value\"\n      :node=\"node\"\n      :level=\"1\"\n      :setsize=\"nodes.length\"\n      :posinset=\"index + 1\"\n    />\n  </ul>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAQA,IAAa,mBAAmC,EAC9C,SAAS,WACX;;;;;;;;;;;;;;;;;EA6BA,MAAM,QAAQ;EAyCd,MAAM,OAAO;;;;;;EAwBb,MAAM,SAAS,IAA6B,IAAI;EAEhD,MAAM,mBAAmB,0BAA0B,OAAO,KAAK;EAC/D,MAAM,kBAAkB,gBAAgB,MAAM,YAAY,UAAU,iBAAiB,KAAK;EAE1F,MAAM,OAAO,UAAU,YAAY,wBAAwB,MAAM,MAAM;EAIvE,MAAM,eAAe,IAAI,IAAI,IAAqB,MAAM,eAAe,CAAC;EACxE,MAAM,cAAc,oBAAI,IAAI,IAAqB,CAAC;EAClD,MAAM,eAAe,oBAAI,IAAI,IAAiC,CAAC;EAC/D,MAAM,aAAa,IAA4B,IAAI;EAEnD,SAAS,SACP,OACsB;GACtB,IAAI,SAAS,MAAM,uBAAO,IAAI,IAAI;GAClC,OAAO,IAAI,IAAI,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;EACvD;EAKA,MAAM,eAAe,IAAI,SAAS,MAAM,UAAU,CAAC;EACnD,YACQ,MAAM,aACX,SAAS;GACR,aAAa,QAAQ,SAAS,IAAI;EACpC,CACF;EAEA,SAAS,WAAW,MAA4B;GAC9C,IAAI,MAAM,QAAQ,KAAK,QAAQ,GAAG,OAAO,KAAK;GAC9C,OAAO,aAAa,MAAM,IAAI,KAAK,KAAK,KAAK,CAAC;EAChD;;;;;;;EAQA,SAAS,aAAa,MAAyB;GAC7C,IAAI,MAAM,QAAQ,KAAK,QAAQ,GAAG,OAAO,KAAK,SAAS,SAAS;GAChE,MAAM,SAAS,aAAa,MAAM,IAAI,KAAK,KAAK;GAChD,IAAI,QAAQ,OAAO,OAAO,SAAS;GACnC,OAAO,MAAM,gBAAgB;EAC/B;EAEA,MAAM,WAAW,eAA0B;GACzC,MAAM,OAAkB,CAAC;GACzB,MAAM,QAAQ,OAAmB,OAAe,aAA2C;IACzF,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS;KACjD,MAAM,OAAO,MAAM;KACnB,IAAI,CAAC,MAAM;KACX,MAAM,aAAa,aAAa,IAAI;KACpC,MAAM,WAAW,cAAc,aAAa,MAAM,IAAI,KAAK,KAAK;KAChE,KAAK,KAAK;MACR,OAAO,KAAK;MACZ;MACA;MACA,SAAS,MAAM;MACf,UAAU,QAAQ;MAClB;MACA;MACA;MACA,UAAU,aAAa,MAAM,IAAI,KAAK,KAAK;MAC3C,MAAM,YAAY,MAAM,IAAI,KAAK,KAAK;MACtC,WAAW,KAAK,YAAY,UAAU,gBAAgB;KACxD,CAAC;KACD,IAAI,UAAU,KAAK,WAAW,IAAI,GAAG,QAAQ,GAAG,KAAK,KAAK;IAC5D;GACF;GACA,KAAK,MAAM,OAAO,GAAG,IAAI;GACzB,OAAO;EACT,CAAC;EAED,MAAM,aAAa,eAAe,IAAI,IAAI,SAAS,MAAM,KAAK,QAAQ,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;EAKxF,MAAM,eAAe,eAAuC;GAI1D,MAAM,UAAU,WAAW,SAAS,OAAO,WAAW,MAAM,IAAI,WAAW,KAAK,IAAI,KAAA;GACpF,IAAI,WAAW,CAAC,QAAQ,UAAU,OAAO,WAAW;GAEpD,OADqB,SAAS,MAAM,MAAM,QAAQ,CAAC,IAAI,QAChD,CAAA,EAAc,SAAS;EAChC,CAAC;EAED,SAAS,SAAS,MAAmC;GACnD,MAAM,MAAM,WAAW,MAAM,IAAI,KAAK,KAAK;GAC3C,OAAO;IACL,YAAY,KAAK,cAAc;IAC/B,UAAU,KAAK,YAAY;IAC3B,UAAU,KAAK,YAAY;IAC3B,MAAM,KAAK,QAAQ;IACnB,UAAU,KAAK,YAAY;IAC3B,WAAW,CAAC,gBAAgB,SAAS,KAAK,UAAU,aAAa;GACnE;EACF;EAEA,eAAe,UAAU,KAA6B;GACpD,MAAM,QAAQ,IAAI,KAAK;GACvB,IACE,IAAI,YACJ,CAAC,IAAI,cACL,aAAa,MAAM,IAAI,KAAK,KAC5B,YAAY,MAAM,IAAI,KAAK,GAE3B;GAMF,IAHE,CAAC,MAAM,QAAQ,IAAI,KAAK,QAAQ,KAChC,MAAM,gBAAgB,QACtB,CAAC,aAAa,MAAM,IAAI,KAAK,KACjB,MAAM,cAAc;IAChC,YAAY,QAAQ,IAAI,IAAI,YAAY,KAAK,CAAC,CAAC,IAAI,KAAK;IACxD,IAAI;KACF,MAAM,WAAW,MAAM,MAAM,aAAa,IAAI,IAAI;KAClD,MAAM,OAAO,IAAI,IAAI,aAAa,KAAK;KACvC,KAAK,IAAI,OAAO,QAAQ;KACxB,aAAa,QAAQ;IACvB,QAAQ;KAGN;IACF,UAAU;KACR,MAAM,UAAU,IAAI,IAAI,YAAY,KAAK;KACzC,QAAQ,OAAO,KAAK;KACpB,YAAY,QAAQ;IACtB;GACF;GACA,aAAa,QAAQ,IAAI,IAAI,aAAa,KAAK,CAAC,CAAC,IAAI,KAAK;EAC5D;EAEA,SAAS,YAAY,OAA8B;GACjD,MAAM,OAAO,IAAI,IAAI,aAAa,KAAK;GACvC,KAAK,OAAO,KAAK;GACjB,aAAa,QAAQ;EACvB;EAEA,SAAS,UAAU,MAAsB;GACvC,IAAI,gBAAgB,SAAS,KAAK,UAAU;GAC5C,IAAI,MAAM,kBAAkB,YAAY;IACtC,MAAM,OAAO,IAAI,IAAI,aAAa,KAAK;IACvC,IAAI,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK,OAAO,KAAK,KAAK;SAC3C,KAAK,IAAI,KAAK,KAAK;IACxB,aAAa,QAAQ;IACrB,KAAK,qBAAqB,CAAC,GAAG,IAAI,CAAC;IACnC;GACF;GACA,aAAa,wBAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;GACzC,KAAK,qBAAqB,KAAK,KAAK;EACtC;EAEA,SAAS,WAAW,OAA4C;GAC9D,MAAM,OAAO,OAAO;GACpB,IAAI,CAAC,MAAM,OAAO;GAClB,OAAO,KAAK,cAA2B,qBAAqB,IAAI,OAAO,OAAO,KAAK,CAAC,EAAE,GAAG;EAC3F;EAEA,SAAS,SAAS,KAAgC;GAChD,IAAI,CAAC,KAAK;GACV,WAAW,QAAQ,IAAI,KAAK;GAC5B,eAAoB;IAClB,WAAW,IAAI,KAAK,CAAC,EAAE,MAAM;GAC/B,CAAC;EACH;EAEA,SAAS,WAAW,MAAsB;GACxC,WAAW,QAAQ,KAAK;EAC1B;EAEA,SAAS,cAAc,MAAsB;GAC3C,MAAM,MAAM,WAAW,MAAM,IAAI,KAAK,KAAK;GAC3C,IAAI,CAAC,OAAO,gBAAgB,OAAO;GACnC,SAAS,GAAG;GACZ,UAAU,IAAI;EAChB;EAEA,SAAS,kBAAkB,MAAsB;GAC/C,MAAM,MAAM,WAAW,MAAM,IAAI,KAAK,KAAK;GAC3C,IAAI,CAAC,OAAO,gBAAgB,SAAS,IAAI,UAAU;GACnD,SAAS,GAAG;GACZ,IAAI,IAAI,UAAU,YAAY,KAAK,KAAK;QACnC,UAAe,GAAG;EACzB;EAEA,SAAS,kBAA0B;GACjC,IAAI,WAAW,SAAS,MAAM,OAAO;GACrC,OAAO,SAAS,MAAM,WAAW,QAAQ,IAAI,UAAU,WAAW,KAAK;EACzE;EASA,MAAM,qBAAqB;EAC3B,IAAI,kBAAkB;EACtB,IAAI;EAEJ,SAAS,gBAAgB,OAA4B;GACnD,IAAI,MAAM,IAAI,WAAW,KAAK,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS;GAC9E,IAAI,SAAS,MAAM,WAAW,GAAG;GACjC,MAAM,OAAO,MAAM,IAAI,YAAY;GAInC,IAAI,gBAAgB,MAAM,EAAE,MAAM,MAAM,mBAAmB;GAC3D,MAAM,QAAQ;GACd,MAAM,QAAQ,gBAAgB,IAAI;GAClC,KAAK,IAAI,OAAO,GAAG,OAAO,SAAS,MAAM,QAAQ,QAAQ;IACvD,MAAM,MAAM,SAAS,OAAO,QAAQ,QAAQ,SAAS,MAAM;IAI3D,IAAI,OAAO,CAAC,IAAI,YAAY,IAAI,KAAK,MAAM,YAAY,CAAC,CAAC,WAAW,KAAK,GAAG;KAC1E,SAAS,GAAG;KACZ;IACF;GACF;GACA,MAAM,eAAe;GACrB,IAAI,mBAAmB,KAAA,GAAW,aAAa,cAAc;GAC7D,iBAAiB,iBAAiB;IAChC,kBAAkB;IAClB,iBAAiB,KAAA;GACnB,GAAG,kBAAkB;EACvB;EAEA,qBAAqB;GACnB,IAAI,mBAAmB,KAAA,GAAW,aAAa,cAAc;EAC/D,CAAC;;;;;;;EAQD,SAAS,UAAU,OAA4B;GAC7C,IAAI,gBAAgB,OAAO;GAC3B,MAAM,OAAO,SAAS;GACtB,IAAI,KAAK,WAAW,GAAG;GACvB,MAAM,QAAQ,gBAAgB;GAC9B,MAAM,MAAM,SAAS,IAAI,KAAK,SAAS,KAAA;GAEvC,QAAQ,MAAM,KAAd;IACE,KAAK,aAAa;KAChB,MAAM,OAAO,KAAK,QAAQ;KAC1B,IAAI,MAAM,SAAS,IAAI;KACvB;IACF;IACA,KAAK,WAAW;KACd,MAAM,WAAW,QAAQ,IAAI,KAAK,QAAQ,KAAK,KAAA;KAC/C,IAAI,UAAU,SAAS,QAAQ;KAC/B;IACF;IACA,KAAK;KACH,SAAS,KAAK,EAAE;KAChB;IACF,KAAK;KACH,SAAS,KAAK,KAAK,SAAS,EAAE;KAC9B;IACF,KAAK;KACH,IAAI,CAAC,KAAK;KACV,IAAI,IAAI,UAAU;KAClB,IAAI,IAAI,cAAc,CAAC,IAAI,UAAU;MACnC,UAAe,GAAG;MAClB;KACF;KACA,IAAI,IAAI,UAAU;MAChB,MAAM,QAAQ,KAAK,QAAQ;MAC3B,IAAI,SAAS,MAAM,UAAU,IAAI,QAAQ,GAAG,SAAS,KAAK;KAC5D;KACA;IAEF,KAAK;KACH,IAAI,CAAC,KAAK;KACV,IAAI,IAAI,UAAU;KAClB,IAAI,IAAI,cAAc,IAAI,UAAU;MAClC,YAAY,IAAI,KAAK;MACrB;KACF;KACA,IAAI,IAAI,YAAY,MAAM;MACxB,MAAM,SAAS,WAAW,MAAM,IAAI,IAAI,QAAQ;MAChD,IAAI,QAAQ,SAAS,MAAM;KAC7B;KACA;IAEF,KAAK;IACL,KAAK;KACH,IAAI,KAAK,UAAU,IAAI,IAAI;KAC3B;IACF;KACE,gBAAgB,KAAK;KACrB;GACJ;GACA,MAAM,eAAe;EACvB;EAEA,QAAQ,mBAAmB;GACzB;GACA;GACA,aAAa,eAAe,KAAK,MAAM,OAAO;GAC9C;GACA;GACA;EACF,CAA2B;;GAWzB,OAAA,UAAA,GAAA,mBAgBK,MAAA;IAfC,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,wBAAsB,QAAA,kBAAa,aAAA,SAA2B,KAAA;IAC9D,iBAAe,gBAAA,QAAe,SAAY,KAAA;IAC3C,OAAM;IACI;GAEV,GAAA,EAAA,UAAA,IAAA,GAAA,mBAOE,UAAA,MAAA,WANwB,QAAA,QAAhB,MAAM,UAAK;IADrB,OAAA,UAAA,GAAA,YAOE,sBAAA;KALC,KAAK,KAAK;KACJ;KACN,OAAO;KACP,SAAS,QAAA,MAAM;KACf,UAAU,QAAK"}

package/dist/packages/primitives/tree-view/src/TreeViewNode.js

@@ -0,0 +1,7 @@
+import TreeViewNode_vue_vue_type_script_setup_true_lang_default from "./TreeViewNode.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/tree-view/src/TreeViewNode.vue
+var TreeViewNode_default = TreeViewNode_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TreeViewNode_default as default };
+
+//# sourceMappingURL=TreeViewNode.js.map

package/dist/packages/primitives/tree-view/src/TreeViewNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport type { TreeNode } from \"./TreeView.vue\";\nimport { TREE_VIEW_CONTEXT } from \"./context\";\n\nconst props = defineProps<{\n  /** The node this row renders, with its subtree beneath it. */\n  node: TreeNode;\n  /** One-based depth — what `aria-level` says. */\n  level: number;\n  /** How many siblings this row has — what `aria-setsize` says. */\n  setsize: number;\n  /** This row's one-based position among those siblings — what `aria-posinset` says. */\n  posinset: number;\n}>();\n\nconst ctx = inject(TREE_VIEW_CONTEXT);\nif (!ctx) throw new Error(\"TreeViewNode must be rendered inside a TreeView.\");\n\nconst state = computed(() => ctx.stateFor(props.node));\nconst children = computed(() => ctx.childrenOf(props.node));\n// `aria-expanded` and `aria-selected` want the literal strings \"true\"/\"false\";\n// `String()` widens to `string`, which the ARIA types refuse.\nconst ariaExpanded = computed(() =>\n  state.value.expandable ? (state.value.expanded ? \"true\" : \"false\") : undefined,\n);\nconst ariaSelected = computed(() => (state.value.selected ? \"true\" : \"false\"));\n</script>\n\n<template>\n  <!--\n    The role carrier and the focus carrier are different elements on purpose.\n    ARIA attributes belong on the `li` the tree grammar expects; the tab stop,\n    the focus ring and the highlight sit on the inner row `div`, so the ring\n    wraps the row the reader is on and not the whole open branch beneath it.\n  -->\n  <li\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-setsize=\"setsize\"\n    :aria-posinset=\"posinset\"\n    :aria-expanded=\"ariaExpanded\"\n    :aria-selected=\"ariaSelected\"\n    :aria-disabled=\"state.disabled ? 'true' : undefined\"\n    :aria-busy=\"state.busy ? 'true' : undefined\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- the row answers the keyboard through the one keydown on the root `<ul>` every keydown bubbles to; a per-row listener would duplicate it. -->\n    <div\n      :data-tree-value=\"String(node.value)\"\n      :tabindex=\"state.focusable ? 0 : -1\"\n      :class=\"\n        cn(\n          'flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none',\n          'transition-colors duration-fast ease-out',\n          'hover:bg-subtle',\n          'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',\n          state.selected && 'bg-primary-muted text-primary-text',\n          state.disabled && 'cursor-not-allowed',\n        )\n      \"\n      @focusin=\"ctx.onRowFocus(node)\"\n      @click=\"ctx.onRowActivate(node)\"\n    >\n      <!--\n        The disclosure control is a glyph, not a button: a real `<button>`\n        would be a second tab stop inside every openable row, which is the one\n        thing the roving-tabindex contract cannot afford. Pointer users click\n        it; keyboard users reach the same behaviour with ArrowRight and\n        ArrowLeft, so nothing is keyboard-only because of this.\n      -->\n      <span\n        v-if=\"state.expandable\"\n        class=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\"\n        aria-hidden=\"true\"\n        @click.stop=\"ctx.onChevronActivate(node)\"\n      >\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'h-3.5 w-3.5 transition-transform duration-fast ease-out',\n              state.expanded && 'rotate-90',\n            )\n          \"\n        >\n          <path\n            d=\"m6 4 4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n      <!-- The same slot, left empty on a leaf, keeps every label on one axis. -->\n      <span v-else class=\"h-4 w-4 shrink-0\" aria-hidden=\"true\"></span>\n\n      <span class=\"truncate\" :class=\"state.disabled && 'text-muted-foreground'\">{{\n        node.label\n      }}</span>\n      <span v-if=\"state.busy\" class=\"shrink-0 text-small text-muted-foreground\">{{\n        ctx.loadingText.value\n      }}</span>\n    </div>\n\n    <ul v-if=\"state.expanded\" role=\"group\" class=\"m-0 list-none p-0 pl-4\">\n      <TreeViewNode\n        v-for=\"(child, index) in children\"\n        :key=\"child.value\"\n        :node=\"child\"\n        :level=\"level + 1\"\n        :setsize=\"children.length\"\n        :posinset=\"index + 1\"\n      />\n    </ul>\n  </li>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/tree-view/src/TreeViewNode.vue.d.ts

@@ -0,0 +1,15 @@
+import type { TreeNode } from "./TreeView.vue";
+type __VLS_Props = {
+    /** The node this row renders, with its subtree beneath it. */
+    node: TreeNode;
+    /** One-based depth — what `aria-level` says. */
+    level: number;
+    /** How many siblings this row has — what `aria-setsize` says. */
+    setsize: number;
+    /** This row's one-based position among those siblings — what `aria-posinset` says. */
+    posinset: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=TreeViewNode.vue.d.ts.map

package/dist/packages/primitives/tree-view/src/TreeViewNode.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,KAAK,WAAW,GAAG;IACjB,8DAA8D;IAC9D,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AA4KF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/packages/primitives/tree-view/src/TreeViewNode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { TREE_VIEW_CONTEXT } from "./context.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderList, resolveComponent, toDisplayString, unref, withModifiers } from "vue";
+//#region packages/primitives/tree-view/src/TreeViewNode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset",
+	"aria-expanded",
+	"aria-selected",
+	"aria-disabled",
+	"aria-busy"
+];
+var _hoisted_2 = ["data-tree-value", "tabindex"];
+var _hoisted_3 = {
+	key: 1,
+	class: "h-4 w-4 shrink-0",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "shrink-0 text-small text-muted-foreground"
+};
+var _hoisted_5 = {
+	key: 0,
+	role: "group",
+	class: "m-0 list-none p-0 pl-4"
+};
+var TreeViewNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TreeViewNode",
+	props: {
+		node: {},
+		level: {},
+		setsize: {},
+		posinset: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ctx = inject(TREE_VIEW_CONTEXT);
+		if (!ctx) throw new Error("TreeViewNode must be rendered inside a TreeView.");
+		const state = computed(() => ctx.stateFor(props.node));
+		const children = computed(() => ctx.childrenOf(props.node));
+		const ariaExpanded = computed(() => state.value.expandable ? state.value.expanded ? "true" : "false" : void 0);
+		const ariaSelected = computed(() => state.value.selected ? "true" : "false");
+		return (_ctx, _cache) => {
+			const _component_TreeViewNode = resolveComponent("TreeViewNode", true);
+			return openBlock(), createElementBlock("li", {
+				role: "treeitem",
+				"aria-level": __props.level,
+				"aria-setsize": __props.setsize,
+				"aria-posinset": __props.posinset,
+				"aria-expanded": ariaExpanded.value,
+				"aria-selected": ariaSelected.value,
+				"aria-disabled": state.value.disabled ? "true" : void 0,
+				"aria-busy": state.value.busy ? "true" : void 0
+			}, [createElementVNode("div", {
+				"data-tree-value": String(__props.node.value),
+				tabindex: state.value.focusable ? 0 : -1,
+				class: normalizeClass(unref(cn)("flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none", "transition-colors duration-fast ease-out", "hover:bg-subtle", "focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", state.value.selected && "bg-primary-muted text-primary-text", state.value.disabled && "cursor-not-allowed")),
+				onFocusin: _cache[1] || (_cache[1] = ($event) => unref(ctx).onRowFocus(__props.node)),
+				onClick: _cache[2] || (_cache[2] = ($event) => unref(ctx).onRowActivate(__props.node))
+			}, [
+				state.value.expandable ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground",
+					"aria-hidden": "true",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(ctx).onChevronActivate(__props.node), ["stop"]))
+				}, [(openBlock(), createElementBlock("svg", {
+					viewBox: "0 0 16 16",
+					fill: "none",
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("h-3.5 w-3.5 transition-transform duration-fast ease-out", state.value.expanded && "rotate-90"))
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
+					d: "m6 4 4 4-4 4",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, -1)])], 2))])) : (openBlock(), createElementBlock("span", _hoisted_3)),
+				createElementVNode("span", { class: normalizeClass(["truncate", state.value.disabled && "text-muted-foreground"]) }, toDisplayString(__props.node.label), 3),
+				state.value.busy ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(ctx).loadingText.value), 1)) : createCommentVNode("", true)
+			], 42, _hoisted_2), state.value.expanded ? (openBlock(), createElementBlock("ul", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, index) => {
+				return openBlock(), createBlock(_component_TreeViewNode, {
+					key: child.value,
+					node: child,
+					level: __props.level + 1,
+					setsize: children.value.length,
+					posinset: index + 1
+				}, null, 8, [
+					"node",
+					"level",
+					"setsize",
+					"posinset"
+				]);
+			}), 128))])) : createCommentVNode("", true)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TreeViewNode_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TreeViewNode.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/tree-view/src/TreeViewNode.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport type { TreeNode } from \"./TreeView.vue\";\nimport { TREE_VIEW_CONTEXT } from \"./context\";\n\nconst props = defineProps<{\n  /** The node this row renders, with its subtree beneath it. */\n  node: TreeNode;\n  /** One-based depth — what `aria-level` says. */\n  level: number;\n  /** How many siblings this row has — what `aria-setsize` says. */\n  setsize: number;\n  /** This row's one-based position among those siblings — what `aria-posinset` says. */\n  posinset: number;\n}>();\n\nconst ctx = inject(TREE_VIEW_CONTEXT);\nif (!ctx) throw new Error(\"TreeViewNode must be rendered inside a TreeView.\");\n\nconst state = computed(() => ctx.stateFor(props.node));\nconst children = computed(() => ctx.childrenOf(props.node));\n// `aria-expanded` and `aria-selected` want the literal strings \"true\"/\"false\";\n// `String()` widens to `string`, which the ARIA types refuse.\nconst ariaExpanded = computed(() =>\n  state.value.expandable ? (state.value.expanded ? \"true\" : \"false\") : undefined,\n);\nconst ariaSelected = computed(() => (state.value.selected ? \"true\" : \"false\"));\n</script>\n\n<template>\n  <!--\n    The role carrier and the focus carrier are different elements on purpose.\n    ARIA attributes belong on the `li` the tree grammar expects; the tab stop,\n    the focus ring and the highlight sit on the inner row `div`, so the ring\n    wraps the row the reader is on and not the whole open branch beneath it.\n  -->\n  <li\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-setsize=\"setsize\"\n    :aria-posinset=\"posinset\"\n    :aria-expanded=\"ariaExpanded\"\n    :aria-selected=\"ariaSelected\"\n    :aria-disabled=\"state.disabled ? 'true' : undefined\"\n    :aria-busy=\"state.busy ? 'true' : undefined\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- the row answers the keyboard through the one keydown on the root `<ul>` every keydown bubbles to; a per-row listener would duplicate it. -->\n    <div\n      :data-tree-value=\"String(node.value)\"\n      :tabindex=\"state.focusable ? 0 : -1\"\n      :class=\"\n        cn(\n          'flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none',\n          'transition-colors duration-fast ease-out',\n          'hover:bg-subtle',\n          'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',\n          state.selected && 'bg-primary-muted text-primary-text',\n          state.disabled && 'cursor-not-allowed',\n        )\n      \"\n      @focusin=\"ctx.onRowFocus(node)\"\n      @click=\"ctx.onRowActivate(node)\"\n    >\n      <!--\n        The disclosure control is a glyph, not a button: a real `<button>`\n        would be a second tab stop inside every openable row, which is the one\n        thing the roving-tabindex contract cannot afford. Pointer users click\n        it; keyboard users reach the same behaviour with ArrowRight and\n        ArrowLeft, so nothing is keyboard-only because of this.\n      -->\n      <span\n        v-if=\"state.expandable\"\n        class=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\"\n        aria-hidden=\"true\"\n        @click.stop=\"ctx.onChevronActivate(node)\"\n      >\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'h-3.5 w-3.5 transition-transform duration-fast ease-out',\n              state.expanded && 'rotate-90',\n            )\n          \"\n        >\n          <path\n            d=\"m6 4 4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n      <!-- The same slot, left empty on a leaf, keeps every label on one axis. -->\n      <span v-else class=\"h-4 w-4 shrink-0\" aria-hidden=\"true\"></span>\n\n      <span class=\"truncate\" :class=\"state.disabled && 'text-muted-foreground'\">{{\n        node.label\n      }}</span>\n      <span v-if=\"state.busy\" class=\"shrink-0 text-small text-muted-foreground\">{{\n        ctx.loadingText.value\n      }}</span>\n    </div>\n\n    <ul v-if=\"state.expanded\" role=\"group\" class=\"m-0 list-none p-0 pl-4\">\n      <TreeViewNode\n        v-for=\"(child, index) in children\"\n        :key=\"child.value\"\n        :node=\"child\"\n        :level=\"level + 1\"\n        :setsize=\"children.length\"\n        :posinset=\"index + 1\"\n      />\n    </ul>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAWd,MAAM,MAAM,OAAO,iBAAiB;EACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kDAAkD;EAE5E,MAAM,QAAQ,eAAe,IAAI,SAAS,MAAM,IAAI,CAAC;EACrD,MAAM,WAAW,eAAe,IAAI,WAAW,MAAM,IAAI,CAAC;EAG1D,MAAM,eAAe,eACnB,MAAM,MAAM,aAAc,MAAM,MAAM,WAAW,SAAS,UAAW,KAAA,CACvE;EACA,MAAM,eAAe,eAAgB,MAAM,MAAM,WAAW,SAAS,OAAQ;;;GAU3E,OAAA,UAAA,GAAA,mBAiFK,MAAA;IAhFH,MAAK;IACJ,cAAY,QAAA;IACZ,gBAAc,QAAA;IACd,iBAAe,QAAA;IACf,iBAAe,aAAA;IACf,iBAAe,aAAA;IACf,iBAAe,MAAA,MAAM,WAAQ,SAAY,KAAA;IACzC,aAAW,MAAA,MAAM,OAAI,SAAY,KAAA;GAGlC,GAAA,CAAA,mBA0DM,OAAA;IAzDH,mBAAiB,OAAO,QAAA,KAAK,KAAK;IAClC,UAAU,MAAA,MAAM,YAAS,IAAA;IACzB,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,oGAAA,4CAAA,mBAAA,8GAAqU,MAAA,MAAM,YAAQ,sCAAoD,MAAA,MAAM,YAAQ,oBAAA,CAAA;IAUva,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,GAAA,CAAG,CAAC,WAAW,QAAA,IAAI;IAC5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,GAAA,CAAG,CAAC,cAAc,QAAA,IAAI;;IAUtB,MAAA,MAAM,cADd,UAAA,GAAA,mBAyBO,QAAA;;KAvBL,OAAM;KACN,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,GAAA,CAAG,CAAC,kBAAkB,QAAA,IAAI,GAAA,CAAA,MAAA,CAAA;IAEvC,GAAA,EAAA,UAAA,GAAA,mBAkBM,OAAA;KAjBJ,SAAQ;KACR,MAAK;KACL,eAAY;KACX,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,2DAAyF,MAAA,MAAM,YAAQ,WAAA,CAAA;IAO9H,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAME,QAAA;KALA,GAAE;KACF,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;IAKtB,GAAA,MAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA,MAAA,UAAA,GAAA,mBAAgE,QAAhE,UAAgE;IAEhE,mBAES,QAAA,EAFH,OAAK,eAAA,CAAC,YAAmB,MAAA,MAAM,YAAQ,uBAAA,CAAA,EAC3C,GAAA,gBAAA,QAAA,KAAK,KAAK,GAAA,CAAA;IAEA,MAAA,MAAM,QAAlB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,MAAA,GAAA,CAAG,CAAC,YAAY,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAIf,GAAA,IAAA,UAAA,GAAA,MAAA,MAAM,YAAhB,UAAA,GAAA,mBASK,MATL,YASK,EARH,UAAA,IAAA,GAAA,mBAOE,UAAA,MAAA,WANyB,SAAA,QAAjB,OAAO,UAAK;IADtB,OAAA,UAAA,GAAA,YAOE,yBAAA;KALC,KAAK,MAAM;KACX,MAAM;KACN,OAAO,QAAA,QAAK;KACZ,SAAS,SAAA,MAAS;KAClB,UAAU,QAAK"}