@ixfx/components 0.11.4 → 0.11.6

package/bundle/index.js

@@ -7248,6 +7248,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		this._hasContextTarget = false;
 		this._anchorName = `--mt-${_MenuTrigger._count++}`;
 		this._clickListener = this._handleClickOutside.bind(this);
+		this._focusBeforeOpen = null;
 		this._handlePopoverToggle = (e) => {
 			if (e.newState === `closed`) {
 				this._isOpen = false;
@@ -7264,10 +7265,10 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 				e.preventDefault();
 				e.stopPropagation();
 				this._closeMenu();
-				this._triggerBtn?.focus();
+				this._restoreFocus();
 			} else if (e.key === `Tab`) {
 				this._closeMenu();
-				this._triggerBtn?.focus();
+				this._restoreFocus();
 			}
 		};
 	}
@@ -7305,6 +7306,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) this._propagateContext();
+		if (changedProperties.has(`mode`) || changedProperties.has(`_hasContextTarget`)) this.toggleAttribute(`has-context-target`, this.mode === `context` && this._hasContextTarget);
 		if (changedProperties.has(`mode`)) this._updatePosition();
 	}
 	_updatePosition() {
@@ -7370,6 +7372,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	}
 	_openMenu() {
 		if (this._isOpen || !this._popup?.popover) return;
+		this._focusBeforeOpen = deepActiveElement();
 		try {
 			this._popup.showPopover({ source: this });
 			this._isOpen = true;
@@ -7411,6 +7414,22 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 	_getMenuContainer() {
 		return ((this.shadowRoot?.querySelector(`slot[name="menu"]`))?.assignedElements({ flatten: true }) ?? []).find((el) => el.tagName === `IXFX-MENU-CONTAINER`) ?? null;
 	}
+	/**
+	* Return focus after a keyboard close. The trigger button is the natural
+	* target, but it is not rendered for a context target — then fall back to
+	* whatever was focused at open (don't rely on the browser's popover focus
+	* restoration), and finally the host.
+	*/
+	_restoreFocus() {
+		if (this._triggerBtn) {
+			this._triggerBtn.focus();
+			return;
+		}
+		const previous = this._focusBeforeOpen;
+		this._focusBeforeOpen = null;
+		if (previous?.isConnected && previous !== document.body) previous.focus();
+		else this.focus();
+	}
 	_handleCommand(e) {
 		if (this._popup?.popover) try {
 			this._popup.hidePopover();
@@ -7454,6 +7473,16 @@ let MenuTrigger = class MenuTrigger extends LitElement {
       --ixfx-button-padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
     }
 
+    /* Context mode with a context-target: dissolve the host's box so the
+       slotted surface is itself the item in the consumer's flex/grid layout.
+       Otherwise the host sizes to the surface's full un-scrolled content and
+       a height-constrained parent never clips it. Safe because context opens
+       position the popup at the pointer (fixed), not via the anchor.
+       Override with --menu-trigger-display (e.g. block) to keep a box. */
+    :host([mode="context"][has-context-target]) {
+      display: var(--menu-trigger-display, contents);
+    }
+
     .trigger-area {
       anchor-name: var(--anchor-name);
       /* Block flex (not inline-flex): as an inline-level box this would join
@@ -7581,6 +7610,12 @@ __decorate([state()], MenuTrigger.prototype, "_hasContextTarget", void 0);
 __decorate([query(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([query(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
 MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
+/** `document.activeElement`, followed down through open shadow roots. */
+function deepActiveElement() {
+	let el = document.activeElement;
+	while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+	return el instanceof HTMLElement ? el : null;
+}
 //#endregion
 //#region src/menu/menu-item.ts
 let MenuItem = class MenuItem extends LitElement {
@@ -12013,6 +12048,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();
@@ -12024,6 +12060,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) => {
@@ -12159,6 +12196,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;
@@ -12304,12 +12354,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;
@@ -12327,6 +12428,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();
@@ -12402,7 +12528,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()}>
@@ -12419,6 +12545,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) {
@@ -12440,7 +12586,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>
@@ -12546,6 +12692,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`
@@ -12568,10 +12716,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`
@@ -12598,6 +12751,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%;
@@ -12709,6 +12864,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;
@@ -12793,6 +12956,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);
@@ -12804,6 +12971,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-display/data-display.ts
@@ -13127,6 +13295,34 @@ let DataDisplayComponent = class DataDisplayComponent extends LitElement {
 __decorate([property({ type: Boolean })], DataDisplayComponent.prototype, "automap", void 0);
 DataDisplayComponent = __decorate([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
 //#endregion
+//#region src/common/item-appearance.ts
+/**
+* Shared helpers for the list components' per-item appearance hooks — the
+* per-item icon colour / text colour / badge that miller-list, detail-list,
+* grid-list, data-grid and vertical-list all accept.
+*
+* Every component takes these three features in its own idiom (plain fields
+* on a `TreeItem`, a property-name lookup, an adapter function, a nominated
+* column) but they all agree on what "not supplied" means, and on never
+* emitting an empty slot for an absent value.
+*/
+/**
+* Whether a per-item appearance value counts as "not supplied". `false` and
+* `''` are included so a consumer can clear a feature without rebuilding the
+* collection — e.g. `badge: flags && tagChip(flags.colour)`.
+*/
+function appearanceAbsent(value) {
+	return value === void 0 || value === null || value === false || value === ``;
+}
+/**
+* A usable CSS colour from a per-item value, or `undefined`. Non-strings and
+* empty strings are ignored rather than stringified, so a stray number or
+* `0` never lands in a `style` attribute.
+*/
+function appearanceColor(value) {
+	return typeof value === `string` && value.length > 0 ? value : void 0;
+}
+//#endregion
 //#region src/util/drag-ghost.ts
 /**
 * Theme-aware floating element helper.
@@ -14251,6 +14447,12 @@ __decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
 PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
 //#endregion
 //#region src/data-grid/data-grid.ts
+const EMPTY_CELL_LOOK = {
+	textColor: void 0,
+	icon: void 0,
+	iconColor: void 0,
+	badge: void 0
+};
 /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
 function sameKeys$3(a, b) {
 	if (a === void 0 || a.length !== b.length) return false;
@@ -14275,6 +14477,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
+		this.textColorColumn = ``;
+		this.iconColumn = ``;
+		this.badgeColumn = ``;
 		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._resizingColKey = void 0;
@@ -14694,6 +14899,25 @@ let DataGridElement = class DataGridElement extends LitElement {
     }
     .cell.editable-text { cursor: text; }
     .cell input, .cell select { width: 100%; font: inherit; }
+    /* Per-row icon / badge, enabled by nominating iconColumn / badgeColumn.
+       The badge self-justifies to the cell's trailing edge; the value text
+       keeps its own flex sizing so the cell still ellipsises. */
+    .cell-icon {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-end: var(--data-grid-cell-icon-gap, 6px);
+      width: var(--data-grid-cell-icon-size, 1em);
+      height: var(--data-grid-cell-icon-size, 1em);
+    }
+    .cell-badge {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: auto;
+      padding-inline-start: var(--data-grid-badge-gap, 6px);
+    }
     .checkbox-col { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
     ixfx-menu-trigger { flex-shrink: 0; border-left: var(--border-subtle); background: var(--data-grid-header-bg); display: flex; align-items: center; --ixfx-button-padding: var(--space-s) var(--space-m); min-width: 44px; min-height: var(--data-grid-header-height); justify-content: center; }
     .header-cell[drag-source] { opacity: 0.4; }
@@ -15465,6 +15689,27 @@ let DataGridElement = class DataGridElement extends LitElement {
 		if (this.globalFormatter) return this.globalFormatter(value, col.key, row);
 		return value;
 	}
+	/**
+	* Resolve the per-row appearance for the cell at `colKey`, honouring the
+	* nominated columns. Additive — `col.renderer` / `col.formatter` still own
+	* the cell's value; this only decorates it. Returns all-`undefined` for
+	* every cell when nothing is nominated (the common case).
+	*/
+	_cellLook(row, colKey) {
+		if (this.textColorColumn === `` && this.iconColumn === `` && this.badgeColumn === ``) return EMPTY_CELL_LOOK;
+		const rec = typeof row === `object` && row !== null ? row : {};
+		const textColor = colKey === this.textColorColumn ? appearanceColor(rec.textColor) : void 0;
+		const icon = colKey === this.iconColumn && !appearanceAbsent(rec.icon) ? rec.icon : void 0;
+		const iconColor = icon === void 0 ? void 0 : appearanceColor(rec.iconColor);
+		const badge = colKey === this.badgeColumn && !appearanceAbsent(rec.badge) ? rec.badge : void 0;
+		if (textColor === void 0 && icon === void 0 && badge === void 0) return EMPTY_CELL_LOOK;
+		return {
+			textColor,
+			icon,
+			iconColor,
+			badge
+		};
+	}
 	_handleCellSecondClick(rowKey, col) {
 		if (this.editability !== `user`) return;
 		const now = Date.now();
@@ -15922,7 +16167,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
 				const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
 				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
-				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent}"
+				const look = this._cellLook(row, col.key);
+				const cellStyle = look.textColor === void 0 ? `` : `color:${look.textColor};`;
+				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
                       @click=${(e) => {
 					this._lastClickedCell = {
 						rowKey,
@@ -15944,7 +16191,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 						composed: true
 					}));
 				}}
-                    >${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}</div>`;
+                    >${look.icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${look.iconColor === void 0 ? nothing : `color:${look.iconColor}`}>${look.icon}</span>`}${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}${look.badge === void 0 ? nothing : html`<span class="cell-badge" part="badge">${look.badge}</span>`}</div>`;
 			})}
                 </div>
               `;
@@ -16004,6 +16251,18 @@ __decorate([property({
 	attribute: `column-menu`
 })], DataGridElement.prototype, "columnMenu", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `text-color-column`
+})], DataGridElement.prototype, "textColorColumn", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-column`
+})], DataGridElement.prototype, "iconColumn", void 0);
+__decorate([property({
+	type: String,
+	attribute: `badge-column`
+})], DataGridElement.prototype, "badgeColumn", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
 __decorate([property({
@@ -16304,6 +16563,14 @@ DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableE
 const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+/**
+* Layout for the per-item badge wrapper `#ensureBadge` adds. Applied as inline
+* `cssText` rather than shadow CSS because `::slotted()` only matches the
+* host's *direct* children — the badge lives inside a slotted `<li>`, so a
+* `::slotted()` rule could never reach it. The values still read the CSS
+* custom property, so it stays themeable from the outside.
+*/
+const BADGE_EL_CSS = `flex-shrink:0;display:inline-flex;align-items:center;margin-inline-start:auto;padding-inline-start:var(--detail-list-badge-gap,8px)`;
 function pointInRect(x, y, rect) {
 	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
 }
@@ -16337,6 +16604,9 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.items = [];
 		this.displayProperty = ``;
 		this.iconProperty = ``;
+		this.iconColorProperty = ``;
+		this.textColorProperty = ``;
+		this.badgeProperty = ``;
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
@@ -16538,7 +16808,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 		};
 		this._onWheel = (e) => {
 			e.preventDefault();
-			this._listEl.scrollLeft += e.deltaY;
+			const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+			this._listEl.scrollLeft += delta;
 		};
 	}
 	#itemData;
@@ -16743,7 +17014,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			});
 			return;
 		}
-		if (changed.has(`items`) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
+		if ((changed.has(`items`) || changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`)) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
 		this.#syncFromProvider();
 		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
 		if (changed.has(`filterPredicate`)) {
@@ -16948,24 +17219,36 @@ let DetailListElement = class DetailListElement extends LitElement {
 		const li = document.createElement(`li`);
 		this.#itemData.set(li, item);
 		const content = this.formatter ? this.formatter(item, index) : this.displayProperty ? this.#propertyValue(item, this.displayProperty) : item;
+		const textColor = this.#colorValue(item, this.textColorProperty);
+		const iconColor = this.#colorValue(item, this.iconColorProperty);
+		if (iconColor !== void 0) li.setAttribute(`data-icon-color`, iconColor);
 		if (typeof content === `string`) {
-			this._setLabel(li, content);
+			const span = this._setLabel(li, content);
+			if (textColor !== void 0) span.style.color = textColor;
 			if (this.iconProperty) {
 				const icon = this.#propertyValue(item, this.iconProperty);
 				if (typeof icon === `string` && icon.length > 0) li.setAttribute(`data-icon`, icon);
 			}
-		} else if (content instanceof Node) li.appendChild(content);
+		} else if (content instanceof Node) {
+			li.appendChild(content);
+			if (textColor !== void 0) li.style.color = textColor;
+		}
 		if (this.keyProperty) {
 			const key = this.#propertyValue(item, this.keyProperty);
 			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
 		}
 		this.#ensureIcon(li);
+		this.#ensureBadge(li, this.#propertyValue(item, this.badgeProperty));
 		return li;
 	}
 	#propertyValue(item, prop) {
 		if (typeof item !== `object` || item === null || !(prop in item)) return void 0;
 		return item[prop];
 	}
+	/** A non-empty string from `item[prop]`, else `undefined`. */
+	#colorValue(item, prop) {
+		return prop ? appearanceColor(this.#propertyValue(item, prop)) : void 0;
+	}
 	#syncFromProvider() {
 		if (this.provider === void 0) return;
 		const items = this.#data.items;
@@ -17223,12 +17506,14 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (this.interactionMode !== `checked`) return true;
 		return !item.hasAttribute(`not-checked`);
 	}
+	/** Appends the caption span; returns it so callers can style it per item. */
 	_setLabel(li, label) {
 		const span = document.createElement(`span`);
 		span.style.cssText = LABEL_SPAN_CSS;
 		span.textContent = label;
 		li.appendChild(span);
 		li.setAttribute(`data-search-label`, label);
+		return span;
 	}
 	/**
 	* Inject a leading `<ixfx-icon>` into an item carrying `data-icon`.
@@ -17242,8 +17527,28 @@ let DetailListElement = class DetailListElement extends LitElement {
 		icon.setAttribute(`name`, name);
 		icon.style.marginInlineEnd = `var(--detail-list-icon-gap, 6px)`;
 		icon.style.flexShrink = `0`;
+		const color = li.getAttribute(`data-icon-color`);
+		if (color) icon.style.color = color;
 		li.prepend(icon);
 	}
+	/**
+	* Append a right-justified Finder-style badge. `badge` may be a DOM `Node`
+	* or anything Lit can render (typically a `TemplateResult`). Idempotent —
+	* a second call replaces the existing badge.
+	*/
+	#ensureBadge(li, badge) {
+		if (appearanceAbsent(badge)) return;
+		let holder = li.querySelector(`:scope > .item-badge`);
+		if (!holder) {
+			holder = document.createElement(`span`);
+			holder.className = `item-badge`;
+			holder.style.cssText = BADGE_EL_CSS;
+			li.appendChild(holder);
+		}
+		holder.replaceChildren();
+		if (badge instanceof Node) holder.appendChild(badge);
+		else render(badge, holder);
+	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
 		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#ensureIcon(el);
@@ -17517,6 +17822,10 @@ let DetailListElement = class DetailListElement extends LitElement {
       opacity: 0.6;
     }
 
+    /* Per-item icon / badge (adapter mode) are styled inline by
+       #ensureBadge — ::slotted() only reaches the host's direct children,
+       and these spans live inside a slotted <li>. */
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -17591,6 +17900,18 @@ __decorate([property({
 	type: String,
 	attribute: `icon-property`
 })], DetailListElement.prototype, "iconProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-color-property`
+})], DetailListElement.prototype, "iconColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `text-color-property`
+})], DetailListElement.prototype, "textColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `badge-property`
+})], DetailListElement.prototype, "badgeProperty", void 0);
 __decorate([property({
 	type: String,
 	attribute: `key-property`
@@ -23322,6 +23643,10 @@ var ElementGridListSource = class {
 		if (eff === void 0) return void 0;
 		return html`<slot name=${this.slotNameFor(this.#items[eff])}></slot>`;
 	}
+	iconAt(_index) {}
+	iconColorAt(_index) {}
+	textColorAt(_index) {}
+	badgeAt(_index) {}
 	setFilters(opts) {
 		if (`predicate` in opts) this.#predicate = opts.predicate;
 		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
@@ -23438,6 +23763,22 @@ var DataGridListSource = class {
 		const eff = this.#effectiveIndices[index];
 		return eff === void 0 ? void 0 : this.#adapter.render(this.#items[eff], eff);
 	}
+	iconAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 || this.#adapter.icon === void 0 ? void 0 : this.#adapter.icon(this.#items[eff], eff);
+	}
+	iconColorAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#adapter.iconColor?.(this.#items[eff], eff);
+	}
+	textColorAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#adapter.textColor?.(this.#items[eff], eff);
+	}
+	badgeAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 || this.#adapter.badge === void 0 ? void 0 : this.#adapter.badge(this.#items[eff], eff);
+	}
 	setFilters(opts) {
 		if (`predicate` in opts) this.#predicate = opts.predicate;
 		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
@@ -23978,6 +24319,50 @@ let GridListElement = class GridListElement extends LitElement {
         color: inherit;
       }
 
+      /* ---- Per-item icon (data mode) ----
+         Only [has-icon] switches to a column, so a cell without an icon keeps
+         exactly the layout it had before. The main content stays stretched;
+         the icon centres itself above it. */
+      .content.has-icon {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        gap: var(--grid-list-icon-gap, 2px);
+      }
+      .cell-icon {
+        flex: none;
+        align-self: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--grid-list-icon-size, 1.25em);
+        height: var(--grid-list-icon-size, 1.25em);
+      }
+
+      /* ---- Per-item badge (data mode) ----
+         Finder thumbnails put the tag inline, immediately before the name, so
+         the caption becomes a flex row. The text is wrapped in its own
+         shrinkable box so the ellipsis survives. */
+      .caption.has-badge {
+        display: flex;
+        align-items: center;
+        gap: var(--grid-list-badge-gap, 3px);
+        text-align: initial;
+      }
+      :host([caption-align="left"]) .caption.has-badge { justify-content: flex-start; }
+      :host([caption-align="right"]) .caption.has-badge { justify-content: flex-end; }
+      .caption.has-badge .caption-text {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .caption .badge {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+      }
+
       /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
              single selection outline ---- */
       :host(:not([caption-style="separate"])) .cell {
@@ -24986,6 +25371,8 @@ let GridListElement = class GridListElement extends LitElement {
 		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
 		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		const rawIcon = this.#source.iconAt(index);
+		const icon = appearanceAbsent(rawIcon) ? void 0 : rawIcon;
 		return html`
       <div
         class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
@@ -25003,8 +25390,11 @@ let GridListElement = class GridListElement extends LitElement {
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.#handleCellPointerEnter(key)}
       >
-        <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
-        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
+        <div class="content${icon === void 0 ? `` : ` has-icon`}" part="content">
+          ${icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${this.#colorStyle(this.#source.iconColorAt(index))}>${icon}</span>`}
+          ${this.#source.renderCellContent(index)}
+        </div>
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled, this.#source.badgeAt(index), this.#source.textColorAt(index)) : ``}
       </div>
     `;
 	}
@@ -25012,10 +25402,25 @@ let GridListElement = class GridListElement extends LitElement {
 	* A tickled cell swaps its plain label for an `ixfx-pan-text` in loop mode
 	* so a truncated label scrolls instead of staying an ellipsis. Unticked
 	* cells keep the cheap plain-text caption.
+	*
+	* With no `badge` and no `textColor` the DOM is exactly as it was — the
+	* flex row (and its extra `<span>` around the text) only appears when a
+	* badge needs to sit inline ahead of the name.
 	*/
-	#renderCaption(caption, captionCss, tickled) {
-		if (tickled) return html`<div class="caption" part="caption" style=${captionCss} title=${caption}><ixfx-pan-text mode="loop">${caption}</ixfx-pan-text></div>`;
-		return html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>`;
+	#renderCaption(caption, captionCss, tickled, badge, textColor) {
+		const color = appearanceColor(textColor);
+		const style = color === void 0 ? captionCss : `${captionCss}${captionCss.length > 0 ? `;` : ``}color:${color};`;
+		if (appearanceAbsent(badge)) {
+			if (tickled) return html`<div class="caption" part="caption" style=${style} title=${caption}><ixfx-pan-text mode="loop">${caption}</ixfx-pan-text></div>`;
+			return html`<div class="caption" part="caption" style=${style} title=${caption}>${caption}</div>`;
+		}
+		const label = tickled ? html`<ixfx-pan-text mode="loop">${caption}</ixfx-pan-text>` : html`<span class="caption-text">${caption}</span>`;
+		return html`<div class="caption has-badge" part="caption" style=${style} title=${caption}><span class="badge" part="badge">${badge}</span>${label}</div>`;
+	}
+	/** `color:<c>;` for a non-empty colour, else `nothing` (attribute removed). */
+	#colorStyle(color) {
+		const c = appearanceColor(color);
+		return c === void 0 ? nothing : `color:${c};`;
 	}
 	/** Stop the active caption pan, if any, and forget it. */
 	#stopActiveCaptionPan() {
@@ -28218,6 +28623,16 @@ const ITEM_SELECTOR = `li:not([data-virtual-spacer]), [data-list-item]:not([data
 * vertical rows are shorter relative to the viewport, so 3.
 */
 const VIRTUAL_OVERSCAN = 3;
+/**
+* Layout for the per-item icon / badge wrappers `#decorateAdapterItem` adds.
+*
+* Applied as inline `cssText` rather than shadow CSS because `::slotted()` only
+* matches the host's *direct* children — these spans live inside a slotted
+* `<li>`, so a `::slotted()` rule could never reach them. The values still read
+* the CSS custom properties, so they stay themeable from the outside.
+*/
+const ITEM_ICON_EL_CSS = `flex:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;margin-inline-end:var(--list-item-icon-gap,6px);width:var(--list-item-icon-size,1em);height:var(--list-item-icon-size,1em)`;
+const ITEM_BADGE_EL_CSS = `flex:none;display:inline-flex;align-items:center;margin-inline-start:auto;padding-inline-start:var(--list-item-badge-gap,8px)`;
 /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
 function sameKeys(a, b) {
 	if (a === void 0 || a.length !== b.length) return false;
@@ -28627,7 +29042,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 			this.#syncSearchCommands();
 		}
-		if ((changed.has(`items`) || changed.has(`formatter`) || changed.has(`keyProperty`)) && this.items !== void 0) {
+		if ((changed.has(`items`) || changed.has(`formatter`) || changed.has(`keyProperty`) || changed.has(`icon`) || changed.has(`iconColor`) || changed.has(`textColor`) || changed.has(`badge`)) && this.items !== void 0) {
 			if (this.#suspendAdapterRebuild) this.#suspendAdapterRebuild = false;
 			else if (this.#virtualActive()) this.#rebuildAdapterVirtual();
 			else this.#rebuildFromAdapter();
@@ -28897,7 +29312,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		const fresh = this.formatter ? this.formatter(data, index) : data;
 		if (el instanceof HTMLLIElement) {
 			for (const child of [...el.childNodes]) child.remove();
-			this.#fillAdapterItem(el, fresh, data);
+			this.#fillAdapterItem(el, fresh, data, index);
 			if (this.interactionMode === `checked`) this._syncCheckboxes();
 			this._syncItemStates();
 		} else if (fresh instanceof Element && this.#isRowElement(fresh)) {
@@ -28952,17 +29367,47 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			return content;
 		}
 		const li = document.createElement(`li`);
-		this.#fillAdapterItem(li, content, item);
+		this.#fillAdapterItem(li, content, item, index);
 		return li;
 	}
-	#fillAdapterItem(li, content, item) {
+	#fillAdapterItem(li, content, item, index) {
 		if (typeof content === `string`) li.textContent = content;
 		else if (content instanceof Node) li.appendChild(content);
 		else if (this.formatter && content !== void 0 && content !== null) render(content, li);
+		this.#decorateAdapterItem(li, item, index);
 		this.#stampAdapterKey(li, item);
 		this.#itemData.set(li, item);
 	}
 	/**
+	* Apply the per-item icon / text colour / badge to a built row. Split out
+	* from {@link #fillAdapterItem} so the parts stay readable.
+	*/
+	#decorateAdapterItem(li, item, index) {
+		const textColor = appearanceColor(this.textColor?.(item, index));
+		if (textColor !== void 0) li.style.color = textColor;
+		else li.style.removeProperty(`color`);
+		const icon = this.icon?.(item, index);
+		if (!appearanceAbsent(icon)) {
+			const holder = document.createElement(`span`);
+			holder.className = `item-icon`;
+			holder.style.cssText = ITEM_ICON_EL_CSS;
+			const iconColor = appearanceColor(this.iconColor?.(item, index));
+			if (iconColor !== void 0) holder.style.color = iconColor;
+			if (icon instanceof Node) holder.appendChild(icon);
+			else render(icon, holder);
+			li.prepend(holder);
+		}
+		const badge = this.badge?.(item, index);
+		if (!appearanceAbsent(badge)) {
+			const holder = document.createElement(`span`);
+			holder.className = `item-badge`;
+			holder.style.cssText = ITEM_BADGE_EL_CSS;
+			if (badge instanceof Node) holder.appendChild(badge);
+			else render(badge, holder);
+			li.appendChild(holder);
+		}
+	}
+	/**
 	* Whether a formatter-produced element is a whole row (used directly)
 	* rather than row content (rendered into a `<li>`): an `<li>`, already
 	* marked `[data-list-item]`, or a custom element.
@@ -29484,6 +29929,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       outline: 1px solid transparent;
     }
 
+    /* Per-item icon / badge (adapter mode) are styled inline by
+       #decorateAdapterItem — ::slotted() only reaches the host's direct
+       children, and these spans live inside a slotted <li>. */
+
     /* Custom shadow-DOM components handle their own internal layout/padding.
        Wrapped in :where() so the selector stays at zero specificity and a
        consumer's own :host rule (e.g. display: flex) wins without
@@ -29630,6 +30079,10 @@ __decorate([property({
 	attribute: `key-property`
 })], VerticalListElement.prototype, "keyProperty", void 0);
 __decorate([property({ attribute: false })], VerticalListElement.prototype, "formatter", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "icon", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "iconColor", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "textColor", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "badge", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: `virtualize`,
@@ -30905,6 +31358,90 @@ __decorate([state()], IxfxHexEditorElement.prototype, "_containerH", void 0);
 __decorate([state()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
 __decorate([state()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
 IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
+/**
+* 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;
@@ -31009,8 +31546,625 @@ function geodesicInterpolate(a, b, t) {
 	if (localNorm < EPSILON) return a;
 	return mobiusFromOrigin(complexScale(complexScale(bLocal, 1 / localNorm), euclideanRadiusForHyperbolicDistance(hyperbolicDistanceForEuclideanRadius(localNorm) * t)), a);
 }
+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)
+	};
+}
+function invertIsometry(m) {
+	return {
+		a: complexConjugate(m.a),
+		b: complexScale(m.b, -1)
+	};
+}
+/** 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
+		}
+	};
+}
+/**
+* The view map that sends canonical point `center` to the origin, then
+* rotates by `rotation` radians: `z ↦ e^{i·rotation}·mobiusToOrigin(z, center)`.
+*/
+function viewIsometry(center, rotation = 0) {
+	return composeIsometry(rotationIsometry(rotation), invertIsometry(translationFromOrigin(center)));
+}
+/** 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;
+}
+/**
+* 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.)
+*/
+function panView(baseView, start, current) {
+	const toStart = translationFromOrigin(start);
+	return composeIsometry(composeIsometry(toStart, composeIsometry(translationFromOrigin(mobiusToOrigin(current, start)), invertIsometry(toStart))), baseView);
+}
+/**
+* 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 focusTransition(from) {
+	const { center, rotation } = decomposeViewIsometry(from);
+	const settledRotation = wrapAngle(rotation);
+	const origin = {
+		x: 0,
+		y: 0
+	};
+	return {
+		settledRotation,
+		viewAt: (t) => {
+			const eased = easeInOutCubic(Math.min(1, Math.max(0, t)));
+			return viewIsometry(geodesicInterpolate(center, origin, eased), settledRotation);
+		}
+	};
+}
+//#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
+		}
+	};
+	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
+	};
+}
+/**
+* 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 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
+	};
+}
+function screenToDisk(p, state) {
+	const zoom = state.zoom || 1;
+	return {
+		x: (p.x - state.offset.x) / zoom,
+		y: (p.y - state.offset.y) / zoom
+	};
+}
+/** 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;
@@ -31085,21 +32239,58 @@ function stableUnitJitter(key) {
 * 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 node key. Positions never depend on the current focus —
+* 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 `curvature` (default `1`).
-* That wedge is partitioned among the children, weighted by each child's own
+* 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 (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.
+* 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é
@@ -31108,7 +32299,7 @@ const CHAIN_JITTER_RADIANS = .22;
 * 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) {
+function computeCanonicalPositions(root, maxDepth = 24, curvature = 1, siblingSpacing = DEFAULT_SIBLING_SPACING) {
 	const map = /* @__PURE__ */ new Map();
 	if (!root) return map;
 	const origin = {
@@ -31117,70 +32308,122 @@ function computeCanonicalPositions(root, maxDepth = 24, curvature = 1) {
 	};
 	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, position, wedgeStart, wedgeEnd, depth) => {
+	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 r0 = euclideanRadiusForHyperbolicDistance(curvature);
 		const angularWidth = wedgeEnd - wedgeStart;
-		const weights = children.map((child) => subtreeSize(child, maxDepth - depth - 1));
+		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 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 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: r0 * Math.cos(theta),
-				y: r0 * Math.sin(theta)
+				x: r * Math.cos(theta),
+				y: r * Math.sin(theta)
 			};
-			const canonicalPosition = mobiusFromOrigin(local, position);
-			map.set(child.item.key, {
+			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,
-				position: canonicalPosition,
+				parentId: id,
+				position: applyIsometry(childFrame, origin),
+				toParent,
 				angularShare: share
 			});
-			const localStart = boundaryAngleInLocalFrame(childStart, local);
-			let localWidth = boundaryAngleInLocalFrame(childEnd, local) - localStart;
+			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, canonicalPosition, localStart, localStart + localWidth, depth + 1);
+			place(child, ids[index], childFrame, localStart, localStart + localWidth, depth + 1);
 		});
 	};
-	place(root, origin, -Math.PI, Math.PI, 0);
+	place(root, root.item.key, identityIsometry, -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++) {
+/**
+* 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 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);
-			}
+		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 ring;
+	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
@@ -31188,58 +32431,69 @@ function ringDistances(canonical, focusedKey, maxRadius) {
 * 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).
+* @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 } = 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 {
+	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 projectionCenter = options.centerOverride ?? focusEntry.position;
-	const ring = ringDistances(canonical, focusedKey, maxRadius);
-	const rawWeights = [...ring.keys()].map((key) => canonical.get(key).node.item.weight).filter((w) => typeof w === `number`);
+	const 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
@@ -31251,17 +32505,476 @@ function computeHyperbolicLayout(root, options = {}) {
 	};
 }
 //#endregion
-//#region src/hyperbolic-tree/hyperbolictree-list.ts
+//#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;
+}
 /**
-* 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.
+* 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.
 */
-const RENDER_SCALE = 500;
+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
+	};
+}
+/**
+* Paint order: far-from-focus first so nearer (larger) nodes sit on top;
+* then labelled over unlabelled; the hovered node above everything.
+*/
+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.)
@@ -31270,13 +32983,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);
@@ -31284,37 +33105,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: {
@@ -31326,8 +33173,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 = {
@@ -31340,37 +33209,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();
@@ -31390,14 +33277,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;
@@ -31438,58 +33336,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;
@@ -31565,83 +33435,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. */
@@ -31656,7 +33526,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;
 	}
@@ -31664,7 +33535,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);
 	}
@@ -31675,22 +33546,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
@@ -31727,7 +33589,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) {
@@ -31749,239 +33611,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();
+	#zoomState() {
+		return clampZoomState({
+			zoom: this.zoom,
+			offset: this._zoomOffset
+		});
 	}
-	#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}"
-    />`;
+	/**
+	* 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.
+	*/
+	#focusTree() {
+		this.renderRoot.querySelector(`svg.hyperbolictree`)?.focus({ preventScroll: true });
 	}
-	#renderEdge(edge, byKey) {
-		if (this.edgeRenderer) {
-			const fromNode = byKey.get(edge.fromKey)?.node;
-			const toNode = byKey.get(edge.toKey)?.node;
-			if (fromNode && toNode) return svg`<g transform="scale(${RENDER_SCALE})">${this.edgeRenderer({
-				edge,
-				fromNode,
-				toNode
-			})}</g>`;
-		}
-		return this.#defaultEdgeRenderer(edge);
-	}
-	/**
-	* A node's rendered dot radius: shrinks with distance from focus (existing
-	* behaviour), but also caps itself to the angular room {@link
-	* HyperbolicLayoutNode.angularShare} actually gives it at its radius —
-	* without this, a cluster of siblings squeezed into a narrow wedge (a
-	* bushy ancestor elsewhere in the tree, or many siblings at this level)
-	* all render at the same distance-only size and physically overlap into
-	* an unreadable blob, however small {@link minNodeRadius} suppresses their
-	* labels. `angularShare * distance` approximates the Euclidean arc length
-	* available to the node; capping the diameter to a fraction of that keeps
-	* a visible gap between crowded neighbours.
-	*/
-	#nodeRenderRadius(n) {
-		const distance = Math.hypot(n.position.x, n.position.y);
-		const scale = Math.max(.2, 1 - distance);
-		const weightScale = this.minWeightScale + (this.maxWeightScale - this.minWeightScale) * n.weightNormalized;
-		const radius = this.nodeRadius * scale * weightScale;
-		if (distance < 1e-6) return radius;
-		const arcLength = n.angularShare * distance;
-		return Math.min(radius, Math.max(arcLength * .35, .003));
-	}
-	/**
-	* Which nodes get a rendered label, greedily thinned to avoid overlap: a
-	* per-node radius threshold alone ({@link minNodeRadius}) still lets many
-	* same-sized nodes crowded into a small angular wedge all show labels that
-	* visually collide. Nodes are considered in priority order (closer ring
-	* first, then larger on-screen radius) and a label is kept only if its
-	* position isn't too close to an already-kept one.
-	*/
-	#computeLabelKeys(nodes) {
-		const minSpacing = .07;
-		const prioritised = [...nodes.filter((n) => this.#nodeRenderRadius(n) >= this.minNodeRadius)].sort((a, b) => {
-			if (a.ring !== b.ring) return a.ring - b.ring;
-			return Math.hypot(a.position.x, a.position.y) - Math.hypot(b.position.x, b.position.y);
+	#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()}
     `;
 	}
@@ -31989,102 +33759,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
 		];
 	}
 };
@@ -32107,6 +33782,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`
@@ -32124,7 +33817,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`
@@ -32143,9 +33852,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
@@ -37913,6 +39625,9 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		const open = this._isOpen(node, depth);
 		const isBranch = node.item.isLeaf !== true;
 		const icon = node.item.icon;
+		const iconColor = appearanceColor(node.item.iconColor);
+		const textColor = appearanceColor(node.item.textColor);
+		const badge = appearanceAbsent(node.item.badge) ? void 0 : node.item.badge;
 		const tooltip = node.item.tooltip;
 		const isCheckedMode = this.interactionMode === `checked`;
 		let checkboxTpl = nothing;
@@ -37940,8 +39655,9 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
         @pointerenter=${() => this._handleItemPointerEnter(node, depth)}
       >
         ${checkboxTpl}
-        ${icon ? html`<ixfx-icon class="item-icon" name="${icon}"></ixfx-icon>` : nothing}
-        <span class="label">${node.item.label}</span>
+        ${icon ? html`<ixfx-icon class="item-icon" name="${icon}" style=${iconColor ? `color:${iconColor}` : nothing}></ixfx-icon>` : nothing}
+        <span class="label" style=${textColor ? `color:${textColor}` : nothing}>${node.item.label}</span>
+        ${badge === void 0 ? nothing : html`<span class="item-badge" part="badge">${badge}</span>`}
         ${tooltip ? html`<ixfx-tooltip class="item-tooltip" anchor="--tooltip-miller-${depth}-${node.item.key}" .value=${tooltip}></ixfx-tooltip>` : nothing}
         ${isBranch ? html`<span class="caret" aria-hidden="true">›</span>` : nothing}
       </li>
@@ -37995,6 +39711,17 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
         text-overflow: ellipsis;
       }
 
+      /* Finder-style badge: sits between the label and the caret, flush to
+         the right edge of the row. The label is flex:1, so the gap opens up
+         ahead of the badge automatically. */
+      .item-badge {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        margin-inline-start: auto;
+        padding-inline-start: var(--miller-list-badge-gap, 0.5em);
+      }
+
       .item-tooltip {
         position: absolute;
       }
@@ -51586,6 +53313,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