@ixfx/components 0.13.2 → 0.13.3

package/dist/miller.d.ts

@@ -1,6 +1,6 @@
 import { D as TreeTickleDetail, E as TreeSelectEvent, O as TreeTickleEvent, T as TreeSelectDetail, a as TreeComponent, b as TreeItemClickDetail, i as TreeCollapseEvent, k as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, r as TreeCollapseDetail, t as TreeActivateDetail, v as TreeExpandDetail, w as TreeSearchHost, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Cj8V3uar.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
-import { S as ListSearchController } from "./index-CxZ61DO1.js";
+import { S as ListSearchController } from "./index-Dlah7Zfi.js";
 import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";

package/dist/miller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"miller.d.ts","names":[],"sources":["../src/miller/types.ts","../src/miller/miller-base.ts","../src/miller/miller-list.ts","../src/miller/miller-tree-controller.ts"],"mappings":"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"}
+{"version":3,"file":"miller.d.ts","names":[],"sources":["../src/miller/types.ts","../src/miller/miller-base.ts","../src/miller/miller-list.ts","../src/miller/miller-tree-controller.ts"],"mappings":"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"}

package/dist/miller.js

@@ -2,7 +2,7 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-D91M4Ozq.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
 import "./interaction-ZTh4htzr.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
@@ -52,86 +52,30 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 				return;
 			}
 			switch (event.key) {
-				case `ArrowDown`: {
+				case `ArrowDown`:
 					event.preventDefault();
-					const current = this.#getTickledNodeAndDepth();
-					let targetIndex = 0;
-					if (current && current.depth === currentDepth) targetIndex = Math.min(current.index + 1, col.length - 1);
-					const targetNode = col[targetIndex];
-					if (!targetNode) break;
-					this.#setTickledNode(targetNode, currentDepth);
-					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-						const prevIndex = current?.index ?? 0;
-						if (event.shiftKey) {
-							if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-								const anchorNode = col[prevIndex];
-								if (anchorNode) this.#anchor = {
-									key: anchorNode.item.key,
-									depth: currentDepth,
-									index: prevIndex,
-									selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
-								};
-							}
-							if (this.#anchor) {
-								const from = Math.min(this.#anchor.index, targetIndex);
-								const to = Math.max(this.#anchor.index, targetIndex);
-								const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
-								if (this.interactionMode === `vscode`) {
-									const snap = this.#anchor.selectionSnapshot;
-									for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
-									else this._selectedKeys.add(k);
-								} else this._selectedKeys = new Set(rangeKeys);
-							}
-						} else if (this.interactionMode === `standard`) this.#anchor = {
-							key: targetNode.item.key,
-							depth: currentDepth,
-							index: targetIndex
-						};
-						else this.#anchor = void 0;
-					}
-					this.requestUpdate();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + 1, col.length - 1));
 					break;
-				}
-				case `ArrowUp`: {
+				case `ArrowUp`:
 					event.preventDefault();
-					const current = this.#getTickledNodeAndDepth();
-					let targetIndex = 0;
-					if (current && current.depth === currentDepth) targetIndex = Math.max(current.index - 1, 0);
-					const targetNode = col[targetIndex];
-					if (!targetNode) break;
-					this.#setTickledNode(targetNode, currentDepth);
-					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-						const prevIndex = current?.index ?? 0;
-						if (event.shiftKey) {
-							if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-								const anchorNode = col[prevIndex];
-								if (anchorNode) this.#anchor = {
-									key: anchorNode.item.key,
-									depth: currentDepth,
-									index: prevIndex,
-									selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
-								};
-							}
-							if (this.#anchor) {
-								const from = Math.min(this.#anchor.index, targetIndex);
-								const to = Math.max(this.#anchor.index, targetIndex);
-								const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
-								if (this.interactionMode === `vscode`) {
-									const snap = this.#anchor.selectionSnapshot;
-									for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
-									else this._selectedKeys.add(k);
-								} else this._selectedKeys = new Set(rangeKeys);
-							}
-						} else if (this.interactionMode === `standard`) this.#anchor = {
-							key: targetNode.item.key,
-							depth: currentDepth,
-							index: targetIndex
-						};
-						else this.#anchor = void 0;
-					}
-					this.requestUpdate();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - 1, 0));
+					break;
+				case `Home`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => 0, true);
+					break;
+				case `End`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => col.length - 1, true);
+					break;
+				case `PageUp`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - this.#pageSize(currentDepth), 0), true);
+					break;
+				case `PageDown`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + this.#pageSize(currentDepth), col.length - 1), true);
 					break;
-				}
 				case `ArrowRight`: {
 					event.preventDefault();
 					const tickled = this.#getTickledNodeAndDepth();
@@ -224,14 +168,28 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			window.addEventListener(`pointermove`, this.#onResizeMove);
 			window.addEventListener(`pointerup`, this.#onResizeEnd);
 		};
+		this.#resizeRaf = null;
+		this.#resizePendingWidth = 0;
 		this.#onResizeMove = (event) => {
 			if (this.#resizingDepth < 0) return;
-			const delta = event.clientX - this.#resizeStartX;
-			const newWidth = Math.max(32, this.#resizeStartWidth + delta);
-			this.#columnWidths.set(this.#resizingDepth, newWidth);
-			this.requestUpdate();
+			this.#resizePendingWidth = Math.max(32, this.#resizeStartWidth + (event.clientX - this.#resizeStartX));
+			this.#resizeRaf ??= requestAnimationFrame(this.#applyResizeWidth);
+		};
+		this.#applyResizeWidth = () => {
+			this.#resizeRaf = null;
+			if (this.#resizingDepth < 0) return;
+			(this.shadowRoot?.querySelectorAll(`.column`)[this.#resizingDepth])?.setAttribute(`style`, this.#explicitWidthStyle(this.#resizePendingWidth));
 		};
 		this.#onResizeEnd = () => {
+			if (this.#resizeRaf !== null) {
+				cancelAnimationFrame(this.#resizeRaf);
+				this.#resizeRaf = null;
+			}
+			if (this.#resizingDepth >= 0 && this.#resizePendingWidth > 0) {
+				this.#columnWidths.set(this.#resizingDepth, this.#resizePendingWidth);
+				this.requestUpdate();
+			}
+			this.#resizePendingWidth = 0;
 			this.#resizingDepth = -1;
 			window.removeEventListener(`pointermove`, this.#onResizeMove);
 			window.removeEventListener(`pointerup`, this.#onResizeEnd);
@@ -838,7 +796,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 				this.#handleStandardClick(node, depth, event);
 				break;
 			case `manual`: break;
-			case `checked`: this.#expandNode(node, depth);
+			case `checked`: this.#expandNode(node, depth, true);
 		}
 	}
 	#handleImplicitClick(node, depth) {
@@ -848,7 +806,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
 		this._selectedNodes.clear();
 		this._selectedNodes.add(node);
-		this.#expandNode(node, depth);
+		this.#expandNode(node, depth, true);
 		if (!previous.has(node)) this.#dispatchSelectEvent(previous);
 	}
 	#handleStandardClick(node, depth, event) {
@@ -891,16 +849,22 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		} : void 0;
 		this._selectedByDepth.set(depth, node);
 		this.#lastSelectedNode = node;
-		this.#expandNode(node, depth);
+		this.#expandNode(node, depth, true);
 		if (!previous.has(node) || previous.size !== 1) this.#dispatchSelectEvent(previous);
 	}
-	#expandNode(node, depth) {
+	/**
+	* Open the column for `node`. `immediate` skips the lazy-load debounce: use
+	* it for deliberate clicks, where the user has committed to this node. The
+	* debounce is kept for keyboard navigation, which can sweep over many
+	* branches in quick succession.
+	*/
+	#expandNode(node, depth, immediate = false) {
 		if (node.item.isLeaf) {
 			this._columns = this._columns.slice(0, depth + 1);
 			this.requestUpdate();
 			return;
 		}
-		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true);
+		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true, immediate);
 		else {
 			const newColumns = this._columns.slice(0, depth + 1);
 			newColumns.push(node.children);
@@ -925,10 +889,11 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	* own depth: its column for expansions, -1 for a view root (it sits above
 	* column 0, so loaders computing child depth as `depth + 1` stay correct).
 	*/
-	#loadUnloadedChildren(node, parentDepth, fireExpandEvent) {
+	#loadUnloadedChildren(node, parentDepth, fireExpandEvent, immediate = false) {
 		const nodeDepth = parentDepth + 1;
 		this._columns = this._columns.slice(0, nodeDepth);
 		this._loadingDepth = nodeDepth;
+		this.#pendingController?.abort();
 		this.#pendingNode = node;
 		const controller = new AbortController();
 		this.#pendingController = controller;
@@ -959,15 +924,20 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			this.requestUpdate();
 		};
 		if (this.model || this.loadChildren) {
-			if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
-			this.#expandTimer = setTimeout(() => {
+			if (this.#expandTimer !== void 0) {
+				clearTimeout(this.#expandTimer);
+				this.#expandTimer = void 0;
+			}
+			const load = () => {
 				this.#expandTimer = void 0;
 				if (this.#pendingNode !== node) return;
 				(this.model ? this.model.getChildren(node, nodeDepth - 1, controller.signal) : collectDataResult(this.loadChildren({
 					node,
 					depth: nodeDepth - 1
 				}, controller.signal), controller.signal)).then((children) => applyChildren([...children])).catch(handleError);
-			}, EXPAND_DEBOUNCE_MS);
+			};
+			if (immediate) load();
+			else this.#expandTimer = setTimeout(load, EXPAND_DEBOUNCE_MS);
 		} else {
 			this._loadingDepth = void 0;
 			this.#pendingNode = void 0;
@@ -978,10 +948,12 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		}
 	}
 	#onCheckboxClick(node) {
+		const previous = new Set(this._selectedNodes);
 		const currentlySelected = this._selectedKeys.has(node.item.key);
 		if (!!node.children?.length ? this.#allDescendantsSelected(node) : currentlySelected) this.#applyCheckedToggle(node, false);
 		else this.#applyCheckedToggle(node, true);
 		this.requestUpdate();
+		this.#dispatchSelectEvent(previous);
 	}
 	#allDescendantsSelected(node) {
 		if (!this._selectedKeys.has(node.item.key)) return false;
@@ -1018,7 +990,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			index
 		};
 	}
-	#scrollNavigatedItemIntoView() {
+	#scrollNavigatedItemIntoView(behavior = `smooth`) {
 		requestAnimationFrame(() => {
 			const tickled = this.#getTickledNodeAndDepth();
 			if (!tickled) return;
@@ -1026,7 +998,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			if (!container) return;
 			container.querySelectorAll(`.item`)[tickled.index]?.scrollIntoView({
 				block: `nearest`,
-				behavior: `smooth`
+				behavior
 			});
 		});
 	}
@@ -1041,9 +1013,67 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			composed: true
 		}));
 	}
+	/**
+	* Number of items a PageUp/PageDown moves: how many rows fit in the column's
+	* visible area, less one so the previous page's last row stays in view.
+	*/
+	#pageSize(depth) {
+		const content = this.shadowRoot?.querySelectorAll(`.column`)[depth]?.querySelector(`.column-content`);
+		const item = content?.querySelector(`.item`);
+		if (!content || !item || item.offsetHeight === 0) return 10;
+		return Math.max(1, Math.floor(content.clientHeight / item.offsetHeight) - 1);
+	}
+	/**
+	* Move the cursor within column `col` to the index returned by `target`
+	* (given the current cursor index, or -1 when the cursor isn't in this
+	* column, which behaves as "before the first item"). Handles Shift range
+	* extension and anchor seating for `standard` / `vscode` modes.
+	* `scroll` brings the new item into view (for jumps larger than one row).
+	*/
+	#moveCursor(col, currentDepth, event, target, scroll = false) {
+		const current = this.#getTickledNodeAndDepth();
+		const targetIndex = target(current !== void 0 && current.depth === currentDepth ? current.index : -1);
+		const targetNode = col[targetIndex];
+		if (!targetNode) return;
+		this.#setTickledNode(targetNode, currentDepth);
+		if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
+			const prevIndex = current?.index ?? 0;
+			if (event.shiftKey) {
+				if (!this.#anchor || this.#anchor.depth !== currentDepth) {
+					const anchorNode = col[prevIndex];
+					if (anchorNode) this.#anchor = {
+						key: anchorNode.item.key,
+						depth: currentDepth,
+						index: prevIndex,
+						selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
+					};
+				}
+				if (this.#anchor) {
+					const from = Math.min(this.#anchor.index, targetIndex);
+					const to = Math.max(this.#anchor.index, targetIndex);
+					const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
+					if (this.interactionMode === `vscode`) {
+						const snap = this.#anchor.selectionSnapshot;
+						for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
+						else this._selectedKeys.add(k);
+					} else this._selectedKeys = new Set(rangeKeys);
+				}
+			} else if (this.interactionMode === `standard`) this.#anchor = {
+				key: targetNode.item.key,
+				depth: currentDepth,
+				index: targetIndex
+			};
+			else this.#anchor = void 0;
+		}
+		this.requestUpdate();
+		if (scroll) this.#scrollNavigatedItemIntoView(`auto`);
+	}
 	#onKeyDown;
 	#onResizeStart;
+	#resizeRaf;
+	#resizePendingWidth;
 	#onResizeMove;
+	#applyResizeWidth;
 	#onResizeEnd;
 	#getColumnHeader(depth) {
 		if (depth === 0) return this.#displayRoot?.item.label ?? ``;
@@ -1057,9 +1087,12 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		}
 		return ``;
 	}
+	#explicitWidthStyle(width) {
+		return `width:${width}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+	}
 	#columnStyle(depth, isLast) {
 		const w = this.#columnWidths.get(depth);
-		if (w !== void 0) return `width:${w}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+		if (w !== void 0) return this.#explicitWidthStyle(w);
 		if (this.stretchLastColumn && isLast) return `width:max-content;flex-grow:1;flex-shrink:0;flex-basis:auto;min-width:0`;
 		return `width:max-content;flex-grow:0;flex-shrink:0;flex-basis:auto`;
 	}
@@ -1309,8 +1342,24 @@ __decorate([state()], MillerBaseElement.prototype, "_selectedNodes", void 0);
 MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
 //#endregion
 //#region src/miller/miller-list.ts
+const HAS_CHECKED = 1;
+const HAS_UNCHECKED = 2;
+/**
+* Walk the loaded subtree under `node`, returning which kinds of leaf were
+* seen (`HAS_CHECKED` | `HAS_UNCHECKED`). Stops as soon as both have been
+* seen, since the result can no longer change.
+*/
+function scanCheckState(node, selectedKeys) {
+	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? HAS_CHECKED : HAS_UNCHECKED;
+	let seen = 0;
+	for (const child of node.children) {
+		seen |= scanCheckState(child, selectedKeys);
+		if (seen === 3) break;
+	}
+	return seen;
+}
 /**
-* Recursively compute the checkbox state for a node based on `selectedKeys`.
+* Compute the checkbox state for a node based on `selectedKeys`.
 *
 * - Unloaded branch (`children === undefined`): treated as a leaf — we can only
 *   report on what is known.
@@ -1319,12 +1368,9 @@ MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBa
 *   indeterminate otherwise.
 */
 function computeCheckboxState(node, selectedKeys) {
-	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? `checked` : `unchecked`;
-	const childStates = node.children.map((c) => computeCheckboxState(c, selectedKeys));
-	const allChecked = childStates.every((s) => s === `checked`);
-	const allUnchecked = childStates.every((s) => s === `unchecked`);
-	if (allChecked) return `checked`;
-	if (allUnchecked) return `unchecked`;
+	const seen = scanCheckState(node, selectedKeys);
+	if (seen === HAS_CHECKED) return `checked`;
+	if (seen === HAS_UNCHECKED) return `unchecked`;
 	return `indeterminate`;
 }
 let MillerListElement = class MillerListElement extends MillerBaseElement {