@ixfx/components 0.15.5 → 0.16.0

package/dist/index.js

@@ -18,7 +18,9 @@ import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-ikByJJPN.js";
 import { a as toGroupKey, i as resolveGroupKey, n as defaultGroupLabel, o as toggleInSet, r as partitionByGroup, t as EMPTY_GROUP_LABEL } from "./grouping-RYPnHkrS.js";
 import { a as listItemFadeKeyframes, c as captionForEntry, i as animateListItemOut, l as createDefaultListDragPreview, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
-import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
+import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-5L0Nj9tR.js";
+import { a as capKeys, c as keysAsFlags, d as partitionKeys, f as withoutFlag, i as capFlags, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, r as MAX_PENDING_KEYS, s as flagsToRecord, t as EMPTY_FLAGS, u as partitionFlags } from "./pending-BGidHppL.js";
+import { n as createScrollHoverGuard, t as SCROLL_HOVER_SUPPRESS_ATTR } from "./scroll-hover-guard-Cjw6179Q.js";
 import "./interaction-E-uMGHkJ.js";
 import "./menu-item-BUv8An2k.js";
 import { Checkbox } from "./checkbox.js";
@@ -26,35 +28,37 @@ import { t as CheckedSelect } from "./checked-select-CBUidG7n.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-DwAa6RDh.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-D8VxvR9u.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-Crdpl4nc.js";
+import { a as restoreElementScroll, c as VIEW_STATE_VERSION, i as onUserScrollIntent, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, s as VIEW_STATE_CHANGE, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
+import { t as CrumbNavigationElement } from "./crumb-navigation-YnFVFqrx.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
-import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as DataGridElement } from "./data-grid-C1sZX6n9.js";
+import { t as DataGridElement } from "./data-grid-rMkLX2qo.js";
 import { a as menuFromTreeToElements, t as menu_exports } from "./menu-CU9KAm8s.js";
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
-import { t as DetailListElement } from "./detail-list-q8bs67BM.js";
+import { t as DetailListElement } from "./detail-list-C4pDSoI8.js";
 import { ListGroupHeaderElement } from "./list-group-header.js";
-import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-Deoxy47d.js";
+import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-DTY4PJRp.js";
 import { t as TabListElement } from "./tab-list-R_bGbDvO.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-FdCRi6st.js";
-import { VerticalListElement } from "./vertical-list.js";
+import { t as VerticalListElement } from "./vertical-list-1V1Vg2O5.js";
 import { FlatListElement } from "./flat-list.js";
 import { n as formStyles, r as adoptLightDomStyles, t as FormElement } from "./form-CY0nibZ5.js";
-import { t as GridListElement } from "./grid-list-y6dWJYu3.js";
+import { t as GridListElement } from "./grid-list-CdEkScn-.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
+import { a as resolveKeyPath, i as reconcileSelection$1, n as reconcileCursor, t as pathFromJson } from "./tree-CftHwtEb.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-DiYpgIKs.js";
 import { t as RadialInputElement } from "./radial-input-KMVltQfe.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { t as SliderInputElement } from "./slider-input-ByHdotzp.js";
 import { LedElement } from "./led.js";
-import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
+import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-BFRfn0ve.js";
 import { NotificationPillElement } from "./notifier.js";
 import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-CyMd_Bn1.js";
 import { PolarPad } from "./polar-pad.js";
@@ -64,7 +68,7 @@ import { RangeElement } from "./range.js";
 import { SelectHorizElement } from "./select-horiz.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
-import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-yXwS-uEI.js";
+import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-B_VxOHlo.js";
 import { SwipeElement } from "./swipe.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-BP1Ux2EV.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
@@ -1408,6 +1412,46 @@ __decorate([state()], SplitButton.prototype, "_loadingItems", void 0);
 __decorate([state()], SplitButton.prototype, "_menuHasItems", void 0);
 SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
+//#region src/common/view-state/bind.ts
+/** Whether `el` implements the view-state API. */
+function isViewStateful(el) {
+	return typeof el === `object` && el !== null && typeof el.getViewState === `function` && typeof el.setViewState === `function`;
+}
+/**
+* Wire a component's view state to storage the host controls. Loads and
+* applies once, then saves on every `view-state-change` and when the page is
+* hidden. Returns a function that stops saving.
+*
+* ```ts
+* const stop = bindViewState(tree, {
+*   load: () => JSON.parse(localStorage.getItem(`files`) ?? `null`),
+*   save: s => localStorage.setItem(`files`, JSON.stringify(s)),
+* });
+* ```
+*/
+function bindViewState(el, binding) {
+	let loaded;
+	try {
+		loaded = binding.load();
+	} catch (error) {
+		console.warn(`bindViewState: load failed`, error);
+	}
+	if (loaded) el.setViewState(loaded);
+	const onChange = (event) => {
+		const { detail } = event;
+		if (event.target !== el) return;
+		if (detail.reason === `restore` && !binding.saveOnRestore) return;
+		binding.save(detail.state);
+	};
+	const onHide = () => binding.save(el.getViewState());
+	el.addEventListener(VIEW_STATE_CHANGE, onChange);
+	globalThis.addEventListener?.(`pagehide`, onHide);
+	return () => {
+		el.removeEventListener(VIEW_STATE_CHANGE, onChange);
+		globalThis.removeEventListener?.(`pagehide`, onHide);
+	};
+}
+//#endregion
 //#region src/crumbs/crumb-path-controller.ts
 var CrumbPathController = class {
 	#element = null;
@@ -3515,6 +3559,46 @@ function findEmptiedStacks(before, after) {
 	return emptied;
 }
 //#endregion
+//#region src/dock/dock-view-state.ts
+/**
+* Pure helpers for `ixfx-dock-host` view state. The dock's layout is close to
+* structure, so the saved state is the layout tree itself; these helpers
+* validate what comes back from storage and filter out panels the host
+* doesn't hold.
+*/
+/** Loose structural check of a parsed {@link DockLayout} (from storage, so untrusted). */
+function isDockLayout(value) {
+	if (value === null || typeof value !== `object`) return false;
+	return isDockNode(value.root);
+}
+function isDockNode(value) {
+	if (value === null || typeof value !== `object`) return false;
+	const node = value;
+	if (node.kind === `stack`) return Array.isArray(node.panels) && node.panels.every((p) => typeof p === `string`) && typeof node.active === `string`;
+	if (node.kind === `split`) return (node.direction === `row` || node.direction === `column`) && Array.isArray(node.sizes) && node.sizes.every((n) => typeof n === `number`) && Array.isArray(node.children) && node.children.every(isDockNode);
+	return false;
+}
+/**
+* `layout` with every panel `isPresent` rejects removed (stacks that empty
+* out are dropped unless named, splits collapse as usual). Used for
+* `getViewState({ includePending: false })`.
+*/
+function withoutAbsentPanels(layout, isPresent) {
+	const root = serializeLayout(layout.root).root;
+	const visit = (node) => {
+		if (isStack(node)) {
+			node.panels = node.panels.filter(isPresent);
+			return;
+		}
+		node.children.forEach(visit);
+	};
+	visit(root);
+	return {
+		version: 1,
+		root: normalize(root)
+	};
+}
+//#endregion
 //#region src/tabs/tab-list-item.ts
 const resizeHandlers = /* @__PURE__ */ new WeakMap();
 const sharedResizeObserver = new ResizeObserver((entries) => {
@@ -4159,6 +4243,11 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._toolbarSlots = /* @__PURE__ */ new Set();
 		this._toolbarObserver = null;
 		this._panelObservers = /* @__PURE__ */ new Map();
+		this.#viewState = new ViewStateController(this, {
+			kind: `dock-host`,
+			capture: () => this.getViewState()
+		});
+		this.#layoutRestored = false;
 		this._onDragStart = (event) => {
 			if (event.composedPath().find((n) => n instanceof HTMLElement && n.tagName === `IXFX-DOCK-HOST`) !== this) return;
 			const { panelId, pointerId, clientX, clientY } = event.detail;
@@ -4191,6 +4280,10 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._onSplitWeightsChanged = () => {
 			this._foldLiveWeights();
 			this._scheduleJunctions();
+			this.#viewState.notify();
+		};
+		this._onInnerViewState = (event) => {
+			if (event.target === event.currentTarget) event.stopPropagation();
 		};
 		this._onSplitCollapsed = (event, collapsed) => {
 			const detail = event.detail;
@@ -4201,6 +4294,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			if (node === null || !isStack(node)) return;
 			if (collapsed) node.collapsed = true;
 			else delete node.collapsed;
+			this.#viewState.notify();
 		};
 		this._onSplitClose = (event) => {
 			event.preventDefault();
@@ -4223,6 +4317,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			if (stack === null || !isStack(stack)) return;
 			if (!setActive(stack, panelId)) return;
 			this.requestUpdate();
+			this.#viewState.notify();
 			this.dispatchEvent(new CustomEvent(`dock-panel-activated`, {
 				detail: { panelId },
 				bubbles: true,
@@ -4273,6 +4368,9 @@ let DockHostElement = class DockHostElement extends LitElement {
 			this._teardownTabDragListeners();
 		};
 	}
+	#viewState;
+	/** A layout was restored via `setViewState()`; it wins over the initial `layout` attribute. */
+	#layoutRestored;
 	connectedCallback() {
 		super.connectedCallback();
 		this._buildInitialModel();
@@ -4310,7 +4408,8 @@ let DockHostElement = class DockHostElement extends LitElement {
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		if (changed.has(`layout`) && this.layout !== null) {
+		const initial = !this.hasUpdated && this.#layoutRestored;
+		if (changed.has(`layout`) && this.layout !== null && !initial) {
 			const parsed = parseLayout(this.layout);
 			if (parsed) {
 				this._model = parsed.root;
@@ -4342,6 +4441,10 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._scheduleJunctions();
 	}
 	_buildInitialModel() {
+		if (this.#layoutRestored) {
+			this._mergePoolIntoModel();
+			return;
+		}
 		if (this.layout !== null) {
 			const parsed = parseLayout(this.layout);
 			if (parsed) {
@@ -4476,21 +4579,56 @@ let DockHostElement = class DockHostElement extends LitElement {
 		}
 		this._pool = current;
 		this.requestUpdate();
-		if (structuralChange) this._emitChange();
+		if (structuralChange) this._emitChange(`data`);
+	}
+	/**
+	* Snapshot the layout (live split weights folded in from the DOM). With
+	* `includePending` (default), panels the restored layout names but the
+	* host doesn't hold yet are kept in place; without it they are left out.
+	*/
+	getViewState(options) {
+		const layout = this._captureLayout();
+		const withPending = options?.includePending ?? true;
+		return this.#viewState.shape({ layout: withPending ? layout : withoutAbsentPanels(layout, (id) => this._findPanelEl(id) !== void 0) }, options);
+	}
+	/**
+	* Restore a layout. Panels it names that aren't in the host yet keep their
+	* place (shown as a placeholder tab) and slot in when they arrive — as a
+	* light-DOM child, or via `addPanel()` without a target. Pooled panels it
+	* doesn't name are appended to the first stack admitting their kind.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state) || state.layout === void 0) return;
+		if (!isDockLayout(state.layout)) {
+			console.warn(`[dock-host] ignoring view state with a malformed layout`);
+			return;
+		}
+		const layout = state.layout;
+		this.#viewState.restoring(() => {
+			this.#layoutRestored = true;
+			this._returnAllToolbars();
+			this._loadGeneration++;
+			this._model = normalize(cloneNode(layout.root));
+			this._mergePoolIntoModel();
+			this._liveStacks = snapshotNonEmptyStacks(this._model);
+			this.requestUpdate();
+			this._emitChange();
+		});
 	}
-	/** Serialize the current layout, folding live split weights from the DOM. */
-	saveLayout() {
+	/**
+	* Placeholders are part of the layout tree rather than a separate pending
+	* set, so there is nothing to clear here: remove a placeholder with
+	* `removePanel(id)`.
+	*/
+	clearPendingViewState() {}
+	/** The current layout, folding live split weights from the DOM. */
+	_captureLayout() {
 		this._foldLiveWeights();
 		return serializeLayout(this._model);
 	}
-	loadLayout(layout) {
-		this._returnAllToolbars();
-		this._loadGeneration++;
-		this._model = normalize(cloneNode(layout.root));
-		this._mergePoolIntoModel();
-		this._liveStacks = snapshotNonEmptyStacks(this._model);
-		this.requestUpdate();
-		this._emitChange();
+	/** Whether `panelId` is in the model only as a placeholder from a restored layout. */
+	_isPlaceholder(panelId) {
+		return !this._pool.some((p) => p.panelId === panelId) && collectPanelIds(this._model).includes(panelId);
 	}
 	/**
 	* Dock a panel. Returns false (without touching the DOM) when the
@@ -4537,11 +4675,12 @@ let DockHostElement = class DockHostElement extends LitElement {
 			if (panel.collapsible !== void 0) el.collapsible = panel.collapsible;
 			if (panel.kind !== void 0) el.kind = panel.kind;
 		}
+		const takesSavedPlace = target === void 0 && this._isPlaceholder(el.panelId);
 		if (el.parentElement !== this) this.appendChild(el);
 		if (!this._pool.some((p) => p.panelId === el.panelId)) this._pool = [...this._pool, el];
 		this._returnAllToolbars();
-		if (collectPanelIds(this._model).includes(el.panelId)) this._removeFromModel(el.panelId);
-		if (splitTarget !== null) insertBeside(this._model, splitTarget, opToDirection(op), createStack([el.panelId]), `after`);
+		if (!takesSavedPlace && collectPanelIds(this._model).includes(el.panelId)) this._removeFromModel(el.panelId);
+		if (takesSavedPlace) {} else if (splitTarget !== null) insertBeside(this._model, splitTarget, opToDirection(op), createStack([el.panelId]), `after`);
 		else if (stackPath !== null) {
 			const stack = findNode(this._model, stackPath);
 			if (stack !== null && isStack(stack)) addPanelToStack(stack, el.panelId, target?.index);
@@ -4582,6 +4721,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		if (stack === null || !isStack(stack)) return false;
 		if (!setActive(stack, panelId)) return false;
 		this.requestUpdate();
+		this.#viewState.notify();
 		this.dispatchEvent(new CustomEvent(`dock-panel-activated`, {
 			detail: { panelId },
 			bubbles: true,
@@ -4641,7 +4781,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 	* {@link setLeafPlacementPolicy}'s `allowEdgeSplit` (default `true`).
 	* Pass `[]` to seal the leaf (nothing admitted). Warns when no stack
 	* currently carries `name`, but the rule is still stored and applies once
-	* one appears. Rules are host policy: kept across `loadLayout()`, never
+	* one appears. Rules are host policy: kept across `setViewState()`, never
 	* serialized.
 	*/
 	setLeafExclusiveContents(name, kinds) {
@@ -4688,7 +4828,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 	* unconstrained* leaf — the policy is not propagated to it.
 	*
 	* Warns when no stack currently carries `name`; the policy is stored and
-	* applies once one appears. Host policy: kept across `loadLayout()`, never
+	* applies once one appears. Host policy: kept across `setViewState()`, never
 	* serialized.
 	*/
 	setLeafPlacementPolicy(name, policy) {
@@ -4837,7 +4977,8 @@ let DockHostElement = class DockHostElement extends LitElement {
 	* already docked here or its kind is refused by `acceptsKinds`.
 	*/
 	acceptExternalPanel(snapshot, at) {
-		if (collectPanelIds(this._model).includes(snapshot.panelId)) return null;
+		const placeholder = this._isPlaceholder(snapshot.panelId);
+		if (!placeholder && collectPanelIds(this._model).includes(snapshot.panelId)) return null;
 		if (this.acceptsKinds !== null && !this.acceptsKinds.includes(normalizeKind(snapshot.kind))) return null;
 		const el = document.createElement(`ixfx-dock-panel`);
 		el.panelId = snapshot.panelId;
@@ -4850,7 +4991,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		if (`contentHTML` in snapshot && snapshot.contentHTML) el.innerHTML = snapshot.contentHTML;
 		this._returnAllToolbars();
 		this._pool = [...this._pool, el];
-		this._appendPanelToFirstStack(el.panelId);
+		if (!placeholder) this._appendPanelToFirstStack(el.panelId);
 		this.appendChild(el);
 		normalize(this._model);
 		this.endExternalDrop();
@@ -5346,10 +5487,11 @@ let DockHostElement = class DockHostElement extends LitElement {
 			hostEmpty: now.size === 0
 		});
 	}
-	_emitChange() {
-		const layout = this.saveLayout();
+	_emitChange(reason = `user`) {
+		const layout = this._captureLayout();
 		this._announceEmptiedStacks();
 		this._emit(`dock-change`, { layout });
+		this.#viewState.notify(reason);
 	}
 	render() {
 		return html`
@@ -5385,6 +5527,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		return html`
       <ixfx-split-layout
         class="split"
+        forget-absent
         direction=${node.direction}
         size=${size === void 0 ? nothing : live(String(size))}
         style=${`--split-gutter-size: var(--dock-split-bar-size, 2px); --split-collapsed-size: var(--dock-collapsed-size, 40px)`}
@@ -5395,6 +5538,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         @ixfx-split-collapse=${(e) => this._onSplitCollapsed(e, true)}
         @ixfx-split-expand=${(e) => this._onSplitCollapsed(e, false)}
         @ixfx-split-close=${this._onSplitClose}
+        @view-state-change=${this._onInnerViewState}
       >
         ${node.children.map((child, i) => this._renderNode(child, [...path, i], node.sizes[i]))}
       </ixfx-split-layout>
@@ -6768,269 +6912,6 @@ function createGestureHandlers(host) {
 	};
 }
 //#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);
-      /* Beside the node, never over it, with the dot level with the popover's middle. */
-      transform: translate(14px, -50%);
-    }
-
-    .child-preview.left {
-      transform: translate(calc(-100% - 14px), -50%);
-    }
-
-    .child-preview.below {
-      transform: translate(-50%, 14px);
-    }
-
-    .child-preview.above {
-      transform: translate(-50%, calc(-100% - 14px));
-    }
-
-    .child-preview-title {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 2px 6px 4px;
-      font-weight: 600;
-    }
-
-    .child-preview-title span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .child-preview button.child-preview-up {
-      display: inline-flex;
-      flex: none;
-      width: auto;
-      padding: 2px;
-    }
-
-    .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`;
 /**
@@ -7445,6 +7326,564 @@ function computeHyperbolicLayout(root, options = {}) {
 	};
 }
 //#endregion
+//#region src/hyperbolic-tree/hyperbolic-view-state.ts
+function indexHyperbolicKeys(root) {
+	const byKey = /* @__PURE__ */ new Map();
+	const nodes = /* @__PURE__ */ new Set();
+	const walk = (node) => {
+		nodes.add(node);
+		if (!byKey.has(node.item.key)) byKey.set(node.item.key, node);
+		for (const child of node.children ?? []) walk(child);
+	};
+	if (root) walk(root);
+	return {
+		byKey,
+		nodes
+	};
+}
+/** Key path from the root's children to the node with layout id `id`. */
+function centerPathOf(root, id) {
+	if (id === void 0) return [];
+	return findHyperbolicPathById(root, id)?.slice(1).map((n) => n.item.key) ?? [];
+}
+/** Walk `path` from the root, matching each step by key among the loaded children. */
+function resolveCenterPath(root, path) {
+	if (!root) return { kind: `missing` };
+	let node = root;
+	let id = root.item.key;
+	for (const [depth, key] of path.entries()) {
+		const children = node.children;
+		if (children === void 0) return node.item.isLeaf === true ? { kind: `missing` } : {
+			kind: `load`,
+			node,
+			depth
+		};
+		const index = children.findIndex((c) => c.item.key === key);
+		if (index < 0) return { kind: `missing` };
+		id = hyperbolicChildIds(id, children)[index];
+		node = children[index];
+	}
+	return {
+		kind: `found`,
+		id: path.length === 0 ? void 0 : id
+	};
+}
+/**
+* As `reconcileSelection` in `tree/tree-view-state.ts`, but a selected node
+* still in the tree is kept by identity — keys may repeat here, so re-keying
+* it would jump the selection to the first node sharing its key on every
+* lazy load. Only nodes that left the tree are re-keyed (or go pending).
+*/
+function reconcileHyperbolicSelection(selected, pending, index, canSelect, single) {
+	if (selected.size === 0 && pending.size === 0) return {
+		selected,
+		pending,
+		restored: false,
+		changed: false
+	};
+	const next = /* @__PURE__ */ new Set();
+	const nextPending = /* @__PURE__ */ new Set();
+	let changed = false;
+	for (const node of selected) {
+		if (index.nodes.has(node)) {
+			next.add(node);
+			continue;
+		}
+		changed = true;
+		const current = index.byKey.get(node.item.key);
+		if (current) next.add(current);
+		else nextPending.add(node.item.key);
+	}
+	let restored;
+	for (const key of pending) {
+		const node = index.byKey.get(key);
+		if (node && canSelect(node)) {
+			next.add(node);
+			restored = node;
+			changed = true;
+		} else nextPending.add(key);
+	}
+	if (!changed) return {
+		selected,
+		pending,
+		restored: false,
+		changed: false
+	};
+	if (single && next.size > 0) return {
+		selected: /* @__PURE__ */ new Set([restored ?? [...next].at(-1)]),
+		pending: EMPTY_KEYS,
+		restored: restored !== void 0,
+		changed: true
+	};
+	return {
+		selected: next,
+		pending: capKeys(nextPending),
+		restored: restored !== void 0,
+		changed: true
+	};
+}
+/**
+* Centre: a live centre whose path no longer resolves goes pending (the view
+* falls back to the root); one that resolves to a new id is re-seated; a
+* pending path that now resolves is applied.
+*/
+function reconcileHyperbolicViewState(input) {
+	const { root } = input;
+	let center;
+	let pendingCenter = input.pendingCenter;
+	if (input.focusId !== void 0) {
+		const live = resolveCenterPath(root, input.centerPath);
+		if (live.kind !== `found` || live.id === void 0) {
+			pendingCenter ??= input.centerPath;
+			center = {
+				id: void 0,
+				path: [],
+				restored: false
+			};
+		} else if (live.id !== input.focusId) center = {
+			id: live.id,
+			path: input.centerPath,
+			restored: false
+		};
+	}
+	if (pendingCenter) {
+		const resolved = resolveCenterPath(root, pendingCenter);
+		if (resolved.kind === `found`) {
+			center = {
+				id: resolved.id,
+				path: pendingCenter,
+				restored: true
+			};
+			pendingCenter = void 0;
+		}
+	}
+	const selection = reconcileHyperbolicSelection(input.selected, input.pendingSelected, input.index, input.canSelect, input.singleSelect);
+	return {
+		center,
+		pendingCenter,
+		selection
+	};
+}
+/** Sanitise a JSON zoom: a finite positive number, else `undefined`. */
+function zoomFromJson(value) {
+	return typeof value === `number` && Number.isFinite(value) && value > 0 ? value : void 0;
+}
+//#endregion
+//#region src/hyperbolic-tree/hyperbolic-view-state-binding.ts
+function createHyperbolicViewState(host) {
+	const { controller } = host;
+	/** Key path of the centre as last seen — what goes pending if it leaves the tree. */
+	let centerPath = [];
+	let pendingCenter;
+	let pendingSelected = EMPTY_KEYS;
+	let pendingFocus;
+	/** Where keyboard / search navigation last put the cursor. */
+	let keyboardCursor;
+	let structureVersion = 0;
+	let reconciledVersion = -1;
+	let cache;
+	const index = () => {
+		if (cache?.version !== structureVersion) cache = {
+			version: structureVersion,
+			index: indexHyperbolicKeys(host.root())
+		};
+		return cache.index;
+	};
+	/** Key of the keyboard cursor, while the cursor is still where the keyboard put it. */
+	const cursorKey = () => keyboardCursor && keyboardCursor.id === host.tickled() ? keyboardCursor.key : void 0;
+	const applyCenter = (id, path, restored) => {
+		centerPath = path;
+		if (host.focusId() === id) return;
+		host.setCenter(id, restored);
+		controller.notify();
+	};
+	const reconcileTickled = (idx) => {
+		const tickled = host.tickled();
+		const alive = tickled !== void 0 && findHyperbolicPathById(host.root(), tickled) !== void 0;
+		const cursor = reconcileCursor(cursorKey(), pendingFocus, (key) => alive && idx.byKey.has(key), (key) => host.visibleIdOf(key) !== void 0);
+		pendingFocus = cursor.pending;
+		if (cursor.clear || tickled !== void 0 && !alive) host.setTickled(void 0);
+		const id = cursor.apply === void 0 ? void 0 : host.visibleIdOf(cursor.apply);
+		if (cursor.apply !== void 0 && id !== void 0) {
+			host.setTickled(id);
+			keyboardCursor = {
+				id,
+				key: cursor.apply
+			};
+			controller.notify();
+		}
+	};
+	/** Move state for missing keys to pending; apply pending state for keys now loaded. */
+	const reconcile = () => {
+		reconciledVersion = structureVersion;
+		const root = host.root();
+		if (!root) return;
+		const idx = index();
+		controller.restoring(() => {
+			const r = reconcileHyperbolicViewState({
+				root,
+				index: idx,
+				focusId: host.focusId(),
+				centerPath,
+				pendingCenter,
+				selected: host.selected(),
+				pendingSelected,
+				canSelect: host.canSelect,
+				singleSelect: host.singleSelect()
+			});
+			pendingCenter = r.pendingCenter;
+			if (r.center) applyCenter(r.center.id, r.center.path, r.center.restored);
+			const sel = r.selection;
+			if (sel.changed) {
+				pendingSelected = sel.pending;
+				const primary = host.selectedNode();
+				host.setSelection(sel.selected, primary && sel.selected.has(primary) ? primary : [...sel.selected].at(-1), sel.restored);
+			}
+			reconcileTickled(idx);
+		});
+	};
+	return {
+		/** The structure changed (new root / model, invalidation, lazy load). */
+		invalidate() {
+			structureVersion++;
+		},
+		/** Run in `willUpdate`. `centerGone` — the centre vanished through in-place mutation. */
+		reconcileIfNeeded(centerGone) {
+			if (centerGone) structureVersion++;
+			if (reconciledVersion !== structureVersion) reconcile();
+		},
+		/** An explicit centre change: supersedes a saved one still waiting. */
+		centred(id) {
+			pendingCenter = void 0;
+			centerPath = centerPathOf(host.root(), id);
+			controller.notify();
+		},
+		/** Selection changed — explicit changes supersede a saved selection still waiting. */
+		selectionChanged() {
+			if (!controller.isRestoring) pendingSelected = EMPTY_KEYS;
+			controller.notify();
+		},
+		clearPendingSelection() {
+			pendingSelected = EMPTY_KEYS;
+		},
+		/** The cursor moved by keyboard / search navigation. */
+		keyboardCursorMoved(id, key) {
+			keyboardCursor = {
+				id,
+				key
+			};
+			pendingFocus = void 0;
+			controller.notify();
+		},
+		/** A user-visible change with no pending facet (e.g. a zoom gesture). */
+		notify() {
+			controller.notify();
+		},
+		get(options) {
+			const withPending = options?.includePending ?? true;
+			return controller.shape({
+				selected: keysToArray([...host.selected()].map((n) => n.item.key), withPending ? pendingSelected : []),
+				focus: cursorKey() ?? (withPending ? pendingFocus : void 0),
+				center: [...(withPending ? pendingCenter : void 0) ?? centerPath],
+				zoom: host.zoom()
+			}, options);
+		},
+		set(state) {
+			if (!controller.accepts(state)) return;
+			controller.restoring(() => {
+				if (state.selected) {
+					pendingSelected = capKeys(new Set(state.selected));
+					if (host.selected().size > 0) host.setSelection(/* @__PURE__ */ new Set(), void 0, true);
+				}
+				if (state.focus !== void 0) pendingFocus = state.focus;
+				const zoom = zoomFromJson(state.zoom);
+				if (zoom !== void 0 && zoom !== host.zoom()) {
+					host.setZoom(zoom);
+					controller.notify();
+				}
+				const center = pathFromJson(state.center);
+				if (center) pendingCenter = center;
+				reconcile();
+				if (center && pendingCenter) applyCenter(void 0, [], true);
+			});
+		},
+		clearPending() {
+			pendingSelected = EMPTY_KEYS;
+			pendingFocus = void 0;
+			pendingCenter = void 0;
+		},
+		/** Load the next unloaded ancestor on a pending centre path (one load at a time). */
+		continueRestoreLoads() {
+			if (!pendingCenter || !host.restoreLoads()) return;
+			const resolved = resolveCenterPath(host.root(), pendingCenter);
+			if (resolved.kind === `load`) host.load(resolved.node, resolved.depth);
+		}
+	};
+}
+//#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);
+      /* Beside the node, never over it, with the dot level with the popover's middle. */
+      transform: translate(14px, -50%);
+    }
+
+    .child-preview.left {
+      transform: translate(calc(-100% - 14px), -50%);
+    }
+
+    .child-preview.below {
+      transform: translate(-50%, 14px);
+    }
+
+    .child-preview.above {
+      transform: translate(-50%, calc(-100% - 14px));
+    }
+
+    .child-preview-title {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px 4px;
+      font-weight: 600;
+    }
+
+    .child-preview-title span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .child-preview button.child-preview-up {
+      display: inline-flex;
+      flex: none;
+      width: auto;
+      padding: 2px;
+    }
+
+    .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/keyboard.ts
 const unhandled = {
 	action: { kind: `none` },
@@ -7543,6 +7982,11 @@ function createLazyChildLoader(source, onChange) {
 			if (!model && !loadChildren) return;
 			for (const { node, depth } of visible) if (node.children === void 0 && !pending.has(node)) load(node, depth);
 		},
+		/** Start loading `node`'s children unless loaded or already loading (view-state restore). */
+		loadOne(node, depth) {
+			const { model, loadChildren } = source();
+			if ((model || loadChildren) && node.children === void 0 && !pending.has(node)) load(node, depth);
+		},
 		isPending: (node) => pending.has(node),
 		abortAll() {
 			for (const aborter of aborters.values()) aborter.abort();
@@ -8063,6 +8507,35 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
 		this._focusId = void 0;
+		this.restoreLoads = true;
+		this.#viewState = createHyperbolicViewState({
+			controller: new ViewStateController(this, {
+				kind: `hyperbolictree-list`,
+				capture: () => this.getViewState()
+			}),
+			root: () => this.#effectiveRoot,
+			focusId: () => this._focusId,
+			setCenter: (id, restored) => this.#restoreCenter(id, restored),
+			selected: () => this._selectedNodes,
+			selectedNode: () => this.selectedNode,
+			canSelect: (node) => this.#canSelect(node),
+			singleSelect: () => this.interactionMode === `implicit`,
+			setSelection: (next, primary, fire) => {
+				const prev = this._selectedNodes;
+				this._selectedNodes = new Set(next);
+				this.selectedNode = primary;
+				if (fire) this.#dispatchSelect(prev);
+			},
+			tickled: () => this.tickled.tickledId,
+			setTickled: (id) => id === void 0 ? this.tickled.clearTickled() : this.tickled.setTickled(id),
+			visibleIdOf: (key) => this.#layout().nodes.find((n) => n.key === key)?.id,
+			zoom: () => this.zoom,
+			setZoom: (zoom) => {
+				this.zoom = zoom;
+			},
+			restoreLoads: () => this.restoreLoads,
+			load: (node, depth) => this.#lazy.loadOne(node, depth)
+		});
 		this._viewOverride = void 0;
 		this._focusRotation = 0;
 		this._zoomOffset = {
@@ -8084,7 +8557,10 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.#lazy = createLazyChildLoader(() => ({
 			model: this.model,
 			loadChildren: this.loadChildren
-		}), () => this.requestUpdate());
+		}), () => {
+			this.#viewState.invalidate();
+			this.requestUpdate();
+		});
 		this.#lastLabelIds = /* @__PURE__ */ new Set();
 		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
 			labelSelector: `.hyperbolictree-label`,
@@ -8131,6 +8607,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 			},
 			zoomState: () => this.#zoomState(),
 			setZoomState: (state) => {
+				if (state.zoom !== this.zoom) this.#viewState.notify();
 				this.zoom = state.zoom;
 				this._zoomOffset = state.offset;
 			},
@@ -8153,6 +8630,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		if (this._focusId === void 0) return this.#effectiveRoot;
 		return findHyperbolicPathById(this.#effectiveRoot, this._focusId)?.at(-1) ?? this.#effectiveRoot;
 	}
+	#viewState;
 	#preview;
 	#lazy;
 	/** Labels shown in the last render — what the child preview judges legibility by. */
@@ -8260,46 +8738,30 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
 	}
+	willUpdate(changedProps) {
+		if (changedProps.has(`root`) && this.root || changedProps.has(`model`)) this.#onDataReset();
+		this.#viewState.reconcileIfNeeded(this._focusId !== void 0 && !findHyperbolicPathById(this.#effectiveRoot, this._focusId));
+	}
 	updated(changedProps) {
-		if (changedProps.has(`root`) && this.root) this.#resetViewState();
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
 			this.#modelUnsubscribe = void 0;
-			if (this.model) {
-				this.#modelUnsubscribe = this.model._subscribe((event) => {
-					if (event.type === `root`) {
-						this.#resetViewState();
-						this.requestUpdate();
-					} else if (event.type === `invalidate`) this.requestUpdate();
-				});
-				this.#resetViewState();
-			}
+			if (this.model) this.#modelUnsubscribe = this.model._subscribe((event) => {
+				if (event.type === `root`) this.#onDataReset();
+				else if (event.type === `invalidate`) this.#viewState.invalidate();
+				this.requestUpdate();
+			});
 		}
-		if (changedProps.has(`interactionMode`)) this.clearSelection();
+		if (changedProps.has(`interactionMode`) && changedProps.get(`interactionMode`) !== void 0) this.clearSelection();
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
-		if (this._focusId !== void 0 && !findHyperbolicPathById(this.#effectiveRoot, this._focusId)) {
-			this._focusId = void 0;
-			this._viewOverride = void 0;
-			this._focusRotation = 0;
-		}
 		this.#lazy.ensure(this.#layout().nodes);
+		this.#viewState.continueRestoreLoads();
 	}
-	#resetViewState() {
-		this.#clearSelectionInternal();
-		this.tickled.clearTickled();
-		this._focusId = void 0;
-		this._viewOverride = void 0;
-		this._focusRotation = 0;
-		this._zoomOffset = {
-			x: 0,
-			y: 0
-		};
+	/** New `root` / `model`: drop transient state; keyed view state is reconciled, not reset. */
+	#onDataReset() {
 		this._previewId = void 0;
 		this.#gestures.cancel();
-		if (this.#animFrame !== void 0) {
-			cancelAnimationFrame(this.#animFrame);
-			this.#animFrame = void 0;
-		}
+		this.#viewState.invalidate();
 	}
 	#canSelect(node) {
 		if (this.selectionFilter === `none`) return false;
@@ -8312,6 +8774,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.selectedNode = void 0;
 	}
 	#dispatchSelect(previous) {
+		this.#viewState.selectionChanged();
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
 				selected: new Set(this._selectedNodes),
@@ -8339,6 +8802,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		this.requestUpdate();
 	}
 	clearSelection() {
+		this.#viewState.clearPendingSelection();
 		if (this._selectedNodes.size === 0) return;
 		const prev = new Set(this._selectedNodes);
 		this.#clearSelectionInternal();
@@ -8384,6 +8848,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		const previousNode = currentId === void 0 ? void 0 : findHyperbolicPathById(root, currentId)?.at(-1);
 		const fromView = this.#viewFromFrameOf(targetId, currentId);
 		this._focusId = targetId;
+		this.#viewState.centred(targetId);
 		this.#gestures.cancel();
 		this._previewId = void 0;
 		this.#animateTo(fromView);
@@ -8452,7 +8917,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	#focusAndMaybeSelect(node) {
 		this.focusOn(node);
 		const id = this.#idOf(node);
-		if (id !== void 0) this.tickled.setTickled(id);
+		if (id !== void 0) this.#setKeyboardCursor(id, node);
 		if (this.interactionMode === `implicit`) this.select(node);
 	}
 	/** Focus + select the node at `keys` (path from the root's children). Returns `true` if found. */
@@ -8490,10 +8955,15 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		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.#setKeyboardCursor(id, node);
 		this.requestUpdate();
 		return true;
 	}
+	/** Move the cursor as keyboard / search navigation does — recorded as `focus` in the view state. */
+	#setKeyboardCursor(id, node) {
+		this.tickled.setTickled(id);
+		this.#viewState.keyboardCursorMoved(id, node.item.key);
+	}
 	/**
 	* All nodes currently laid out on the disk (within `maxRadius` of the
 	* focus), in render (ring-major) order. Unlike `ixfx-icicletree-list`, the
@@ -8506,6 +8976,49 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 			depth: n.depth
 		}));
 	}
+	/**
+	* Snapshot selection, centred node, keyboard cursor and zoom as plain JSON,
+	* keyed by `item.key`. Includes pending state for keys not currently loaded.
+	*/
+	getViewState(options) {
+		return this.#viewState.get(options);
+	}
+	/**
+	* Apply saved view state. Fields present replace the current ones; keys
+	* that aren't loaded yet are applied as they appear — a deep `center` loads
+	* its ancestors via `loadChildren` / `model` when `restoreLoads`.
+	*/
+	setViewState(state) {
+		this.#viewState.set(state);
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#viewState.clearPending();
+	}
+	/** Centre set by view-state reconcile: snaps (no animation); `restored` fires `focus`. */
+	#restoreCenter(id, restored) {
+		const previous = this.focusedNode;
+		this.#cancelAnimation();
+		this._focusId = id;
+		this._viewOverride = void 0;
+		this._zoomOffset = {
+			x: 0,
+			y: 0
+		};
+		if (!restored) {
+			this._focusRotation = 0;
+			return;
+		}
+		const node = this.focusedNode;
+		if (node) this.dispatchEvent(new CustomEvent(`focus`, {
+			detail: {
+				node,
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#matchesFilter(node, depth) {
 		if (!this.filterPredicate) return true;
 		if (this.filterPredicate(node, depth)) return true;
@@ -8791,6 +9304,7 @@ __decorate([property({
 	reflect: true
 })], HyperbolicTreeListElement.prototype, "searchModes", void 0);
 __decorate([state()], HyperbolicTreeListElement.prototype, "_focusId", void 0);
+__decorate([property({ attribute: false })], HyperbolicTreeListElement.prototype, "restoreLoads", void 0);
 __decorate([state()], HyperbolicTreeListElement.prototype, "_viewOverride", void 0);
 __decorate([state()], HyperbolicTreeListElement.prototype, "_focusRotation", void 0);
 __decorate([state()], HyperbolicTreeListElement.prototype, "_zoomOffset", void 0);
@@ -8825,6 +9339,30 @@ function findIciclePath(root, key) {
 	}
 }
 /**
+* Follow `keys` from `root`; a leading key equal to the root's own key
+* matches the root itself. Returns `undefined` when a key isn't found.
+*/
+function resolveIcicleKeyPath(root, keys) {
+	let current = root;
+	for (const key of keys) {
+		const found = key === current?.item.key ? current : current?.children?.find((n) => n.item.key === key);
+		if (!found) return void 0;
+		current = found;
+	}
+	return current;
+}
+/** Key path (depth-first) to the first node among `nodes` matching `predicate`. */
+function findIcicleKeyPath(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 = findIcicleKeyPath(node.children, predicate, path);
+			if (hit) return hit;
+		}
+	}
+}
+/**
 * Compute the visible rectangles for an icicle view.
 *
 * Bands start at the zoom node's **children** (the zoom node itself is shown in
@@ -8878,6 +9416,259 @@ function computeIcicleLayout(root, options = {}) {
 	return rects;
 }
 //#endregion
+//#region src/icicle-tree/icicle-view-state.ts
+/**
+* - `found` — every key matched: `nodes[i]` is the node for `keys[i]`.
+* - `load` — `node` (at `depth`; root's children are `0`) must load its
+*   children before the path can continue.
+* - `missing` — a key isn't there (yet), or the next step can't load.
+*/
+/** First node (depth-first) for each key in the loaded tree. */
+function indexNodesByKey(root) {
+	const out = /* @__PURE__ */ new Map();
+	const visit = (node) => {
+		if (!out.has(node.item.key)) out.set(node.item.key, node);
+		for (const child of node.children ?? []) visit(child);
+	};
+	if (root) visit(root);
+	return out;
+}
+/**
+* Nodes along a pending zoom path (`[]` = full tree), or `undefined` while it
+* can't resolve. Keys are unique tree-wide, so a zoom node that has moved is
+* still found by its key.
+*/
+function resolveZoomPath$1(root, path, nodeByKey) {
+	const found = resolveKeyPath(root, path, () => false);
+	if (found.status === `found`) return found.nodes;
+	const key = path.at(-1);
+	return key !== void 0 && nodeByKey(key) ? findIciclePath(root, key)?.slice(1) : void 0;
+}
+/** Pixel scroll of a scrolling host. Rects aren't a linear list, so there's no anchor. */
+function captureHostScroll(el) {
+	return el.scrollLeft === 0 ? { top: el.scrollTop } : {
+		top: el.scrollTop,
+		left: el.scrollLeft
+	};
+}
+/** Returns `true` once the saved position is fully reached (else retry after the next render). */
+function applyHostScroll(el, scroll) {
+	const top = scrollToOffset(el, scroll.top);
+	const left = scroll.left === void 0 || scrollToOffset(el, scroll.left, `horizontal`);
+	return top && left;
+}
+//#endregion
+//#region src/icicle-tree/keyboard.ts
+/**
+* Rect the cursor moves to for `key`, or `undefined` when the key isn't a
+* navigation key or there's nowhere to go. With no current rect, any
+* navigation key lands on the first rect.
+*/
+function icicleKeyTarget(rects, current, key) {
+	if (rects.length === 0) return void 0;
+	if (key === `Home`) return rects[0];
+	if (key === `End`) return rects.at(-1);
+	if (![
+		`ArrowLeft`,
+		`ArrowRight`,
+		`ArrowUp`,
+		`ArrowDown`
+	].includes(key)) return void 0;
+	if (!current) return rects[0];
+	switch (key) {
+		case `ArrowLeft`:
+		case `ArrowRight`: {
+			const dir = key === `ArrowRight` ? 1 : -1;
+			const siblings = rects.filter((r) => r.relativeDepth === current.relativeDepth && r.parentKey === current.parentKey);
+			return siblings[siblings.findIndex((r) => r.node.item.key === current.node.item.key) + dir] ?? (dir > 0 ? siblings[0] : siblings.at(-1));
+		}
+		case `ArrowUp`: return (current.parentKey === void 0 ? void 0 : rects.find((r) => r.node.item.key === current.parentKey)) ?? rects[0];
+		default: return rects.find((r) => r.parentKey === current.node.item.key);
+	}
+}
+//#endregion
+//#region src/icicle-tree/styles.ts
+/** Shadow-DOM styles for `ixfx-icicletree-list`. */
+const icicleTreeStyles = css`
+  :host {
+    --icicletree-band-height: 44px;
+    --icicletree-band-gap: 2px;
+    --icicletree-rect-gap: 2px;
+    --icicletree-rect-bg: var(--surface-4);
+    --icicletree-rect-text: var(--surface-4-text);
+    --icicletree-font-size: var(--text-s);
+
+    display: block;
+    overflow: auto;
+  }
+
+  .icicle {
+    display: flex;
+    gap: var(--icicletree-band-gap);
+    outline: none;
+  }
+
+  .icicle.horizontal {
+    flex-direction: column;
+  }
+
+  .icicle.vertical {
+    flex-direction: row;
+    min-height: 200px;
+  }
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    padding: var(--space-xs) var(--space-s);
+    background: var(--surface-3);
+    color: var(--surface-3-text);
+    border: var(--border-subtle);
+    border-radius: var(--radius-m);
+    font-size: var(--text-s);
+    flex-shrink: 0;
+  }
+
+  .breadcrumb ixfx-crumb-navigation {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .band {
+    position: relative;
+  }
+
+  .icicle.horizontal .band {
+    height: var(--icicletree-band-height);
+  }
+
+  .icicle.vertical .band {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .rect {
+    box-sizing: border-box;
+    position: absolute;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-s);
+    background: var(--icicletree-rect-bg);
+    color: var(--icicletree-rect-text);
+    font-size: var(--icicletree-font-size);
+    cursor: pointer;
+    transition:
+      width var(--transition),
+      height var(--transition),
+      left var(--transition),
+      top var(--transition),
+      opacity var(--transition),
+      background-color var(--transition);
+  }
+
+  .icicle.horizontal .rect {
+    top: 0;
+    height: 100%;
+  }
+
+  /*
+   * A rotated label needs its full allotted width to be usable — the
+   * default left/right padding (--space-s, ~4px a side) can consume
+   * most or all of a rect sized down to minVerticalLabelWidth, leaving
+   * the rotated text clipped to invisible. #labelMode's width estimate
+   * assumes the whole rect width is usable, so drop the padding here to
+   * match that assumption instead of also budgeting for it in the
+   * threshold (which would make already-narrow rects need even more).
+   */
+  .icicle.horizontal .rect.rotated {
+    padding: 0;
+  }
+
+  .icicle.vertical .rect {
+    left: 0;
+    width: 100%;
+    padding: var(--space-s) 0;
+    justify-content: center;
+    writing-mode: horizontal-tb;
+  }
+
+  .rect.filtered {
+    opacity: 0.3;
+    filter: saturate(0.4);
+  }
+
+  .rect.empty {
+    padding: 0;
+    border: none;
+  }
+
+  .rect.loading {
+    cursor: progress;
+    opacity: 0.6;
+  }
+
+  .icicle-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .icicle-label.hide-label {
+    visibility: hidden;
+  }
+
+  .icicle-label.label-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    flex: none;
+    width: 100%;
+    height: 100%;
+    padding: var(--space-2xs, 2px) 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /*
+   * Instant tooltip for rects whose label is rotated or hidden — anchored
+   * via CSS anchor positioning (anchor-name set on the tickled rect in
+   * #renderRect) rather than a JS-computed position, and shown/hidden via
+   * the Popover API rather than the browser's own (slow, un-stylable)
+   * title tooltip.
+   */
+  .icicle-tooltip {
+    position: fixed;
+    position-anchor: --icicle-rect-anchor;
+    position-area: bottom center;
+    position-try-fallbacks: top center;
+    margin: var(--space-xs, 4px) 0 0;
+    padding: var(--space-2xs, 2px) var(--space-xs, 6px);
+    background: var(--surface-5);
+    color: var(--surface-5-text);
+    border: var(--border-subtle);
+    border-radius: var(--radius-s, 4px);
+    font-size: var(--text-s);
+    white-space: nowrap;
+    pointer-events: none;
+    inset: auto;
+  }
+
+  .icicle-tooltip:popover-open {
+    display: block;
+  }
+
+  .empty-state {
+    padding: var(--space-l);
+    color: var(--surface-muted-text);
+    font-size: var(--text-s);
+  }
+`;
+//#endregion
 //#region src/icicle-tree/icicletree-list.ts
 let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 	constructor(..._args) {
@@ -8895,6 +9686,14 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
 		this._zoomKey = void 0;
+		this.restoreLoads = true;
+		this.#viewState = new ViewStateController(this, {
+			kind: `icicletree-list`,
+			capture: () => this.getViewState()
+		});
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#keyboardCursor = false;
+		this.#zoomPath = [];
 		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
 			labelSelector: `.icicle-label`,
 			highlightKey: `incr-search-highlight`
@@ -8923,6 +9722,9 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		});
 		this.#pendingKeys = /* @__PURE__ */ new Set();
 		this.#aborters = /* @__PURE__ */ new Map();
+		this.#onScroll = () => {
+			if (!this.#viewState.pendingScroll) this.#viewState.notify();
+		};
 	}
 	static {
 		this.shadowRootOptions = {
@@ -8938,6 +9740,16 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		if (this._zoomKey === void 0) return void 0;
 		return findIcicleNode(this.#effectiveRoot, this._zoomKey);
 	}
+	#viewState;
+	/** Saved selection for keys not (yet) loaded. */
+	#pendingSelected;
+	/** Saved zoom path not (yet) resolvable. */
+	#pendingZoom;
+	#pendingFocus;
+	/** Whether the cursor was last placed by the keyboard (only then is it `focus`). */
+	#keyboardCursor;
+	/** Last known key path of the zoom node, so it can go pending when the node leaves. */
+	#zoomPath;
 	#modelUnsubscribe;
 	#pendingKeys;
 	#aborters;
@@ -8974,6 +9786,8 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		});
 		this.registry = registry;
 		this.#syncSearchCommands();
+		this.#viewState.observeScrollTarget(this);
+		this.addEventListener(`scroll`, this.#onScroll, { passive: true });
 		if (typeof ResizeObserver !== `undefined`) {
 			this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
 			this.#resizeObserver.observe(this);
@@ -8986,6 +9800,7 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		for (const aborter of this.#aborters.values()) aborter.abort();
 		this.#aborters.clear();
 		this.#pendingKeys.clear();
+		this.removeEventListener(`scroll`, this.#onScroll);
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		if (this.#ownedRegistry) {
@@ -9007,28 +9822,23 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
 	}
-	updated(changedProps) {
-		if (changedProps.has(`root`) && this.root) this.#resetViewState();
-		if (changedProps.has(`model`)) {
-			this.#modelUnsubscribe?.();
-			this.#modelUnsubscribe = void 0;
-			if (this.model) {
-				this.#modelUnsubscribe = this.model._subscribe((event) => {
-					if (event.type === `root`) {
-						this.#resetViewState();
-						this.requestUpdate();
-					} else if (event.type === `invalidate`) this.requestUpdate();
-				});
-				this.#resetViewState();
-			}
-		}
-		if (changedProps.has(`interactionMode`)) {
+	willUpdate(changedProps) {
+		if (changedProps.has(`root`) || changedProps.has(`model`)) this.#anchorIndex = void 0;
+		if (changedProps.has(`interactionMode`) && changedProps.get(`interactionMode`) !== void 0) {
 			this.#anchorIndex = void 0;
 			this.clearSelection();
 		}
+		this.#reconcileViewState();
+	}
+	updated(changedProps) {
+		if (changedProps.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = this.model?._subscribe(() => this.requestUpdate());
+		}
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
-		if (this._zoomKey !== void 0 && !findIcicleNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
 		this.#ensureVisibleChildren();
+		this.#continueRestoreLoads();
+		this.#viewState.applyPendingScroll((scroll) => applyHostScroll(this, scroll));
 		this.#syncTooltip();
 	}
 	/** The host's own (viewport) extent — width in horizontal orientation, height in vertical. */
@@ -9078,12 +9888,103 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 			popover.hidePopover();
 		} catch {}
 	}
-	#resetViewState() {
-		this.#clearSelectionInternal();
-		this.tickled.clearTickled();
-		this._zoomKey = void 0;
-		this.#anchorIndex = void 0;
+	/**
+	* Snapshot selection, zoom path, keyboard cursor and scroll as plain JSON,
+	* keyed by `item.key`. Includes pending state for keys not currently loaded.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const focus = this.#keyboardCursor ? this.tickled.tickledId : void 0;
+		return this.#viewState.shape({
+			selected: keysToArray([...this._selectedNodes].map((n) => n.item.key), withPending ? this.#pendingSelected : []),
+			zoom: (withPending ? this.#pendingZoom : void 0) ?? (this._zoomKey === void 0 ? [] : [...this.#zoomPath]),
+			focus: focus ?? (withPending ? this.#pendingFocus : void 0),
+			scroll: (withPending ? this.#viewState.pendingScroll : void 0) ?? (this.isConnected ? captureHostScroll(this) : void 0)
+		}, options);
+	}
+	/**
+	* Apply saved view state. Fields present replace the current ones; keys
+	* that aren't loaded yet are applied as they appear — including via
+	* `loadChildren` / `model` down a saved zoom path when `restoreLoads`.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state)) return;
+		this.#viewState.restoring(() => {
+			if (state.selected) {
+				this.#pendingSelected = capKeys(new Set(state.selected));
+				if (this._selectedNodes.size > 0) {
+					const prev = new Set(this._selectedNodes);
+					this.#clearSelectionInternal();
+					this.#dispatchSelect(prev);
+				}
+			}
+			if (state.zoom) this.#pendingZoom = [...state.zoom];
+			if (state.focus !== void 0) this.#pendingFocus = state.focus;
+			if (state.scroll) this.#viewState.pendingScroll = state.scroll;
+			this.#reconcileViewState();
+			if (this.#pendingZoom !== void 0) this.zoomOut();
+		});
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#pendingZoom = void 0;
+		this.#pendingFocus = void 0;
+		this.#viewState.pendingScroll = void 0;
+	}
+	/** Move state for missing keys to pending; apply pending state for keys now loaded. */
+	#reconcileViewState() {
+		if (this._selectedNodes.size === 0 && this.#pendingSelected.size === 0 && this._zoomKey === void 0 && this.#pendingZoom === void 0 && this.tickled.tickledId === void 0 && this.#pendingFocus === void 0) return;
+		const root = this.#effectiveRoot;
+		let index;
+		const nodeByKey = (key) => (index ??= indexNodesByKey(root)).get(key);
+		this.#viewState.restoring(() => {
+			this.#reconcileZoom(root, nodeByKey);
+			const sel = reconcileSelection$1(this._selectedNodes, this.#pendingSelected, nodeByKey, (node) => this.#canSelect(node), this.interactionMode === `implicit`);
+			if (sel.changed) {
+				const prev = this._selectedNodes;
+				const primary = this.selectedNode?.item.key;
+				this._selectedNodes = new Set(sel.selected);
+				this.#pendingSelected = sel.pending;
+				this.selectedNode = [...sel.selected].find((n) => n.item.key === primary) ?? [...sel.selected].at(-1);
+				if (sel.restored) this.#dispatchSelect(prev);
+				else this.#viewState.notify(`data`);
+			}
+			this.#reconcileFocus(nodeByKey);
+		});
+	}
+	#reconcileZoom(root, nodeByKey) {
+		if (this._zoomKey !== void 0 && !nodeByKey(this._zoomKey)) {
+			this.#pendingZoom ??= this.#zoomPath;
+			this._zoomKey = void 0;
+			this.#viewState.notify(`data`);
+		}
+		const nodes = this.#pendingZoom && resolveZoomPath$1(root, this.#pendingZoom, nodeByKey);
+		if (!nodes) return;
+		this.#pendingZoom = void 0;
+		if (nodes.length === 0) this.zoomOut();
+		else this.zoomTo(nodes.at(-1));
+	}
+	#reconcileFocus(nodeByKey) {
+		const tickled = this.tickled.tickledId;
+		if (tickled !== void 0 && !nodeByKey(tickled)) {
+			if (this.#keyboardCursor) this.#pendingFocus ??= tickled;
+			this.tickled.clearTickled();
+		}
+		const focus = this.#pendingFocus;
+		if (focus !== void 0 && this.#rects().some((r) => r.node.item.key === focus)) {
+			this.#pendingFocus = void 0;
+			this.#keyboardCursor = true;
+			this.tickled.setTickled(focus);
+		}
 	}
+	/** Load the next unloaded node along a pending zoom path (one load at a time). */
+	#continueRestoreLoads() {
+		if (!this.restoreLoads || this.#pendingZoom === void 0 || !this.model && !this.loadChildren) return;
+		const next = resolveKeyPath(this.#effectiveRoot, this.#pendingZoom, (node) => node.item.isLeaf !== true);
+		if (next.status === `load` && !this.#pendingKeys.has(next.node.item.key)) this.#loadChildren(next.node, next.depth);
+	}
+	#onScroll;
 	#ensureVisibleChildren() {
 		if (!this.model && !this.loadChildren) return;
 		for (const rect of this.#rects()) {
@@ -9127,6 +10028,8 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		this.selectedNode = void 0;
 	}
 	#dispatchSelect(previous) {
+		if (!this.#viewState.isRestoring) this.#pendingSelected = EMPTY_KEYS;
+		this.#viewState.notify();
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
 				selected: new Set(this._selectedNodes),
@@ -9154,6 +10057,7 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		this.requestUpdate();
 	}
 	clearSelection() {
+		this.#pendingSelected = EMPTY_KEYS;
 		if (this._selectedNodes.size === 0) return;
 		const prev = new Set(this._selectedNodes);
 		this.#clearSelectionInternal();
@@ -9190,11 +10094,13 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 	* Fires `zoom` and the semantic `expand` event.
 	*/
 	zoomTo(node) {
+		this.#zoomChanged();
 		if (this._zoomKey === node.item.key) return;
 		this._zoomKey = node.item.key;
 		this.tickled.clearTickled();
-		const depth = findIciclePath(this.#effectiveRoot, node.item.key)?.length;
-		const absoluteDepth = depth === void 0 ? -1 : depth - 2;
+		const path = findIciclePath(this.#effectiveRoot, node.item.key);
+		this.#zoomPath = path?.slice(1).map((n) => n.item.key) ?? [node.item.key];
+		const absoluteDepth = path === void 0 ? -1 : path.length - 2;
 		this.dispatchEvent(new CustomEvent(`zoom`, {
 			detail: {
 				node,
@@ -9218,11 +10124,13 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 	* the semantic `collapse` event for the previous zoom root.
 	*/
 	zoomOut() {
+		this.#zoomChanged();
 		if (this._zoomKey === void 0) return;
 		const previous = this.focusedNode;
 		const path = this._zoomKey === void 0 ? void 0 : findIciclePath(this.#effectiveRoot, this._zoomKey);
 		const absoluteDepth = path === void 0 ? -1 : path.length - 2;
 		this._zoomKey = void 0;
+		this.#zoomPath = [];
 		this.tickled.clearTickled();
 		this.dispatchEvent(new CustomEvent(`zoom`, {
 			detail: {
@@ -9242,6 +10150,11 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		}));
 		this.requestUpdate();
 	}
+	/** An explicit zoom supersedes a saved one still waiting. */
+	#zoomChanged() {
+		if (!this.#viewState.isRestoring) this.#pendingZoom = void 0;
+		this.#viewState.notify();
+	}
 	#canZoom(node) {
 		if (node.item.isLeaf === true) return false;
 		if (node.children !== void 0) return node.children.length > 0;
@@ -9277,7 +10190,7 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 	navigateToNode(predicate) {
 		const root = this.#effectiveRoot;
 		if (!root?.children) return false;
-		const keyPath = this.#findKeyPath(root.children, predicate);
+		const keyPath = findIcicleKeyPath(root.children, predicate);
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
@@ -9288,35 +10201,16 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 	revealKey(key) {
 		const root = this.#effectiveRoot;
 		if (!root?.children) return false;
-		const path = this.#findKeyPath(root.children, (n) => n.item.key === key);
+		const path = findIcicleKeyPath(root.children, (n) => n.item.key === key);
 		if (!path) return false;
 		if (path.length > this.maxDepth) {
-			const ancestor = this.#resolveKeyPath(path.slice(0, path.length - this.maxDepth));
+			const ancestor = resolveIcicleKeyPath(this.#effectiveRoot, path.slice(0, path.length - this.maxDepth));
 			if (ancestor) this.zoomTo(ancestor);
 		}
 		this.tickled.setTickled(key);
 		this.requestUpdate();
 		return true;
 	}
-	#resolveKeyPath(keys) {
-		let current = this.#effectiveRoot;
-		for (const key of keys) {
-			const found = key === current?.item.key ? current : current?.children?.find((n) => n.item.key === key);
-			if (!found) return void 0;
-			current = found;
-		}
-		return current;
-	}
-	#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 visible as rectangles, in render (band-major) order,
 	* with absolute depth (root's children are depth 0).
@@ -9393,44 +10287,20 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		const currentIndex = tickledKey === void 0 ? -1 : rects.findIndex((r) => r.node.item.key === tickledKey);
 		const current = currentIndex >= 0 ? rects[currentIndex] : void 0;
 		const moveTo = (rect) => {
-			if (!rect) return;
 			event.preventDefault();
 			this.tickled.setTickled(rect.node.item.key);
+			this.#keyboardCursor = true;
+			this.#pendingFocus = void 0;
+			this.#viewState.notify();
 			if (this.interactionMode === `implicit`) this.select(rect.node);
 		};
+		if (event.key === `ArrowLeft` || event.key === `ArrowRight`) event.preventDefault();
+		const target = icicleKeyTarget(rects, current, event.key);
+		if (target) {
+			moveTo(target);
+			return;
+		}
 		switch (event.key) {
-			case `ArrowLeft`:
-			case `ArrowRight`: {
-				event.preventDefault();
-				const dir = event.key === `ArrowRight` ? 1 : -1;
-				if (!current) {
-					moveTo(rects[0]);
-					return;
-				}
-				const siblings = rects.filter((r) => r.relativeDepth === current.relativeDepth && r.parentKey === current.parentKey);
-				moveTo(siblings[siblings.findIndex((r) => r.node.item.key === current.node.item.key) + dir] ?? (dir > 0 ? siblings[0] : siblings.at(-1)));
-				return;
-			}
-			case `ArrowUp`:
-				if (!current) {
-					moveTo(rects[0]);
-					return;
-				}
-				moveTo((current.parentKey === void 0 ? void 0 : rects.find((r) => r.node.item.key === current.parentKey)) ?? rects[0]);
-				return;
-			case `ArrowDown`:
-				if (!current) {
-					moveTo(rects[0]);
-					return;
-				}
-				moveTo(rects.find((r) => r.parentKey === current.node.item.key));
-				return;
-			case `Home`:
-				moveTo(rects[0]);
-				return;
-			case `End`:
-				moveTo(rects.at(-1));
-				return;
 			case `Enter`:
 				if (!current) return;
 				event.preventDefault();
@@ -9480,6 +10350,10 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
 		else this.zoomTo(node);
 	}
+	#onRectPointerEnter(key) {
+		this.tickled.handlePointerEnter(key);
+		if (this.tickled.tickledId === key) this.#keyboardCursor = false;
+	}
 	#renderRect(rect) {
 		const { node } = rect;
 		const selected = this._selectedNodes.has(node);
@@ -9508,7 +10382,7 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
         style=${sizeStyle}
         @click=${(e) => this.#handleItemClick(rect, this.#rects().findIndex((r) => r.node.item.key === node.item.key), e)}
         @dblclick=${() => this.#handleItemDblClick(rect)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
+        @pointerenter=${() => this.#onRectPointerEnter(node.item.key)}
       >
         <span class="icicle-label ${hideLabel ? `hide-label` : ``} ${rotated ? `label-vertical` : ``}" part="label">${node.item.label}</span>
       </div>
@@ -9553,185 +10427,7 @@ let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
 			tickledStyles,
 			tickledItemStyles,
 			listSearchStyles,
-			css`
-      :host {
-        --icicletree-band-height: 44px;
-        --icicletree-band-gap: 2px;
-        --icicletree-rect-gap: 2px;
-        --icicletree-rect-bg: var(--surface-4);
-        --icicletree-rect-text: var(--surface-4-text);
-        --icicletree-font-size: var(--text-s);
-
-        display: block;
-        overflow: auto;
-      }
-
-      .icicle {
-        display: flex;
-        gap: var(--icicletree-band-gap);
-        outline: none;
-      }
-
-      .icicle.horizontal {
-        flex-direction: column;
-      }
-
-      .icicle.vertical {
-        flex-direction: row;
-        min-height: 200px;
-      }
-
-      .breadcrumb {
-        display: flex;
-        align-items: center;
-        padding: var(--space-xs) var(--space-s);
-        background: var(--surface-3);
-        color: var(--surface-3-text);
-        border: var(--border-subtle);
-        border-radius: var(--radius-m);
-        font-size: var(--text-s);
-        flex-shrink: 0;
-      }
-
-      .breadcrumb ixfx-crumb-navigation {
-        flex: 1;
-        min-width: 0;
-      }
-
-      .band {
-        position: relative;
-      }
-
-      .icicle.horizontal .band {
-        height: var(--icicletree-band-height);
-      }
-
-      .icicle.vertical .band {
-        flex: 1 1 0;
-        min-width: 0;
-        height: 100%;
-      }
-
-      .rect {
-        box-sizing: border-box;
-        position: absolute;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        padding: 0 var(--space-s);
-        background: var(--icicletree-rect-bg);
-        color: var(--icicletree-rect-text);
-        font-size: var(--icicletree-font-size);
-        cursor: pointer;
-        transition:
-          width var(--transition),
-          height var(--transition),
-          left var(--transition),
-          top var(--transition),
-          opacity var(--transition),
-          background-color var(--transition);
-      }
-
-      .icicle.horizontal .rect {
-        top: 0;
-        height: 100%;
-      }
-
-      /*
-       * A rotated label needs its full allotted width to be usable — the
-       * default left/right padding (--space-s, ~4px a side) can consume
-       * most or all of a rect sized down to minVerticalLabelWidth, leaving
-       * the rotated text clipped to invisible. #labelMode's width estimate
-       * assumes the whole rect width is usable, so drop the padding here to
-       * match that assumption instead of also budgeting for it in the
-       * threshold (which would make already-narrow rects need even more).
-       */
-      .icicle.horizontal .rect.rotated {
-        padding: 0;
-      }
-
-      .icicle.vertical .rect {
-        left: 0;
-        width: 100%;
-        padding: var(--space-s) 0;
-        justify-content: center;
-        writing-mode: horizontal-tb;
-      }
-
-      .rect.filtered {
-        opacity: 0.3;
-        filter: saturate(0.4);
-      }
-
-      .rect.empty {
-        padding: 0;
-        border: none;
-      }
-
-      .rect.loading {
-        cursor: progress;
-        opacity: 0.6;
-      }
-
-      .icicle-label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex: 1;
-        min-width: 0;
-      }
-
-      .icicle-label.hide-label {
-        visibility: hidden;
-      }
-
-      .icicle-label.label-vertical {
-        writing-mode: vertical-rl;
-        text-orientation: sideways;
-        flex: none;
-        width: 100%;
-        height: 100%;
-        padding: var(--space-2xs, 2px) 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      /*
-       * Instant tooltip for rects whose label is rotated or hidden — anchored
-       * via CSS anchor positioning (anchor-name set on the tickled rect in
-       * #renderRect) rather than a JS-computed position, and shown/hidden via
-       * the Popover API rather than the browser's own (slow, un-stylable)
-       * title tooltip.
-       */
-      .icicle-tooltip {
-        position: fixed;
-        position-anchor: --icicle-rect-anchor;
-        position-area: bottom center;
-        position-try-fallbacks: top center;
-        margin: var(--space-xs, 4px) 0 0;
-        padding: var(--space-2xs, 2px) var(--space-xs, 6px);
-        background: var(--surface-5);
-        color: var(--surface-5-text);
-        border: var(--border-subtle);
-        border-radius: var(--radius-s, 4px);
-        font-size: var(--text-s);
-        white-space: nowrap;
-        pointer-events: none;
-        inset: auto;
-      }
-
-      .icicle-tooltip:popover-open {
-        display: block;
-      }
-
-      .empty-state {
-        padding: var(--space-l);
-        color: var(--surface-muted-text);
-        font-size: var(--text-s);
-      }
-    `
+			icicleTreeStyles
 		];
 	}
 };
@@ -9786,6 +10482,7 @@ __decorate([property({
 	reflect: true
 })], IcicleTreeListElement.prototype, "searchModes", void 0);
 __decorate([state()], IcicleTreeListElement.prototype, "_zoomKey", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "restoreLoads", void 0);
 __decorate([query(`#icicle-tooltip`)], IcicleTreeListElement.prototype, "_tooltipEl", void 0);
 IcicleTreeListElement = __decorate([safeCustomElement(`ixfx-icicletree-list`)], IcicleTreeListElement);
 //#endregion
@@ -9811,6 +10508,136 @@ function findLeafCategory(categories, key) {
 	return flattenCategories(categories).find((c) => c.key === key);
 }
 //#endregion
+//#region src/multicol-list/multicol-view-state.ts
+/**
+* Pure helpers for `ixfx-multicol-list` view state. The element runs these
+* when a state is restored, when `categories` change (so saved columns whose
+* category wasn't known yet can appear) and when a column's items arrive (so
+* saved selections apply once their keys exist).
+*/
+const MULTICOL_VIEW_STATE_KIND = `multicol-list`;
+const isSort = (v) => v === `asc` || v === `desc`;
+/**
+* Validate saved columns (they come from storage, so may be malformed).
+* Entries without a string `id` / `categoryKey` are dropped, as are repeat
+* ids; bad optional fields fall back to defaults.
+*/
+function sanitiseColumns(raw) {
+	if (!Array.isArray(raw)) return [];
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const entry of raw) {
+		if (entry === null || typeof entry !== `object`) continue;
+		const e = entry;
+		if (typeof e.id !== `string` || typeof e.categoryKey !== `string` || seen.has(e.id)) continue;
+		seen.add(e.id);
+		out.push({
+			id: e.id,
+			categoryKey: e.categoryKey,
+			sort: isSort(e.sort) ? e.sort : `asc`,
+			grouped: e.grouped === true,
+			...typeof e.menu === `boolean` ? { menu: e.menu } : {},
+			...typeof e.width === `number` && Number.isFinite(e.width) ? { width: e.width } : {}
+		});
+	}
+	return out;
+}
+/** Split saved columns into those whose category resolves now and those to keep pending. */
+function partitionColumns(columns, hasCategory) {
+	const ready = [];
+	const pending = [];
+	columns.forEach((state, index) => {
+		if (hasCategory(state.categoryKey)) ready.push(state);
+		else pending.push({
+			state,
+			index
+		});
+	});
+	return {
+		ready,
+		pending
+	};
+}
+/** Split pending columns into those whose category now resolves and those still waiting. */
+function resolvePendingColumns(pending, hasCategory) {
+	if (pending.length === 0) return {
+		ready: [],
+		pending
+	};
+	const ready = pending.filter((p) => hasCategory(p.state.categoryKey));
+	return ready.length === 0 ? {
+		ready,
+		pending
+	} : {
+		ready,
+		pending: pending.filter((p) => !hasCategory(p.state.categoryKey))
+	};
+}
+/** Insert pending columns back at their saved positions (clamped), for a snapshot. */
+function mergeColumns(live, pending) {
+	const out = [...live];
+	for (const p of [...pending].sort((a, b) => a.index - b.index)) out.splice(Math.min(p.index, out.length), 0, p.state);
+	return out;
+}
+/**
+* - selected keys no longer in the data → pending
+* - pending keys now in the data → selected (appended, in pending order)
+*/
+function reconcileSelection(selected, pending, has) {
+	const kept = selected.filter(has);
+	const dropped = kept.length === selected.length ? [] : selected.filter((k) => !has(k));
+	const { present, missing } = partitionKeys(pending, has);
+	if (dropped.length === 0 && present.length === 0) return {
+		selected,
+		pending,
+		restored: false,
+		changed: false
+	};
+	const nextPending = dropped.length === 0 ? missing : capKeys(/* @__PURE__ */ new Set([...missing, ...dropped]));
+	const added = present.filter((k) => !kept.includes(k));
+	return {
+		selected: [...kept, ...added],
+		pending: nextPending,
+		restored: added.length > 0,
+		changed: dropped.length > 0 || added.length > 0
+	};
+}
+/** JSON array of string keys → capped pending set; non-strings are ignored. */
+function keysFromJson(raw) {
+	if (!Array.isArray(raw)) return EMPTY_KEYS;
+	return capKeys(new Set(raw.filter((k) => typeof k === `string`)));
+}
+/** Whether `raw` looks like a {@link ScrollState}. */
+function isScrollState(raw) {
+	return raw !== null && typeof raw === `object` && typeof raw.top === `number`;
+}
+/** `record` entries as a map, keeping only values `accept` allows. */
+function mapFromRecord(record, accept) {
+	const out = /* @__PURE__ */ new Map();
+	if (record === null || typeof record !== `object`) return out;
+	for (const [key, value] of Object.entries(record)) {
+		const v = accept(value);
+		if (v !== void 0) out.set(key, v);
+	}
+	return out;
+}
+const keyOf = (el) => el.dataset.key;
+/** Rendered, keyed item rows inside a column's scroll host, in visual order. */
+function itemRows(host) {
+	return [...host.querySelectorAll(`li[data-key]`)];
+}
+function captureColumnScroll(host) {
+	return captureElementScroll(host, itemRows(host), keyOf);
+}
+/** Apply `scroll` to a column's host; `true` once the position was fully reached. */
+function restoreColumnScroll(host, scroll) {
+	const anchor = scroll.anchor;
+	if (!anchor) return scrollToOffset(host, scroll.top);
+	const row = itemRows(host).find((el) => keyOf(el) === anchor.key);
+	if (!row) return false;
+	return restoreElementScroll(host, row, anchor.offset);
+}
+//#endregion
 //#region src/multicol-list/types.ts
 const ALL_KEY = `__all__`;
 //#endregion
@@ -9862,6 +10689,7 @@ var MulticolColumnController = class {
 	#dataProvider;
 	#onSelectionChange;
 	#onRequestData;
+	#onScroll;
 	#abortController = void 0;
 	#host;
 	#allRow;
@@ -9869,7 +10697,19 @@ var MulticolColumnController = class {
 	#selectedValues = [];
 	#allSelected = true;
 	#lastItems = [];
+	/** Keys of `#lastItems`; empty until data for the current category arrived. */
+	#itemKeys = EMPTY_KEYS;
+	/** Saved selection keys not in the data (yet). */
+	#pendingSelection = EMPTY_KEYS;
+	/** Saved scroll waiting for its anchor row / enough content. */
+	#pendingScroll;
+	#disposeScrollIntent;
 	#syncingSelection = false;
+	/**
+	* Pending `#restoreAfterSync` passes. The lister re-renders new items and
+	* may fire `select` before the sync runs; that isn't the user's doing.
+	*/
+	#syncsInFlight = 0;
 	#state;
 	constructor(options) {
 		this.id = options.id;
@@ -9879,6 +10719,7 @@ var MulticolColumnController = class {
 		this.#dataProvider = options.dataProvider;
 		this.#onSelectionChange = options.onSelectionChange;
 		this.#onRequestData = options.onRequestData;
+		this.#onScroll = options.onScroll;
 		this.#state = {
 			id: options.id,
 			categoryKey: options.category.key,
@@ -9954,7 +10795,10 @@ var MulticolColumnController = class {
 			grouped: category.defaults?.grouped ?? false,
 			menu: category.defaults?.menu ?? true
 		};
-		this.clearSelection();
+		this.#pendingSelection = EMPTY_KEYS;
+		this.#pendingScroll = void 0;
+		this.#itemKeys = EMPTY_KEYS;
+		this.#setAllSelection(`data`);
 		this.#syncGrouping();
 	}
 	get listerHost() {
@@ -9979,7 +10823,7 @@ var MulticolColumnController = class {
 		allRow.appendChild(allLabel);
 		const applyAll = () => {
 			if (this.#allSelected) return;
-			this.#setAllSelection();
+			this.#setAllSelection(`user`);
 		};
 		allRow.addEventListener(`click`, applyAll);
 		allRow.addEventListener(`keydown`, (e) => {
@@ -10000,6 +10844,10 @@ var MulticolColumnController = class {
 		this.#syncGrouping();
 		this.#syncAllRow();
 		host.append(allRow, lister);
+		host.addEventListener(`scroll`, this.#handleScroll, { passive: true });
+		this.#disposeScrollIntent = onUserScrollIntent(host, () => {
+			this.#pendingScroll = void 0;
+		});
 		if (this.#lastItems.length > 0) {
 			this.#pushItems();
 			this.#restoreAfterSync();
@@ -10007,6 +10855,9 @@ var MulticolColumnController = class {
 	}
 	unmount() {
 		this.#abortPending();
+		this.#host?.removeEventListener(`scroll`, this.#handleScroll);
+		this.#disposeScrollIntent?.();
+		this.#disposeScrollIntent = void 0;
 		this.#allRow?.remove();
 		this.#listerEl?.remove();
 		this.#allRow = void 0;
@@ -10029,17 +10880,17 @@ var MulticolColumnController = class {
 	}
 	#applyItems(items) {
 		this.#lastItems = items;
-		const valid = this.#selectedValues.filter((v) => items.some((i) => i.key === v));
-		const changed = valid.length !== this.#selectedValues.length;
-		this.#selectedValues = valid;
-		if (valid.length === 0) this.#allSelected = true;
-		if (!this.#listerEl) {
-			if (changed) this.#onSelectionChange(this.id, valid);
-			return;
+		const keys = new Set(items.map((i) => i.key));
+		this.#itemKeys = keys;
+		const r = reconcileSelection(this.#selectedValues, this.#pendingSelection, (k) => keys.has(k));
+		this.#pendingSelection = r.pending;
+		this.#selectedValues = r.selected;
+		this.#allSelected = r.selected.length === 0;
+		if (this.#listerEl) {
+			this.#pushItems();
+			this.#restoreAfterSync();
 		}
-		this.#pushItems();
-		this.#restoreAfterSync();
-		if (changed) this.#onSelectionChange(this.id, valid);
+		if (r.changed) this.#onSelectionChange(this.id, r.selected, r.restored ? `restore` : `data`);
 	}
 	#pushItems() {
 		if (!this.#listerEl) return;
@@ -10064,7 +10915,7 @@ var MulticolColumnController = class {
 		return this.#listerEl.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`);
 	}
 	#handleSelect = () => {
-		if (this.#syncingSelection) return;
+		if (this.#syncingSelection || this.#syncsInFlight > 0) return;
 		const values = [...this.#listerEl?.selectedItems ?? []].map((i) => i.key).filter((k) => k !== ALL_KEY);
 		if (values.length === this.#selectedValues.length && values.every((v) => this.#selectedValues.includes(v))) {
 			this.#syncAllRow();
@@ -10073,9 +10924,9 @@ var MulticolColumnController = class {
 		this.#selectedValues = values;
 		this.#allSelected = values.length === 0;
 		this.#syncAllRow();
-		this.#onSelectionChange(this.id, values);
+		this.#onSelectionChange(this.id, values, `user`);
 	};
-	#setAllSelection() {
+	#setAllSelection(origin) {
 		const previous = this.#selectedValues;
 		this.#syncingSelection = true;
 		try {
@@ -10086,17 +10937,64 @@ var MulticolColumnController = class {
 			this.#syncingSelection = false;
 		}
 		this.#syncAllRow();
-		if (previous.length > 0) this.#onSelectionChange(this.id, []);
+		if (previous.length > 0) this.#onSelectionChange(this.id, [], origin);
 	}
+	/** Back to 'All' — an explicit selection change. */
 	clearSelection() {
-		this.#setAllSelection();
+		this.#setAllSelection(`user`);
 	}
 	get selectedValues() {
 		return this.#selectedValues;
 	}
+	get pendingSelection() {
+		return this.#pendingSelection;
+	}
+	/**
+	* Replace the selection with `keys`. Keys in the current data are selected
+	* now; the rest stay pending until items carrying them arrive.
+	*/
+	restoreSelection(keys) {
+		const previous = this.#selectedValues;
+		const r = reconcileSelection([], capKeys(keys), (k) => this.#itemKeys.has(k));
+		this.#pendingSelection = r.pending;
+		this.#selectedValues = r.selected;
+		this.#allSelected = r.selected.length === 0;
+		this.#restoreAfterSync();
+		this.#syncAllRow();
+		if (!(previous.length === r.selected.length && previous.every((k) => r.selected.includes(k)))) this.#onSelectionChange(this.id, r.selected, `restore`);
+	}
+	clearPendingSelection() {
+		this.#pendingSelection = EMPTY_KEYS;
+	}
+	get pendingScroll() {
+		return this.#pendingScroll;
+	}
+	/** Current scroll of the column's list; `undefined` while unmounted. */
+	captureScroll() {
+		return this.#host ? captureColumnScroll(this.#host) : void 0;
+	}
+	/** Scroll to `scroll` now if possible, else when enough items have rendered. */
+	restoreScroll(scroll) {
+		this.#pendingScroll = scroll;
+		this.#tryPendingScroll();
+	}
+	clearPendingScroll() {
+		this.#pendingScroll = void 0;
+	}
+	#tryPendingScroll() {
+		const scroll = this.#pendingScroll;
+		if (!scroll || !this.#host) return;
+		if (restoreColumnScroll(this.#host, scroll)) this.#pendingScroll = void 0;
+	}
+	#handleScroll = () => {
+		if (!this.#pendingScroll) this.#onScroll?.(this.id);
+	};
 	#restoreAfterSync() {
 		if (!this.#listerEl) return;
-		this.#listerEl.updateComplete.then(() => {
+		this.#syncsInFlight++;
+		this.#listerEl.updateComplete.finally(() => {
+			this.#syncsInFlight--;
+		}).then(() => {
 			if (!this.#listerEl || !this.#host) return;
 			this.#syncingSelection = true;
 			try {
@@ -10109,6 +11007,7 @@ var MulticolColumnController = class {
 				this.#syncingSelection = false;
 			}
 			this.#syncAllRow();
+			this.#tryPendingScroll();
 		});
 	}
 	#syncAllRow() {
@@ -10140,12 +11039,201 @@ function renderItem(item) {
 	}
 	return li;
 }
+/** Shadow styles for `ixfx-multicol-list` (theme fallbacks / handle styles are added by the element). */
+const multicolListStyles = css`
+  :host {
+    --multicol-list-bg: var(--surface-3);
+    --multicol-list-header-bg: var(--surface-2);
+    --multicol-list-header-text: var(--surface-3-text);
+    --multicol-list-border: var(--border);
+    --multicol-list-min-column-width: ${80}px;
+    --multicol-list-max-column-width: ${480}px;
+    --multicol-list-header-font-size: unset;
+
+    display: block;
+    overflow: hidden;
+    /* A sideways trackpad swipe over the component must never pan it
+       (or the page behind it, or trigger history navigation) */
+    overscroll-behavior-x: none;
+    background: var(--multicol-list-bg);
+    color: var(--surface-3-text);
+    font-family: var(--font-family);
+  }
+  #container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    overflow: hidden;
+    overscroll-behavior-x: none;
+    position: relative;
+    height: 100%;
+  }
+  .column {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: var(--multicol-list-border);
+    min-width: var(--multicol-list-min-column-width);
+    max-width: var(--multicol-list-max-column-width);
+    background: var(--surface-3);
+  }
+  .column-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    height: 32px;
+    background: var(--multicol-list-header-bg);
+    color: var(--multicol-list-header-text);
+    border-bottom: var(--border);
+    position: relative;
+    user-select: none;
+    min-width: var(--multicol-list-min-column-width);
+    box-sizing: border-box;
+  }
+  .column-header[data-dragging] {
+    opacity: 0.4;
+  }
+  .reorder-handle {
+    cursor: grab;
+    opacity: 0;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: var(--space-xs);
+    touch-action: none;
+    transition: opacity var(--transition, 0.15s ease-out);
+  }
+  .column-header:hover .reorder-handle, .column-header:focus-within .reorder-handle, .column-header[data-dragging] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
+  .reorder-handle:active {
+    cursor: grabbing;
+  }
+  .reorder-handle .ixfx-handle {
+    --ixfx-handle-length: 14px;
+    --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 6px);
+    --ixfx-handle-dot-size: 3px;
+  }
+  .column-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 var(--space-s);
+    font-size: var(--multicol-list-header-font-size);
+    font-weight: 600;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    min-width: 0;
+  }
+  .column-label:hover {
+    text-decoration: underline;
+  }
+  .burger-btn {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--surface-3-text);
+    opacity: 0;
+    transition: opacity var(--transition);
+    border-radius: var(--radius-s);
+  }
+  .column:hover .burger-btn,
+  .column-header:focus-within .burger-btn {
+    opacity: 1;
+  }
+  .burger-btn:hover {
+    background: var(--surface-4);
+  }
+  .resize-handle {
+    position: absolute;
+    right: -4px;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    cursor: col-resize;
+    z-index: 1;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    touch-action: none;
+  }
+  .resize-handle::before {
+    content: '';
+    width: 2px;
+    margin: 2px 0;
+    border-radius: 1px;
+    background: transparent;
+    transition: background-color var(--transition);
+  }
+  .resize-handle:hover::before,
+  .resize-handle[data-active]::before {
+    background: var(--accent);
+  }
+  .lister-host {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* Vertical scrolling only: horizontal deltas are swallowed here
+       instead of chaining up and panning the whole component */
+    overscroll-behavior-x: none;
+    touch-action: pan-y;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    --list-gutter: 0;
+  }
+  .all-row {
+    display: flex;
+    align-items: center;
+    padding: var(--space-xs) var(--space-s);
+    cursor: pointer;
+    user-select: none;
+    min-height: 28px;
+    box-sizing: border-box;
+    outline: 1px solid transparent;
+    background: var(--surface-3);
+  }
+  .all-row:hover,
+  .all-row[data-selected] {
+    background: var(--surface-5);
+  }
+  .all-row[data-selected] {
+    outline-color: var(--accent);
+    font-weight: 600;
+  }
+  ixfx-grouped-item-lister {
+    display: block;
+  }
+  .drop-caret {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--accent);
+    border-radius: 1px;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .item-label {
+    flex: 1;
+  }
+  .count {
+    opacity: 0.6;
+    margin-left: var(--space-s);
+    font-size: var(--text-s);
+  }
+`;
 //#endregion
 //#region src/multicol-list/multicol-list.ts
 registerIcon(`menu`, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`);
-const DEFAULT_COLUMN_WIDTH = 220;
-const MIN_COLUMN_WIDTH = 80;
-const MAX_COLUMN_WIDTH = 480;
 const DRAG_THRESHOLD = 5;
 let MulticolListElement = class MulticolListElement extends LitElement {
 	constructor(..._args) {
@@ -10170,240 +11258,33 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			ghost: null,
 			insert: -1
 		};
+		this.#viewState = new ViewStateController(this, {
+			kind: MULTICOL_VIEW_STATE_KIND,
+			capture: () => this.getViewState()
+		});
+		this.#pendingColumns = [];
+		this.#pendingSelected = /* @__PURE__ */ new Map();
+		this.#pendingScroll = /* @__PURE__ */ new Map();
 	}
 	static {
 		this.styles = [
 			themeFallbacks,
 			handleStyles,
-			css`
-      :host {
-        --multicol-list-bg: var(--surface-3);
-        --multicol-list-header-bg: var(--surface-2);
-        --multicol-list-header-text: var(--surface-3-text);
-        --multicol-list-border: var(--border);
-        --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
-        --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
-        --multicol-list-header-font-size: unset;
-
-        display: block;
-        overflow: hidden;
-        /* A sideways trackpad swipe over the component must never pan it
-           (or the page behind it, or trigger history navigation) */
-        overscroll-behavior-x: none;
-        background: var(--multicol-list-bg);
-        color: var(--surface-3-text);
-        font-family: var(--font-family);
-      }
-      #container {
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        overflow: hidden;
-        overscroll-behavior-x: none;
-        position: relative;
-        height: 100%;
-      }
-      .column {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        border-right: var(--multicol-list-border);
-        min-width: var(--multicol-list-min-column-width);
-        max-width: var(--multicol-list-max-column-width);
-        background: var(--surface-3);
-      }
-      .column-header {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        height: 32px;
-        background: var(--multicol-list-header-bg);
-        color: var(--multicol-list-header-text);
-        border-bottom: var(--border);
-        position: relative;
-        user-select: none;
-        min-width: var(--multicol-list-min-column-width);
-        box-sizing: border-box;
-      }
-      .column-header[data-dragging] {
-        opacity: 0.4;
-      }
-      .reorder-handle {
-        cursor: grab;
-        opacity: 0;
-        display: inline-flex;
-        align-items: center;
-        flex-shrink: 0;
-        padding-left: var(--space-xs);
-        touch-action: none;
-        transition: opacity var(--transition, 0.15s ease-out);
-      }
-      .column-header:hover .reorder-handle, .column-header:focus-within .reorder-handle, .column-header[data-dragging] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
-      .reorder-handle:active {
-        cursor: grabbing;
-      }
-      .reorder-handle .ixfx-handle {
-        --ixfx-handle-length: 14px;
-        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 6px);
-        --ixfx-handle-dot-size: 3px;
-      }
-      .column-label {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 0 var(--space-s);
-        font-size: var(--multicol-list-header-font-size);
-        font-weight: 600;
-        background: transparent;
-        border: none;
-        color: inherit;
-        cursor: pointer;
-        text-align: left;
-        min-width: 0;
-      }
-      .column-label:hover {
-        text-decoration: underline;
-      }
-      .burger-btn {
-        flex-shrink: 0;
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        color: var(--surface-3-text);
-        opacity: 0;
-        transition: opacity var(--transition);
-        border-radius: var(--radius-s);
-      }
-      .column:hover .burger-btn,
-      .column-header:focus-within .burger-btn {
-        opacity: 1;
-      }
-      .burger-btn:hover {
-        background: var(--surface-4);
-      }
-      .resize-handle {
-        position: absolute;
-        right: -4px;
-        top: 0;
-        bottom: 0;
-        width: 8px;
-        cursor: col-resize;
-        z-index: 1;
-        display: flex;
-        align-items: stretch;
-        justify-content: center;
-        touch-action: none;
-      }
-      .resize-handle::before {
-        content: '';
-        width: 2px;
-        margin: 2px 0;
-        border-radius: 1px;
-        background: transparent;
-        transition: background-color var(--transition);
-      }
-      .resize-handle:hover::before,
-      .resize-handle[data-active]::before {
-        background: var(--accent);
-      }
-      .lister-host {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        /* Vertical scrolling only: horizontal deltas are swallowed here
-           instead of chaining up and panning the whole component */
-        overscroll-behavior-x: none;
-        touch-action: pan-y;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        --list-gutter: 0;
-      }
-      .all-row {
-        display: flex;
-        align-items: center;
-        padding: var(--space-xs) var(--space-s);
-        cursor: pointer;
-        user-select: none;
-        min-height: 28px;
-        box-sizing: border-box;
-        outline: 1px solid transparent;
-        background: var(--surface-3);
-      }
-      .all-row:hover,
-      .all-row[data-selected] {
-        background: var(--surface-5);
-      }
-      .all-row[data-selected] {
-        outline-color: var(--accent);
-        font-weight: 600;
-      }
-      ixfx-grouped-item-lister {
-        display: block;
-      }
-      .drop-caret {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        background: var(--accent);
-        border-radius: 1px;
-        pointer-events: none;
-        z-index: 10;
-      }
-      .item-label {
-        flex: 1;
-      }
-      .count {
-        opacity: 0.6;
-        margin-left: var(--space-s);
-        font-size: var(--text-s);
-      }
-    `
+			multicolListStyles
 		];
 	}
-	get columns() {
-		return this._columns.map((c) => c.getState());
-	}
-	setColumns(states) {
-		const existingMap = new Map(this._columns.map((c) => [c.id, c]));
-		const newColumns = [];
-		for (const colState of states) {
-			const existing = existingMap.get(colState.id);
-			if (existing) {
-				if (existing.categoryKey !== colState.categoryKey) {
-					const newCategory = findLeafCategory(this.categories, colState.categoryKey);
-					if (newCategory) existing.setCategory(newCategory);
-				}
-				existing.updateState(colState);
-				newColumns.push(existing);
-				existingMap.delete(colState.id);
-				continue;
-			}
-			const category = findLeafCategory(this.categories, colState.categoryKey);
-			if (!category) continue;
-			const controller = this.#createController(colState.id, category);
-			controller.updateState(colState);
-			newColumns.push(controller);
-		}
-		for (const col of existingMap.values()) col.unmount();
-		this._columns = newColumns;
-		this._updateColOffsets();
-		this._emitColumnsChange(`add`);
-		this._requeryAllColumns();
-		this.requestUpdate();
-	}
+	#viewState;
+	/** Saved columns whose category isn't in `categories` (yet). */
+	#pendingColumns;
+	/** Saved selection / scroll for column ids that don't exist (yet). */
+	#pendingSelected;
+	#pendingScroll;
 	addColumn(categoryKey, position) {
 		if (this.maxColumns > 0 && this._columns.length >= this.maxColumns) return;
 		const category = findLeafCategory(this.categories, categoryKey);
 		if (!category) return;
-		const id = `col-${++this._idCounter}`;
+		let id = `col-${++this._idCounter}`;
+		while (this._columns.some((c) => c.id === id) || this.#pendingColumns.some((p) => p.state.id === id)) id = `col-${++this._idCounter}`;
 		const controller = this.#createController(id, category);
 		if (position !== void 0 && position >= 0 && position < this._columns.length) this._columns.splice(position, 0, controller);
 		else this._columns.push(controller);
@@ -10431,9 +11312,15 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		}));
 	}
 	clearSelection() {
+		this.#dropPendingSelection();
 		for (const col of this._columns) col.clearSelection();
 		this.requestUpdate();
 	}
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		root.addEventListener(VIEW_STATE_CHANGE, (e) => e.stopPropagation());
+		return root;
+	}
 	render() {
 		return html`
       <div id="container">
@@ -10442,7 +11329,136 @@ let MulticolListElement = class MulticolListElement extends LitElement {
       </div>
     `;
 	}
+	/**
+	* Snapshot the column layout (in display order) and each column's
+	* selection and scroll, keyed by column id. Includes pending state —
+	* saved columns whose category isn't known and keys not yet in the data.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const selectedByColumn = {};
+		const scrollByColumn = {};
+		if (withPending) {
+			for (const [id, keys] of this.#pendingSelected) selectedByColumn[id] = [...keys];
+			for (const [id, scroll] of this.#pendingScroll) scrollByColumn[id] = scroll;
+		}
+		for (const col of this._columns) {
+			const keys = keysToArray(col.selectedValues, withPending ? col.pendingSelection : []);
+			if (keys.length > 0) selectedByColumn[col.id] = keys;
+			const scroll = (withPending ? col.pendingScroll : void 0) ?? col.captureScroll();
+			if (scroll) scrollByColumn[col.id] = scroll;
+		}
+		return this.#viewState.shape({
+			columns: mergeColumns(this._columns.map((c) => c.getState()), withPending ? this.#pendingColumns : []),
+			selectedByColumn,
+			scrollByColumn
+		}, options);
+	}
+	/**
+	* Apply saved view state; fields present replace the current ones.
+	* `columns` creates, reorders, re-points and removes columns to match
+	* (columns whose category isn't in `categories` wait until it is).
+	* Selection keys not in a column's data are applied when they arrive.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state)) return;
+		this.#viewState.restoring(() => {
+			if (state.columns) this.#applyColumns(sanitiseColumns(state.columns));
+			if (state.selectedByColumn) {
+				const wanted = mapFromRecord(state.selectedByColumn, (v) => Array.isArray(v) ? keysFromJson(v) : void 0);
+				for (const col of this._columns) {
+					col.restoreSelection(wanted.get(col.id) ?? EMPTY_KEYS);
+					wanted.delete(col.id);
+				}
+				this.#pendingSelected = wanted;
+			}
+			if (state.scrollByColumn) {
+				const wanted = mapFromRecord(state.scrollByColumn, (v) => isScrollState(v) ? v : void 0);
+				for (const col of this._columns) {
+					const scroll = wanted.get(col.id);
+					if (scroll) col.restoreScroll(scroll);
+					else col.clearPendingScroll();
+					wanted.delete(col.id);
+				}
+				this.#pendingScroll = wanted;
+			}
+			this.#viewState.notify();
+		});
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingColumns = [];
+		this.#pendingSelected = /* @__PURE__ */ new Map();
+		this.#pendingScroll = /* @__PURE__ */ new Map();
+		for (const col of this._columns) {
+			col.clearPendingSelection();
+			col.clearPendingScroll();
+		}
+	}
+	/** Reuse live columns by id (re-pointing their category), create the rest, drop the others. */
+	#applyColumns(saved) {
+		const hasCategory = (key) => findLeafCategory(this.categories, key) !== void 0;
+		const { ready, pending } = partitionColumns(saved, hasCategory);
+		const existing = new Map(this._columns.map((c) => [c.id, c]));
+		const next = ready.map((colState) => this.#columnFromState(colState, existing));
+		for (const col of existing.values()) col.unmount();
+		if (saved.length > 0) this._autoSeeded = true;
+		this.#pendingColumns = pending;
+		this._columns = next;
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+	}
+	/** Live column for `colState`: the existing one with that id (taken from `existing`), or a new one. */
+	#columnFromState(colState, existing) {
+		const category = findLeafCategory(this.categories, colState.categoryKey);
+		const live = existing.get(colState.id);
+		existing.delete(colState.id);
+		if (live) {
+			if (live.categoryKey !== colState.categoryKey) live.setCategory(category);
+			live.updateState(colState);
+			return live;
+		}
+		const controller = this.#createController(colState.id, category);
+		controller.updateState(colState);
+		const keys = this.#pendingSelected.get(colState.id);
+		if (keys) {
+			controller.restoreSelection(keys);
+			this.#pendingSelected = withoutKey(this.#pendingSelected, colState.id);
+		}
+		const scroll = this.#pendingScroll.get(colState.id);
+		if (scroll) {
+			controller.restoreScroll(scroll);
+			this.#pendingScroll = withoutKey(this.#pendingScroll, colState.id);
+		}
+		return controller;
+	}
+	/** Insert pending columns whose category has now appeared, at their saved positions. */
+	#resolvePendingColumns() {
+		const hasCategory = (key) => findLeafCategory(this.categories, key) !== void 0;
+		const { ready, pending } = resolvePendingColumns(this.#pendingColumns, hasCategory);
+		if (ready.length === 0) return;
+		this.#viewState.restoring(() => {
+			this.#pendingColumns = pending;
+			const columns = [...this._columns];
+			const none = /* @__PURE__ */ new Map();
+			for (const p of [...ready].sort((a, b) => a.index - b.index)) {
+				if (columns.some((c) => c.id === p.state.id)) continue;
+				columns.splice(Math.min(p.index, columns.length), 0, this.#columnFromState(p.state, none));
+			}
+			this._columns = columns;
+			this._updateColOffsets();
+			this._emitColumnsChange(`add`);
+			this._requeryAllColumns();
+		});
+	}
+	/** An explicit selection change supersedes any saved selection still waiting. */
+	#dropPendingSelection() {
+		this.#pendingSelected = /* @__PURE__ */ new Map();
+		for (const col of this._columns) col.clearPendingSelection();
+	}
 	updated(changedProperties) {
+		if (changedProperties.has(`categories`)) this.#resolvePendingColumns();
 		const seedCategory = flattenCategories(this.categories)[0];
 		if (!this._autoSeeded && this._columns.length === 0 && seedCategory) {
 			this._autoSeeded = true;
@@ -10459,8 +11475,8 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		this._updateColOffsets();
 	}
 	_renderColumn(col, idx) {
-		const rawWidth = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
-		const width = Number.isFinite(rawWidth) ? rawWidth : DEFAULT_COLUMN_WIDTH;
+		const rawWidth = col.getState().width ?? 220;
+		const width = Number.isFinite(rawWidth) ? rawWidth : 220;
 		return html`
       <div
         class="column"
@@ -10522,7 +11538,8 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			selectionMode: this.selectionMode,
 			dataProvider: this.dataProvider,
 			onSelectionChange: this._onColumnSelectionChange.bind(this),
-			onRequestData: this._onColumnRequestData.bind(this)
+			onRequestData: this._onColumnRequestData.bind(this),
+			onScroll: () => this.#viewState.notify()
 		});
 	}
 	_onHeaderPointerDown(e, col, idx) {
@@ -10601,11 +11618,11 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		e.preventDefault();
 		e.stopPropagation();
 		const startX = e.clientX;
-		const rawStartW = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
-		const startW = Number.isFinite(rawStartW) ? rawStartW : DEFAULT_COLUMN_WIDTH;
+		const rawStartW = col.getState().width ?? 220;
+		const startW = Number.isFinite(rawStartW) ? rawStartW : 220;
 		this._resizingColumnId = col.id;
 		const applyWidth = (clientX) => {
-			const w = Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, startW + clientX - startX));
+			const w = Math.max(80, Math.min(480, startW + clientX - startX));
 			col.setWidth(w);
 			return w;
 		};
@@ -10734,8 +11751,10 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		this._requeryAllColumns();
 		this.requestUpdate();
 	}
-	_onColumnSelectionChange(columnId, _values) {
+	_onColumnSelectionChange(columnId, _values, origin) {
 		if (!this._columns.find((c) => c.id === columnId)) return;
+		if (origin === `user`) this.#dropPendingSelection();
+		this.#viewState.notify(origin);
 		for (const otherCol of this._columns) if (otherCol.id !== columnId) otherCol.requestData(this._buildQuery(otherCol));
 		const detail = {
 			columnId,
@@ -10770,22 +11789,23 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			col.setCategory(leaves[0]);
 			changed = true;
 		}
-		if (changed) this._emitColumnsChange(`category`);
+		if (changed) this._emitColumnsChange(`category`, `data`);
 	}
 	_updateColOffsets() {
 		const offsets = [0];
 		let sum = 0;
 		for (const col of this._columns) {
-			const rawWidth = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
-			sum += Number.isFinite(rawWidth) ? rawWidth : DEFAULT_COLUMN_WIDTH;
+			const rawWidth = col.getState().width ?? 220;
+			sum += Number.isFinite(rawWidth) ? rawWidth : 220;
 			offsets.push(sum);
 		}
 		if (!(offsets.length === this._colOffsets.length && offsets.every((v, i) => v === this._colOffsets[i] || Number.isNaN(v) && Number.isNaN(this._colOffsets[i])))) this._colOffsets = offsets;
 	}
-	_emitColumnsChange(reason) {
+	_emitColumnsChange(reason, viewStateReason = `user`) {
+		this.#viewState.notify(viewStateReason);
 		this.dispatchEvent(new CustomEvent(`multicol-columns-change`, {
 			detail: {
-				columns: this.columns,
+				columns: this._columns.map((c) => c.getState()),
 				reason
 			},
 			bubbles: true,
@@ -10795,8 +11815,8 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	async autoSizeColumns(options) {
 		return new Promise((resolve) => {
 			setTimeout(() => {
-				const minWidth = options?.minWidth ?? MIN_COLUMN_WIDTH;
-				const maxWidth = options?.maxWidth ?? MAX_COLUMN_WIDTH;
+				const minWidth = options?.minWidth ?? 80;
+				const maxWidth = options?.maxWidth ?? 480;
 				const measure = (text) => {
 					const span = document.createElement(`span`);
 					span.style.position = `absolute`;
@@ -10874,6 +11894,11 @@ __decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0
 __decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
 __decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
 MulticolListElement = __decorate([safeCustomElement(`ixfx-multicol-list`)], MulticolListElement);
+function withoutKey(map, key) {
+	const next = new Map(map);
+	next.delete(key);
+	return next;
+}
 //#endregion
 //#region src/notifier/pill-renderer.ts
 const ROW_SPACING = 8;
@@ -14536,6 +15561,242 @@ function computeTreemapLayout(root, options = {}) {
 	return rects;
 }
 //#endregion
+//#region src/treemap/treemap-view-state.ts
+function indexTreemapKeys(root) {
+	const out = /* @__PURE__ */ new Map();
+	if (!root) return out;
+	const walk = (node, parentKey, depth) => {
+		if (!out.has(node.item.key)) out.set(node.item.key, {
+			node,
+			parentKey,
+			depth
+		});
+		for (const child of node.children ?? []) walk(child, node.item.key, depth + 1);
+	};
+	walk(root, void 0, -1);
+	return out;
+}
+/** Key path from the root's children down to `key` (`[]` for the root itself). */
+function treemapKeyPath(index, key) {
+	const path = [];
+	for (let entry = index.get(key); entry !== void 0; entry = entry.parentKey === void 0 ? void 0 : index.get(entry.parentKey)) {
+		if (entry.parentKey === void 0) return path;
+		path.unshift(entry.node.item.key);
+	}
+}
+/**
+* Where a saved zoom path stands against the loaded tree. The target is
+* matched by key anywhere (it may have moved); failing that, the deepest
+* loaded ancestor on the path is reported for loading when its children
+* haven't been fetched.
+*/
+function resolveZoomPath(index, path) {
+	const target = path.at(-1);
+	if (target === void 0) return {
+		kind: `found`,
+		key: void 0
+	};
+	if (index.has(target)) return {
+		kind: `found`,
+		key: target
+	};
+	for (let i = path.length - 2; i >= 0; i--) {
+		const entry = index.get(path[i]);
+		if (!entry) continue;
+		const { node, depth } = entry;
+		return node.children === void 0 && node.item.isLeaf !== true ? {
+			kind: `load`,
+			node,
+			depth
+		} : { kind: `missing` };
+	}
+	return { kind: `missing` };
+}
+/**
+* Zoom: a live zoom root that left the tree goes pending (view falls back to
+* the full tree); a pending path whose target is now loaded is applied.
+* Selection: see `reconcileSelection` in `common/view-state/tree.ts`.
+*/
+function reconcileTreemapViewState(input) {
+	const { index } = input;
+	let zoom;
+	let pendingZoom = input.pendingZoom;
+	if (input.zoomKey !== void 0 && !index.has(input.zoomKey)) {
+		pendingZoom ??= input.zoomPath;
+		zoom = {
+			key: void 0,
+			path: [],
+			restored: false
+		};
+	} else if (input.zoomKey !== void 0) {
+		const path = treemapKeyPath(index, input.zoomKey) ?? input.zoomPath;
+		if (!samePath(path, input.zoomPath)) zoom = {
+			key: input.zoomKey,
+			path,
+			restored: false
+		};
+	}
+	if (pendingZoom) {
+		const resolved = resolveZoomPath(index, pendingZoom);
+		if (resolved.kind === `found`) {
+			const key = resolved.key;
+			zoom = {
+				key,
+				path: key === void 0 ? [] : treemapKeyPath(index, key) ?? pendingZoom,
+				restored: true
+			};
+			pendingZoom = void 0;
+		}
+	}
+	const selection = reconcileSelection$1(input.selected, input.pendingSelected, (key) => index.get(key)?.node, input.canSelect, input.singleSelect);
+	return {
+		zoom,
+		pendingZoom,
+		selection
+	};
+}
+function samePath(a, b) {
+	return a.length === b.length && a.every((k, i) => k === b[i]);
+}
+//#endregion
+//#region src/treemap/treemap-view-state-binding.ts
+function createTreemapViewState(host) {
+	const { controller } = host;
+	/** Key path of the zoom root as last seen — what goes pending if it leaves the tree. */
+	let zoomPath = [];
+	let pendingZoom;
+	let pendingSelected = EMPTY_KEYS;
+	let pendingFocus;
+	/** The cursor was last moved by keyboard / search (only then is it saved as `focus`). */
+	let keyboardCursor = false;
+	let structureVersion = 0;
+	let reconciledVersion = -1;
+	let cache;
+	const index = () => {
+		if (cache?.version !== structureVersion) cache = {
+			version: structureVersion,
+			index: indexTreemapKeys(host.root())
+		};
+		return cache.index;
+	};
+	const cursorKey = () => keyboardCursor ? host.tickled() : void 0;
+	const applyZoom = (key, path, restored) => {
+		zoomPath = path;
+		if (host.zoomKey() === key) return;
+		host.setZoom(key, restored);
+		controller.notify();
+	};
+	const reconcileCursor$1 = (idx) => {
+		const cursor = reconcileCursor(cursorKey(), pendingFocus, (key) => idx.has(key), host.isVisible);
+		pendingFocus = cursor.pending;
+		const tickled = host.tickled();
+		if (cursor.clear || tickled !== void 0 && !idx.has(tickled)) host.setTickled(void 0);
+		if (cursor.apply !== void 0) {
+			host.setTickled(cursor.apply);
+			keyboardCursor = true;
+			controller.notify();
+		}
+	};
+	/** Move state for missing keys to pending; apply pending state for keys now loaded. */
+	const reconcile = () => {
+		reconciledVersion = structureVersion;
+		if (!host.root()) return;
+		const idx = index();
+		controller.restoring(() => {
+			const r = reconcileTreemapViewState({
+				index: idx,
+				zoomKey: host.zoomKey(),
+				zoomPath,
+				pendingZoom,
+				selected: host.selected(),
+				pendingSelected,
+				canSelect: host.canSelect,
+				singleSelect: host.singleSelect()
+			});
+			pendingZoom = r.pendingZoom;
+			if (r.zoom) applyZoom(r.zoom.key, r.zoom.path, r.zoom.restored);
+			const sel = r.selection;
+			if (sel.changed) {
+				pendingSelected = sel.pending;
+				const primaryKey = host.selectedNode()?.item.key;
+				const primary = [...sel.selected].find((n) => n.item.key === primaryKey) ?? [...sel.selected].at(-1);
+				host.setSelection(sel.selected, primary, sel.restored);
+			}
+			reconcileCursor$1(idx);
+		});
+	};
+	return {
+		/** The structure changed (new root / model, invalidation, lazy load). */
+		invalidate() {
+			structureVersion++;
+		},
+		/** Run in `willUpdate`. `zoomGone` — the zoom root vanished through in-place mutation. */
+		reconcileIfNeeded(zoomGone) {
+			if (zoomGone) structureVersion++;
+			if (reconciledVersion !== structureVersion) reconcile();
+		},
+		/** An explicit zoom: supersedes a saved one still waiting. */
+		zoomed(key) {
+			pendingZoom = void 0;
+			zoomPath = key === void 0 ? [] : treemapKeyPath(index(), key) ?? [key];
+			controller.notify();
+		},
+		/** Selection changed — explicit changes supersede a saved selection still waiting. */
+		selectionChanged() {
+			if (!controller.isRestoring) pendingSelected = EMPTY_KEYS;
+			controller.notify();
+		},
+		clearPendingSelection() {
+			pendingSelected = EMPTY_KEYS;
+		},
+		/** The cursor moved by keyboard / search navigation. */
+		keyboardCursorMoved() {
+			keyboardCursor = true;
+			pendingFocus = void 0;
+			controller.notify();
+		},
+		/** The cursor moved by pointer. */
+		pointerCursorMoved() {
+			if (!keyboardCursor) return;
+			keyboardCursor = false;
+			controller.notify();
+		},
+		get(options) {
+			const withPending = options?.includePending ?? true;
+			return controller.shape({
+				selected: keysToArray([...host.selected()].map((n) => n.item.key), withPending ? pendingSelected : []),
+				focus: cursorKey() ?? (withPending ? pendingFocus : void 0),
+				zoom: [...(withPending ? pendingZoom : void 0) ?? zoomPath]
+			}, options);
+		},
+		set(state) {
+			if (!controller.accepts(state)) return;
+			controller.restoring(() => {
+				if (state.selected) {
+					pendingSelected = capKeys(new Set(state.selected));
+					if (host.selected().size > 0) host.setSelection(/* @__PURE__ */ new Set(), void 0, true);
+				}
+				if (state.focus !== void 0) pendingFocus = state.focus;
+				const zoom = pathFromJson(state.zoom);
+				if (zoom) pendingZoom = zoom;
+				reconcile();
+				if (zoom && pendingZoom) applyZoom(void 0, [], true);
+			});
+		},
+		clearPending() {
+			pendingSelected = EMPTY_KEYS;
+			pendingFocus = void 0;
+			pendingZoom = void 0;
+		},
+		/** Load the next unloaded ancestor on a pending zoom path (one load at a time). */
+		continueRestoreLoads() {
+			if (!pendingZoom || !host.restoreLoads() || !host.canLoad()) return;
+			const resolved = resolveZoomPath(index(), pendingZoom);
+			if (resolved.kind === `load` && !host.isLoading(resolved.node.item.key)) host.load(resolved.node, resolved.depth);
+		}
+	};
+}
+//#endregion
 //#region src/treemap/treemap-list.ts
 let TreemapListElement = class TreemapListElement extends LitElement {
 	constructor(..._args) {
@@ -14557,6 +15818,33 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
 		this._zoomKey = void 0;
+		this.restoreLoads = true;
+		this.#viewState = createTreemapViewState({
+			controller: new ViewStateController(this, {
+				kind: `treemap-list`,
+				capture: () => this.getViewState()
+			}),
+			root: () => this.#effectiveRoot,
+			zoomKey: () => this._zoomKey,
+			setZoom: (key, restored) => this.#restoreZoom(key, restored),
+			selected: () => this._selectedNodes,
+			selectedNode: () => this.selectedNode,
+			canSelect: (node) => this.#canSelect(node),
+			singleSelect: () => this.interactionMode === `implicit`,
+			setSelection: (next, primary, fire) => {
+				const prev = this._selectedNodes;
+				this._selectedNodes = new Set(next);
+				this.selectedNode = primary;
+				if (fire) this.#dispatchSelect(prev);
+			},
+			tickled: () => this.tickled.tickledId,
+			setTickled: (key) => key === void 0 ? this.tickled.clearTickled() : this.tickled.setTickled(key),
+			isVisible: (key) => this.#rects().some((r) => r.node.item.key === key),
+			restoreLoads: () => this.restoreLoads,
+			canLoad: () => this.model !== void 0 || this.loadChildren !== void 0,
+			isLoading: (key) => this.#pendingKeys.has(key),
+			load: (node, depth) => void this.#loadChildren(node, depth)
+		});
 		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
 			labelSelector: `.treemap-label`,
 			highlightKey: `incr-search-highlight`
@@ -14595,6 +15883,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		if (this._zoomKey === void 0) return void 0;
 		return findTreemapNode(this.#effectiveRoot, this._zoomKey);
 	}
+	#viewState;
 	#modelUnsubscribe;
 	#pendingKeys;
 	#aborters;
@@ -14690,40 +15979,38 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
 	}
+	willUpdate(changedProps) {
+		if (changedProps.has(`root`) && this.root || changedProps.has(`model`)) this.#onDataReset();
+		this.#viewState.reconcileIfNeeded(this._zoomKey !== void 0 && !findTreemapNode(this.#effectiveRoot, this._zoomKey));
+	}
 	updated(changedProps) {
-		if (changedProps.has(`root`) && this.root) this.#resetViewState();
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
 			this.#modelUnsubscribe = void 0;
-			if (this.model) {
-				this.#modelUnsubscribe = this.model._subscribe((event) => {
-					if (event.type === `root`) {
-						this.#resetViewState();
-						this.requestUpdate();
-					} else if (event.type === `invalidate`) this.requestUpdate();
-				});
-				this.#resetViewState();
-			}
+			if (this.model) this.#modelUnsubscribe = this.model._subscribe((event) => {
+				if (event.type === `root`) this.#onDataReset();
+				else if (event.type === `invalidate`) this.#viewState.invalidate();
+				this.requestUpdate();
+			});
 		}
-		if (changedProps.has(`interactionMode`)) {
+		if (changedProps.has(`interactionMode`) && changedProps.get(`interactionMode`) !== void 0) {
 			this.#anchorIndex = void 0;
 			this.clearSelection();
 		}
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
-		if (this._zoomKey !== void 0 && !findTreemapNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
 		this.#ensureVisibleChildren();
+		this.#viewState.continueRestoreLoads();
 		if (this.#pendingFlip) {
 			const flip = this.#pendingFlip;
 			this.#pendingFlip = void 0;
 			this.#applyFlip(flip);
 		}
 	}
-	#resetViewState() {
+	/** New `root` / `model`: drop transient state; keyed view state is reconciled, not reset. */
+	#onDataReset() {
 		this.#pendingFlip = void 0;
-		this.#clearSelectionInternal();
-		this.tickled.clearTickled();
-		this._zoomKey = void 0;
 		this.#anchorIndex = void 0;
+		this.#viewState.invalidate();
 	}
 	#ensureVisibleChildren() {
 		if (!this.model && !this.loadChildren) return;
@@ -14754,7 +16041,10 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		} finally {
 			this.#pendingKeys.delete(key);
 			this.#aborters.delete(key);
-			if (!controller.signal.aborted) this.requestUpdate();
+			if (!controller.signal.aborted) {
+				this.#viewState.invalidate();
+				this.requestUpdate();
+			}
 		}
 	}
 	#canSelect(node) {
@@ -14768,6 +16058,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.selectedNode = void 0;
 	}
 	#dispatchSelect(previous) {
+		this.#viewState.selectionChanged();
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
 				selected: new Set(this._selectedNodes),
@@ -14795,6 +16086,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.requestUpdate();
 	}
 	clearSelection() {
+		this.#viewState.clearPendingSelection();
 		if (this._selectedNodes.size === 0) return;
 		const prev = new Set(this._selectedNodes);
 		this.#clearSelectionInternal();
@@ -14833,7 +16125,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 	zoomTo(node) {
 		if (this._zoomKey === node.item.key) return;
 		this.#pendingFlip = this.#planFlip(node.item.key);
-		this._zoomKey = node.item.key;
+		this.#setZoom(node.item.key);
 		this.tickled.clearTickled();
 		const depth = findTreemapPath(this.#effectiveRoot, node.item.key)?.length;
 		const absoluteDepth = depth === void 0 ? -1 : depth - 2;
@@ -14865,7 +16157,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		const previous = this.focusedNode;
 		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
 		const absoluteDepth = path === void 0 ? -1 : path.length - 2;
-		this._zoomKey = void 0;
+		this.#setZoom(void 0);
 		this.tickled.clearTickled();
 		this.dispatchEvent(new CustomEvent(`zoom`, {
 			detail: {
@@ -14885,6 +16177,25 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		}));
 		this.requestUpdate();
 	}
+	/** An explicit zoom change: supersedes any saved zoom still waiting. */
+	#setZoom(key) {
+		this._zoomKey = key;
+		this.#viewState.zoomed(key);
+	}
+	/** Zoom set by view-state reconcile. `restored` fires `zoom` like an explicit zoom, without animating. */
+	#restoreZoom(key, restored) {
+		this._zoomKey = key;
+		if (!restored) return;
+		const path = key === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, key);
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node: path?.at(-1),
+				depth: path === void 0 ? -1 : path.length - 2
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	/**
 	* Work out (before `_zoomKey` changes) whether the upcoming zoom should
 	* animate, and how — see `FlipPlan`. Returns `undefined` to skip the
@@ -14994,10 +16305,20 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 			const ancestor = this.#resolveKeyPath(path.slice(0, path.length - this.maxDepth));
 			if (ancestor) this.zoomTo(ancestor);
 		}
-		this.tickled.setTickled(key);
+		this.#setKeyboardCursor(key);
 		this.requestUpdate();
 		return true;
 	}
+	/** Move the cursor as keyboard / search navigation does — recorded as `focus` in the view state. */
+	#setKeyboardCursor(key) {
+		this.tickled.setTickled(key);
+		this.#viewState.keyboardCursorMoved();
+	}
+	#onTilePointerEnter(key) {
+		const before = this.tickled.tickledId;
+		this.tickled.handlePointerEnter(key);
+		if (this.tickled.tickledId !== before) this.#viewState.pointerCursorMoved();
+	}
 	#resolveKeyPath(keys) {
 		let current = this.#effectiveRoot;
 		for (const key of keys) {
@@ -15027,6 +16348,25 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 			depth: r.depth
 		}));
 	}
+	/**
+	* Snapshot selection, zoom path and keyboard cursor as plain JSON, keyed by
+	* `item.key`. Includes pending state for keys not currently loaded.
+	*/
+	getViewState(options) {
+		return this.#viewState.get(options);
+	}
+	/**
+	* Apply saved view state. Fields present replace the current ones; keys
+	* that aren't loaded yet are applied as they appear — a deep `zoom` loads
+	* its ancestors via `loadChildren` / `model` when `restoreLoads`.
+	*/
+	setViewState(state) {
+		this.#viewState.set(state);
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#viewState.clearPending();
+	}
 	#matchesFilter(node, depth) {
 		if (!this.filterPredicate) return true;
 		if (this.filterPredicate(node, depth)) return true;
@@ -15128,7 +16468,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		const moveTo = (rect) => {
 			if (!rect) return;
 			event.preventDefault();
-			this.tickled.setTickled(rect.node.item.key);
+			this.#setKeyboardCursor(rect.node.item.key);
 			if (this.interactionMode === `implicit`) this.select(rect.node);
 		};
 		switch (event.key) {
@@ -15309,7 +16649,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 			e.stopPropagation();
 			this.#handleItemDblClick(rect);
 		}}
-        @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
+        @pointerenter=${() => this.#onTilePointerEnter(node.item.key)}
       >
         ${showHeader ? html`<div class="tile-header" part="tile-header"><span class="treemap-label" part="label">${node.item.label}</span></div>` : html`<span class="treemap-label ${hideLabel ? `hide-label` : ``}" part="label">${node.item.label}</span>`}
         ${childrenContent}
@@ -15623,6 +16963,7 @@ __decorate([property({
 	reflect: true
 })], TreemapListElement.prototype, "searchModes", void 0);
 __decorate([state()], TreemapListElement.prototype, "_zoomKey", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "restoreLoads", void 0);
 TreemapListElement = __decorate([safeCustomElement(`ixfx-treemap-list`)], TreemapListElement);
 //#endregion
 //#region src/twosplit-layout/split-layout.ts
@@ -15649,6 +16990,10 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 		this.#nestedSplitInitialSizeA = ``;
 		this.#pendingNestedUpdate = null;
 		this.#hysteresisThreshold = .1;
+		this.#viewState = new ViewStateController(this, {
+			kind: `twosplit-layout`,
+			capture: () => this.getViewState()
+		});
 		this.#onResizeHandleDown = (event) => {
 			event.preventDefault();
 			const zoneEl = this.getZone();
@@ -15665,6 +17010,7 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 			if (zoneEl) zoneEl.classList.remove(`user-resizing`);
 			window.removeEventListener(`pointerup`, this.#onResizeHandleUp);
 			window.removeEventListener(`pointermove`, this.#onResizeHandleMove);
+			if (this.sizeA !== this.#startSizeA || this.sizeB !== this.#startSizeB) this.#viewState.notify();
 		};
 		this.#onResizeHandleMove = (event) => {
 			const bounds = this.#elementBounds;
@@ -15784,9 +17130,11 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 			if (nestedSplit) {
 				const nestedZoneEl = nestedSplit.getZone();
 				if (nestedZoneEl) nestedZoneEl.classList.remove(`user-resizing`);
+				if (#viewState in nestedSplit && nestedSplit.sizeA !== this.#nestedSplitInitialSizeA) nestedSplit.#viewState.notify();
 			}
 			window.removeEventListener(`pointerup`, this.#onCornerResizeUp);
 			window.removeEventListener(`pointermove`, this.#onCornerResizeMove);
+			if (this.sizeA !== this.#startSizeA || this.sizeB !== this.#startSizeB) this.#viewState.notify();
 		};
 		this.#onCornerResizeMove = (event) => {
 			const outerBounds = this.#elementBounds;
@@ -15854,6 +17202,7 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 	#collapsedAPointerAtCollapse;
 	#collapsedBPointerAtCollapse;
 	#hysteresisThreshold;
+	#viewState;
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#observer?.disconnect();
@@ -15863,7 +17212,7 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`) || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) this.#updateCornerPosition();
-		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) this.#updateDataCollapsed();
+		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`) || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) this.#updateDataCollapsed();
 	}
 	#updateDataCollapsed() {
 		if (this.collapsedA) this.setAttribute(`data-collapsed-a`, ``);
@@ -16022,6 +17371,31 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 			else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) cornerZone.style.cursor = `nesw-resize`;
 		}
 	}
+	/** Snapshot both sides' size and collapse. */
+	getViewState(options) {
+		return this.#viewState.shape({ layout: {
+			a: sideState(this.sizeA, this.collapsedA),
+			b: sideState(this.sizeB, this.collapsedB)
+		} }, options);
+	}
+	/** Restore sizes / collapse. A side missing from `layout` is left as it is. */
+	setViewState(state) {
+		if (!this.#viewState.accepts(state) || !state.layout) return;
+		const { a, b } = state.layout;
+		this.#viewState.restoring(() => {
+			if (typeof a?.size === `string`) {
+				this.sizeA = a.size;
+				this.collapsedA = a.collapsed === true;
+			}
+			if (typeof b?.size === `string`) {
+				this.sizeB = b.size;
+				this.collapsedB = b.collapsed === true;
+			}
+			this.#viewState.notify();
+		});
+	}
+	/** Both slots always exist, so nothing is ever pending. */
+	clearPendingViewState() {}
 	getZone() {
 		if (!this.shadowRoot) return;
 		const el = this.shadowRoot.querySelector(`#zone`);
@@ -16209,6 +17583,12 @@ __decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "minSi
 __decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "maxSizeB", void 0);
 __decorate([state()], TwoSplitLayoutElement.prototype, "_hasCorner", void 0);
 TwoSplitLayoutElement = __decorate([safeCustomElement(`ixfx-twosplit-layout`)], TwoSplitLayoutElement);
+function sideState(size, collapsed) {
+	return collapsed ? {
+		size,
+		collapsed
+	} : { size };
+}
 //#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
@@ -16267,4 +17647,4 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EMPTY_GROUP_LABEL, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, 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, ListGroupHeaderElement, 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, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, 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, computeSunburstLayout, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, decomposeViewIsometry, defaultGroupLabel, defaultSunburstValueAccessor, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, 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, isSunburstAncestorId, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, partitionByGroup, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveGroupKey, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, snapshotNonEmptyStacks, startListItemOutAnimation, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toGroupKey, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EMPTY_FLAGS, EMPTY_GROUP_LABEL, EMPTY_KEYS, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, 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, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, MAX_PENDING_KEYS, 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, SCROLL_HOVER_SUPPRESS_ATTR, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VIEW_STATE_CHANGE, VIEW_STATE_VERSION, VerticalListElement, ViewStateController, XyPad, addPanelToStack, anchorFromRow, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bindViewState, bottomDrawerCommandId, buildHighlightTargets, buildModel, capFlags, capKeys, captionForEntry, captureElementScroll, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeSunburstLayout, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createScrollHoverGuard, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, decomposeViewIsometry, defaultGroupLabel, defaultSunburstValueAccessor, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleKeyPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, findTreemapNode, findTreemapPath, flagsFromRecord, flagsToRecord, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, isSunburstAncestorId, isViewStateful, keyForElement, keysAsFlags, keysToArray, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, onUserScrollIntent, panelGapIndex, parseColourScaleAttr, parseLayout, partitionByGroup, partitionFlags, partitionKeys, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveGroupKey, resolveIcicleKeyPath, resolveLeafPath, resolveTracks, restoreElementScroll, rotationIsometry, scrollToOffset, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, snapshotNonEmptyStacks, startListItemOutAnimation, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toGroupKey, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, withoutFlag, wrapRoot };