@ixfx/components 0.15.4 → 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-Dx3l3dxw.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,6 +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-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";
@@ -1407,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;
@@ -3514,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) => {
@@ -4158,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;
@@ -4190,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;
@@ -4200,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();
@@ -4222,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,
@@ -4272,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();
@@ -4309,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;
@@ -4341,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) {
@@ -4475,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
@@ -4536,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);
@@ -4581,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,
@@ -4640,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) {
@@ -4687,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) {
@@ -4836,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;
@@ -4849,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();
@@ -5345,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`
@@ -5384,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)`}
@@ -5394,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>
@@ -6767,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`;
 /**
@@ -7444,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` },
@@ -7542,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();
@@ -8062,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 = {
@@ -8083,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`,
@@ -8130,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;
 			},
@@ -8152,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. */
@@ -8259,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;
@@ -8311,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),
@@ -8338,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();
@@ -8383,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);
@@ -8451,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. */
@@ -8489,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
@@ -8505,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;
@@ -8790,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);
@@ -8824,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
@@ -8877,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) {
@@ -8894,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`
@@ -8922,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 = {
@@ -8937,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;
@@ -8973,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);
@@ -8985,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) {
@@ -9006,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. */
@@ -9077,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()) {
@@ -9126,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),
@@ -9153,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();
@@ -9189,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,
@@ -9217,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: {
@@ -9241,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;
@@ -9276,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);
 	}
@@ -9287,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).
@@ -9392,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();
@@ -9479,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);
@@ -9507,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>
@@ -9552,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
 		];
 	}
 };
@@ -9785,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
@@ -9810,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
@@ -9861,6 +10689,7 @@ var MulticolColumnController = class {
 	#dataProvider;
 	#onSelectionChange;
 	#onRequestData;
+	#onScroll;
 	#abortController = void 0;
 	#host;
 	#allRow;
@@ -9868,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;
@@ -9878,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,
@@ -9953,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() {
@@ -9978,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) => {
@@ -9999,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();
@@ -10006,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;
@@ -10028,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;
@@ -10063,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();
@@ -10072,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 {
@@ -10085,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 {
@@ -10108,6 +11007,7 @@ var MulticolColumnController = class {
 				this.#syncingSelection = false;
 			}
 			this.#syncAllRow();
+			this.#tryPendingScroll();
 		});
 	}
 	#syncAllRow() {
@@ -10139,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) {
@@ -10169,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);
@@ -10430,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">
@@ -10441,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;
@@ -10458,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"
@@ -10521,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) {
@@ -10600,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;
 		};
@@ -10733,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,
@@ -10769,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,
@@ -10794,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`;
@@ -10873,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;
@@ -14535,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) {
@@ -14556,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`
@@ -14594,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;
@@ -14689,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;
@@ -14753,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) {
@@ -14767,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),
@@ -14794,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();
@@ -14832,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;
@@ -14864,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: {
@@ -14884,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
@@ -14993,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) {
@@ -15026,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;
@@ -15127,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) {
@@ -15308,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}
@@ -15622,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
@@ -15648,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();
@@ -15664,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;
@@ -15783,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;
@@ -15853,6 +17202,7 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
 	#collapsedAPointerAtCollapse;
 	#collapsedBPointerAtCollapse;
 	#hysteresisThreshold;
+	#viewState;
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#observer?.disconnect();
@@ -15862,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`, ``);
@@ -16021,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`);
@@ -16208,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) {
@@ -16266,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, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, defaultGroupLabel, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, partitionByGroup, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveGroupKey, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, snapshotNonEmptyStacks, startListItemOutAnimation, 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 };