@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/cascade-select/cascade.presentation.js

@@ -0,0 +1,771 @@
+import { parseCollection as parseCollection$1, parsePath, startOpen } from "./cascade.state.js";
+import { cascade as cascade$1 } from "./cascade.machine.js";
+import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOwns, defineComponent, disclosureTrigger, isRecord, listSurface, optionRow } from "@spinjs/runtime";
+// src/cascade-select/cascade.presentation.ts
+/** Path segments join with a comma in ids. */
+const SEP = ",";
+const pathKey = (path) => path.join(SEP);
+/** The collection crosses the prop channel as JSON text (the grammar has no
+*  recursive type), so it is parsed and validated here rather than trusted
+*  at every read. */
+const parseCollection = parseCollection$1;
+const nodeAtPath = (collection, path) => {
+	let nodes = collection;
+	let found;
+	for (const segment of path) {
+		found = nodes.find((node) => node.value === segment);
+		if (found === void 0) return void 0;
+		nodes = found.children ?? [];
+	}
+	return found;
+};
+/** The nodes along a path, one per level. */
+const itemsAlongPath = (collection, path) => {
+	const chain = [];
+	let nodes = collection;
+	for (const segment of path) {
+		const node = nodes.find((candidate) => candidate.value === segment);
+		if (node === void 0) break;
+		chain.push(node);
+		nodes = node.children ?? [];
+	}
+	return chain;
+};
+const hashValue = (value) => value.map((path) => path.join(",")).join(", ");
+const itemAt = (list, index) => index >= 0 && index < list.length ? list[index] : void 0;
+const samePath = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+/** Derive the visible levels: every node along the highlighted path
+*  contributes its children as the next level. Memoized on the collection
+*  and the highlight key: drilling in and back out restores the same
+*  array, so the row cells keep their identity and their handlers. */
+const levelsCache = /* @__PURE__ */ new WeakMap();
+const levelsOf = (collection, highlighted) => {
+	const key = pathKey(highlighted);
+	let byKey = levelsCache.get(collection);
+	if (byKey === void 0) {
+		byKey = /* @__PURE__ */ new Map();
+		levelsCache.set(collection, byKey);
+	}
+	const hit = byKey.get(key);
+	if (hit !== void 0) return hit;
+	const levels = [];
+	const indexPath = [];
+	let nodes = collection;
+	let path = [];
+	for (let depth = 0; nodes.length > 0; depth++) {
+		const items = nodes.map((node, index) => {
+			const itemPath = [...path, node.value];
+			return {
+				key: pathKey(itemPath),
+				path: itemPath,
+				value: node.value,
+				label: node.label,
+				disabled: node.disabled === true,
+				hasChildren: (node.children?.length ?? 0) > 0,
+				depth,
+				indexInLevel: index,
+				indexPath: [...indexPath, index]
+			};
+		});
+		levels.push({
+			depth,
+			path,
+			key: depth === 0 ? "root" : pathKey(path),
+			items
+		});
+		const segment = highlighted[depth];
+		if (segment === void 0) break;
+		const at = nodes.findIndex((node) => node.value === segment);
+		const node = itemAt(nodes, at);
+		const children = node?.children;
+		if (node === void 0 || children === void 0 || children.length === 0) break;
+		indexPath.push(at);
+		path = [...path, node.value];
+		nodes = children;
+	}
+	byKey.set(key, levels);
+	return levels;
+};
+const itemByPath = (collection, highlighted, path) => {
+	for (const level of levelsOf(collection, highlighted)) {
+		const found = level.items.find((item) => samePath(item.path, path));
+		if (found !== void 0) return found;
+	}
+};
+const itemStateOf = (scope, item) => {
+	const ctx = scope.context;
+	const highlight = ctx.highlightedValue;
+	const selected = ctx.value.some((path) => samePath(path, item.path));
+	const highlighted = item.path.every((segment, index) => segment === highlight[index]);
+	const children = nodeAtPath(scope.context.collection, item.path)?.children ?? [];
+	const childSegment = highlighted ? highlight[item.depth + 1] : void 0;
+	const highlightedIndex = childSegment === void 0 ? void 0 : children.findIndex((child) => child.value === childSegment);
+	return {
+		value: item.path,
+		disabled: item.disabled,
+		highlighted,
+		selected,
+		hasChildren: item.hasChildren,
+		depth: item.depth,
+		highlightedChild: childSegment,
+		highlightedIndex: highlightedIndex === void 0 || highlightedIndex < 0 ? void 0 : highlightedIndex
+	};
+};
+const itemHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const itemHandlers = (scope, item) => {
+	let byItem = itemHandlersByBridge.get(scope.send);
+	if (byItem === void 0) {
+		byItem = /* @__PURE__ */ new WeakMap();
+		itemHandlersByBridge.set(scope.send, byItem);
+	}
+	const hit = byItem.get(item);
+	if (hit !== void 0) return hit;
+	const made = {
+		onClick: () => {
+			if (item.disabled || !isInteractive$1(scope)) return;
+			scope.send({
+				type: "ITEM_CLICK",
+				value: [...item.path],
+				hasChildren: item.hasChildren
+			});
+		},
+		onPointerMove: (event) => {
+			if (!isInteractive$1(scope) || item.disabled || event.pointerType !== "mouse") return;
+			scope.send({
+				type: "ITEM_POINTER_ENTER",
+				value: [...item.path],
+				hasChildren: item.hasChildren
+			});
+		},
+		onDoubleClick: () => {
+			if (item.disabled || !isInteractive$1(scope)) return;
+			scope.send({ type: "CLOSE" });
+		}
+	};
+	byItem.set(item, made);
+	return made;
+};
+const fieldsetDisabled = (root) => {
+	const fieldset = root().closest("fieldset");
+	return fieldset !== null && fieldset.hasAttribute("disabled");
+};
+const disabledOf = (scope) => scope.context.disabled || fieldsetDisabled(scope.root);
+const isInteractive$1 = (scope) => !(disabledOf(scope) || scope.context.readOnly);
+const highlightPath = (scope, path) => {
+	scope.send({
+		type: "HIGHLIGHTED_VALUE_SET",
+		value: [...path]
+	});
+};
+/** The rows of the level holding `path`: its parent's children. */
+const siblingsOf = (scope, path) => {
+	const level = levelsOf(scope.context.collection, scope.context.highlightedValue).find((candidate) => samePath(candidate.path, path.slice(0, -1)));
+	return level === void 0 ? [] : level.items;
+};
+const rootEdge = (scope, edge) => {
+	const level = levelsOf(scope.context.collection, scope.context.highlightedValue).find((candidate) => candidate.depth === 0);
+	const items = level === void 0 ? [] : level.items;
+	return edge === "first" ? items.find((item) => !item.disabled) : [...items].reverse().find((item) => !item.disabled);
+};
+const levelEdge = (scope, edge) => {
+	const items = siblingsOf(scope, scope.context.highlightedValue);
+	return edge === "first" ? items.find((item) => !item.disabled) : [...items].reverse().find((item) => !item.disabled);
+};
+const moveHighlight = (scope, delta) => {
+	const items = siblingsOf(scope, scope.context.highlightedValue);
+	const at = items.findIndex((item) => samePath(item.path, scope.context.highlightedValue));
+	if (at === -1) {
+		const end = delta > 0 ? items.find((item) => !item.disabled) : [...items].reverse().find((item) => !item.disabled);
+		if (end !== void 0) highlightPath(scope, end.path);
+		return;
+	}
+	const loop = scope.context.loopFocus;
+	let index = at;
+	for (let count = 0; count < items.length; count++) {
+		index += delta > 0 ? 1 : -1;
+		if (index < 0 || index >= items.length) {
+			if (!loop) return;
+			index = index < 0 ? items.length - 1 : 0;
+		}
+		const item = itemAt(items, index);
+		if (item !== void 0 && !item.disabled) {
+			highlightPath(scope, item.path);
+			return;
+		}
+	}
+};
+const enterChild = (scope) => {
+	const path = scope.context.highlightedValue;
+	const children = nodeAtPath(scope.context.collection, path)?.children ?? [];
+	if (path.length === 0 || children.length === 0) return;
+	const child = children.find((node) => node.disabled !== true);
+	if (child !== void 0) highlightPath(scope, [...path, child.value]);
+};
+/** Leaving at the root level closes with focus back on the trigger. */
+const leaveChild = (scope) => {
+	const path = scope.context.highlightedValue;
+	if (path.length <= 1) {
+		scope.send({
+			type: "CLOSE",
+			restoreFocus: true
+		});
+		return;
+	}
+	highlightPath(scope, path.slice(0, -1));
+};
+const selectHighlighted = (scope) => {
+	const path = scope.context.highlightedValue;
+	const item = itemByPath(scope.context.collection, path, path);
+	if (item === void 0) return;
+	if (!scope.context.allowParentSelection && item.hasChildren) return;
+	scope.send({
+		type: "ITEM_CLICK",
+		value: [...path],
+		hasChildren: item.hasChildren
+	});
+};
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+const isExcludedTarget = (scope, target) => {
+	if (!(target instanceof Element)) return false;
+	const host = scope.root();
+	if (typeof host.querySelector !== "function") return false;
+	for (const part of ["trigger", "clearTrigger"]) {
+		const node = host.querySelector(`[id="${scope.id(part)}"]`);
+		if (node !== null && node instanceof Element && node.contains(target)) return true;
+	}
+	return false;
+};
+const focusableTarget = (target) => target instanceof Element && target.matches(FOCUSABLE);
+const isEventFn = (value) => typeof value === "function";
+const isInteractFn = (value) => typeof value === "function";
+const callInteract = (fn, details) => {
+	if (!isInteractFn(fn)) return;
+	fn(details);
+};
+const callHost = (fn, event) => {
+	if (!isEventFn(fn)) return;
+	fn(event);
+};
+const reportOutside = (scope, kind, event, contextmenu) => {
+	const focusable = focusableTarget(event.target);
+	if (kind === "pointer") callHost(scope.context.onPointerDownOutside, event);
+	else callHost(scope.context.onFocusOutside, event);
+	callInteract(scope.context.onInteractOutside, {
+		focusable,
+		contextmenu,
+		originalEvent: event
+	});
+};
+const dismissSelf = (scope, restoreFocus) => {
+	scope.send({
+		type: "CLOSE",
+		restoreFocus
+	});
+};
+const onTriggerKeydown = (scope, event) => {
+	if (event.defaultPrevented || !isInteractive$1(scope)) return;
+	const forward = scope.context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const back = scope.context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+	const openWithEdge = (end) => {
+		const target = rootEdge(scope, end);
+		scope.send({
+			type: "TRIGGER_OPEN",
+			highlight: target === void 0 ? [] : [...target.path]
+		});
+	};
+	const openPlain = () => {
+		scope.send({
+			type: "TRIGGER_OPEN",
+			highlight: []
+		});
+	};
+	switch (event.key) {
+		case "ArrowUp":
+			openWithEdge("last");
+			break;
+		case "ArrowDown":
+			if (event.altKey) openPlain();
+			else openWithEdge("first");
+			break;
+		case "Enter":
+		case " ":
+			openWithEdge("first");
+			break;
+		case back:
+			openPlain();
+			break;
+		case forward:
+			openWithEdge("first");
+			break;
+		default: return;
+	}
+	event.preventDefault();
+};
+const onContentKeydown = (scope, event) => {
+	if (event.defaultPrevented || !isInteractive$1(scope)) return;
+	const forward = scope.context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const back = scope.context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+	switch (event.key) {
+		case "Tab":
+			event.preventDefault();
+			return;
+		case "ArrowDown":
+			moveHighlight(scope, 1);
+			break;
+		case "ArrowUp":
+			moveHighlight(scope, -1);
+			break;
+		case forward:
+			enterChild(scope);
+			break;
+		case back:
+			leaveChild(scope);
+			break;
+		case "Home": {
+			const end = levelEdge(scope, "first");
+			if (end !== void 0) highlightPath(scope, end.path);
+			break;
+		}
+		case "End": {
+			const end = levelEdge(scope, "last");
+			if (end !== void 0) highlightPath(scope, end.path);
+			break;
+		}
+		case "Enter":
+		case " ":
+			selectHighlighted(scope);
+			break;
+		default: return;
+	}
+	event.preventDefault();
+};
+const onContentFocusOut = (scope, event) => {
+	if (scope.state !== "open") return;
+	const next = event.relatedTarget;
+	if (next instanceof Element && scope.root().contains(next)) return;
+	reportOutside(scope, "focus", event, false);
+	dismissSelf(scope, false);
+};
+/** The readout text: labels along each path, one selection per entry. */
+const textFor = (context) => {
+	const chains = context.value.map((path) => itemsAlongPath(context.collection, path));
+	const custom = context.formatValue;
+	if (typeof custom === "function") return formatWith(custom, chains);
+	if (context.multiple) return chains.map((chain) => chain[chain.length - 1]?.label ?? "").join(", ");
+	return chains.map((chain) => chain.map((node) => node.label).join(" / ")).join(", ");
+};
+const isFormatFn = (value) => typeof value === "function";
+const formatWith = (custom, chains) => {
+	if (!isFormatFn(custom)) return "";
+	const out = custom(chains);
+	return typeof out === "string" ? out : "";
+};
+const isScrollFn = (value) => typeof value === "function";
+const callScroll = (custom, details) => {
+	if (!isScrollFn(custom)) return;
+	custom(details);
+};
+const levelOf = (arg) => {
+	if (!isRecord(arg)) return {
+		depth: 0,
+		path: [],
+		key: "root",
+		items: []
+	};
+	const items = arg["items"];
+	const depth = arg["depth"];
+	const path = arg["path"];
+	return {
+		depth: typeof depth === "number" ? depth : 0,
+		path: Array.isArray(path) && path.every((p) => typeof p === "string") ? path : [],
+		key: typeof arg["key"] === "string" ? arg["key"] : "root",
+		items: Array.isArray(items) ? items.filter(isCascadeItem) : []
+	};
+};
+const isCascadeItem = (value) => {
+	if (!isRecord(value)) return false;
+	return typeof value["value"] === "string" && Array.isArray(value["path"]);
+};
+/** Zag's `scrollToIndexFn`: a host that scrolls its own content supplies the
+*  how (with the active row's position in its level), the reflex still owns
+*  the when. */
+const scrollParam = (scope) => {
+	const activeId = () => {
+		const highlighted = scope.context.highlightedValue;
+		return highlighted.length === 0 ? "" : scope.id("item", pathKey(highlighted));
+	};
+	const custom = scope.context.scrollToIndexFn;
+	if (typeof custom !== "function") return { activeId };
+	return {
+		activeId,
+		reveal: () => {
+			const path = scope.context.highlightedValue;
+			const level = levelsOf(scope.context.collection, path).find((candidate) => samePath(candidate.path, path.slice(0, -1)));
+			const at = level === void 0 ? -1 : level.items.findIndex((item) => samePath(item.path, path));
+			callScroll(custom, {
+				index: at < 0 ? 0 : at,
+				immediate: true,
+				depth: level === void 0 ? 0 : level.depth
+			});
+		}
+	};
+};
+const def = {
+	name: "cascade",
+	machine: (args, authored) => cascade$1(args, authored),
+	settled: ({ event, before, after, focus }) => {
+		if (after.state === "open" && before.state !== "open") focus("content");
+		if (event.type === "CLOSE" && event.restoreFocus === true) focus("trigger");
+		if (event.type === "CLEAR_TRIGGER_CLICK") focus("trigger");
+		if (event.type === "ITEM_CLICK" && before.state === "open" && after.state !== "open") focus("trigger");
+	},
+	start: (raw) => startOpen(raw) ? "open" : "idle",
+	reconcile: ({ context, parsed, authored, send, state }) => {
+		if (authored("open")) {
+			const outer = parsed["open"] === true;
+			if (state === "open" !== outer) {
+				send(outer ? { type: "CONTROLLED_OPEN" } : { type: "CONTROLLED_CLOSE" });
+				return true;
+			}
+		}
+		let moved = false;
+		const nextCollection = parseCollection$1(parsed["collection"]);
+		if (nextCollection !== context.collection) {
+			context.collection = nextCollection;
+			moved = true;
+		}
+		const invalid = parsed["invalid"] === true;
+		if (context.invalid !== invalid) {
+			context.invalid = invalid;
+			moved = true;
+		}
+		for (const name of [
+			"onFocusOutside",
+			"onInteractOutside",
+			"onPointerDownOutside",
+			"scrollToIndexFn",
+			"formatValue"
+		]) {
+			const next = parsed[name];
+			if (next !== void 0 && context[name] !== next) {
+				context[name] = next;
+				moved = true;
+			}
+		}
+		return moved;
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-invalid": scope.attr(scope.context.invalid),
+			...disabledOf(scope) ? { "data-disabled": "" } : {}
+		}) },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			htmlFor: scope.id("hiddenInput"),
+			onClick: (event) => {
+				if (event.defaultPrevented || !isInteractive$1(scope)) return;
+				scope.send({ type: "TRIGGER_FOCUS" });
+			},
+			"data-state": scope.state === "open" ? "open" : "closed",
+			...disabledOf(scope) ? { "data-disabled": "" } : {}
+		}) },
+		control: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-focus": scope.attr(scope.state === "focused"),
+			...disabledOf(scope) ? { "data-disabled": "" } : {}
+		}) },
+		trigger: { attrs: (scope) => ({
+			type: "button",
+			role: "combobox",
+			dir: scope.context.dir,
+			"data-focus": scope.attr(scope.state === "focused"),
+			...disclosureTrigger(scope, {
+				expanded: scope.state === "open",
+				hasPopup: "listbox",
+				controls: { part: "content" }
+			}),
+			...ariaLabelledBy(scope, { part: "label" }),
+			disabled: disabledOf(scope),
+			onClick: (event) => {
+				if (event.defaultPrevented || !isInteractive$1(scope)) return;
+				scope.send({ type: "TRIGGER_CLICK" });
+			},
+			onFocus: () => scope.send({ type: "TRIGGER_FOCUS" }),
+			onBlur: () => scope.send({ type: "TRIGGER_BLUR" }),
+			onKeydown: (event) => onTriggerKeydown(scope, event),
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-placement": scope.context.placement,
+			"data-placeholder-shown": scope.attr(scope.context.value.length === 0),
+			"data-readonly": scope.attr(scope.context.readOnly),
+			"data-invalid": scope.attr(scope.context.invalid),
+			...disabledOf(scope) ? { "data-disabled": "" } : {}
+		}) },
+		indicator: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			...ariaHidden(true),
+			"data-state": scope.state === "open" ? "open" : "closed",
+			...disabledOf(scope) ? { "data-disabled": "" } : {}
+		}) },
+		valueText: {
+			id: "value-text",
+			attrs: (scope) => ({
+				dir: scope.context.dir,
+				"data-state": scope.state === "open" ? "open" : "closed",
+				...disabledOf(scope) ? { "data-disabled": "" } : {}
+			})
+		},
+		clearTrigger: {
+			id: "clear-trigger",
+			attrs: (scope) => ({
+				type: "button",
+				dir: scope.context.dir,
+				"aria-label": "Clear value",
+				hidden: scope.context.value.length === 0,
+				disabled: disabledOf(scope),
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					scope.send({ type: "CLEAR_TRIGGER_CLICK" });
+				},
+				"data-state": scope.state === "open" ? "open" : "closed",
+				...disabledOf(scope) ? { "data-disabled": "" } : {}
+			})
+		},
+		positioner: { attrs: (scope) => {
+			const rect = scope.measure("trigger");
+			return {
+				dir: scope.context.dir,
+				"data-placement": scope.context.placement,
+				"data-side": scope.context.placement.split("-")[0] ?? "bottom",
+				style: { minWidth: rect === null ? "100%" : `${rect.width}px` },
+				"data-state": scope.state === "open" ? "open" : "closed",
+				...disabledOf(scope) ? { "data-disabled": "" } : {}
+			};
+		} },
+		content: { attrs: (scope) => {
+			const highlighted = scope.context.highlightedValue;
+			return {
+				role: "listbox",
+				dir: scope.context.dir,
+				...listSurface(scope, {
+					labelledBy: { part: "label" },
+					activeDescendant: highlighted.length === 0 ? void 0 : {
+						part: "item",
+						slot: pathKey(highlighted)
+					},
+					multiSelectable: scope.context.multiple,
+					required: scope.context.required,
+					readOnly: scope.context.readOnly
+				}),
+				"data-activedescendant": highlighted.length === 0 ? void 0 : scope.id("item", pathKey(highlighted)),
+				hidden: scope.state !== "open",
+				tabIndex: 0,
+				onKeydown: (event) => onContentKeydown(scope, event),
+				onFocusOut: (event) => onContentFocusOut(scope, event),
+				"use:dismissable": {
+					onOutside: (event) => {
+						if (isExcludedTarget(scope, event.target)) return;
+						reportOutside(scope, "pointer", event, event.button === 2);
+						dismissSelf(scope, !(focusableTarget(event.target) || event.button === 2));
+					},
+					onEscape: () => dismissSelf(scope, true)
+				},
+				"use:scroll-into-view": scrollParam(scope),
+				"data-state": scope.state === "open" ? "open" : "closed",
+				...disabledOf(scope) ? { "data-disabled": "" } : {}
+			};
+		} },
+		hiddenInput: {
+			id: "hidden-input",
+			attrs: (scope) => ({
+				...typeof scope.context.name === "string" && scope.context.name.length > 0 ? { name: scope.context.name } : {},
+				...typeof scope.context.form === "string" && scope.context.form.length > 0 ? { form: scope.context.form } : {},
+				disabled: disabledOf(scope),
+				required: scope.context.required,
+				readOnly: scope.context.readOnly,
+				hidden: true,
+				...ariaHidden(true),
+				...ariaLabelledBy(scope, { part: "label" }),
+				value: hashValue(scope.context.value)
+			})
+		}
+	},
+	slots: {
+		list: {
+			indexes: (context) => levelsOf(context.collection, context.highlightedValue),
+			attrs: (scope) => {
+				const level = scope.slot;
+				return {
+					id: scope.id("list", level.path.join(",")),
+					dir: scope.context.dir,
+					role: "group",
+					"data-depth": level.depth,
+					...optionRow({ level: level.depth })
+				};
+			}
+		},
+		item: {
+			indexes: (context) => levelsOf(context.collection, context.highlightedValue).flatMap((level) => level.items),
+			attrs: (scope) => {
+				const item = scope.slot;
+				const state = itemStateOf(scope, item);
+				return {
+					id: scope.id("item", pathKey(item.path)),
+					role: "treeitem",
+					dir: scope.context.dir,
+					...disclosureTrigger(scope, {
+						expanded: item.hasChildren ? state.highlighted : false,
+						hasPopup: item.hasChildren ? "menu" : void 0,
+						controls: item.hasChildren ? {
+							part: "list",
+							slot: pathKey(item.path)
+						} : void 0
+					}),
+					...ariaOwns(scope, item.hasChildren ? {
+						part: "list",
+						slot: pathKey(item.path)
+					} : void 0),
+					...ariaDisabled(item.disabled),
+					"data-value": item.path.join(","),
+					"data-disabled": item.disabled ? "" : void 0,
+					"data-highlighted": state.highlighted ? "" : void 0,
+					"data-selected": state.selected ? "" : void 0,
+					"data-depth": item.depth,
+					"data-type": item.hasChildren ? "branch" : "leaf",
+					"data-index-path": item.indexPath.join(","),
+					...itemHandlers(scope, item)
+				};
+			}
+		},
+		itemText: {
+			indexes: (context) => levelsOf(context.collection, context.highlightedValue).flatMap((level) => level.items),
+			attrs: (scope) => {
+				const item = scope.slot;
+				const state = itemStateOf(scope, item);
+				return {
+					dir: scope.context.dir,
+					"data-value": item.value,
+					"data-highlighted": state.highlighted ? "" : void 0,
+					"data-selected": state.selected ? "" : void 0,
+					"data-disabled": item.disabled ? "" : void 0
+				};
+			}
+		},
+		itemIndicator: {
+			indexes: (context) => levelsOf(context.collection, context.highlightedValue).flatMap((level) => level.items),
+			attrs: (scope) => {
+				const item = scope.slot;
+				const state = itemStateOf(scope, item);
+				return {
+					...ariaHidden(true),
+					hidden: !state.selected,
+					"data-value": item.value,
+					"data-highlighted": state.highlighted ? "" : void 0,
+					"data-type": state.hasChildren ? "branch" : "leaf",
+					"data-selected": state.selected ? "" : void 0
+				};
+			}
+		}
+	},
+	commands: {
+		focus: { view: ({ focus }) => focus("trigger") },
+		setOpen: { event: (args) => ({ type: args[0] === true ? "OPEN" : "CLOSE" }) },
+		setHighlightValue: { event: (args) => ({
+			type: "HIGHLIGHTED_VALUE_SET",
+			value: [...parsePath(args[0])]
+		}) },
+		clearHighlightValue: { event: () => ({ type: "HIGHLIGHTED_VALUE_CLEAR" }) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE_SET",
+			value: value.map((path) => [...path])
+		}) },
+		selectValue: { event: (args, context) => {
+			const value = [...parsePath(args[0])];
+			return {
+				type: "ITEM_SELECT",
+				value,
+				hasChildren: context.value.some((path) => samePath(path, value))
+			};
+		} },
+		clearValue: { event: (args) => args[0] === void 0 ? { type: "VALUE_CLEAR" } : {
+			type: "ITEM_CLEAR",
+			value: [...parsePath(args[0])]
+		} }
+	},
+	readers: {
+		open: { read: (_context, state) => state === "open" },
+		focused: { read: (_context, state) => state === "focused" },
+		multiple: { read: (context) => context.multiple },
+		disabled: { read: (context, _state, _props, root) => context.disabled || root !== void 0 && fieldsetDisabled(root) },
+		value: { read: (context) => context.value.map((path) => [...path]) },
+		highlightedValue: { read: (context) => [...context.highlightedValue] },
+		hasSelectedItems: { read: (context) => context.value.length > 0 },
+		empty: { read: (context) => context.value.length === 0 },
+		levels: { read: (context, _state, props) => levelsOf(context.collection, context.highlightedValue) }
+	},
+	methods: {
+		getLevels: { call: (context, _state, _args, props) => levelsOf(context.collection, context.highlightedValue) },
+		getItems: { call: (_context, _state, [level]) => levelOf(level).items },
+		getItemState: { call: (context, _state, [item]) => {
+			const highlight = context.highlightedValue;
+			const selected = context.value.some((path) => samePath(path, item.path));
+			const highlighted = item.path.every((segment, index) => segment === highlight[index]);
+			const children = nodeAtPath(context.collection, item.path)?.children ?? [];
+			const childSegment = highlighted ? highlight[item.depth + 1] : void 0;
+			const highlightedIndex = childSegment === void 0 ? void 0 : children.findIndex((child) => child.value === childSegment);
+			return {
+				value: item.path,
+				disabled: item.disabled,
+				highlighted,
+				selected,
+				hasChildren: item.hasChildren,
+				depth: item.depth,
+				highlightedChild: childSegment,
+				highlightedIndex: highlightedIndex === void 0 || highlightedIndex < 0 ? void 0 : highlightedIndex
+			};
+		} },
+		getValueText: { call: (context, _state, _args, _props) => textFor(context) },
+		getValueTextRows: { call: (context, _state, _args, _props) => [{ value: textFor(context) }] }
+	},
+	events: {
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state === "open"],
+			detail: (watched, _event, _props, context) => ({
+				open: watched[0] === true,
+				value: context.value.map((path) => [...path])
+			})
+		},
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => context.value.map((path) => pathKey(path)),
+			detail: (watched, _event, _props, context) => {
+				const keys = watched.filter((key) => typeof key === "string");
+				const collection = context.collection;
+				return {
+					value: keys.map((key) => key.split(SEP)),
+					items: keys.map((key) => itemsAlongPath(collection, key.split(SEP)))
+				};
+			}
+		},
+		"highlight-change": {
+			prop: "onHighlightChange",
+			watch: (context) => [pathKey(context.highlightedValue)],
+			detail: (watched, _event, _props, context) => {
+				const key = watched[0];
+				const path = typeof key === "string" && key.length > 0 ? key.split(SEP) : [];
+				const collection = context.collection;
+				return {
+					highlightedValue: [...path],
+					highlightedItems: itemsAlongPath(collection, path)
+				};
+			}
+		}
+	}
+};
+const cascade = defineComponent(def);
+export { cascade, def, hashValue, itemsAlongPath, nodeAtPath, parseCollection, pathKey };
+
+//# sourceMappingURL=cascade.presentation.js.map