@ixfx/components 0.10.7 → 0.10.8

package/dist/index.js

@@ -35,7 +35,7 @@ import { a as menuFromTreeToElements, t as menu_exports } from "./menu-B2Qv3Oiz.
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
 import { DataGridElement } from "./data-grid.js";
 import { DetailListElement } from "./detail-list.js";
-import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BJEU1W0d.js";
+import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-CXotkdbx.js";
 import { TabListElement } from "./tabs.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
@@ -3745,6 +3745,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._junctionsKey = ``;
 		this._junctionsRaf = null;
 		this._hostResizeObserver = null;
+		this._loadGeneration = 0;
 		this._toolbarSlots = /* @__PURE__ */ new Set();
 		this._toolbarObserver = null;
 		this._panelObservers = /* @__PURE__ */ new Map();
@@ -4062,6 +4063,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 	}
 	loadLayout(layout) {
 		this._returnAllToolbars();
+		this._loadGeneration++;
 		this._model = normalize(cloneNode(layout.root));
 		this._mergePoolIntoModel();
 		this.requestUpdate();
@@ -4763,12 +4765,18 @@ let DockHostElement = class DockHostElement extends LitElement {
 		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() {
@@ -4897,6 +4905,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         size=${size === void 0 ? nothing : 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)}
@@ -5518,47 +5527,1289 @@ function createVerticalListAdapter(renderItem, options) {
 			list.addItem(el);
 		}
 	}
-	function mapEls(els) {
-		const result = /* @__PURE__ */ new Set();
-		for (const el of els) {
-			const item = elToItem.get(el);
-			if (item !== void 0) result.add(item);
+	function mapEls(els) {
+		const result = /* @__PURE__ */ new Set();
+		for (const el of els) {
+			const item = elToItem.get(el);
+			if (item !== void 0) result.add(item);
+		}
+		return result;
+	}
+	const adapter = Object.assign(container, {
+		setItems(items) {
+			applyItems(items);
+		},
+		clearSelection() {
+			listEl?.clearSelection();
+		},
+		dispatch(commandId, args) {
+			options?.onDispatch?.(commandId, args, listEl);
+		}
+	});
+	Object.defineProperties(adapter, {
+		selectedItems: {
+			get() {
+				return listEl ? mapEls(listEl.selectedItems) : /* @__PURE__ */ new Set();
+			},
+			enumerable: true,
+			configurable: true
+		},
+		selectionMode: {
+			get() {
+				return listEl?.selectionMode ?? selectionMode;
+			},
+			set(v) {
+				selectionMode = v;
+				if (listEl) listEl.selectionMode = v;
+			},
+			enumerable: true,
+			configurable: true
+		}
+	});
+	return adapter;
+}
+//#endregion
+//#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 findHyperbolicNode(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return root;
+	for (const child of root.children ?? []) {
+		const hit = findHyperbolicNode(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 findHyperbolicPath(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return [root];
+	for (const child of root.children ?? []) {
+		const hit = findHyperbolicPath(child, key);
+		if (hit) return [root, ...hit];
+	}
+}
+/**
+* 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.
+*
+* 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.
+*
+* `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 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
+			});
+			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);
+		});
+	};
+	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/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 LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		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._focusKey = void 0;
+		this._animCenter = void 0;
+		this._panOffset = {
+			x: 0,
+			y: 0
+		};
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.hyperbolictree-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#layout().nodes.map((n) => ({
+				id: n.key,
+				enabled: true
+			})),
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			},
+			onTickle: (id) => {
+				if (id === void 0) return;
+				const n = this.#layout().nodes.find((n) => n.key === id);
+				if (!n) return;
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node: n.node,
+						depth: n.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+		this.#pendingKeys = /* @__PURE__ */ new Set();
+		this.#aborters = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	/** The node currently centered on the disk. Pure view-state — `root` is never mutated by focus changes. */
+	get focusedNode() {
+		if (this._focusKey === void 0) return this.#effectiveRoot;
+		return findHyperbolicNode(this.#effectiveRoot, this._focusKey) ?? this.#effectiveRoot;
+	}
+	#modelUnsubscribe;
+	#pendingKeys;
+	#aborters;
+	#ownedRegistry;
+	#unregisterSearchCommands;
+	#animFrame;
+	#panStart;
+	get #effectiveRoot() {
+		return this.model?.root ?? this.root;
+	}
+	#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`);
+		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();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		for (const aborter of this.#aborters.values()) aborter.abort();
+		this.#aborters.clear();
+		this.#pendingKeys.clear();
+		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`);
+			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.clearSelection();
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
+		if (this._focusKey !== void 0 && !findHyperbolicNode(this.#effectiveRoot, this._focusKey)) {
+			this._focusKey = void 0;
+			this._animCenter = void 0;
+		}
+		this.#ensureVisibleChildren();
+	}
+	#resetViewState() {
+		this.#clearSelectionInternal();
+		this.tickled.clearTickled();
+		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 n of this.#layout().nodes) {
+			const { node } = n;
+			if (node.children !== void 0 || this.#pendingKeys.has(node.item.key)) continue;
+			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;
 		}
-		return result;
+		this.focusOn(current);
+		this.select(current);
+		this.tickled.setTickled(current.item.key);
+		this.requestUpdate();
+		return true;
 	}
-	const adapter = Object.assign(container, {
-		setItems(items) {
-			applyItems(items);
-		},
-		clearSelection() {
-			listEl?.clearSelection();
-		},
-		dispatch(commandId, args) {
-			options?.onDispatch?.(commandId, args, listEl);
+	/** 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;
+			}
 		}
-	});
-	Object.defineProperties(adapter, {
-		selectedItems: {
-			get() {
-				return listEl ? mapEls(listEl.selectedItems) : /* @__PURE__ */ new Set();
+	}
+	/**
+	* 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
 			},
-			enumerable: true,
-			configurable: true
-		},
-		selectionMode: {
-			get() {
-				return listEl?.selectionMode ?? selectionMode;
+			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
 			},
-			set(v) {
-				selectionMode = v;
-				if (listEl) listEl.selectionMode = v;
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`activate`, {
+			detail: {
+				node: n.node,
+				depth: n.depth
 			},
-			enumerable: true,
-			configurable: true
+			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);
+			}
 		}
-	});
-	return adapter;
-}
+	}
+	#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 svg`<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 svg`<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 svg`
+      <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 ? svg`<text class="hyperbolictree-label" part="label" x=${scaledRadius + .01 * RENDER_SCALE} y="0" dominant-baseline="middle">${node.item.label}</text>` : nothing}
+      </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 html`
+      <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,
+			css`
+      :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. */
@@ -6923,8 +8174,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: hidden;
         position: relative;
         height: 100%;
       }
@@ -7545,7 +8795,16 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 					let headerWidth = 0;
 					if (headerEl) {
 						const labelBtn = headerEl.querySelector(`.column-label`);
-						if (labelBtn) headerWidth = measure(labelBtn.textContent ?? ``);
+						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)));
@@ -12919,6 +14178,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