@ixfx/components 0.15.5 → 0.16.1

package/dist/{sunbursttree-list-yXwS-uEI.js → sunbursttree-list-B_M0YTEA.js}

@@ -1,8 +1,11 @@
 import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-CgbL-OlS.js";
+import { a as capKeys, l as keysToArray, n as EMPTY_KEYS } from "./pending-BGidHppL.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { a as resolveKeyPath } from "./tree-CftHwtEb.js";
 import { LitElement, css, html, nothing, svg } from "lit";
 import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -313,6 +316,26 @@ function targetHues(layout, view, zoomId) {
 function siblingShade(index, setSize) {
 	return setSize <= 1 ? 0 : (index + .5) / setSize - .5;
 }
+/** Settled visual for every arc to draw in `view`: the centre plus `maxDepth` rings. */
+function computeTargets(input) {
+	const { layout, view, rings, zoomId, maxDepth } = input;
+	const targets = /* @__PURE__ */ new Map();
+	if (zoomId === void 0) return targets;
+	const hues = targetHues(layout, view, zoomId);
+	for (const entry of layout.values()) {
+		const p = projectArc(entry, view);
+		if (p.depth < -1 || p.depth >= maxDepth) continue;
+		if (p.depth === -1 ? entry.id !== zoomId : !hues.has(entry.id)) continue;
+		if (p.depth >= 0 && arcLength(p.a0, p.a1, arcRadii(p.depth, rings).outer) < input.minArcLength) continue;
+		targets.set(entry.id, {
+			...p,
+			hue: hues.get(entry.id) ?? input.displayed.get(entry.id)?.hue ?? 0,
+			shade: siblingShade(entry.index, entry.setSize),
+			opacity: 1
+		});
+	}
+	return targets;
+}
 //#endregion
 //#region src/sunburst-tree/keyboard.ts
 /**
@@ -343,6 +366,45 @@ function sunburstKeyTarget(arcs, currentId, key) {
 	}
 }
 //#endregion
+//#region src/sunburst-tree/render.ts
+function renderSunburstLabels(input) {
+	const labels = [];
+	const guides = [];
+	for (const [id, visual] of input.displayed) {
+		const entry = input.layout.get(id);
+		if (!entry || visual.opacity < .05) continue;
+		const place = labelPlacement(visual, entry.node.item.label, input.rings, input.fontSize, { curved: input.curved });
+		if (!place) continue;
+		const style = `--arc-hue:${visual.hue.toFixed(2)};opacity:${visual.opacity.toFixed(3)}`;
+		if (place.kind === `curved`) {
+			const guideId = `${input.idPrefix}${guides.length}`;
+			guides.push(svg`<path id=${guideId} d=${place.path}></path>`);
+			labels.push(svg`<text class="sunburst-label curved" part="label" style=${style}
+        ><textPath href="#${guideId}" startOffset="50%">${place.text}</textPath></text>`);
+		} else labels.push(svg`<text
+        class="sunburst-label"
+        part="label"
+        transform="translate(${place.x.toFixed(2)} ${place.y.toFixed(2)}) rotate(${place.rotate.toFixed(2)})"
+        style=${style}
+      >${place.text}</text>`);
+	}
+	return svg`<defs>${guides}</defs>${labels}`;
+}
+/** Label, value and share of the centre (`zoom`), or of the tickled arc when there is one. */
+function renderSunburstReadout(zoom, tickled, rings, fontSize, formatter) {
+	if (!zoom) return nothing;
+	const shown = tickled ?? zoom;
+	const maxChars = Math.max(4, Math.floor(rings.center * 1.7 / (fontSize * .6)));
+	const label = shown.node.item.label;
+	const text = label.length <= maxChars ? label : `${label.slice(0, maxChars - 1)}…`;
+	const share = tickled && zoom.value > 0 ? ` · ${(tickled.value / zoom.value * 100).toFixed(tickled.value / zoom.value < .1 ? 1 : 0)}%` : ``;
+	const line = fontSize * 1.3;
+	return svg`<g class="center-readout" part="center-readout" aria-hidden="true">
+    <text class="center-label" y=${(-line / 2).toFixed(2)}>${text}</text>
+    <text class="center-meta" y=${(line / 2).toFixed(2)}>${formatter(shown.value, shown.node)}${share}</text>
+  </g>`;
+}
+//#endregion
 //#region src/sunburst-tree/styles.ts
 /**
 * Shadow-DOM styles for `ixfx-sunbursttree-list`.
@@ -467,6 +529,98 @@ const sunburstTreeStyles = css`
   }
 `;
 //#endregion
+//#region src/sunburst-tree/sunburst-view-state.ts
+/** Index the loaded tree by id, node and key. */
+function indexSunburstTree(root) {
+	const byId = /* @__PURE__ */ new Map();
+	const idOf = /* @__PURE__ */ new Map();
+	const byKey = /* @__PURE__ */ new Map();
+	const visit = (node, id) => {
+		byId.set(id, node);
+		idOf.set(node, id);
+		if (!byKey.has(node.item.key)) byKey.set(node.item.key, node);
+		for (const child of node.children ?? []) visit(child, sunburstChildId(id, child.item.key));
+	};
+	if (root) visit(root, root.item.key);
+	return {
+		byId,
+		idOf,
+		byKey
+	};
+}
+/**
+* As `reconcileSelection` (tree view state), but live nodes are re-found by
+* key path rather than by bare key:
+* - selected nodes still in the tree stay; replaced ones (immutable rebuild)
+*   swap for the node now at their old path; ones whose path has gone go
+*   pending (their `item.key`)
+* - pending keys that resolve (and pass `canSelect`) are selected
+*/
+function reconcileSunburstSelection(input) {
+	const { selected, pending, primary } = input;
+	const unchanged = {
+		selected,
+		pending,
+		primary,
+		restored: false,
+		changed: false
+	};
+	if (selected.size === 0 && pending.size === 0) return unchanged;
+	const previousIds = /* @__PURE__ */ new Map();
+	for (const entry of input.previousLayout.values()) previousIds.set(entry.node, entry.id);
+	if (pending.size === 0 && [...selected].every((node) => {
+		const id = previousIds.get(node);
+		return id !== void 0 && findSunburstNodeById(input.root, id) === node;
+	})) return unchanged;
+	const { byId, idOf, byKey } = indexSunburstTree(input.root);
+	const locate = (node) => {
+		if (idOf.has(node)) return node;
+		const id = previousIds.get(node);
+		return id === void 0 ? void 0 : byId.get(id);
+	};
+	const next = /* @__PURE__ */ new Set();
+	const nextPending = /* @__PURE__ */ new Set();
+	let changed = false;
+	for (const node of selected) {
+		const current = locate(node);
+		if (current) {
+			next.add(current);
+			changed ||= current !== node;
+		} else {
+			nextPending.add(node.item.key);
+			changed = true;
+		}
+	}
+	let restored;
+	for (const key of pending) {
+		const node = byKey.get(key);
+		if (node && input.canSelect(node)) {
+			next.add(node);
+			restored = node;
+			changed = true;
+		} else nextPending.add(key);
+	}
+	if (!changed) return unchanged;
+	if (input.single && next.size > 0) {
+		const only = restored ?? [...next].at(-1);
+		return {
+			selected: /* @__PURE__ */ new Set([only]),
+			pending: EMPTY_KEYS,
+			primary: only,
+			restored: restored !== void 0,
+			changed: true
+		};
+	}
+	const located = primary && locate(primary);
+	return {
+		selected: next,
+		pending: capKeys(nextPending),
+		primary: located && next.has(located) ? located : [...next].at(-1),
+		restored: restored !== void 0,
+		changed: true
+	};
+}
+//#endregion
 //#region src/sunburst-tree/tween.ts
 function easeInOutCubic(t) {
 	return t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
@@ -565,6 +719,12 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
 		this._zoomId = void 0;
+		this.restoreLoads = true;
+		this.#viewState = new ViewStateController(this, {
+			kind: `sunbursttree-list`,
+			capture: () => this.getViewState()
+		});
+		this.#pendingSelected = EMPTY_KEYS;
 		this._size = {
 			width: 0,
 			height: 0
@@ -648,6 +808,12 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		if (this._zoomId === void 0) return void 0;
 		return findSunburstNodeById(this.#effectiveRoot, this._zoomId);
 	}
+	#viewState;
+	/** Saved selection for keys not (yet) loaded. */
+	#pendingSelected;
+	/** Saved zoom path not (yet) resolvable. */
+	#pendingZoom;
+	#pendingFocus;
 	#layout;
 	#view;
 	#rings;
@@ -759,14 +925,16 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
 	}
 	willUpdate(changed) {
-		if (changed.has(`root`) && changed.get(`root`) !== void 0) this.#remapSelection();
+		if (changed.has(`root`) && changed.get(`root`) !== void 0) this.#anchorIndex = void 0;
 		if (changed.has(`interactionMode`) && changed.get(`interactionMode`) !== void 0) {
 			this.#anchorIndex = void 0;
 			this.#clearSelectionInternal();
 		}
 		if (this._layoutDirty) {
 			this._layoutDirty = false;
+			this.#reconcileViewState();
 			this.#retarget();
+			this.#viewState.restoring(() => this.#reconcileFocus());
 		}
 	}
 	updated(changed) {
@@ -776,6 +944,7 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		}
 		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		this.#ensureVisibleChildren();
+		this.#continueRestoreLoads();
 	}
 	#outerRadius() {
 		const width = this._size.width || FALLBACK_SIZE;
@@ -797,7 +966,15 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		const zoomId = this.#zoomEntryId;
 		const view = sunburstViewFor(zoomId === void 0 ? void 0 : layout.get(zoomId));
 		const rings = computeRings(this.#outerRadius(), maxDepth, this.centerRatio);
-		const targets = this.#computeTargets(layout, view, rings, zoomId, maxDepth);
+		const targets = computeTargets({
+			layout,
+			view,
+			rings,
+			zoomId,
+			maxDepth,
+			minArcLength: this.minArcLength,
+			displayed: this.#displayed
+		});
 		this.#layout = layout;
 		this.#view = view;
 		this.#rings = rings;
@@ -839,24 +1016,6 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		});
 		this.#startTransition(transition);
 	}
-	#computeTargets(layout, view, rings, zoomId, maxDepth) {
-		const targets = /* @__PURE__ */ new Map();
-		if (zoomId === void 0) return targets;
-		const hues = targetHues(layout, view, zoomId);
-		for (const entry of layout.values()) {
-			const p = projectArc(entry, view);
-			if (p.depth < -1 || p.depth >= maxDepth) continue;
-			if (p.depth === -1 ? entry.id !== zoomId : !hues.has(entry.id)) continue;
-			if (p.depth >= 0 && arcLength(p.a0, p.a1, arcRadii(p.depth, rings).outer) < this.minArcLength) continue;
-			targets.set(entry.id, {
-				...p,
-				hue: hues.get(entry.id) ?? this.#displayed.get(entry.id)?.hue ?? 0,
-				shade: siblingShade(entry.index, entry.setSize),
-				opacity: 1
-			});
-		}
-		return targets;
-	}
 	#startTransition(transition) {
 		if ((prefersReducedMotion() ? 0 : this.animationDuration) <= 0 || !this.isConnected) {
 			this.#transition = void 0;
@@ -870,31 +1029,116 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		this.#raf ??= requestAnimationFrame(this.#tick);
 	}
 	#tick;
-	/** After `root` is replaced, carry the selection over by key path. */
-	#remapSelection() {
-		if (this._selectedNodes.size === 0) return;
-		const idOf = /* @__PURE__ */ new Map();
-		for (const entry of this.#layout.values()) idOf.set(entry.node, entry.id);
+	/**
+	* Snapshot selection, zoom path and keyboard cursor as plain JSON, keyed by
+	* `item.key`. Includes pending state for keys not currently loaded.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const tickled = this.tickled.inputMode === `keyboard` ? this.tickled.tickledId : void 0;
+		const focus = tickled === void 0 ? void 0 : sunburstIdToPath(tickled).at(-1);
+		return this.#viewState.shape({
+			selected: keysToArray([...this._selectedNodes].map((n) => n.item.key), withPending ? this.#pendingSelected : []),
+			zoom: (withPending ? this.#pendingZoom : void 0) ?? this.#zoomPath(),
+			focus: focus ?? (withPending ? this.#pendingFocus : 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) this.#commitSelection(/* @__PURE__ */ new Set());
+			}
+			if (state.zoom) this.#pendingZoom = [...state.zoom];
+			if (state.focus !== void 0) this.#pendingFocus = state.focus;
+			this.#reconcileViewState();
+			if (this.#pendingZoom !== void 0) this.#setZoom(void 0);
+		});
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#pendingZoom = void 0;
+		this.#pendingFocus = void 0;
+	}
+	#zoomPath() {
+		return this._zoomId === void 0 ? [] : sunburstIdToPath(this._zoomId).slice(1);
+	}
+	/** Move zoom / selection whose path has gone to pending; apply pending state now resolvable. */
+	#reconcileViewState() {
 		const root = this.#effectiveRoot;
-		const remap = (node) => {
-			const id = node === void 0 ? void 0 : idOf.get(node);
-			return id === void 0 ? void 0 : findSunburstNodeById(root, id);
-		};
-		this._selectedNodes = new Set([...this._selectedNodes].map(remap).filter((n) => n !== void 0));
-		this.selectedNode = remap(this.selectedNode) ?? [...this._selectedNodes].at(-1);
-		this.#anchorIndex = void 0;
+		this.#viewState.restoring(() => {
+			if (this._zoomId !== void 0 && !findSunburstNodeById(root, this._zoomId)) {
+				this.#pendingZoom ??= this.#zoomPath();
+				this._zoomId = void 0;
+				this.#viewState.notify(`data`);
+			}
+			const zoom = this.#pendingZoom;
+			if (root && zoom !== void 0 && resolveKeyPath(root, zoom, () => false).status === `found`) {
+				this.#pendingZoom = void 0;
+				this.#setZoom(sunburstPathToId([root.item.key, ...zoom]));
+			}
+			if (this._selectedNodes.size > 0 || this.#pendingSelected.size > 0) this.#reconcileSelection(root);
+		});
+	}
+	#reconcileSelection(root) {
+		const sel = reconcileSunburstSelection({
+			root,
+			previousLayout: this.#layout,
+			selected: this._selectedNodes,
+			primary: this.selectedNode,
+			pending: this.#pendingSelected,
+			canSelect: (node) => this.#canSelect(node),
+			single: this.interactionMode === `implicit`
+		});
+		if (!sel.changed) return;
+		this.#pendingSelected = sel.pending;
+		if (sel.restored) this.#commitSelection(new Set(sel.selected), sel.primary);
+		else {
+			this._selectedNodes = new Set(sel.selected);
+			this.selectedNode = sel.primary;
+			this.#viewState.notify(`data`);
+		}
+	}
+	/** Runs after layout: a cursor whose arc has gone goes pending; a pending one lands once its arc is drawn. */
+	#reconcileFocus() {
+		const tickled = this.tickled.tickledId;
+		if (tickled !== void 0 && !this.#layout.has(tickled)) {
+			if (this.tickled.inputMode === `keyboard`) this.#pendingFocus ??= sunburstIdToPath(tickled).at(-1);
+			this.tickled.clearTickled();
+		}
+		const focus = this.#pendingFocus;
+		const arc = focus === void 0 ? void 0 : this.#visibleArcs().find((a) => a.node.item.key === focus);
+		if (!arc) return;
+		this.#pendingFocus = void 0;
+		this.tickled.setInputMode(`keyboard`);
+		this.tickled.setTickled(arc.id);
+	}
+	/** Load the next unloaded node along a pending zoom path (one load at a time). */
+	#continueRestoreLoads() {
+		const root = this.#effectiveRoot;
+		const zoom = this.#pendingZoom;
+		if (!this.restoreLoads || !root || zoom === void 0 || !this.model && !this.loadChildren) return;
+		const next = resolveKeyPath(root, zoom, (node) => node.item.isLeaf !== true);
+		if (next.status !== `load`) return;
+		const id = sunburstPathToId([root.item.key, ...zoom.slice(0, next.depth + 1)]);
+		if (!this.#pendingIds.has(id)) this.#loadChildren(id, next.node, next.depth);
 	}
 	#ensureVisibleChildren() {
 		if (!this.model && !this.loadChildren) return;
 		for (const id of this.#targets.keys()) {
 			const entry = this.#layout.get(id);
 			if (!entry || entry.node.children !== void 0 || entry.node.item.isLeaf === true || this.#pendingIds.has(id)) continue;
-			this.#loadChildren(entry);
+			this.#loadChildren(id, entry.node, entry.depth - 1);
 		}
 	}
-	async #loadChildren(entry) {
-		const { id, node } = entry;
-		const depth = entry.depth - 1;
+	async #loadChildren(id, node, depth) {
 		this.#pendingIds.add(id);
 		const controller = new AbortController();
 		this.#aborters.set(id, controller);
@@ -928,6 +1172,8 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		const previous = this._selectedNodes;
 		this._selectedNodes = next;
 		this.selectedNode = primary;
+		if (!this.#viewState.isRestoring) this.#pendingSelected = EMPTY_KEYS;
+		this.#viewState.notify();
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
 				selected: new Set(next),
@@ -947,6 +1193,7 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		this.#commitSelection(next, this.selectedNode === node ? [...next].at(-1) : this.selectedNode);
 	}
 	clearSelection() {
+		this.#pendingSelected = EMPTY_KEYS;
 		if (this._selectedNodes.size > 0) this.#commitSelection(/* @__PURE__ */ new Set());
 	}
 	selectAll() {
@@ -963,12 +1210,14 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		return findSunburstId(this.#effectiveRoot, (n) => n === node);
 	}
 	#setZoom(id) {
+		if (!this.#viewState.isRestoring) this.#pendingZoom = void 0;
 		const zoomId = id === this.#effectiveRoot?.item.key ? void 0 : id;
 		if (zoomId === this._zoomId) return;
 		const previousId = this._zoomId;
 		const previous = this.focusedNode;
 		this._zoomId = zoomId;
 		this.tickled.clearTickled();
+		this.#viewState.notify();
 		const node = this.focusedNode;
 		const depthOf = (key) => key === void 0 ? -1 : sunburstIdToPath(key).length - 2;
 		this.dispatchEvent(new CustomEvent(`zoom`, {
@@ -1151,6 +1400,8 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
 		event.preventDefault();
 		this.tickled.setInputMode(`keyboard`);
 		this.tickled.setTickled(target);
+		this.#pendingFocus = void 0;
+		this.#viewState.notify();
 		const entry = this.#layout.get(target);
 		if (entry && this.interactionMode === `implicit`) this.select(entry.node);
 	}
@@ -1202,53 +1453,13 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
       @dblclick=${() => this.#handleArcDblClick(entry)}
       @pointerenter=${() => this.tickled.handlePointerEnter(id)}
     ></path>`;
-	}
-	#renderLabels() {
-		if (this.disableLabels) return nothing;
-		const labels = [];
-		const guides = [];
-		for (const [id, visual] of this.#displayed) {
-			const entry = this.#layout.get(id);
-			if (!entry || visual.opacity < .05) continue;
-			const place = labelPlacement(visual, entry.node.item.label, this.#rings, this.#fontSize, { curved: this.curvedLabels });
-			if (!place) continue;
-			const style = `--arc-hue:${visual.hue.toFixed(2)};opacity:${visual.opacity.toFixed(3)}`;
-			if (place.kind === `curved`) {
-				const guideId = `${this.#labelIdPrefix}${guides.length}`;
-				guides.push(svg`<path id=${guideId} d=${place.path}></path>`);
-				labels.push(svg`<text class="sunburst-label curved" part="label" style=${style}
-          ><textPath href="#${guideId}" startOffset="50%">${place.text}</textPath></text>`);
-			} else labels.push(svg`<text
-          class="sunburst-label"
-          part="label"
-          transform="translate(${place.x.toFixed(2)} ${place.y.toFixed(2)}) rotate(${place.rotate.toFixed(2)})"
-          style=${style}
-        >${place.text}</text>`);
-		}
-		return svg`<defs>${guides}</defs>${labels}`;
-	}
-	/** Label, value and share of the centre (or of the tickled arc). */
-	#renderReadout(zoomId) {
-		const zoom = zoomId === void 0 ? void 0 : this.#layout.get(zoomId);
-		if (!zoom) return nothing;
-		const tickledId = this.tickled.tickledId;
-		const tickled = tickledId === void 0 ? void 0 : this.#layout.get(tickledId);
-		const shown = tickled ?? zoom;
-		const maxChars = Math.max(4, Math.floor(this.#rings.center * 1.7 / (this.#fontSize * .6)));
-		const label = shown.node.item.label;
-		const text = label.length <= maxChars ? label : `${label.slice(0, maxChars - 1)}…`;
-		const share = tickled && zoom.value > 0 ? ` · ${(tickled.value / zoom.value * 100).toFixed(tickled.value / zoom.value < .1 ? 1 : 0)}%` : ``;
-		const line = this.#fontSize * 1.3;
-		return svg`<g class="center-readout" part="center-readout" aria-hidden="true">
-      <text class="center-label" y=${(-line / 2).toFixed(2)}>${text}</text>
-      <text class="center-meta" y=${(line / 2).toFixed(2)}>${this.valueFormatter(shown.value, shown.node)}${share}</text>
-    </g>`;
 	}
 	render() {
 		if (!this.#effectiveRoot) return html`<div class="empty-state">No data</div>${this.search.renderField()}`;
 		const width = this._size.width || FALLBACK_SIZE;
 		const height = this._size.height || FALLBACK_SIZE;
 		const zoomId = this.#zoomEntryId;
+		const tickledId = this.tickled.tickledId;
 		return html`
       <svg
         class="sunburst"
@@ -1261,8 +1472,15 @@ let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
         @pointerleave=${() => this.tickled.clearTickled()}
       >
         <g class="arcs">${repeat(this.#displayed, ([id]) => id, ([id, visual]) => this.#renderArc(id, visual, zoomId))}</g>
-        <g class="labels">${this.#renderLabels()}</g>
-        ${this.#renderReadout(zoomId)}
+        <g class="labels">${this.disableLabels ? nothing : renderSunburstLabels({
+			displayed: this.#displayed,
+			layout: this.#layout,
+			rings: this.#rings,
+			fontSize: this.#fontSize,
+			curved: this.curvedLabels,
+			idPrefix: this.#labelIdPrefix
+		})}</g>
+        ${renderSunburstReadout(zoomId === void 0 ? void 0 : this.#layout.get(zoomId), tickledId === void 0 ? void 0 : this.#layout.get(tickledId), this.#rings, this.#fontSize, this.valueFormatter)}
       </svg>
       ${this.search.renderField()}
     `;
@@ -1331,6 +1549,7 @@ __decorate([property({
 	reflect: true
 })], SunburstTreeListElement.prototype, "searchModes", void 0);
 __decorate([state()], SunburstTreeListElement.prototype, "_zoomId", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "restoreLoads", void 0);
 __decorate([state()], SunburstTreeListElement.prototype, "_size", void 0);
 SunburstTreeListElement = __decorate([safeCustomElement(`ixfx-sunbursttree-list`)], SunburstTreeListElement);
 //#endregion

package/dist/{sunbursttree-list--Z0uyh8O.d.ts → sunbursttree-list-DePuFYlU.d.ts}

@@ -1,6 +1,8 @@
-import { A as TreeTickleEvent, C as TreeItemDblClickEvent, E as TreeSearchHost, O as TreeSelectEvent, a as TreeComponent, i as TreeCollapseEvent, j as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-C6UHO-w9.js";
+import { C as TreeItemDblClickEvent, E as TreeSearchHost, M as TreeDataModel, a as TreeComponent, i as TreeCollapseEvent, j as TreeTickleEvent, k as TreeSelectEvent, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DgfkxmVY.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import { S as ListSearchController } from "./index-KN2MW_xD.js";
+import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
+import "./index-9ttcdwlL.js";
+import { S as ListSearchController } from "./index-CUErGhCg.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 //#region src/sunburst-tree/types.d.ts
@@ -120,6 +122,24 @@ type SunburstLabelPlacement = {
 /** Ids are key paths; keys only need to be unique among siblings. */
 declare const SUNBURST_PATH_SEPARATOR = "";
 //#endregion
+//#region src/sunburst-tree/sunburst-view-state.d.ts
+/**
+ * Pure helpers behind `ixfx-sunbursttree-list` view state. Arcs are
+ * identified by key *path* (keys need only be unique among siblings), so live
+ * selection follows its path across data changes; saved keys — which are
+ * bare `item.key`s — resolve to the first node, depth-first, carrying them.
+ * See `docs/infra-view-state.md`.
+ */
+/** `ixfx-sunbursttree-list` view state: `selected`, `focus`, plus the zoom path. */
+type SunburstViewState = ViewStateBase & {
+  /**
+   * Keys from the root's children down to the centre node; `[]` = the full
+   * tree. A path because keys are only unique among siblings, and so a
+   * lazily-loaded tree can be opened down to it, one load at a time.
+   */
+  readonly zoom?: readonly string[];
+};
+//#endregion
 //#region src/sunburst-tree/sunbursttree-list.d.ts
 /** Fired when the zoom root changes. `node` is `undefined` on zoom-out to the full tree. */
 type SunburstZoomDetail = {
@@ -209,6 +229,11 @@ declare class SunburstTreeListElement extends LitElement implements TreeComponen
   get focusedNode(): TreeNode | undefined;
   /** Id (key path) of the zoom node; `undefined` = the true root. */
   private _zoomId;
+  /**
+   * Whether restoring a saved zoom may call `loadChildren` / `model` to load
+   * the nodes along its path (one at a time). Default `true`.
+   */
+  restoreLoads: boolean;
   private _size;
   readonly search: ListSearchController<{
     node: TreeNode;
@@ -223,6 +248,18 @@ declare class SunburstTreeListElement extends LitElement implements TreeComponen
   disconnectedCallback(): void;
   protected willUpdate(changed: PropertyValues): void;
   protected updated(changed: PropertyValues): void;
+  /**
+   * Snapshot selection, zoom path and keyboard cursor as plain JSON, keyed by
+   * `item.key`. Includes pending state for keys not currently loaded.
+   */
+  getViewState(options?: GetViewStateOptions<SunburstViewState>): SunburstViewState;
+  /**
+   * 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: Partial<SunburstViewState>): void;
+  clearPendingViewState(): void;
   select(node: TreeNode): void;
   deselect(node: TreeNode): void;
   clearSelection(): void;
@@ -263,4 +300,4 @@ interface SunburstTreeListElement {
   removeEventListener: (<K extends keyof SunburstTreeListElementEventMap>(type: K, listener: (this: SunburstTreeListElement, event: SunburstTreeListElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
 }
 //#endregion
-export { ComputeSunburstLayoutOptions as a, SunburstInteractionMode as c, SunburstLayoutNode as d, SunburstRings as f, SunburstView as h, SunburstZoomEvent as i, SunburstLabelPlacement as l, SunburstValueFormatter as m, SunburstTreeListElementEventMap as n, SUNBURST_PATH_SEPARATOR as o, SunburstValueAccessor as p, SunburstZoomDetail as r, SunburstArcVisual as s, SunburstTreeListElement as t, SunburstLayout as u };
+export { SunburstViewState as a, SunburstArcVisual as c, SunburstLayout as d, SunburstLayoutNode as f, SunburstView as g, SunburstValueFormatter as h, SunburstZoomEvent as i, SunburstInteractionMode as l, SunburstValueAccessor as m, SunburstTreeListElementEventMap as n, ComputeSunburstLayoutOptions as o, SunburstRings as p, SunburstZoomDetail as r, SUNBURST_PATH_SEPARATOR as s, SunburstTreeListElement as t, SunburstLabelPlacement as u };