@ixfx/components 0.11.4 → 0.11.5

package/dist/index.js

@@ -42,7 +42,7 @@ import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-FdCRi6st.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-k89JpiNy.js";
+import { t as GridListElement } from "./grid-list-3fGhdaFA.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
@@ -1497,6 +1497,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this.path = ``;
 		this.separator = `/`;
 		this.pathRoot = ``;
+		this.hintPrevious = false;
 		this._openIdx = null;
 		this._editing = false;
 		this._cachedSiblings = /* @__PURE__ */ new Map();
@@ -1508,6 +1509,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._openCumPath = null;
 		this._dragCumPath = null;
 		this._dropCumPath = null;
+		this._hintSegments = null;
 		this.#uid = Math.random().toString(36).slice(2, 8);
 		this.#clickSuppressUntil = 0;
 		this.#onPopoverToggle = (e) => {
@@ -1643,6 +1645,19 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#clicksSuppressed() {
 		return Date.now() < this.#clickSuppressUntil || this._dragCumPath !== null;
 	}
+	#isSegmentPrefix(prefix, full) {
+		return prefix.length <= full.length && prefix.every((seg, i) => seg === full[i]);
+	}
+	/**
+	* Called when a real segment click shortens the path. Keeps the deepest
+	* known branch: only overwrites `_hintSegments` when the current hint no
+	* longer covers where we're navigating to.
+	*/
+	#recordHintOnShorten(oldSegments, newSegments) {
+		if (!this.hintPrevious) return;
+		const hint = this._hintSegments;
+		if (!(hint !== null && this.#isSegmentPrefix(newSegments, hint))) this._hintSegments = oldSegments;
+	}
 	#resolveSegmentIcon(fullPathSegments, index) {
 		const direct = this.segmentIconLookup?.(fullPathSegments, index);
 		if (typeof direct === `string` && direct.length > 0) return direct;
@@ -1788,12 +1803,63 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			composed: true
 		}));
 	}
+	/**
+	* The current leaf segment (deepest visible segment), used as the drop target
+	* when a drag is released over blank space rather than a specific `.seg`.
+	*/
+	#leafSegment() {
+		const segments = this.#getSegments();
+		if (segments.length > 0) {
+			const index = segments.length - 1;
+			return {
+				cumPath: this.#getCumulativePath(index, false),
+				fullPathSegments: this.#resolveFullPathSegments(index, false)
+			};
+		}
+		const rootSegments = this.#getRootSegments();
+		if (rootSegments.length > 0) {
+			const index = rootSegments.length - 1;
+			return {
+				cumPath: this.#getCumulativePath(index, true),
+				fullPathSegments: this.#resolveFullPathSegments(index, true)
+			};
+		}
+	}
+	/**
+	* Is `event` already being handled by a `.seg`'s own drag handlers? Virtual
+	* (hint) segments don't have drag handlers of their own, so a drag released
+	* over one falls through to the host-level fallback (the real leaf).
+	*/
+	#eventTargetsSegment(event) {
+		return Boolean(event.target?.closest?.(`.seg:not(.seg-virtual)`));
+	}
+	#onHostDragOver(event) {
+		if (!this.parseExternalDrop || !event.dataTransfer) return;
+		if (this.#eventTargetsSegment(event)) return;
+		const leaf = this.#leafSegment();
+		if (!leaf) return;
+		event.preventDefault();
+		if (this._dropCumPath !== leaf.cumPath) this._dropCumPath = leaf.cumPath;
+	}
+	#onHostDragLeave(event) {
+		if (!this.parseExternalDrop || this.#eventTargetsSegment(event)) return;
+		const leaf = this.#leafSegment();
+		if (leaf && this._dropCumPath === leaf.cumPath) this._dropCumPath = null;
+	}
+	#onHostDrop(event) {
+		if (!this.parseExternalDrop || this.#eventTargetsSegment(event)) return;
+		const leaf = this.#leafSegment();
+		if (!leaf) return;
+		this.#onSegDrop(leaf.fullPathSegments, event);
+	}
 	#onLabelClick(index, event) {
 		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
-		const truncatedSegments = this.#getSegments().slice(0, index + 1);
+		const segments = this.#getSegments();
+		const truncatedSegments = segments.slice(0, index + 1);
+		this.#recordHintOnShorten(segments, truncatedSegments);
 		const hadLeading = this.path.startsWith(this.separator);
 		const newPath = truncatedSegments.join(this.separator);
 		this.path = hadLeading ? this.separator + newPath : newPath;
@@ -1811,6 +1877,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 			composed: true
 		}));
 	}
+	#onVirtualSegmentClick(hintIndex, event) {
+		if (this.#clicksSuppressed()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.#closeDropdown();
+		const hint = this._hintSegments;
+		if (!hint) return;
+		const truncatedSegments = hint.slice(0, hintIndex + 1);
+		const hadLeading = this.path.startsWith(this.separator);
+		const newPath = truncatedSegments.join(this.separator);
+		this.path = hadLeading ? this.separator + newPath : newPath;
+		this._cachedSiblings = /* @__PURE__ */ new Map();
+		this._leafSegmentIndex = null;
+		const parentPath = truncatedSegments.slice(0, -1).join(this.separator);
+		this.dispatchEvent(new CustomEvent(`navigate`, {
+			detail: {
+				index: hintIndex,
+				label: truncatedSegments[hintIndex],
+				parentPath,
+				fullPath: newPath
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#selectSibling(index, segment) {
 		const cumPath = this._openCumPath;
 		this.#closeDropdown();
@@ -1886,7 +1977,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
            @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
         <label title=${label}
                part="label"
-               ?draggable=${draggable}
+               draggable=${draggable ? `true` : `false`}
                @click=${(e) => this.#onLabelClick(index, e)}
                @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
                @dragend=${() => this.#onLabelDragEnd()}>
@@ -1903,6 +1994,26 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
           </div>
         ` : nothing}
       </div>
+    `;
+	}
+	/**
+	* A translucent, click-to-restore segment beyond the current path, shown
+	* while `hintPrevious` is enabled and the current path is a prefix of the
+	* deepest path visited. Doesn't participate in drag'n'drop and isn't
+	* keyboard-focusable.
+	*/
+	#renderVirtualSegment(label, hintIndex) {
+		const fullPathSegments = [...this.#getRootSegments(), ...(this._hintSegments ?? []).slice(0, hintIndex + 1)];
+		const icon = this.#resolveSegmentIcon(fullPathSegments, fullPathSegments.length - 1);
+		return html`
+      <div class="seg seg-virtual" part="segment virtual">
+        <label title=${label}
+               part="label"
+               @click=${(e) => this.#onVirtualSegmentClick(hintIndex, e)}>
+          ${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}
+          ${label}
+        </label>
+      </div>
     `;
 	}
 	#renderRootSegment(label, index) {
@@ -1924,7 +2035,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
            @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
         <label title=${label}
                part="label"
-               ?draggable=${draggable}
+               draggable=${draggable ? `true` : `false`}
                @click=${(e) => this.#onLabelClick(index, e)}
                @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
                @dragend=${() => this.#onLabelDragEnd()}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
@@ -2030,6 +2141,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#onHostKeyDown;
 	render() {
 		const segments = this.#getSegments();
+		const hintSegments = this.hintPrevious ? this._hintSegments : null;
+		const virtualSegments = hintSegments !== null && hintSegments.length > segments.length && this.#isSegmentPrefix(segments, hintSegments) ? hintSegments.slice(segments.length) : [];
 		if (this._editing) {
 			const editValue = this.path;
 			return html`
@@ -2052,10 +2165,15 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
         ${this.separator}
       </div>` : nothing;
 		return html`
-      <div class="crumbs scroll-fade-x" tabindex="0" @keydown=${this.#onHostKeyDown}>
+      <div class="crumbs scroll-fade-x" tabindex="0"
+           @keydown=${this.#onHostKeyDown}
+           @dragover=${(e) => this.#onHostDragOver(e)}
+           @dragleave=${(e) => this.#onHostDragLeave(e)}
+           @drop=${(e) => this.#onHostDrop(e)}>
         ${rootSegments.length > 0 ? rootSegments.map((label, i) => this.#renderRootSegment(label, i)) : nothing}
         ${leadingCaret}
         ${segments.map((label, i) => this.#renderSegment(label, i, i === segments.length - 1))}
+        ${virtualSegments.map((label, i) => this.#renderVirtualSegment(label, segments.length + i))}
         <div class="trailing" @click=${this.#onTrailingClick}></div>
       </div>
       ${this._openIdx !== null ? html`
@@ -2082,6 +2200,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
       --padding-m: var(--space-s);
       --hover-bg: var(--surface-5);
       --hover-fg: var(--surface-5-text);
+      --crumb-hint-opacity: 0.35;
+      --crumb-hint-hover-opacity: 0.6;
 
       display: flex;
       width: 100%;
@@ -2193,6 +2313,14 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
       background: var(--crumb-drop-into-bg, color-mix(in srgb, var(--accent) 14%, transparent));
     }
 
+    .seg-virtual {
+      opacity: var(--crumb-hint-opacity);
+    }
+
+    .seg-virtual:hover {
+      opacity: var(--crumb-hint-hover-opacity);
+    }
+
     .crumb-icon {
       width: 1em;
       height: 1em;
@@ -2277,6 +2405,10 @@ __decorate([property({ type: Object })], CrumbPathElement.prototype, "siblingLoo
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentIconLookup", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentDragLookup", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "parseExternalDrop", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hint-previous`
+})], CrumbPathElement.prototype, "hintPrevious", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openIdx", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editing", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
@@ -2288,6 +2420,7 @@ __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_dragCumPath", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_dropCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_hintSegments", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-table/data-table.ts
@@ -5721,6 +5854,90 @@ function createVerticalListAdapter(renderItem, options) {
 	});
 	return adapter;
 }
+/**
+* Whether `n` deserves a preview: it has children and at least one of them
+* isn't legible right now — laid out without a label, or not laid out at
+* all (outside the `maxRadius` window).
+*/
+function needsChildPreview(n, visible, labelIds) {
+	const children = n.node.children ?? [];
+	if (children.length === 0) return false;
+	const shown = visible.filter((v) => v.parentId === n.id);
+	return shown.length < children.length || shown.some((v) => !labelIds.has(v.id));
+}
+/** Where node position `p` (disk units) lands on screen, in CSS px from the host's top-left. */
+function diskToHostPx(p, zoom, width, height) {
+	const pxPerUnit = Math.min(width, height) / 2.1;
+	return {
+		x: width / 2 + (zoom.offset.x + zoom.zoom * p.x) * pxPerUnit,
+		y: height / 2 + (zoom.offset.y + zoom.zoom * p.y) * pxPerUnit
+	};
+}
+function renderChildPreview(preview, handlers) {
+	if (!preview) return nothing;
+	const children = preview.node.children ?? [];
+	const listed = children.slice(0, 12);
+	const more = children.length - listed.length;
+	return html`
+    <div
+      class="child-preview ${preview.above ? `above` : `below`}"
+      part="child-preview"
+      role="dialog"
+      aria-label=${`Children of ${preview.node.item.label}`}
+      style="left: ${preview.anchor.x}px; top: ${preview.anchor.y}px"
+      @pointerenter=${handlers.onPointerEnter}
+      @pointerleave=${handlers.onPointerLeave}
+      @pointerdown=${(e) => e.stopPropagation()}
+    >
+      <div class="child-preview-title">${preview.node.item.label}</div>
+      <ul>
+        ${listed.map((child) => html`<li>
+          <button type="button" tabindex="-1" @click=${() => handlers.onPick(child)}>${child.item.label}</button>
+        </li>`)}
+      </ul>
+      ${more > 0 ? html`<div class="child-preview-more">+${more} more</div>` : nothing}
+    </div>
+  `;
+}
+/**
+* Show/hide timing for the preview: shows at once for a qualifying node;
+* otherwise hides after a short grace period, unless the pointer is over the
+* popover itself — so it can travel from the node onto the list.
+*/
+function createChildPreviewTiming(host) {
+	let hovered = false;
+	let timer;
+	const update = (id) => {
+		clearTimeout(timer);
+		const candidate = host.candidate(id);
+		if (candidate !== void 0) {
+			host.setPreviewId(candidate);
+			return;
+		}
+		timer = setTimeout(() => {
+			if (!hovered) host.setPreviewId(void 0);
+		}, 250);
+	};
+	return {
+		update,
+		pointerEnter() {
+			hovered = true;
+			clearTimeout(timer);
+		},
+		pointerLeave(tickledId) {
+			hovered = false;
+			update(tickledId);
+		},
+		hide() {
+			hovered = false;
+			clearTimeout(timer);
+			host.setPreviewId(void 0);
+		},
+		dispose() {
+			clearTimeout(timer);
+		}
+	};
+}
 //#endregion
 //#region src/hyperbolic-tree/poincare-math.ts
 const EPSILON = 1e-9;
@@ -5825,237 +6042,954 @@ function geodesicInterpolate(a, b, t) {
 	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;
+const identityIsometry = {
+	a: {
+		x: 1,
+		y: 0
+	},
+	b: {
+		x: 0,
+		y: 0
 	}
+};
+/** Apply `m` to `z`. */
+function applyIsometry(m, z) {
+	return clampToDisk(complexDiv(complexAdd(complexMul(m.a, z), m.b), complexAdd(complexMul(complexConjugate(m.b), z), complexConjugate(m.a))));
+}
+/** `outer ∘ inner` — apply `inner` first, then `outer`. */
+function composeIsometry(outer, inner) {
+	const a = complexAdd(complexMul(outer.a, inner.a), complexMul(outer.b, complexConjugate(inner.b)));
+	const b = complexAdd(complexMul(outer.a, inner.b), complexMul(outer.b, complexConjugate(inner.a)));
+	const det = Math.sqrt(Math.max(EPSILON, a.x * a.x + a.y * a.y - b.x * b.x - b.y * b.y));
+	return {
+		a: complexScale(a, 1 / det),
+		b: complexScale(b, 1 / det)
+	};
 }
-/**
-* 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];
-	}
+function invertIsometry(m) {
+	return {
+		a: complexConjugate(m.a),
+		b: complexScale(m.b, -1)
+	};
 }
-/**
-* 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;
+/** Pure translation carrying the origin to `p` (same map as {@link mobiusFromOrigin}). */
+function translationFromOrigin(p) {
+	const scale = 1 / Math.sqrt(Math.max(EPSILON, 1 - p.x * p.x - p.y * p.y));
+	return {
+		a: {
+			x: scale,
+			y: 0
+		},
+		b: complexScale(p, scale)
+	};
+}
+/** `z ↦ e^{iθ}·z`. */
+function rotationIsometry(theta) {
+	return {
+		a: {
+			x: Math.cos(theta / 2),
+			y: Math.sin(theta / 2)
+		},
+		b: {
+			x: 0,
+			y: 0
+		}
+	};
 }
 /**
-* 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.
+* The view map that sends canonical point `center` to the origin, then
+* rotates by `rotation` radians: `z ↦ e^{i·rotation}·mobiusToOrigin(z, center)`.
 */
-function boundaryAngleInLocalFrame(theta, localOrigin) {
-	const transformed = mobiusToOrigin({
-		x: Math.cos(theta),
-		y: Math.sin(theta)
-	}, localOrigin);
-	return Math.atan2(transformed.y, transformed.x);
+function viewIsometry(center, rotation = 0) {
+	return composeIsometry(rotationIsometry(rotation), invertIsometry(translationFromOrigin(center)));
 }
-/** 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;
+/** Decompose `m` into the `{ center, rotation }` accepted by {@link viewIsometry}. */
+function decomposeViewIsometry(m) {
+	return {
+		center: applyIsometry(invertIsometry(m), {
+			x: 0,
+			y: 0
+		}),
+		rotation: 2 * Math.atan2(m.a.y, m.a.x)
+	};
+}
+function geodesicSegment(p, q) {
+	const det = p.x * q.y - p.y * q.x;
+	const chord = Math.hypot(q.x - p.x, q.y - p.y);
+	if (Math.abs(det) < 1e-6 * Math.max(chord, EPSILON)) return { kind: `line` };
+	const rp = (p.x * p.x + p.y * p.y + 1) / 2;
+	const rq = (q.x * q.x + q.y * q.y + 1) / 2;
+	const center = {
+		x: (rp * q.y - rq * p.y) / det,
+		y: (p.x * rq - q.x * rp) / det
+	};
+	return {
+		kind: `arc`,
+		center,
+		radius: Math.sqrt(Math.max(0, center.x * center.x + center.y * center.y - 1)),
+		sweep: (p.x - center.x) * (q.y - center.y) - (p.y - center.y) * (q.x - center.x) > 0 ? 1 : 0
+	};
+}
+/** SVG path `d` for the geodesic from `p` to `q`, with coordinates multiplied by `scale`. */
+function geodesicPath(p, q, scale = 1) {
+	const fmt = (n) => (n * scale).toFixed(2);
+	const segment = geodesicSegment(p, q);
+	const start = `M${fmt(p.x)},${fmt(p.y)}`;
+	if (segment.kind === `line` || segment.radius * scale > 1e6) return `${start} L${fmt(q.x)},${fmt(q.y)}`;
+	return `${start} A${fmt(segment.radius)},${fmt(segment.radius)} 0 0 ${segment.sweep} ${fmt(q.x)},${fmt(q.y)}`;
+}
+//#endregion
+//#region src/hyperbolic-tree/view-motion.ts
+/** Wrap an angle into `(-π, π]`. */
+function wrapAngle(theta) {
+	return Math.atan2(Math.sin(theta), Math.cos(theta));
+}
+function easeInOutCubic(t) {
+	return t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function prefersReducedMotion$1() {
+	return typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches;
 }
 /**
-* 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).
+* The view after dragging from `start` to `current` (both disk
+* coordinates), starting from `baseView`. Applies the hyperbolic translation
+* along the geodesic carrying the grabbed point to the pointer — a true
+* isometry, so the grabbed point tracks the pointer exactly and the tree
+* never distorts. (Adding a Euclidean offset to the canonical center
+* instead is not an isometry: it lurches badly near the disk boundary.)
 */
-const CHAIN_JITTER_RADIANS = .22;
+function panView(baseView, start, current) {
+	const toStart = translationFromOrigin(start);
+	return composeIsometry(composeIsometry(toStart, composeIsometry(translationFromOrigin(mobiusToOrigin(current, start)), invertIsometry(toStart))), baseView);
+}
 /**
-* 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.
+* A focus-change animation from view `from` — the old view, re-expressed in
+* the *new* focus's local frame, so the new focus currently sits somewhere
+* off-center — to a settled view with the new focus at the center. The
+* center travels along the hyperbolic geodesic; the rotation is held, so the
+* tree glides into place without spinning, and the settled view keeps
+* whatever orientation it arrived with (`settledRotation`).
 */
-function computeCanonicalPositions(root, maxDepth = 24, curvature = 1) {
-	const map = /* @__PURE__ */ new Map();
-	if (!root) return map;
+function focusTransition(from) {
+	const { center, rotation } = decomposeViewIsometry(from);
+	const settledRotation = wrapAngle(rotation);
 	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);
-		});
+	return {
+		settledRotation,
+		viewAt: (t) => {
+			const eased = easeInOutCubic(Math.min(1, Math.max(0, t)));
+			return viewIsometry(geodesicInterpolate(center, origin, eased), settledRotation);
+		}
 	};
-	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);
-			}
+//#endregion
+//#region src/hyperbolic-tree/gestures.ts
+const MIN_ZOOM = .5;
+/**
+* Keep the view center over the disk (so you can't zoom off into empty
+* space), and re-center entirely once the whole disk fits again.
+*/
+function clampZoomState(state) {
+	const zoom = Math.min(8, Math.max(MIN_ZOOM, state.zoom));
+	if (zoom <= 1) return {
+		zoom,
+		offset: {
+			x: 0,
+			y: 0
 		}
-		frontier = next;
-	}
-	return ring;
+	};
+	const limit = zoom - 1;
+	const length = Math.hypot(state.offset.x, state.offset.y);
+	return {
+		zoom,
+		offset: length > limit ? {
+			x: state.offset.x * limit / length,
+			y: state.offset.y * limit / length
+		} : state.offset
+	};
 }
 /**
-* 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).
+* Zoom by `factor` keeping the disk point under `screenPoint` fixed on
+* screen — the "zoom where I'm pointing" behaviour of maps and image viewers.
 */
-function computeHyperbolicLayout(root, options = {}) {
-	if (!root) return {
-		nodes: [],
-		edges: []
+function zoomAt(state, screenPoint, factor) {
+	const zoom = Math.min(8, Math.max(MIN_ZOOM, state.zoom * factor));
+	const disk = screenToDisk(screenPoint, state);
+	return clampZoomState({
+		zoom,
+		offset: {
+			x: screenPoint.x - zoom * disk.x,
+			y: screenPoint.y - zoom * disk.y
+		}
+	});
+}
+/**
+* A client-space position in screen units: disk radii from the SVG's center,
+* before zoom. The disk fills the SVG's smaller dimension, with the
+* viewBox's 5% margin.
+*/
+function clientToScreen(rect, clientX, clientY) {
+	const unitsPerPixel = 2.1 / (Math.min(rect.width, rect.height) || 1);
+	return {
+		x: (clientX - (rect.left + rect.width / 2)) * unitsPerPixel,
+		y: (clientY - (rect.top + rect.height / 2)) * unitsPerPixel
 	};
-	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: []
+}
+function screenToDisk(p, state) {
+	const zoom = state.zoom || 1;
+	return {
+		x: (p.x - state.offset.x) / zoom,
+		y: (p.y - state.offset.y) / zoom
 	};
-	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`);
+}
+/** Is `event` on empty disk space (the SVG itself or the boundary circle), rather than a node? */
+function isBackground(event) {
+	const target = event.target;
+	return target === event.currentTarget || target?.classList.contains(`disk-boundary`) === true;
+}
+function createGestureHandlers(host) {
+	const pointers = /* @__PURE__ */ new Map();
+	let pan;
+	let pinch;
+	const screenOf = (event) => {
+		const rect = host.svgRect();
+		return rect ? clientToScreen(rect, event.clientX, event.clientY) : void 0;
+	};
+	const diskOf = (screen) => clampToDisk(screenToDisk(screen, host.zoomState()), .98);
+	const midpoint = (a, b) => ({
+		x: (a.x + b.x) / 2,
+		y: (a.y + b.y) / 2
+	});
+	const startPan = (pointerId, screen) => {
+		pan = {
+			pointerId,
+			start: diskOf(screen),
+			baseView: host.takeView()
+		};
+	};
+	const startPinch = () => {
+		const [[idA, a], [idB, b]] = [...pointers.entries()];
+		pan = void 0;
+		const { zoom } = host.zoomState();
+		pinch = {
+			ids: [idA, idB],
+			startDistance: Math.max(1e-6, Math.hypot(a.x - b.x, a.y - b.y)),
+			startZoom: zoom,
+			anchor: screenToDisk(midpoint(a, b), host.zoomState())
+		};
+	};
+	return {
+		onPointerDown(event) {
+			if (!isBackground(event)) return;
+			host.focusTree();
+			const screen = screenOf(event);
+			if (!screen) return;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			pointers.set(event.pointerId, screen);
+			if (pointers.size === 2 && host.zoomGesturesEnabled()) startPinch();
+			else if (pointers.size === 1) startPan(event.pointerId, screen);
+		},
+		onPointerMove(event) {
+			if (!pointers.has(event.pointerId)) return;
+			const screen = screenOf(event);
+			if (!screen) return;
+			pointers.set(event.pointerId, screen);
+			if (pinch) {
+				const a = pointers.get(pinch.ids[0]);
+				const b = pointers.get(pinch.ids[1]);
+				if (!a || !b) return;
+				const zoom = pinch.startZoom * Math.hypot(a.x - b.x, a.y - b.y) / pinch.startDistance;
+				const mid = midpoint(a, b);
+				const clampedZoom = Math.min(8, Math.max(MIN_ZOOM, zoom));
+				host.setZoomState(clampZoomState({
+					zoom: clampedZoom,
+					offset: {
+						x: mid.x - clampedZoom * pinch.anchor.x,
+						y: mid.y - clampedZoom * pinch.anchor.y
+					}
+				}));
+			} else if (pan && pan.pointerId === event.pointerId) host.setView(panView(pan.baseView, pan.start, diskOf(screen)));
+		},
+		onPointerUp(event) {
+			if (!pointers.delete(event.pointerId)) return;
+			if (pinch) {
+				pinch = void 0;
+				const [remaining] = [...pointers.entries()];
+				if (remaining) startPan(remaining[0], remaining[1]);
+			} else if (pan?.pointerId === event.pointerId) pan = void 0;
+		},
+		/**
+		* Ctrl/⌘-wheel — which is also what a trackpad pinch produces — always
+		* zooms while the pointer is over the tree. A plain wheel only zooms
+		* once the tree has keyboard focus (the library's focus-gated wheel
+		* convention), so scrolling past it doesn't get hijacked.
+		*/
+		onWheel(event) {
+			const modified = event.ctrlKey || event.metaKey;
+			if (!host.zoomGesturesEnabled() || !modified && !host.hasFocus()) return;
+			const screen = screenOf(event);
+			if (!screen) return;
+			event.preventDefault();
+			const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+			const factor = Math.exp(-delta * (modified ? .01 : .002));
+			host.setZoomState(zoomAt(host.zoomState(), screen, factor));
+		},
+		/** Forget any in-progress pan (e.g. when a focus change takes over the view). */
+		cancel() {
+			pan = void 0;
+			pinch = void 0;
+			pointers.clear();
+		}
+	};
+}
+//#endregion
+//#region src/hyperbolic-tree/hyperbolictree-styles.ts
+/** Shadow-DOM styles for `ixfx-hyperbolictree-list`. */
+const hyperbolicTreeStyles = 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);
+      /* Real screen px — converted to SVG units from the element's rendered size. */
+      --hyperbolictree-font-size: 13px;
+      --hyperbolictree-box-color: var(--hyperbolictree-node-color);
+      --hyperbolictree-box-text: var(--surface-4-text);
+      --hyperbolictree-box-border: var(--surface-2);
+      --hyperbolictree-branch-hue-start: 250;
+      --hyperbolictree-branch-chroma: 0.13;
+      --hyperbolictree-branch-lightness: 62%;
+      --hyperbolictree-branch-mix: 55%;
+
+      display: block;
+      position: relative;
+      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);
+      /* Constant on-screen width, however far the disk is zoomed. */
+      vector-effect: non-scaling-stroke;
+    }
+
+    .node {
+      cursor: pointer;
+    }
+
+    /*
+     * color-by-branch: each top-level branch gets an evenly-spaced hue,
+     * mixed into the normal node/box/edge colour (rather than replacing it)
+     * so it stays in keeping with — and legible in — the current theme.
+     * Only sets the base colour vars, so selected/tickled states still win.
+     */
+    :host([color-by-branch]) .node,
+    :host([color-by-branch]) .edge {
+      --_branch-color: oklch(
+        var(--hyperbolictree-branch-lightness)
+        var(--hyperbolictree-branch-chroma)
+        calc(var(--hyperbolictree-branch-hue-start) + var(--branch-index) * 360 / var(--branch-count))
+      );
+    }
+
+    :host([color-by-branch]) .node {
+      --_node-base: color-mix(in oklab, var(--hyperbolictree-node-color), var(--_branch-color) var(--hyperbolictree-branch-mix));
+      --_box-base: color-mix(in oklab, var(--hyperbolictree-box-color), var(--_branch-color) var(--hyperbolictree-branch-mix));
+    }
+
+    :host([color-by-branch]) .edge {
+      stroke: color-mix(in oklab, var(--hyperbolictree-edge-color), var(--_branch-color) 50%);
+    }
+
+    .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(--_node-base, var(--hyperbolictree-node-color)), var(--accent) calc(var(--node-weight, 0.5) * 50%));
+      stroke: var(--surface-2);
+      stroke-width: 1;
+      pointer-events: none;
+    }
+
+    .node-box {
+      fill: color-mix(in oklab, var(--_box-base, var(--hyperbolictree-box-color)), var(--accent) calc(var(--node-weight, 0.5) * 25%));
+      stroke: var(--hyperbolictree-box-border);
+      stroke-width: 1.5;
+      /* Keep the border crisp however far the box has been scaled down. */
+      vector-effect: non-scaling-stroke;
+    }
+
+    /* Text-less stand-in for a box too small, or too crowded, to label. */
+    .node-box.marker {
+      stroke-width: 1;
+    }
+
+    /* Pure user-space font-size; set per render from --hyperbolictree-font-size. */
+    .hyperbolictree-label {
+      fill: var(--hyperbolictree-node-text);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .box-label {
+      fill: var(--hyperbolictree-box-text);
+      pointer-events: none;
+    }
+
+    /*
+     * State fills come paired with their theme text tokens: a box label sits
+     * on the state fill itself, so e.g. --item-bg-selected needs
+     * --item-text-selected on top, not the resting box text colour.
+     */
+    .node.tickled .node-dot,
+    .node.tickled .node-box {
+      fill: var(--item-bg-tickled);
+    }
+
+    .node.tickled .box-label {
+      fill: var(--item-text-tickled);
+    }
+
+    .node.selected .node-dot,
+    .node.selected .node-box {
+      fill: var(--item-bg-selected);
+    }
+
+    .node.selected .box-label {
+      fill: var(--item-text-selected);
+    }
+
+    .node.selected.tickled .node-dot,
+    .node.selected.tickled .node-box {
+      fill: var(--item-bg-selected-tickled);
+    }
+
+    .node.focused .node-dot,
+    .node.focused .node-box {
+      stroke: var(--accent);
+      stroke-width: 3;
+    }
+
+    /* A hovered label may sit over busy neighbours — give it a halo so it always reads. */
+    .node.tickled .hyperbolictree-label:not(.box-label) {
+      paint-order: stroke;
+      stroke: var(--surface-2);
+      stroke-width: 4px;
+      stroke-linejoin: round;
+    }
+
+    .node.filtered {
+      opacity: 0.3;
+    }
+
+    .node.loading .node-dot,
+    .node.loading .node-box {
+      opacity: 0.6;
+    }
+
+  
+    /* Child preview: a clickable list of a crowded node's children. */
+    .child-preview {
+      position: absolute;
+      z-index: 1;
+      min-width: 8rem;
+      max-width: min(18rem, 60%);
+      max-height: 45%;
+      overflow: auto;
+      padding: var(--space-xs, 4px);
+      background: var(--surface-3);
+      color: var(--surface-3-text);
+      border: var(--border-subtle);
+      border-radius: var(--radius-m, 6px);
+      box-shadow: var(--shadow-m);
+      font-size: var(--hyperbolictree-font-size);
+      transform: translate(-50%, 14px);
+    }
+
+    .child-preview.above {
+      transform: translate(-50%, calc(-100% - 14px));
+    }
+
+    .child-preview-title {
+      padding: 2px 6px 4px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .child-preview ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .child-preview button {
+      display: block;
+      width: 100%;
+      padding: 2px 6px;
+      border: none;
+      border-radius: var(--radius-s, 4px);
+      background: none;
+      color: inherit;
+      font: inherit;
+      text-align: start;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+
+    .child-preview button:hover {
+      background: var(--item-bg-tickled);
+      color: var(--item-text-tickled);
+    }
+
+    .child-preview-more {
+      padding: 2px 6px;
+      color: var(--surface-muted-text);
+    }
+  `;
+//#endregion
+//#region src/hyperbolic-tree/layout.ts
+const ID_SEPARATOR = `\u001F`;
+/**
+* Path-derived ids for `children` of the node with id `parentId`. `TreeItem.key`
+* is meant to be unique, but real data (e.g. a file system, where `readme.md`
+* recurs in many folders) often only has keys unique among siblings. Keying
+* the layout on `item.key` alone would silently merge those nodes — edges get
+* attached to the wrong parent and clicks focus the wrong node — so the
+* layout identifies nodes by their key path instead. Repeated keys among
+* siblings are disambiguated by occurrence count. The root's id is its key.
+*/
+function hyperbolicChildIds(parentId, children) {
+	const seen = /* @__PURE__ */ new Map();
+	return children.map((child) => {
+		const key = child.item.key;
+		const count = seen.get(key) ?? 0;
+		seen.set(key, count + 1);
+		return `${parentId}${ID_SEPARATOR}${count === 0 ? key : `${key}#${count}`}`;
+	});
+}
+/** Depth (root is 0) of the node with layout id `id`. */
+function hyperbolicIdDepth(id) {
+	return id.split(ID_SEPARATOR).length - 1;
+}
+/**
+* Layout id of the root's child that `id` descends from (or is) — i.e. which
+* top-level branch it belongs to. `undefined` for the root itself.
+*/
+function hyperbolicBranchId(id) {
+	const parts = id.split(ID_SEPARATOR);
+	return parts.length < 2 ? void 0 : `${parts[0]}${ID_SEPARATOR}${parts[1]}`;
+}
+/** Whether layout id `id` is a strict descendant of `ancestorId`. */
+function isHyperbolicDescendantId(id, ancestorId) {
+	return id.startsWith(`${ancestorId}${ID_SEPARATOR}`);
+}
+/** Chain of nodes from `root` down to the node with layout id `id`, or `undefined` if absent. */
+function findHyperbolicPathById(root, id) {
+	if (!root) return void 0;
+	const walk = (node, nodeId) => {
+		if (nodeId === id) return [node];
+		if (!isHyperbolicDescendantId(id, nodeId)) return void 0;
+		const children = node.children ?? [];
+		const ids = hyperbolicChildIds(nodeId, children);
+		for (let i = 0; i < children.length; i++) {
+			const hit = walk(children[i], ids[i]);
+			if (hit) return [node, ...hit];
+		}
+	};
+	return walk(root, root.item.key);
+}
+/** Layout id of `target` (matched by object identity) within `root`, or `undefined` if absent. */
+function findHyperbolicIdOf(root, target) {
+	if (!root) return void 0;
+	const walk = (node, nodeId) => {
+		if (node === target) return nodeId;
+		const children = node.children ?? [];
+		const ids = hyperbolicChildIds(nodeId, children);
+		for (let i = 0; i < children.length; i++) {
+			const hit = walk(children[i], ids[i]);
+			if (hit !== void 0) return hit;
+		}
+	};
+	return walk(root, root.item.key);
+}
+/** Key path (from the root's children) to the first node, depth-first, satisfying `predicate`. */
+function findHyperbolicKeyPath(nodes, predicate, prefix = []) {
+	for (const node of nodes) {
+		const path = [...prefix, node.item.key];
+		if (predicate(node)) return path;
+		const hit = node.children?.length ? findHyperbolicKeyPath(node.children, predicate, path) : void 0;
+		if (hit) return hit;
+	}
+}
+/** 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;
+/** Default minimum hyperbolic distance between adjacent siblings. See {@link childDistance}. */
+const DEFAULT_SIBLING_SPACING = .5;
+/**
+* Hyperbolic distance from parent to a child whose angular slice (in the
+* parent's frame) is `share`, such that the child sits at least `spacing`
+* from a neighbour one slice-width away: from the hyperbolic law of cosines
+* for an isosceles triangle, `sinh(d/2) = sinh(L)·sin(Δθ/2)`, solved for L.
+* Never less than `minimum` (the `curvature`), and capped so a sliver-thin
+* slice can't fling a child off to infinity.
+*
+* This is what makes panning *useful* in a crowded fan: panning is an
+* isometry — it can't change the hyperbolic distance between siblings, only
+* move them to where the disk magnifies more. If siblings are laid out
+* nearly on top of each other in hyperbolic terms, no amount of dragging
+* separates them; guaranteeing a minimum spacing means dragging a crowd
+* towards the center always fans it out.
+*/
+function childDistance(share, spacing, minimum) {
+	if (spacing <= 0) return minimum;
+	const halfAngle = Math.min(share, Math.PI) / 2;
+	const needed = Math.asinh(Math.sinh(spacing / 2) / Math.max(Math.sin(halfAngle), 1e-6));
+	return Math.min(Math.max(minimum, needed), minimum + 6);
+}
+/**
+* Canonical (true-root-anchored) hyperbolic position of every currently-loaded
+* node, keyed by layout id (see {@link hyperbolicChildIds}). 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 of at least `curvature`
+* (default `1`) — further for a thin slice, per `siblingSpacing` (see
+* {@link childDistance}).
+* That wedge is partitioned among the children, weighted by √ of 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, and each child's wedge region
+* (bounded by geodesic rays to the same two ideal boundary points as its
+* slice) nests inside its parent's, which is what guarantees sibling
+* subtrees never spatially cross regardless of how deep or bushy they are.
+*
+* Every node's local frame is tracked as a full {@link DiskIsometry}
+* (local → canonical), built by composing its parent's frame with the
+* translation to the child. Composing Möbius translations introduces a
+* rotation (gyration); dropping it — i.e. assuming a node's frame is simply
+* `mobiusToOrigin(·, position)` — makes every wedge from depth 3 onward
+* point in a subtly wrong direction, so subtrees cross each other.
+*
+* A wedge wider than π is narrowed to π (around the same bisector) before
+* the child recurses into it: a near-full-circle wedge would otherwise fan
+* that child's own children back around towards — and across — its parent.
+*
+* `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, siblingSpacing = DEFAULT_SIBLING_SPACING) {
+	const map = /* @__PURE__ */ new Map();
+	if (!root) return map;
+	const origin = {
+		x: 0,
+		y: 0
+	};
+	map.set(root.item.key, {
+		node: root,
+		id: root.item.key,
+		depth: 0,
+		parentKey: void 0,
+		parentId: void 0,
+		position: origin,
+		toParent: identityIsometry,
+		angularShare: 2 * Math.PI
+	});
+	const place = (node, id, frame, wedgeStart, wedgeEnd, depth) => {
+		if (depth >= maxDepth) return;
+		const children = node.children ?? [];
+		const n = children.length;
+		if (n === 0) return;
+		const angularWidth = wedgeEnd - wedgeStart;
+		const weights = children.map((child) => Math.sqrt(subtreeSize(child, maxDepth - depth - 1)));
+		const totalWeight = weights.reduce((a, b) => a + b, 0);
+		const ids = hyperbolicChildIds(id, children);
+		let cursor = wedgeStart;
+		children.forEach((child, index) => {
+			const share = n === 1 ? angularWidth : angularWidth * weights[index] / totalWeight;
+			const bisector = cursor + share / 2;
+			cursor += share;
+			const theta = bisector + (n === 1 ? stableUnitJitter(child.item.key) * Math.min(CHAIN_JITTER_RADIANS, share * .4) : 0);
+			const r = euclideanRadiusForHyperbolicDistance(n === 1 ? curvature : childDistance(share, siblingSpacing, curvature));
+			const local = {
+				x: r * Math.cos(theta),
+				y: r * Math.sin(theta)
+			};
+			const toParent = translationFromOrigin(local);
+			const childFrame = composeIsometry(frame, toParent);
+			map.set(ids[index], {
+				node: child,
+				id: ids[index],
+				depth: depth + 1,
+				parentKey: node.item.key,
+				parentId: id,
+				position: applyIsometry(childFrame, origin),
+				toParent,
+				angularShare: share
+			});
+			const halfWedge = Math.min(share, Math.PI) / 2;
+			const localStart = boundaryAngleInLocalFrame(bisector - halfWedge, local);
+			let localWidth = boundaryAngleInLocalFrame(bisector + halfWedge, local) - localStart;
+			if (localWidth <= 0) localWidth += 2 * Math.PI;
+			place(child, ids[index], childFrame, localStart, localStart + localWidth, depth + 1);
+		});
+	};
+	place(root, root.item.key, identityIsometry, -Math.PI, Math.PI, 0);
+	return map;
+}
+/**
+* Every node within `maxRadius` tree-graph steps of `focusedId`, with its
+* frame relative to the focus. Built by walking outward from the focus and
+* composing one short {@link CanonicalEntry.toParent} hop per edge — so
+* precision depends only on distance *from the focus*, never on how far the
+* focus is from the root.
+*/
+function focusFrames(entries, focusedId, maxRadius) {
+	const frames = /* @__PURE__ */ new Map();
+	if (!entries.has(focusedId)) return frames;
+	frames.set(focusedId, {
+		ring: 0,
+		frame: identityIsometry
+	});
+	let frontier = [focusedId];
+	for (let ring = 1; ring <= maxRadius && frontier.length > 0; ring++) {
+		const next = [];
+		for (const id of frontier) {
+			const entry = entries.get(id);
+			const { frame } = frames.get(id);
+			const visit = (neighbourId, neighbourFrame) => {
+				if (frames.has(neighbourId) || !entries.has(neighbourId)) return;
+				frames.set(neighbourId, {
+					ring,
+					frame: neighbourFrame()
+				});
+				next.push(neighbourId);
+			};
+			for (const childId of hyperbolicChildIds(id, entry.node.children ?? [])) visit(childId, () => composeIsometry(frame, entries.get(childId).toParent));
+			if (entry.parentId !== void 0) visit(entry.parentId, () => composeIsometry(frame, invertIsometry(entry.toParent)));
+		}
+		frontier = next;
+	}
+	return frames;
+}
+/** `toParent` hops composed from `id` up to (not including) ancestor `ancestorId`: `id`-local → `ancestorId`-local. */
+function frameUpTo(entries, id, ancestorId) {
+	let frame = identityIsometry;
+	for (let cursor = id; cursor !== void 0 && cursor !== ancestorId; cursor = entries.get(cursor)?.parentId) frame = composeIsometry(entries.get(cursor).toParent, frame);
+	return frame;
+}
+/**
+* The frame of node `toId` expressed in node `fromId`'s local frame (maps
+* `toId`-local coordinates to `fromId`-local ones), composed along the tree
+* path between them via their lowest common ancestor. Used to hand a view
+* over from one focus to another without passing through root-anchored
+* coordinates. `undefined` if either id is absent.
+*/
+function hyperbolicRelativeFrame(entries, fromId, toId) {
+	if (!entries.has(fromId) || !entries.has(toId)) return void 0;
+	const ancestors = /* @__PURE__ */ new Set();
+	for (let cursor = fromId; cursor !== void 0; cursor = entries.get(cursor)?.parentId) ancestors.add(cursor);
+	let lca = toId;
+	while (lca !== void 0 && !ancestors.has(lca)) lca = entries.get(lca)?.parentId;
+	if (lca === void 0) return void 0;
+	return composeIsometry(invertIsometry(frameUpTo(entries, fromId, lca)), frameUpTo(entries, toId, lca));
+}
+/**
+* Resolve `focusedKey` — either a layout id, or (as a convenience, and for
+* data with globally-unique keys) a plain `item.key`, matching the first
+* node in depth-first order carrying it.
+*/
+function resolveFocusId(canonical, focusedKey) {
+	if (focusedKey === void 0) return void 0;
+	if (canonical.has(focusedKey)) return focusedKey;
+	for (const entry of canonical.values()) if (entry.node.item.key === focusedKey) return entry.id;
+}
+/**
+* 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` (a layout id or plain `item.key`; default the
+*   true root; unknown keys fall back to the true root), `maxRadius` (default unlimited), `maxDepth` (safety
+*   cap on layout recursion depth, default 24), `curvature`,
+*   `siblingSpacing`, `centerOverride` (put this point of the focus's local
+*   frame at the center instead of the focus itself), `view` (a full
+*   focus-local → screen isometry, taking precedence over `centerOverride` —
+*   used for panning and animation, which also rotate).
+*/
+function computeHyperbolicLayout(root, options = {}) {
+	if (!root) return {
+		nodes: [],
+		edges: []
+	};
+	const { maxRadius = Number.POSITIVE_INFINITY, maxDepth = 24, curvature = 1, siblingSpacing = DEFAULT_SIBLING_SPACING } = options;
+	const canonical = computeCanonicalPositions(root, maxDepth, curvature, siblingSpacing);
+	const focusedId = resolveFocusId(canonical, options.focusedKey) ?? root.item.key;
+	if (!canonical.has(focusedId)) return {
+		nodes: [],
+		edges: []
+	};
+	const view = options.view ?? viewIsometry(options.centerOverride ?? {
+		x: 0,
+		y: 0
+	});
+	const frames = focusFrames(canonical, focusedId, maxRadius);
+	const rawWeights = [...frames.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 nodes = [...frames.entries()].map(([id, { ring, frame }]) => {
+		const entry = canonical.get(id);
 		const weight = entry.node.item.weight;
 		return {
 			node: entry.node,
-			key,
+			key: entry.node.item.key,
+			id,
 			depth: entry.depth,
-			ring: distance,
+			ring,
 			parentKey: entry.parentKey,
-			position: mobiusToOrigin(entry.position, projectionCenter),
+			parentId: entry.parentId,
+			position: applyIsometry(composeIsometry(view, frame), {
+				x: 0,
+				y: 0
+			}),
 			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 byId = new Map(nodes.map((n) => [n.id, n]));
 	const edges = [];
 	for (const n of nodes) {
-		if (n.parentKey === void 0) continue;
-		const parent = byKey.get(n.parentKey);
+		if (n.parentId === void 0) continue;
+		const parent = byId.get(n.parentId);
 		if (!parent) continue;
 		edges.push({
 			fromKey: parent.key,
 			toKey: n.key,
+			fromId: parent.id,
+			toId: n.id,
 			from: parent.position,
 			to: n.position,
 			weightNormalized: (parent.weightNormalized + n.weightNormalized) / 2
@@ -6066,18 +7000,477 @@ function computeHyperbolicLayout(root, options = {}) {
 		edges
 	};
 }
-//#endregion
-//#region src/hyperbolic-tree/hyperbolictree-list.ts
+//#endregion
+//#region src/hyperbolic-tree/keyboard.ts
+const unhandled = {
+	action: { kind: `none` },
+	handled: false
+};
+/** 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;
+}
+/**
+* Resolve `key` against the focused node (layout id `focusId`):
+* - `ArrowUp` — the visible child closest to screen-"up"
+* - `ArrowDown` — the parent
+* - `ArrowLeft` / `ArrowRight` — previous / next sibling, wrapping
+* - `Enter` — activate the focus
+* - `Escape` — back to the root (unhandled when already there)
+*/
+function resolveKeyboardAction(key, root, focusId, visibleNodes) {
+	const path = findHyperbolicPathById(root, focusId);
+	const focusNode = path?.at(-1);
+	if (!path || !focusNode) return unhandled;
+	const parent = path.length >= 2 ? path[path.length - 2] : void 0;
+	const none = {
+		action: { kind: `none` },
+		handled: true
+	};
+	const focus = (node) => node ? {
+		action: {
+			kind: `focus`,
+			node
+		},
+		handled: true
+	} : none;
+	switch (key) {
+		case `ArrowUp`: {
+			const children = visibleNodes.filter((n) => n.parentId === focusId);
+			if (children.length === 0) return none;
+			return focus(children.reduce((a, b) => angleDistanceFromUp(a) < angleDistanceFromUp(b) ? a : b).node);
+		}
+		case `ArrowDown`: return focus(parent);
+		case `ArrowLeft`:
+		case `ArrowRight`: {
+			const siblings = parent?.children ?? [];
+			const index = siblings.indexOf(focusNode);
+			if (index === -1 || siblings.length <= 1) return none;
+			return focus(siblings[(index + (key === `ArrowRight` ? 1 : -1) + siblings.length) % siblings.length]);
+		}
+		case `Enter`: return {
+			action: {
+				kind: `activate`,
+				node: focusNode,
+				depth: path.length - 1
+			},
+			handled: true
+		};
+		case `Escape`: return focusNode === root ? unhandled : focus(root);
+		default: return unhandled;
+	}
+}
+//#endregion
+//#region src/hyperbolic-tree/lazy-children.ts
+function createLazyChildLoader(source, onChange) {
+	const pending = /* @__PURE__ */ new Set();
+	const aborters = /* @__PURE__ */ new Map();
+	const fetchChildren = async (node, depth, signal) => {
+		const { model, loadChildren } = source();
+		if (model) return model.getChildren(node, depth, signal);
+		return [...await collectDataResult(loadChildren({
+			node,
+			depth
+		}, signal), signal)];
+	};
+	const load = async (node, depth) => {
+		pending.add(node);
+		const controller = new AbortController();
+		aborters.set(node, controller);
+		onChange();
+		try {
+			const children = await fetchChildren(node, depth, controller.signal);
+			if (!controller.signal.aborted) node.children = children;
+		} catch {
+			if (!controller.signal.aborted) node.children = [];
+		} finally {
+			pending.delete(node);
+			aborters.delete(node);
+			if (!controller.signal.aborted) onChange();
+		}
+	};
+	return {
+		/** Start loading children for every node in `visible` that has none yet. */
+		ensure(visible) {
+			const { model, loadChildren } = source();
+			if (!model && !loadChildren) return;
+			for (const { node, depth } of visible) if (node.children === void 0 && !pending.has(node)) load(node, depth);
+		},
+		isPending: (node) => pending.has(node),
+		abortAll() {
+			for (const aborter of aborters.values()) aborter.abort();
+			aborters.clear();
+			pending.clear();
+		}
+	};
+}
+//#endregion
+//#region src/hyperbolic-tree/render-utils.ts
+/**
+* The Poincaré disk's conformal factor relative to the origin, `1 − |p|²`:
+* how much a shape of fixed hyperbolic size shrinks (in Euclidean terms) when
+* moved from the center to `p`. Sizing nodes by this makes them shrink
+* exactly as the space does, rather than by an ad-hoc falloff.
+*/
+function conformalScale(p) {
+	return Math.max(0, 1 - (p.x * p.x + p.y * p.y));
+}
+/**
+* Euclidean distance from each node to its nearest visible neighbour, keyed
+* by layout id (`Infinity` for a lone node). Used to cap on-screen node size
+* so crowded nodes never overlap — measured in the *projected* view, so it
+* stays right whichever node is focused. O(n²), fine for the few hundred
+* nodes a `maxRadius` window typically holds.
+*/
+function nearestNeighbourDistances(nodes) {
+	const out = /* @__PURE__ */ new Map();
+	for (const n of nodes) out.set(n.id, Number.POSITIVE_INFINITY);
+	for (let i = 0; i < nodes.length; i++) {
+		const a = nodes[i].position;
+		for (let j = i + 1; j < nodes.length; j++) {
+			const b = nodes[j].position;
+			const d = Math.hypot(a.x - b.x, a.y - b.y);
+			if (d < out.get(nodes[i].id)) out.set(nodes[i].id, d);
+			if (d < out.get(nodes[j].id)) out.set(nodes[j].id, d);
+		}
+	}
+	return out;
+}
+/** Weight multiplier for `n`, interpolating between the min/max weight scales. */
+function weightScale(n, options) {
+	return options.minWeightScale + (options.maxWeightScale - options.minWeightScale) * n.weightNormalized;
+}
+/**
+* A dot's rendered radius: base size × weight × conformal shrink, capped to
+* under half the distance to its nearest neighbour so crowded siblings keep
+* a visible gap instead of merging into a blob.
+*/
+function dotRadius(n, nearest, options) {
+	const radius = options.nodeRadius * conformalScale(n.position) * weightScale(n, options);
+	return Math.max(Math.min(radius, nearest * .45), .003);
+}
+/**
+* Footprint of a `2·halfWidth × 2·halfHeight` rectangle centered on
+* `center` and rotated by `angle` radians.
+*/
+function orientedRect(id, center, halfWidth, halfHeight, angle = 0) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const corner = (u, v) => ({
+		x: center.x + u * cos - v * sin,
+		y: center.y + u * sin + v * cos
+	});
+	return {
+		id,
+		corners: [
+			corner(-halfWidth, -halfHeight),
+			corner(halfWidth, -halfHeight),
+			corner(halfWidth, halfHeight),
+			corner(-halfWidth, halfHeight)
+		]
+	};
+}
+function polygonArea(points) {
+	let area = 0;
+	for (let i = 0; i < points.length; i++) {
+		const a = points[i];
+		const b = points[(i + 1) % points.length];
+		area += a.x * b.y - b.x * a.y;
+	}
+	return Math.abs(area) / 2;
+}
+/** Sutherland–Hodgman: `subject` clipped to convex `clip` (either winding). */
+function clipPolygon(subject, clip) {
+	const orientation = Math.sign((clip[1].x - clip[0].x) * (clip[2].y - clip[0].y) - (clip[1].y - clip[0].y) * (clip[2].x - clip[0].x)) || 1;
+	let output = [...subject];
+	for (let i = 0; i < clip.length && output.length > 0; i++) {
+		const a = clip[i];
+		const b = clip[(i + 1) % clip.length];
+		const side = (p) => orientation * ((b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x));
+		const input = output;
+		output = [];
+		for (let j = 0; j < input.length; j++) {
+			const current = input[j];
+			const previous = input[(j + input.length - 1) % input.length];
+			const sc = side(current);
+			const sp = side(previous);
+			if (sc >= 0 !== sp >= 0) {
+				const t = sp / (sp - sc);
+				output.push({
+					x: previous.x + (current.x - previous.x) * t,
+					y: previous.y + (current.y - previous.y) * t
+				});
+			}
+			if (sc >= 0) output.push(current);
+		}
+	}
+	return output;
+}
+function bounds(points) {
+	const xs = points.map((p) => p.x);
+	const ys = points.map((p) => p.y);
+	return {
+		x0: Math.min(...xs),
+		y0: Math.min(...ys),
+		x1: Math.max(...xs),
+		y1: Math.max(...ys)
+	};
+}
+/** Fraction (0–1) of `candidate`'s area covered by `other`. */
+function overlapFraction(candidate, other) {
+	const a = bounds(candidate.corners);
+	const b = bounds(other.corners);
+	if (a.x1 <= b.x0 || b.x1 <= a.x0 || a.y1 <= b.y0 || b.y1 <= a.y0) return 0;
+	const area = polygonArea(candidate.corners);
+	if (area <= 0) return 1;
+	return polygonArea(clipPolygon(candidate.corners, other.corners)) / area;
+}
+/**
+* Greedy label placement: walk `shapes` in priority order and keep each one
+* whose overlap with every already-kept shape is at most `maxOverlap` of its
+* own area. Returns the ids of the kept labels. Checking actual (possibly
+* rotated) label footprints, not just node positions, is what stops a fan of
+* same-radius siblings from stacking their text into an unreadable pile.
+*/
+function cullOverlappingLabels(shapes, maxOverlap = .03) {
+	const kept = [];
+	for (const shape of shapes) if (kept.every((k) => overlapFraction(shape, k) <= maxOverlap)) kept.push(shape);
+	return new Set(kept.map((r) => r.id));
+}
+/** `label` cut to at most `maxChars` characters, ending in `…` when cut. `0` or less disables truncation. */
+function truncateLabel(label, maxChars) {
+	if (maxChars <= 0 || label.length <= maxChars) return label;
+	return `${label.slice(0, Math.max(1, maxChars - 1)).trimEnd()}…`;
+}
+let measureContext;
+const widthCache = /* @__PURE__ */ new Map();
+/**
+* Rendered width of `text` at `fontSize` px in `fontFamily`, via an offscreen
+* canvas (cached). Falls back to a per-character estimate where canvas text
+* measurement is unavailable (e.g. non-browser test environments).
+*/
+function measureTextWidth(text, fontSize, fontFamily) {
+	const cacheKey = `${fontFamily}\u0000${text}`;
+	let atUnitSize = widthCache.get(cacheKey);
+	if (atUnitSize === void 0) {
+		if (measureContext === void 0) try {
+			measureContext = typeof document === `undefined` ? null : document.createElement(`canvas`).getContext(`2d`);
+		} catch {
+			measureContext = null;
+		}
+		const reference = 100;
+		let measured;
+		if (measureContext) {
+			measureContext.font = `${reference}px ${fontFamily || `sans-serif`}`;
+			const width = measureContext.measureText(text).width;
+			if (Number.isFinite(width) && width > 0) measured = width / reference;
+		}
+		atUnitSize = measured ?? text.length * .6;
+		widthCache.set(cacheKey, atUnitSize);
+	}
+	return atUnitSize * fontSize;
+}
+/**
+* Smallest scale a box shrinks to, however far from the focus. Pure conformal
+* scaling (`1 − |z|²`) is geometrically exact but shrinks the second ring to
+* well under half size, taking labels below legibility long before the
+* boundary — flooring it keeps nearby rings readable while still reading as
+* "further away".
+*/
+const BOX_SCALE_FLOOR = .45;
+/**
+* Geometry for a `box`-shaped node. The box is laid out at its focus size and
+* then uniformly scaled — by the conformal factor, floored at
+* {@link BOX_SCALE_FLOOR} — so the label is measured just once. Weight
+* nudges the scale gently (square-rooted), so heavy nodes read as larger
+* without dwarfing their neighbours' labels.
+*/
+function boxGeometry(n, options) {
+	const conformal = BOX_SCALE_FLOOR + .55 * conformalScale(n.position);
+	const scale = Math.min(1, conformal * (options.zoom ?? 1)) * Math.sqrt(weightScale(n, options));
+	const text = truncateLabel(n.node.item.label, options.maxChars);
+	const padX = options.fontSize * .5;
+	const height = options.fontSize * 1.55;
+	return {
+		scale,
+		width: measureTextWidth(text, options.fontSize, options.fontFamily) + padX * 2,
+		height,
+		markerSize: options.fontSize * .55,
+		text
+	};
+}
+/** Label footprint of a box of `geometry` centered at `center` and rotated by `angle` (render units). */
+function boxLabelShape(id, center, geometry, angle = 0) {
+	return orientedRect(id, center, geometry.width * geometry.scale / 2, geometry.height * geometry.scale / 2, angle);
+}
+//#endregion
+//#region src/hyperbolic-tree/render-context.ts
+const HORIZONTAL = {
+	direction: 0,
+	textAngle: 0,
+	flipped: false
+};
+/**
+* Label font metrics. `--hyperbolictree-font-size` is in real screen px;
+* the SVG's viewBox is fixed, so it's converted to render units using the
+* on-screen disk size (`extentPx`) and zoom — keeping text legible whatever
+* size the element is laid out at, and constant-size while zooming
+* (zooming in spreads crowded labels apart rather than just magnifying the
+* pile).
+*/
+function fontMetrics(host, extentPx, zoom) {
+	const style = typeof getComputedStyle === `function` ? getComputedStyle(host) : void 0;
+	const parsed = Number.parseFloat(style?.getPropertyValue(`--hyperbolictree-font-size`) ?? ``);
+	const px = Number.isFinite(parsed) && parsed > 0 ? parsed : 13;
+	return {
+		px,
+		units: px * (1050 / (extentPx > 0 ? extentPx : 420) / (zoom || 1)),
+		family: style?.fontFamily ?? ``
+	};
+}
+/** Map of top-level-branch layout id → index among the root's children. */
+function branchIndices(root) {
+	if (!root) return /* @__PURE__ */ new Map();
+	return new Map(hyperbolicChildIds(root.item.key, root.children ?? []).map((id, i) => [id, i]));
+}
+/** Inline `--branch-index`/`--branch-count` declarations for the node/edge with layout id `id` (empty for the root). */
+function branchStyle(id, branches) {
+	const branch = hyperbolicBranchId(id);
+	const index = branch === void 0 ? void 0 : branches.get(branch);
+	return index === void 0 ? `` : ` --branch-index: ${index}; --branch-count: ${branches.size};`;
+}
+function groupSiblings(nodes) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const n of nodes) {
+		const group = groups.get(n.parentId) ?? [];
+		group.push(n);
+		groups.set(n.parentId, group);
+	}
+	return groups;
+}
+/**
+* Label priority: the focus, then selected nodes, then larger (nearer the
+* center) first.
+*/
+function byLabelPriority(nodes, sizeOf, isSelected) {
+	const rank = (n) => n.ring === 0 ? 0 : isSelected(n.node) ? 1 : 2;
+	return [...nodes].sort((a, b) => rank(a) - rank(b) || sizeOf(b) - sizeOf(a) || a.ring - b.ring);
+}
+/**
+* Each node's label orientation. The reference neighbour is the one a step
+* nearer the focus: usually the parent, but for the focus's own ancestors
+* (which sit *behind* it) the child on the path back to the focus. The focus
+* itself stays horizontal.
+*/
+function labelOrientations(nodes, radial) {
+	const out = /* @__PURE__ */ new Map();
+	if (!radial) {
+		for (const n of nodes) out.set(n.id, HORIZONTAL);
+		return out;
+	}
+	const byId = new Map(nodes.map((n) => [n.id, n]));
+	const nearer = /* @__PURE__ */ new Map();
+	for (const n of nodes) {
+		const parent = n.parentId === void 0 ? void 0 : byId.get(n.parentId);
+		if (!parent) continue;
+		if (parent.ring < n.ring) nearer.set(n.id, parent);
+		else if (n.ring < parent.ring) nearer.set(parent.id, n);
+	}
+	for (const n of nodes) {
+		const from = nearer.get(n.id);
+		if (!from || n.ring === 0) {
+			out.set(n.id, HORIZONTAL);
+			continue;
+		}
+		const direction = Math.atan2(n.position.y - from.position.y, n.position.x - from.position.x);
+		const flipped = Math.cos(direction) < 0;
+		out.set(n.id, {
+			direction,
+			textAngle: flipped ? direction + Math.PI : direction,
+			flipped
+		});
+	}
+	return out;
+}
+const renderCenter = (n) => ({
+	x: n.position.x * 500,
+	y: n.position.y * 500
+});
+function boxLabels(nodes, options, orientations) {
+	const { font } = options;
+	const boxes = new Map(nodes.map((n) => [n.id, boxGeometry(n, {
+		fontSize: font.units,
+		fontFamily: font.family,
+		maxChars: options.boxMaxChars,
+		minWeightScale: options.minWeightScale,
+		maxWeightScale: options.maxWeightScale,
+		zoom: options.zoom
+	})]));
+	return {
+		boxes,
+		labelIds: cullOverlappingLabels(byLabelPriority(nodes.filter((n) => !options.isTickled(n.id) && font.px * boxes.get(n.id).scale >= options.minLabelSize), (n) => boxes.get(n.id).scale, options.isSelected).map((n) => boxLabelShape(n.id, renderCenter(n), boxes.get(n.id), orientations.get(n.id).textAngle)))
+	};
+}
+function dotLabels(nodes, options, orientations) {
+	const { font } = options;
+	const nearest = nearestNeighbourDistances(nodes);
+	const radii = new Map(nodes.map((n) => [n.id, dotRadius(n, nearest.get(n.id), options)]));
+	return {
+		radii,
+		labelIds: cullOverlappingLabels(byLabelPriority(nodes.filter((n) => !options.isTickled(n.id) && radii.get(n.id) * options.zoom >= options.minNodeRadius), (n) => radii.get(n.id), options.isSelected).map((n) => {
+			const { direction } = orientations.get(n.id);
+			const halfWidth = measureTextWidth(n.node.item.label, font.units, font.family) / 2;
+			const along = (radii.get(n.id) + .01) * 500 + halfWidth;
+			const c = renderCenter(n);
+			const center = {
+				x: c.x + Math.cos(direction) * along,
+				y: c.y + Math.sin(direction) * along
+			};
+			return orientedRect(n.id, center, halfWidth + font.units * .6, font.units * .6, direction);
+		}))
+	};
+}
+/**
+* Everything the node templates need for one render. Labels are placed
+* greedily by priority and dropped where they'd overlap; hovered/cursor
+* nodes are exempt from culling entirely — always labelled — so hovering a
+* marker reveals it without reshuffling everyone else's labels.
+*/
+function buildNodeRenderContext(nodes, options) {
+	const orientations = labelOrientations(nodes, options.radialLabels);
+	const shapeData = options.nodeShape === `box` ? {
+		...boxLabels(nodes, options, orientations),
+		radii: /* @__PURE__ */ new Map()
+	} : {
+		...dotLabels(nodes, options, orientations),
+		boxes: /* @__PURE__ */ new Map()
+	};
+	const labelIds = new Set(shapeData.labelIds);
+	for (const n of nodes) if (options.isTickled(n.id)) labelIds.add(n.id);
+	return {
+		siblingGroups: groupSiblings(nodes),
+		font: options.font,
+		branches: options.branches,
+		boxes: shapeData.boxes,
+		radii: shapeData.radii,
+		labelIds,
+		orientations
+	};
+}
 /**
-* 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.
+* Paint order: far-from-focus first so nearer (larger) nodes sit on top;
+* then labelled over unlabelled; the hovered node above everything.
 */
-const RENDER_SCALE = 500;
+function paintOrder(nodes, ctx, isTickled) {
+	const layer = (n) => isTickled(n.id) ? 2 : ctx.labelIds.has(n.id) ? 1 : 0;
+	const distance = (n) => n.position.x ** 2 + n.position.y ** 2;
+	return [...nodes].sort((a, b) => layer(a) - layer(b) || distance(b) - distance(a));
+}
+//#endregion
+//#region src/hyperbolic-tree/render-templates.ts
 /**
 * Sanitizes a node key into a token safe to use inside a `part` attribute /
 * `::part()` selector — arbitrary key characters (spaces, quotes, etc.)
@@ -6086,13 +7479,121 @@ const RENDER_SCALE = 500;
 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;
+const preventMouseDownFocus = (e) => e.preventDefault();
+/** The shared `<g part="node">` wrapper — ARIA, parts, weight/branch vars, tooltip, and pointer handling. */
+function renderNodeGroup(n, args, transform, content) {
+	const { node, key, id } = n;
+	const { ctx, state, handlers } = args;
+	const selected = state.isSelected(node);
+	const classes = [
+		`node`,
+		selected ? `selected` : ``,
+		state.isTickled(id) ? `tickled` : ``,
+		state.isFiltered(n) ? `filtered` : ``,
+		state.isPending(node) ? `loading` : ``,
+		n.ring === 0 ? `focused` : ``
+	].filter(Boolean).join(` `);
+	const siblings = ctx.siblingGroups.get(n.parentId) ?? [n];
+	const weightStyle = `--node-weight: ${n.weightNormalized};${n.weight === void 0 ? `` : ` --node-weight-raw: ${n.weight};`}`;
+	return svg`
+    <g
+      class=${classes}
+      data-key=${key}
+      role="treeitem"
+      tabindex="-1"
+      aria-level=${n.depth + 1}
+      aria-selected=${selected}
+      aria-setsize=${siblings.length}
+      aria-posinset=${siblings.findIndex((sib) => sib.id === id) + 1}
+      aria-label=${node.item.label}
+      part="node node-${partToken(key)}"
+      style=${weightStyle + branchStyle(id, ctx.branches)}
+      transform=${transform}
+      @pointerdown=${handlers.onPointerDown}
+      @mousedown=${preventMouseDownFocus}
+      @click=${(e) => handlers.onClick(n, e)}
+      @dblclick=${(e) => handlers.onDblClick(n, e)}
+      @pointerenter=${() => handlers.onPointerEnter(id)}
+    >${state.showTitle(n) ? svg`<title>${node.item.label}</title>` : nothing}${content}</g>
+  `;
+}
+const degrees = (radians) => radians * 180 / Math.PI;
+/** A dot's label: just past the dot, running along its orientation — flipped labels anchor at their end so they still read outward. */
+function renderDotLabel(n, ctx, scaledRadius) {
+	const { textAngle, flipped } = ctx.orientations.get(n.id);
+	const gap = scaledRadius + 5;
+	return svg`<text
+    class="hyperbolictree-label"
+    part="label"
+    x=${flipped ? -gap : gap}
+    y="0"
+    transform=${textAngle === 0 ? nothing : `rotate(${degrees(textAngle)})`}
+    text-anchor=${flipped ? `end` : `start`}
+    font-size=${ctx.font.units}
+    dominant-baseline="middle"
+  >${n.node.item.label}</text>`;
+}
+function renderDotNode(n, args) {
+	const { ctx } = args;
+	const scaledRadius = ctx.radii.get(n.id) * 500;
+	return renderNodeGroup(n, args, `translate(${n.position.x * 500} ${n.position.y * 500})`, svg`
+    <circle class="node-hit" r=${Math.max(scaledRadius, 17.5)} part="hit" />
+    <circle class="node-dot" r=${scaledRadius} part="dot" />
+    ${ctx.labelIds.has(n.id) ? renderDotLabel(n, ctx, scaledRadius) : nothing}
+  `);
+}
+function renderBoxNode(n, args) {
+	const { ctx } = args;
+	const box = ctx.boxes.get(n.id);
+	const showText = ctx.labelIds.has(n.id);
+	const width = showText ? box.width : box.markerSize;
+	const height = showText ? box.height : box.markerSize;
+	const { textAngle } = ctx.orientations.get(n.id);
+	const rotate = showText && textAngle !== 0 ? ` rotate(${degrees(textAngle)})` : ``;
+	return renderNodeGroup(n, args, `translate(${n.position.x * 500} ${n.position.y * 500})${rotate} scale(${box.scale})`, svg`
+    <rect
+      class="node-box ${showText ? `` : `marker`}"
+      part="box"
+      x=${-width / 2}
+      y=${-height / 2}
+      width=${width}
+      height=${height}
+      rx=${ctx.font.units * .2}
+    />
+    ${showText ? svg`<text class="hyperbolictree-label box-label" part="label" x="0" y="0" font-size=${ctx.font.units} text-anchor="middle" dominant-baseline="central">${box.text}</text>` : nothing}
+  `);
+}
+/** Every visible node, in paint order, in the shape `ctx` was built for. */
+function renderNodes(nodes, shape, args) {
+	const ordered = paintOrder(nodes, args.ctx, args.state.isTickled);
+	const renderOne = shape === `box` ? renderBoxNode : renderDotNode;
+	return repeat(ordered, (n) => n.id, (n) => renderOne(n, args));
+}
+function renderDefaultEdge(edge, branches) {
+	return svg`<path
+    class="edge"
+    d=${geodesicPath(edge.from, edge.to, 500)}
+    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};${branchStyle(edge.toId, branches)}"
+  />`;
+}
+/** Every visible edge — via `edgeRenderer` when given, else the default geodesic arc. */
+function renderEdges(edges, byId, branches, edgeRenderer) {
+	return repeat(edges, (e) => `${e.fromId}->${e.toId}`, (edge) => {
+		const fromNode = byId.get(edge.fromId)?.node;
+		const toNode = byId.get(edge.toId)?.node;
+		if (edgeRenderer && fromNode && toNode) return svg`<g transform="scale(${500})">${edgeRenderer({
+			edge,
+			fromNode,
+			toNode
+		})}</g>`;
+		return renderDefaultEdge(edge, branches);
+	});
 }
+//#endregion
+//#region src/hyperbolic-tree/hyperbolictree-list.ts
 let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -6100,37 +7601,63 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.selectionFilter = `all`;
 		this.interactionMode = `standard`;
 		this.maxRadius = 4;
+		this.nodeShape = `dot`;
+		this.boxMaxChars = 24;
+		this.minLabelSize = 9;
+		this.colorByBranch = false;
 		this.nodeRadius = .05;
 		this.minNodeRadius = .015;
 		this.minWeightScale = .6;
 		this.maxWeightScale = 1.6;
 		this.zoom = 1;
+		this.disableZoomGestures = false;
+		this.disableRadialLabels = false;
+		this.disableChildPreview = false;
 		this.curvature = 1;
+		this.siblingSpacing = DEFAULT_SIBLING_SPACING;
 		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 = {
+		this._focusId = void 0;
+		this._viewOverride = void 0;
+		this._focusRotation = 0;
+		this._zoomOffset = {
 			x: 0,
 			y: 0
 		};
+		this._previewId = void 0;
+		this.#preview = createChildPreviewTiming({
+			candidate: (id) => {
+				const nodes = this.#layout().nodes;
+				const n = id === void 0 || this.disableChildPreview ? void 0 : nodes.find((v) => v.id === id);
+				return n && needsChildPreview(n, nodes, this.#lastLabelIds) ? n.id : void 0;
+			},
+			setPreviewId: (id) => {
+				this._previewId = id;
+			}
+		});
+		this.#lazy = createLazyChildLoader(() => ({
+			model: this.model,
+			loadChildren: this.loadChildren
+		}), () => this.requestUpdate());
+		this.#lastLabelIds = /* @__PURE__ */ new Set();
 		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,
+				id: n.id,
 				enabled: true
 			})),
 			onStateChange: () => {
 				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 			},
 			onTickle: (id) => {
+				this.#preview.update(id);
 				if (id === void 0) return;
-				const n = this.#layout().nodes.find((n) => n.key === id);
+				const n = this.#layout().nodes.find((n) => n.id === id);
 				if (!n) return;
 				this.dispatchEvent(new CustomEvent(`tickle`, {
 					detail: {
@@ -6142,8 +7669,30 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 				}));
 			}
 		});
-		this.#pendingKeys = /* @__PURE__ */ new Set();
-		this.#aborters = /* @__PURE__ */ new Map();
+		this._hostSize = {
+			width: 0,
+			height: 0
+		};
+		this.#gestures = createGestureHandlers({
+			svgRect: () => this.renderRoot.querySelector(`svg.hyperbolictree`)?.getBoundingClientRect(),
+			takeView: () => {
+				const view = this.#currentView();
+				this.#cancelAnimation();
+				this._viewOverride = view;
+				return view;
+			},
+			setView: (view) => {
+				this._viewOverride = view;
+			},
+			zoomState: () => this.#zoomState(),
+			setZoomState: (state) => {
+				this.zoom = state.zoom;
+				this._zoomOffset = state.offset;
+			},
+			zoomGesturesEnabled: () => !this.disableZoomGestures,
+			hasFocus: () => this.renderRoot.activeElement !== null,
+			focusTree: () => this.#focusTree()
+		});
 	}
 	static {
 		this.shadowRootOptions = {
@@ -6156,37 +7705,55 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	}
 	/** 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;
+		if (this._focusId === void 0) return this.#effectiveRoot;
+		return findHyperbolicPathById(this.#effectiveRoot, this._focusId)?.at(-1) ?? this.#effectiveRoot;
 	}
+	#preview;
+	#lazy;
+	/** Labels shown in the last render — what the child preview judges legibility by. */
+	#lastLabelIds;
 	#modelUnsubscribe;
-	#pendingKeys;
-	#aborters;
 	#ownedRegistry;
 	#unregisterSearchCommands;
 	#animFrame;
-	#panStart;
+	#resizeObserver;
+	#gestures;
 	get #effectiveRoot() {
 		return this.model?.root ?? this.root;
 	}
 	#layout() {
 		return computeHyperbolicLayout(this.#effectiveRoot, {
-			focusedKey: this._focusKey,
+			focusedKey: this._focusId,
 			maxRadius: this.maxRadius,
 			curvature: this.curvature,
-			centerOverride: this._panOffset.x === 0 && this._panOffset.y === 0 && this._animCenter === void 0 ? void 0 : this.#effectiveCenter()
+			siblingSpacing: this.siblingSpacing,
+			view: this.#currentView()
 		});
 	}
-	#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);
+	get #rootId() {
+		return this.#effectiveRoot?.item.key;
+	}
+	/** The projection currently on screen, from the focus's local frame. */
+	#currentView() {
+		return this._viewOverride ?? rotationIsometry(this._focusRotation);
+	}
+	/**
+	* The current view re-expressed in `targetId`'s local frame — i.e. the same
+	* picture, but with `targetId` as the reference node. Where the view hands
+	* over on a focus change.
+	*/
+	#viewFromFrameOf(targetId, currentId) {
+		const entries = computeCanonicalPositions(this.#effectiveRoot, 24, this.curvature, this.siblingSpacing);
+		const relative = currentId === void 0 ? void 0 : hyperbolicRelativeFrame(entries, currentId, targetId);
+		return relative ? composeIsometry(this.#currentView(), relative) : rotationIsometry(this._focusRotation);
+	}
+	/** Layout id of `node` — by identity, falling back to the first node sharing its key. */
+	#idOf(node) {
+		const root = this.#effectiveRoot;
+		const direct = findHyperbolicIdOf(root, node);
+		if (direct !== void 0) return direct;
+		const byKey = findHyperbolicNode(root, node.item.key);
+		return byKey ? findHyperbolicIdOf(root, byKey) : void 0;
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -6206,14 +7773,25 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		});
 		this.registry = registry;
 		this.#syncSearchCommands();
+		if (typeof ResizeObserver === `function`) {
+			this.#resizeObserver = new ResizeObserver(([entry]) => {
+				const { width, height } = entry.contentRect;
+				this._hostSize = {
+					width,
+					height
+				};
+			});
+			this.#resizeObserver.observe(this);
+		}
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
-		for (const aborter of this.#aborters.values()) aborter.abort();
-		this.#aborters.clear();
-		this.#pendingKeys.clear();
+		this.#preview.dispose();
+		this.#lazy.abortAll();
 		if (this.#animFrame !== void 0) {
 			cancelAnimationFrame(this.#animFrame);
 			this.#animFrame = void 0;
@@ -6254,58 +7832,30 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		}
 		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;
+		if (this._focusId !== void 0 && !findHyperbolicPathById(this.#effectiveRoot, this._focusId)) {
+			this._focusId = void 0;
+			this._viewOverride = void 0;
+			this._focusRotation = 0;
 		}
-		this.#ensureVisibleChildren();
+		this.#lazy.ensure(this.#layout().nodes);
 	}
 	#resetViewState() {
 		this.#clearSelectionInternal();
 		this.tickled.clearTickled();
-		this._focusKey = void 0;
-		this._animCenter = void 0;
-		this._panOffset = {
+		this._focusId = void 0;
+		this._viewOverride = void 0;
+		this._focusRotation = 0;
+		this._zoomOffset = {
 			x: 0,
 			y: 0
 		};
+		this._previewId = void 0;
+		this.#gestures.cancel();
 		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;
@@ -6381,83 +7931,83 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	* 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);
+		const root = this.#effectiveRoot;
+		const targetId = this.#idOf(node);
+		const currentId = this._focusId ?? this.#rootId;
+		if (targetId === void 0 || currentId === targetId) return;
+		const targetNode = findHyperbolicPathById(root, targetId)?.at(-1) ?? node;
+		const previousNode = currentId === void 0 ? void 0 : findHyperbolicPathById(root, currentId)?.at(-1);
+		const fromView = this.#viewFromFrameOf(targetId, currentId);
+		this._focusId = targetId;
+		this.#gestures.cancel();
+		this._previewId = void 0;
+		this.#animateTo(fromView);
 		this.dispatchEvent(new CustomEvent(`focus`, {
 			detail: {
-				node,
+				node: targetNode,
 				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
-				}));
-			}
+		if (previousNode && currentId !== void 0) {
+			if (isHyperbolicDescendantId(targetId, currentId)) this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node: targetNode,
+					depth: hyperbolicIdDepth(targetId)
+				},
+				bubbles: true,
+				composed: true
+			}));
+			else if (isHyperbolicDescendantId(currentId, targetId)) this.dispatchEvent(new CustomEvent(`collapse`, {
+				detail: {
+					node: previousNode,
+					depth: hyperbolicIdDepth(currentId)
+				},
+				bubbles: true,
+				composed: true
+			}));
 		}
 		this.requestUpdate();
 	}
-	#prefersReducedMotion() {
-		return typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches;
-	}
-	#animateTo(from, to) {
+	#cancelAnimation() {
 		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;
+	}
+	/** Animate from view `from` (in the new focus's frame) to the settled, centered view — see {@link focusTransition}. */
+	#animateTo(from) {
+		this.#cancelAnimation();
+		const { viewAt, settledRotation } = focusTransition(from);
+		this._focusRotation = settledRotation;
+		const fromOffset = this._zoomOffset;
+		if (this.focusAnimationDuration <= 0 || prefersReducedMotion$1() || typeof requestAnimationFrame !== `function`) {
+			this._viewOverride = void 0;
+			this._zoomOffset = {
+				x: 0,
+				y: 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();
+			const remaining = 1 - easeInOutCubic(t);
+			this._zoomOffset = {
+				x: fromOffset.x * remaining,
+				y: fromOffset.y * remaining
+			};
+			this._viewOverride = t >= 1 ? void 0 : viewAt(t);
 			this.#animFrame = t < 1 ? requestAnimationFrame(step) : void 0;
 		};
 		this.#animFrame = requestAnimationFrame(step);
 	}
 	#focusAndMaybeSelect(node) {
 		this.focusOn(node);
-		this.tickled.setTickled(node.item.key);
+		const id = this.#idOf(node);
+		if (id !== void 0) this.tickled.setTickled(id);
 		if (this.interactionMode === `implicit`) this.select(node);
 	}
 	/** Focus + select the node at `keys` (path from the root's children). Returns `true` if found. */
@@ -6472,7 +8022,8 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		}
 		this.focusOn(current);
 		this.select(current);
-		this.tickled.setTickled(current.item.key);
+		const id = this.#idOf(current);
+		if (id !== void 0) this.tickled.setTickled(id);
 		this.requestUpdate();
 		return true;
 	}
@@ -6480,7 +8031,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	navigateToNode(predicate) {
 		const root = this.#effectiveRoot;
 		if (!root?.children) return false;
-		const keyPath = this.#findKeyPath(root.children, predicate);
+		const keyPath = findHyperbolicKeyPath(root.children, predicate);
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
@@ -6491,22 +8042,13 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	*/
 	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);
+		const id = node ? this.#idOf(node) : void 0;
+		if (!node || id === void 0) return false;
+		if (!this.#layout().nodes.some((n) => n.id === id)) this.focusOn(node);
+		this.tickled.setTickled(id);
 		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
@@ -6543,7 +8085,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 				this.requestUpdate();
 			}
 		} else if (this.interactionMode !== `manual`) this.select(n.node);
-		this.tickled.setTickled(n.key);
+		this.tickled.setTickled(n.id);
 		this.focusOn(n.node);
 	}
 	#handleItemDblClick(n) {
@@ -6565,239 +8107,147 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		}));
 	}
 	#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);
-			}
+		if (this.disableKeyboardNavigation || !root) return;
+		if (event.key === `Escape` && this._previewId !== void 0) {
+			event.preventDefault();
+			this._previewId = void 0;
+			return;
+		}
+		const { action, handled } = resolveKeyboardAction(event.key, root, this._focusId ?? root.item.key, this.#layout().nodes);
+		if (handled) event.preventDefault();
+		if (action.kind === `focus`) this.#focusAndMaybeSelect(action.node);
+		else if (action.kind === `activate`) {
+			if (this.interactionMode !== `manual`) this.select(action.node);
+			this.dispatchEvent(new CustomEvent(`activate`, {
+				detail: {
+					node: action.node,
+					depth: action.depth
+				},
+				bubbles: true,
+				composed: true
+			}));
 		}
 	}
-	#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);
+	#zoomState() {
+		return clampZoomState({
+			zoom: this.zoom,
+			offset: this._zoomOffset
+		});
 	}
 	/**
-	* 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.
+	* Any pointer interaction (a node press, or a pan) moves keyboard focus to
+	* the tree, so the user can carry straight on with the arrow keys.
+	* Focuses the stable `<svg role="tree">` — not the node, which paint-order
+	* re-sorting may move in the DOM (dropping its focus) — without scrolling.
 	*/
-	#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));
+	#focusTree() {
+		this.renderRoot.querySelector(`svg.hyperbolictree`)?.focus({ preventScroll: true });
 	}
-	/**
-	* 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);
+	#handleNodePointerDown(event) {
+		event.stopPropagation();
+		this.#focusTree();
+	}
+	#pickPreviewChild(child) {
+		this.#preview.hide();
+		if (this.interactionMode !== `manual`) this.select(child);
+		const id = this.#idOf(child);
+		if (id !== void 0) this.tickled.setTickled(id);
+		this.focusOn(child);
+		this.#focusTree();
+	}
+	#previewFor(nodes) {
+		const n = this._previewId === void 0 || this.disableChildPreview ? void 0 : nodes.find((v) => v.id === this._previewId);
+		if (!n) return void 0;
+		const { width, height } = this._hostSize;
+		const anchor = diskToHostPx(n.position, this.#zoomState(), width || 420, height || 420);
+		return {
+			node: n.node,
+			anchor,
+			above: anchor.y > (height || 420) / 2
+		};
+	}
+	#nodeContext(nodes, branches) {
+		return buildNodeRenderContext(nodes, {
+			nodeShape: this.nodeShape,
+			radialLabels: !this.disableRadialLabels,
+			zoom: this.#zoomState().zoom,
+			font: fontMetrics(this, Math.min(this._hostSize.width, this._hostSize.height), this.zoom),
+			branches,
+			boxMaxChars: this.boxMaxChars,
+			minLabelSize: this.minLabelSize,
+			nodeRadius: this.nodeRadius,
+			minNodeRadius: this.minNodeRadius,
+			minWeightScale: this.minWeightScale,
+			maxWeightScale: this.maxWeightScale,
+			isSelected: (node) => this._selectedNodes.has(node),
+			isTickled: (id) => this.tickled.isTickled(id)
 		});
-		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>
-    `;
+	#renderNodes(nodes, ctx) {
+		return renderNodes(nodes, this.nodeShape, {
+			ctx,
+			state: {
+				isSelected: (node) => this._selectedNodes.has(node),
+				isTickled: (id) => this.tickled.isTickled(id),
+				showTitle: (n) => this.disableChildPreview || !n.node.children?.length,
+				isFiltered: (n) => !this.#matchesFilter(n.node, n.depth),
+				isPending: (node) => this.#lazy.isPending(node)
+			},
+			handlers: {
+				onPointerDown: (e) => this.#handleNodePointerDown(e),
+				onClick: (n, e) => {
+					e.stopPropagation();
+					this.#handleItemClick(n, e);
+				},
+				onDblClick: (n, e) => {
+					e.stopPropagation();
+					this.#handleItemDblClick(n);
+				},
+				onPointerEnter: (id) => this.tickled.handlePointerEnter(id)
+			}
+		});
 	}
 	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);
+		const byId = new Map(nodes.map((n) => [n.id, n]));
+		const branches = branchIndices(this.#effectiveRoot);
+		const ctx = this.#nodeContext(nodes, branches);
+		this.#lastLabelIds = ctx.labelIds;
+		const { zoom, offset } = this.#zoomState();
+		const pan = offset.x === 0 && offset.y === 0 ? `` : `translate(${offset.x * 500} ${offset.y * 500}) `;
 		return html`
       <svg
         class="hyperbolictree"
-        viewBox="${-1.05 * RENDER_SCALE} ${-1.05 * RENDER_SCALE} ${2.1 * RENDER_SCALE} ${2.1 * RENDER_SCALE}"
+        viewBox="${-525} ${-525} ${1050} ${1050}"
         preserveAspectRatio="xMidYMid meet"
         role="tree"
         tabindex="0"
         data-input-mode=${this.tickled.inputMode}
+        data-node-shape=${this.nodeShape}
         @keydown=${(e) => this.#handleKeyDown(e)}
-        @pointerdown=${(e) => this.#handleBackgroundPointerDown(e)}
-        @pointermove=${(e) => this.#handleBackgroundPointerMove(e)}
-        @pointerup=${(e) => this.#handleBackgroundPointerUp(e)}
+        @pointerdown=${(e) => this.#gestures.onPointerDown(e)}
+        @pointermove=${(e) => this.#gestures.onPointerMove(e)}
+        @pointerup=${(e) => this.#gestures.onPointerUp(e)}
+        @pointercancel=${(e) => this.#gestures.onPointerUp(e)}
+        @wheel=${(e) => this.#gestures.onWheel(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="zoom" transform="${pan}scale(${zoom})">
+          <circle class="disk-boundary" part="boundary" cx="0" cy="0" r=${500} />
           <g class="edges" part="edges">
-            ${repeat(edges, (e) => `${e.fromKey}->${e.toKey}`, (e) => this.#renderEdge(e, byKey))}
+            ${renderEdges(edges, byId, branches, this.edgeRenderer)}
           </g>
           <g class="nodes" part="nodes">
-            ${repeat(nodes, (n) => n.key, (n) => this.#renderNode(n, siblingGroups, labelKeys))}
+            ${this.#renderNodes(nodes, ctx)}
           </g>
         </g>
       </svg>
+      ${renderChildPreview(this.#previewFor(nodes), {
+			onPointerEnter: () => this.#preview.pointerEnter(),
+			onPointerLeave: () => this.#preview.pointerLeave(this.tickled.tickledId),
+			onPick: (child) => this.#pickPreviewChild(child)
+		})}
       ${this.search.renderField()}
     `;
 	}
@@ -6805,102 +8255,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		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;
-      }
-    `
+			hyperbolicTreeStyles
 		];
 	}
 };
@@ -6923,6 +8278,24 @@ __decorate([property({
 	type: Number,
 	attribute: `max-radius`
 })], HyperbolicTreeListElement.prototype, "maxRadius", void 0);
+__decorate([property({
+	type: String,
+	attribute: `node-shape`,
+	reflect: true
+})], HyperbolicTreeListElement.prototype, "nodeShape", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `box-max-chars`
+})], HyperbolicTreeListElement.prototype, "boxMaxChars", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-label-size`
+})], HyperbolicTreeListElement.prototype, "minLabelSize", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `color-by-branch`,
+	reflect: true
+})], HyperbolicTreeListElement.prototype, "colorByBranch", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `node-radius`
@@ -6940,7 +8313,23 @@ __decorate([property({
 	attribute: `max-weight-scale`
 })], HyperbolicTreeListElement.prototype, "maxWeightScale", void 0);
 __decorate([property({ type: Number })], HyperbolicTreeListElement.prototype, "zoom", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-zoom-gestures`
+})], HyperbolicTreeListElement.prototype, "disableZoomGestures", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-radial-labels`
+})], HyperbolicTreeListElement.prototype, "disableRadialLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-child-preview`
+})], HyperbolicTreeListElement.prototype, "disableChildPreview", void 0);
 __decorate([property({ type: Number })], HyperbolicTreeListElement.prototype, "curvature", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `sibling-spacing`
+})], HyperbolicTreeListElement.prototype, "siblingSpacing", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `focus-animation-duration`
@@ -6959,9 +8348,12 @@ __decorate([property({
 	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);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_focusId", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_viewOverride", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_focusRotation", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_zoomOffset", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_previewId", void 0);
+__decorate([state()], HyperbolicTreeListElement.prototype, "_hostSize", void 0);
 HyperbolicTreeListElement = __decorate([safeCustomElement(`ixfx-hyperbolictree-list`)], HyperbolicTreeListElement);
 //#endregion
 //#region src/icicle-tree/layout.ts
@@ -14356,6 +15748,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, 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 };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, 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, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, 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, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map