@vizejs/ui 0.426.3 → 0.427.0

package/dist/tree-C93WAEmU.mjs

@@ -0,0 +1,1327 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { r as useResolvedDirection } from "./direction-runtime-CiKR5uEp.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { t as createCollectionRegistry } from "./collection-Cncgrq4U.mjs";
+import { n as useTypeahead } from "./typeahead-DZSBI5m5.mjs";
+import { o as useVirtualizer } from "./virtualizer-BlxKjT3W.mjs";
+import { n as useSortable } from "./sortable-DCJbI1MN.mjs";
+import { computed, createElementBlock, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, onBeforeUnmount, onMounted, onScopeDispose, openBlock, renderSlot, shallowReactive, shallowReadonly, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/families/data/tree/tree-context.ts
+const treeContext = createContext("Tree");
+const treeItemContext = createContext("TreeItem");
+//#endregion
+//#region src/families/data/tree/tree-model.ts
+const duplicateKeyDiagnostic = "VIZE_UI_TREE_DUPLICATE_KEY";
+/**
+* Index every resolved node of a tree in pre-order.
+*
+* Collapsed branches are indexed too so checkbox propagation, expand-all, and
+* typed key lookups work for rows that are not currently visible.
+*
+* @throws An error carrying `VIZE_UI_TREE_DUPLICATE_KEY` when two nodes share a key.
+*/
+function indexTree(items, accessors) {
+	const entries = /* @__PURE__ */ new Map();
+	const order = [];
+	const visit = (siblings, parentKey, level) => {
+		const keys = [];
+		siblings.forEach((node, position) => {
+			const key = accessors.getKey(node);
+			if (entries.has(key)) throw new Error(`${duplicateKeyDiagnostic}: tree key ${String(key)} is not unique`);
+			const children = accessors.resolveChildren(node, key);
+			const entry = {
+				key,
+				node,
+				parentKey,
+				level,
+				posinset: position + 1,
+				setsize: siblings.length,
+				childKeys: null
+			};
+			entries.set(key, entry);
+			order.push(key);
+			keys.push(key);
+			if (children !== null) entries.set(key, {
+				...entry,
+				childKeys: visit(children, key, level + 1)
+			});
+		});
+		return keys;
+	};
+	return {
+		entries,
+		rootKeys: visit(items, null, 1),
+		order
+	};
+}
+/** Flatten the visible rows of an indexed tree for rendering and navigation. */
+function flattenVisibleTree(index, expanded, isExpandable) {
+	const rows = [];
+	const visit = (keys) => {
+		for (const key of keys) {
+			const entry = index.entries.get(key);
+			if (entry === void 0) continue;
+			const expandable = isExpandable(entry);
+			const open = expandable && expanded.has(key);
+			rows.push(Object.freeze({
+				key,
+				node: entry.node,
+				index: rows.length,
+				level: entry.level,
+				posinset: entry.posinset,
+				setsize: entry.setsize,
+				parentKey: entry.parentKey,
+				expandable,
+				expanded: open
+			}));
+			if (open && entry.childKeys !== null) visit(entry.childKeys);
+		}
+	};
+	visit(index.rootKeys);
+	return rows;
+}
+/** Collect every indexed descendant key of `key`, excluding `key` itself. */
+function collectDescendantKeys(index, key) {
+	const result = [];
+	const stack = [...index.entries.get(key)?.childKeys ?? []].reverse();
+	while (stack.length > 0) {
+		const next = stack.pop();
+		if (next === void 0) break;
+		result.push(next);
+		const children = index.entries.get(next)?.childKeys;
+		if (children) stack.push(...[...children].reverse());
+	}
+	return result;
+}
+/** Whether `candidate` is a strict descendant of `ancestor`. */
+function isTreeDescendant(index, ancestor, candidate) {
+	let parent = index.entries.get(candidate)?.parentKey ?? null;
+	while (parent !== null) {
+		if (parent === ancestor) return true;
+		parent = index.entries.get(parent)?.parentKey ?? null;
+	}
+	return false;
+}
+/**
+* Derive tri-state checkbox values for every indexed node.
+*
+* With `"cascade"`, a checked key implies its whole resolved subtree, and nodes
+* with resolved children aggregate them: all checked is `checked`, all
+* unchecked is `unchecked`, anything else is `mixed`. Leaves and unloaded
+* branches read their own (or an inherited) membership, so seeding only a
+* parent key checks its lazily loaded children too. `"independent"` reads
+* membership for every node.
+*/
+function deriveTreeCheckedStates(index, checked, cascade) {
+	const states = /* @__PURE__ */ new Map();
+	if (!cascade) {
+		for (const key of index.order) states.set(key, checked.has(key) ? "checked" : "unchecked");
+		return states;
+	}
+	const resolve = (key, inherited) => {
+		const own = inherited || checked.has(key);
+		const children = index.entries.get(key)?.childKeys ?? null;
+		if (children === null || children.length === 0) {
+			const state = own ? "checked" : "unchecked";
+			states.set(key, state);
+			return state;
+		}
+		let all = true;
+		let none = true;
+		for (const child of children) {
+			const state = resolve(child, own);
+			if (state !== "checked") all = false;
+			if (state !== "unchecked") none = false;
+		}
+		const state = all ? "checked" : none ? "unchecked" : "mixed";
+		states.set(key, state);
+		return state;
+	};
+	for (const key of index.rootKeys) resolve(key, false);
+	return states;
+}
+/** Return checked keys in pre-order, normalized so parents mirror their descendants. */
+function normalizeTreeChecked(index, checked, cascade) {
+	if (!cascade) return index.order.filter((key) => checked.has(key));
+	const states = deriveTreeCheckedStates(index, checked, true);
+	return index.order.filter((key) => states.get(key) === "checked");
+}
+/**
+* Toggle one node's checkbox and return the next normalized checked keys.
+*
+* Mixed and unchecked nodes become checked; checked nodes become unchecked.
+* Cascading skips disabled descendants, which keep their current value.
+*/
+function toggleTreeChecked(index, checked, key, options) {
+	const states = deriveTreeCheckedStates(index, checked, options.cascade);
+	const target = states.get(key) !== "checked";
+	const next = new Set(options.cascade ? index.order.filter((candidate) => states.get(candidate) === "checked") : checked);
+	const apply = (candidate) => {
+		if (target) next.add(candidate);
+		else next.delete(candidate);
+	};
+	apply(key);
+	if (!options.cascade) return normalizeTreeChecked(index, next, false);
+	for (const descendant of collectDescendantKeys(index, key)) if (!options.isDisabled(descendant)) apply(descendant);
+	for (const candidate of index.order) if ((index.entries.get(candidate)?.childKeys?.length ?? 0) > 0) next.delete(candidate);
+	return normalizeTreeChecked(index, next, true);
+}
+/** Whether two key lists contain the same keys in the same order. */
+function treeKeysEqual(left, right) {
+	return left.length === right.length && left.every((key, index) => Object.is(key, right[index]));
+}
+const safeSegment = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+/** Create a deterministic, DOM-id-safe segment for an arbitrary tree key. */
+function getTreeKeyIdSegment(key) {
+	if (typeof key === "number") return Number.isSafeInteger(key) && key >= 0 ? `num-${key}` : `num-${hashTreeKey(`number:${key}`)}`;
+	if (safeSegment.test(key)) return `key-${key}`;
+	return `key-${key.replaceAll(/[^A-Za-z0-9_-]+/g, "-").replaceAll(/^-+|-+$/g, "").slice(0, 32) || "empty"}-${hashTreeKey(key)}`;
+}
+function hashTreeKey(value) {
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index++) {
+		hash ^= value.charCodeAt(index);
+		hash = Math.imul(hash, 16777619) >>> 0;
+	}
+	return hash.toString(36);
+}
+//#endregion
+//#region src/families/data/tree/tree-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"dir",
+	"tabindex",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-multiselectable",
+	"aria-disabled",
+	"data-state",
+	"data-selection-mode",
+	"data-disabled",
+	"data-checkable",
+	"data-virtualized"
+];
+//#endregion
+//#region src/families/data/tree/tree-root.vue
+var tree_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tree-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		items: {
+			type: Array,
+			required: true
+		},
+		getKey: {
+			type: Function,
+			required: true
+		},
+		getChildren: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		hasChildren: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		loadChildren: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		getTextValue: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		isDisabled: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		expanded: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		defaultExpanded: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		selected: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		defaultSelected: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		checked: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		defaultChecked: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		selectionMode: {
+			type: String,
+			required: false,
+			default: "single"
+		},
+		selectionFollowsFocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		expandOnClick: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		checkable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		checkPropagation: {
+			type: String,
+			required: false,
+			default: "cascade"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		typeahead: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		typeaheadTimeout: {
+			type: Number,
+			required: false,
+			default: 500
+		},
+		virtualizer: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		reorder: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"update:expanded",
+		"update:selected",
+		"update:checked",
+		"action",
+		"load",
+		"loadError"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const noKeys = Object.freeze([]);
+		const element = useTemplateRef("element");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "tree"
+		});
+		const disabledState = computed(() => __props.disabled);
+		const checkableState = computed(() => __props.checkable);
+		const selectionModeState = computed(() => __props.selectionMode);
+		const dirState = useResolvedDirection(() => __props.dir);
+		const cascade = computed(() => __props.checkPropagation === "cascade");
+		const loaded = shallowReactive(/* @__PURE__ */ new Map());
+		const loadStates = shallowReactive(/* @__PURE__ */ new Map());
+		const loadControllers = /* @__PURE__ */ new Map();
+		const elements = shallowReactive(/* @__PURE__ */ new Map());
+		const anchorKey = shallowRef(null);
+		const expandedState = useControllableState({
+			value: () => __props.expanded,
+			defaultValue: () => __props.defaultExpanded ?? noKeys,
+			equals: treeKeysEqual,
+			onChange: (value) => emit("update:expanded", value)
+		});
+		const selectedState = useControllableState({
+			value: () => __props.selected,
+			defaultValue: () => __props.defaultSelected ?? noKeys,
+			equals: treeKeysEqual,
+			onChange: (value) => emit("update:selected", value)
+		});
+		const checkedState = useControllableState({
+			value: () => __props.checked,
+			defaultValue: () => __props.defaultChecked ?? noKeys,
+			equals: treeKeysEqual,
+			onChange: (value) => emit("update:checked", value)
+		});
+		function resolveChildren(node, key) {
+			const explicit = __props.getChildren?.(node);
+			if (explicit !== null && explicit !== void 0) return explicit;
+			return loaded.get(key) ?? null;
+		}
+		const index = computed(() => indexTree(__props.items, {
+			getKey: __props.getKey,
+			resolveChildren
+		}));
+		const expandedSet = computed(() => new Set(expandedState.value.value));
+		const selectedSet = computed(() => new Set(selectedState.value.value));
+		const checkedSet = computed(() => new Set(checkedState.value.value));
+		const checkedStates = computed(() => deriveTreeCheckedStates(index.value, checkedSet.value, cascade.value));
+		function needsLoad(entry) {
+			if (__props.loadChildren === void 0 || entry.childKeys !== null) return false;
+			if (loadStates.get(entry.key) === "loaded") return false;
+			return __props.hasChildren?.(entry.node) ?? true;
+		}
+		function isExpandable(entry) {
+			if (entry.childKeys !== null) return entry.childKeys.length > 0;
+			return needsLoad(entry);
+		}
+		const visibleItems = computed(() => flattenVisibleTree(index.value, expandedSet.value, isExpandable));
+		const rowByKey = computed(() => new Map(visibleItems.value.map((row) => [row.key, row])));
+		function isKeyDisabled(key) {
+			if (disabledState.value) return true;
+			const entry = index.value.entries.get(key);
+			return entry !== void 0 && __props.isDisabled !== void 0 && __props.isDisabled(entry.node);
+		}
+		const registry = createCollectionRegistry({ disabledBehavior: "focusable" });
+		const registrations = /* @__PURE__ */ new Map();
+		watch(visibleItems, (rows) => {
+			const live = /* @__PURE__ */ new Set();
+			for (const row of rows) {
+				live.add(row.key);
+				if (registrations.has(row.key)) continue;
+				const key = row.key;
+				registrations.set(key, registry.register({
+					key,
+					value: key,
+					element: () => elements.get(key) ?? null,
+					textValue: () => {
+						const node = index.value.entries.get(key)?.node;
+						return node === void 0 || __props.getTextValue === void 0 ? null : __props.getTextValue(node);
+					},
+					order: () => rowByKey.value.get(key)?.index
+				}));
+			}
+			for (const [key, registration] of registrations) {
+				if (live.has(key)) continue;
+				registration.unregister();
+				registrations.delete(key);
+			}
+		}, {
+			flush: "sync",
+			immediate: true
+		});
+		const activeKey = computed(() => {
+			const current = registry.activeKey.value;
+			if (current !== null && rowByKey.value.has(current)) return current;
+			return visibleItems.value.find((row) => selectedSet.value.has(row.key))?.key ?? visibleItems.value[0]?.key ?? null;
+		});
+		const typeaheadController = useTypeahead({
+			registry,
+			isDisabled: () => !__props.typeahead || disabledState.value,
+			timeout: () => __props.typeaheadTimeout,
+			onMatch: (match) => {
+				focusKey(match.key);
+			}
+		});
+		if (__props.virtualizer !== void 0) __props.virtualizer.connect({
+			count: () => visibleItems.value.length,
+			getKey: (position) => visibleItems.value[position]?.key ?? position
+		});
+		const renderedItems = computed(() => {
+			if (__props.virtualizer === void 0) return visibleItems.value;
+			const rows = [];
+			for (const item of __props.virtualizer.virtualItems.value) {
+				const row = visibleItems.value[item.index];
+				if (row !== void 0) rows.push(row);
+			}
+			return rows;
+		});
+		const activeRendered = computed(() => renderedItems.value.some((row) => activeKey.value !== null && row.key === activeKey.value));
+		const rootTabindex = computed(() => {
+			if (disabledState.value || visibleItems.value.length === 0) return void 0;
+			return activeRendered.value ? void 0 : 0;
+		});
+		const state = computed(() => {
+			if (disabledState.value) return "disabled";
+			return visibleItems.value.length === 0 ? "empty" : "ready";
+		});
+		const slotState = computed(() => ({
+			activeKey: activeKey.value,
+			checked: checkedState.value.value,
+			disabled: disabledState.value,
+			expanded: expandedState.value.value,
+			items: renderedItems.value,
+			selected: selectedState.value.value,
+			selectionMode: selectionModeState.value,
+			state: state.value,
+			visibleItems: visibleItems.value
+		}));
+		function getItemId(key) {
+			return deriveDeterministicId(baseId.value, `item-${getTreeKeyIdSegment(key)}`);
+		}
+		function focusWithin() {
+			return element.value?.contains(element.value.ownerDocument.activeElement) ?? false;
+		}
+		function currentActiveKey() {
+			return activeKey.value;
+		}
+		function currentRows() {
+			return visibleItems.value;
+		}
+		function focusKey(key, options) {
+			const row = rowByKey.value.get(key);
+			if (row === void 0 || disabledState.value) return false;
+			registry.setActiveKey(row.key);
+			__props.virtualizer?.scrollToIndex(row.index);
+			const target = elements.get(row.key);
+			if (target !== void 0) {
+				target.focus(options);
+				return true;
+			}
+			nextTick(() => elements.get(row.key)?.focus(options));
+			return true;
+		}
+		function focus(options) {
+			const key = currentActiveKey();
+			if (key !== null) focusKey(key, options);
+		}
+		function setExpandedKeys(next) {
+			return expandedState.set(next);
+		}
+		async function load(entry) {
+			if (__props.loadChildren === void 0) return false;
+			loadControllers.get(entry.key)?.abort();
+			const controller = new AbortController();
+			loadControllers.set(entry.key, controller);
+			loadStates.set(entry.key, "loading");
+			try {
+				const children = await __props.loadChildren(entry.node, { signal: controller.signal });
+				if (controller.signal.aborted) return false;
+				loaded.set(entry.key, children);
+				loadStates.set(entry.key, "loaded");
+				emit("load", entry.key, children);
+				return true;
+			} catch (error) {
+				if (controller.signal.aborted) return false;
+				loadStates.set(entry.key, "error");
+				emit("loadError", entry.key, error);
+				return false;
+			} finally {
+				if (loadControllers.get(entry.key) === controller) loadControllers.delete(entry.key);
+			}
+		}
+		async function expand(key) {
+			const entry = index.value.entries.get(key);
+			if (entry === void 0 || isKeyDisabled(key) || !isExpandable(entry)) return false;
+			const changed = expandedSet.value.has(key) ? false : setExpandedKeys([...expandedState.value.value, entry.key]);
+			if (needsLoad(entry) && loadStates.get(key) !== "loading") await load(entry);
+			return changed;
+		}
+		function collapse(key) {
+			const entry = index.value.entries.get(key);
+			if (entry === void 0 || !expandedSet.value.has(key) || isKeyDisabled(key)) return false;
+			const active = registry.activeKey.value;
+			if (active !== null && isTreeDescendant(index.value, key, active)) if (focusWithin()) focusKey(key);
+			else registry.setActiveKey(entry.key);
+			return setExpandedKeys(expandedState.value.value.filter((candidate) => candidate !== key));
+		}
+		async function toggle(key) {
+			return expandedSet.value.has(key) ? collapse(key) : expand(key);
+		}
+		function expandAll() {
+			const next = index.value.order.filter((key) => {
+				const entry = index.value.entries.get(key);
+				return entry !== void 0 && entry.childKeys !== null && entry.childKeys.length > 0;
+			});
+			const merged = [...expandedState.value.value];
+			for (const key of next) if (!expandedSet.value.has(key)) merged.push(key);
+			return setExpandedKeys(merged);
+		}
+		function collapseAll() {
+			const active = registry.activeKey.value;
+			if (active !== null) {
+				let topKey = active;
+				let parent = index.value.entries.get(topKey)?.parentKey ?? null;
+				while (parent !== null) {
+					topKey = parent;
+					parent = index.value.entries.get(parent)?.parentKey ?? null;
+				}
+				if (topKey !== active) if (focusWithin()) focusKey(topKey);
+				else {
+					const entry = index.value.entries.get(topKey);
+					if (entry !== void 0) registry.setActiveKey(entry.key);
+				}
+			}
+			return setExpandedKeys(noKeys);
+		}
+		function reload(key) {
+			const entry = index.value.entries.get(key);
+			if (entry === void 0 || __props.loadChildren === void 0) return Promise.resolve(false);
+			loaded.delete(key);
+			loadStates.delete(key);
+			return load(entry);
+		}
+		function normalizeSelection(keys) {
+			if (selectionModeState.value === "none") return noKeys;
+			const unique = [...new Set(keys)];
+			return selectionModeState.value === "single" ? unique.slice(0, 1) : unique;
+		}
+		function setSelected(keys) {
+			return selectedState.set(normalizeSelection(keys));
+		}
+		function selectOnly(key) {
+			const row = index.value.entries.get(key);
+			if (row === void 0 || isKeyDisabled(key) || selectionModeState.value === "none") return false;
+			anchorKey.value = key;
+			return setSelected([row.key]);
+		}
+		function toggleSelected(key) {
+			const row = index.value.entries.get(key);
+			if (row === void 0 || isKeyDisabled(key)) return false;
+			if (selectionModeState.value !== "multiple") return selectOnly(key);
+			anchorKey.value = key;
+			const current = selectedState.value.value;
+			return setSelected(selectedSet.value.has(key) ? current.filter((candidate) => candidate !== key) : [...current, row.key]);
+		}
+		function selectRange(key) {
+			if (selectionModeState.value !== "multiple") return selectOnly(key);
+			const anchor = anchorKey.value !== null && rowByKey.value.has(anchorKey.value) ? anchorKey.value : key;
+			const from = rowByKey.value.get(anchor)?.index ?? 0;
+			const to = rowByKey.value.get(key)?.index ?? 0;
+			const [start, end] = from <= to ? [from, to] : [to, from];
+			return setSelected(visibleItems.value.slice(start, end + 1).filter((row) => !isKeyDisabled(row.key)).map((row) => row.key));
+		}
+		function selectAll() {
+			if (selectionModeState.value !== "multiple") return false;
+			const all = visibleItems.value.filter((row) => !isKeyDisabled(row.key)).map((row) => row.key);
+			return setSelected(all.every((key) => selectedSet.value.has(key)) ? noKeys : all);
+		}
+		function toggleChecked(key) {
+			if (!index.value.entries.has(key) || isKeyDisabled(key)) return false;
+			return checkedState.set(toggleTreeChecked(index.value, checkedSet.value, key, {
+				cascade: cascade.value,
+				isDisabled: isKeyDisabled
+			}));
+		}
+		function getCheckedState(key) {
+			return checkedStates.value.get(key) ?? "unchecked";
+		}
+		function siblingsOf(key) {
+			const parent = index.value.entries.get(key)?.parentKey ?? null;
+			if (parent === null) return index.value.rootKeys;
+			return index.value.entries.get(parent)?.childKeys ?? noKeys;
+		}
+		function moveByKeyboard(row, event) {
+			if (__props.reorder === void 0) return false;
+			const siblings = siblingsOf(row.key);
+			const position = siblings.indexOf(row.key);
+			const previous = siblings[position - 1];
+			const next = siblings[position + 1];
+			const [forward, backward] = dirState.value === "rtl" ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+			let targetKey;
+			let placement;
+			if (event.key === "ArrowUp" && previous !== void 0) {
+				targetKey = previous;
+				placement = "before";
+			} else if (event.key === "ArrowDown" && next !== void 0) {
+				targetKey = next;
+				placement = "after";
+			} else if (event.key === forward && previous !== void 0) {
+				targetKey = previous;
+				placement = "inside";
+			} else if (event.key === backward && row.parentKey !== null) {
+				targetKey = row.parentKey;
+				placement = "after";
+			}
+			if (targetKey === void 0 || placement === void 0) return false;
+			return __props.reorder.move({
+				key: row.key,
+				targetKey,
+				position: placement,
+				source: "keyboard",
+				originalEvent: event
+			});
+		}
+		function onFocusIn(event) {
+			if (event.target === element.value) focus({ preventScroll: true });
+		}
+		function rowForElement(target) {
+			for (const [key, candidate] of elements) if (candidate === target) return rowByKey.value.get(key);
+		}
+		function onKeydown(event) {
+			if (event.defaultPrevented || disabledState.value) return;
+			const target = event.target;
+			if (!(target instanceof HTMLElement) || target.getAttribute("role") !== "treeitem") return;
+			const row = rowForElement(target);
+			if (row === void 0) return;
+			const rows = currentRows();
+			const multiple = selectionModeState.value === "multiple";
+			const [expandKey, collapseKey] = dirState.value === "rtl" ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+			const moveTo = (next) => {
+				if (next === void 0) return;
+				focusKey(next.key);
+				if (event.shiftKey && multiple) toggleSelected(next.key);
+				else if (__props.selectionFollowsFocus && selectionModeState.value === "single") selectOnly(next.key);
+			};
+			if (event.altKey && event.key.startsWith("Arrow")) {
+				if (moveByKeyboard(row, event)) event.preventDefault();
+				return;
+			}
+			switch (event.key) {
+				case "ArrowDown":
+					moveTo(rows[row.index + 1]);
+					break;
+				case "ArrowUp":
+					moveTo(rows[row.index - 1]);
+					break;
+				case expandKey:
+					if (row.expandable && !row.expanded) expand(row.key);
+					else if (row.expanded) {
+						const child = rows[row.index + 1];
+						if (child !== void 0 && child.parentKey === row.key) focusKey(child.key);
+					}
+					break;
+				case collapseKey:
+					if (row.expanded) collapse(row.key);
+					else if (row.parentKey !== null) focusKey(row.parentKey);
+					break;
+				case "Home":
+					if (rows[0] === void 0) break;
+					focusKey(rows[0].key);
+					if (multiple && event.shiftKey && (event.ctrlKey || event.metaKey)) selectRange(rows[0].key);
+					break;
+				case "End": {
+					const last = rows.at(-1);
+					if (last === void 0) break;
+					focusKey(last.key);
+					if (multiple && event.shiftKey && (event.ctrlKey || event.metaKey)) selectRange(last.key);
+					break;
+				}
+				case "Enter":
+					if (!isKeyDisabled(row.key)) {
+						if (multiple) toggleSelected(row.key);
+						else selectOnly(row.key);
+						emit("action", row.key, row.node, event);
+					}
+					break;
+				case " ":
+					if (typeaheadController.query.value.length > 0) {
+						typeaheadController.typeaheadProps.onKeydown(event);
+						return;
+					}
+					if (checkableState.value) toggleChecked(row.key);
+					else if (multiple && event.shiftKey) selectRange(row.key);
+					else if (multiple) toggleSelected(row.key);
+					else selectOnly(row.key);
+					break;
+				case "*":
+					for (const sibling of siblingsOf(row.key)) expand(sibling);
+					break;
+				default:
+					if (multiple && (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+						selectAll();
+						break;
+					}
+					typeaheadController.typeaheadProps.onKeydown(event);
+					return;
+			}
+			event.preventDefault();
+		}
+		function onItemClick(key, event) {
+			if (isKeyDisabled(key)) return;
+			focusKey(key, { preventScroll: true });
+			if (selectionModeState.value === "multiple") if (event.shiftKey) selectRange(key);
+			else toggleSelected(key);
+			else if (selectionModeState.value === "single") selectOnly(key);
+			if (__props.expandOnClick) toggle(key);
+			if (event.detail === 2) {
+				const entry = index.value.entries.get(key);
+				if (entry !== void 0) emit("action", entry.key, entry.node, event);
+			}
+		}
+		function registerElement(input) {
+			const stop = watch(input.element, (next, previous) => {
+				if (previous !== null && elements.get(input.key) === previous) elements.delete(input.key);
+				if (next !== null) elements.set(input.key, next);
+			}, {
+				flush: "sync",
+				immediate: true
+			});
+			return () => {
+				stop();
+				if (elements.get(input.key) === input.element.value) elements.delete(input.key);
+			};
+		}
+		function registerReorderItem(key, target, label) {
+			const entry = index.value.entries.get(key);
+			if (__props.reorder === void 0 || entry === void 0) return null;
+			return __props.reorder.registerItem({
+				key: entry.key,
+				element: target,
+				label,
+				disabled: () => isKeyDisabled(key)
+			});
+		}
+		function getDropPosition(key) {
+			const target = __props.reorder?.dropTarget.value ?? null;
+			return target !== null && target.key === key ? target.position : null;
+		}
+		const treeProps = computed(() => ({
+			role: "tree",
+			onFocus: onFocusIn,
+			onKeydown
+		}));
+		onMounted(() => {
+			__props.virtualizer?.setViewport(element.value);
+			watch([expandedSet, index], () => {
+				for (const key of expandedSet.value) {
+					const entry = index.value.entries.get(key);
+					if (entry !== void 0 && needsLoad(entry) && !loadStates.has(key)) load(entry);
+				}
+			}, { immediate: true });
+		});
+		onBeforeUnmount(() => __props.virtualizer?.setViewport(null));
+		onScopeDispose(() => {
+			for (const controller of loadControllers.values()) controller.abort();
+			loadControllers.clear();
+		});
+		treeContext.provide({
+			activeKey,
+			checkable: checkableState,
+			dir: dirState,
+			disabled: disabledState,
+			focusKey,
+			getCheckedState,
+			getDropPosition,
+			getItemId,
+			getLoadState: (key) => loadStates.get(key) ?? "idle",
+			id: baseId,
+			isDisabled: isKeyDisabled,
+			isSelected: (key) => selectedSet.value.has(key),
+			measureElement: (target, position) => __props.virtualizer?.measureElement(target, position),
+			onItemClick,
+			onItemFocus: (key) => {
+				const row = rowByKey.value.get(key);
+				if (row !== void 0) registry.setActiveKey(row.key);
+			},
+			registerElement,
+			registerReorderItem,
+			reorderable: computed(() => __props.reorder !== void 0),
+			selectionMode: selectionModeState,
+			toggleChecked: (key) => toggleChecked(key),
+			toggleExpanded: (key) => {
+				toggle(key);
+			},
+			virtualized: computed(() => __props.virtualizer !== void 0)
+		});
+		__expose({
+			activeKey,
+			checked: checkedState.value,
+			collapse,
+			collapseAll,
+			element,
+			expand,
+			expandAll,
+			expanded: expandedState.value,
+			focus,
+			focusKey,
+			getCheckedState,
+			id: baseId,
+			reload,
+			selected: selectedState.value,
+			setSelected,
+			toggle,
+			toggleChecked
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(treeProps.value, {
+				id: unref(baseId),
+				ref_key: "element",
+				ref: element,
+				dir: unref(dirState),
+				tabindex: rootTabindex.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-multiselectable": selectionModeState.value === "multiple" ? "true" : void 0,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				"data-vize-ui": "tree",
+				part: "root",
+				"data-state": state.value,
+				"data-selection-mode": selectionModeState.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-checkable": checkableState.value ? "true" : void 0,
+				"data-virtualized": __props.virtualizer === void 0 ? void 0 : "true"
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-e2c0bf64"]]);
+//#endregion
+//#region src/families/data/tree/tree-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"tabindex",
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset",
+	"aria-expanded",
+	"aria-selected",
+	"aria-checked",
+	"aria-disabled",
+	"aria-busy",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-index",
+	"data-level",
+	"data-selected",
+	"data-active",
+	"data-disabled",
+	"data-checked",
+	"data-load-state",
+	"data-dragging",
+	"data-drop-position"
+];
+//#endregion
+//#region src/families/data/tree/tree-item.vue
+var tree_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tree-item",
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = treeContext.use();
+		const element = useTemplateRef("element");
+		const key = computed(() => __props.item.key);
+		const itemId = computed(() => context.getItemId(__props.item.key));
+		const itemDisabled = computed(() => context.isDisabled(__props.item.key));
+		const selected = computed(() => context.isSelected(__props.item.key));
+		const active = computed(() => context.activeKey.value === __props.item.key);
+		const checked = computed(() => context.getCheckedState(__props.item.key));
+		const loadState = computed(() => context.getLoadState(__props.item.key));
+		const expandable = computed(() => __props.item.expandable);
+		const expanded = computed(() => __props.item.expanded);
+		const itemState = computed(() => {
+			if (!__props.item.expandable) return "leaf";
+			return __props.item.expanded ? "expanded" : "collapsed";
+		});
+		const dropPosition = computed(() => context.getDropPosition(__props.item.key));
+		const ariaChecked = computed(() => {
+			if (!context.checkable.value) return void 0;
+			return checked.value === "checked" ? "true" : checked.value === "mixed" ? "mixed" : "false";
+		});
+		const ariaSelected = computed(() => {
+			if (context.selectionMode.value === "none") return void 0;
+			return selected.value ? "true" : "false";
+		});
+		const slotState = computed(() => ({
+			active: active.value,
+			checked: checked.value,
+			disabled: itemDisabled.value,
+			expandable: __props.item.expandable,
+			expanded: __props.item.expanded,
+			key: __props.item.key,
+			level: __props.item.level,
+			loadState: loadState.value,
+			node: __props.item.node,
+			selected: selected.value,
+			state: itemState.value
+		}));
+		treeItemContext.provide({
+			checked,
+			disabled: itemDisabled,
+			expandable,
+			expanded,
+			key,
+			loadState
+		});
+		watch(key, (next, _previous, onCleanup) => onCleanup(context.registerElement({
+			key: next,
+			element
+		})), {
+			flush: "sync",
+			immediate: true
+		});
+		watch([element, () => __props.item.index], ([target, position]) => {
+			if (context.virtualized.value) context.measureElement(target, position);
+		}, { flush: "post" });
+		const reorderRegistration = shallowRef(null);
+		watch([key, context.reorderable], ([next, reorderable], _previous, onCleanup) => {
+			if (!reorderable) return;
+			const registration = context.registerReorderItem(next, () => element.value, () => element.value?.textContent?.trim() || String(next));
+			reorderRegistration.value = registration;
+			onCleanup(() => {
+				registration?.dispose();
+				if (reorderRegistration.value === registration) reorderRegistration.value = null;
+			});
+		}, {
+			flush: "sync",
+			immediate: true
+		});
+		onScopeDispose(() => {
+			reorderRegistration.value?.dispose();
+			reorderRegistration.value = null;
+		});
+		const dragging = computed(() => reorderRegistration.value?.isDragging.value === true);
+		function onClick(event) {
+			context.onItemClick(__props.item.key, event);
+		}
+		function onFocus(event) {
+			if (event.target === element.value) context.onItemFocus(__props.item.key);
+		}
+		function onPointerdown(event) {
+			reorderRegistration.value?.pointerProps.onPointerdown(event);
+		}
+		function onMousedown(event) {
+			reorderRegistration.value?.pointerProps.onMousedown(event);
+		}
+		function onTouchstart(event) {
+			reorderRegistration.value?.pointerProps.onTouchstart(event);
+		}
+		function onDragstart(event) {
+			reorderRegistration.value?.pointerProps.onDragstart(event);
+		}
+		const rowProps = computed(() => ({
+			role: "treeitem",
+			onClick,
+			onDragstart,
+			onFocus,
+			onMousedown,
+			onPointerdown,
+			onTouchstart
+		}));
+		function focus(options) {
+			context.focusKey(__props.item.key, options);
+		}
+		__expose({
+			active,
+			checked,
+			disabled: itemDisabled,
+			element,
+			expandable,
+			expanded,
+			focus,
+			id: itemId,
+			key,
+			level: computed(() => __props.item.level),
+			loadState,
+			node: computed(() => __props.item.node),
+			selected,
+			state: itemState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(rowProps.value, {
+				id: itemId.value,
+				ref_key: "element",
+				ref: element,
+				tabindex: active.value && !unref(context).disabled.value ? 0 : -1,
+				"aria-level": __props.item.level,
+				"aria-setsize": __props.item.setsize,
+				"aria-posinset": __props.item.posinset,
+				"aria-expanded": __props.item.expandable ? __props.item.expanded ? "true" : "false" : void 0,
+				"aria-selected": ariaSelected.value,
+				"aria-checked": ariaChecked.value,
+				"aria-disabled": itemDisabled.value ? "true" : void 0,
+				"aria-busy": loadState.value === "loading" ? "true" : void 0,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "tree-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-index": __props.item.index,
+				"data-level": __props.item.level,
+				"data-selected": selected.value ? "true" : void 0,
+				"data-active": active.value ? "true" : void 0,
+				"data-disabled": itemDisabled.value ? "true" : void 0,
+				"data-checked": unref(context).checkable.value ? checked.value : void 0,
+				"data-load-state": loadState.value === "idle" ? void 0 : loadState.value,
+				"data-dragging": dragging.value ? "true" : void 0,
+				"data-drop-position": dropPosition.value ?? void 0
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-af94d5a7"]]);
+//#endregion
+//#region src/families/data/tree/tree-item-checkbox.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["data-state", "data-disabled"];
+//#endregion
+//#region src/families/data/tree/tree-item-checkbox.vue
+var tree_item_checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tree-item-checkbox",
+	setup(__props) {
+		const context = treeContext.use();
+		const item = treeItemContext.use();
+		const slotState = computed(() => ({
+			checked: item.checked.value,
+			disabled: item.disabled.value
+		}));
+		const checkboxProps = computed(() => ({
+			role: "presentation",
+			onClick
+		}));
+		function onClick(event) {
+			event.stopPropagation();
+			if (item.disabled.value) return;
+			context.focusKey(item.key.value, { preventScroll: true });
+			context.toggleChecked(item.key.value, event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(checkboxProps.value, {
+				"aria-hidden": "true",
+				"data-vize-ui": "tree-item-checkbox",
+				part: "checkbox",
+				"data-state": unref(item).checked.value,
+				"data-disabled": unref(item).disabled.value ? "true" : void 0
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-b029ba7b"]]);
+//#endregion
+//#region src/families/data/tree/tree-item-toggle.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"data-state",
+	"data-disabled",
+	"data-load-state"
+];
+//#endregion
+//#region src/families/data/tree/tree-item-toggle.vue
+var tree_item_toggle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tree-item-toggle",
+	setup(__props) {
+		const context = treeContext.use();
+		const item = treeItemContext.use();
+		const state = computed(() => {
+			if (!item.expandable.value) return "leaf";
+			return item.expanded.value ? "expanded" : "collapsed";
+		});
+		const slotState = computed(() => ({
+			expandable: item.expandable.value,
+			expanded: item.expanded.value,
+			loadState: item.loadState.value,
+			state: state.value
+		}));
+		const toggleProps = computed(() => ({
+			role: "presentation",
+			onClick
+		}));
+		function onClick(event) {
+			event.stopPropagation();
+			if (!item.expandable.value || item.disabled.value) return;
+			context.focusKey(item.key.value, { preventScroll: true });
+			context.toggleExpanded(item.key.value, event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(toggleProps.value, {
+				"aria-hidden": "true",
+				"data-vize-ui": "tree-item-toggle",
+				part: "toggle",
+				"data-state": state.value,
+				"data-disabled": unref(item).disabled.value ? "true" : void 0,
+				"data-load-state": unref(item).loadState.value === "idle" ? void 0 : unref(item).loadState.value
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-af1aac7a"]]);
+//#endregion
+//#region src/families/data/tree/tree-reorder.ts
+/**
+* Create a drag-to-reorder adapter for one TreeRoot.
+*
+* Pointer drags run through the shared sortable and drag-and-drop engine with
+* nesting enabled, so drops report `before`, `after`, or `inside` a target row
+* and speak through its live region. Keyboard users move the focused row with
+* `Alt+ArrowUp`/`Alt+ArrowDown` among siblings, `Alt+ArrowRight` into the
+* previous sibling, and `Alt+ArrowLeft` out of the parent. The tree never
+* mutates consumer data: `onMove` receives the request and the consumer
+* updates `items`. Must be called during component setup.
+*
+* @example
+* ```ts
+* const reorder = useTreeReorder<string>({ onMove: (move) => moveNode(move) });
+* ```
+*/
+function useTreeReorder(options) {
+	const keys = /* @__PURE__ */ new Map();
+	const dropTarget = shallowRef(null);
+	const isDisabled = () => options.disabled?.() === true;
+	const move = (event) => {
+		if (isDisabled() || Object.is(event.key, event.targetKey)) return false;
+		if (options.canMove?.(event) === false) return false;
+		options.onMove(Object.freeze({ ...event }));
+		return true;
+	};
+	const sortable = useSortable({
+		nesting: true,
+		isDisabled,
+		onSortPreview(event) {
+			const key = event.overKey === null ? void 0 : keys.get(event.overKey);
+			dropTarget.value = key === void 0 || event.position === null ? null : {
+				key,
+				position: event.position
+			};
+		},
+		onSortCommit(event) {
+			dropTarget.value = null;
+			const key = keys.get(event.key);
+			const targetKey = event.overKey === null ? void 0 : keys.get(event.overKey);
+			if (key === void 0 || targetKey === void 0 || event.position === null) return;
+			move({
+				key,
+				targetKey,
+				position: event.position,
+				source: event.pointerType === "keyboard" ? "keyboard" : "pointer",
+				originalEvent: event.originalEvent
+			});
+		},
+		onSortCancel() {
+			dropTarget.value = null;
+		}
+	});
+	const registerItem = (input) => {
+		const id = String(input.key);
+		keys.set(id, input.key);
+		const registration = sortable.registerItem({
+			key: id,
+			element: input.element,
+			label: input.label,
+			isDisabled: input.disabled
+		});
+		const { itemProps } = registration;
+		const result = {
+			isDragging: registration.isDragging,
+			pointerProps: Object.freeze({
+				onDragstart: itemProps.onDragstart,
+				onMousedown: itemProps.onMousedown,
+				onPointerdown: itemProps.onPointerdown,
+				onTouchstart: itemProps.onTouchstart
+			}),
+			dispose: () => {
+				registration.dispose();
+				if (keys.get(id) === input.key) keys.delete(id);
+			}
+		};
+		return Object.freeze(result);
+	};
+	return Object.freeze({
+		isDragging: sortable.isSorting,
+		dropTarget: shallowReadonly(dropTarget),
+		registerItem,
+		move,
+		cancel: () => sortable.cancel()
+	});
+}
+//#endregion
+//#region src/families/data/tree/tree-virtualizer.ts
+const defaultInitialRect = Object.freeze({
+	width: 0,
+	height: 320
+});
+/**
+* Create a windowing adapter for one TreeRoot.
+*
+* Pass the result to `TreeRoot`'s `virtualizer` prop: the tree element becomes
+* the scroll viewport, the root slot's `items` shrink to the rendered window,
+* and keyboard focus scrolls rows into the window before focusing them. Style
+* each row from `getItemStart(item.index)` and size an inner spacer from
+* `totalSize`. Must be called during component setup; it is disposed with the
+* calling scope.
+*
+* @example
+* ```ts
+* const virtualizer = useTreeVirtualizer({ itemSize: 28 });
+* ```
+*/
+function useTreeVirtualizer(options = {}) {
+	const source = shallowRef(null);
+	const controller = useVirtualizer({
+		...options.itemSize === void 0 ? { estimateItemSize: options.estimateItemSize ?? 32 } : { itemSize: options.itemSize },
+		count: () => source.value?.count() ?? 0,
+		overscan: options.overscan ?? 4,
+		initialRect: options.initialRect ?? defaultInitialRect,
+		getItemKey: (index) => source.value?.getKey(index) ?? index
+	});
+	let disposed = false;
+	onScopeDispose(() => {
+		disposed = true;
+	});
+	const starts = computed(() => new Map(controller.virtualItems.value.map((item) => [item.index, item.start])));
+	return Object.freeze({
+		virtualItems: controller.virtualItems,
+		totalSize: controller.totalSize,
+		getItemStart: (index) => starts.value.get(index) ?? 0,
+		connect: (next) => {
+			source.value = next;
+		},
+		setViewport: (element) => {
+			if (!disposed) controller.setViewport(element);
+		},
+		measureElement: (element, index) => {
+			if (!disposed && options.itemSize === void 0) controller.measureElement(element, index);
+		},
+		scrollToIndex: (index) => {
+			if (disposed || index < 0 || index >= (source.value?.count() ?? 0)) return;
+			controller.scrollToIndex(index, "auto");
+		}
+	});
+}
+//#endregion
+export { tree_item_default as a, flattenVisibleTree as c, toggleTreeChecked as d, tree_item_checkbox_default as i, indexTree as l, useTreeReorder as n, tree_root_default as o, tree_item_toggle_default as r, deriveTreeCheckedStates as s, useTreeVirtualizer as t, normalizeTreeChecked as u };