@ixfx/components 0.10.0 → 0.10.2

package/dist/index.js

@@ -5,42 +5,42 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { a as iconBus, c as setIconFont, i as hasIcon, l as svgToDataUri, n as getIconEntry, o as registerFontIcon, r as getIconFont, s as registerIcon, t as getIcon } from "./registry-BEtb8_wB.js";
-import { t as IxfxIconElement } from "./icon-BCJJYEpm.js";
+import { t as IxfxIconElement } from "./icon-1gpwtPx8.js";
 import { AcTextElement } from "./ac-text.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
-import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, l as KeyedElementIndex, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-C05WjbZh.js";
+import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, l as KeyedElementIndex, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-D91M4Ozq.js";
 import { AcTokenElement } from "./ac-token.js";
-import { t as handleStyles } from "./handle-BPOxBOKf.js";
+import { t as handleStyles } from "./handle-DAXs7kbJ.js";
 import { TitlebarElement } from "./titlebar.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BJwDsMH4.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-kVl1t2tT.js";
 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-D97TYjn1.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";
-import "./menu-item-DzizkMH-.js";
+import "./menu-item-Woc8jJc1.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-R73i0QTP.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-WDrPuqoO.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-C25xYUa6.js";
-import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.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-Bm2TzTfe.js";
+import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as menu_exports } from "./menu-C8a-84S5.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-B2Qv3Oiz.js";
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
 import { DataGridElement } from "./data-grid.js";
 import { DetailListElement } from "./detail-list.js";
-import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-3yBOEVZW.js";
+import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BJEU1W0d.js";
 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-DSnYOGh7.js";
+import { t as GridListElement } from "./grid-list-CIc4jo-x.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
@@ -60,7 +60,7 @@ import { SelectHorizElement } from "./select-horiz.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
 import { SwipeElement } from "./swipe.js";
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-CFlBFFGZ.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-BP1Ux2EV.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing } from "lit";
@@ -6487,6 +6487,974 @@ __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/multicol-list/types.ts
+const ALL_KEY = `__all__`;
+//#endregion
+//#region src/multicol-list/column.ts
+/** Sorts by label, honouring direction. 'All' lives outside the list, so it is not special-cased. */
+function sortItems(items, direction) {
+	const dir = direction === `desc` ? -1 : 1;
+	return [...items].sort((a, b) => dir * a.label.localeCompare(b.label, void 0, {
+		sensitivity: `base`,
+		numeric: true
+	}));
+}
+/**
+* Nearest-gap math for header drag-reorder (per data-grid's `_beginHeaderDrag`).
+*
+* `offsets` is a prefix-sum of column widths (length = count + 1). `x` is the
+* pointer position in content space (already adjusted for scroll). Returns the
+* final insertion index once the source column is removed (`insert`), plus the
+* un-normalised gap offset for the drop caret (`caretOffset`).
+*/
+function computeDropGap(offsets, x, count, from) {
+	if (count === 0) return {
+		insert: 0,
+		caretOffset: 0
+	};
+	let bestDist = Number.MAX_SAFE_INTEGER;
+	let caretGap = from;
+	for (let i = 0; i < count; i++) {
+		if (i === from) continue;
+		const left = offsets[i];
+		const right = offsets[i + 1] ?? offsets[offsets.length - 1];
+		const mid = (left + right) / 2;
+		const dist = Math.abs(x - (x < mid ? left : right));
+		if (dist < bestDist) {
+			bestDist = dist;
+			caretGap = x < mid ? i : i + 1;
+		}
+	}
+	const insert = caretGap > from ? caretGap - 1 : caretGap;
+	return {
+		insert: Math.max(0, Math.min(count - 1, insert)),
+		caretOffset: offsets[caretGap] ?? offsets[offsets.length - 1]
+	};
+}
+var MulticolColumnController = class {
+	#category;
+	#categoryDefaults;
+	#selectionMode;
+	#dataProvider;
+	#onSelectionChange;
+	#onRequestData;
+	#abortController = void 0;
+	#host;
+	#allRow;
+	#listerEl;
+	#selectedValues = [];
+	#allSelected = true;
+	#lastItems = [];
+	#syncingSelection = false;
+	#state;
+	constructor(options) {
+		this.id = options.id;
+		this.#category = options.category;
+		this.#categoryDefaults = options.categoryDefaults;
+		this.#selectionMode = options.selectionMode;
+		this.#dataProvider = options.dataProvider;
+		this.#onSelectionChange = options.onSelectionChange;
+		this.#onRequestData = options.onRequestData;
+		this.#state = {
+			id: options.id,
+			categoryKey: options.category.key,
+			sort: options.categoryDefaults?.sort ?? `asc`,
+			grouped: options.categoryDefaults?.grouped ?? false,
+			width: 220
+		};
+	}
+	get state() {
+		return this.getState();
+	}
+	/** Always derived from the live category so a swap is visible everywhere. */
+	get categoryKey() {
+		return this.#category.key;
+	}
+	getState() {
+		return { ...this.#state };
+	}
+	updateState(partial) {
+		const sortChanged = partial.sort !== void 0 && partial.sort !== this.#state.sort;
+		const groupedChanged = partial.grouped !== void 0 && partial.grouped !== this.#state.grouped;
+		this.#state = {
+			...this.#state,
+			...partial
+		};
+		if (sortChanged) this.#repush();
+		if (groupedChanged) this.#syncGrouping();
+	}
+	setWidth(width) {
+		this.#state = {
+			...this.#state,
+			width: Math.max(80, Math.min(480, Math.round(width)))
+		};
+	}
+	setSort(sort) {
+		if (sort === this.#state.sort) return;
+		this.#state = {
+			...this.#state,
+			sort
+		};
+		this.#repush();
+	}
+	setGrouped(grouped) {
+		if (grouped === this.#state.grouped) return;
+		this.#state = {
+			...this.#state,
+			grouped
+		};
+		this.#syncGrouping();
+	}
+	setSelectionMode(mode) {
+		if (mode === this.#selectionMode) return;
+		this.#selectionMode = mode;
+		for (const sub of this.#subComponents()) sub.selectionMode = mode;
+	}
+	setCategory(category) {
+		this.#category = category;
+		this.#categoryDefaults = category.defaults;
+		this.#state = {
+			...this.#state,
+			categoryKey: category.key,
+			sort: category.defaults?.sort ?? `asc`,
+			grouped: category.defaults?.grouped ?? false
+		};
+		this.clearSelection();
+		this.#syncGrouping();
+	}
+	get listerHost() {
+		return this.#host;
+	}
+	get isMounted() {
+		return this.#host !== void 0;
+	}
+	setDataProvider(provider) {
+		this.#dataProvider = provider;
+	}
+	mount(host) {
+		if (this.#host) return;
+		this.#host = host;
+		const allRow = document.createElement(`div`);
+		allRow.className = `all-row`;
+		allRow.dataset.key = ALL_KEY;
+		allRow.setAttribute(`role`, `button`);
+		allRow.setAttribute(`tabindex`, `0`);
+		const allLabel = document.createElement(`span`);
+		allLabel.className = `all-label`;
+		allRow.appendChild(allLabel);
+		const applyAll = () => {
+			if (this.#allSelected) return;
+			this.#setAllSelection();
+		};
+		allRow.addEventListener(`click`, applyAll);
+		allRow.addEventListener(`keydown`, (e) => {
+			if (e.key === `Enter` || e.key === ` `) {
+				e.preventDefault();
+				applyAll();
+			}
+		});
+		this.#allRow = allRow;
+		const lister = document.createElement(`ixfx-grouped-item-lister`);
+		lister.crossGroupSelection = true;
+		lister.factory = () => createVerticalListAdapter(renderItem, {
+			selectionMode: this.#selectionMode,
+			interactionMode: `standard`
+		});
+		lister.addEventListener(`select`, this.#handleSelect);
+		this.#listerEl = lister;
+		this.#syncGrouping();
+		this.#syncAllRow();
+		host.append(allRow, lister);
+		if (this.#lastItems.length > 0) {
+			this.#pushItems();
+			this.#restoreAfterSync();
+		}
+	}
+	unmount() {
+		this.#abortPending();
+		this.#allRow?.remove();
+		this.#listerEl?.remove();
+		this.#allRow = void 0;
+		this.#listerEl = void 0;
+		this.#host = void 0;
+	}
+	requestData(query) {
+		if (!this.#dataProvider) return;
+		this.#abortPending();
+		const controller = new AbortController();
+		this.#abortController = controller;
+		const { signal } = controller;
+		this.#onRequestData(this.id, query, signal);
+		Promise.resolve().then(async () => {
+			const result = this.#dataProvider(query, signal);
+			const items = await collectDataResult(result, signal);
+			if (signal.aborted) return;
+			this.#applyItems(items);
+		}).catch(() => {});
+	}
+	#applyItems(items) {
+		this.#lastItems = items;
+		const valid = this.#selectedValues.filter((v) => items.some((i) => i.key === v));
+		const changed = valid.length !== this.#selectedValues.length;
+		this.#selectedValues = valid;
+		if (valid.length === 0) this.#allSelected = true;
+		if (!this.#listerEl) {
+			if (changed) this.#onSelectionChange(this.id, valid);
+			return;
+		}
+		this.#pushItems();
+		this.#restoreAfterSync();
+		if (changed) this.#onSelectionChange(this.id, valid);
+	}
+	#pushItems() {
+		if (!this.#listerEl) return;
+		const sorted = sortItems(this.#lastItems, this.#state.sort);
+		this.#listerEl.provider = () => sorted;
+	}
+	#repush() {
+		if (!this.#listerEl || this.#lastItems.length === 0) return;
+		this.#pushItems();
+		this.#restoreAfterSync();
+	}
+	/** Grouping config from category defaults; grouping without groupBy is a no-op. */
+	#syncGrouping() {
+		if (!this.#listerEl) return;
+		const groupBy = this.#categoryDefaults?.groupBy;
+		this.#listerEl.groupBy = groupBy;
+		this.#listerEl.grouped = this.#state.grouped && groupBy !== void 0;
+		if (this.#lastItems.length > 0) this.#restoreAfterSync();
+	}
+	#subComponents() {
+		if (!this.#listerEl) return [];
+		return this.#listerEl.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`);
+	}
+	#handleSelect = () => {
+		if (this.#syncingSelection) return;
+		const values = [...this.#listerEl?.selectedItems ?? []].map((i) => i.key).filter((k) => k !== ALL_KEY);
+		if (values.length === this.#selectedValues.length && values.every((v) => this.#selectedValues.includes(v))) {
+			this.#syncAllRow();
+			return;
+		}
+		this.#selectedValues = values;
+		this.#allSelected = values.length === 0;
+		this.#syncAllRow();
+		this.#onSelectionChange(this.id, values);
+	};
+	#setAllSelection() {
+		const previous = this.#selectedValues;
+		this.#syncingSelection = true;
+		try {
+			this.#selectedValues = [];
+			this.#allSelected = true;
+			for (const sub of this.#subComponents()) sub.clearSelection();
+		} finally {
+			this.#syncingSelection = false;
+		}
+		this.#syncAllRow();
+		if (previous.length > 0) this.#onSelectionChange(this.id, []);
+	}
+	clearSelection() {
+		this.#setAllSelection();
+	}
+	get selectedValues() {
+		return this.#selectedValues;
+	}
+	#restoreAfterSync() {
+		if (!this.#listerEl) return;
+		this.#listerEl.updateComplete.then(() => {
+			if (!this.#listerEl || !this.#host) return;
+			this.#syncingSelection = true;
+			try {
+				const wanted = this.#selectedValues;
+				for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) list.selectKeys(wanted);
+				const selected = [...this.#listerEl.selectedItems].map((i) => i.key).filter((k) => k !== ALL_KEY);
+				this.#selectedValues = selected;
+				this.#allSelected = selected.length === 0;
+			} finally {
+				this.#syncingSelection = false;
+			}
+			this.#syncAllRow();
+		});
+	}
+	#syncAllRow() {
+		if (!this.#allRow) return;
+		const label = this.#categoryDefaults?.allLabel ?? `All`;
+		const labelEl = this.#allRow.querySelector(`.all-label`);
+		if (labelEl) labelEl.textContent = label;
+		this.#allRow.toggleAttribute(`data-selected`, this.#allSelected);
+	}
+	#abortPending() {
+		if (this.#abortController) {
+			this.#abortController.abort();
+			this.#abortController = void 0;
+		}
+	}
+};
+function renderItem(item) {
+	const li = document.createElement(`li`);
+	li.dataset.key = item.key;
+	const labelSpan = document.createElement(`span`);
+	labelSpan.className = `item-label`;
+	labelSpan.textContent = item.label;
+	li.appendChild(labelSpan);
+	if (item.count !== void 0) {
+		const countSpan = document.createElement(`span`);
+		countSpan.className = `count`;
+		countSpan.textContent = String(item.count);
+		li.appendChild(countSpan);
+	}
+	return li;
+}
+//#endregion
+//#region src/multicol-list/multicol-list.ts
+registerIcon(`menu`, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>`);
+const DEFAULT_COLUMN_WIDTH = 220;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_COLUMN_WIDTH = 480;
+const DRAG_THRESHOLD = 5;
+let MulticolListElement = class MulticolListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.categories = [];
+		this.selectionMode = `multiple`;
+		this.minColumns = 1;
+		this.maxColumns = 5;
+		this._columns = [];
+		this._colOffsets = [0];
+		this._resizingColumnId = void 0;
+		this._draggingColumnId = void 0;
+		this._dropCaretX = void 0;
+		this._idCounter = 0;
+		this._autoSeeded = false;
+		this._drag = {
+			pointerId: -1,
+			from: -1,
+			startX: 0,
+			startY: 0,
+			active: false,
+			ghost: null,
+			insert: -1
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
+      :host {
+        --multicol-list-bg: var(--surface-3);
+        --multicol-list-header-bg: var(--surface-2);
+        --multicol-list-header-text: var(--surface-3-text);
+        --multicol-list-border: var(--border);
+        --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
+        --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
+
+        display: block;
+        overflow: hidden;
+        background: var(--multicol-list-bg);
+        color: var(--surface-3-text);
+        font-family: var(--font-family);
+      }
+      #container {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+        height: 100%;
+      }
+      .column {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        border-right: var(--multicol-list-border);
+        min-width: var(--multicol-list-min-column-width);
+        max-width: var(--multicol-list-max-column-width);
+        background: var(--surface-3);
+      }
+      .column-header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        height: 32px;
+        background: var(--multicol-list-header-bg);
+        color: var(--multicol-list-header-text);
+        border-bottom: var(--border);
+        position: relative;
+        user-select: none;
+        min-width: var(--multicol-list-min-column-width);
+        box-sizing: border-box;
+      }
+      .column-header[data-dragging] {
+        opacity: 0.4;
+      }
+      .reorder-handle {
+        cursor: grab;
+        opacity: 0;
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding-left: var(--space-xs);
+        touch-action: none;
+        transition: opacity var(--transition, 0.15s ease-out);
+      }
+      .column-header:hover .reorder-handle, .column-header:focus-within .reorder-handle, .column-header[data-dragging] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
+      .reorder-handle:active {
+        cursor: grabbing;
+      }
+      .reorder-handle .ixfx-handle {
+        --ixfx-handle-length: 14px;
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-dot-size: 3px;
+      }
+      .column-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 var(--space-s);
+        font-size: var(--text-m);
+        font-weight: 600;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+        min-width: 0;
+      }
+      .column-label:hover {
+        text-decoration: underline;
+      }
+      .burger-btn {
+        flex-shrink: 0;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--surface-3-text);
+        opacity: 0;
+        transition: opacity var(--transition);
+        border-radius: var(--radius-s);
+      }
+      .column:hover .burger-btn,
+      .column-header:focus-within .burger-btn {
+        opacity: 1;
+      }
+      .burger-btn:hover {
+        background: var(--surface-4);
+      }
+      .resize-handle {
+        position: absolute;
+        right: -4px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: col-resize;
+        z-index: 1;
+        display: flex;
+        align-items: stretch;
+        justify-content: center;
+        touch-action: none;
+      }
+      .resize-handle::before {
+        content: '';
+        width: 2px;
+        margin: 2px 0;
+        border-radius: 1px;
+        background: transparent;
+        transition: background-color var(--transition);
+      }
+      .resize-handle:hover::before,
+      .resize-handle[data-active]::before {
+        background: var(--accent);
+      }
+      .lister-host {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+      }
+      .all-row {
+        display: flex;
+        align-items: center;
+        padding: var(--space-xs) var(--space-s);
+        cursor: pointer;
+        user-select: none;
+        min-height: 28px;
+        box-sizing: border-box;
+        outline: 1px solid transparent;
+        background: var(--surface-3);
+      }
+      .all-row:hover,
+      .all-row[data-selected] {
+        background: var(--surface-5);
+      }
+      .all-row[data-selected] {
+        outline-color: var(--accent);
+        font-weight: 600;
+      }
+      ixfx-grouped-item-lister {
+        display: block;
+      }
+      .drop-caret {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--accent);
+        border-radius: 1px;
+        pointer-events: none;
+        z-index: 10;
+      }
+      .item-label {
+        flex: 1;
+      }
+      .count {
+        opacity: 0.6;
+        margin-left: var(--space-s);
+        font-size: var(--text-s);
+      }
+    `
+		];
+	}
+	get columns() {
+		return this._columns.map((c) => c.getState());
+	}
+	setColumns(states) {
+		const existingMap = new Map(this._columns.map((c) => [c.id, c]));
+		const newColumns = [];
+		for (const colState of states) {
+			const existing = existingMap.get(colState.id);
+			if (existing) {
+				if (existing.categoryKey !== colState.categoryKey) {
+					const newCategory = this.categories.find((c) => c.key === colState.categoryKey);
+					if (newCategory) existing.setCategory(newCategory);
+				}
+				existing.updateState(colState);
+				newColumns.push(existing);
+				existingMap.delete(colState.id);
+				continue;
+			}
+			const category = this.categories.find((c) => c.key === colState.categoryKey);
+			if (!category) continue;
+			const controller = this.#createController(colState.id, category);
+			controller.updateState(colState);
+			newColumns.push(controller);
+		}
+		for (const col of existingMap.values()) col.unmount();
+		this._columns = newColumns;
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	addColumn(categoryKey, position) {
+		if (this.maxColumns > 0 && this._columns.length >= this.maxColumns) return;
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		const id = `col-${++this._idCounter}`;
+		const controller = this.#createController(id, category);
+		if (position !== void 0 && position >= 0 && position < this._columns.length) this._columns.splice(position, 0, controller);
+		else this._columns.push(controller);
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	removeColumn(columnId) {
+		if (this._columns.length <= this.minColumns) return;
+		const idx = this._columns.findIndex((c) => c.id === columnId);
+		if (idx < 0) return;
+		this._columns[idx].unmount();
+		this._columns.splice(idx, 1);
+		this._updateColOffsets();
+		this._emitColumnsChange(`remove`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	getSelection() {
+		return this._columns.map((c) => ({
+			columnId: c.id,
+			categoryKey: c.categoryKey,
+			values: c.selectedValues
+		}));
+	}
+	clearSelection() {
+		for (const col of this._columns) col.clearSelection();
+		this.requestUpdate();
+	}
+	render() {
+		return html`
+      <div id="container">
+        ${repeat(this._columns, (col) => col.id, (col, idx) => this._renderColumn(col, idx))}
+        ${this._dropCaretX !== void 0 ? html`<div class="drop-caret" style="left: ${this._dropCaretX}px"></div>` : nothing}
+      </div>
+    `;
+	}
+	updated(changedProperties) {
+		if (!this._autoSeeded && this._columns.length === 0 && this.categories.length > 0) {
+			this._autoSeeded = true;
+			this.addColumn(this.categories[0].key);
+		}
+		if (changedProperties.has(`selectionMode`)) for (const col of this._columns) col.setSelectionMode(this.selectionMode);
+		if (changedProperties.has(`dataProvider`)) for (const col of this._columns) col.setDataProvider(this.dataProvider);
+		for (const col of this._columns) if (!col.isMounted) {
+			const hostEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .lister-host`);
+			if (hostEl) col.mount(hostEl);
+		}
+		if (changedProperties.has(`categories`)) this._syncColumnsWithCategories();
+		if (changedProperties.has(`categories`) || changedProperties.has(`dataProvider`)) this._requeryAllColumns();
+		this._updateColOffsets();
+	}
+	_renderColumn(col, idx) {
+		const width = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		return html`
+      <div
+        class="column"
+        data-col-id="${col.id}"
+        style="width: ${width}px"
+      >
+        <div
+          class="column-header"
+          ?data-dragging=${this._draggingColumnId === col.id}
+          data-col-idx=${idx}
+        >
+          <span
+            class="reorder-handle"
+            data-tooltip="Drag to reorder"
+            @pointerdown=${(e) => this._onHeaderPointerDown(e, col, idx)}
+          ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>
+          <button
+            class="column-label"
+            data-tooltip="Change category"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openCategoryPicker(col, e.currentTarget);
+		}}
+          >${this._getCategoryLabel(col.categoryKey)}</button>
+          <button
+            class="burger-btn"
+            data-tooltip="Column options"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openBurgerMenu(col, e.currentTarget);
+		}}
+          >
+            <ixfx-icon name="menu" size="14"></ixfx-icon>
+          </button>
+          <span
+            class="resize-handle"
+            ?data-active=${this._resizingColumnId === col.id}
+            @pointerdown=${(e) => this._onResizePointerDown(e, col)}
+            @click=${(e) => e.stopPropagation()}
+          ></span>
+        </div>
+        <div class="lister-host"></div>
+      </div>
+    `;
+	}
+	_getCategoryLabel(key) {
+		return this.categories.find((c) => c.key === key)?.label ?? key;
+	}
+	#createController(id, category) {
+		return new MulticolColumnController({
+			id,
+			category,
+			categoryDefaults: category.defaults,
+			selectionMode: this.selectionMode,
+			dataProvider: this.dataProvider,
+			onSelectionChange: this._onColumnSelectionChange.bind(this),
+			onRequestData: this._onColumnRequestData.bind(this)
+		});
+	}
+	_onHeaderPointerDown(e, col, idx) {
+		e.stopPropagation();
+		this._drag = {
+			pointerId: e.pointerId,
+			from: idx,
+			startX: e.clientX,
+			startY: e.clientY,
+			active: false,
+			ghost: null,
+			insert: idx
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const dx = ev.clientX - this._drag.startX;
+			const dy = ev.clientY - this._drag.startY;
+			if (!this._drag.active) {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				this._drag.active = true;
+				this._draggingColumnId = col.id;
+				const headerEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .column-header`);
+				const content = document.createElement(`span`);
+				content.textContent = this._getCategoryLabel(col.categoryKey);
+				try {
+					if (headerEl) {
+						this._drag.ghost = createDragGhost({
+							anchor: headerEl,
+							content
+						});
+						this._drag.ghost.move(ev.clientX, ev.clientY);
+					}
+				} catch {}
+				try {
+					this._containerEl?.setPointerCapture(ev.pointerId);
+				} catch {}
+			}
+			this._drag.ghost?.move(ev.clientX, ev.clientY);
+			const containerEl = this._containerEl;
+			if (!containerEl) return;
+			const rect = containerEl.getBoundingClientRect();
+			const x = ev.clientX - rect.left + containerEl.scrollLeft;
+			const gap = computeDropGap(this._colOffsets, x, this._columns.length, this._drag.from);
+			this._drag.insert = gap.insert;
+			this._dropCaretX = gap.caretOffset;
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const wasActive = this._drag.active;
+			const from = this._drag.from;
+			const insert = this._drag.insert;
+			this._drag.ghost?.destroy();
+			this._drag.ghost = null;
+			this._draggingColumnId = void 0;
+			this._dropCaretX = void 0;
+			try {
+				this._containerEl?.releasePointerCapture(ev.pointerId);
+			} catch {}
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			if (wasActive && insert !== from) {
+				const [moved] = this._columns.splice(from, 1);
+				this._columns.splice(insert, 0, moved);
+				this._updateColOffsets();
+				this._emitColumnsChange(`reorder`);
+				this.requestUpdate();
+			}
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	_onResizePointerDown(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startW = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		this._resizingColumnId = col.id;
+		const applyWidth = (clientX) => {
+			const w = Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, startW + clientX - startX));
+			col.setWidth(w);
+			return w;
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== e.pointerId) return;
+			applyWidth(ev.clientX);
+			this._updateColOffsets();
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			applyWidth(ev.type === `pointercancel` ? startX : ev.clientX);
+			this._resizingColumnId = void 0;
+			this._updateColOffsets();
+			this._emitColumnsChange(`resize`);
+			this.requestUpdate();
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	/** Floats a dropdown menu trigger over `anchorEl` and opens it immediately. */
+	#openMenuAt(anchorEl, placement, buildMenu) {
+		const rect = anchorEl.getBoundingClientRect();
+		const trigger = document.createElement(`ixfx-menu-trigger`);
+		trigger.mode = `dropdown`;
+		trigger.tabStop = false;
+		trigger.placement = placement;
+		trigger.style.position = `fixed`;
+		trigger.style.left = `${rect.left}px`;
+		trigger.style.top = `${rect.bottom}px`;
+		const container = document.createElement(`ixfx-menu-container`);
+		container.setAttribute(`slot`, `menu`);
+		buildMenu(container);
+		trigger.appendChild(container);
+		trigger.addEventListener(`menu-trigger-close`, () => trigger.remove(), { once: true });
+		document.body.appendChild(trigger);
+		trigger.updateComplete.then(() => trigger.openMenu());
+	}
+	#categoryToNode(cat) {
+		return {
+			item: {
+				key: cat.key,
+				label: cat.label
+			},
+			children: cat.children && cat.children.length > 0 ? cat.children.map((c) => this.#categoryToNode(c)) : void 0
+		};
+	}
+	_openCategoryPicker(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-start`, (container) => {
+			const items = menuFromTreeToElements(this.categories.map((c) => this.#categoryToNode(c)), { onCommand: (detail) => {
+				if (detail.command === void 0) return;
+				this._changeColumnCategory(col, detail.command);
+			} });
+			for (const el of items) container.appendChild(el);
+			for (const item of container.querySelectorAll(`ixfx-menu-item`)) if (item.getAttribute(`command`) === col.categoryKey) item.setAttribute(`disabled`, ``);
+		});
+	}
+	#menuItem(label, command, onCommand, iconName) {
+		const el = document.createElement(`ixfx-menu-item`);
+		el.setAttribute(`command`, command);
+		el.setAttribute(`label`, label);
+		if (iconName) el.setAttribute(`icon-name`, iconName);
+		if (onCommand) el.addEventListener(`command`, () => onCommand());
+		return el;
+	}
+	_openBurgerMenu(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-end`, (container) => {
+			const removeItem = this.#menuItem(`Remove this column`, `remove`, () => this.removeColumn(col.id));
+			removeItem.toggleAttribute(`disabled`, this._columns.length <= this.minColumns);
+			container.appendChild(removeItem);
+			const separator = document.createElement(`ixfx-menu-separator`);
+			container.appendChild(separator);
+			const atMax = this.maxColumns > 0 && this._columns.length >= this.maxColumns;
+			const usedCats = new Set(this._columns.map((c) => c.categoryKey));
+			const unused = this.categories.filter((c) => !usedCats.has(c.key));
+			const canAdd = !atMax && unused.length > 0;
+			const addSub = document.createElement(`ixfx-menu-sub-trigger`);
+			addSub.setAttribute(`label`, `Add column`);
+			const addContainer = document.createElement(`ixfx-menu-container`);
+			addContainer.setAttribute(`slot`, `submenu`);
+			const idx = this._columns.findIndex((c) => c.id === col.id);
+			for (const [label, offset] of [[`Left`, -1], [`Right`, 1]]) {
+				const item = this.#menuItem(label, `add-${label.toLowerCase()}`, () => {
+					this.#insertColumn(unused[0].key, Math.max(0, idx + Math.max(0, offset)));
+				});
+				item.toggleAttribute(`disabled`, !canAdd);
+				addContainer.appendChild(item);
+			}
+			addSub.appendChild(addContainer);
+			container.appendChild(addSub);
+			const sortSub = document.createElement(`ixfx-menu-sub-trigger`);
+			sortSub.setAttribute(`label`, `Sort`);
+			const sortContainer = document.createElement(`ixfx-menu-container`);
+			sortContainer.setAttribute(`slot`, `submenu`);
+			sortContainer.appendChild(this.#menuItem(`Ascending`, `sort-asc`, () => {
+				col.setSort(`asc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `asc` ? `check` : void 0));
+			sortContainer.appendChild(this.#menuItem(`Descending`, `sort-desc`, () => {
+				col.setSort(`desc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `desc` ? `check` : void 0));
+			sortSub.appendChild(sortContainer);
+			container.appendChild(sortSub);
+			const grouped = col.getState().grouped;
+			container.appendChild(this.#menuItem(grouped ? `Ungroup` : `Group`, `toggle-group`, () => {
+				col.setGrouped(!grouped);
+				this._emitColumnsChange(`grouping`);
+				this.requestUpdate();
+			}, grouped ? `check` : void 0));
+		});
+	}
+	#insertColumn(categoryKey, position) {
+		this.addColumn(categoryKey, position);
+	}
+	_changeColumnCategory(col, categoryKey) {
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		col.setCategory(category);
+		this._emitColumnsChange(`category`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	_onColumnSelectionChange(columnId, _values) {
+		if (!this._columns.find((c) => c.id === columnId)) return;
+		for (const otherCol of this._columns) if (otherCol.id !== columnId) otherCol.requestData(this._buildQuery(otherCol));
+		const detail = {
+			columnId,
+			columns: this.getSelection()
+		};
+		this.dispatchEvent(new CustomEvent(`multicol-select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	_onColumnRequestData(_columnId, _query, _signal) {}
+	_buildQuery(col) {
+		const otherSelections = /* @__PURE__ */ new Map();
+		for (const c of this._columns) if (c.id !== col.id) otherSelections.set(c.id, c.selectedValues);
+		return {
+			columnId: col.id,
+			categoryKey: col.categoryKey,
+			otherSelections
+		};
+	}
+	_requeryAllColumns() {
+		for (const col of this._columns) col.requestData(this._buildQuery(col));
+	}
+	_syncColumnsWithCategories() {
+		let changed = false;
+		for (const col of this._columns) {
+			if (this.categories.some((c) => c.key === col.categoryKey)) continue;
+			if (this.categories.length === 0) continue;
+			col.setCategory(this.categories[0]);
+			changed = true;
+		}
+		if (changed) this._emitColumnsChange(`category`);
+	}
+	_updateColOffsets() {
+		const offsets = [0];
+		let sum = 0;
+		for (const col of this._columns) {
+			sum += col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+			offsets.push(sum);
+		}
+		if (!(offsets.length === this._colOffsets.length && offsets.every((v, i) => v === this._colOffsets[i]))) this._colOffsets = offsets;
+	}
+	_emitColumnsChange(reason) {
+		this.dispatchEvent(new CustomEvent(`multicol-columns-change`, {
+			detail: {
+				columns: this.columns,
+				reason
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], MulticolListElement.prototype, "selectionMode", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "minColumns", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "maxColumns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_columns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_colOffsets", void 0);
+__decorate([state()], MulticolListElement.prototype, "_resizingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
+__decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
+MulticolListElement = __decorate([customElement(`ixfx-multicol-list`)], MulticolListElement);
+//#endregion
 //#region src/notifier/pill-renderer.ts
 const ROW_SPACING = 8;
 const DEFAULT_ROW_HEIGHT = 40;
@@ -9655,12 +10623,25 @@ function squarifyInto(items, box) {
 	}
 	return out;
 }
+/** Clamp a raw cascade offset fraction to a sane range. */
+function normaliseOffset(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? Math.min(raw, 1) : 0;
+}
 /**
 * 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.
+* Degenerate (zero/negative-extent) containers also yield zero-area boxes
+* rather than `NaN` — this matters for cascaded layouts where deep insets
+* can consume the whole box.
 */
 function subdivide(box, weights, method, relativeDepth) {
+	if (box.width <= 0 || box.height <= 0) return weights.map(() => ({
+		x: box.x,
+		y: box.y,
+		width: 0,
+		height: 0
+	}));
 	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;
@@ -9727,16 +10708,24 @@ function subdivide(box, weights, method, relativeDepth) {
 * @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'`).
+*   `'squarify'`), `presentation` (default `'nested'`) plus `cascadeOffsetX/Y`
+*   (per-level shift as a viewport fraction, cascaded only).
 */
 function computeTreemapLayout(root, options = {}) {
 	if (!root?.children?.length) return [];
-	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify` } = options;
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false, presentation = `nested`, cascadeOffsetX: rawOx, cascadeOffsetY: rawOy } = options;
 	if (maxDepth <= 0) return [];
+	const cascaded = presentation === `cascaded`;
+	const ox = cascaded ? normaliseOffset(rawOx) : 0;
+	const oy = cascaded ? normaliseOffset(rawOy) : 0;
+	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 = zoomNode.children ?? [];
+	const siblings = visibleChildren(zoomNode);
 	if (siblings.length === 0) return [];
 	const rects = [];
 	const layoutLevel = (nodes, box, depth, relativeDepth, parentKey) => {
@@ -9745,7 +10734,7 @@ function computeTreemapLayout(root, options = {}) {
 		const setSize = nodes.length;
 		nodes.forEach((node, index) => {
 			const childBox = boxes[index];
-			const children = node.children ?? [];
+			const children = visibleChildren(node);
 			rects.push({
 				node,
 				depth,
@@ -9759,7 +10748,15 @@ function computeTreemapLayout(root, options = {}) {
 				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);
+			if (children.length > 0) {
+				const contentBox = ox <= 0 && oy <= 0 ? childBox : {
+					x: childBox.x + ox,
+					y: childBox.y + oy,
+					width: Math.max(0, childBox.width - ox),
+					height: Math.max(0, childBox.height - oy)
+				};
+				layoutLevel(children, contentBox, depth + 1, relativeDepth + 1, node.item.key);
+			}
 		});
 	};
 	layoutLevel(siblings, {
@@ -9779,9 +10776,14 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.selectionFilter = `all`;
 		this.interactionMode = `standard`;
 		this.tilingMethod = `squarify`;
+		this.presentation = `nested`;
+		this.cascadeOffset = 6;
 		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;
@@ -9815,6 +10817,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		});
 		this.#pendingKeys = /* @__PURE__ */ new Set();
 		this.#aborters = /* @__PURE__ */ new Map();
+		this.#wheelCooldownUntil = 0;
 	}
 	get selectedNodes() {
 		return this._selectedNodes;
@@ -9831,17 +10834,43 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 	#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: this._zoomKey,
-			tilingMethod: this.tilingMethod
+			zoomKey,
+			tilingMethod: this.tilingMethod,
+			hideLeaves: this.hideLeaves,
+			presentation: this.presentation,
+			...this.#cascadeFractions()
 		});
 	}
+	/**
+	* Pixel `cascadeOffset` as viewport fractions for the current host size.
+	* Returns `{}` when nested, unmeasured, or non-positive — layout then falls
+	* back to classic nesting for that pass (the `ResizeObserver` re-renders
+	* once measured).
+	*/
+	#cascadeFractions() {
+		if (this.presentation !== `cascaded`) return {};
+		if (!Number.isFinite(this.cascadeOffset) || this.cascadeOffset <= 0) return {};
+		const w = this.clientWidth || 0;
+		const h = this.clientHeight || 0;
+		if (w <= 0 || h <= 0) return {};
+		return {
+			cascadeOffsetX: this.cascadeOffset / w,
+			cascadeOffsetY: this.cascadeOffset / h
+		};
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute(`data-input-mode`, `mouse`);
@@ -9915,8 +10944,14 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		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;
@@ -10029,6 +11064,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 	*/
 	zoomTo(node) {
 		if (this._zoomKey === node.item.key) return;
+		this.#pendingFlip = this.#planFlip(node.item.key);
 		this._zoomKey = node.item.key;
 		this.tickled.clearTickled();
 		const depth = findTreemapPath(this.#effectiveRoot, node.item.key)?.length;
@@ -10057,6 +11093,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 	*/
 	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;
@@ -10080,9 +11117,66 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		}));
 		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 node.children.length > 0;
+		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;
 	}
 	/**
@@ -10309,6 +11403,39 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 			}
 		}
 	}
+	/**
+	* 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;
@@ -10338,25 +11465,64 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
 		else this.zoomTo(node);
 	}
-	#hideLabel(rect) {
+	/** 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 false;
-		return rect.width * hostWidth * rect.height * hostHeight < this.minLabelArea;
+		if (hostWidth <= 0 || hostHeight <= 0) return void 0;
+		return {
+			width: rect.width * hostWidth,
+			height: rect.height * hostHeight
+		};
 	}
-	#renderTile(rect, positionStyle, children, byParent, nested) {
+	/** 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;
+		const offset = this.presentation === `cascaded` && Number.isFinite(this.cascadeOffset) && this.cascadeOffset > 0 ? this.cascadeOffset : 0;
+		const w = size.width - offset;
+		const h = size.height - offset;
+		if (w <= 0 || h <= 0) return false;
+		return w * h >= this.minChildArea && w >= 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 = children.length > 0 && !hideLabel;
+		const showHeader = hasVisibleChildren && !hideLabel;
+		const category = this.categoryAccessor?.(node.item);
+		const categoryStyle = this.#categoryStyle(node);
 		return html`
       <div
-        class="item tile ${nested ? `nested` : ``} ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
+        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}
@@ -10366,7 +11532,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         aria-label=${node.item.label}
         title=${node.item.label}
         part="tile"
-        style=${positionStyle}
+        style=${categoryStyle ? `${positionStyle};${categoryStyle}` : positionStyle}
         @click=${(e) => {
 			e.stopPropagation();
 			this.#handleItemClick(rect, this.#rects().findIndex((r) => r.node.item.key === node.item.key), e);
@@ -10378,23 +11544,46 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         @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>`}
-        ${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}
+        ${childrenContent}
       </div>
     `;
 	}
+	/**
+	* 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;
-		return this.#renderTile(rect, `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, true);
+		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) {
-		return this.#renderTile(rect, `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, false);
+		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();
@@ -10412,15 +11601,19 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         class="treemap"
         role="tree"
         tabindex="0"
+        data-presentation=${this.presentation}
         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">
-              ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              <div class="viewport-inner">
+                ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              </div>
             </div>
           `}
       </div>
@@ -10443,11 +11636,18 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         --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: auto;
+        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;
@@ -10476,18 +11676,44 @@ let TreemapListElement = class TreemapListElement extends LitElement {
       .viewport {
         position: relative;
         width: 100%;
-        height: var(--treemap-height);
-        flex-shrink: 0;
+        /* 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);
@@ -10506,6 +11732,14 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         margin-top: 0;
       }
 
+      /* Cascaded presentation (Lü & Fogarty 2008): the geometric inset is
+         already in the layout rects — this adds the stack-of-cards depth
+         cue on top. Parent tiles read as cards sitting behind their
+         children. */
+      .treemap[data-presentation="cascaded"] .tile {
+        box-shadow: 2px 2px 0 rgb(0 0 0 / 0.25);
+      }
+
       .tile-header {
         flex-shrink: 0;
         padding: 1px var(--space-xs);
@@ -10576,16 +11810,37 @@ __decorate([property({
 	type: String,
 	attribute: `tiling-method`
 })], TreemapListElement.prototype, "tilingMethod", void 0);
+__decorate([property({
+	type: String,
+	attribute: `presentation`
+})], TreemapListElement.prototype, "presentation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `cascade-offset`
+})], TreemapListElement.prototype, "cascadeOffset", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `max-depth`
 })], TreemapListElement.prototype, "maxDepth", void 0);
+__decorate([property({
+	type: Boolean,
+	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);
@@ -11244,6 +12499,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, 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 };
+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, MulticolListElement, 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