@ixfx/components 0.10.6 → 0.10.8

package/bundle/index.js

@@ -14907,7 +14907,7 @@ let DataGridElement = class DataGridElement extends i {
 				}
 				case ` `: {
 					if (this._editing) {
-						if (this.columns.find((c) => c.key === this._editing.colKey)?.editor === `boolean`) {
+						if ((this.columns.find((c) => c.key === this._editing.colKey)?.dataType ?? `text`) === `boolean`) {
 							e.preventDefault();
 							const isImmediate = this.editability === `immediate`;
 							const rowKey = this._editing.rowKey;
@@ -15424,11 +15424,13 @@ let DataGridElement = class DataGridElement extends i {
 		if (!col) return rows;
 		const dir = this.sortState.direction === `asc` ? 1 : -1;
 		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
+		const dataType = col.dataType ?? `text`;
 		return rows.sort((a, b) => {
 			const av = a[col.key];
 			const bv = b[col.key];
 			if (av === bv) return 0;
-			if (typeof av === `number` && typeof bv === `number`) return dir * (av - bv);
+			if (dataType === `number`) return dir * (av - bv);
+			if (dataType === `boolean`) return dir * (Boolean(av) === Boolean(bv) ? 0 : av ? 1 : -1);
 			return dir * String(av).localeCompare(String(bv));
 		});
 	}
@@ -15805,7 +15807,7 @@ let DataGridElement = class DataGridElement extends i {
 	}
 	_isTextEditor(col) {
 		const e = col.editor;
-		return !e || e === `text` || e === `number`;
+		return !e || e === `auto`;
 	}
 	_isCellEditing(rowKey, colKey) {
 		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
@@ -16247,7 +16249,8 @@ let DataGridElement = class DataGridElement extends i {
 				if (this._isCellEditing(rowKey, col.key)) {
 					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
 					const curVal = immediate ? val : this._editValue ?? val;
-					if (col.editor === `boolean` || col.editor === `boolean`) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+					const effectiveDataType = col.dataType ?? `text`;
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
 						const v = e.target.checked;
 						if (immediate) this._commitImmediate(rowKey, col.key, v);
 						else {
@@ -16305,7 +16308,9 @@ let DataGridElement = class DataGridElement extends i {
 						};
 						return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
 					}
-					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input .value=${String(curVal ?? ``)} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+					const inputType = effectiveDataType === `number` ? `number` : `text`;
+					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
+					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
 						if (e.key === `Enter`) this._commitEdit();
 						if (e.key === `Escape`) {
 							this._editing = null;
@@ -16709,6 +16714,23 @@ DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableE
 const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+function pointInRect(x, y, rect) {
+	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+}
+/** Hit-test the painted content, not a layout wrapper that may fill the row. */
+function contentAtPoint(node, x, y) {
+	if (node instanceof Text) {
+		if (!node.textContent?.trim()) return false;
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		return Array.from(range.getClientRects()).some((rect) => pointInRect(x, y, rect));
+	}
+	if (!(node instanceof Element)) return false;
+	if (node.hasAttribute(`data-drag-select-blank`)) return false;
+	if (node.hasAttribute(`data-drag-select-content`)) return pointInRect(x, y, node.getBoundingClientRect());
+	if (Array.from(node.childNodes).some((child) => contentAtPoint(child, x, y))) return true;
+	return node.childNodes.length === 0 && pointInRect(x, y, node.getBoundingClientRect());
+}
 /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
 function sameKeys$2(a, b) {
 	if (a === void 0 || a.length !== b.length) return false;
@@ -16769,6 +16791,10 @@ let DetailListElement = class DetailListElement extends i {
 		});
 		this.#nativeDragging = false;
 		this.#postDragSuppressTimer = 0;
+		this.#blankItemPressPending = false;
+		this.#clearBlankItemPress = () => {
+			this.#blankItemPressPending = false;
+		};
 		this.#nativeDrag = new ListNativeDragController(this, {
 			source: `detail-list`,
 			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
@@ -16800,7 +16826,8 @@ let DetailListElement = class DetailListElement extends i {
 				for (const el of this.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
 				this.#startPostDragSuppressTimer();
 			},
-			syncLightDomDraggable: () => this._syncNativeDraggable()
+			syncLightDomDraggable: () => this._syncNativeDraggable(),
+			shouldStart: () => !this.#blankItemPressPending
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -16820,6 +16847,10 @@ let DetailListElement = class DetailListElement extends i {
 			},
 			autoScroll: (dx, _dy) => {
 				if (this._listEl) this._listEl.scrollLeft += dx;
+			},
+			shouldStart: (event) => {
+				this.#blankItemPressPending = this.itemsDraggable && this.#isBlankItemPress(event);
+				return !this.itemsDraggable || this.#blankItemPressPending;
 			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
@@ -16938,6 +16969,8 @@ let DetailListElement = class DetailListElement extends i {
 	#data;
 	#nativeDragging;
 	#postDragSuppressTimer;
+	#blankItemPressPending;
+	#clearBlankItemPress;
 	#nativeDrag;
 	#prepareNativeDrag(originKey) {
 		const visible = this._getVisibleItems();
@@ -16975,6 +17008,21 @@ let DetailListElement = class DetailListElement extends i {
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
+	/** A row's padding/empty area may start marquee; its actual content may drag out. */
+	#isBlankItemPress(event) {
+		const path = event.composedPath();
+		const item = this._findListItem(path);
+		if (!item) return false;
+		for (const node of path) {
+			if (node === item) break;
+			if (node instanceof Element) {
+				if (node.matches(`input, button, a, select, textarea, [contenteditable], .ixfx-list-checkbox, [role="checkbox"]`)) return false;
+				if (node.hasAttribute(`data-drag-select-blank`)) return true;
+				if (node.hasAttribute(`data-drag-select-content`)) return false;
+			}
+		}
+		return !Array.from(item.childNodes).some((node) => contentAtPoint(node, event.clientX, event.clientY));
+	}
 	/** Collect visible items whose surface-relative box intersects `rect`. */
 	#marqueeHitTest(rect) {
 		const surface = this.renderRoot.querySelector(`.container`);
@@ -17023,6 +17071,8 @@ let DetailListElement = class DetailListElement extends i {
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
 		this.addEventListener(`wheel`, this._onWheel);
+		window.addEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.addEventListener(`pointercancel`, this.#clearBlankItemPress);
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
 		this.#mutationObserver = new MutationObserver((records) => {
@@ -17067,6 +17117,9 @@ let DetailListElement = class DetailListElement extends i {
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.removeEventListener(`wheel`, this._onWheel);
+		window.removeEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.removeEventListener(`pointercancel`, this.#clearBlankItemPress);
+		this.#blankItemPressPending = false;
 		cancelAnimationFrame(this.#sortRaf);
 		cancelAnimationFrame(this.#viewportScrollRaf);
 		this.#viewportScrollRaf = 0;
@@ -19080,6 +19133,44 @@ function collectWeights(snapshot, weights, collapsed) {
 		if (snapshot.collapsed !== void 0) collapsed.set(snapshot.id, snapshot.collapsed);
 	} else if (snapshot.children) for (const child of snapshot.children) collectWeights(child, weights, collapsed);
 }
+function setPanelRestoreWeight(group, id, restoreWeight) {
+	const children = group.children.map((child) => {
+		if (child.kind === `panel`) return child.id === id ? {
+			...child,
+			restoreWeight
+		} : child;
+		return setPanelRestoreWeight(child, id, restoreWeight);
+	});
+	return {
+		...group,
+		children
+	};
+}
+function preserveRestoreWeights(previous, next) {
+	if (!previous) return next;
+	const previousById = new Map(previous.children.map((child) => [child.id, child]));
+	const children = next.children.map((child) => {
+		const match = previousById.get(child.id);
+		if (!match || match.kind !== child.kind) return child;
+		if (child.kind === `panel` && match.kind === `panel`) return {
+			...child,
+			restoreWeight: match.restoreWeight
+		};
+		return preserveRestoreWeights(match, child);
+	});
+	return {
+		...next,
+		children
+	};
+}
+function findPanelNode(group, id) {
+	for (const child of group.children) if (child.kind === `panel`) {
+		if (child.id === id) return child;
+	} else {
+		const found = findPanelNode(child, id);
+		if (found) return found;
+	}
+}
 function walk(group, visitor) {
 	walkInner(group, [], visitor);
 }
@@ -19212,7 +19303,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 	_rebuildModel() {
 		this._reindexSlots();
 		const normalized = normalise(buildModel(this));
-		this._model = normalized;
+		this._model = preserveRestoreWeights(this._model, normalized);
 		this.requestUpdate();
 	}
 	get panels() {
@@ -19334,6 +19425,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 		if (!panel || panel.collapsed === collapsed) return;
 		this._applyingOwnMutation = true;
 		if (collapsed) {
+			if (this._model) this._model = setPanelRestoreWeight(this._model, panel.id, panel.weight);
 			panel.el.setAttribute(`collapsed`, ``);
 			panel.el.setAttribute(`data-collapsed`, ``);
 		} else {
@@ -19341,7 +19433,10 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			panel.el.removeAttribute(`data-collapsed`);
 		}
 		this._rebuildModel();
-		if (!collapsed && revealWeight !== void 0) this._setFlexibleWeight(panel.id, revealWeight);
+		if (!collapsed) {
+			const restoreWeight = revealWeight ?? (this._model ? findPanelNode(this._model, panel.id)?.restoreWeight : void 0);
+			if (restoreWeight !== void 0) this._setFlexibleWeight(panel.id, restoreWeight);
+		}
 		this.requestUpdate();
 		this._observer?.takeRecords();
 		this._applyingOwnMutation = false;
@@ -20934,6 +21029,7 @@ let DockHostElement = class DockHostElement extends i {
 		this._junctionsKey = ``;
 		this._junctionsRaf = null;
 		this._hostResizeObserver = null;
+		this._loadGeneration = 0;
 		this._toolbarSlots = /* @__PURE__ */ new Set();
 		this._toolbarObserver = null;
 		this._panelObservers = /* @__PURE__ */ new Map();
@@ -21251,6 +21347,7 @@ let DockHostElement = class DockHostElement extends i {
 	}
 	loadLayout(layout) {
 		this._returnAllToolbars();
+		this._loadGeneration++;
 		this._model = normalize(cloneNode(layout.root));
 		this._mergePoolIntoModel();
 		this.requestUpdate();
@@ -21952,12 +22049,18 @@ let DockHostElement = class DockHostElement extends i {
 		const splits = this.shadowRoot?.querySelectorAll(`ixfx-split-layout[data-dock-path]`);
 		if (splits === void 0) return;
 		for (const el of splits) {
+			if (el.getAttribute(`data-dock-gen`) !== String(this._loadGeneration)) continue;
 			const pathStr = el.getAttribute(`data-dock-path`);
 			if (pathStr === null) continue;
 			const node = findNode(this._model, parsePath(pathStr));
 			if (node === null || !isSplit(node)) continue;
 			const live = Object.values(el.getSizes());
-			if (live.length === node.children.length && !weightsEqual(live, node.sizes)) node.sizes = live;
+			if (live.length === node.children.length && !weightsEqual(live, node.sizes)) {
+				node.sizes = live;
+				Array.from(el.children).forEach((child, i) => {
+					if (child instanceof HTMLElement && node.sizes[i] !== void 0) child.setAttribute(`size`, String(node.sizes[i]));
+				});
+			}
 		}
 	}
 	_teardownTabDragListeners() {
@@ -22086,6 +22189,7 @@ let DockHostElement = class DockHostElement extends i {
         size=${size === void 0 ? A : String(size)}
         style=${`--split-gutter-size: var(--dock-split-bar-size, 2px); --split-collapsed-size: var(--dock-collapsed-size, 40px)`}
         data-dock-path=${pathStr}
+        data-dock-gen=${this._loadGeneration}
         @ixfx-split-resize=${this._onSplitWeightsChanged}
         @ixfx-split-change=${this._onSplitWeightsChanged}
         @ixfx-split-collapse=${(e) => this._onSplitCollapsed(e, true)}
@@ -25263,6 +25367,7 @@ let GridListElement = class GridListElement extends i {
         data-input-mode=${this.tickled.inputMode}
         @scroll=${this.#onScroll}
         @wheel=${this.#onWheel}
+        @click=${this.#onViewportClick}
       >
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
@@ -25495,6 +25600,22 @@ let GridListElement = class GridListElement extends i {
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	/**
+	* A click that lands on the viewport without touching a cell — the empty
+	* space between/around items — clears the selection (Finder-style). The
+	* guard mirrors `#onCellClick`: a trailing click after a marquee or native
+	* drag is swallowed so it cannot undo the selection that drag just made.
+	* In `manual` interaction mode the consumer owns selection, so nothing is
+	* cleared. Cell clicks route through `#onCellClick` and are skipped here.
+	*/
+	#onViewportClick(e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
+		for (const node of e.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return;
+		this.selection.clear();
+	}
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -31194,17 +31315,117 @@ __decorate([state()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
 __decorate([state()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
 IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
 //#endregion
-//#region src/icicle-tree/layout.ts
-/** Coerce a raw accessor result to a non-negative finite weight. */
-function normaliseValue(raw) {
-	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? raw : 0;
+//#region src/hyperbolic-tree/poincare-math.ts
+const EPSILON = 1e-9;
+function complexMul(a, b) {
+	return {
+		x: a.x * b.x - a.y * b.y,
+		y: a.x * b.y + a.y * b.x
+	};
+}
+function complexConjugate(a) {
+	return {
+		x: a.x,
+		y: -a.y
+	};
+}
+function complexAdd(a, b) {
+	return {
+		x: a.x + b.x,
+		y: a.y + b.y
+	};
 }
+function complexSub(a, b) {
+	return {
+		x: a.x - b.x,
+		y: a.y - b.y
+	};
+}
+function complexScale(a, s) {
+	return {
+		x: a.x * s,
+		y: a.y * s
+	};
+}
+function complexDiv(a, b) {
+	const denominator = b.x * b.x + b.y * b.y;
+	if (denominator < EPSILON) return {
+		x: 0,
+		y: 0
+	};
+	return complexScale(complexMul(a, complexConjugate(b)), 1 / denominator);
+}
+/** Euclidean norm (`|z|`) of a point. */
+function norm(a) {
+	return Math.hypot(a.x, a.y);
+}
+/** Clamp a point to stay strictly inside the unit disk (the Poincaré model's boundary is never reached). */
+function clampToDisk(p, maxNorm = .999999) {
+	const n = norm(p);
+	if (n <= maxNorm) return p;
+	return complexScale(p, maxNorm / n);
+}
+/**
+* Möbius transform that translates `a` to the origin: `(z - a) / (1 - conj(a) * z)`.
+* A hyperbolic isometry — preserves all pairwise Poincaré distances.
+*/
+function mobiusToOrigin(z, a) {
+	return clampToDisk(complexDiv(complexSub(z, a), complexSub({
+		x: 1,
+		y: 0
+	}, complexMul(complexConjugate(a), z))));
+}
+/**
+* Inverse of {@link mobiusToOrigin}: translates the origin back to `a`, i.e.
+* `(z + a) / (1 + conj(a) * z)`.
+*/
+function mobiusFromOrigin(z, a) {
+	return clampToDisk(complexDiv(complexAdd(z, a), complexAdd({
+		x: 1,
+		y: 0
+	}, complexMul(complexConjugate(a), z))));
+}
+/**
+* Möbius addition (gyrogroup composition) of two disk-translations: the
+* canonical-space point reached by translating the origin to `a`, then
+* translating that local frame's origin by `b`.
+*/
+function mobiusAdd(a, b) {
+	return mobiusFromOrigin(b, a);
+}
+/** Euclidean Poincaré-disk radius corresponding to hyperbolic distance `d` from the origin. */
+function euclideanRadiusForHyperbolicDistance(d) {
+	return Math.tanh(d / 2);
+}
+/** Hyperbolic distance from the origin corresponding to Euclidean disk radius `r`. */
+function hyperbolicDistanceForEuclideanRadius(r) {
+	return 2 * Math.atanh(Math.min(Math.max(r, 0), .999999));
+}
+/** Hyperbolic (Poincaré) distance between two points in the unit disk. */
+function poincareDistance(p, q) {
+	return hyperbolicDistanceForEuclideanRadius(norm(mobiusToOrigin(q, p)));
+}
+/**
+* Point at parameter `t` (0–1) along the hyperbolic geodesic from `a` to `b`.
+* `t=0` yields `a`, `t=1` yields `b`; intermediate values move at constant
+* hyperbolic speed along the geodesic (not the Euclidean straight line).
+*/
+function geodesicInterpolate(a, b, t) {
+	if (t <= 0) return a;
+	if (t >= 1) return b;
+	const bLocal = mobiusToOrigin(b, a);
+	const localNorm = norm(bLocal);
+	if (localNorm < EPSILON) return a;
+	return mobiusFromOrigin(complexScale(complexScale(bLocal, 1 / localNorm), euclideanRadiusForHyperbolicDistance(hyperbolicDistanceForEuclideanRadius(localNorm) * t)), a);
+}
+//#endregion
+//#region src/hyperbolic-tree/layout.ts
 /** Depth-first search for the node with `key`. Returns `undefined` when absent. */
-function findIcicleNode(root, key) {
+function findHyperbolicNode(root, key) {
 	if (!root) return void 0;
 	if (root.item.key === key) return root;
 	for (const child of root.children ?? []) {
-		const hit = findIcicleNode(child, key);
+		const hit = findHyperbolicNode(child, key);
 		if (hit) return hit;
 	}
 }
@@ -31212,92 +31433,289 @@ function findIcicleNode(root, key) {
 * Chain of nodes from `root` down to (and including) the node with `key`.
 * Returns `undefined` when the key is absent. The first entry is always `root`.
 */
-function findIciclePath(root, key) {
+function findHyperbolicPath(root, key) {
 	if (!root) return void 0;
 	if (root.item.key === key) return [root];
 	for (const child of root.children ?? []) {
-		const hit = findIciclePath(child, key);
+		const hit = findHyperbolicPath(child, key);
 		if (hit) return [root, ...hit];
 	}
 }
 /**
-* Compute the visible rectangles for an icicle view.
+* Number of nodes in `node`'s subtree, counting `node` itself, up to
+* `remainingDepth` further levels (matching the canonical-position recursion's
+* own `maxDepth` cutoff, so weighting stays consistent with what's actually
+* laid out).
+*/
+function subtreeSize(node, remainingDepth) {
+	if (remainingDepth <= 0) return 1;
+	const children = node.children ?? [];
+	if (children.length === 0) return 1;
+	let total = 1;
+	for (const child of children) total += subtreeSize(child, remainingDepth - 1);
+	return total;
+}
+/**
+* Angle (as seen from `localOrigin`, i.e. after translating `localOrigin` to
+* the disk's center) of the disk-boundary point that currently sits at angle
+* `theta` from the true origin. Möbius translation is conformal but not
+* angle-preserving in the naive sense — a wedge boundary doesn't just shift
+* by a constant offset when reparented to a new local frame, its exact
+* transformed angle depends on how far off-center `localOrigin` is. Used to
+* carry a node's *own* angular wedge (inherited from its parent) into the
+* local frame of each of its children, rather than approximating it as
+* "the opposite direction ± half the width" — the same technique used by
+* reference hyperbolic-tree-browser implementations (e.g. d3-hypertree's
+* `wedgeTranslate`) to keep the recursive layout accurate at any depth/width.
+*/
+function boundaryAngleInLocalFrame(theta, localOrigin) {
+	const transformed = mobiusToOrigin({
+		x: Math.cos(theta),
+		y: Math.sin(theta)
+	}, localOrigin);
+	return Math.atan2(transformed.y, transformed.x);
+}
+/** Deterministic pseudo-random value in `[-1, 1]` derived from `key`, stable across renders. */
+function stableUnitJitter(key) {
+	let hash = 0;
+	for (let i = 0; i < key.length; i++) hash = Math.imul(hash, 31) + key.charCodeAt(i) | 0;
+	return (hash >>> 0) % 1e3 / 1e3 * 2 - 1;
+}
+/**
+* A single unbranching child (no siblings to fan against) would otherwise sit
+* at the exact bisector of its inherited wedge — i.e. dead-center, continuing
+* in a perfectly straight line from its own parent's edge. For a chain of
+* such nodes (a deeply-nested path with no branching), that reads as one
+* unbroken line cutting across the disk rather than a legible sequence of
+* edges. Nudging by a small, key-derived (so stable across re-renders) angle
+* breaks that up — the same purpose served by the small per-node offsets in
+* reference hyperbolic-tree-browser implementations (e.g. d3-hypertree's
+* `layoutBergé`, which staggers leaf nodes rather than stacking them exactly
+* radially).
+*/
+const CHAIN_JITTER_RADIANS = .22;
+/**
+* Canonical (true-root-anchored) hyperbolic position of every currently-loaded
+* node, keyed by node key. Positions never depend on the current focus —
+* refocusing is purely a Möbius re-projection of these fixed coordinates, so
+* the tree never needs to be re-laid-out when the focus changes.
 *
-* Bands start at the zoom node's **children** (the zoom node itself is shown in
-* the breadcrumb strip, never as a rect — matching `TreeComponent.getNodes()`,
-* where the root is never listed). Each band spans 0–1; a rect's `x`/`width`
-* are fractions of its band, proportional to `valueAccessor` shares among
-* siblings. Siblings whose weights all normalise to `0` split the band equally.
+* Each node holds an angular wedge — inherited from its parent, expressed in
+* its *own* local frame (root starts with the full `[-π, π]`) — across which
+* its children are placed at hyperbolic distance `curvature` (default `1`).
+* That wedge is partitioned among the children, weighted by each child's own
+* subtree size rather than split evenly, and each child's own share is
+* carried into its local frame via {@link boundaryAngleInLocalFrame} before
+* recursing. This is a strict partition (slices never overlap and always sum
+* to the parent's own wedge), which is what guarantees sibling subtrees never
+* spatially cross regardless of how deep or bushy they are.
 *
-* @param root True tree root. `undefined` (or a root without children) yields `[]`.
-* @param options `valueAccessor` (default equal weights), `maxDepth` (band count,
-*   default unlimited), `zoomKey` (visual root, default true root; unknown keys
-*   fall back to the true root).
+* `curvature` scales how far apart (in hyperbolic distance) each generation
+* sits. Raising it pushes each generation further out, so the Poincaré
+* metric's own `tanh` compression crowds distant generations toward the
+* boundary faster — a stronger fisheye, which is why it reads as "zooming
+* in" on the focus. Lowering it spreads generations out more evenly,
+* flattening the view toward a Euclidean-feeling layout.
 */
-function computeIcicleLayout(root, options = {}) {
-	if (!root?.children?.length) return [];
-	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, hideLeaves = false } = options;
-	if (maxDepth <= 0) return [];
-	const zoomNode = zoomKey === void 0 ? root : findIcicleNode(root, zoomKey) ?? root;
-	const zoomPath = findIciclePath(root, zoomNode.item.key);
-	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
-	const siblings = zoomNode.children ?? [];
-	if (siblings.length === 0) return [];
-	const isLeaf = (node) => node.item.isLeaf === true || node.children !== void 0 && node.children.length === 0;
-	const rects = [];
-	const layoutLevel = (nodes, depth, relativeDepth, offset, span, parentKey) => {
-		const visible = hideLeaves ? nodes.filter((n) => !isLeaf(n)) : nodes;
-		if (visible.length === 0 || relativeDepth >= maxDepth) return;
-		const weights = visible.map((n) => normaliseValue(valueAccessor(n.item)));
-		const total = weights.reduce((a, b) => a + b, 0);
-		const setSize = visible.length;
-		let cursor = offset;
-		visible.forEach((node, index) => {
-			const width = span * (total > 0 ? weights[index] / total : 1 / setSize);
-			const children = node.children ?? [];
-			rects.push({
-				node,
-				depth,
-				relativeDepth,
-				x: cursor,
-				width,
-				parentKey,
-				index,
-				setSize,
-				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
+function computeCanonicalPositions(root, maxDepth = 24, curvature = 1) {
+	const map = /* @__PURE__ */ new Map();
+	if (!root) return map;
+	const origin = {
+		x: 0,
+		y: 0
+	};
+	map.set(root.item.key, {
+		node: root,
+		depth: 0,
+		parentKey: void 0,
+		position: origin,
+		angularShare: 2 * Math.PI
+	});
+	const place = (node, position, wedgeStart, wedgeEnd, depth) => {
+		if (depth >= maxDepth) return;
+		const children = node.children ?? [];
+		const n = children.length;
+		if (n === 0) return;
+		const r0 = euclideanRadiusForHyperbolicDistance(curvature);
+		const angularWidth = wedgeEnd - wedgeStart;
+		const weights = children.map((child) => subtreeSize(child, maxDepth - depth - 1));
+		const totalWeight = weights.reduce((a, b) => a + b, 0);
+		let cursor = wedgeStart;
+		children.forEach((child, index) => {
+			const share = n === 1 ? angularWidth : angularWidth * weights[index] / totalWeight;
+			const childStart = cursor;
+			const childEnd = cursor + share;
+			cursor = childEnd;
+			const theta = (childStart + childEnd) / 2 + (n === 1 ? stableUnitJitter(child.item.key) * Math.min(CHAIN_JITTER_RADIANS, share * .4) : 0);
+			const local = {
+				x: r0 * Math.cos(theta),
+				y: r0 * Math.sin(theta)
+			};
+			const canonicalPosition = mobiusFromOrigin(local, position);
+			map.set(child.item.key, {
+				node: child,
+				depth: depth + 1,
+				parentKey: node.item.key,
+				position: canonicalPosition,
+				angularShare: share
 			});
-			if (children.length > 0) layoutLevel(children, depth + 1, relativeDepth + 1, cursor, width, node.item.key);
-			cursor += width;
+			const localStart = boundaryAngleInLocalFrame(childStart, local);
+			let localWidth = boundaryAngleInLocalFrame(childEnd, local) - localStart;
+			if (localWidth <= 0) localWidth += 2 * Math.PI;
+			place(child, canonicalPosition, localStart, localStart + localWidth, depth + 1);
 		});
 	};
-	layoutLevel(siblings, zoomDepth + 1, 0, 0, 1, zoomNode.item.key);
-	return rects;
+	place(root, origin, -Math.PI, Math.PI, 0);
+	return map;
+}
+/** Nodes within `maxRadius` tree-graph steps of `focusedKey`, mapped to their step distance. */
+function ringDistances(canonical, focusedKey, maxRadius) {
+	const ring = /* @__PURE__ */ new Map();
+	if (!canonical.has(focusedKey)) return ring;
+	ring.set(focusedKey, 0);
+	let frontier = [focusedKey];
+	for (let distance = 1; distance <= maxRadius && frontier.length > 0; distance++) {
+		const next = [];
+		for (const key of frontier) {
+			const entry = canonical.get(key);
+			if (!entry) continue;
+			const neighbours = [];
+			if (entry.parentKey !== void 0) neighbours.push(entry.parentKey);
+			for (const child of entry.node.children ?? []) neighbours.push(child.item.key);
+			for (const neighbour of neighbours) if (!ring.has(neighbour) && canonical.has(neighbour)) {
+				ring.set(neighbour, distance);
+				next.push(neighbour);
+			}
+		}
+		frontier = next;
+	}
+	return ring;
+}
+/**
+* Compute the visible nodes/edges of a hyperbolic tree view: every
+* currently-loaded node within `maxRadius` tree-graph steps of the focused
+* node, projected onto the Poincaré disk with the focus at its center.
+*
+* @param root True tree root. `undefined` yields an empty layout.
+* @param options `focusedKey` (default the true root; unknown keys fall back
+*   to the true root), `maxRadius` (default unlimited), `maxDepth` (safety
+*   cap on canonical-position recursion depth, default 24), `centerOverride`
+*   (project around this canonical-space point instead of the focus node's
+*   own position — used to animate smoothly between foci).
+*/
+function computeHyperbolicLayout(root, options = {}) {
+	if (!root) return {
+		nodes: [],
+		edges: []
+	};
+	const { maxRadius = Number.POSITIVE_INFINITY, maxDepth = 24, curvature = 1 } = options;
+	const canonical = computeCanonicalPositions(root, maxDepth, curvature);
+	const focusedKey = options.focusedKey !== void 0 && canonical.has(options.focusedKey) ? options.focusedKey : root.item.key;
+	const focusEntry = canonical.get(focusedKey);
+	if (!focusEntry) return {
+		nodes: [],
+		edges: []
+	};
+	const projectionCenter = options.centerOverride ?? focusEntry.position;
+	const ring = ringDistances(canonical, focusedKey, maxRadius);
+	const rawWeights = [...ring.keys()].map((key) => canonical.get(key).node.item.weight).filter((w) => typeof w === `number`);
+	const minWeight = rawWeights.length > 0 ? Math.min(...rawWeights) : void 0;
+	const maxWeight = rawWeights.length > 0 ? Math.max(...rawWeights) : void 0;
+	const normalizeWeight = (weight) => {
+		if (weight === void 0 || minWeight === void 0 || maxWeight === void 0 || maxWeight === minWeight) return .5;
+		return (weight - minWeight) / (maxWeight - minWeight);
+	};
+	const nodes = [...ring.entries()].map(([key, distance]) => {
+		const entry = canonical.get(key);
+		const weight = entry.node.item.weight;
+		return {
+			node: entry.node,
+			key,
+			depth: entry.depth,
+			ring: distance,
+			parentKey: entry.parentKey,
+			position: mobiusToOrigin(entry.position, projectionCenter),
+			angularShare: entry.angularShare,
+			weight,
+			weightNormalized: normalizeWeight(weight)
+		};
+	}).sort((a, b) => a.ring - b.ring);
+	const byKey = new Map(nodes.map((n) => [n.key, n]));
+	const edges = [];
+	for (const n of nodes) {
+		if (n.parentKey === void 0) continue;
+		const parent = byKey.get(n.parentKey);
+		if (!parent) continue;
+		edges.push({
+			fromKey: parent.key,
+			toKey: n.key,
+			from: parent.position,
+			to: n.position,
+			weightNormalized: (parent.weightNormalized + n.weightNormalized) / 2
+		});
+	}
+	return {
+		nodes,
+		edges
+	};
 }
 //#endregion
-//#region src/icicle-tree/icicletree-list.ts
-let IcicleTreeListElement = class IcicleTreeListElement extends i {
+//#region src/hyperbolic-tree/hyperbolictree-list.ts
+/**
+* The Poincaré disk's math operates in a `-1..1` unit radius, but rendering
+* an SVG `viewBox` at that literal scale (then letting CSS stretch it to a
+* few hundred device pixels) is an extreme, unusual upscale factor that has
+* been observed to trigger a Chromium GPU-rasterization glitch — a `fill:
+* none` shape painting as solid-filled, matching its computed style exactly
+* but not what's on screen. Rendering in a "normal"-magnitude SVG coordinate
+* system (viewBox radius {@link RENDER_SCALE} instead of `1`) avoids it.
+*/
+const RENDER_SCALE = 500;
+/**
+* Sanitizes a node key into a token safe to use inside a `part` attribute /
+* `::part()` selector — arbitrary key characters (spaces, quotes, etc.)
+* would otherwise produce a token CSS can't select without bespoke escaping.
+*/
+function partToken(key) {
+	return key.replace(/[^\w-]/g, `-`);
+}
+/** Angular distance (radians, 0–π) of a layout node from screen-"up" (−π/2). */
+function angleDistanceFromUp(n) {
+	const angle = Math.atan2(n.position.y, n.position.x);
+	let diff = Math.abs(angle - -Math.PI / 2);
+	if (diff > Math.PI) diff = 2 * Math.PI - diff;
+	return diff;
+}
+let HyperbolicTreeListElement = class HyperbolicTreeListElement extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.exclusivity = `none`;
 		this.selectionFilter = `all`;
 		this.interactionMode = `standard`;
-		this.orientation = `horizontal`;
-		this.maxDepth = 4;
-		this.minLabelWidth = 40;
-		this.minVerticalLabelWidth = 16;
-		this.hideLeaves = false;
-		this.valueAccessor = () => 1;
+		this.maxRadius = 4;
+		this.nodeRadius = .05;
+		this.minNodeRadius = .015;
+		this.minWeightScale = .6;
+		this.maxWeightScale = 1.6;
+		this.zoom = 1;
+		this.curvature = 1;
+		this.focusAnimationDuration = 400;
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
-		this._zoomKey = void 0;
+		this._focusKey = void 0;
+		this._animCenter = void 0;
+		this._panOffset = {
+			x: 0,
+			y: 0
+		};
 		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
-			labelSelector: `.icicle-label`,
+			labelSelector: `.hyperbolictree-label`,
 			highlightKey: `incr-search-highlight`
 		}) });
 		this.tickled = new TickledController(this, {
-			getItems: () => this.#rects().map((r) => ({
-				id: r.node.item.key,
+			getItems: () => this.#layout().nodes.map((n) => ({
+				id: n.key,
 				enabled: true
 			})),
 			onStateChange: () => {
@@ -31305,12 +31723,12 @@ let IcicleTreeListElement = class IcicleTreeListElement extends i {
 			},
 			onTickle: (id) => {
 				if (id === void 0) return;
-				const rect = this.#rects().find((r) => r.node.item.key === id);
-				if (!rect) return;
+				const n = this.#layout().nodes.find((n) => n.key === id);
+				if (!n) return;
 				this.dispatchEvent(new CustomEvent(`tickle`, {
 					detail: {
-						node: rect.node,
-						depth: rect.depth
+						node: n.node,
+						depth: n.depth
 					},
 					bubbles: true,
 					composed: true
@@ -31329,29 +31747,40 @@ let IcicleTreeListElement = class IcicleTreeListElement extends i {
 	get selectedNodes() {
 		return this._selectedNodes;
 	}
-	/** Current zoom root. `undefined` when showing the full tree. Pure view-state — `root` is never mutated. */
+	/** The node currently centered on the disk. Pure view-state — `root` is never mutated by focus changes. */
 	get focusedNode() {
-		if (this._zoomKey === void 0) return void 0;
-		return findIcicleNode(this.#effectiveRoot, this._zoomKey);
+		if (this._focusKey === void 0) return this.#effectiveRoot;
+		return findHyperbolicNode(this.#effectiveRoot, this._focusKey) ?? this.#effectiveRoot;
 	}
 	#modelUnsubscribe;
 	#pendingKeys;
 	#aborters;
-	#anchorIndex;
 	#ownedRegistry;
 	#unregisterSearchCommands;
-	#resizeObserver;
+	#animFrame;
+	#panStart;
 	get #effectiveRoot() {
 		return this.model?.root ?? this.root;
 	}
-	#rects() {
-		return computeIcicleLayout(this.#effectiveRoot, {
-			valueAccessor: this.valueAccessor,
-			maxDepth: this.maxDepth,
-			zoomKey: this._zoomKey,
-			hideLeaves: this.hideLeaves
+	#layout() {
+		return computeHyperbolicLayout(this.#effectiveRoot, {
+			focusedKey: this._focusKey,
+			maxRadius: this.maxRadius,
+			curvature: this.curvature,
+			centerOverride: this._panOffset.x === 0 && this._panOffset.y === 0 && this._animCenter === void 0 ? void 0 : this.#effectiveCenter()
 		});
 	}
+	#effectiveCenter() {
+		const canonical = computeCanonicalPositions(this.#effectiveRoot, 24, this.curvature);
+		const focusKey = this._focusKey ?? this.#effectiveRoot?.item.key;
+		const base = this._animCenter ?? (focusKey === void 0 ? void 0 : canonical.get(focusKey)?.position);
+		if (base === void 0) return void 0;
+		if (this._panOffset.x === 0 && this._panOffset.y === 0) return base;
+		return clampToDisk({
+			x: base.x + this._panOffset.x,
+			y: base.y + this._panOffset.y
+		}, .95);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute(`data-input-mode`, `mouse`);
@@ -31370,10 +31799,6 @@ let IcicleTreeListElement = class IcicleTreeListElement extends i {
 		});
 		this.registry = registry;
 		this.#syncSearchCommands();
-		if (typeof ResizeObserver !== `undefined`) {
-			this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
-			this.#resizeObserver.observe(this);
-		}
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -31382,8 +31807,10 @@ let IcicleTreeListElement = class IcicleTreeListElement extends i {
 		for (const aborter of this.#aborters.values()) aborter.abort();
 		this.#aborters.clear();
 		this.#pendingKeys.clear();
-		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = void 0;
+		if (this.#animFrame !== void 0) {
+			cancelAnimationFrame(this.#animFrame);
+			this.#animFrame = void 0;
+		}
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
 			this.#ownedRegistry.unregister(`deselect-all`);
@@ -31418,74 +31845,1010 @@ let IcicleTreeListElement = class IcicleTreeListElement extends i {
 				this.#resetViewState();
 			}
 		}
-		if (changedProps.has(`interactionMode`)) {
-			this.#anchorIndex = void 0;
-			this.clearSelection();
-		}
+		if (changedProps.has(`interactionMode`)) this.clearSelection();
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
-		if (this._zoomKey !== void 0 && !findIcicleNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
+		if (this._focusKey !== void 0 && !findHyperbolicNode(this.#effectiveRoot, this._focusKey)) {
+			this._focusKey = void 0;
+			this._animCenter = void 0;
+		}
 		this.#ensureVisibleChildren();
-		this.#syncTooltip();
-	}
-	/** The host's own (viewport) extent — width in horizontal orientation, height in vertical. */
-	#hostExtent() {
-		return (this.orientation === `vertical` ? this.clientHeight : this.clientWidth) || 0;
-	}
-	/**
-	* Whether `rect`'s label should be rotated or hidden for lack of space, per
-	* {@link minLabelWidth} / {@link minVerticalLabelWidth}. `orientation="vertical"`
-	* rects never rotate — hides outright at `minLabelWidth` instead, same as before.
-	*/
-	#labelMode(rect) {
-		const hostExtent = this.#hostExtent();
-		if (hostExtent === 0) return {
-			hidden: false,
-			rotated: false
-		};
-		const vertical = this.orientation === `vertical`;
-		const pixelWidth = rect.width * hostExtent;
-		if (vertical) return {
-			hidden: pixelWidth < this.minLabelWidth,
-			rotated: false
-		};
-		if (pixelWidth < this.minVerticalLabelWidth) return {
-			hidden: true,
-			rotated: false
-		};
-		return {
-			hidden: false,
-			rotated: pixelWidth < this.minLabelWidth
-		};
-	}
-	/** Anchor the shared tooltip popover to the tickled rect, if its label needs one. */
-	#syncTooltip() {
-		const popover = this._tooltipEl;
-		if (!popover?.popover) return;
-		const key = this.tickled.tickledId;
-		const rect = key === void 0 ? void 0 : this.#rects().find((r) => r.node.item.key === key);
-		const mode = rect ? this.#labelMode(rect) : void 0;
-		const isOpen = popover.matches(`:popover-open`);
-		if (rect && mode && (mode.hidden || mode.rotated)) {
-			popover.textContent = rect.node.item.label;
-			if (!isOpen) try {
-				popover.showPopover();
-			} catch {}
-		} else if (isOpen) try {
-			popover.hidePopover();
-		} catch {}
 	}
 	#resetViewState() {
 		this.#clearSelectionInternal();
 		this.tickled.clearTickled();
-		this._zoomKey = void 0;
-		this.#anchorIndex = void 0;
+		this._focusKey = void 0;
+		this._animCenter = void 0;
+		this._panOffset = {
+			x: 0,
+			y: 0
+		};
+		if (this.#animFrame !== void 0) {
+			cancelAnimationFrame(this.#animFrame);
+			this.#animFrame = void 0;
+		}
 	}
 	#ensureVisibleChildren() {
 		if (!this.model && !this.loadChildren) return;
-		for (const rect of this.#rects()) {
-			const { node } = rect;
+		for (const n of this.#layout().nodes) {
+			const { node } = n;
 			if (node.children !== void 0 || this.#pendingKeys.has(node.item.key)) continue;
-			this.#loadChildren(node, rect.depth);
+			this.#loadChildren(node, n.depth);
+		}
+	}
+	async #loadChildren(node, depth) {
+		const key = node.item.key;
+		this.#pendingKeys.add(key);
+		const controller = new AbortController();
+		this.#aborters.set(key, controller);
+		this.requestUpdate();
+		try {
+			let children;
+			if (this.model) children = await this.model.getChildren(node, depth, controller.signal);
+			else children = [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = children;
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+		} finally {
+			this.#pendingKeys.delete(key);
+			this.#aborters.delete(key);
+			if (!controller.signal.aborted) this.requestUpdate();
+		}
+	}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf === true;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#clearSelectionInternal() {
+		this._selectedNodes.clear();
+		this.selectedNode = void 0;
+	}
+	#dispatchSelect(previous) {
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: new Set(this._selectedNodes),
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	select(node) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.selectedNode = node;
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.delete(node);
+		if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	clearSelection() {
+		if (this._selectedNodes.size === 0) return;
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	selectAll() {
+		const prev = new Set(this._selectedNodes);
+		for (const n of this.#layout().nodes) {
+			if (!this.#canSelect(n.node)) continue;
+			this._selectedNodes.add(n.node);
+		}
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselectAll() {
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
+	selectMany(nodes) {
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set([...nodes].filter((n) => this.#canSelect(n)));
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/**
+	* Re-center the disk on `node` (an animated Möbius transform of the fixed
+	* layout — `root` is never mutated). Fires `focus`, plus the semantic
+	* `expand`/`collapse` event when the new focus is a descendant/ancestor of
+	* the previous one, for interop with generic `TreeComponent` listeners.
+	*/
+	focusOn(node) {
+		const targetKey = node.item.key;
+		const currentFocusKey = this._focusKey ?? this.#effectiveRoot?.item.key;
+		if (currentFocusKey === targetKey) return;
+		const previousNode = currentFocusKey === void 0 ? void 0 : findHyperbolicNode(this.#effectiveRoot, currentFocusKey);
+		const canonical = computeCanonicalPositions(this.#effectiveRoot, 24, this.curvature);
+		const fromPosition = (currentFocusKey === void 0 ? void 0 : canonical.get(currentFocusKey)?.position) ?? {
+			x: 0,
+			y: 0
+		};
+		const toPosition = canonical.get(targetKey)?.position ?? {
+			x: 0,
+			y: 0
+		};
+		this._focusKey = targetKey;
+		this._panOffset = {
+			x: 0,
+			y: 0
+		};
+		this.#animateTo(fromPosition, toPosition);
+		this.dispatchEvent(new CustomEvent(`focus`, {
+			detail: {
+				node,
+				previous: previousNode
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (previousNode) {
+			if (findHyperbolicNode(previousNode, targetKey)) {
+				const depth = (findHyperbolicPath(this.#effectiveRoot, targetKey)?.length ?? 1) - 1;
+				this.dispatchEvent(new CustomEvent(`expand`, {
+					detail: {
+						node,
+						depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			} else if (findHyperbolicNode(node, previousNode.item.key)) {
+				const depth = (findHyperbolicPath(this.#effectiveRoot, previousNode.item.key)?.length ?? 1) - 1;
+				this.dispatchEvent(new CustomEvent(`collapse`, {
+					detail: {
+						node: previousNode,
+						depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		}
+		this.requestUpdate();
+	}
+	#prefersReducedMotion() {
+		return typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+	}
+	#animateTo(from, to) {
+		if (this.#animFrame !== void 0) {
+			cancelAnimationFrame(this.#animFrame);
+			this.#animFrame = void 0;
+		}
+		if (this.focusAnimationDuration <= 0 || this.#prefersReducedMotion() || typeof requestAnimationFrame !== `function`) {
+			this._animCenter = void 0;
+			return;
+		}
+		const start = performance.now();
+		const duration = this.focusAnimationDuration;
+		const step = (now) => {
+			const t = Math.min(1, (now - start) / duration);
+			this._animCenter = t >= 1 ? void 0 : geodesicInterpolate(from, to, t);
+			this.requestUpdate();
+			this.#animFrame = t < 1 ? requestAnimationFrame(step) : void 0;
+		};
+		this.#animFrame = requestAnimationFrame(step);
+	}
+	#focusAndMaybeSelect(node) {
+		this.focusOn(node);
+		this.tickled.setTickled(node.item.key);
+		if (this.interactionMode === `implicit`) this.select(node);
+	}
+	/** Focus + select the node at `keys` (path from the root's children). Returns `true` if found. */
+	navigateTo(keys) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		let current = root;
+		for (const key of keys) {
+			const found = current.children?.find((n) => n.item.key === key);
+			if (!found) return false;
+			current = found;
+		}
+		this.focusOn(current);
+		this.select(current);
+		this.tickled.setTickled(current.item.key);
+		this.requestUpdate();
+		return true;
+	}
+	/** Focus + select the first node for which `predicate` returns `true`. Returns `true` if found. */
+	navigateToNode(predicate) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		const keyPath = this.#findKeyPath(root.children, predicate);
+		if (!keyPath) return false;
+		return this.navigateTo(keyPath);
+	}
+	/**
+	* Bring the node with `key` into the visible window and move the keyboard
+	* cursor to it, without changing the selection. Used by incremental-search
+	* "navigate" mode.
+	*/
+	revealKey(key) {
+		const node = findHyperbolicNode(this.#effectiveRoot, key);
+		if (!node) return false;
+		if (!this.#layout().nodes.some((n) => n.key === key)) this.focusOn(node);
+		this.tickled.setTickled(key);
+		this.requestUpdate();
+		return true;
+	}
+	#findKeyPath(nodes, predicate, prefix = []) {
+		for (const node of nodes) {
+			const path = [...prefix, node.item.key];
+			if (predicate(node)) return path;
+			if (node.children?.length) {
+				const hit = this.#findKeyPath(node.children, predicate, path);
+				if (hit) return hit;
+			}
+		}
+	}
+	/**
+	* All nodes currently laid out on the disk (within `maxRadius` of the
+	* focus), in render (ring-major) order. Unlike `ixfx-icicletree-list`, the
+	* focused node itself is included — it is literally rendered, at the
+	* center.
+	*/
+	getNodes() {
+		return this.#layout().nodes.map((n) => ({
+			node: n.node,
+			depth: n.depth
+		}));
+	}
+	#matchesFilter(node, depth) {
+		if (!this.filterPredicate) return true;
+		if (this.filterPredicate(node, depth)) return true;
+		return node.children?.some((child) => this.#matchesFilter(child, depth + 1)) ?? false;
+	}
+	#handleItemClick(n, event) {
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node: n.node,
+				depth: n.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (this.interactionMode === `standard` && (event.ctrlKey || event.metaKey)) {
+			if (this._selectedNodes.has(n.node)) this.deselect(n.node);
+			else if (this.#canSelect(n.node)) {
+				const prev = new Set(this._selectedNodes);
+				this._selectedNodes.add(n.node);
+				this.selectedNode = n.node;
+				this.#dispatchSelect(prev);
+				this.requestUpdate();
+			}
+		} else if (this.interactionMode !== `manual`) this.select(n.node);
+		this.tickled.setTickled(n.key);
+		this.focusOn(n.node);
+	}
+	#handleItemDblClick(n) {
+		this.dispatchEvent(new CustomEvent(`item-dblclick`, {
+			detail: {
+				node: n.node,
+				depth: n.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`activate`, {
+			detail: {
+				node: n.node,
+				depth: n.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleKeyDown(event) {
+		if (this.disableKeyboardNavigation) return;
+		const root = this.#effectiveRoot;
+		const { nodes } = this.#layout();
+		if (!root || nodes.length === 0) return;
+		const focusNode = findHyperbolicNode(root, this._focusKey ?? root.item.key);
+		if (!focusNode) return;
+		switch (event.key) {
+			case `ArrowUp`: {
+				event.preventDefault();
+				const children = nodes.filter((n) => n.parentKey === focusNode.item.key);
+				if (children.length === 0) return;
+				const best = children.reduce((a, b) => angleDistanceFromUp(a) < angleDistanceFromUp(b) ? a : b);
+				this.#focusAndMaybeSelect(best.node);
+				return;
+			}
+			case `ArrowDown`: {
+				event.preventDefault();
+				const path = findHyperbolicPath(root, focusNode.item.key);
+				const parent = path && path.length >= 2 ? path[path.length - 2] : void 0;
+				if (parent) this.#focusAndMaybeSelect(parent);
+				return;
+			}
+			case `ArrowLeft`:
+			case `ArrowRight`: {
+				event.preventDefault();
+				const path = findHyperbolicPath(root, focusNode.item.key);
+				const siblings = (path && path.length >= 2 ? path[path.length - 2] : void 0)?.children ?? (focusNode === root ? [focusNode] : []);
+				const index = siblings.findIndex((n) => n.item.key === focusNode.item.key);
+				if (index === -1 || siblings.length <= 1) return;
+				const next = siblings[(index + (event.key === `ArrowRight` ? 1 : -1) + siblings.length) % siblings.length];
+				this.#focusAndMaybeSelect(next);
+				return;
+			}
+			case `Enter`: {
+				event.preventDefault();
+				if (this.interactionMode !== `manual`) this.select(focusNode);
+				const depth = (findHyperbolicPath(root, focusNode.item.key)?.length ?? 1) - 1;
+				this.dispatchEvent(new CustomEvent(`activate`, {
+					detail: {
+						node: focusNode,
+						depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+				return;
+			}
+			case `Escape`: if (this._focusKey !== void 0 && this._focusKey !== root.item.key) {
+				event.preventDefault();
+				this.focusOn(root);
+			}
+		}
+	}
+	#isBackgroundTarget(event) {
+		const target = event.target;
+		return target === event.currentTarget || target?.classList.contains(`disk-boundary`) === true;
+	}
+	#handleBackgroundPointerDown(event) {
+		if (!this.#isBackgroundTarget(event)) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		this.#panStart = {
+			pointerId: event.pointerId,
+			startClient: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			baseOffset: this._panOffset
+		};
+	}
+	#handleBackgroundPointerMove(event) {
+		if (!this.#panStart || event.pointerId !== this.#panStart.pointerId) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		const scale = 2.1 / (Math.min(rect.width, rect.height) || 1);
+		const dx = (event.clientX - this.#panStart.startClient.x) * scale;
+		const dy = (event.clientY - this.#panStart.startClient.y) * scale;
+		this._panOffset = clampToDisk({
+			x: this.#panStart.baseOffset.x - dx,
+			y: this.#panStart.baseOffset.y - dy
+		}, .9);
+		this.requestUpdate();
+	}
+	#handleBackgroundPointerUp(event) {
+		if (this.#panStart?.pointerId === event.pointerId) this.#panStart = void 0;
+	}
+	#defaultEdgeRenderer(edge) {
+		const steps = 8;
+		let d = ``;
+		for (let i = 0; i <= steps; i++) {
+			const p = geodesicInterpolate(edge.from, edge.to, i / steps);
+			d += `${i === 0 ? `M` : `L`}${(p.x * RENDER_SCALE).toFixed(2)},${(p.y * RENDER_SCALE).toFixed(2)} `;
+		}
+		return w`<path
+      class="edge"
+      d=${d}
+      part="edge edge-to-${partToken(edge.toKey)} edge-from-${partToken(edge.fromKey)}"
+      data-from=${edge.fromKey}
+      data-to=${edge.toKey}
+      style="--edge-weight: ${edge.weightNormalized}"
+    />`;
+	}
+	#renderEdge(edge, byKey) {
+		if (this.edgeRenderer) {
+			const fromNode = byKey.get(edge.fromKey)?.node;
+			const toNode = byKey.get(edge.toKey)?.node;
+			if (fromNode && toNode) return w`<g transform="scale(${RENDER_SCALE})">${this.edgeRenderer({
+				edge,
+				fromNode,
+				toNode
+			})}</g>`;
+		}
+		return this.#defaultEdgeRenderer(edge);
+	}
+	/**
+	* A node's rendered dot radius: shrinks with distance from focus (existing
+	* behaviour), but also caps itself to the angular room {@link
+	* HyperbolicLayoutNode.angularShare} actually gives it at its radius —
+	* without this, a cluster of siblings squeezed into a narrow wedge (a
+	* bushy ancestor elsewhere in the tree, or many siblings at this level)
+	* all render at the same distance-only size and physically overlap into
+	* an unreadable blob, however small {@link minNodeRadius} suppresses their
+	* labels. `angularShare * distance` approximates the Euclidean arc length
+	* available to the node; capping the diameter to a fraction of that keeps
+	* a visible gap between crowded neighbours.
+	*/
+	#nodeRenderRadius(n) {
+		const distance = Math.hypot(n.position.x, n.position.y);
+		const scale = Math.max(.2, 1 - distance);
+		const weightScale = this.minWeightScale + (this.maxWeightScale - this.minWeightScale) * n.weightNormalized;
+		const radius = this.nodeRadius * scale * weightScale;
+		if (distance < 1e-6) return radius;
+		const arcLength = n.angularShare * distance;
+		return Math.min(radius, Math.max(arcLength * .35, .003));
+	}
+	/**
+	* Which nodes get a rendered label, greedily thinned to avoid overlap: a
+	* per-node radius threshold alone ({@link minNodeRadius}) still lets many
+	* same-sized nodes crowded into a small angular wedge all show labels that
+	* visually collide. Nodes are considered in priority order (closer ring
+	* first, then larger on-screen radius) and a label is kept only if its
+	* position isn't too close to an already-kept one.
+	*/
+	#computeLabelKeys(nodes) {
+		const minSpacing = .07;
+		const prioritised = [...nodes.filter((n) => this.#nodeRenderRadius(n) >= this.minNodeRadius)].sort((a, b) => {
+			if (a.ring !== b.ring) return a.ring - b.ring;
+			return Math.hypot(a.position.x, a.position.y) - Math.hypot(b.position.x, b.position.y);
+		});
+		const kept = [];
+		const keys = /* @__PURE__ */ new Set();
+		for (const n of prioritised) if (!kept.some((k) => Math.hypot(k.position.x - n.position.x, k.position.y - n.position.y) < minSpacing)) {
+			kept.push(n);
+			keys.add(n.key);
+		}
+		return keys;
+	}
+	#renderNode(n, siblingGroups, labelKeys) {
+		const { node, key, position } = n;
+		const selected = this._selectedNodes.has(node);
+		const tickled = this.tickled.isTickled(key);
+		const filtered = !this.#matchesFilter(node, n.depth);
+		const pending = this.#pendingKeys.has(key);
+		const isFocused = n.ring === 0;
+		const radius = this.#nodeRenderRadius(n);
+		const showLabel = labelKeys.has(key);
+		const siblings = siblingGroups.get(n.parentKey) ?? [n];
+		const index = siblings.findIndex((s) => s.key === key);
+		const scaledRadius = radius * RENDER_SCALE;
+		const weightStyle = `--node-weight: ${n.weightNormalized};${n.weight === void 0 ? `` : ` --node-weight-raw: ${n.weight};`}`;
+		return w`
+      <g
+        class="node ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${isFocused ? `focused` : ``}"
+        data-key=${key}
+        role="treeitem"
+        tabindex="-1"
+        aria-level=${n.depth + 1}
+        aria-selected=${selected}
+        aria-setsize=${siblings.length}
+        aria-posinset=${index + 1}
+        aria-label=${node.item.label}
+        part="node node-${partToken(key)}"
+        style=${weightStyle}
+        transform="translate(${position.x * RENDER_SCALE} ${position.y * RENDER_SCALE})"
+        @pointerdown=${(e) => e.stopPropagation()}
+        @click=${(e) => {
+			e.stopPropagation();
+			this.#handleItemClick(n, e);
+		}}
+        @dblclick=${(e) => {
+			e.stopPropagation();
+			this.#handleItemDblClick(n);
+		}}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+      >
+        <circle class="node-hit" r=${Math.max(scaledRadius, .035 * RENDER_SCALE)} part="hit" />
+        <circle class="node-dot" r=${scaledRadius} part="dot" />
+        ${showLabel ? w`<text class="hyperbolictree-label" part="label" x=${scaledRadius + .01 * RENDER_SCALE} y="0" dominant-baseline="middle">${node.item.label}</text>` : A}
+      </g>
+    `;
+	}
+	render() {
+		const { nodes, edges } = this.#layout();
+		const byKey = new Map(nodes.map((n) => [n.key, n]));
+		const siblingGroups = /* @__PURE__ */ new Map();
+		for (const n of nodes) {
+			const group = siblingGroups.get(n.parentKey) ?? [];
+			group.push(n);
+			siblingGroups.set(n.parentKey, group);
+		}
+		const labelKeys = this.#computeLabelKeys(nodes);
+		return b`
+      <svg
+        class="hyperbolictree"
+        viewBox="${-1.05 * RENDER_SCALE} ${-1.05 * RENDER_SCALE} ${2.1 * RENDER_SCALE} ${2.1 * RENDER_SCALE}"
+        preserveAspectRatio="xMidYMid meet"
+        role="tree"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @keydown=${(e) => this.#handleKeyDown(e)}
+        @pointerdown=${(e) => this.#handleBackgroundPointerDown(e)}
+        @pointermove=${(e) => this.#handleBackgroundPointerMove(e)}
+        @pointerup=${(e) => this.#handleBackgroundPointerUp(e)}
+        @pointerleave=${() => this.tickled.clearTickled()}
+      >
+        <g class="zoom" transform="scale(${this.zoom})">
+          <circle class="disk-boundary" part="boundary" cx="0" cy="0" r=${RENDER_SCALE} />
+          <g class="edges" part="edges">
+            ${repeat(edges, (e) => `${e.fromKey}->${e.toKey}`, (e) => this.#renderEdge(e, byKey))}
+          </g>
+          <g class="nodes" part="nodes">
+            ${repeat(nodes, (n) => n.key, (n) => this.#renderNode(n, siblingGroups, labelKeys))}
+          </g>
+        </g>
+      </svg>
+      ${this.search.renderField()}
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			listSearchStyles,
+			i$3`
+      :host {
+        --hyperbolictree-node-color: var(--surface-4);
+        --hyperbolictree-node-text: var(--surface-3-text);
+        --hyperbolictree-edge-color: var(--surface-6);
+        --hyperbolictree-boundary-color: var(--border-subtle);
+        --hyperbolictree-font-size: 25px;
+
+        display: block;
+        overflow: hidden;
+        outline: none;
+        overscroll-behavior: contain;
+      }
+
+      /*
+       * delegatesFocus means the host itself reports as focused whenever
+       * the shadow DOM's focused descendant (the svg) is — without this,
+       * the host also picks up the browser's own default focus ring/fill
+       * sized to the whole box.
+       */
+      :host(:focus),
+      :host(:focus-visible) {
+        outline: none;
+      }
+
+      .hyperbolictree {
+        display: block;
+        width: 100%;
+        height: 100%;
+        outline: none;
+        touch-action: none;
+        overscroll-behavior: contain;
+      }
+
+      .disk-boundary {
+        fill: none;
+        stroke: var(--hyperbolictree-boundary-color);
+        stroke-width: 1;
+      }
+
+      .edge {
+        fill: none;
+        stroke: var(--hyperbolictree-edge-color);
+        /* --edge-weight (0..1, average of the endpoint nodes' --node-weight) thickens heavier edges. */
+        stroke-width: calc(1px + var(--edge-weight, 0.5) * 3px);
+      }
+
+      .node {
+        cursor: pointer;
+      }
+
+      .node-hit {
+        fill: transparent;
+        pointer-events: all;
+      }
+
+      .node-dot {
+        /* --node-weight (0..1, normalized across the visible node set) tints toward --accent for heavier nodes. */
+        fill: color-mix(in oklab, var(--hyperbolictree-node-color), var(--accent) calc(var(--node-weight, 0.5) * 50%));
+        stroke: var(--surface-2);
+        stroke-width: 1;
+        pointer-events: none;
+      }
+
+      .node.tickled .node-dot {
+        fill: var(--item-bg-tickled);
+      }
+
+      .node.selected .node-dot {
+        fill: var(--item-bg-selected);
+      }
+
+      .node.selected.tickled .node-dot {
+        fill: var(--item-bg-selected-tickled);
+      }
+
+      .node.focused .node-dot {
+        stroke: var(--accent);
+        stroke-width: 3;
+      }
+
+      .node.filtered {
+        opacity: 0.3;
+      }
+
+      .node.loading .node-dot {
+        opacity: 0.6;
+      }
+
+      .hyperbolictree-label {
+        font-size: var(--hyperbolictree-font-size);
+        fill: var(--hyperbolictree-node-text);
+        cursor: pointer;
+        user-select: none;
+      }
+    `
+		];
+	}
+};
+__decorate([property({ type: Object })], HyperbolicTreeListElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "loadChildren", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], HyperbolicTreeListElement.prototype, "exclusivity", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `selection-filter`
+})], HyperbolicTreeListElement.prototype, "selectionFilter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], HyperbolicTreeListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-radius`
+})], HyperbolicTreeListElement.prototype, "maxRadius", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `node-radius`
+})], HyperbolicTreeListElement.prototype, "nodeRadius", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-node-radius`
+})], HyperbolicTreeListElement.prototype, "minNodeRadius", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-weight-scale`
+})], HyperbolicTreeListElement.prototype, "minWeightScale", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-weight-scale`
+})], HyperbolicTreeListElement.prototype, "maxWeightScale", void 0);
+__decorate([property({ type: Number })], HyperbolicTreeListElement.prototype, "zoom", void 0);
+__decorate([property({ type: Number })], HyperbolicTreeListElement.prototype, "curvature", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `focus-animation-duration`
+})], HyperbolicTreeListElement.prototype, "focusAnimationDuration", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "edgeRenderer", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "selectedNode", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-keyboard-navigation`
+})], HyperbolicTreeListElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], HyperbolicTreeListElement.prototype, "searchModes", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_focusKey", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_animCenter", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_panOffset", void 0);
+HyperbolicTreeListElement = __decorate([safeCustomElement(`ixfx-hyperbolictree-list`)], HyperbolicTreeListElement);
+//#endregion
+//#region src/icicle-tree/layout.ts
+/** Coerce a raw accessor result to a non-negative finite weight. */
+function normaliseValue(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? raw : 0;
+}
+/** Depth-first search for the node with `key`. Returns `undefined` when absent. */
+function findIcicleNode(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return root;
+	for (const child of root.children ?? []) {
+		const hit = findIcicleNode(child, key);
+		if (hit) return hit;
+	}
+}
+/**
+* Chain of nodes from `root` down to (and including) the node with `key`.
+* Returns `undefined` when the key is absent. The first entry is always `root`.
+*/
+function findIciclePath(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return [root];
+	for (const child of root.children ?? []) {
+		const hit = findIciclePath(child, key);
+		if (hit) return [root, ...hit];
+	}
+}
+/**
+* Compute the visible rectangles for an icicle view.
+*
+* Bands start at the zoom node's **children** (the zoom node itself is shown in
+* the breadcrumb strip, never as a rect — matching `TreeComponent.getNodes()`,
+* where the root is never listed). Each band spans 0–1; a rect's `x`/`width`
+* are fractions of its band, proportional to `valueAccessor` shares among
+* siblings. Siblings whose weights all normalise to `0` split the band equally.
+*
+* @param root True tree root. `undefined` (or a root without children) yields `[]`.
+* @param options `valueAccessor` (default equal weights), `maxDepth` (band count,
+*   default unlimited), `zoomKey` (visual root, default true root; unknown keys
+*   fall back to the true root).
+*/
+function computeIcicleLayout(root, options = {}) {
+	if (!root?.children?.length) return [];
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, hideLeaves = false } = options;
+	if (maxDepth <= 0) return [];
+	const zoomNode = zoomKey === void 0 ? root : findIcicleNode(root, zoomKey) ?? root;
+	const zoomPath = findIciclePath(root, zoomNode.item.key);
+	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
+	const siblings = zoomNode.children ?? [];
+	if (siblings.length === 0) return [];
+	const isLeaf = (node) => node.item.isLeaf === true || node.children !== void 0 && node.children.length === 0;
+	const rects = [];
+	const layoutLevel = (nodes, depth, relativeDepth, offset, span, parentKey) => {
+		const visible = hideLeaves ? nodes.filter((n) => !isLeaf(n)) : nodes;
+		if (visible.length === 0 || relativeDepth >= maxDepth) return;
+		const weights = visible.map((n) => normaliseValue(valueAccessor(n.item)));
+		const total = weights.reduce((a, b) => a + b, 0);
+		const setSize = visible.length;
+		let cursor = offset;
+		visible.forEach((node, index) => {
+			const width = span * (total > 0 ? weights[index] / total : 1 / setSize);
+			const children = node.children ?? [];
+			rects.push({
+				node,
+				depth,
+				relativeDepth,
+				x: cursor,
+				width,
+				parentKey,
+				index,
+				setSize,
+				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
+			});
+			if (children.length > 0) layoutLevel(children, depth + 1, relativeDepth + 1, cursor, width, node.item.key);
+			cursor += width;
+		});
+	};
+	layoutLevel(siblings, zoomDepth + 1, 0, 0, 1, zoomNode.item.key);
+	return rects;
+}
+//#endregion
+//#region src/icicle-tree/icicletree-list.ts
+let IcicleTreeListElement = class IcicleTreeListElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		this.orientation = `horizontal`;
+		this.maxDepth = 4;
+		this.minLabelWidth = 40;
+		this.minVerticalLabelWidth = 16;
+		this.hideLeaves = false;
+		this.valueAccessor = () => 1;
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.disableKeyboardNavigation = false;
+		this.registry = void 0;
+		this._zoomKey = void 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.icicle-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#rects().map((r) => ({
+				id: r.node.item.key,
+				enabled: true
+			})),
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			},
+			onTickle: (id) => {
+				if (id === void 0) return;
+				const rect = this.#rects().find((r) => r.node.item.key === id);
+				if (!rect) return;
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node: rect.node,
+						depth: rect.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+		this.#pendingKeys = /* @__PURE__ */ new Set();
+		this.#aborters = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.shadowRootOptions = {
+			...i.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	/** Current zoom root. `undefined` when showing the full tree. Pure view-state — `root` is never mutated. */
+	get focusedNode() {
+		if (this._zoomKey === void 0) return void 0;
+		return findIcicleNode(this.#effectiveRoot, this._zoomKey);
+	}
+	#modelUnsubscribe;
+	#pendingKeys;
+	#aborters;
+	#anchorIndex;
+	#ownedRegistry;
+	#unregisterSearchCommands;
+	#resizeObserver;
+	get #effectiveRoot() {
+		return this.model?.root ?? this.root;
+	}
+	#rects() {
+		return computeIcicleLayout(this.#effectiveRoot, {
+			valueAccessor: this.valueAccessor,
+			maxDepth: this.maxDepth,
+			zoomKey: this._zoomKey,
+			hideLeaves: this.hideLeaves
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`data-input-mode`, `mouse`);
+		const registry = this.#ownedRegistry = createCommandRegistry();
+		registry.register({
+			id: `select-all`,
+			label: `Select All`,
+			description: `Select all visible items`,
+			execute: () => this.selectAll()
+		});
+		registry.register({
+			id: `deselect-all`,
+			label: `Deselect All`,
+			description: `Clear all selection`,
+			execute: () => this.deselectAll()
+		});
+		this.registry = registry;
+		this.#syncSearchCommands();
+		if (typeof ResizeObserver !== `undefined`) {
+			this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
+			this.#resizeObserver.observe(this);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		for (const aborter of this.#aborters.values()) aborter.abort();
+		this.#aborters.clear();
+		this.#pendingKeys.clear();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		if (this.#ownedRegistry) {
+			this.#ownedRegistry.unregister(`select-all`);
+			this.#ownedRegistry.unregister(`deselect-all`);
+			this.#ownedRegistry = void 0;
+			this.registry = void 0;
+		}
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
+	}
+	updated(changedProps) {
+		if (changedProps.has(`root`) && this.root) this.#resetViewState();
+		if (changedProps.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = void 0;
+			if (this.model) {
+				this.#modelUnsubscribe = this.model._subscribe((event) => {
+					if (event.type === `root`) {
+						this.#resetViewState();
+						this.requestUpdate();
+					} else if (event.type === `invalidate`) this.requestUpdate();
+				});
+				this.#resetViewState();
+			}
+		}
+		if (changedProps.has(`interactionMode`)) {
+			this.#anchorIndex = void 0;
+			this.clearSelection();
+		}
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
+		if (this._zoomKey !== void 0 && !findIcicleNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
+		this.#ensureVisibleChildren();
+		this.#syncTooltip();
+	}
+	/** The host's own (viewport) extent — width in horizontal orientation, height in vertical. */
+	#hostExtent() {
+		return (this.orientation === `vertical` ? this.clientHeight : this.clientWidth) || 0;
+	}
+	/**
+	* Whether `rect`'s label should be rotated or hidden for lack of space, per
+	* {@link minLabelWidth} / {@link minVerticalLabelWidth}. `orientation="vertical"`
+	* rects never rotate — hides outright at `minLabelWidth` instead, same as before.
+	*/
+	#labelMode(rect) {
+		const hostExtent = this.#hostExtent();
+		if (hostExtent === 0) return {
+			hidden: false,
+			rotated: false
+		};
+		const vertical = this.orientation === `vertical`;
+		const pixelWidth = rect.width * hostExtent;
+		if (vertical) return {
+			hidden: pixelWidth < this.minLabelWidth,
+			rotated: false
+		};
+		if (pixelWidth < this.minVerticalLabelWidth) return {
+			hidden: true,
+			rotated: false
+		};
+		return {
+			hidden: false,
+			rotated: pixelWidth < this.minLabelWidth
+		};
+	}
+	/** Anchor the shared tooltip popover to the tickled rect, if its label needs one. */
+	#syncTooltip() {
+		const popover = this._tooltipEl;
+		if (!popover?.popover) return;
+		const key = this.tickled.tickledId;
+		const rect = key === void 0 ? void 0 : this.#rects().find((r) => r.node.item.key === key);
+		const mode = rect ? this.#labelMode(rect) : void 0;
+		const isOpen = popover.matches(`:popover-open`);
+		if (rect && mode && (mode.hidden || mode.rotated)) {
+			popover.textContent = rect.node.item.label;
+			if (!isOpen) try {
+				popover.showPopover();
+			} catch {}
+		} else if (isOpen) try {
+			popover.hidePopover();
+		} catch {}
+	}
+	#resetViewState() {
+		this.#clearSelectionInternal();
+		this.tickled.clearTickled();
+		this._zoomKey = void 0;
+		this.#anchorIndex = void 0;
+	}
+	#ensureVisibleChildren() {
+		if (!this.model && !this.loadChildren) return;
+		for (const rect of this.#rects()) {
+			const { node } = rect;
+			if (node.children !== void 0 || this.#pendingKeys.has(node.item.key)) continue;
+			this.#loadChildren(node, rect.depth);
 		}
 	}
 	async #loadChildren(node, depth) {
@@ -37590,8 +38953,7 @@ let MulticolListElement = class MulticolListElement extends i {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: hidden;
         position: relative;
         height: 100%;
       }
@@ -38169,6 +39531,71 @@ let MulticolListElement = class MulticolListElement extends i {
 			composed: true
 		}));
 	}
+	async autoSizeColumns(options) {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				const minWidth = options?.minWidth ?? MIN_COLUMN_WIDTH;
+				const maxWidth = options?.maxWidth ?? MAX_COLUMN_WIDTH;
+				const measure = (text) => {
+					const span = document.createElement(`span`);
+					span.style.position = `absolute`;
+					span.style.visibility = `hidden`;
+					span.style.whiteSpace = `nowrap`;
+					span.style.font = getComputedStyle(this).font;
+					span.textContent = text;
+					document.body.appendChild(span);
+					const w = span.getBoundingClientRect().width;
+					document.body.removeChild(span);
+					return w;
+				};
+				for (const col of this._columns) {
+					const colEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"]`);
+					if (!colEl) continue;
+					const headerEl = colEl.querySelector(`.column-header`);
+					const listerHost = colEl.querySelector(`.lister-host`);
+					let contentWidth = 0;
+					if (listerHost) {
+						const allLabel = listerHost.querySelector(`.all-label`);
+						if (allLabel) contentWidth = Math.max(contentWidth, measure(allLabel.textContent ?? ``));
+						const groupedLister = listerHost.querySelector(`ixfx-grouped-item-lister`);
+						if (groupedLister) {
+							const verticalLists = groupedLister.querySelectorAll(`ixfx-vertical-list`);
+							for (const vl of verticalLists) {
+								const itemEls = vl.querySelectorAll(`li`);
+								for (const li of itemEls) {
+									const labelEl = li.querySelector(`.item-label`);
+									const countEl = li.querySelector(`.count`);
+									const combinedText = (labelEl?.textContent ?? ``) + (countEl?.textContent ?? ``);
+									contentWidth = Math.max(contentWidth, measure(combinedText));
+								}
+							}
+						}
+					}
+					let headerWidth = 0;
+					if (headerEl) {
+						const labelBtn = headerEl.querySelector(`.column-label`);
+						if (labelBtn) {
+							const labelTextWidth = measure(labelBtn.textContent ?? ``);
+							const btnStyle = getComputedStyle(labelBtn);
+							const labelBtnPaddingH = Number.parseFloat(btnStyle.paddingLeft) + Number.parseFloat(btnStyle.paddingRight);
+							const burgerBtn = headerEl.querySelector(`.burger-btn`);
+							const burgerWidth = burgerBtn ? Number.parseFloat(getComputedStyle(burgerBtn).width) : 0;
+							const headerStyle = getComputedStyle(headerEl);
+							const gap = Number.parseFloat(headerStyle.gap) || 0;
+							headerWidth = labelTextWidth + labelBtnPaddingH + burgerWidth + gap;
+						}
+					}
+					const neededWidth = Math.max(headerWidth, contentWidth + 24 + 16);
+					const clampedWidth = Math.max(minWidth, Math.min(maxWidth, Math.ceil(neededWidth)));
+					col.setWidth(clampedWidth);
+				}
+				this._updateColOffsets();
+				this._emitColumnsChange(`resize`);
+				this.requestUpdate();
+				resolve();
+			}, 0);
+		});
+	}
 };
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);
@@ -50537,6 +51964,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findHyperbolicNode, findHyperbolicPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicDistanceForEuclideanRadius, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map