@ixfx/components 0.9.8 → 0.10.1

package/dist/index.js

@@ -16,7 +16,7 @@ import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CAR
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-DsFbV4XD.js";
-import { n as captionForEntry, r as createDefaultListDragPreview, t as ListNativeDragController } from "./list-native-drag-controller-B0hWdbtM.js";
+import { n as captionForEntry, r as createDefaultListDragPreview, t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, o as startListItemOutAnimation, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
@@ -25,7 +25,7 @@ import { Checkbox } from "./checkbox.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-R73i0QTP.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-CVj7TIk2.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-BuzWn18_.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
@@ -40,7 +40,7 @@ import { TabListElement } from "./tabs.js";
 import { EditableLabel } from "./editable-label.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CF2RtzgG.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-40blkeza.js";
+import { t as GridListElement } from "./grid-list-DLfw5HI4.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
@@ -1429,20 +1429,37 @@ var CrumbPathController = class {
 	addPaths(paths) {
 		for (const path of paths) this.addPath(path);
 	}
+	addSegment(segment, path) {
+		this.#pathed.add(segment, path);
+	}
+	addSegments(entries) {
+		for (const { path, segment } of entries) this.addSegment(segment, path);
+	}
+	getIcon(cumulativePath) {
+		const value = this.#pathed.getValue(cumulativePath);
+		if (value === void 0) return;
+		if (typeof value === `object` && value !== null && `value` in value) return value.value?.icon;
+		return value.icon;
+	}
 	getPath() {
 		return this.#element?.getPath() ?? ``;
 	}
 	setPath(path) {
 		this.#element?.setPath(path);
 	}
+	#segmentIconLookup = (pathSegments) => {
+		return this.getIcon(pathSegments.join(this.#separator));
+	};
 	connect(element) {
 		this.#element = element;
 		element.separator = this.#separator;
 		element.siblingLookup = this.#siblingLookup.bind(this);
+		if (!element.segmentIconLookup) element.segmentIconLookup = this.#segmentIconLookup;
 	}
 	disconnect() {
 		if (this.#element) {
 			this.#element.siblingLookup = void 0;
+			if (this.#element.segmentIconLookup === this.#segmentIconLookup) this.#element.segmentIconLookup = void 0;
 			this.#element = null;
 		}
 	}
@@ -1602,6 +1619,14 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		if (isRoot) return rootSegments.slice(0, index + 1).join(this.separator);
 		return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
 	}
+	#resolveSegmentIcon(fullPathSegments, index) {
+		const direct = this.segmentIconLookup?.(fullPathSegments, index);
+		if (typeof direct === `string` && direct.length > 0) return direct;
+		const label = fullPathSegments[index];
+		if (label === void 0) return;
+		const parentKey = fullPathSegments.slice(0, index).join(this.separator);
+		return (this._cachedSiblings.get(parentKey)?.find((s) => s.label === label))?.icon;
+	}
 	setPath(newPath) {
 		this.#cleanupPending();
 		if (this.pathRoot.length > 0 && !newPath.startsWith(this.pathRoot)) newPath = this.pathRoot;
@@ -1742,9 +1767,12 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#renderSegment(label, index, isLast) {
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, false);
+		const fullPathSegments = [...this.#getRootSegments(), ...this.#getSegments().slice(0, index + 1)];
+		const icon = this.#resolveSegmentIcon(fullPathSegments, fullPathSegments.length - 1);
 		return html`
       <div class="seg" data-cumulative=${cumPath} @click=${(e) => this.#onSegmentClick(index, e)}>
         <label title=${label} @click=${(e) => this.#onLabelClick(index, e)}>
+          ${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}
           ${label}
         </label>
         ${(!isLast || this.siblingLookup) && this._leafSegmentIndex !== index ? html`
@@ -1759,12 +1787,15 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#renderRootSegment(label, index) {
-		const isLast = index === this.#getRootSegments().length - 1;
+		const rootSegments = this.#getRootSegments();
+		const isLast = index === rootSegments.length - 1;
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, true);
+		const fullPathSegments = rootSegments.slice(0, index + 1);
+		const icon = this.#resolveSegmentIcon(fullPathSegments, index);
 		return html`
       <div class="seg seg-root" data-cumulative=${cumPath} @click=${(e) => this.#onRootSegmentClick(index, e)}>
-        <label title=${label}>${label}</label>
+        <label title=${label}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
         ${isLast && this.siblingLookup ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
                style="anchor-name: ${this.#anchorName(cumPath)}"
@@ -1976,6 +2007,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     label {
       display: flex;
       align-items: center;
+      gap: var(--padding-s);
       white-space: nowrap;
       text-overflow: ellipsis;
       align-content: center;
@@ -2091,6 +2123,7 @@ __decorate([property({
 	attribute: `path-root`
 })], CrumbPathElement.prototype, "pathRoot", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentIconLookup", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openIdx", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editing", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
@@ -3439,7 +3472,7 @@ TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabLi
 //#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
-const DRAG_THRESHOLD_PX$2 = 5;
+const DRAG_THRESHOLD_PX$3 = 5;
 let DockPanelElement = class DockPanelElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -3471,7 +3504,7 @@ let DockPanelElement = class DockPanelElement extends LitElement {
 		this._onPointerMove = (event) => {
 			if (this._dragPointerId === null || event.pointerId !== this._dragPointerId) return;
 			if (!this._dragStarted) {
-				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$2) return;
+				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$3) return;
 				this._dragStarted = true;
 				const pointerId = this._dragPointerId;
 				this._teardownDragListeners();
@@ -3626,7 +3659,7 @@ DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelE
 /** Fraction of the leaf rect (from each edge) that forms the split bands. */
 const BAND = .25;
 /** Pointer movement threshold before a press becomes a dock drag (matches tab-list). */
-const DRAG_THRESHOLD_PX$1 = 5;
+const DRAG_THRESHOLD_PX$2 = 5;
 /** Tolerance (px) when matching a child gutter endpoint to a parent gutter line. */
 const JUNCTION_TOL_PX = 6;
 /** Junction points closer than this merge into one handle (a 4-way cross yields one per side). */
@@ -3742,7 +3775,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._onTabDragMove = (event) => {
 			const pending = this._tabDragPending;
 			if (pending === null || event.pointerId !== pending.pointerId) return;
-			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$1) return;
+			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$2) return;
 			this._tabDragPending = null;
 			this._teardownTabDragListeners();
 			this._suppressNextClick();
@@ -5463,210 +5496,1201 @@ function createVerticalListAdapter(renderItem, options) {
 	return adapter;
 }
 //#endregion
-//#region src/notifier/pill-renderer.ts
-const ROW_SPACING = 8;
-const DEFAULT_ROW_HEIGHT = 40;
-const STACK_OFFSET_STEP = 4;
-const STACK_OPACITY_BASE = .7;
-const STACK_OPACITY_DECAY = .15;
-const STACK_OPACITY_MIN = .2;
-function edgesOf(position) {
-	return {
-		vertical: position.startsWith(`top`) ? `top` : `bottom`,
-		horizontal: position.endsWith(`-left`) ? `left` : position.endsWith(`-right`) ? `right` : `middle`
-	};
+//#region src/icicle-tree/layout.ts
+/** Coerce a raw accessor result to a non-negative finite weight. */
+function normaliseValue(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? raw : 0;
 }
-function anchorStyles(position, safeArea) {
-	const { vertical, horizontal } = edgesOf(position);
-	const vMargin = `calc(var(--space-l, 12px) + ${(vertical === `top` ? safeArea.top : safeArea.bottom) ?? 0}px)`;
-	let css = `position: fixed; `;
-	css += vertical === `top` ? `top: ${vMargin}; bottom: auto; ` : `bottom: ${vMargin}; top: auto; `;
-	if (horizontal === `left`) {
-		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.left ?? 0}px)`;
-		css += `left: ${hMargin}; right: auto;`;
-	} else if (horizontal === `right`) {
-		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.right ?? 0}px)`;
-		css += `right: ${hMargin}; left: auto;`;
-	} else css += `left: 50%; right: auto;`;
-	return css;
+/** Depth-first search for the node with `key`. Returns `undefined` when absent. */
+function findIcicleNode(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return root;
+	for (const child of root.children ?? []) {
+		const hit = findIcicleNode(child, key);
+		if (hit) return hit;
+	}
 }
-/** Entry-animation starting transform: pills slide in from the edge they're anchored to. */
-function entryTransform(edges) {
-	const dy = edges.vertical === `top` ? -20 : 20;
-	if (edges.horizontal === `middle`) return `translateX(-50%) translate(0, ${dy}px)`;
-	return `translate(${edges.horizontal === `left` ? -20 : 20}px, ${dy}px)`;
+/**
+* Chain of nodes from `root` down to (and including) the node with `key`.
+* Returns `undefined` when the key is absent. The first entry is always `root`.
+*/
+function findIciclePath(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return [root];
+	for (const child of root.children ?? []) {
+		const hit = findIciclePath(child, key);
+		if (hit) return [root, ...hit];
+	}
 }
-function restingTransform(edges, dx, dy) {
-	if (edges.horizontal === `middle`) return `translateX(-50%) translate(${dx}px, ${dy}px)`;
-	return `translate(${dx}px, ${dy}px)`;
+/**
+* Compute the visible rectangles for an icicle view.
+*
+* Bands start at the zoom node's **children** (the zoom node itself is shown in
+* the breadcrumb strip, never as a rect — matching `TreeComponent.getNodes()`,
+* where the root is never listed). Each band spans 0–1; a rect's `x`/`width`
+* are fractions of its band, proportional to `valueAccessor` shares among
+* siblings. Siblings whose weights all normalise to `0` split the band equally.
+*
+* @param root True tree root. `undefined` (or a root without children) yields `[]`.
+* @param options `valueAccessor` (default equal weights), `maxDepth` (band count,
+*   default unlimited), `zoomKey` (visual root, default true root; unknown keys
+*   fall back to the true root).
+*/
+function computeIcicleLayout(root, options = {}) {
+	if (!root?.children?.length) return [];
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, hideLeaves = false } = options;
+	if (maxDepth <= 0) return [];
+	const zoomNode = zoomKey === void 0 ? root : findIcicleNode(root, zoomKey) ?? root;
+	const zoomPath = findIciclePath(root, zoomNode.item.key);
+	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
+	const siblings = zoomNode.children ?? [];
+	if (siblings.length === 0) return [];
+	const isLeaf = (node) => node.item.isLeaf === true || node.children !== void 0 && node.children.length === 0;
+	const rects = [];
+	const layoutLevel = (nodes, depth, relativeDepth, offset, span, parentKey) => {
+		const visible = hideLeaves ? nodes.filter((n) => !isLeaf(n)) : nodes;
+		if (visible.length === 0 || relativeDepth >= maxDepth) return;
+		const weights = visible.map((n) => normaliseValue(valueAccessor(n.item)));
+		const total = weights.reduce((a, b) => a + b, 0);
+		const setSize = visible.length;
+		let cursor = offset;
+		visible.forEach((node, index) => {
+			const width = span * (total > 0 ? weights[index] / total : 1 / setSize);
+			const children = node.children ?? [];
+			rects.push({
+				node,
+				depth,
+				relativeDepth,
+				x: cursor,
+				width,
+				parentKey,
+				index,
+				setSize,
+				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
+			});
+			if (children.length > 0) layoutLevel(children, depth + 1, relativeDepth + 1, cursor, width, node.item.key);
+			cursor += width;
+		});
+	};
+	layoutLevel(siblings, zoomDepth + 1, 0, 0, 1, zoomNode.item.key);
+	return rects;
 }
-function createPillRenderer(options = {}) {
-	const position = options.position ?? `top-right`;
-	const queueDisplay = options.queueDisplay ?? `list`;
-	const safeArea = options.safeArea ?? {};
-	const edges = edgesOf(position);
-	let container = null;
-	let hooks = null;
-	const pills = /* @__PURE__ */ new Map();
-	let rowHeight = DEFAULT_ROW_HEIGHT;
-	let measured = false;
-	function ensureContainer() {
-		if (container) return container;
-		container = document.createElement(`div`);
-		container.className = `ixfx-notification-container`;
-		container.setAttribute(`role`, `region`);
-		container.setAttribute(`aria-label`, `Notifications`);
-		document.body.appendChild(container);
-		return container;
+//#endregion
+//#region src/icicle-tree/icicletree-list.ts
+let IcicleTreeListElement = class IcicleTreeListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		this.orientation = `horizontal`;
+		this.maxDepth = 4;
+		this.minLabelWidth = 40;
+		this.minVerticalLabelWidth = 16;
+		this.hideLeaves = false;
+		this.valueAccessor = () => 1;
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.disableKeyboardNavigation = false;
+		this.registry = void 0;
+		this._zoomKey = void 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.icicle-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#rects().map((r) => ({
+				id: r.node.item.key,
+				enabled: true
+			})),
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			},
+			onTickle: (id) => {
+				if (id === void 0) return;
+				const rect = this.#rects().find((r) => r.node.item.key === id);
+				if (!rect) return;
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node: rect.node,
+						depth: rect.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+		this.#pendingKeys = /* @__PURE__ */ new Set();
+		this.#aborters = /* @__PURE__ */ new Map();
 	}
-	function updateAttributes(el, notification) {
-		el.setAttribute(`notification-type`, notification.type);
-		el.setAttribute(`message`, notification.message);
-		if (notification.icon) el.setAttribute(`icon`, notification.icon);
-		else el.removeAttribute(`icon`);
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
 	}
-	function createPillElement(notification) {
-		const el = document.createElement(`ixfx-notification-pill`);
-		el.setAttribute(`notification-id`, notification.id);
-		el.style.cssText = anchorStyles(position, safeArea);
-		updateAttributes(el, notification);
-		el.style.opacity = `0`;
-		el.style.transform = entryTransform(edges);
-		el.addEventListener(`pill-tap`, (e) => {
-			const customEvent = e;
-			hooks?.onTap(customEvent.detail.id);
-		});
-		return el;
+	get selectedNodes() {
+		return this._selectedNodes;
 	}
-	function measureRowHeight(el) {
-		if (measured) return;
-		requestAnimationFrame(() => {
-			const height = el.getBoundingClientRect().height;
-			if (height > 0) {
-				rowHeight = height;
-				measured = true;
-			}
+	/** Current zoom root. `undefined` when showing the full tree. Pure view-state — `root` is never mutated. */
+	get focusedNode() {
+		if (this._zoomKey === void 0) return void 0;
+		return findIcicleNode(this.#effectiveRoot, this._zoomKey);
+	}
+	#modelUnsubscribe;
+	#pendingKeys;
+	#aborters;
+	#anchorIndex;
+	#ownedRegistry;
+	#unregisterSearchCommands;
+	#resizeObserver;
+	get #effectiveRoot() {
+		return this.model?.root ?? this.root;
+	}
+	#rects() {
+		return computeIcicleLayout(this.#effectiveRoot, {
+			valueAccessor: this.valueAccessor,
+			maxDepth: this.maxDepth,
+			zoomKey: this._zoomKey,
+			hideLeaves: this.hideLeaves
 		});
 	}
-	/** Positions every currently-visible pill for its rank in `order` (index 0 = front/oldest). */
-	function applyLayout(order) {
-		const total = order.length;
-		order.forEach((notification, index) => {
-			const entry = pills.get(notification.id);
-			if (!entry) return;
-			const el = entry.element;
-			let dx = 0;
-			let dy = 0;
-			let opacity = 1;
-			let pointerEvents = `auto`;
-			let filter = `none`;
-			if (queueDisplay === `list`) {
-				const step = index * (rowHeight + ROW_SPACING);
-				dy = edges.vertical === `top` ? step : -step;
-			} else {
-				const step = index * STACK_OFFSET_STEP;
-				dy = edges.vertical === `top` ? step : -step;
-				dx = edges.horizontal === `left` ? step : edges.horizontal === `right` ? -step : 0;
-				if (index > 0) {
-					const hintIndex = index - 1;
-					opacity = Math.max(STACK_OPACITY_MIN, STACK_OPACITY_BASE - hintIndex * STACK_OPACITY_DECAY);
-					pointerEvents = `none`;
-					filter = `saturate(0.6)`;
-				}
-			}
-			el.style.transition = `opacity 0.2s ease-out, transform 0.2s ease-out`;
-			el.style.opacity = `${opacity}`;
-			el.style.zIndex = `${total - index}`;
-			el.style.pointerEvents = pointerEvents;
-			el.style.filter = filter;
-			el.style.transform = restingTransform(edges, dx, dy);
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`data-input-mode`, `mouse`);
+		const registry = this.#ownedRegistry = createCommandRegistry();
+		registry.register({
+			id: `select-all`,
+			label: `Select All`,
+			description: `Select all visible items`,
+			execute: () => this.selectAll()
 		});
+		registry.register({
+			id: `deselect-all`,
+			label: `Deselect All`,
+			description: `Clear all selection`,
+			execute: () => this.deselectAll()
+		});
+		this.registry = registry;
+		this.#syncSearchCommands();
+		if (typeof ResizeObserver !== `undefined`) {
+			this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
+			this.#resizeObserver.observe(this);
+		}
 	}
-	function dismiss(id) {
-		const entry = pills.get(id);
-		if (!entry) return;
-		const el = entry.element;
-		el.setAttribute(`dismissing`, `true`);
-		const cleanup = () => {
-			el.removeEventListener(`transitionend`, cleanup);
-			el.remove();
-			pills.delete(id);
-			if (container && pills.size === 0) {
-				container.remove();
-				container = null;
-				measured = false;
-				rowHeight = DEFAULT_ROW_HEIGHT;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		for (const aborter of this.#aborters.values()) aborter.abort();
+		this.#aborters.clear();
+		this.#pendingKeys.clear();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		if (this.#ownedRegistry) {
+			this.#ownedRegistry.unregister(`select-all`);
+			this.#ownedRegistry.unregister(`deselect-all`);
+			this.#ownedRegistry = void 0;
+			this.registry = void 0;
+		}
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		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`)) {
+			this.#anchorIndex = void 0;
+			this.clearSelection();
+		}
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
+		if (this._zoomKey !== void 0 && !findIcicleNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
+		this.#ensureVisibleChildren();
+		this.#syncTooltip();
+	}
+	/** The host's own (viewport) extent — width in horizontal orientation, height in vertical. */
+	#hostExtent() {
+		return (this.orientation === `vertical` ? this.clientHeight : this.clientWidth) || 0;
+	}
+	/**
+	* Whether `rect`'s label should be rotated or hidden for lack of space, per
+	* {@link minLabelWidth} / {@link minVerticalLabelWidth}. `orientation="vertical"`
+	* rects never rotate — hides outright at `minLabelWidth` instead, same as before.
+	*/
+	#labelMode(rect) {
+		const hostExtent = this.#hostExtent();
+		if (hostExtent === 0) return {
+			hidden: false,
+			rotated: false
+		};
+		const vertical = this.orientation === `vertical`;
+		const pixelWidth = rect.width * hostExtent;
+		if (vertical) return {
+			hidden: pixelWidth < this.minLabelWidth,
+			rotated: false
+		};
+		if (pixelWidth < this.minVerticalLabelWidth) return {
+			hidden: true,
+			rotated: false
+		};
+		return {
+			hidden: false,
+			rotated: pixelWidth < this.minLabelWidth
 		};
-		el.addEventListener(`transitionend`, cleanup);
-		setTimeout(cleanup, 300);
 	}
-	function setNotifications(notifications, _queueSize) {
-		const cont = ensureContainer();
-		const idsToKeep = new Set(notifications.map((n) => n.id));
-		for (const notification of notifications) {
-			const existing = pills.get(notification.id);
-			if (existing) {
-				existing.notification = notification;
-				updateAttributes(existing.element, notification);
-				continue;
-			}
-			const el = createPillElement(notification);
-			pills.set(notification.id, {
-				element: el,
-				notification
-			});
-			cont.appendChild(el);
-			measureRowHeight(el);
+	/** Anchor the shared tooltip popover to the tickled rect, if its label needs one. */
+	#syncTooltip() {
+		const popover = this._tooltipEl;
+		if (!popover?.popover) return;
+		const key = this.tickled.tickledId;
+		const rect = key === void 0 ? void 0 : this.#rects().find((r) => r.node.item.key === key);
+		const mode = rect ? this.#labelMode(rect) : void 0;
+		const isOpen = popover.matches(`:popover-open`);
+		if (rect && mode && (mode.hidden || mode.rotated)) {
+			popover.textContent = rect.node.item.label;
+			if (!isOpen) try {
+				popover.showPopover();
+			} catch {}
+		} else if (isOpen) try {
+			popover.hidePopover();
+		} catch {}
+	}
+	#resetViewState() {
+		this.#clearSelectionInternal();
+		this.tickled.clearTickled();
+		this._zoomKey = void 0;
+		this.#anchorIndex = void 0;
+	}
+	#ensureVisibleChildren() {
+		if (!this.model && !this.loadChildren) return;
+		for (const rect of this.#rects()) {
+			const { node } = rect;
+			if (node.children !== void 0 || this.#pendingKeys.has(node.item.key)) continue;
+			this.#loadChildren(node, rect.depth);
 		}
-		for (const [id] of pills) if (!idsToKeep.has(id)) dismiss(id);
-		requestAnimationFrame(() => applyLayout(notifications));
 	}
-	return {
-		attach(newHooks) {
-			hooks = newHooks;
-		},
-		detach() {
-			for (const [id] of pills) dismiss(id);
-			if (container) {
-				container.remove();
-				container = null;
-			}
-		},
-		setNotifications
-	};
-}
-//#endregion
-//#region src/notifier/manager.ts
-const options = {
-	renderer: void 0,
-	timeout: 4e3,
-	timeoutError: 8e3,
-	queue: true,
-	queueSize: 3,
-	tapBehaviour: `dismiss`,
-	tapHandlerDefault: void 0
-};
-/** Rank-ordered, index 0 = oldest/first (next to be evicted or timed out). Length never exceeds queueSize (or 1 when queuing is disabled). */
-const visible = [];
-let renderer = null;
-let defaultRenderer = null;
-function getDefaultRenderer() {
-	defaultRenderer ??= createPillRenderer({ position: `top-right` });
-	return defaultRenderer;
-}
-function getRenderer() {
-	return renderer ?? getDefaultRenderer();
-}
-function syncRenderer() {
-	getRenderer().setNotifications([...visible], options.queueSize);
-}
-function clearTimer(managed) {
-	if (managed.timer !== null) {
-		clearTimeout(managed.timer);
-		managed.timer = null;
+	async #loadChildren(node, depth) {
+		const key = node.item.key;
+		this.#pendingKeys.add(key);
+		const controller = new AbortController();
+		this.#aborters.set(key, controller);
+		this.requestUpdate();
+		try {
+			let children;
+			if (this.model) children = await this.model.getChildren(node, depth, controller.signal);
+			else children = [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = children;
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+		} finally {
+			this.#pendingKeys.delete(key);
+			this.#aborters.delete(key);
+			if (!controller.signal.aborted) this.requestUpdate();
+		}
 	}
-}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf === true;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#clearSelectionInternal() {
+		this._selectedNodes.clear();
+		this.selectedNode = void 0;
+	}
+	#dispatchSelect(previous) {
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: new Set(this._selectedNodes),
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	select(node) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.selectedNode = node;
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.delete(node);
+		if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	clearSelection() {
+		if (this._selectedNodes.size === 0) return;
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	selectAll() {
+		const prev = new Set(this._selectedNodes);
+		for (const rect of this.#rects()) {
+			if (!this.#canSelect(rect.node)) continue;
+			this._selectedNodes.add(rect.node);
+		}
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselectAll() {
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
+	selectMany(nodes) {
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set([...nodes].filter((n) => this.#canSelect(n)));
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/**
+	* Drill down so `node` becomes the visual root (ancestors move to the
+	* breadcrumb strip). Pure view-state — `root` is never mutated.
+	* Fires `zoom` and the semantic `expand` event.
+	*/
+	zoomTo(node) {
+		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;
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`expand`, {
+			detail: {
+				node,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	/**
+	* Zoom back out to the full tree. Fires `zoom` (with `node: undefined`) and
+	* the semantic `collapse` event for the previous zoom root.
+	*/
+	zoomOut() {
+		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.tickled.clearTickled();
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node: void 0,
+				depth: -1
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (previous) this.dispatchEvent(new CustomEvent(`collapse`, {
+			detail: {
+				node: previous,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	#canZoom(node) {
+		if (node.item.isLeaf === true) return false;
+		if (node.children !== void 0) return node.children.length > 0;
+		return this.model !== void 0 || this.loadChildren !== void 0;
+	}
+	/**
+	* Zoom so the node at `keys` (path from the root's children) is visible,
+	* then select it. Returns `true` if the path was found.
+	*/
+	navigateTo(keys) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		let current = root;
+		const path = [];
+		for (const key of keys) {
+			const found = current.children?.find((n) => n.item.key === key);
+			if (!found) return false;
+			path.push(found);
+			current = found;
+		}
+		const target = path.at(-1);
+		if (path.length > this.maxDepth) this.zoomTo(path[path.length - this.maxDepth - 1]);
+		else if (this._zoomKey !== void 0) this.zoomOut();
+		this.select(target);
+		this.tickled.setTickled(target.item.key);
+		this.requestUpdate();
+		return true;
+	}
+	/**
+	* Zoom + select the first node for which `predicate` returns `true`.
+	* Returns `true` if a matching node was found.
+	*/
+	navigateToNode(predicate) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		const keyPath = this.#findKeyPath(root.children, predicate);
+		if (!keyPath) return false;
+		return this.navigateTo(keyPath);
+	}
+	/**
+	* Zoom so the node with `key` is visible and move the keyboard cursor to it,
+	* without changing the selection. Used by incremental-search "navigate" mode.
+	*/
+	revealKey(key) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		const path = this.#findKeyPath(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));
+			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).
+	*/
+	getNodes() {
+		return this.#rects().map((r) => ({
+			node: r.node,
+			depth: r.depth
+		}));
+	}
+	#matchesFilter(node, depth) {
+		if (!this.filterPredicate) return true;
+		if (this.filterPredicate(node, depth)) return true;
+		return node.children?.some((child) => this.#matchesFilter(child, depth + 1)) ?? false;
+	}
+	#handleItemClick(rect, index, event) {
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (this.interactionMode === `standard` && (event.ctrlKey || event.metaKey)) {
+			if (this._selectedNodes.has(rect.node)) this.deselect(rect.node);
+			else if (this.#canSelect(rect.node)) {
+				const prev = new Set(this._selectedNodes);
+				this._selectedNodes.add(rect.node);
+				this.selectedNode = rect.node;
+				this.#dispatchSelect(prev);
+				this.requestUpdate();
+			}
+			this.#anchorIndex = index;
+		} else if (this.interactionMode === `standard` && event.shiftKey && this.#anchorIndex !== void 0) {
+			const rects = this.#rects();
+			const from = Math.min(this.#anchorIndex, index);
+			const to = Math.max(this.#anchorIndex, index);
+			const prev = new Set(this._selectedNodes);
+			this._selectedNodes = new Set(rects.slice(from, to + 1).map((r) => r.node).filter((n) => this.#canSelect(n)));
+			this.selectedNode = [...this._selectedNodes].at(-1);
+			this.#dispatchSelect(prev);
+			this.requestUpdate();
+		} else if (this.interactionMode !== `manual`) {
+			this.select(rect.node);
+			this.#anchorIndex = index;
+		}
+		this.tickled.setTickled(rect.node.item.key);
+		if (this.#canZoom(rect.node)) this.zoomTo(rect.node);
+	}
+	#handleItemDblClick(rect) {
+		this.dispatchEvent(new CustomEvent(`item-dblclick`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`activate`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleKeyDown(event) {
+		if (this.disableKeyboardNavigation) return;
+		const rects = this.#rects();
+		if (rects.length === 0) return;
+		const tickledKey = this.tickled.tickledId;
+		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);
+			if (this.interactionMode === `implicit`) this.select(rect.node);
+		};
+		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();
+				if (this.interactionMode !== `manual`) this.select(current.node);
+				this.dispatchEvent(new CustomEvent(`activate`, {
+					detail: {
+						node: current.node,
+						depth: current.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+				if (this.#canZoom(current.node)) this.zoomTo(current.node);
+				return;
+			case `Escape`: if (this._zoomKey !== void 0) {
+				event.preventDefault();
+				this.zoomOut();
+			}
+		}
+	}
+	#renderBreadcrumb() {
+		const zoomNode = this.focusedNode;
+		if (zoomNode === void 0) return nothing;
+		return html`
+      <nav class="breadcrumb" part="breadcrumb" aria-label="Icicle zoom path">
+        <ixfx-crumb-navigation
+          with-up
+          .root=${this.#effectiveRoot}
+          .selectedNode=${zoomNode}
+          @select=${this.#onCrumbSelect}
+          @item-click=${(e) => e.stopPropagation()}
+          @tickle=${(e) => e.stopPropagation()}
+          @expand=${(e) => e.stopPropagation()}
+        ></ixfx-crumb-navigation>
+      </nav>
+    `;
+	}
+	/**
+	* Translate crumb-trail selection (crumb clicks + the up-button) into zoom
+	* state. The event is stopped: crumb clicks must not bubble as our `select`
+	* (the selection set is unchanged by them).
+	*/
+	#onCrumbSelect(event) {
+		event.stopPropagation();
+		const node = [...event.detail.selected].at(0);
+		if (!node) return;
+		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
+		else this.zoomTo(node);
+	}
+	#renderRect(rect) {
+		const { node } = rect;
+		const selected = this._selectedNodes.has(node);
+		const tickled = this.tickled.isTickled(node.item.key);
+		const filtered = !this.#matchesFilter(node, rect.depth);
+		const pending = this.#pendingKeys.has(node.item.key);
+		const sizePct = `${(rect.width * 100).toFixed(4)}%`;
+		const xPct = `${(rect.x * 100).toFixed(4)}%`;
+		const vertical = this.orientation === `vertical`;
+		const { hidden: hideLabel, rotated } = this.#labelMode(rect);
+		const needsTooltip = tickled && (hideLabel || rotated);
+		let sizeStyle = vertical ? `top:${xPct};height:calc(${sizePct} - var(--icicletree-rect-gap))` : `left:${xPct};width:calc(${sizePct} - var(--icicletree-rect-gap))`;
+		if (needsTooltip) sizeStyle += `;anchor-name:--icicle-rect-anchor`;
+		return html`
+      <div
+        class="item rect ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 ? `empty` : ``} ${rotated ? `rotated` : ``}"
+        data-key=${node.item.key}
+        role="treeitem"
+        tabindex="-1"
+        aria-level=${rect.depth + 1}
+        aria-selected=${selected}
+        aria-setsize=${rect.setSize}
+        aria-posinset=${rect.index + 1}
+        aria-label=${node.item.label}
+        part="rect"
+        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)}
+      >
+        <span class="icicle-label ${hideLabel ? `hide-label` : ``} ${rotated ? `label-vertical` : ``}" part="label">${node.item.label}</span>
+      </div>
+    `;
+	}
+	render() {
+		const rects = this.#rects();
+		const bands = /* @__PURE__ */ new Map();
+		for (const rect of rects) {
+			const band = bands.get(rect.relativeDepth) ?? [];
+			band.push(rect);
+			bands.set(rect.relativeDepth, band);
+		}
+		const vertical = this.orientation === `vertical`;
+		return html`
+      <div
+        class="icicle ${vertical ? `vertical` : `horizontal`}"
+        role="tree"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @keydown=${(e) => this.#handleKeyDown(e)}
+        @pointerleave=${() => this.tickled.clearTickled()}
+      >
+        ${this.#renderBreadcrumb()}
+        ${rects.length === 0 ? html`<div class="empty-state">No data</div>` : [...bands.entries()].map(([depth, band]) => html`
+            <div
+              class="band"
+              role="presentation"
+              data-depth=${depth}
+            >
+              ${repeat(band, (r) => r.node.item.key, (r) => this.#renderRect(r))}
+            </div>
+          `)}
+      </div>
+      <div id="icicle-tooltip" popover="manual" part="tooltip" class="icicle-tooltip"></div>
+      ${this.search.renderField()}
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			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);
+      }
+    `
+		];
+	}
+};
+__decorate([property({ type: Object })], IcicleTreeListElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "loadChildren", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], IcicleTreeListElement.prototype, "exclusivity", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `selection-filter`
+})], IcicleTreeListElement.prototype, "selectionFilter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], IcicleTreeListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], IcicleTreeListElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-depth`
+})], IcicleTreeListElement.prototype, "maxDepth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-label-width`
+})], IcicleTreeListElement.prototype, "minLabelWidth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-vertical-label-width`
+})], IcicleTreeListElement.prototype, "minVerticalLabelWidth", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-leaves`,
+	reflect: true
+})], IcicleTreeListElement.prototype, "hideLeaves", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "valueAccessor", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "selectedNode", void 0);
+__decorate([state()], IcicleTreeListElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-keyboard-navigation`
+})], IcicleTreeListElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({ attribute: false })], IcicleTreeListElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], IcicleTreeListElement.prototype, "searchModes", void 0);
+__decorate([state()], IcicleTreeListElement.prototype, "_zoomKey", void 0);
+__decorate([query(`#icicle-tooltip`)], IcicleTreeListElement.prototype, "_tooltipEl", void 0);
+IcicleTreeListElement = __decorate([safeCustomElement(`ixfx-icicletree-list`)], IcicleTreeListElement);
+//#endregion
+//#region src/notifier/pill-renderer.ts
+const ROW_SPACING = 8;
+const DEFAULT_ROW_HEIGHT = 40;
+const STACK_OFFSET_STEP = 4;
+const STACK_OPACITY_BASE = .7;
+const STACK_OPACITY_DECAY = .15;
+const STACK_OPACITY_MIN = .2;
+function edgesOf(position) {
+	return {
+		vertical: position.startsWith(`top`) ? `top` : `bottom`,
+		horizontal: position.endsWith(`-left`) ? `left` : position.endsWith(`-right`) ? `right` : `middle`
+	};
+}
+function anchorStyles(position, safeArea) {
+	const { vertical, horizontal } = edgesOf(position);
+	const vMargin = `calc(var(--space-l, 12px) + ${(vertical === `top` ? safeArea.top : safeArea.bottom) ?? 0}px)`;
+	let css = `position: fixed; `;
+	css += vertical === `top` ? `top: ${vMargin}; bottom: auto; ` : `bottom: ${vMargin}; top: auto; `;
+	if (horizontal === `left`) {
+		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.left ?? 0}px)`;
+		css += `left: ${hMargin}; right: auto;`;
+	} else if (horizontal === `right`) {
+		const hMargin = `calc(var(--space-l, 12px) + ${safeArea.right ?? 0}px)`;
+		css += `right: ${hMargin}; left: auto;`;
+	} else css += `left: 50%; right: auto;`;
+	return css;
+}
+/** Entry-animation starting transform: pills slide in from the edge they're anchored to. */
+function entryTransform(edges) {
+	const dy = edges.vertical === `top` ? -20 : 20;
+	if (edges.horizontal === `middle`) return `translateX(-50%) translate(0, ${dy}px)`;
+	return `translate(${edges.horizontal === `left` ? -20 : 20}px, ${dy}px)`;
+}
+function restingTransform(edges, dx, dy) {
+	if (edges.horizontal === `middle`) return `translateX(-50%) translate(${dx}px, ${dy}px)`;
+	return `translate(${dx}px, ${dy}px)`;
+}
+function createPillRenderer(options = {}) {
+	const position = options.position ?? `top-right`;
+	const queueDisplay = options.queueDisplay ?? `list`;
+	const safeArea = options.safeArea ?? {};
+	const edges = edgesOf(position);
+	let container = null;
+	let hooks = null;
+	const pills = /* @__PURE__ */ new Map();
+	let rowHeight = DEFAULT_ROW_HEIGHT;
+	let measured = false;
+	function ensureContainer() {
+		if (container) return container;
+		container = document.createElement(`div`);
+		container.className = `ixfx-notification-container`;
+		container.setAttribute(`role`, `region`);
+		container.setAttribute(`aria-label`, `Notifications`);
+		document.body.appendChild(container);
+		return container;
+	}
+	function updateAttributes(el, notification) {
+		el.setAttribute(`notification-type`, notification.type);
+		el.setAttribute(`message`, notification.message);
+		if (notification.icon) el.setAttribute(`icon`, notification.icon);
+		else el.removeAttribute(`icon`);
+	}
+	function createPillElement(notification) {
+		const el = document.createElement(`ixfx-notification-pill`);
+		el.setAttribute(`notification-id`, notification.id);
+		el.style.cssText = anchorStyles(position, safeArea);
+		updateAttributes(el, notification);
+		el.style.opacity = `0`;
+		el.style.transform = entryTransform(edges);
+		el.addEventListener(`pill-tap`, (e) => {
+			const customEvent = e;
+			hooks?.onTap(customEvent.detail.id);
+		});
+		return el;
+	}
+	function measureRowHeight(el) {
+		if (measured) return;
+		requestAnimationFrame(() => {
+			const height = el.getBoundingClientRect().height;
+			if (height > 0) {
+				rowHeight = height;
+				measured = true;
+			}
+		});
+	}
+	/** Positions every currently-visible pill for its rank in `order` (index 0 = front/oldest). */
+	function applyLayout(order) {
+		const total = order.length;
+		order.forEach((notification, index) => {
+			const entry = pills.get(notification.id);
+			if (!entry) return;
+			const el = entry.element;
+			let dx = 0;
+			let dy = 0;
+			let opacity = 1;
+			let pointerEvents = `auto`;
+			let filter = `none`;
+			if (queueDisplay === `list`) {
+				const step = index * (rowHeight + ROW_SPACING);
+				dy = edges.vertical === `top` ? step : -step;
+			} else {
+				const step = index * STACK_OFFSET_STEP;
+				dy = edges.vertical === `top` ? step : -step;
+				dx = edges.horizontal === `left` ? step : edges.horizontal === `right` ? -step : 0;
+				if (index > 0) {
+					const hintIndex = index - 1;
+					opacity = Math.max(STACK_OPACITY_MIN, STACK_OPACITY_BASE - hintIndex * STACK_OPACITY_DECAY);
+					pointerEvents = `none`;
+					filter = `saturate(0.6)`;
+				}
+			}
+			el.style.transition = `opacity 0.2s ease-out, transform 0.2s ease-out`;
+			el.style.opacity = `${opacity}`;
+			el.style.zIndex = `${total - index}`;
+			el.style.pointerEvents = pointerEvents;
+			el.style.filter = filter;
+			el.style.transform = restingTransform(edges, dx, dy);
+		});
+	}
+	function dismiss(id) {
+		const entry = pills.get(id);
+		if (!entry) return;
+		const el = entry.element;
+		el.setAttribute(`dismissing`, `true`);
+		const cleanup = () => {
+			el.removeEventListener(`transitionend`, cleanup);
+			el.remove();
+			pills.delete(id);
+			if (container && pills.size === 0) {
+				container.remove();
+				container = null;
+				measured = false;
+				rowHeight = DEFAULT_ROW_HEIGHT;
+			}
+		};
+		el.addEventListener(`transitionend`, cleanup);
+		setTimeout(cleanup, 300);
+	}
+	function setNotifications(notifications, _queueSize) {
+		const cont = ensureContainer();
+		const idsToKeep = new Set(notifications.map((n) => n.id));
+		for (const notification of notifications) {
+			const existing = pills.get(notification.id);
+			if (existing) {
+				existing.notification = notification;
+				updateAttributes(existing.element, notification);
+				continue;
+			}
+			const el = createPillElement(notification);
+			pills.set(notification.id, {
+				element: el,
+				notification
+			});
+			cont.appendChild(el);
+			measureRowHeight(el);
+		}
+		for (const [id] of pills) if (!idsToKeep.has(id)) dismiss(id);
+		requestAnimationFrame(() => applyLayout(notifications));
+	}
+	return {
+		attach(newHooks) {
+			hooks = newHooks;
+		},
+		detach() {
+			for (const [id] of pills) dismiss(id);
+			if (container) {
+				container.remove();
+				container = null;
+			}
+		},
+		setNotifications
+	};
+}
+//#endregion
+//#region src/notifier/manager.ts
+const options = {
+	renderer: void 0,
+	timeout: 4e3,
+	timeoutError: 8e3,
+	queue: true,
+	queueSize: 3,
+	tapBehaviour: `dismiss`,
+	tapHandlerDefault: void 0
+};
+/** Rank-ordered, index 0 = oldest/first (next to be evicted or timed out). Length never exceeds queueSize (or 1 when queuing is disabled). */
+const visible = [];
+let renderer = null;
+let defaultRenderer = null;
+function getDefaultRenderer() {
+	defaultRenderer ??= createPillRenderer({ position: `top-right` });
+	return defaultRenderer;
+}
+function getRenderer() {
+	return renderer ?? getDefaultRenderer();
+}
+function syncRenderer() {
+	getRenderer().setNotifications([...visible], options.queueSize);
+}
+function clearTimer(managed) {
+	if (managed.timer !== null) {
+		clearTimeout(managed.timer);
+		managed.timer = null;
+	}
+}
 /**
 * A message shown alone takes the full timeout. A message that joined a
 * non-empty queue at arrival time is permanently "wasQueued" and gets
@@ -5763,7 +6787,7 @@ function dismiss(id) {
 //#endregion
 //#region src/panel/panel-group.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
-const DRAG_THRESHOLD_PX = 5;
+const DRAG_THRESHOLD_PX$1 = 5;
 /**
 * Pure helper: nearest gap index for a pointer position along one axis.
 * `edges` are the [start, end] of each sibling (excluding the drag source),
@@ -5872,7 +6896,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 			if (!state || event.pointerId !== state.pointerId) return;
 			const distance = Math.hypot(event.clientX - state.startX, event.clientY - state.startY);
 			if (!state.active) {
-				if (distance < DRAG_THRESHOLD_PX) return;
+				if (distance < DRAG_THRESHOLD_PX$1) return;
 				this._beginDrag(event);
 			}
 			state.ghost?.move(event.clientX, event.clientY);
@@ -7791,9 +8815,13 @@ let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
 		super(..._args);
 		this.label = ``;
 		this.grow = false;
+		this.reorderable = false;
 	}
 	static {
-		this.styles = [themeFallbacks, css`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
     :host {
       display: flex;
       flex-direction: column;
@@ -7805,11 +8833,43 @@ let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
       border-radius: var(--radius-s);
       background: var(--surface-3);
       min-width: 0;
-    }
-    :host(:not([label])) {
-      border: none;
-      background: transparent;
-      padding: 0;
+    }
+    :host([reorderable]) {
+      flex-direction: row;
+      align-items: center;
+    }
+    :host(:not([label])) {
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+    .grab-handle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      align-self: stretch;
+      padding-inline: var(--space-2xs, 2px);
+      cursor: grab;
+      touch-action: none;
+      flex: 0 0 auto;
+    }
+    :host([reorderable]) .grab-handle { display: inline-flex; }
+    :host([reorderable]) .grab-handle .ixfx-handle {
+      --ixfx-handle-length: 18px;
+    }
+    :host([drag-source]) .grab-handle { cursor: grabbing; }
+    :host([drag-source]) .grab-handle .ixfx-handle {
+      color: var(--accent);
+      opacity: 1;
+    }
+    .body {
+      display: flex;
+      flex-direction: column;
+      align-items: var(--toolbar-group-align-items, center);
+      justify-content: var(--toolbar-group-justify-content, flex-start);
+      gap: var(--toolbar-gap, var(--space-s));
+      min-width: 0;
+      flex: 1 1 auto;
     }
     .label-row {
       display: none;
@@ -7827,13 +8887,19 @@ let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
     .components { display: flex; }
     ::slotted(*) { flex: 0 0 auto; }
     ::slotted([grow]) { flex: 1 1 auto; }
-  `];
+  `
+		];
 	}
 	render() {
 		return html`
-      <div class="label-row">${this.label}</div>
-      <div class="components">
-        <slot></slot>
+      <div class="grab-handle" part="grab-handle" title="Drag to reorder" aria-hidden="true">
+        <span class="ixfx-handle" data-handle="dotted" data-shape="vertical"></span>
+      </div>
+      <div class="body">
+        <div class="label-row">${this.label}</div>
+        <div class="components">
+          <slot></slot>
+        </div>
       </div>
     `;
 	}
@@ -7843,10 +8909,68 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ToolbarGroupElement.prototype, "grow", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ToolbarGroupElement.prototype, "reorderable", void 0);
 ToolbarGroupElement = __decorate([safeCustomElement(`ixfx-toolbar-group`)], ToolbarGroupElement);
 //#endregion
 //#region src/toolbar/toolbar.ts
 var _ToolbarElement;
+/** Pointer movement threshold (px) before a press becomes a drag. */
+const DRAG_THRESHOLD_PX = 5;
+/**
+* Pure helper: nearest gap index for a pointer position along one axis.
+* `edges` are the [start, end] of each sibling (excluding the drag source),
+* in visual order. Returns 0..edges.length.
+*/
+function toolbarGapIndex(edges, pos) {
+	let bestGap = 0;
+	let bestDist = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < edges.length; i++) {
+		const [start, end] = edges[i];
+		if (pos < (start + end) / 2) {
+			const d = Math.abs(pos - start);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i;
+			}
+		} else {
+			const d = Math.abs(pos - end);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i + 1;
+			}
+		}
+	}
+	return bestGap;
+}
+let toolbarGhostStylesInjected = false;
+/**
+* Global ghost styling so the drag preview matches toolbar-group chrome.
+* Injected once; the ghost lives outside shadow DOM so component styles
+* cannot reach it.
+*/
+function injectToolbarGhostStyles() {
+	if (toolbarGhostStylesInjected) return;
+	toolbarGhostStylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    .ixfx-drag-ghost.ixfx-toolbar-group-ghost {
+      padding: var(--space-s, 8px) var(--space-m, 16px);
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      border: none;
+      border-radius: var(--radius-s, 4px);
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  `;
+	document.head.appendChild(style);
+}
 let ToolbarElement = class ToolbarElement extends LitElement {
 	static {
 		_ToolbarElement = this;
@@ -7859,11 +8983,76 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		this.toolbarAlign = `near`;
 		this.showGroupLabels = false;
 		this.invisibleGroups = false;
+		this.allowReorder = false;
 		this._overflowCount = 0;
 		this._ro = null;
 		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
 		this._sizes = /* @__PURE__ */ new WeakMap();
 		this._measureQueued = false;
+		this._dragState = null;
+		this._suppressNextClick = false;
+		this._onClickCapture = (event) => {
+			if (!this._suppressNextClick) return;
+			this._suppressNextClick = false;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this._onKeyDown = (event) => {
+			const state = this._dragState;
+			if (event.key !== `Escape` || !state?.active) return;
+			event.preventDefault();
+			const pointerId = state.pointerId;
+			this._abortDrag();
+			this._endDrag(pointerId);
+		};
+		this._onPointerDown = (event) => {
+			if (!this.allowReorder || event.button !== 0) return;
+			const target = this._findDragTarget(event);
+			if (!target?.parentNode) return;
+			if (Array.prototype.indexOf.call(target.parentNode.children, target) < 0) return;
+			this._dragState = {
+				pointerId: event.pointerId,
+				source: target,
+				startX: event.clientX,
+				startY: event.clientY,
+				active: false,
+				ghost: null,
+				gapIndex: void 0
+			};
+			window.addEventListener(`pointermove`, this._onPointerMove);
+			window.addEventListener(`pointerup`, this._onPointerUp);
+			window.addEventListener(`pointercancel`, this._onPointerCancel);
+		};
+		this._onPointerMove = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			const distance = Math.hypot(event.clientX - state.startX, event.clientY - state.startY);
+			if (!state.active) {
+				if (distance < DRAG_THRESHOLD_PX) return;
+				this._beginDrag(event);
+			}
+			state.ghost?.move(event.clientX, event.clientY);
+			const gap = this._computeGapIndex(event.clientX, event.clientY);
+			if (gap !== state.gapIndex) {
+				state.gapIndex = gap;
+				this.requestUpdate();
+			}
+		};
+		this._onPointerUp = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			if (state.active) {
+				const gap = this._computeGapIndex(event.clientX, event.clientY);
+				this._commitDrag(state.source, gap);
+			}
+			this._endDrag(event.pointerId);
+		};
+		this._onPointerCancel = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			this._abortDrag();
+			this._endDrag(event.pointerId);
+		};
 	}
 	static {
 		this._cnt = 0;
@@ -7878,6 +9067,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
       --toolbar-group-gap: var(--space-m);
       --toolbar-overflow: auto;
       display: block;
+      position: relative;
       container-type: inline-size;
     }
     :host([orientation="vertical-left"]),
@@ -7936,32 +9126,274 @@ let ToolbarElement = class ToolbarElement extends LitElement {
     }
     .overflow-popover:popover-open { display: flex; }
     .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
+
+    :host([allow-reorder]) ::slotted(ixfx-toolbar-group[drag-source]) {
+      opacity: 0.4;
+    }
+
+    /* While dragging, suppress text selection inside the toolbar. */
+    :host([dragging]),
+    :host([dragging]) ::slotted(*) {
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .drop-caret {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--accent);
+      border-radius: 1px;
+      pointer-events: none;
+      z-index: 1;
+    }
   `
 		];
 	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.style.setProperty(`--anchor-name`, this._anchor);
+		this.addEventListener(`click`, this._onClickCapture, true);
 	}
 	firstUpdated() {
-		this._slot.addEventListener(`slotchange`, () => this._scheduleMeasure());
+		this._slot.addEventListener(`slotchange`, () => {
+			this._updateGroups();
+			this._scheduleMeasure();
+		});
 		this._ro = new ResizeObserver(() => this._scheduleMeasure());
 		this._ro.observe(this._inner);
 		this._scheduleMeasure();
-		this._updateGroupLabels();
+		this._updateGroups();
 	}
 	updated(changed) {
-		if (changed.has(`showGroupLabels`)) this._updateGroupLabels();
+		if (changed.has(`showGroupLabels`) || changed.has(`allowReorder`)) this._updateGroups();
+	}
+	/** Groups in the main slot (not overflow) that can participate in reorder. */
+	_mainGroups() {
+		return Array.from(this.children).filter((el) => el.tagName === `IXFX-TOOLBAR-GROUP` && el.getAttribute(`slot`) !== `overflow`);
+	}
+	/**
+	* Stable key identifying a group across save/restore: its `id`, falling
+	* back to `label`. Groups with neither get an empty key, which still
+	* round-trips as long as the set of groups is unchanged. Give groups a
+	* unique `id` for reliable preference persistence.
+	*/
+	_groupKey(group) {
+		return group.id || group.label || ``;
+	}
+	/** Keys of the main-slot groups in current DOM order. */
+	getGroupOrder() {
+		return this._mainGroups().map((group) => this._groupKey(group));
+	}
+	/**
+	* Reorder main-slot groups to match `order` (keys as returned by
+	* `getGroupOrder`). Unknown keys are ignored; groups not mentioned keep
+	* their relative order at the end. Each moved group fires a `reorder`
+	* event, exactly as if dragged.
+	*/
+	setGroupOrder(order) {
+		const groups = this._mainGroups();
+		if (groups.length === 0) return;
+		const used = /* @__PURE__ */ new Set();
+		const desired = [];
+		for (const key of order) {
+			const match = groups.find((candidate) => !used.has(candidate) && candidate.id === key && key !== ``) ?? groups.find((candidate) => !used.has(candidate) && this._groupKey(candidate) === key);
+			if (match) {
+				used.add(match);
+				desired.push(match);
+			}
+		}
+		const sequence = [...desired, ...groups.filter((group) => !used.has(group))];
+		let guard = sequence.length * sequence.length + 1;
+		let moved = true;
+		while (moved && guard-- > 0) {
+			moved = false;
+			for (let i = 0; i + 1 < sequence.length; i++) {
+				const before = sequence[i];
+				const after = sequence[i + 1];
+				if (before.compareDocumentPosition(after) & Node.DOCUMENT_POSITION_FOLLOWING) continue;
+				if (this._insertAndEmit(before, after)) moved = true;
+			}
+		}
+	}
+	/**
+	* Capture the current group order as a JSON-safe snapshot for preference
+	* stores: `localStorage.setItem(key, JSON.stringify(toolbar.getLayoutSnapshot()))`.
+	*/
+	getLayoutSnapshot() {
+		return {
+			version: 1,
+			order: this.getGroupOrder()
+		};
+	}
+	/**
+	* Restore a snapshot from `getLayoutSnapshot` (e.g. parsed from
+	* `localStorage`). Unknown keys are ignored. Returns `false` when the
+	* value is not a valid snapshot, leaving the toolbar untouched.
+	*/
+	applyLayoutSnapshot(snapshot) {
+		if (typeof snapshot !== `object` || snapshot === null) return false;
+		const { version, order } = snapshot;
+		if (version !== 1 || !Array.isArray(order) || !order.every((key) => typeof key === `string`)) return false;
+		this.setGroupOrder(order);
+		return true;
+	}
+	/**
+	* Move `source` before `ref` (or append when `ref` is null), firing a
+	* `reorder` event when the position actually changed. Returns whether a
+	* move happened. Indices are measured against all light-DOM children,
+	* matching the `reorder` detail of drag-reorder.
+	*/
+	_insertAndEmit(source, ref) {
+		const parent = source.parentNode;
+		if (!parent) return false;
+		const fromIndex = Array.prototype.indexOf.call(parent.children, source);
+		parent.insertBefore(source, ref);
+		const toIndex = Array.prototype.indexOf.call(parent.children, source);
+		if (toIndex === fromIndex) return false;
+		this.dispatchEvent(new CustomEvent(`reorder`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				fromIndex,
+				toIndex,
+				group: source
+			}
+		}));
+		this._updateGroups();
+		this._scheduleMeasure();
+		return true;
 	}
-	_updateGroupLabels() {
-		for (const child of Array.from(this.children)) if (child.tagName === `IXFX-TOOLBAR-GROUP`) {
+	_updateGroups() {
+		for (const child of Array.from(this.children)) {
+			if (child.tagName !== `IXFX-TOOLBAR-GROUP`) continue;
 			if (this.showGroupLabels) child.setAttribute(`show-label`, ``);
 			else child.removeAttribute(`show-label`);
+			if (this.allowReorder && child.getAttribute(`slot`) !== `overflow`) child.setAttribute(`reorderable`, ``);
+			else child.removeAttribute(`reorderable`);
 		}
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.removeEventListener(`click`, this._onClickCapture, true);
 		this._ro?.disconnect();
+		if (this._dragState) {
+			this._abortDrag();
+			this._endDrag(this._dragState.pointerId);
+		}
+	}
+	/**
+	* Walk composedPath for the nearest ixfx-toolbar-group, requiring the press
+	* to have gone through its `.grab-handle`. Drag is handle-only so every
+	* control inside the group (buttons, selects, inputs) keeps working.
+	*/
+	_findDragTarget(event) {
+		if (!this.allowReorder) return null;
+		const path = event.composedPath();
+		let group = null;
+		let viaHandle = false;
+		for (const node of path) {
+			if (!(node instanceof HTMLElement)) continue;
+			if (node.classList.contains(`grab-handle`)) viaHandle = true;
+			if (!group && node.tagName === `IXFX-TOOLBAR-GROUP`) group = node;
+		}
+		if (!group || !viaHandle) return null;
+		if (group.getAttribute(`slot`) === `overflow`) return null;
+		return group;
+	}
+	_beginDrag(event) {
+		const state = this._dragState;
+		if (!state || state.active) return;
+		try {
+			this.setPointerCapture(event.pointerId);
+		} catch {}
+		state.active = true;
+		this.setAttribute(`dragging`, ``);
+		state.source.setAttribute(`drag-source`, ``);
+		state.ghost = this._createGhost(state.source);
+		state.ghost?.move(event.clientX, event.clientY);
+	}
+	_abortDrag() {
+		const state = this._dragState;
+		if (!state) return;
+		state.source.removeAttribute(`drag-source`);
+		if (state.gapIndex !== void 0) {
+			state.gapIndex = void 0;
+			this.requestUpdate();
+		}
+	}
+	_endDrag(pointerId) {
+		const state = this._dragState;
+		if (!state) return;
+		state.ghost?.destroy();
+		state.ghost = null;
+		this.removeAttribute(`dragging`);
+		this._dragState = null;
+		window.removeEventListener(`pointermove`, this._onPointerMove);
+		window.removeEventListener(`pointerup`, this._onPointerUp);
+		window.removeEventListener(`pointercancel`, this._onPointerCancel);
+		try {
+			this.releasePointerCapture(pointerId);
+		} catch {}
+		this.requestUpdate();
+	}
+	_commitDrag(source, gapIndex) {
+		source.removeAttribute(`drag-source`);
+		const domSiblings = this._mainGroups().filter((el) => el !== source);
+		const n = domSiblings.length;
+		const visualGap = gapIndex === void 0 ? n : Math.max(0, Math.min(gapIndex, n));
+		const domIndex = this.orientation === `vertical-left` ? n - visualGap : visualGap;
+		if (!source.parentNode) return;
+		const ref = domSiblings[domIndex] ?? null;
+		if (this._insertAndEmit(source, ref)) this._suppressNextClick = true;
+	}
+	_createGhost(source) {
+		const label = document.createElement(`span`);
+		label.textContent = (`label` in source && typeof source.label === `string` && source.label || (source.textContent ?? ``).trim()).slice(0, 60);
+		label.style.overflow = `hidden`;
+		label.style.textOverflow = `ellipsis`;
+		label.style.whiteSpace = `nowrap`;
+		try {
+			injectToolbarGhostStyles();
+			return createDragGhost({
+				anchor: source,
+				content: label,
+				className: `ixfx-toolbar-group-ghost`
+			});
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Nearest group gap to the pointer, ignoring the drag source.
+	* The perpendicular axis is ignored — the pointer always resolves to a gap.
+	* Gaps are in visual order (reversed for `vertical-left`/column-reverse).
+	*/
+	_computeGapIndex(clientX, clientY) {
+		const state = this._dragState;
+		if (!state) return void 0;
+		const domSiblings = this._mainGroups().filter((el) => el !== state.source);
+		if (domSiblings.length === 0) return 0;
+		const visual = this.orientation === `vertical-left` ? [...domSiblings].reverse() : domSiblings;
+		const useX = this.orientation === `horizontal`;
+		const pos = useX ? clientX : clientY;
+		return toolbarGapIndex(visual.map((el) => {
+			const rect = el.getBoundingClientRect();
+			return [useX ? rect.left : rect.top, useX ? rect.right : rect.bottom];
+		}), pos);
+	}
+	_computeCaretStyle() {
+		const state = this._dragState;
+		if (!state?.active || state.gapIndex === void 0) return void 0;
+		const domSiblings = this._mainGroups().filter((el) => el !== state.source);
+		if (domSiblings.length === 0) return void 0;
+		const hostRect = this.getBoundingClientRect();
+		if (!hostRect) return void 0;
+		const visual = this.orientation === `vertical-left` ? [...domSiblings].reverse() : domSiblings;
+		const gap = Math.max(0, Math.min(state.gapIndex, visual.length));
+		const rect = gap < visual.length ? visual[gap].getBoundingClientRect() : visual[visual.length - 1].getBoundingClientRect();
+		if (this.orientation === `horizontal`) return `transform: translate(${(gap < visual.length ? rect.left : rect.right) - hostRect.left - 1}px, 0); width: 2px; height: ${hostRect.height}px;`;
+		return `transform: translate(0, ${(gap < visual.length ? rect.top : rect.bottom) - hostRect.top - 1}px); width: ${hostRect.width}px; height: 2px;`;
 	}
 	/** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
 	_scheduleMeasure() {
@@ -8023,93 +9455,1372 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 				this._overflowCount = newCount;
 				mutated = true;
 			}
-			if (mutated) this.requestUpdate();
-			return;
+			if (mutated) this.requestUpdate();
+			return;
+		}
+		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
+		while (inMain.length > 0 && cum + btnAllowance > available) {
+			const last = inMain[inMain.length - 1];
+			const s = this._sizes.get(last) ?? 0;
+			last.setAttribute(`slot`, `overflow`);
+			inMain.pop();
+			inOverflow.unshift(last);
+			cum -= (inMain.length ? gap : 0) + s;
+			mutated = true;
+		}
+		while (inOverflow.length > 0) {
+			const first = inOverflow[0];
+			const s = this._sizes.get(first);
+			if (s === void 0) break;
+			const addGap = inMain.length ? gap : 0;
+			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
+			if (cum + addGap + s + nextBtnAllowance > available) break;
+			first.removeAttribute(`slot`);
+			inOverflow.shift();
+			inMain.push(first);
+			cum += addGap + s;
+			mutated = true;
+		}
+		const newCount = inOverflow.length;
+		if (newCount !== this._overflowCount) {
+			this._overflowCount = newCount;
+			mutated = true;
+		}
+		if (mutated) this.requestUpdate();
+	}
+	_toggleOverflow() {
+		try {
+			this._popover.togglePopover();
+		} catch {
+			this._popover.showPopover();
+		}
+	}
+	render() {
+		const overflowMode = getComputedStyle(this).getPropertyValue(`--toolbar-overflow`).trim();
+		const hasOverflow = this._overflowCount > 0 || overflowMode === `collapsed`;
+		const caretStyle = this._computeCaretStyle();
+		return html`
+      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
+        <slot @pointerdown=${this._onPointerDown} @keydown=${this._onKeyDown}></slot>
+        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+      </div>
+      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
+        <slot name="overflow"></slot>
+      </div>
+      ${caretStyle ? html`<div class="drop-caret" style=${caretStyle}></div>` : nothing}
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "layout", void 0);
+__decorate([property({
+	type: String,
+	attribute: `vertical-writing`,
+	reflect: true
+})], ToolbarElement.prototype, "verticalWriting", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toolbar-align`,
+	reflect: true
+})], ToolbarElement.prototype, "toolbarAlign", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-group-labels`,
+	reflect: true
+})], ToolbarElement.prototype, "showGroupLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `invisible-groups`,
+	reflect: true
+})], ToolbarElement.prototype, "invisibleGroups", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-reorder`,
+	reflect: true
+})], ToolbarElement.prototype, "allowReorder", void 0);
+__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
+__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
+__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
+ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
+//#endregion
+//#region src/treemap/layout.ts
+/** Coerce a raw accessor result to a non-negative finite weight. */
+function normaliseValue$1(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? raw : 0;
+}
+/** Depth-first search for the node with `key`. Returns `undefined` when absent. */
+function findTreemapNode(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return root;
+	for (const child of root.children ?? []) {
+		const hit = findTreemapNode(child, key);
+		if (hit) return hit;
+	}
+}
+/**
+* Chain of nodes from `root` down to (and including) the node with `key`.
+* Returns `undefined` when the key is absent. The first entry is always `root`.
+*/
+function findTreemapPath(root, key) {
+	if (!root) return void 0;
+	if (root.item.key === key) return [root];
+	for (const child of root.children ?? []) {
+		const hit = findTreemapPath(child, key);
+		if (hit) return [root, ...hit];
+	}
+}
+/**
+* Worst aspect ratio of the row items if laid out together along a strip of
+* length `side` (the short side of the remaining container). Lower is better;
+* `1` is a perfect square. Follows Bruls et al.
+*/
+function worstAspect(areas, total, side) {
+	if (areas.length === 0 || total <= 0 || side <= 0) return Number.POSITIVE_INFINITY;
+	let worst = 0;
+	for (const area of areas) {
+		if (area <= 0) return Number.POSITIVE_INFINITY;
+		const ratio = side * side * area / (total * total);
+		worst = Math.max(worst, ratio, 1 / ratio);
+	}
+	return worst;
+}
+/**
+* Squarified tiling of `items` (with pre-normalised positive areas summing to
+* `box.width * box.height`) into `box`. Returns absolute boxes in item order.
+* Sibling order is preserved — no descending sort — so output is deterministic.
+*/
+function squarifyInto(items, box) {
+	const out = Array.from({ length: items.length });
+	let cx = box.x;
+	let cy = box.y;
+	let cw = box.width;
+	let ch = box.height;
+	let start = 0;
+	while (start < items.length) {
+		const side = Math.min(cw, ch);
+		let end = start + 1;
+		let rowAreas = items.slice(start, end).map((i) => i.area);
+		let rowTotal = rowAreas.reduce((a, b) => a + b, 0);
+		let worst = worstAspect(rowAreas, rowTotal, side);
+		while (end < items.length) {
+			const nextAreas = items.slice(start, end + 1).map((i) => i.area);
+			const nextTotal = nextAreas.reduce((a, b) => a + b, 0);
+			const nextWorst = worstAspect(nextAreas, nextTotal, side);
+			if (nextWorst <= worst) {
+				end++;
+				rowAreas = nextAreas;
+				rowTotal = nextTotal;
+				worst = nextWorst;
+			} else break;
+		}
+		if (cw <= ch) {
+			const stripH = rowTotal / cw;
+			let ix = cx;
+			for (let i = start; i < end; i++) {
+				const w = rowAreas[i - start] / stripH;
+				out[i] = {
+					x: ix,
+					y: cy,
+					width: w,
+					height: stripH
+				};
+				ix += w;
+			}
+			cy += stripH;
+			ch -= stripH;
+		} else {
+			const stripW = rowTotal / ch;
+			let iy = cy;
+			for (let i = start; i < end; i++) {
+				const h = rowAreas[i - start] / stripW;
+				out[i] = {
+					x: cx,
+					y: iy,
+					width: stripW,
+					height: h
+				};
+				iy += h;
+			}
+			cx += stripW;
+			cw -= stripW;
+		}
+		start = end;
+	}
+	return out;
+}
+/**
+* Subdivide `box` among `weights` (same length as the child list) using
+* `method` at `relativeDepth`. Returns one absolute box per weight, in order.
+* Zero-share children get degenerate (zero-area) boxes at the box origin.
+*/
+function subdivide(box, weights, method, relativeDepth) {
+	const total = weights.reduce((a, b) => a + b, 0);
+	const shares = total > 0 ? weights.map((w) => w / total) : weights.map(() => 1 / weights.length);
+	const dice = method === `dice` || method === `slice-dice` && relativeDepth % 2 === 0;
+	const slice = method === `slice` || method === `slice-dice` && relativeDepth % 2 === 1;
+	if (method === `squarify`) {
+		const positive = shares.map((share, i) => ({
+			share,
+			i
+		})).filter((s) => s.share > 0);
+		const boxes = weights.map(() => ({
+			x: box.x,
+			y: box.y,
+			width: 0,
+			height: 0
+		}));
+		if (positive.length > 0) {
+			const containerArea = box.width * box.height;
+			const laid = squarifyInto(positive.map((p) => ({ area: p.share * containerArea })), box);
+			positive.forEach((p, k) => {
+				boxes[p.i] = laid[k];
+			});
+		}
+		return boxes;
+	}
+	const boxes = [];
+	if (dice) {
+		let cursor = box.x;
+		shares.forEach((share) => {
+			const w = box.width * share;
+			boxes.push({
+				x: cursor,
+				y: box.y,
+				width: w,
+				height: box.height
+			});
+			cursor += w;
+		});
+	} else if (slice) {
+		let cursor = box.y;
+		shares.forEach((share) => {
+			const h = box.height * share;
+			boxes.push({
+				x: box.x,
+				y: cursor,
+				width: box.width,
+				height: h
+			});
+			cursor += h;
+		});
+	}
+	return boxes;
+}
+/**
+* Compute the visible rectangles for a treemap view.
+*
+* The zoom node fills the whole viewport (`0,0,1,1`); its children subdivide
+* that rectangle by `valueAccessor` share, recursively, up to `maxDepth`
+* nested levels. The zoom node itself is never emitted as a rect (it is shown
+* in the breadcrumb strip instead — matching `TreeComponent.getNodes()`,
+* where the root is never listed). Siblings whose weights all normalise to
+* `0` split their parent's rectangle equally.
+*
+* @param root True tree root. `undefined` (or a root without children) yields `[]`.
+* @param options `valueAccessor` (default equal weights), `maxDepth` (nesting
+*   levels, default unlimited), `zoomKey` (visual root, default true root;
+*   unknown keys fall back to the true root), `tilingMethod` (default
+*   `'squarify'`).
+*/
+function computeTreemapLayout(root, options = {}) {
+	if (!root?.children?.length) return [];
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false } = options;
+	if (maxDepth <= 0) return [];
+	const visibleChildren = (node) => {
+		const children = node.children ?? [];
+		return hideLeaves ? children.filter((n) => n.item.isLeaf !== true) : children;
+	};
+	const zoomNode = zoomKey === void 0 ? root : findTreemapNode(root, zoomKey) ?? root;
+	const zoomPath = findTreemapPath(root, zoomNode.item.key);
+	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
+	const siblings = visibleChildren(zoomNode);
+	if (siblings.length === 0) return [];
+	const rects = [];
+	const layoutLevel = (nodes, box, depth, relativeDepth, parentKey) => {
+		if (nodes.length === 0 || relativeDepth >= maxDepth) return;
+		const boxes = subdivide(box, nodes.map((n) => normaliseValue$1(valueAccessor(n.item))), tilingMethod, relativeDepth);
+		const setSize = nodes.length;
+		nodes.forEach((node, index) => {
+			const childBox = boxes[index];
+			const children = visibleChildren(node);
+			rects.push({
+				node,
+				depth,
+				relativeDepth,
+				x: childBox.x,
+				y: childBox.y,
+				width: childBox.width,
+				height: childBox.height,
+				parentKey,
+				index,
+				setSize,
+				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
+			});
+			if (children.length > 0) layoutLevel(children, childBox, depth + 1, relativeDepth + 1, node.item.key);
+		});
+	};
+	layoutLevel(siblings, {
+		x: 0,
+		y: 0,
+		width: 1,
+		height: 1
+	}, zoomDepth + 1, 0, zoomNode.item.key);
+	return rects;
+}
+//#endregion
+//#region src/treemap/treemap-list.ts
+let TreemapListElement = class TreemapListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		this.tilingMethod = `squarify`;
+		this.maxDepth = 4;
+		this.hideLeaves = false;
+		this.minLabelArea = 1600;
+		this.minTileWidth = 24;
+		this.padding = 4;
+		this.minChildArea = 400;
+		this.valueAccessor = () => 1;
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.disableKeyboardNavigation = false;
+		this.registry = void 0;
+		this._zoomKey = void 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.treemap-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#rects().map((r) => ({
+				id: r.node.item.key,
+				enabled: true
+			})),
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			},
+			onTickle: (id) => {
+				if (id === void 0) return;
+				const rect = this.#rects().find((r) => r.node.item.key === id);
+				if (!rect) return;
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node: rect.node,
+						depth: rect.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+		this.#pendingKeys = /* @__PURE__ */ new Set();
+		this.#aborters = /* @__PURE__ */ new Map();
+		this.#wheelCooldownUntil = 0;
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	/** Current zoom root. `undefined` when showing the full tree. Pure view-state — `root` is never mutated. */
+	get focusedNode() {
+		if (this._zoomKey === void 0) return void 0;
+		return findTreemapNode(this.#effectiveRoot, this._zoomKey);
+	}
+	#modelUnsubscribe;
+	#pendingKeys;
+	#aborters;
+	#anchorIndex;
+	#ownedRegistry;
+	#unregisterSearchCommands;
+	#resizeObserver;
+	#pendingFlip;
+	/** `performance.now()` timestamp before which further Cmd+wheel zoom steps are ignored. */
+	#wheelCooldownUntil;
+	get #effectiveRoot() {
+		return this.model?.root ?? this.root;
+	}
+	#rects() {
+		return this.#rectsForZoom(this._zoomKey);
+	}
+	#rectsForZoom(zoomKey) {
+		return computeTreemapLayout(this.#effectiveRoot, {
+			valueAccessor: this.valueAccessor,
+			maxDepth: this.maxDepth,
+			zoomKey,
+			tilingMethod: this.tilingMethod,
+			hideLeaves: this.hideLeaves
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`data-input-mode`, `mouse`);
+		const registry = this.#ownedRegistry = createCommandRegistry();
+		registry.register({
+			id: `select-all`,
+			label: `Select All`,
+			description: `Select all visible items`,
+			execute: () => this.selectAll()
+		});
+		registry.register({
+			id: `deselect-all`,
+			label: `Deselect All`,
+			description: `Clear all selection`,
+			execute: () => this.deselectAll()
+		});
+		this.registry = registry;
+		this.#syncSearchCommands();
+		if (typeof ResizeObserver !== `undefined`) {
+			this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
+			this.#resizeObserver.observe(this);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		for (const aborter of this.#aborters.values()) aborter.abort();
+		this.#aborters.clear();
+		this.#pendingKeys.clear();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		if (this.#ownedRegistry) {
+			this.#ownedRegistry.unregister(`select-all`);
+			this.#ownedRegistry.unregister(`deselect-all`);
+			this.#ownedRegistry = void 0;
+			this.registry = void 0;
+		}
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		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`)) {
+			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();
+		if (this.#pendingFlip) {
+			const flip = this.#pendingFlip;
+			this.#pendingFlip = void 0;
+			this.#applyFlip(flip);
+		}
+	}
+	#resetViewState() {
+		this.#pendingFlip = void 0;
+		this.#clearSelectionInternal();
+		this.tickled.clearTickled();
+		this._zoomKey = void 0;
+		this.#anchorIndex = void 0;
+	}
+	#ensureVisibleChildren() {
+		if (!this.model && !this.loadChildren) return;
+		for (const rect of this.#rects()) {
+			const { node } = rect;
+			if (node.children !== void 0 || this.#pendingKeys.has(node.item.key)) continue;
+			this.#loadChildren(node, rect.depth);
+		}
+	}
+	async #loadChildren(node, depth) {
+		const key = node.item.key;
+		this.#pendingKeys.add(key);
+		const controller = new AbortController();
+		this.#aborters.set(key, controller);
+		this.requestUpdate();
+		try {
+			let children;
+			if (this.model) children = await this.model.getChildren(node, depth, controller.signal);
+			else children = [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = children;
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+		} finally {
+			this.#pendingKeys.delete(key);
+			this.#aborters.delete(key);
+			if (!controller.signal.aborted) this.requestUpdate();
+		}
+	}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf === true;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#clearSelectionInternal() {
+		this._selectedNodes.clear();
+		this.selectedNode = void 0;
+	}
+	#dispatchSelect(previous) {
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: new Set(this._selectedNodes),
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	select(node) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.selectedNode = node;
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.delete(node);
+		if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	clearSelection() {
+		if (this._selectedNodes.size === 0) return;
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	selectAll() {
+		const prev = new Set(this._selectedNodes);
+		for (const rect of this.#rects()) {
+			if (!this.#canSelect(rect.node)) continue;
+			this._selectedNodes.add(rect.node);
+		}
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselectAll() {
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
+	selectMany(nodes) {
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set([...nodes].filter((n) => this.#canSelect(n)));
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	/**
+	* Drill down so `node` becomes the visual root (ancestors move to the
+	* breadcrumb strip). Pure view-state — `root` is never mutated.
+	* Fires `zoom` and the semantic `expand` event.
+	*/
+	zoomTo(node) {
+		if (this._zoomKey === node.item.key) return;
+		this.#pendingFlip = this.#planFlip(node.item.key);
+		this._zoomKey = node.item.key;
+		this.tickled.clearTickled();
+		const depth = findTreemapPath(this.#effectiveRoot, node.item.key)?.length;
+		const absoluteDepth = depth === void 0 ? -1 : depth - 2;
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`expand`, {
+			detail: {
+				node,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	/**
+	* Zoom back out to the full tree. Fires `zoom` (with `node: undefined`) and
+	* the semantic `collapse` event for the previous zoom root.
+	*/
+	zoomOut() {
+		if (this._zoomKey === void 0) return;
+		this.#pendingFlip = this.#planFlip(void 0);
+		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.tickled.clearTickled();
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node: void 0,
+				depth: -1
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (previous) this.dispatchEvent(new CustomEvent(`collapse`, {
+			detail: {
+				node: previous,
+				depth: absoluteDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	/**
+	* Work out (before `_zoomKey` changes) whether the upcoming zoom should
+	* animate, and how — see `FlipPlan`. Returns `undefined` to skip the
+	* animation: reduced-motion is requested, or the node needed to anchor it
+	* isn't in either the old or new layout's visible window.
+	*/
+	#planFlip(targetKey) {
+		if (typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches) return void 0;
+		if (targetKey !== void 0) {
+			const visible = this.#rects().find((r) => r.node.item.key === targetKey);
+			if (visible) return {
+				direction: `in`,
+				rect: {
+					x: visible.x,
+					y: visible.y,
+					width: visible.width,
+					height: visible.height
+				}
+			};
+		}
+		const fromKey = this._zoomKey;
+		if (fromKey === void 0) return void 0;
+		const landing = this.#rectsForZoom(targetKey).find((r) => r.node.item.key === fromKey);
+		if (!landing) return void 0;
+		return {
+			direction: `out`,
+			rect: {
+				x: landing.x,
+				y: landing.y,
+				width: landing.width,
+				height: landing.height
+			}
+		};
+	}
+	/** Apply a planned FLIP animation once the new layout has rendered — see `FlipPlan`. */
+	#applyFlip(flip) {
+		const inner = this.renderRoot.querySelector(`.viewport-inner`);
+		const viewport = this.renderRoot.querySelector(`.viewport`);
+		if (!(inner instanceof HTMLElement) || !(viewport instanceof HTMLElement)) return;
+		const vw = viewport.clientWidth;
+		const vh = viewport.clientHeight;
+		if (vw <= 0 || vh <= 0) return;
+		const { rect, direction } = flip;
+		const startTransform = direction === `in` ? `translate(${rect.x * vw}px, ${rect.y * vh}px) scale(${Math.max(rect.width, 1e-4)}, ${Math.max(rect.height, 1e-4)})` : (() => {
+			const sx = rect.width > 0 ? 1 / rect.width : 1;
+			const sy = rect.height > 0 ? 1 / rect.height : 1;
+			return `translate(${-rect.x * sx * vw}px, ${-rect.y * sy * vh}px) scale(${sx}, ${sy})`;
+		})();
+		inner.classList.remove(`flipping`);
+		inner.style.transform = startTransform;
+		inner.offsetWidth;
+		requestAnimationFrame(() => {
+			inner.classList.add(`flipping`);
+			inner.style.transform = `none`;
+		});
+		inner.addEventListener(`transitionend`, () => inner.classList.remove(`flipping`), { once: true });
+	}
+	#canZoom(node) {
+		if (node.item.isLeaf === true) return false;
+		if (node.children !== void 0) return this.hideLeaves ? node.children.some((n) => n.item.isLeaf !== true) : node.children.length > 0;
+		return this.model !== void 0 || this.loadChildren !== void 0;
+	}
+	/**
+	* Zoom so the node at `keys` (path from the root's children) is visible,
+	* then select it. Returns `true` if the path was found.
+	*/
+	navigateTo(keys) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		let current = root;
+		const path = [];
+		for (const key of keys) {
+			const found = current.children?.find((n) => n.item.key === key);
+			if (!found) return false;
+			path.push(found);
+			current = found;
+		}
+		const target = path.at(-1);
+		if (path.length > this.maxDepth) this.zoomTo(path[path.length - this.maxDepth - 1]);
+		else if (this._zoomKey !== void 0) this.zoomOut();
+		this.select(target);
+		this.tickled.setTickled(target.item.key);
+		this.requestUpdate();
+		return true;
+	}
+	/**
+	* Zoom + select the first node for which `predicate` returns `true`.
+	* Returns `true` if a matching node was found.
+	*/
+	navigateToNode(predicate) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		const keyPath = this.#findKeyPath(root.children, predicate);
+		if (!keyPath) return false;
+		return this.navigateTo(keyPath);
+	}
+	/**
+	* Zoom so the node with `key` is visible and move the keyboard cursor to it,
+	* without changing the selection. Used by incremental-search "navigate" mode.
+	*/
+	revealKey(key) {
+		const root = this.#effectiveRoot;
+		if (!root?.children) return false;
+		const path = this.#findKeyPath(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));
+			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;
+			}
 		}
-		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
-		while (inMain.length > 0 && cum + btnAllowance > available) {
-			const last = inMain[inMain.length - 1];
-			const s = this._sizes.get(last) ?? 0;
-			last.setAttribute(`slot`, `overflow`);
-			inMain.pop();
-			inOverflow.unshift(last);
-			cum -= (inMain.length ? gap : 0) + s;
-			mutated = true;
+	}
+	/**
+	* All nodes currently visible as tiles, in render (pre-order) order,
+	* with absolute depth (root's children are depth 0).
+	*/
+	getNodes() {
+		return this.#rects().map((r) => ({
+			node: r.node,
+			depth: r.depth
+		}));
+	}
+	#matchesFilter(node, depth) {
+		if (!this.filterPredicate) return true;
+		if (this.filterPredicate(node, depth)) return true;
+		return node.children?.some((child) => this.#matchesFilter(child, depth + 1)) ?? false;
+	}
+	#rectCenter(rect) {
+		return {
+			x: rect.x + rect.width / 2,
+			y: rect.y + rect.height / 2
+		};
+	}
+	/**
+	* Geometrically nearest sibling tile in `direction` from `current`
+	* (nearest-neighbour by rect center). Falls back to the parent tile
+	* (Up/Left) or first-child tile (Down/Right) when no sibling lies in that
+	* direction, so every visible tile stays keyboard-reachable.
+	*/
+	#nearestInDirection(current, direction) {
+		const rects = this.#rects();
+		const center = this.#rectCenter(current);
+		const siblings = rects.filter((r) => r !== current && r.relativeDepth === current.relativeDepth && r.parentKey === current.parentKey);
+		let best;
+		let bestDistance = Number.POSITIVE_INFINITY;
+		for (const candidate of siblings) {
+			const c = this.#rectCenter(candidate);
+			const dx = c.x - center.x;
+			const dy = c.y - center.y;
+			if (!(direction === `left` ? dx < 0 : direction === `right` ? dx > 0 : direction === `up` ? dy < 0 : dy > 0)) continue;
+			const distance = Math.hypot(dx, dy);
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				best = candidate;
+			}
 		}
-		while (inOverflow.length > 0) {
-			const first = inOverflow[0];
-			const s = this._sizes.get(first);
-			if (s === void 0) break;
-			const addGap = inMain.length ? gap : 0;
-			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
-			if (cum + addGap + s + nextBtnAllowance > available) break;
-			first.removeAttribute(`slot`);
-			inOverflow.shift();
-			inMain.push(first);
-			cum += addGap + s;
-			mutated = true;
+		if (best) return best;
+		if (direction === `up` || direction === `left`) return current.parentKey === void 0 ? void 0 : rects.find((r) => r.node.item.key === current.parentKey);
+		return rects.find((r) => r.parentKey === current.node.item.key);
+	}
+	#handleItemClick(rect, index, event) {
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (this.interactionMode === `standard` && (event.ctrlKey || event.metaKey)) {
+			if (this._selectedNodes.has(rect.node)) this.deselect(rect.node);
+			else if (this.#canSelect(rect.node)) {
+				const prev = new Set(this._selectedNodes);
+				this._selectedNodes.add(rect.node);
+				this.selectedNode = rect.node;
+				this.#dispatchSelect(prev);
+				this.requestUpdate();
+			}
+			this.#anchorIndex = index;
+		} else if (this.interactionMode === `standard` && event.shiftKey && this.#anchorIndex !== void 0) {
+			const rects = this.#rects();
+			const from = Math.min(this.#anchorIndex, index);
+			const to = Math.max(this.#anchorIndex, index);
+			const prev = new Set(this._selectedNodes);
+			this._selectedNodes = new Set(rects.slice(from, to + 1).map((r) => r.node).filter((n) => this.#canSelect(n)));
+			this.selectedNode = [...this._selectedNodes].at(-1);
+			this.#dispatchSelect(prev);
+			this.requestUpdate();
+		} else if (this.interactionMode !== `manual`) {
+			this.select(rect.node);
+			this.#anchorIndex = index;
 		}
-		const newCount = inOverflow.length;
-		if (newCount !== this._overflowCount) {
-			this._overflowCount = newCount;
-			mutated = true;
+		this.tickled.setTickled(rect.node.item.key);
+		if (this.#canZoom(rect.node)) this.zoomTo(rect.node);
+	}
+	#handleItemDblClick(rect) {
+		this.dispatchEvent(new CustomEvent(`item-dblclick`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`activate`, {
+			detail: {
+				node: rect.node,
+				depth: rect.depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleKeyDown(event) {
+		if (this.disableKeyboardNavigation) return;
+		const rects = this.#rects();
+		if (rects.length === 0) return;
+		const tickledKey = this.tickled.tickledId;
+		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);
+			if (this.interactionMode === `implicit`) this.select(rect.node);
+		};
+		switch (event.key) {
+			case `ArrowLeft`:
+				moveTo(current ? this.#nearestInDirection(current, `left`) : rects[0]);
+				return;
+			case `ArrowRight`:
+				moveTo(current ? this.#nearestInDirection(current, `right`) : rects[0]);
+				return;
+			case `ArrowUp`:
+				moveTo(current ? this.#nearestInDirection(current, `up`) : rects[0]);
+				return;
+			case `ArrowDown`:
+				moveTo(current ? this.#nearestInDirection(current, `down`) : rects[0]);
+				return;
+			case `Home`:
+				moveTo(rects[0]);
+				return;
+			case `End`:
+				moveTo(rects.at(-1));
+				return;
+			case `Enter`:
+				if (!current) return;
+				event.preventDefault();
+				if (this.interactionMode !== `manual`) this.select(current.node);
+				this.dispatchEvent(new CustomEvent(`activate`, {
+					detail: {
+						node: current.node,
+						depth: current.depth
+					},
+					bubbles: true,
+					composed: true
+				}));
+				if (this.#canZoom(current.node)) this.zoomTo(current.node);
+				return;
+			case `Backspace`:
+			case `Escape`: if (this._zoomKey !== void 0) {
+				event.preventDefault();
+				this.zoomOut();
+			}
 		}
-		if (mutated) this.requestUpdate();
 	}
-	_toggleOverflow() {
-		try {
-			this._popover.togglePopover();
-		} catch {
-			this._popover.showPopover();
+	/**
+	* Cmd+wheel zooms: scrolling backward (deltaY < 0, towards the user) zooms
+	* into the tile under the pointer — the same as clicking it; scrolling
+	* forward (deltaY > 0, away from the user) zooms out one level at a time
+	* (see `#zoomOutOneStep`), not straight to the root. Plain wheel (no Cmd)
+	* is left alone for normal page scroll. A short cooldown after each step
+	* keeps a single trackpad gesture (which fires many small wheel events)
+	* from firing a cascade of zoom steps.
+	*/
+	#handleWheel(event) {
+		if (!event.metaKey || event.deltaY === 0) return;
+		event.preventDefault();
+		if (performance.now() < this.#wheelCooldownUntil) return;
+		if (event.deltaY > 0) {
+			if (this._zoomKey === void 0) return;
+			this.#wheelCooldownUntil = performance.now() + 260;
+			this.#zoomOutOneStep();
+			return;
 		}
+		const key = (event.target?.closest(`.tile`))?.getAttribute(`data-key`) ?? void 0;
+		if (key === void 0) return;
+		const rect = this.#rects().find((r) => r.node.item.key === key);
+		if (!rect || !this.#canZoom(rect.node)) return;
+		this.#wheelCooldownUntil = performance.now() + 260;
+		this.zoomTo(rect.node);
+	}
+	/** Zoom to the current zoom node's parent, or fully out when it's a direct child of the root. */
+	#zoomOutOneStep() {
+		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
+		const parent = path && path.length > 2 ? path[path.length - 2] : void 0;
+		if (parent) this.zoomTo(parent);
+		else this.zoomOut();
+	}
+	#renderBreadcrumb() {
+		const zoomNode = this.focusedNode;
+		if (zoomNode === void 0) return nothing;
+		return html`
+      <nav class="breadcrumb" part="breadcrumb" aria-label="Treemap zoom path">
+        <ixfx-crumb-navigation
+          with-up
+          .root=${this.#effectiveRoot}
+          .selectedNode=${zoomNode}
+          @select=${this.#onCrumbSelect}
+          @item-click=${(e) => e.stopPropagation()}
+          @tickle=${(e) => e.stopPropagation()}
+          @expand=${(e) => e.stopPropagation()}
+        ></ixfx-crumb-navigation>
+      </nav>
+    `;
 	}
-	render() {
-		const overflowMode = getComputedStyle(this).getPropertyValue(`--toolbar-overflow`).trim();
-		const hasOverflow = this._overflowCount > 0 || overflowMode === `collapsed`;
+	/**
+	* Translate crumb-trail selection (crumb clicks + the up-button) into zoom
+	* state. The event is stopped: crumb clicks must not bubble as our `select`
+	* (the selection set is unchanged by them).
+	*/
+	#onCrumbSelect(event) {
+		event.stopPropagation();
+		const node = [...event.detail.selected].at(0);
+		if (!node) return;
+		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
+		else this.zoomTo(node);
+	}
+	/** On-screen size (px) of `rect`, or `undefined` before the host has been measured. */
+	#pixelSize(rect) {
+		const hostWidth = this.clientWidth || 0;
+		const hostHeight = this.clientHeight || 0;
+		if (hostWidth <= 0 || hostHeight <= 0) return void 0;
+		return {
+			width: rect.width * hostWidth,
+			height: rect.height * hostHeight
+		};
+	}
+	/** Hide when too small by area, or too narrow to fit any readable text even truncated. */
+	#hideLabel(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return false;
+		return size.width * size.height < this.minLabelArea || size.width < this.minTileWidth;
+	}
+	/** Whether `rect` is large enough on-screen for its own children to be subdivided and drawn. */
+	#canDescend(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return true;
+		return size.width * size.height >= this.minChildArea && size.width >= this.minTileWidth;
+	}
+	/** Slugify a category name into a CSS custom-property-safe token. */
+	#categorySlug(category) {
+		return category.replace(/[^\w-]/g, `-`);
+	}
+	/**
+	* Inline colour overrides for `node`'s category, or `undefined` for none.
+	* Set as real `background-color`/`color` (not custom properties) so they
+	* simply win over `.tile`'s CSS-variable-driven defaults by specificity —
+	* no risk of an unresolvable `var()` chain leaving the property invalid.
+	*/
+	#categoryStyle(node) {
+		const category = this.categoryAccessor?.(node.item);
+		if (!category) return void 0;
+		const slug = this.#categorySlug(category);
+		return `background-color:var(--treemap-category-${slug}-bg, var(--treemap-tile-bg));color:var(--treemap-category-${slug}-text, var(--treemap-tile-text));`;
+	}
+	#renderTileBox(rect, positionStyle, hasVisibleChildren, childrenContent) {
+		const { node } = rect;
+		const selected = this._selectedNodes.has(node);
+		const tickled = this.tickled.isTickled(node.item.key);
+		const filtered = !this.#matchesFilter(node, rect.depth);
+		const pending = this.#pendingKeys.has(node.item.key);
+		const hideLabel = this.#hideLabel(rect);
+		const showHeader = hasVisibleChildren && !hideLabel;
+		const category = this.categoryAccessor?.(node.item);
+		const categoryStyle = this.#categoryStyle(node);
 		return html`
-      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
-        <slot></slot>
-        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+      <div
+        class="item tile ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
+        data-key=${node.item.key}
+        data-depth=${rect.relativeDepth}
+        data-category=${category ?? nothing}
+        role="treeitem"
+        tabindex="-1"
+        aria-level=${rect.depth + 1}
+        aria-selected=${selected}
+        aria-setsize=${rect.setSize}
+        aria-posinset=${rect.index + 1}
+        aria-label=${node.item.label}
+        title=${node.item.label}
+        part="tile"
+        style=${categoryStyle ? `${positionStyle};${categoryStyle}` : positionStyle}
+        @click=${(e) => {
+			e.stopPropagation();
+			this.#handleItemClick(rect, this.#rects().findIndex((r) => r.node.item.key === node.item.key), e);
+		}}
+        @dblclick=${(e) => {
+			e.stopPropagation();
+			this.#handleItemDblClick(rect);
+		}}
+        @pointerenter=${() => this.tickled.handlePointerEnter(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}
       </div>
-      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
-        <slot name="overflow"></slot>
+    `;
+	}
+	/**
+	* Render `rect` plus (if it's large enough to descend into — see
+	* `#canDescend`) a `.tile-children` holding its own children, each
+	* positioned relative to `rect` itself and recursing the same way.
+	*
+	* Each level gets its own real `.tile-header` + `.tile-children` box, so a
+	* header reserves its own space via normal box-model layout (flex column:
+	* header, then the remaining space for children) at *every* level — not
+	* just the top one. That matters because layout rects are purely
+	* geometric (no allowance for header height), so a folder whose one child
+	* fills ~100% of its area gets a child rect nearly identical to its own;
+	* positioning that child against its direct parent (not some flattened
+	* shared ancestor) is what keeps the parent's header from being painted
+	* over by an opaque, near-identically-sized child box.
+	*/
+	#renderTile(rect, positionStyle, byParent) {
+		const children = rect.hasChildren && this.#canDescend(rect) ? byParent.get(rect.node.item.key) ?? [] : [];
+		const childrenContent = children.length > 0 ? html`
+        <div class="tile-children" role="group">
+          ${repeat(children, (r) => r.node.item.key, (r) => this.#renderNestedTile(r, rect, byParent))}
+        </div>
+      ` : nothing;
+		return this.#renderTileBox(rect, positionStyle, children.length > 0, childrenContent);
+	}
+	/** A child tile, positioned as a percentage of `parent`'s own box. */
+	#renderNestedTile(rect, parent, byParent) {
+		const relX = parent.width > 0 ? (rect.x - parent.x) / parent.width : 0;
+		const relY = parent.height > 0 ? (rect.y - parent.y) / parent.height : 0;
+		const relW = parent.width > 0 ? rect.width / parent.width : 0;
+		const relH = parent.height > 0 ? rect.height / parent.height : 0;
+		const style = `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
+	}
+	#renderTopTile(rect, byParent) {
+		const style = `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
+	}
+	render() {
+		const rects = this.#rects();
+		const byParent = /* @__PURE__ */ new Map();
+		for (const rect of rects) {
+			if (rect.parentKey === void 0) continue;
+			const list = byParent.get(rect.parentKey) ?? [];
+			list.push(rect);
+			byParent.set(rect.parentKey, list);
+		}
+		const zoomKey = this._zoomKey ?? this.#effectiveRoot?.item.key;
+		const topLevel = zoomKey === void 0 ? rects.filter((r) => r.relativeDepth === 0) : byParent.get(zoomKey) ?? rects.filter((r) => r.relativeDepth === 0);
+		return html`
+      <div
+        class="treemap"
+        role="tree"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        style=${`--treemap-padding:${this.padding}px`}
+        @keydown=${(e) => this.#handleKeyDown(e)}
+        @pointerleave=${() => this.tickled.clearTickled()}
+        @wheel=${(e) => this.#handleWheel(e)}
+      >
+        ${this.#renderBreadcrumb()}
+        ${rects.length === 0 ? html`<div class="empty-state">No data</div>` : html`
+            <div class="viewport" part="viewport">
+              <div class="viewport-inner">
+                ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              </div>
+            </div>
+          `}
       </div>
+      ${this.search.renderField()}
     `;
 	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			listSearchStyles,
+			css`
+      :host {
+        --treemap-height: 280px;
+        --treemap-gap: 2px;
+        --treemap-padding: 4px;
+        --treemap-tile-bg: var(--surface-4);
+        --treemap-tile-text: var(--surface-4-text);
+        --treemap-tile-border: var(--border-subtle);
+        --treemap-header-bg: rgb(0 0 0 / 0.12);
+        --treemap-font-size: var(--text-s);
+        --treemap-zoom-duration: 220ms;
+
+        display: block;
+        overflow: hidden;
+      }
+
+      /* Per-category tile colours (set categoryAccessor to opt in): define
+         --treemap-category-SLUG-bg / -text at whatever scope suits (:host
+         here, or globally) for each category your accessor can return —
+         e.g. --treemap-category-urgent-bg: oklch(55% 0.18 25). A category
+         with no matching pair falls back to --treemap-tile-bg/-text. */
+
+      .treemap {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+        outline: none;
+        height: 100%;
+      }
+
+      .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;
+      }
+
+      .viewport {
+        position: relative;
+        width: 100%;
+        /* flex-basis of --treemap-height (its size when nothing forces a
+           different one — the common case of an auto-height host) but
+           allowed to grow/shrink like any flex item, so it shares the
+           .treemap column's height with the breadcrumb instead of a plain
+           fixed height always claiming that full amount regardless of what
+           else needs space — which is what let the breadcrumb push the
+           host past its own height and scroll once a zoom made it appear. */
+        flex: 1 1 var(--treemap-height);
+        min-height: 0;
+        overflow: hidden;
+        border-radius: var(--radius-m);
+      }
+
+      /* Transform target for the zoom-in/zoom-out FLIP animation (see
+         #planFlip/#applyFlip) — kept separate from .viewport so the
+         transform never fights that element's own sizing/overflow. */
+      .viewport-inner {
+        position: absolute;
+        inset: 0;
+        transform-origin: 0 0;
+      }
+
+      .viewport-inner.flipping {
+        transition: transform var(--treemap-zoom-duration, 220ms) ease-out;
+      }
+
+      .tile {
+        position: absolute;
+        box-sizing: border-box;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        /* Override the shared .item class's align-items:center (built for
+           icon+label rows) — tiles need their flex children to stretch to
+           full width, or .tile-children collapses to its (empty) content
+           width and every nested tile collapses with it. */
+        align-items: stretch;
+        white-space: normal;
+        background: var(--treemap-tile-bg);
+        color: var(--treemap-tile-text);
+        border: var(--treemap-tile-border);
+        font-size: var(--treemap-font-size);
+        cursor: pointer;
+        transition:
+          opacity var(--transition),
+          background-color var(--transition);
+      }
+
+      .tile-children {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        margin: var(--treemap-padding);
+        margin-top: 0;
+      }
+
+      .tile-header {
+        flex-shrink: 0;
+        padding: 1px var(--space-xs);
+        background: var(--treemap-header-bg);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: var(--font-weight-bold);
+      }
+
+      .tile > .treemap-label {
+        padding: var(--space-xs);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tile-header .treemap-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .treemap-label.hide-label {
+        visibility: hidden;
+      }
+
+      .tile.filtered {
+        opacity: 0.3;
+        filter: saturate(0.4);
+      }
+
+      .tile.empty {
+        padding: 0;
+        border: none;
+      }
+
+      .tile.loading {
+        cursor: progress;
+        opacity: 0.6;
+      }
+
+      .empty-state {
+        padding: var(--space-l);
+        color: var(--surface-muted-text);
+        font-size: var(--text-s);
+      }
+    `
+		];
+	}
 };
+__decorate([property({ type: Object })], TreemapListElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "loadChildren", void 0);
 __decorate([property({
-	type: String,
-	reflect: true
-})], ToolbarElement.prototype, "orientation", void 0);
+	reflect: true,
+	attribute: `exclusivity`
+})], TreemapListElement.prototype, "exclusivity", void 0);
 __decorate([property({
-	type: String,
-	reflect: true
-})], ToolbarElement.prototype, "layout", void 0);
+	reflect: true,
+	attribute: `selection-filter`
+})], TreemapListElement.prototype, "selectionFilter", void 0);
 __decorate([property({
 	type: String,
-	attribute: `vertical-writing`,
-	reflect: true
-})], ToolbarElement.prototype, "verticalWriting", void 0);
+	attribute: `interaction-mode`
+})], TreemapListElement.prototype, "interactionMode", void 0);
 __decorate([property({
 	type: String,
-	attribute: `toolbar-align`,
-	reflect: true
-})], ToolbarElement.prototype, "toolbarAlign", void 0);
+	attribute: `tiling-method`
+})], TreemapListElement.prototype, "tilingMethod", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-depth`
+})], TreemapListElement.prototype, "maxDepth", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `show-group-labels`,
-	reflect: true
-})], ToolbarElement.prototype, "showGroupLabels", void 0);
+	attribute: `hide-leaves`
+})], TreemapListElement.prototype, "hideLeaves", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-label-area`
+})], TreemapListElement.prototype, "minLabelArea", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-tile-width`
+})], TreemapListElement.prototype, "minTileWidth", void 0);
+__decorate([property({ type: Number })], TreemapListElement.prototype, "padding", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-child-area`
+})], TreemapListElement.prototype, "minChildArea", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "valueAccessor", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "categoryAccessor", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "selectedNode", void 0);
+__decorate([state()], TreemapListElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "filterPredicate", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `invisible-groups`,
+	attribute: `disable-keyboard-navigation`
+})], TreemapListElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
 	reflect: true
-})], ToolbarElement.prototype, "invisibleGroups", void 0);
-__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
-__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
-__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
-__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
-ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
+})], TreemapListElement.prototype, "searchModes", void 0);
+__decorate([state()], TreemapListElement.prototype, "_zoomKey", void 0);
+TreemapListElement = __decorate([safeCustomElement(`ixfx-treemap-list`)], TreemapListElement);
 //#endregion
 //#region src/twosplit-layout/split-layout.ts
 let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
@@ -8753,6 +11464,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, 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, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map