@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/tree-view/index.js

@@ -0,0 +1,1279 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { E as isEditableElement, L as ariaAttr, t as getByTypeahead, w as isAnchorElement, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { h as isModifierKey, l as isComposingEvent, m as isLeftClick, r as getEventKey, s as getEventTarget } from "../../event-bTItRgiw.js";
+import { o as setElementValue } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { a as diff, b as toArray, f as last, h as partition, n as addOrRemove, o as first, t as add, v as remove, x as uniq } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { Y as isArray, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { t as ensure } from "../../warning-CrzBpWT1.js";
+import { n as filePathToTree, t as TreeCollection } from "../../collection-CJU0oDtX.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/tree-view/anatomy.ts
+const anatomy = createAnatomy("tree-view").parts("branch", "branchContent", "branchControl", "branchIndentGuide", "branchIndicator", "branchText", "branchTrigger", "item", "itemIndicator", "itemText", "label", "nodeCheckbox", "nodeRenameInput", "root", "tree");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/tree-view/collection.ts
+const collection = (options) => {
+	return new TreeCollection(options);
+};
+collection.empty = () => {
+	return new TreeCollection({ rootNode: { children: [] } });
+};
+function filePathCollection(paths) {
+	return filePathToTree(paths);
+}
+//#endregion
+//#region src/machines/tree-view/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `tree-view:${ctx.id}:root`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `tree-view:${ctx.id}:label`;
+const getNodeId = (ctx, value) => ctx.ids?.node?.(value) ?? `tree-view:${ctx.id}:node:${value}`;
+const getTreeId = (ctx) => ctx.ids?.tree ?? `tree-view:${ctx.id}:tree`;
+const getRenameInputId = (ctx, value) => `tree-view:${ctx.id}:rename-input:${value}`;
+const focusNode = (ctx, value) => {
+	if (value == null) return;
+	ctx.getById(getNodeId(ctx, value))?.focus();
+};
+const getRenameInputEl = (ctx, value) => {
+	return ctx.getById(getRenameInputId(ctx, value));
+};
+//#endregion
+//#region src/machines/tree-view/utils/checked-state.ts
+function getCheckedState(collection, node, checkedValue) {
+	const value = collection.getNodeValue(node);
+	if (!collection.isBranchNode(node)) return checkedValue.includes(value);
+	const childValues = collection.getDescendantValues(value);
+	const allChecked = childValues.every((v) => checkedValue.includes(v));
+	const someChecked = childValues.some((v) => checkedValue.includes(v));
+	return allChecked ? true : someChecked ? "indeterminate" : false;
+}
+function toggleBranchChecked(collection, value, checkedValue) {
+	const childValues = collection.getDescendantValues(value);
+	return uniq(childValues.every((child) => checkedValue.includes(child)) ? remove(checkedValue, ...childValues) : add(checkedValue, ...childValues));
+}
+function getCheckedValueMap(collection, checkedValue) {
+	const map = /* @__PURE__ */ new Map();
+	collection.visit({ onEnter: (node) => {
+		const value = collection.getNodeValue(node);
+		const isBranch = collection.isBranchNode(node);
+		const checked = getCheckedState(collection, node, checkedValue);
+		map.set(value, {
+			type: isBranch ? "branch" : "leaf",
+			checked
+		});
+	} });
+	return map;
+}
+//#endregion
+//#region src/machines/tree-view/connect.ts
+function connect(service, normalize) {
+	const { context, scope, computed, prop, send } = service;
+	const collection = prop("collection");
+	const translations = prop("translations");
+	const expandedValue = Array.from(context.get("expandedValue"));
+	const selectedValue = Array.from(context.get("selectedValue"));
+	const checkedValue = Array.from(context.get("checkedValue"));
+	const isTypingAhead = computed("isTypingAhead");
+	const focusedValue = context.get("focusedValue");
+	const loadingStatus = context.get("loadingStatus");
+	const renamingValue = context.get("renamingValue");
+	const skip = ({ indexPath }) => {
+		return collection.getValuePath(indexPath).slice(0, -1).some((value) => !expandedValue.includes(value));
+	};
+	const firstNode = collection.getFirstNode(void 0, { skip });
+	const firstNodeValue = firstNode ? collection.getNodeValue(firstNode) : null;
+	function getNodeState(props) {
+		const { node, indexPath } = props;
+		const value = collection.getNodeValue(node);
+		return {
+			id: getNodeId(scope, value),
+			value,
+			indexPath,
+			valuePath: collection.getValuePath(indexPath),
+			disabled: Boolean(node.disabled),
+			focused: focusedValue == null ? firstNodeValue === value : focusedValue === value,
+			selected: selectedValue.includes(value),
+			expanded: expandedValue.includes(value),
+			loading: loadingStatus[value] === "loading",
+			depth: indexPath.length,
+			isBranch: collection.isBranchNode(node),
+			renaming: renamingValue === value,
+			get checked() {
+				return getCheckedState(collection, node, checkedValue);
+			}
+		};
+	}
+	return {
+		collection,
+		expandedValue,
+		selectedValue,
+		checkedValue,
+		toggleChecked(value, isBranch) {
+			send({
+				type: "CHECKED.TOGGLE",
+				value,
+				isBranch
+			});
+		},
+		setChecked(value) {
+			send({
+				type: "CHECKED.SET",
+				value
+			});
+		},
+		clearChecked() {
+			send({ type: "CHECKED.CLEAR" });
+		},
+		getCheckedMap() {
+			return getCheckedValueMap(collection, checkedValue);
+		},
+		expand(value) {
+			send({
+				type: value ? "BRANCH.EXPAND" : "EXPANDED.ALL",
+				value
+			});
+		},
+		collapse(value) {
+			send({
+				type: value ? "BRANCH.COLLAPSE" : "EXPANDED.CLEAR",
+				value
+			});
+		},
+		deselect(value) {
+			send({
+				type: value ? "NODE.DESELECT" : "SELECTED.CLEAR",
+				value
+			});
+		},
+		select(value) {
+			send({
+				type: value ? "NODE.SELECT" : "SELECTED.ALL",
+				value,
+				isTrusted: false
+			});
+		},
+		getVisibleNodes() {
+			return computed("visibleNodes");
+		},
+		focus(value) {
+			focusNode(scope, value);
+		},
+		selectParent(value) {
+			const parentNode = collection.getParentNode(value);
+			if (!parentNode) return;
+			const _selectedValue = add(selectedValue, collection.getNodeValue(parentNode));
+			send({
+				type: "SELECTED.SET",
+				value: _selectedValue,
+				src: "select.parent"
+			});
+		},
+		expandParent(value) {
+			const parentNode = collection.getParentNode(value);
+			if (!parentNode) return;
+			const _expandedValue = add(expandedValue, collection.getNodeValue(parentNode));
+			send({
+				type: "EXPANDED.SET",
+				value: _expandedValue,
+				src: "expand.parent"
+			});
+		},
+		setExpandedValue(value) {
+			const _expandedValue = uniq(value);
+			send({
+				type: "EXPANDED.SET",
+				value: _expandedValue
+			});
+		},
+		setSelectedValue(value) {
+			const _selectedValue = uniq(value);
+			send({
+				type: "SELECTED.SET",
+				value: _selectedValue
+			});
+		},
+		startRenaming(value) {
+			send({
+				type: "NODE.RENAME",
+				value
+			});
+		},
+		submitRenaming(value, label) {
+			send({
+				type: "RENAME.SUBMIT",
+				value,
+				label
+			});
+		},
+		cancelRenaming() {
+			send({ type: "RENAME.CANCEL" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir")
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				id: getLabelId(scope),
+				dir: prop("dir")
+			});
+		},
+		getTreeProps() {
+			return normalize.element({
+				...parts.tree.attrs,
+				id: getTreeId(scope),
+				dir: prop("dir"),
+				role: "tree",
+				"aria-label": translations.treeLabel,
+				"aria-labelledby": getLabelId(scope),
+				"aria-multiselectable": prop("selectionMode") === "multiple" || void 0,
+				tabIndex: -1,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					const target = getEventTarget(event);
+					if (isEditableElement(target)) return;
+					const node = target?.closest("[data-part=branch-control], [data-part=item]");
+					if (!node) return;
+					const nodeId = node.dataset.value;
+					if (nodeId == null) {
+						console.warn(`[wirekyt/tree-view] Node id not found for node`, node);
+						return;
+					}
+					const isBranchNode = node.matches("[data-part=branch-control]");
+					const keyMap = {
+						ArrowDown(event) {
+							if (isModifierKey(event)) return;
+							event.preventDefault();
+							send({
+								type: "NODE.ARROW_DOWN",
+								id: nodeId,
+								shiftKey: event.shiftKey
+							});
+						},
+						ArrowUp(event) {
+							if (isModifierKey(event)) return;
+							event.preventDefault();
+							send({
+								type: "NODE.ARROW_UP",
+								id: nodeId,
+								shiftKey: event.shiftKey
+							});
+						},
+						ArrowLeft(event) {
+							if (isModifierKey(event) || node.dataset.disabled) return;
+							event.preventDefault();
+							send({
+								type: isBranchNode ? "BRANCH_NODE.ARROW_LEFT" : "NODE.ARROW_LEFT",
+								id: nodeId
+							});
+						},
+						ArrowRight(event) {
+							if (!isBranchNode || node.dataset.disabled) return;
+							event.preventDefault();
+							send({
+								type: "BRANCH_NODE.ARROW_RIGHT",
+								id: nodeId
+							});
+						},
+						Home(event) {
+							if (isModifierKey(event)) return;
+							event.preventDefault();
+							send({
+								type: "NODE.HOME",
+								id: nodeId,
+								shiftKey: event.shiftKey
+							});
+						},
+						End(event) {
+							if (isModifierKey(event)) return;
+							event.preventDefault();
+							send({
+								type: "NODE.END",
+								id: nodeId,
+								shiftKey: event.shiftKey
+							});
+						},
+						Space(event) {
+							if (node.dataset.disabled) return;
+							if (isTypingAhead) send({
+								type: "TREE.TYPEAHEAD",
+								key: event.key
+							});
+							else keyMap.Enter?.(event);
+						},
+						Enter(event) {
+							if (node.dataset.disabled) return;
+							if (isAnchorElement(target) && isModifierKey(event)) return;
+							send({
+								type: isBranchNode ? "BRANCH_NODE.CLICK" : "NODE.CLICK",
+								id: nodeId,
+								src: "keyboard"
+							});
+							if (!isAnchorElement(target)) event.preventDefault();
+						},
+						"*"(event) {
+							if (node.dataset.disabled) return;
+							event.preventDefault();
+							send({
+								type: "SIBLINGS.EXPAND",
+								id: nodeId
+							});
+						},
+						a(event) {
+							if (!event.metaKey || node.dataset.disabled) return;
+							event.preventDefault();
+							send({
+								type: "SELECTED.ALL",
+								moveFocus: true
+							});
+						},
+						F2(event) {
+							if (node.dataset.disabled) return;
+							const canRenameFn = prop("canRename");
+							if (!canRenameFn) return;
+							const indexPath = collection.getIndexPath(nodeId);
+							if (indexPath) {
+								const node = collection.at(indexPath);
+								if (node && !canRenameFn(node, indexPath)) return;
+							}
+							event.preventDefault();
+							send({
+								type: "NODE.RENAME",
+								value: nodeId
+							});
+						}
+					};
+					const exec = keyMap[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						return;
+					}
+					if (!getByTypeahead.isValidEvent(event)) return;
+					send({
+						type: "TREE.TYPEAHEAD",
+						key: event.key,
+						id: nodeId
+					});
+					event.preventDefault();
+				}
+			});
+		},
+		getNodeState,
+		getItemProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.item.attrs,
+				id: nodeState.id,
+				dir: prop("dir"),
+				"data-ownedby": getTreeId(scope),
+				"data-path": props.indexPath.join("/"),
+				"data-value": nodeState.value,
+				tabIndex: nodeState.focused ? 0 : -1,
+				"data-focus": dataAttr(nodeState.focused),
+				role: "treeitem",
+				"aria-current": nodeState.selected ? "true" : void 0,
+				"aria-selected": nodeState.disabled ? void 0 : nodeState.selected,
+				"data-selected": dataAttr(nodeState.selected),
+				"aria-disabled": ariaAttr(nodeState.disabled),
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-renaming": dataAttr(nodeState.renaming),
+				"data-checked": dataAttr(nodeState.checked === true),
+				"data-indeterminate": dataAttr(nodeState.checked === "indeterminate"),
+				"aria-level": nodeState.depth,
+				"data-depth": nodeState.depth,
+				style: { "--depth": nodeState.depth },
+				onFocus(event) {
+					event.stopPropagation();
+					send({
+						type: "NODE.FOCUS",
+						id: nodeState.value
+					});
+				},
+				onClick(event) {
+					if (nodeState.disabled) return;
+					if (!isLeftClick(event)) return;
+					if (isAnchorElement(event.currentTarget) && isModifierKey(event)) return;
+					const isMetaKey = event.metaKey || event.ctrlKey;
+					send({
+						type: "NODE.CLICK",
+						id: nodeState.value,
+						shiftKey: event.shiftKey,
+						ctrlKey: isMetaKey
+					});
+					event.stopPropagation();
+					if (!isAnchorElement(event.currentTarget)) event.preventDefault();
+				}
+			});
+		},
+		getItemTextProps(props) {
+			const itemState = getNodeState(props);
+			return normalize.element({
+				...parts.itemText.attrs,
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-selected": dataAttr(itemState.selected),
+				"data-focus": dataAttr(itemState.focused)
+			});
+		},
+		getItemIndicatorProps(props) {
+			const itemState = getNodeState(props);
+			return normalize.element({
+				...parts.itemIndicator.attrs,
+				"aria-hidden": true,
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-selected": dataAttr(itemState.selected),
+				"data-focus": dataAttr(itemState.focused),
+				hidden: !itemState.selected
+			});
+		},
+		getBranchProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branch.attrs,
+				"data-depth": nodeState.depth,
+				dir: prop("dir"),
+				"data-branch": nodeState.value,
+				role: "treeitem",
+				"data-ownedby": getTreeId(scope),
+				"data-value": nodeState.value,
+				"aria-level": nodeState.depth,
+				"aria-selected": nodeState.disabled ? void 0 : nodeState.selected,
+				"data-path": props.indexPath.join("/"),
+				"data-selected": dataAttr(nodeState.selected),
+				"aria-expanded": nodeState.expanded,
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"aria-disabled": ariaAttr(nodeState.disabled),
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-loading": dataAttr(nodeState.loading),
+				"aria-busy": ariaAttr(nodeState.loading),
+				style: { "--depth": nodeState.depth }
+			});
+		},
+		getBranchIndicatorProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchIndicator.attrs,
+				"aria-hidden": true,
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-selected": dataAttr(nodeState.selected),
+				"data-focus": dataAttr(nodeState.focused),
+				"data-loading": dataAttr(nodeState.loading)
+			});
+		},
+		getBranchTriggerProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchTrigger.attrs,
+				role: "button",
+				dir: prop("dir"),
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"data-value": nodeState.value,
+				"data-loading": dataAttr(nodeState.loading),
+				disabled: nodeState.loading,
+				onClick(event) {
+					if (nodeState.disabled || nodeState.loading) return;
+					send({
+						type: "BRANCH_TOGGLE.CLICK",
+						id: nodeState.value
+					});
+					event.stopPropagation();
+				}
+			});
+		},
+		getBranchControlProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchControl.attrs,
+				role: "button",
+				id: nodeState.id,
+				dir: prop("dir"),
+				tabIndex: nodeState.focused ? 0 : -1,
+				"data-path": props.indexPath.join("/"),
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-selected": dataAttr(nodeState.selected),
+				"data-focus": dataAttr(nodeState.focused),
+				"data-renaming": dataAttr(nodeState.renaming),
+				"data-checked": dataAttr(nodeState.checked === true),
+				"data-indeterminate": dataAttr(nodeState.checked === "indeterminate"),
+				"data-value": nodeState.value,
+				"data-depth": nodeState.depth,
+				"data-loading": dataAttr(nodeState.loading),
+				"aria-busy": ariaAttr(nodeState.loading),
+				onFocus(event) {
+					send({
+						type: "NODE.FOCUS",
+						id: nodeState.value
+					});
+					event.stopPropagation();
+				},
+				onClick(event) {
+					if (nodeState.disabled) return;
+					if (nodeState.loading) return;
+					if (!isLeftClick(event)) return;
+					if (isAnchorElement(event.currentTarget) && isModifierKey(event)) return;
+					const isMetaKey = event.metaKey || event.ctrlKey;
+					send({
+						type: "BRANCH_NODE.CLICK",
+						id: nodeState.value,
+						shiftKey: event.shiftKey,
+						ctrlKey: isMetaKey
+					});
+					event.stopPropagation();
+				}
+			});
+		},
+		getBranchTextProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(nodeState.disabled),
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"data-loading": dataAttr(nodeState.loading)
+			});
+		},
+		getBranchContentProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchContent.attrs,
+				role: "group",
+				dir: prop("dir"),
+				"data-state": nodeState.expanded ? "open" : "closed",
+				"data-depth": nodeState.depth,
+				"data-path": props.indexPath.join("/"),
+				"data-value": nodeState.value,
+				hidden: !nodeState.expanded
+			});
+		},
+		getBranchIndentGuideProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.element({
+				...parts.branchIndentGuide.attrs,
+				"data-depth": nodeState.depth
+			});
+		},
+		getNodeCheckboxProps(props) {
+			const nodeState = getNodeState(props);
+			const checkedState = nodeState.checked;
+			return normalize.element({
+				...parts.nodeCheckbox.attrs,
+				tabIndex: -1,
+				role: "checkbox",
+				"data-state": checkedState === true ? "checked" : checkedState === false ? "unchecked" : "indeterminate",
+				"aria-checked": checkedState === true ? "true" : checkedState === false ? "false" : "mixed",
+				"data-disabled": dataAttr(nodeState.disabled),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (nodeState.disabled) return;
+					if (!isLeftClick(event)) return;
+					send({
+						type: "CHECKED.TOGGLE",
+						value: nodeState.value,
+						isBranch: nodeState.isBranch
+					});
+					event.stopPropagation();
+					event.currentTarget.closest("[role=treeitem]")?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getNodeRenameInputProps(props) {
+			const nodeState = getNodeState(props);
+			return normalize.input({
+				...parts.nodeRenameInput.attrs,
+				id: getRenameInputId(scope, nodeState.value),
+				type: "text",
+				"aria-label": translations.renameInputLabel,
+				hidden: !nodeState.renaming,
+				onKeyDown(event) {
+					if (isComposingEvent(event)) return;
+					if (event.key === "Escape") {
+						send({ type: "RENAME.CANCEL" });
+						event.preventDefault();
+					}
+					if (event.key === "Enter") {
+						send({
+							type: "RENAME.SUBMIT",
+							label: event.currentTarget.value
+						});
+						event.preventDefault();
+					}
+					event.stopPropagation();
+				},
+				onBlur(event) {
+					send({
+						type: "RENAME.SUBMIT",
+						label: event.currentTarget.value
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/tree-view/utils/expand-branch.ts
+function expandBranches(params, values) {
+	const { context, prop, refs } = params;
+	if (!prop("loadChildren")) {
+		context.set("expandedValue", (prev) => uniq(add(prev, ...values)));
+		return;
+	}
+	const loadingStatus = context.get("loadingStatus");
+	const [loadedValues, loadingValues] = partition(values, (value) => loadingStatus[value] === "loaded");
+	if (loadedValues.length > 0) context.set("expandedValue", (prev) => uniq(add(prev, ...loadedValues)));
+	if (loadingValues.length === 0) return;
+	const collection = prop("collection");
+	const [nodeWithChildren, nodeWithoutChildren] = partition(loadingValues, (id) => {
+		const node = collection.findNode(id);
+		return collection.getNodeChildren(node).length > 0;
+	});
+	if (nodeWithChildren.length > 0) context.set("expandedValue", (prev) => uniq(add(prev, ...nodeWithChildren)));
+	if (nodeWithoutChildren.length === 0) return;
+	context.set("loadingStatus", (prev) => ({
+		...prev,
+		...nodeWithoutChildren.reduce((acc, id) => ({
+			...acc,
+			[id]: "loading"
+		}), {})
+	}));
+	const nodesToLoad = nodeWithoutChildren.map((id) => {
+		const indexPath = collection.getIndexPath(id);
+		return {
+			id,
+			indexPath,
+			valuePath: collection.getValuePath(indexPath),
+			node: collection.findNode(id)
+		};
+	});
+	const pendingAborts = refs.get("pendingAborts");
+	const loadChildren = prop("loadChildren");
+	ensure(loadChildren, () => "[wirekyt/tree-view] `loadChildren` is required for async expansion");
+	const proms = nodesToLoad.map(({ id, indexPath, valuePath, node }) => {
+		const existingAbort = pendingAborts.get(id);
+		if (existingAbort) {
+			existingAbort.abort();
+			pendingAborts.delete(id);
+		}
+		const abortController = new AbortController();
+		pendingAborts.set(id, abortController);
+		return loadChildren({
+			valuePath,
+			indexPath,
+			node,
+			signal: abortController.signal
+		});
+	});
+	Promise.allSettled(proms).then((results) => {
+		const loadedValues = [];
+		const nodeWithErrors = [];
+		const nextLoadingStatus = context.get("loadingStatus");
+		let collection = prop("collection");
+		results.forEach((result, index) => {
+			const { id, indexPath, node, valuePath } = nodesToLoad[index];
+			if (result.status === "fulfilled") {
+				nextLoadingStatus[id] = "loaded";
+				loadedValues.push(id);
+				collection = collection.replace(indexPath, {
+					...node,
+					children: result.value
+				});
+			} else {
+				pendingAborts.delete(id);
+				Reflect.deleteProperty(nextLoadingStatus, id);
+				nodeWithErrors.push({
+					node,
+					error: result.reason,
+					indexPath,
+					valuePath
+				});
+			}
+		});
+		context.set("loadingStatus", nextLoadingStatus);
+		if (loadedValues.length) {
+			context.set("expandedValue", (prev) => uniq(add(prev, ...loadedValues)));
+			prop("onLoadChildrenComplete")?.({ collection });
+		}
+		if (nodeWithErrors.length) prop("onLoadChildrenError")?.({ nodes: nodeWithErrors });
+	});
+}
+//#endregion
+//#region src/machines/tree-view/utils/visit-skip.ts
+function skipFn(params) {
+	const { prop, context } = params;
+	return function skip({ indexPath }) {
+		return prop("collection").getValuePath(indexPath).slice(0, -1).some((value) => !context.get("expandedValue").includes(value));
+	};
+}
+//#endregion
+//#region src/machines/tree-view/machine.ts
+const { and } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			selectionMode: "single",
+			collection: collection.empty(),
+			typeahead: true,
+			expandOnClick: true,
+			defaultExpandedValue: [],
+			defaultSelectedValue: [],
+			...props,
+			translations: {
+				treeLabel: "Tree View",
+				renameInputLabel: "Rename tree item",
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			expandedValue: bindable(() => ({
+				defaultValue: prop("defaultExpandedValue"),
+				value: prop("expandedValue"),
+				isEqual,
+				onChange(expandedValue) {
+					const focusedValue = getContext().get("focusedValue");
+					prop("onExpandedChange")?.({
+						expandedValue,
+						focusedValue,
+						get expandedNodes() {
+							return prop("collection").findNodes(expandedValue);
+						}
+					});
+				}
+			})),
+			selectedValue: bindable(() => ({
+				defaultValue: prop("defaultSelectedValue"),
+				value: prop("selectedValue"),
+				isEqual,
+				onChange(selectedValue) {
+					const focusedValue = getContext().get("focusedValue");
+					prop("onSelectionChange")?.({
+						selectedValue,
+						focusedValue,
+						get selectedNodes() {
+							return prop("collection").findNodes(selectedValue);
+						}
+					});
+				}
+			})),
+			focusedValue: bindable(() => ({
+				defaultValue: prop("defaultFocusedValue") || null,
+				value: prop("focusedValue"),
+				onChange(focusedValue) {
+					prop("onFocusChange")?.({
+						focusedValue,
+						get focusedNode() {
+							return focusedValue ? prop("collection").findNode(focusedValue) : null;
+						}
+					});
+				}
+			})),
+			loadingStatus: bindable(() => ({ defaultValue: {} })),
+			checkedValue: bindable(() => ({
+				defaultValue: prop("defaultCheckedValue") || [],
+				value: prop("checkedValue"),
+				isEqual,
+				onChange(value) {
+					prop("onCheckedChange")?.({ checkedValue: value });
+				}
+			})),
+			renamingValue: bindable(() => ({
+				sync: true,
+				defaultValue: null
+			}))
+		};
+	},
+	refs() {
+		return {
+			typeaheadState: { ...getByTypeahead.defaultOptions },
+			pendingAborts: /* @__PURE__ */ new Map()
+		};
+	},
+	computed: {
+		isMultipleSelection: ({ prop }) => prop("selectionMode") === "multiple",
+		isTypingAhead: ({ refs }) => refs.get("typeaheadState").keysSoFar.length > 0,
+		visibleNodes: ({ prop, context }) => {
+			const nodes = [];
+			prop("collection").visit({
+				skip: skipFn({
+					prop,
+					context
+				}),
+				onEnter: (node, indexPath) => {
+					nodes.push({
+						node,
+						indexPath
+					});
+				}
+			});
+			return nodes;
+		}
+	},
+	on: {
+		"EXPANDED.SET": { actions: ["setExpanded"] },
+		"EXPANDED.CLEAR": { actions: ["clearExpanded"] },
+		"EXPANDED.ALL": { actions: ["expandAllBranches"] },
+		"BRANCH.EXPAND": { actions: ["expandBranches"] },
+		"BRANCH.COLLAPSE": { actions: ["collapseBranches"] },
+		"SELECTED.SET": { actions: ["setSelected"] },
+		"SELECTED.ALL": [{
+			guard: and("isMultipleSelection", "moveFocus"),
+			actions: ["selectAllNodes", "focusTreeLastNode"]
+		}, {
+			guard: "isMultipleSelection",
+			actions: ["selectAllNodes"]
+		}],
+		"SELECTED.CLEAR": { actions: ["clearSelected"] },
+		"NODE.SELECT": { actions: ["selectNode"] },
+		"NODE.DESELECT": { actions: ["deselectNode"] },
+		"CHECKED.TOGGLE": { actions: ["toggleChecked"] },
+		"CHECKED.SET": { actions: ["setChecked"] },
+		"CHECKED.CLEAR": { actions: ["clearChecked"] },
+		"NODE.FOCUS": { actions: ["setFocusedNode"] },
+		"NODE.ARROW_DOWN": [{
+			guard: and("isShiftKey", "isMultipleSelection"),
+			actions: ["focusTreeNextNode", "extendSelectionToNextNode"]
+		}, { actions: ["focusTreeNextNode"] }],
+		"NODE.ARROW_UP": [{
+			guard: and("isShiftKey", "isMultipleSelection"),
+			actions: ["focusTreePrevNode", "extendSelectionToPrevNode"]
+		}, { actions: ["focusTreePrevNode"] }],
+		"NODE.ARROW_LEFT": { actions: ["focusBranchNode"] },
+		"BRANCH_NODE.ARROW_LEFT": [{
+			guard: "isBranchExpanded",
+			actions: ["collapseBranch"]
+		}, { actions: ["focusBranchNode"] }],
+		"BRANCH_NODE.ARROW_RIGHT": [{
+			guard: and("isBranchFocused", "isBranchExpanded"),
+			actions: ["focusBranchFirstNode"]
+		}, { actions: ["expandBranch"] }],
+		"SIBLINGS.EXPAND": { actions: ["expandSiblingBranches"] },
+		"NODE.HOME": [{
+			guard: and("isShiftKey", "isMultipleSelection"),
+			actions: ["extendSelectionToFirstNode", "focusTreeFirstNode"]
+		}, { actions: ["focusTreeFirstNode"] }],
+		"NODE.END": [{
+			guard: and("isShiftKey", "isMultipleSelection"),
+			actions: ["extendSelectionToLastNode", "focusTreeLastNode"]
+		}, { actions: ["focusTreeLastNode"] }],
+		"NODE.CLICK": [
+			{
+				guard: and("isCtrlKey", "isMultipleSelection"),
+				actions: ["toggleNodeSelection"]
+			},
+			{
+				guard: and("isShiftKey", "isMultipleSelection"),
+				actions: ["extendSelectionToNode"]
+			},
+			{ actions: ["selectNode"] }
+		],
+		"BRANCH_NODE.CLICK": [
+			{
+				guard: and("isCtrlKey", "isMultipleSelection"),
+				actions: ["toggleNodeSelection"]
+			},
+			{
+				guard: and("isShiftKey", "isMultipleSelection"),
+				actions: ["extendSelectionToNode"]
+			},
+			{
+				guard: "expandOnClick",
+				actions: ["selectNode", "toggleBranchNode"]
+			},
+			{ actions: ["selectNode"] }
+		],
+		"BRANCH_TOGGLE.CLICK": { actions: ["toggleBranchNode"] },
+		"TREE.TYPEAHEAD": { actions: ["focusMatchedNode"] }
+	},
+	exit: ["clearPendingAborts"],
+	states: {
+		idle: { on: { "NODE.RENAME": {
+			target: "renaming",
+			actions: ["setRenamingValue"]
+		} } },
+		renaming: {
+			entry: ["syncRenameInput", "focusRenameInput"],
+			on: {
+				"RENAME.SUBMIT": {
+					guard: "isRenameLabelValid",
+					target: "idle",
+					actions: ["submitRenaming"]
+				},
+				"RENAME.CANCEL": {
+					target: "idle",
+					actions: ["cancelRenaming"]
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isBranchFocused: ({ context, event }) => context.get("focusedValue") === event.id,
+			isBranchExpanded: ({ context, event }) => context.get("expandedValue").includes(event.id),
+			isShiftKey: ({ event }) => event.shiftKey,
+			isCtrlKey: ({ event }) => event.ctrlKey,
+			hasSelectedItems: ({ context }) => context.get("selectedValue").length > 0,
+			isMultipleSelection: ({ prop }) => prop("selectionMode") === "multiple",
+			moveFocus: ({ event }) => !!event.moveFocus,
+			expandOnClick: ({ prop }) => !!prop("expandOnClick"),
+			isRenameLabelValid: ({ event }) => event.label.trim() !== ""
+		},
+		actions: {
+			selectNode({ context, event }) {
+				const value = event.id || event.value;
+				context.set("selectedValue", (prev) => {
+					if (value == null) return prev;
+					if (!event.isTrusted && isArray(value)) return prev.concat(...value);
+					return [isArray(value) ? last(value) : value].filter(Boolean);
+				});
+			},
+			deselectNode({ context, event }) {
+				const value = toArray(event.id || event.value);
+				context.set("selectedValue", (prev) => remove(prev, ...value));
+			},
+			setFocusedNode({ context, event }) {
+				context.set("focusedValue", event.id);
+			},
+			clearFocusedNode({ context }) {
+				context.set("focusedValue", null);
+			},
+			clearSelectedItem({ context }) {
+				context.set("selectedValue", []);
+			},
+			toggleBranchNode({ context, event, action }) {
+				action(context.get("expandedValue").includes(event.id) ? ["collapseBranch"] : ["expandBranch"]);
+			},
+			expandBranch(params) {
+				const { event } = params;
+				expandBranches(params, [event.id]);
+			},
+			expandBranches(params) {
+				const { context, event } = params;
+				expandBranches(params, diff(toArray(event.value), context.get("expandedValue")));
+			},
+			collapseBranch({ context, event }) {
+				context.set("expandedValue", (prev) => remove(prev, event.id));
+			},
+			collapseBranches(params) {
+				const { context, event } = params;
+				const value = toArray(event.value);
+				context.set("expandedValue", (prev) => remove(prev, ...value));
+			},
+			setExpanded({ context, event }) {
+				if (!isArray(event.value)) return;
+				context.set("expandedValue", event.value);
+			},
+			clearExpanded({ context }) {
+				context.set("expandedValue", []);
+			},
+			setSelected({ context, event }) {
+				if (!isArray(event.value)) return;
+				context.set("selectedValue", event.value);
+			},
+			clearSelected({ context }) {
+				context.set("selectedValue", []);
+			},
+			focusTreeFirstNode(params) {
+				const { prop, scope } = params;
+				const collection = prop("collection");
+				const firstNode = collection.getFirstNode(void 0, { skip: skipFn(params) });
+				if (!firstNode) return;
+				const firstValue = collection.getNodeValue(firstNode);
+				if (scrollToNode(params, firstValue)) raf(() => focusNode(scope, firstValue));
+				else focusNode(scope, firstValue);
+			},
+			focusTreeLastNode(params) {
+				const { prop, scope } = params;
+				const collection = prop("collection");
+				const lastNode = collection.getLastNode(void 0, { skip: skipFn(params) });
+				const lastValue = collection.getNodeValue(lastNode);
+				if (scrollToNode(params, lastValue)) raf(() => focusNode(scope, lastValue));
+				else focusNode(scope, lastValue);
+			},
+			focusBranchFirstNode(params) {
+				const { event, prop, scope } = params;
+				const collection = prop("collection");
+				const branchNode = collection.findNode(event.id);
+				const firstNode = collection.getFirstNode(branchNode, { skip: skipFn(params) });
+				if (!firstNode) return;
+				const firstValue = collection.getNodeValue(firstNode);
+				if (scrollToNode(params, firstValue)) raf(() => focusNode(scope, firstValue));
+				else focusNode(scope, firstValue);
+			},
+			focusTreeNextNode(params) {
+				const { event, prop, scope } = params;
+				const collection = prop("collection");
+				const nextNode = collection.getNextNode(event.id, { skip: skipFn(params) });
+				if (!nextNode) return;
+				const nextValue = collection.getNodeValue(nextNode);
+				if (scrollToNode(params, nextValue)) raf(() => focusNode(scope, nextValue));
+				else focusNode(scope, nextValue);
+			},
+			focusTreePrevNode(params) {
+				const { event, prop, scope } = params;
+				const collection = prop("collection");
+				const prevNode = collection.getPreviousNode(event.id, { skip: skipFn(params) });
+				if (!prevNode) return;
+				const prevValue = collection.getNodeValue(prevNode);
+				if (scrollToNode(params, prevValue)) raf(() => focusNode(scope, prevValue));
+				else focusNode(scope, prevValue);
+			},
+			focusBranchNode(params) {
+				const { event, prop, scope } = params;
+				const collection = prop("collection");
+				const parentNode = collection.getParentNode(event.id);
+				const parentValue = parentNode ? collection.getNodeValue(parentNode) : void 0;
+				if (!parentValue) return;
+				if (scrollToNode(params, parentValue)) raf(() => focusNode(scope, parentValue));
+				else focusNode(scope, parentValue);
+			},
+			selectAllNodes({ context, prop }) {
+				context.set("selectedValue", prop("collection").getValues());
+			},
+			focusMatchedNode(params) {
+				const { context, prop, refs, event, scope, computed } = params;
+				const node = getByTypeahead(computed("visibleNodes").map(({ node }) => ({
+					textContent: prop("collection").stringifyNode(node),
+					id: prop("collection").getNodeValue(node)
+				})), {
+					state: refs.get("typeaheadState"),
+					activeId: context.get("focusedValue"),
+					key: event.key
+				});
+				if (!node?.id) return;
+				if (scrollToNode(params, node.id)) raf(() => focusNode(scope, node.id));
+				else focusNode(scope, node.id);
+			},
+			toggleNodeSelection({ context, event }) {
+				const selectedValue = addOrRemove(context.get("selectedValue"), event.id);
+				context.set("selectedValue", selectedValue);
+			},
+			expandAllBranches(params) {
+				const { context, prop } = params;
+				expandBranches(params, diff(prop("collection").getBranchValues(), context.get("expandedValue")));
+			},
+			expandSiblingBranches(params) {
+				const { context, event, prop } = params;
+				const collection = prop("collection");
+				const indexPath = collection.getIndexPath(event.id);
+				if (!indexPath) return;
+				expandBranches(params, diff(collection.getSiblingNodes(indexPath).map((node) => collection.getNodeValue(node)), context.get("expandedValue")));
+			},
+			extendSelectionToNode(params) {
+				const { context, event, prop, computed } = params;
+				const collection = prop("collection");
+				const anchorValue = first(context.get("selectedValue")) || collection.getNodeValue(collection.getFirstNode());
+				const targetValue = event.id;
+				let values = [anchorValue, targetValue];
+				let hits = 0;
+				computed("visibleNodes").forEach(({ node }) => {
+					const nodeValue = collection.getNodeValue(node);
+					if (hits === 1) values.push(nodeValue);
+					if (nodeValue === anchorValue || nodeValue === targetValue) hits++;
+				});
+				context.set("selectedValue", uniq(values));
+			},
+			extendSelectionToNextNode(params) {
+				const { context, event, prop } = params;
+				const collection = prop("collection");
+				const nextNode = collection.getNextNode(event.id, { skip: skipFn(params) });
+				if (!nextNode) return;
+				const values = new Set(context.get("selectedValue"));
+				const nextValue = collection.getNodeValue(nextNode);
+				if (nextValue == null) return;
+				if (values.has(event.id) && values.has(nextValue)) values.delete(event.id);
+				else if (!values.has(nextValue)) values.add(nextValue);
+				context.set("selectedValue", Array.from(values));
+			},
+			extendSelectionToPrevNode(params) {
+				const { context, event, prop } = params;
+				const collection = prop("collection");
+				const prevNode = collection.getPreviousNode(event.id, { skip: skipFn(params) });
+				if (!prevNode) return;
+				const values = new Set(context.get("selectedValue"));
+				const prevValue = collection.getNodeValue(prevNode);
+				if (prevValue == null) return;
+				if (values.has(event.id) && values.has(prevValue)) values.delete(event.id);
+				else if (!values.has(prevValue)) values.add(prevValue);
+				context.set("selectedValue", Array.from(values));
+			},
+			extendSelectionToFirstNode(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const currentSelection = first(context.get("selectedValue"));
+				const values = [];
+				collection.visit({
+					skip: skipFn(params),
+					onEnter: (node) => {
+						const nodeValue = collection.getNodeValue(node);
+						values.push(nodeValue);
+						if (nodeValue === currentSelection) return "stop";
+					}
+				});
+				context.set("selectedValue", values);
+			},
+			extendSelectionToLastNode(params) {
+				const { context, prop } = params;
+				const collection = prop("collection");
+				const currentSelection = first(context.get("selectedValue"));
+				const values = [];
+				let current = false;
+				collection.visit({
+					skip: skipFn(params),
+					onEnter: (node) => {
+						const nodeValue = collection.getNodeValue(node);
+						if (nodeValue === currentSelection) current = true;
+						if (current) values.push(nodeValue);
+					}
+				});
+				context.set("selectedValue", values);
+			},
+			clearPendingAborts({ refs }) {
+				const aborts = refs.get("pendingAborts");
+				aborts.forEach((abort) => abort.abort());
+				aborts.clear();
+			},
+			toggleChecked({ context, event, prop }) {
+				const collection = prop("collection");
+				context.set("checkedValue", (prev) => event.isBranch ? toggleBranchChecked(collection, event.value, prev) : addOrRemove(prev, event.value));
+			},
+			setChecked({ context, event }) {
+				context.set("checkedValue", event.value);
+			},
+			clearChecked({ context }) {
+				context.set("checkedValue", []);
+			},
+			setRenamingValue({ context, event, prop }) {
+				context.set("renamingValue", event.value);
+				const onRenameStartFn = prop("onRenameStart");
+				if (onRenameStartFn) {
+					const collection = prop("collection");
+					const indexPath = collection.getIndexPath(event.value);
+					if (indexPath) {
+						const node = collection.at(indexPath);
+						if (node) onRenameStartFn({
+							value: event.value,
+							node,
+							indexPath
+						});
+					}
+				}
+			},
+			submitRenaming({ context, event, prop, scope }) {
+				const renamingValue = context.get("renamingValue");
+				if (!renamingValue) return;
+				const indexPath = prop("collection").getIndexPath(renamingValue);
+				if (!indexPath) return;
+				const trimmedLabel = event.label.trim();
+				const onBeforeRenameFn = prop("onBeforeRename");
+				if (onBeforeRenameFn) {
+					if (!onBeforeRenameFn({
+						value: renamingValue,
+						label: trimmedLabel,
+						indexPath
+					})) {
+						context.set("renamingValue", null);
+						focusNode(scope, renamingValue);
+						return;
+					}
+				}
+				prop("onRenameComplete")?.({
+					value: renamingValue,
+					label: trimmedLabel,
+					indexPath
+				});
+				context.set("renamingValue", null);
+				focusNode(scope, renamingValue);
+			},
+			cancelRenaming({ context, scope }) {
+				const renamingValue = context.get("renamingValue");
+				context.set("renamingValue", null);
+				if (renamingValue) focusNode(scope, renamingValue);
+			},
+			syncRenameInput({ context, scope, prop }) {
+				const renamingValue = context.get("renamingValue");
+				if (!renamingValue) return;
+				const collection = prop("collection");
+				const node = collection.findNode(renamingValue);
+				if (!node) return;
+				const label = collection.stringifyNode(node);
+				setElementValue(getRenameInputEl(scope, renamingValue), label);
+			},
+			focusRenameInput({ context, scope }) {
+				const renamingValue = context.get("renamingValue");
+				if (!renamingValue) return;
+				const inputEl = getRenameInputEl(scope, renamingValue);
+				if (!inputEl) return;
+				inputEl.focus();
+				inputEl.select();
+			}
+		}
+	}
+});
+function scrollToNode(params, value) {
+	const { prop, scope, computed } = params;
+	const scrollToIndexFn = prop("scrollToIndexFn");
+	if (!scrollToIndexFn) return false;
+	const collection = prop("collection");
+	const visibleNodes = computed("visibleNodes");
+	for (let i = 0; i < visibleNodes.length; i++) {
+		const { node, indexPath } = visibleNodes[i];
+		if (collection.getNodeValue(node) !== value) continue;
+		scrollToIndexFn({
+			index: i,
+			node,
+			indexPath,
+			getElement: () => scope.getById(getNodeId(scope, value))
+		});
+		return true;
+	}
+	return false;
+}
+//#endregion
+//#region src/machines/tree-view/props.ts
+const props = createProps()([
+	"ids",
+	"collection",
+	"dir",
+	"expandedValue",
+	"expandOnClick",
+	"defaultFocusedValue",
+	"focusedValue",
+	"getRootNode",
+	"id",
+	"onExpandedChange",
+	"onFocusChange",
+	"onSelectionChange",
+	"checkedValue",
+	"selectedValue",
+	"selectionMode",
+	"typeahead",
+	"defaultExpandedValue",
+	"defaultSelectedValue",
+	"defaultCheckedValue",
+	"onCheckedChange",
+	"onLoadChildrenComplete",
+	"onLoadChildrenError",
+	"loadChildren",
+	"canRename",
+	"onRenameStart",
+	"onBeforeRename",
+	"onRenameComplete",
+	"scrollToIndexFn",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["node", "indexPath"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, collection, connect, filePathCollection, itemProps, machine, props, splitItemProps, splitProps };