@ixfx/components 0.6.2 → 0.7.0

package/dist/index.js

@@ -1,62 +1,66 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as iconBus, i as ICON_CLOSE, l as registerIcon, n as ICON_CHECK, o as getIcon, r as ICON_CHEVRON_DOWN, s as hasIcon, t as ICON_CARET_RIGHT, u as svgToDataUri } from "./defaults-BCiDhZbF.js";
-import { t as IxfxIconElement } from "./icons-Bm2ByQ3s.js";
+import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-CkW7q09Q.js";
+import { t as IxfxIconElement } from "./icon-CvnPanhA.js";
 import { AcTextElement } from "./ac-text.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
 import { n as createIncrSearch, r as createFuzzySearch, t as createElementIncrSearch } from "./element-search-Y8SRfPGM.js";
 import { n as createAcCompletionProvider, t as IncrSearchTreeController } from "./incr-search-vCzuao-2.js";
 import { AcTokenElement } from "./ac-token.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BkWCPJFL.js";
+import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-Bn0BuLpO.js";
-import { t as menu_exports } from "./menu-DIfU70AA.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-Dat2yHAU.js";
+import { n as ListSelectionController, t as VerticalListElement } from "./vertical-list-ClnqTkF3.js";
+import "./menu-item-B-zYrTTi.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-0stHB90J.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BSDBL-QL.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BO6BXI2b.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-Ch4W8qXQ.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.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-BjRvlgPy.js";
 import { DataGridElement } from "./data-grid.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-BFSbUZQv.js";
+import { TabListElement } from "./tabs.js";
+import { TitlebarElement } from "./titlebar.js";
 import { EditableLabel } from "./editable-label.js";
-import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-DzigjMwP.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
-import { VerticalListElement } from "./vertical-list.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-Bk6rxhfg.js";
-import { t as RadialInputElement } from "./radial-input-Dk8Wydp5.js";
+import { t as RadialInputElement } from "./radial-input-Dp5qz0ly.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
+import { t as SliderInputElement } from "./slider-input-De4eoT11.js";
 import { LedElement } from "./led.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { NotificationPillElement } from "./notifier.js";
-import { a as PlotDataSeries, c as parseColourScaleAttr, i as PlotMultiAxis, l as readBaseColour, n as PlotSingleAxis, o as applyAgeModification, r as PlotHistogram, s as computeColour, t as PlotXyAxis } from "./xy-axis-B6yMjckW.js";
+import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-CxHC8z5E.js";
 import { PolarPad } from "./polar-pad.js";
 import { t as tooltipValueStyles } from "./tooltip-CJt3WLmN.js";
 import { RangeInput } from "./range-input.js";
 import { RangeElement } from "./range.js";
 import { SelectHorizElement } from "./select-horiz.js";
-import { t as SliderInputElement } from "./slider-input-CT4gcF-o.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
-import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
-import { TabListElement } from "./tabs.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-B2fgDL4U.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html, nothing, render } from "lit";
 import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Trees } from "@ixfx/collections";
-import { clamper, scaler } from "@ixfx/numbers";
+import { clamp, clamper, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { classMap } from "lit/directives/class-map.js";
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends LitElement {
 	constructor(..._args) {
@@ -1503,606 +1507,3053 @@ __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
-//#region src/editable-label/editable-number.ts
-const DRAG_THRESHOLD_PX = 3;
-let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel) {
-	#dragStartY;
-	#dragStartValue;
-	#dragging;
-	#hasDragged;
-	#dragCurrentValue;
-	#lastInputValue;
-	#firstUpdateComplete;
-	constructor() {
-		super();
-		this.dragSensitivity = 1;
-		this.noDrag = false;
-		this.precision = 0;
-		this.#dragStartY = 0;
-		this.#dragStartValue = 0;
-		this.#dragging = false;
-		this.#hasDragged = false;
-		this.#dragCurrentValue = 0;
-		this.#lastInputValue = ``;
-		this.#firstUpdateComplete = false;
-		this._stopNativeInput = (e) => {
-			e.stopPropagation();
-		};
-		this._handleMouseEnter = () => {
-			if (this.displayTextLogic !== `transient` || this._editing) return;
-			this._hovering = true;
-			this._clearTransientTimer();
-			this._transientTimer = window.setTimeout(() => {
-				this._transientShowingValue = true;
-				this._requestDisplayUpdate();
-			}, this.appearDelay);
-		};
-		this._handleMouseLeave = () => {
-			if (this.displayTextLogic !== `transient` || this._editing) return;
-			this._hovering = false;
-			this._clearTransientTimer();
-			if (this._transientShowingValue) this._transientTimer = window.setTimeout(() => {
-				if (!this._hovering) {
-					this._transientShowingValue = false;
-					this._requestDisplayUpdate();
-				}
-			}, this.disappearDelay);
+//#region src/detail-list/detail-list.ts
+const ITEM_SELECTOR = `:scope > li`;
+const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
+const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+let DetailListElement = class DetailListElement extends LitElement {
+	constructor(..._args2) {
+		super(..._args2);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.sort = `none`;
+		this.sortBy = ``;
+		this.items = [];
+		this.displayProperty = ``;
+		this.iconProperty = ``;
+		this.keyProperty = ``;
+		this.itemWrap = `stop`;
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#itemData = /* @__PURE__ */ new WeakMap();
+		this.#grid = [];
+		this.#positions = /* @__PURE__ */ new Map();
+		this.#geometryScheduled = false;
+		this.#builtFromProvider = [];
+		this.#providerBuilt = 0;
+		this.#data = new DataController(this);
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: (el) => this._isCheckable(el),
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this._dispatch(`list-select`, {
+					selected,
+					previous
+				});
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => this._getVisibleItems().map((el) => ({
+				id: el,
+				enabled: !el.hasAttribute(`not-checked`)
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.itemWrap
+		});
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
 		};
-		this._handleClick = () => {
-			if (this.disabled) return;
-			this.renderRoot?.querySelector(`.number`)?.focus();
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
 		};
-		this._handleFocus = () => {};
-		this._handleBeforeInput = (e) => {
-			if (e.inputType !== `insertText` || !e.data) return;
-			if (!this._isAllowedInput(e.data)) {
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
 				e.preventDefault();
+				this._openSearch();
 				return;
 			}
-			const contentEl = this._contentEl;
-			if (!contentEl) return;
-			const currentContent = contentEl.textContent ?? ``;
-			const insertPosition = contentEl.selectionStart ?? currentContent.length;
-			const newValue = currentContent.slice(0, insertPosition) + e.data + currentContent.slice(insertPosition);
-			if (newValue !== this.#lastInputValue) {
-				this.#lastInputValue = newValue;
-				this.dispatchEvent(new CustomEvent(`input`, {
-					detail: { value: newValue },
-					bubbles: true,
-					composed: true
-				}));
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
 			}
-		};
-		this._handleKeydown = (e) => {
-			if (!this._editing) return;
-			if (e.key === `Enter`) {
+			if (this._searchVisible && e.key === `Escape`) {
 				e.preventDefault();
-				this._tryCommit();
-				if (this.mode === `editor`) this._contentEl?.blur();
-			} else if (e.key === `Escape`) {
-				e.preventDefault();
-				this.dispatchEvent(new CustomEvent(`cancelled`, {
-					detail: { value: this._prevValue },
-					bubbles: true,
-					composed: true
-				}));
-				this._cancelEdit();
-				this.dispatchEvent(new CustomEvent(`change`, {
-					detail: { value: this._prevValue },
-					bubbles: true,
-					composed: true
-				}));
-				if (this.mode === `editor`) this._contentEl?.blur();
+				this._closeSearch();
+				return;
 			}
-		};
-		this._onKeyDown = (e) => {
-			if (this._editing || this.disabled) return;
-			if (this._handleArrowKey(e)) return;
-			if (e.key.length === 1) {
-				this._onUserInteraction();
-				this._beginEdit();
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.#navigateDown();
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this.selection.rangeTo(cur);
+					}
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.#navigateUp();
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this.selection.rangeTo(cur);
+					}
+					break;
+				case `ArrowRight`:
+					e.preventDefault();
+					this.#navigateRight();
+					break;
+				case `ArrowLeft`:
+					e.preventDefault();
+					this.#navigateLeft();
+					break;
+				case `Home`:
+					e.preventDefault();
+					this.#navigateTo(this.#findFirstCheckable());
+					break;
+				case `End`:
+					e.preventDefault();
+					this.#navigateTo(this.#findLastCheckable());
+					break;
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this._activateItem(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.selection.handleSpace(id);
+					}
+					break;
+				}
+				case `Escape`: this.selection.clear();
 			}
 		};
-		this._onPointerDown = (e) => {
-			if (e.button !== 0) return;
-			if (this._editing) return;
-			if (this.disabled || this.noDrag) return;
-			e.preventDefault();
-			this.renderRoot?.querySelector(`.number`)?.focus();
-			this.#dragStartY = e.clientY;
-			this.#dragStartValue = this._parseValue();
-			this.#dragCurrentValue = this.#dragStartValue;
-			this.#dragging = false;
-			this.#hasDragged = false;
-			this.setPointerCapture(e.pointerId);
+		this._onClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			this.focus();
+			this._dispatch(`list-item-click`, { item });
+			this.selection.handleClick(item, e);
 		};
-		this._onPointerMove = (e) => {
-			if (!(e.buttons & 1)) return;
-			if (this._editing) return;
-			if (this.disabled || this.noDrag) return;
-			const deltaY = this.#dragStartY - e.clientY;
-			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX) return;
-			this.#dragging = true;
-			this.#hasDragged = true;
-			this.toggleAttribute(`dragging`, true);
-			this._onUserInteraction();
-			const raw = this.#dragStartValue + deltaY * this.dragSensitivity * (this.step || 1);
-			const snapped = this._clamp(this._snap(raw));
-			this.#dragCurrentValue = this.step !== void 0 ? snapped : Number.parseFloat(snapped.toFixed(this.precision));
-			const dragValueStr = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
-			if (dragValueStr !== this.#lastInputValue) {
-				this.#lastInputValue = dragValueStr;
-				this.dispatchEvent(new CustomEvent(`input`, {
-					detail: { value: dragValueStr },
-					bubbles: true,
-					composed: true
-				}));
-			}
-			this._requestDisplayUpdate();
-			this._updateValueCss(this._normalizedValue(this.#dragCurrentValue));
+		this._onDblClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this._activateItem(item);
 		};
-		this._onPointerUp = (e) => {
-			if (this.hasPointerCapture(e.pointerId)) this.releasePointerCapture(e.pointerId);
-			if (!this.#dragging) return;
-			if (this.disabled || this.noDrag) return;
-			this.#dragging = false;
-			this.toggleAttribute(`dragging`, false);
-			const finalStr = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
-			const prev = this.value;
-			this.value = finalStr;
-			if (finalStr !== prev) this.dispatchEvent(new CustomEvent(`change`, {
-				detail: { value: finalStr },
-				bubbles: true,
-				composed: true
-			}));
+		this._onWheel = (e) => {
+			e.preventDefault();
+			this._listEl.scrollLeft += e.deltaY;
 		};
-		this._interceptClick = (e) => {
-			if (this.#hasDragged) {
-				e.stopImmediatePropagation();
-				this.#hasDragged = false;
+		this._onSearchInput = (e) => {
+			const input = e.target;
+			this._searchQuery = input.value;
+			this.#search?.setQuery(this._searchQuery).then(() => this.#recomputeGeometry());
+		};
+		this._onSearchKeydown = (e) => {
+			if (e.key === `Escape`) {
+				e.stopPropagation();
+				this._closeSearch();
+			} else if (e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.focus();
+				this.#navigateDown();
+			} else if (e.key === `ArrowUp`) {
+				e.preventDefault();
+				this.focus();
+				this.#navigateUp();
+			} else if (e.key === `ArrowRight`) e.preventDefault();
+			else if (e.key === `ArrowLeft`) e.preventDefault();
+			else if (e.key === `Enter`) {
+				e.preventDefault();
+				e.stopPropagation();
+				const id = this.tickled.tickledId ?? this.#findFirstCheckable();
+				if (id) {
+					this._dispatch(`list-item-click`, { item: id });
+					this._activateItem(id);
+					this._closeSearch();
+				}
+			} else if (e.key === ` `) {
+				const id = this.tickled.tickledId;
+				if (id) {
+					e.preventDefault();
+					this.selection.handleSpace(id);
+				}
 			}
 		};
-		this.mode = `editor`;
-		this.entryMode = `number`;
-		this.value = `0`;
-	}
-	render() {
-		return html`
-      ${this.fillStyle ? html`<div class="track"></div>` : ``}
-      ${this.fillStyle ? html`<div class="value"><div class="bar"></div></div>` : ``}
-      <div
-        class="number"
-        part="content"
-        tabindex="${this.disabled ? -1 : 0}"
-        contenteditable="${this._editing ? `plaintext-only` : `false`}"
-        data-placeholder="${this.placeholder}"
-        @click=${this._handleClick}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-        @keydown=${this._handleKeydown}
-        @beforeinput=${this._handleBeforeInput}
-        @input=${this._stopNativeInput}
-      ></div>
-    `;
 	}
+	#search;
+	#itemData;
+	#grid;
+	#positions;
+	#geometryScheduled;
+	#resizeObserver;
+	#mutationObserver;
+	#builtFromProvider;
+	#providerBuilt;
+	#data;
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener(`pointerdown`, this._onPointerDown);
-		this.addEventListener(`pointermove`, this._onPointerMove);
-		this.addEventListener(`pointerup`, this._onPointerUp);
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`pointerover`, this._onPointerOver);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
 		this.addEventListener(`keydown`, this._onKeyDown);
-		this.addEventListener(`click`, this._interceptClick, { capture: true });
-		this.addEventListener(`mouseenter`, this._handleMouseEnter);
-		this.addEventListener(`mouseleave`, this._handleMouseLeave);
+		this.addEventListener(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`wheel`, this._onWheel);
+		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
+		this.#resizeObserver.observe(this);
+		this.#mutationObserver = new MutationObserver(() => {
+			this.#processChildren();
+			this.#scheduleGeometry();
+		});
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			subtree: false,
+			attributeFilter: [`hidden`]
+		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener(`pointerdown`, this._onPointerDown);
-		this.removeEventListener(`pointermove`, this._onPointerMove);
-		this.removeEventListener(`pointerup`, this._onPointerUp);
+		this.removeEventListener(`pointerover`, this._onPointerOver);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
 		this.removeEventListener(`keydown`, this._onKeyDown);
-		this.removeEventListener(`click`, this._interceptClick);
-		this.removeEventListener(`mouseenter`, this._handleMouseEnter);
-		this.removeEventListener(`mouseleave`, this._handleMouseLeave);
-	}
-	/** Override to use .number instead of .content for text display */
-	get _contentEl() {
-		return this.renderRoot?.querySelector(`.number`) ?? void 0;
-	}
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		if (this.displayTextLogic === `show`) this._showModeWaitingToHide = true;
-		this._updateValueCss(this._normalizedValue());
-		this._requestDisplayUpdate();
-	}
-	_onUserInteraction() {
-		if (this.displayTextLogic === `show` && !this._editing) {
-			this._clearTransientTimer();
-			this._showModeWaitingToHide = false;
-			this._requestDisplayUpdate();
-			this._transientTimer = window.setTimeout(() => {
-				this._showModeWaitingToHide = true;
-				this._requestDisplayUpdate();
-			}, this.disappearDelay);
+		this.removeEventListener(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`wheel`, this._onWheel);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#mutationObserver = void 0;
+		this.#search?.dispose();
+		this.#search = void 0;
+	}
+	firstUpdated() {
+		this.#processChildren();
+		if (this.filterPredicate) this.#applyFilterPredicate();
+		this.#search = createElementIncrSearch({
+			container: this,
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: SEARCH_HIGHLIGHT_KEY
+		});
+		this.#recomputeGeometry();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`provider`)) {
+			this.#builtFromProvider = [];
+			this.#providerBuilt = 0;
+			this.#data.provider = this.provider;
+			queueMicrotask(() => {
+				if (this.provider) this.#data.request(void 0);
+			});
 			return;
 		}
-		if (this.displayTextLogic === `transient` && !this._editing) {
-			this._clearTransientTimer();
-			this._transientShowingValue = true;
-			this._requestDisplayUpdate();
-			this._transientTimer = window.setTimeout(() => {
-				if (!this._hovering) {
-					this._transientShowingValue = false;
-					this._requestDisplayUpdate();
-				}
-			}, this.disappearDelay);
-			return;
+		if (changed.has(`items`) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
+		this.#syncFromProvider();
+		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
+		if (changed.has(`filterPredicate`)) {
+			this.#applyFilterPredicate();
+			this.#scheduleGeometry();
 		}
-		super._onUserInteraction();
-	}
-	_onValueChange() {
-		if (this.displayTextLogic !== `show` || this._editing) return;
-		this._clearTransientTimer();
-		this._showModeWaitingToHide = false;
-		this._requestDisplayUpdate();
-		this._transientTimer = window.setTimeout(() => {
-			this._showModeWaitingToHide = true;
-			this._requestDisplayUpdate();
-		}, this.disappearDelay);
+		if (changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this._syncItemStates();
+		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
 	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (!this._editing) this._updateValueCss(this._normalizedValue());
-	}
-	_updateValueCss(normalized) {
-		this.style.setProperty(`--value`, String(normalized));
-		let valueStart = 0;
-		let valueEnd = normalized;
-		if (this.linearStyle === `bipolar`) {
-			if (normalized <= .5) {
-				valueStart = normalized;
-				valueEnd = .5;
-			} else {
-				valueStart = .5;
-				valueEnd = normalized;
-			}
-		} else if (this.linearStyle === `unipolar`) {
-			valueStart = .5 - normalized * .5;
-			valueEnd = .5 + normalized * .5;
-		}
-		this.style.setProperty(`--value-start`, String(valueStart));
-		this.style.setProperty(`--value-end`, String(valueEnd));
-		if (this.fillStyle === `circular` && this.circularStyle === `offset`) {
-			const h = this.offsetHeight;
-			const w = this.offsetWidth;
-			const r = h / 2 - 2;
-			const leftEdge = 2;
-			const rightEdge = w - 2;
-			const valueCenterPx = leftEdge + r + normalized * (rightEdge - leftEdge - 2 * r);
-			this.style.setProperty(`--radius`, `${r}px`);
-			this.style.setProperty(`--value-center-px`, `${valueCenterPx}px`);
-			this.style.setProperty(`--component-width-px`, `${w}px`);
-			this.style.setProperty(`--component-height-px`, `${h}px`);
-		}
+	/** The most recently selected item, or `undefined` if nothing is selected. */
+	get selectedItem() {
+		return [...this.selection.selected].at(-1);
+	}
+	/** The full current selection set (read-only). */
+	get selectedItems() {
+		return this.selection.selected;
 	}
-	_getDisplayText() {
-		if (this._shouldUseDisplayText()) return this.displayText ?? ``;
-		if (this.#dragging) {
-			const formatted = this.step !== void 0 ? this._formatNumber(this.#dragCurrentValue) : this.#dragCurrentValue.toFixed(this.precision);
-			return this.formatter ? this.formatter(formatted) : formatted;
+	/**
+	* Force an immediate geometry recompute. Called automatically on resize,
+	* DOM changes, sort/filter/search changes — only needed when layout is
+	* changed by outside forces (e.g. an external font load).
+	*/
+	refreshLayout() {
+		this.#recomputeGeometry();
+	}
+	addItem(item, options) {
+		let el;
+		if (typeof item === `string`) {
+			const li = document.createElement(`li`);
+			this._setLabel(li, item);
+			el = li;
+		} else el = item;
+		if (options?.notChecked) el.setAttribute(`not-checked`, ``);
+		this.appendChild(el);
+		this.#ensureIcon(el);
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	removeItem(item) {
+		item.remove();
+	}
+	clearItems() {
+		this.replaceChildren();
+		this.selection.reset();
+		this.#builtFromProvider = [];
+		this.#providerBuilt = 0;
+		this._syncItemStates();
+	}
+	/**
+	* Replace the entire item list in one call.
+	* Equivalent to `clearItems()` followed by `addItem()` for each element.
+	*/
+	setItems(items) {
+		this.clearItems();
+		for (const item of items) {
+			this.appendChild(item);
+			this.#ensureIcon(item);
 		}
-		if (this.formatter) {
-			const raw = Number.parseFloat(this.value);
-			return this.formatter(Number.isNaN(raw) ? this.value : String(raw));
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	/**
+	* Get the source object behind an `<li>` built from an `items` array or
+	* provider. Returns `undefined` for declarative / programmatic elements.
+	*/
+	getItemData(item) {
+		return this.#itemData.get(item);
+	}
+	/** Dispatch a command to this list. No-op by default (grouped-lister parity). */
+	dispatch(_commandId, _args) {}
+	select(item) {
+		this.selection.replace(item);
+	}
+	selectMany(items) {
+		this.selection.selectMany(items);
+	}
+	deselect(item) {
+		this.selection.deselect(item);
+	}
+	clearSelection() {
+		this.selection.clear();
+	}
+	selectAll() {
+		if (this.selection.canSelectAll()) this.selection.selectAll();
+	}
+	*selectedFilter(kind) {
+		const wanted = (el) => {
+			switch (kind) {
+				case `selected`: return el.hasAttribute(`data-selected`);
+				case `checked`: return el.hasAttribute(`data-checked`);
+				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
+			}
+		};
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (el.hidden) continue;
+			if (wanted(el)) yield el;
 		}
-		return this._formatDisplay();
 	}
-	_tryCommit() {
-		const el = this.renderRoot?.querySelector(`.number`);
-		if (el) {
-			const n = Number.parseFloat(el.textContent?.trim() ?? ``);
-			if (!Number.isNaN(n)) el.textContent = this._formatNumber(this._clamp(this._snap(n)));
+	#rebuildFromObjects(items) {
+		const keyOf = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? null;
+		const previousKeys = new Set([...this.selection.selected].map(keyOf).filter((k) => k !== null));
+		const anchorKey = this.selection.anchor ? keyOf(this.selection.anchor) : null;
+		this.replaceChildren(...items.map((item, index) => this.#createItemEl(item, index)));
+		if (previousKeys.size > 0 || anchorKey !== null) {
+			const next = [];
+			let anchor;
+			for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+				const key = keyOf(el);
+				if (key !== null && previousKeys.has(key)) next.push(el);
+				if (key !== null && key === anchorKey) anchor = el;
+			}
+			this.selection.seed(next, anchor);
 		}
-		super._tryCommit();
-	}
-	_handleArrowKey(e) {
-		const range = (this.max ?? 100) - (this.min ?? 0);
-		if (range === 0) return false;
-		const effectiveStep = resolveAxisStep(range, this.stops, this.step, e.shiftKey);
-		let delta = 0;
-		let handled = false;
-		switch (e.key) {
-			case `ArrowUp`:
-			case `ArrowRight`:
-				delta = effectiveStep;
-				handled = true;
-				break;
-			case `ArrowDown`:
-			case `ArrowLeft`:
-				delta = -effectiveStep;
-				handled = true;
-				break;
-			case `Home`:
-				delta = -(this._parseValue() - (this.min ?? 0));
-				handled = true;
-				break;
-			case `End`:
-				delta = (this.max ?? 0) - this._parseValue();
-				handled = true;
+		if (this.sort !== `none`) this.#applySort();
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this._syncItemStates();
+		this.#scheduleGeometry();
+	}
+	#createItemEl(item, index) {
+		const li = document.createElement(`li`);
+		this.#itemData.set(li, item);
+		const content = this.formatter ? this.formatter(item, index) : this.displayProperty ? this.#propertyValue(item, this.displayProperty) : item;
+		if (typeof content === `string`) {
+			this._setLabel(li, content);
+			if (this.iconProperty) {
+				const icon = this.#propertyValue(item, this.iconProperty);
+				if (typeof icon === `string` && icon.length > 0) li.setAttribute(`data-icon`, icon);
+			}
+		} else if (content instanceof Node) li.appendChild(content);
+		if (this.keyProperty) {
+			const key = this.#propertyValue(item, this.keyProperty);
+			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
 		}
-		if (handled) {
-			e.preventDefault();
-			this._applyDelta(delta);
-			return true;
+		this.#ensureIcon(li);
+		return li;
+	}
+	#propertyValue(item, prop) {
+		if (typeof item !== `object` || item === null || !(prop in item)) return void 0;
+		return item[prop];
+	}
+	#syncFromProvider() {
+		if (this.provider === void 0) return;
+		const items = this.#data.items;
+		if (items === this.#builtFromProvider) return;
+		let prefix = 0;
+		while (prefix < this.#builtFromProvider.length && prefix < items.length && this.#builtFromProvider[prefix] === items[prefix]) prefix++;
+		if (prefix === this.#builtFromProvider.length && prefix <= items.length) {
+			const tail = items.slice(prefix);
+			for (const item of tail) this.appendChild(this.#createItemEl(item, this.#providerBuilt++));
+			if (this.sort !== `none`) this.#applySort();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this._syncItemStates();
+			this.#scheduleGeometry();
+		} else {
+			this.#providerBuilt = 0;
+			this.#rebuildFromObjects(items);
 		}
-		return false;
+		this.#builtFromProvider = items;
 	}
-	/**
-	* Apply a signed delta to the current value, clamp/snap/format, and fire
-	* `input`/`change`. Shared between arrow-key handler and the wheel handler.
-	*/
-	_applyDelta(delta) {
-		const prev = this.value;
-		const current = this._parseValue();
-		const newValue = this._clamp(this._snap(current + delta));
-		const newValueStr = this.step !== void 0 ? this._formatNumber(newValue) : newValue.toFixed(this.precision);
-		this.value = newValueStr;
-		this._requestDisplayUpdate();
-		this._updateValueCss(this._normalizedValue(newValue));
-		if (newValueStr !== prev) this.dispatchEvent(new CustomEvent(`input`, {
-			detail: { value: newValueStr },
-			bubbles: true,
-			composed: true
+	#applyFilterPredicate() {
+		if (!this.filterPredicate) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR)) el.removeAttribute(`hidden`);
+			return;
+		}
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		else el.setAttribute(`hidden`, ``);
+	}
+	#applySort() {
+		if (this.sort === `none`) return;
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR)];
+		if (rows.length < 2) return;
+		const dir = this.sort === `descending` ? -1 : 1;
+		const meta = (el) => ({
+			element: el,
+			data: this.getItemData(el),
+			label: el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``
+		});
+		let cmp;
+		if (this.sortComparator) {
+			const user = this.sortComparator;
+			cmp = (a, b) => user(meta(a), meta(b));
+		} else if (this.sortBy) {
+			const prop = this.sortBy;
+			const key = (el) => {
+				const v = this.#propertyValue(this.getItemData(el), prop);
+				if (typeof v === `number`) return v;
+				return v === void 0 || v === null ? `` : String(v);
+			};
+			cmp = (a, b) => {
+				const ka = key(a);
+				const kb = key(b);
+				if (typeof ka === `number` && typeof kb === `number`) return ka - kb;
+				return String(ka).localeCompare(String(kb), void 0, { numeric: true });
+			};
+		} else cmp = (a, b) => meta(a).label.localeCompare(meta(b).label, void 0, { numeric: true });
+		const indexed = rows.map((el, i) => ({
+			el,
+			i
 		}));
+		indexed.sort((a, b) => cmp(a.el, b.el) * dir || a.i - b.i);
+		for (const { el } of indexed) this.appendChild(el);
+		this.#scheduleGeometry();
+	}
+	#scheduleGeometry() {
+		if (this.#geometryScheduled) return;
+		this.#geometryScheduled = true;
 		requestAnimationFrame(() => {
-			if (this.value !== prev) this.dispatchEvent(new CustomEvent(`change`, {
-				detail: { value: this.value },
-				bubbles: true,
-				composed: true
-			}));
+			this.#geometryScheduled = false;
+			this.#recomputeGeometry();
+		});
+	}
+	#recomputeGeometry() {
+		this.#grid = [];
+		this.#positions.clear();
+		if (!this.isConnected) return;
+		const columns = [];
+		for (const el of this._getVisibleItems()) {
+			const rect = el.getBoundingClientRect();
+			if (rect.width === 0 && rect.height === 0) continue;
+			let ci = columns.findIndex((c) => Math.abs(c.left - rect.left) <= 1);
+			if (ci === -1) {
+				columns.push({
+					left: rect.left,
+					items: []
+				});
+				ci = columns.length - 1;
+			}
+			columns[ci].items.push(el);
+		}
+		columns.sort((a, b) => a.left - b.left);
+		for (const col of columns) col.items.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+		this.#grid = columns.map((c) => c.items);
+		this.#grid.forEach((col, colIdx) => col.forEach((el, rowIdx) => this.#positions.set(el, {
+			col: colIdx,
+			row: rowIdx
+		})));
+	}
+	#positionOf(el) {
+		let pos = this.#positions.get(el);
+		if (pos === void 0) {
+			this.#recomputeGeometry();
+			pos = this.#positions.get(el);
+		}
+		return pos;
+	}
+	#itemAt(col, row) {
+		return this.#grid[col]?.[row];
+	}
+	#gridSize() {
+		if (this.#grid.length === 0) this.#recomputeGeometry();
+		return {
+			cols: this.#grid.length,
+			rows: Math.max(0, ...this.#grid.map((c) => c.length))
+		};
+	}
+	#navigateTo(target) {
+		if (!target) return;
+		this.tickled.handleKeyboardNavigation(target);
+		this.tickled.tickledId?.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
 		});
 	}
-	_shouldHandleWheel() {
-		if (this._editing) return false;
-		return super._shouldHandleWheel();
+	#findNextCheckable(fromCol, fromRow, deltaCol, deltaRow) {
+		const { cols } = this.#gridSize();
+		const maxIterations = this._getVisibleItems().length + 1;
+		let col = deltaCol !== 0 ? fromCol + deltaCol : fromCol;
+		let row = deltaRow !== 0 ? fromRow + deltaRow : fromRow;
+		let wrappedColumns = false;
+		for (let iterations = 0; iterations < maxIterations; iterations++) {
+			const colLength = this.#grid[col]?.length ?? 0;
+			if (row < 0 || row >= colLength) {
+				if (deltaCol !== 0 || wrappedColumns) {
+					if (this.itemWrap === `wrap`) {
+						if (deltaCol < 0) col = cols - 1;
+						else if (deltaCol > 0) col = 0;
+						wrappedColumns = true;
+					} else return;
+				}
+				if (deltaRow > 0) {
+					if (col + 1 < cols) {
+						col = col + 1;
+						row = 0;
+						wrappedColumns = true;
+					} else if (this.itemWrap === `wrap`) {
+						col = 0;
+						row = 0;
+						wrappedColumns = true;
+					} else return;
+				} else if (deltaRow < 0) {
+					if (col - 1 >= 0) {
+						col = col - 1;
+						row = (this.#grid[col]?.length ?? 1) - 1;
+						wrappedColumns = true;
+					} else if (this.itemWrap === `wrap`) {
+						col = cols - 1;
+						row = (this.#grid[col]?.length ?? 1) - 1;
+						wrappedColumns = true;
+					} else return;
+				} else if (deltaCol !== 0) {
+					const targetColLength = this.#grid[col]?.length ?? 0;
+					if (row >= targetColLength && targetColLength > 0) row = targetColLength - 1;
+				}
+				if (col === fromCol && row === fromRow + deltaRow) return;
+				continue;
+			}
+			const item = this.#itemAt(col, row);
+			if (item && this._isCheckable(item)) return item;
+			row += deltaRow;
+		}
+	}
+	#findFirstCheckable() {
+		return this._getVisibleItems().find((item) => this._isCheckable(item));
+	}
+	#findLastCheckable() {
+		const visibleItems = this._getVisibleItems();
+		for (let i = visibleItems.length - 1; i >= 0; i--) if (this._isCheckable(visibleItems[i])) return visibleItems[i];
+	}
+	#navigateDown() {
+		this.#recomputeGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, 0, 1);
+		if (next) this.#navigateTo(next);
+	}
+	#navigateUp() {
+		this.#recomputeGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findLastCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, 0, -1);
+		if (next) this.#navigateTo(next);
+	}
+	#navigateRight() {
+		this.#recomputeGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, 1, 0);
+		if (next) this.#navigateTo(next);
+		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findFirstCheckable());
+	}
+	#navigateLeft() {
+		this.#recomputeGeometry();
+		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
+		if (!cur) {
+			this.#navigateTo(this.#findFirstCheckable());
+			return;
+		}
+		const next = this.#findNextCheckable(cur.col, cur.row, -1, 0);
+		if (next) this.#navigateTo(next);
+		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
+	}
+	_getVisibleItems() {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+			if (el.hidden) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
 	}
-	_applyWheelDelta(direction, event) {
-		const range = (this.max ?? 100) - (this.min ?? 0);
-		if (range === 0) return;
-		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
-		this._applyDelta(direction * effectiveStep);
+	_isCheckable(item) {
+		if (this.interactionMode !== `checked`) return true;
+		return !item.hasAttribute(`not-checked`);
 	}
-	_parseValue() {
-		return Number.parseFloat(this.value) || 0;
+	_setLabel(li, label) {
+		const span = document.createElement(`span`);
+		span.style.cssText = LABEL_SPAN_CSS;
+		span.textContent = label;
+		li.appendChild(span);
+		li.setAttribute(`data-search-label`, label);
 	}
 	/**
-	* Formats the stored value for display, inferring decimal places from the value
-	* string itself. This preserves typed precision (e.g. "0.1234" stays "0.1234")
-	* and also respects trailing zeros written by drag storage (e.g. "5.0" stays "5.0").
+	* Inject a leading `<ixfx-icon>` into an item carrying `data-icon`.
+	* Idempotent — skips when the item already starts with an icon.
 	*/
-	_formatDisplay() {
-		const n = Number.parseFloat(this.value);
-		if (Number.isNaN(n)) return this.value;
-		if (this.precision !== void 0) return n.toFixed(this.precision);
-		const dot = this.value.indexOf(`.`);
-		const dp = dot >= 0 ? this.value.length - dot - 1 : 0;
-		return n.toFixed(dp);
-	}
-	_clamp(n) {
-		if (this.min !== void 0) n = Math.max(this.min, n);
-		if (this.max !== void 0) n = Math.min(this.max, n);
-		return n;
-	}
-	_snap(n) {
-		if (this.stops && this.stops > 1) {
-			const min = this.min ?? 0;
-			const stopStep = ((this.max ?? 100) - min) / this.stops;
-			return Math.round((n - min) / stopStep) * stopStep + min;
+	#ensureIcon(li) {
+		const name = li.getAttribute(`data-icon`);
+		if (!name) return;
+		if (li.firstElementChild?.tagName === `IXFX-ICON`) return;
+		const icon = document.createElement(`ixfx-icon`);
+		icon.setAttribute(`name`, name);
+		icon.style.marginInlineEnd = `var(--detail-list-icon-gap, 6px)`;
+		icon.style.flexShrink = `0`;
+		li.prepend(icon);
+	}
+	/** Scan light-DOM children for unprocessed `data-icon` items. */
+	#processChildren() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#ensureIcon(el);
+	}
+	_syncItemStates() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !el.hasAttribute(`not-checked`) && this.selection.selected.has(el));
+			else el.removeAttribute(`data-checked`);
+		}
+		this.dataset.inputMode = this.tickled.inputMode;
+		this._syncCheckboxes();
+	}
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		const wantsCustom = typeof this.checkboxRenderer === `function`;
+		for (const el of this.querySelectorAll(`li`)) {
+			const existing = el.querySelector(`.ixfx-list-checkbox`);
+			if (!inCheckedMode) {
+				if (existing) existing.remove();
+				continue;
+			}
+			if (el.hasAttribute(`not-checked`)) {
+				if (existing) existing.remove();
+				continue;
+			}
+			const existingIsCustom = existing?.classList.contains(`ixfx-list-checkbox-custom`) ?? false;
+			if (existing && existingIsCustom !== wantsCustom) existing.remove();
+			let cb = el.querySelector(`.ixfx-list-checkbox`);
+			if (!cb) {
+				if (wantsCustom) {
+					const opts = this.checkboxRenderer;
+					const margin = opts.margin ?? `0`;
+					const width = opts.width ?? `24px`;
+					cb = this._createCustomCheckbox(el, margin, width);
+				} else cb = this._createNativeCheckboxCell(el);
+				el.prepend(cb);
+			}
+			const checked = this.selection.selected.has(el);
+			if (wantsCustom) {
+				cb.setAttribute(`aria-checked`, String(checked));
+				cb.toggleAttribute(`data-checked`, checked);
+				if (this.checkboxRenderer) {
+					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
+					render(renderer(checked), cb);
+				}
+			} else {
+				const input = cb.querySelector(`input.ixfx-list-checkbox`);
+				if (input) input.checked = checked;
+			}
 		}
-		if (!this.step) return n;
-		return Math.round(n / this.step) * this.step;
-	}
-	_inferDecimals(n) {
-		if (this.step !== void 0) {
-			const s = String(this.step);
-			const dot = s.indexOf(`.`);
-			return dot >= 0 ? s.length - dot - 1 : 0;
+	}
+	/**
+	* Native checkbox cell: a span that stretches to the row's full cross-axis
+	* (so the entire column height is a click target) with a real `<input>`
+	* centred inside. The span owns the click; the input is purely visual and
+	* has `pointer-events:none` so a single click produces one toggle.
+	*/
+	_createNativeCheckboxCell(el) {
+		const cell = document.createElement(`span`);
+		cell.className = `ixfx-list-checkbox ixfx-list-checkbox-native`;
+		cell.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:18px;margin:0 6px 0 0;cursor:pointer;pointer-events:auto`;
+		cell.tabIndex = -1;
+		cell.setAttribute(`role`, `checkbox`);
+		cell.setAttribute(`part`, `checkbox`);
+		cell.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this.selection.toggle(el);
+		});
+		const input = document.createElement(`input`);
+		input.type = `checkbox`;
+		input.className = `ixfx-list-checkbox`;
+		input.style.cssText = `pointer-events:none;cursor:pointer;margin:0`;
+		cell.appendChild(input);
+		return cell;
+	}
+	/** Custom checkbox cell: same shape as the native cell; renderer content inside. */
+	_createCustomCheckbox(el, margin, width) {
+		const span = document.createElement(`span`);
+		span.className = `ixfx-list-checkbox ixfx-list-checkbox-custom`;
+		span.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch;width:${width};margin:${margin};cursor:pointer;pointer-events:auto`;
+		span.tabIndex = -1;
+		span.setAttribute(`role`, `checkbox`);
+		span.setAttribute(`part`, `checkbox`);
+		span.addEventListener(`click`, (e) => {
+			e.stopPropagation();
+			this.selection.toggle(el);
+		});
+		return span;
+	}
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(`li`)) return target;
 		}
-		const s = String(n ?? this._parseValue());
-		const dot = s.indexOf(`.`);
-		return dot >= 0 ? s.length - dot - 1 : 0;
 	}
-	_formatNumber(n) {
-		return n.toFixed(this._inferDecimals(n));
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery().then(() => this.#recomputeGeometry());
+		this.focus();
 	}
-	/** Returns a 0..1 fraction for the given value within [min, max]. */
-	_normalizedValue(n = this._parseValue()) {
-		if (this.min === void 0 || this.max === void 0) return 0;
-		if (this.max === this.min) return 0;
-		return Math.max(0, Math.min(1, (n - this.min) / (this.max - this.min)));
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
 	}
 	static {
 		this.styles = [
 			themeFallbacks,
-			prominenceStyles,
-			...EditableLabel.styles,
+			scrollFadeStyles(`x`),
 			css`
     :host {
-      font-size: var(--text-s,11px);
-      --value: 0;
-      --value-start: 0;
-      --value-end: 0;
-      --_fill-color-alpha: color-mix(
-        in oklch,
-        var(--fill-color, var(--accent, oklch(60% 0.15 140))) calc(var(--fill-opacity, 0.25) * 100%),
-        transparent
-      );
+      display: block;
+      position: relative;
+      background: var(--detail-list-bg, var(--surface-3));
+      color: var(--detail-list-text, var(--surface-3-text));
+      border-radius: var(--detail-list-radius, var(--radius-s));
+      border: 1px solid var(--detail-list-border, var(--border));
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      outline: none;
+      --ixfx-detail-list-item-padding:
+        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-m, 8px)));
     }
 
-    /* ── Layout (when fill-style is enabled) ── */
-    :host([fill-style]) {
-      display: grid;
+    :host(:focus-visible) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .container {
       position: relative;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-      min-height: 1.5em;
-      min-width: 5em;
+      width: 100%;
+      height: 100%;
     }
 
-    :host([fill-style]) .track,
-    :host([fill-style]) .value {
-      grid-area: 1 / 1;
-      position: absolute;
-      inset: 0;
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      /* keep the last column clear of the scrollbar / right edge */
+      padding-inline-end: calc(var(--detail-list-column-gap, 8px) + 4px);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-flow: column wrap;
+      align-content: flex-start;
+      column-gap: var(--detail-list-column-gap, 8px);
+      overflow-x: auto;
+      overflow-y: hidden;
+      box-sizing: border-box;
+      /* Scrollbar theming: consumers override these CSS variables to control
+         the native scrollbar (scrollbar-width, scrollbar-gutter, scrollbar-color). */
+      scrollbar-width: var(--detail-list-scrollbar-width, auto);
+      scrollbar-gutter: var(--detail-list-scrollbar-gutter, auto);
+      scrollbar-color: var(--detail-list-scrollbar-color, auto);
     }
 
-    /* Track background styling */
-    :host([fill-style]) .track {
-      z-index: 0;
-      background: var(--surface-4, oklch(22% 0.02 240));
-      border: var(--border, 1px solid oklch(25% 0.02 240));
+    ::slotted([hidden]) {
+      display: none !important;
     }
 
-    :host([fill-style]) .value {
-      z-index: 1;
+    ::slotted(li) {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      flex: none;
+      width: var(--detail-list-column-width, 220px);
+      height: var(--detail-list-item-height, 28px);
+      padding: var(--ixfx-detail-list-item-padding);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      outline: 1px solid transparent;
     }
 
-    :host([fill-style="linear"]) .track {
-      border-radius: var(--radius-s, 3px);
+    /* In checked mode, only the checkbox column is clickable; the row body
+       gets a default cursor so it doesn't suggest otherwise. */
+    :host([interaction-mode="checked"]) ::slotted(li) {
+      cursor: default;
     }
 
-    :host([fill-style="circular"]) .track {
-      border-radius: 50%;
-      overflow: hidden;
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled);
+      outline: var(--item-border-tickled);
     }
 
-    /* Linear: all linear-styles use .bar positioned via --value-start and --value-end */
-    :host([fill-style="linear"]) .value {
-      overflow: hidden;
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+      outline: 1px solid transparent;
     }
 
-    :host([fill-style="linear"]) .bar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: calc(var(--value-start, 0) * 100%);
-      width: calc((var(--value-end, 0) - var(--value-start, 0)) * 100%);
-      background: var(--fill-image, var(--_fill-color-alpha));
-    }
-
-    /* Circular grow: filled circle growing from center */
-    :host([fill-style="circular"][circular-style="grow"]) .value,
-    :host([fill-style="circular"]:not([circular-style])) .value {
-      background: var(--fill-image, var(--_fill-color-alpha));
-      clip-path: circle(calc(var(--value) * 50%) at 50% 50%);
-    }
-
-    /* Circular offset: value circle slides left/right from center.
-       Track circle is centered, filling the height.
-       Value circle is same size, offset by --value-offset-px.
-       At value=0.5: value circle centered on track (invisible when overlaid)
-       At value=0: value circle at far left
-       At value=1: value circle at far right
-    */
-    :host([fill-style="circular"][circular-style="offset"]) {
-      min-width: 80px;
-      min-height: 26px;
-      overflow: hidden;
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled);
+      outline: 2px dashed var(--surface-3);
+      outline-offset: -2px;
     }
 
-    :host([fill-style="circular"][circular-style="offset"]) .track {
-      position: absolute;
-      top: 50%;
-      border-radius: 50%;
-      background: var(--surface-4, oklch(22% 0.02 240));
-      border: var(--border, 1px solid oklch(25% 0.02 240));
-      width: calc(var(--radius, 11px) * 2);
-      height: calc(var(--radius, 11px) * 2);
-      left: 50%;
-      transform: translate(-50%, -50%);
+    /* checked mode: the injected checkbox communicates selection — suppress bg */
+    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
+      background: transparent;
+      color: inherit;
+      outline: 1px solid transparent;
     }
 
-    :host([fill-style="circular"][circular-style="offset"]) .value {
-      position: absolute;
-      top: 50%;
-      background: var(--fill-image, var(--_fill-color-alpha));
-      border-radius: 50%;
-      width: calc(var(--radius, 11px) * 2);
-      height: calc(var(--radius, 11px) * 2);
-      transform: translate(calc(var(--value-center-px, 13px) - var(--radius, 11px)), -50%);
+    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-tickled);
+      color: inherit;
+      outline: var(--item-border-tickled);
     }
 
-    :host([fill-style="circular"][circular-style="offset"]) .number {
-      border-radius: 0;
+    .loading {
+      position: absolute;
+      bottom: 8px;
+      right: 8px;
+      z-index: 10;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 2px 8px;
+      font-size: var(--text-s, 11px);
+      color: var(--surface-muted-text, #888);
     }
 
-    /* Circular dot: full circle */
-    :host([fill-style="circular"][circular-style="dot"]) .value {
-      background: var(--fill-image, var(--_fill-color-alpha));
+    .loading[hidden] {
+      display: none;
     }
 
-    /* ── Number (top layer - text display) ── */
-    :host([fill-style]) .number {
+    .search-overlay {
       position: absolute;
-      inset: 0;
-      z-index: 2;
+      top: 8px;
+      right: 8px;
+      z-index: 10;
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-family: inherit;
-      font-size: inherit;
-      color: inherit;
-      padding: var(--space-xs, 3px) var(--space-s, 4px);
-    }
-
-    :host([fill-style="circular"]) .number {
-      border-radius: 50%;
+      gap: 4px;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 4px 6px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
 
-    /* Drag cursor + no text selection while not in text-edit mode */
-    :host(:not([disabled]):not([no-drag])) .number:not([contenteditable="plaintext-only"]) {
-      cursor: ns-resize;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: none;
+    .search-overlay[hidden] {
+      display: none;
     }
 
-    /* Focus outline */
-    :host .number {
+    .search-input {
+      background: transparent;
+      border: none;
       outline: none;
+      color: inherit;
+      font-size: var(--text-m, 0.875em);
+      min-width: 140px;
     }
 
-    :host .number:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
+    .search-close {
+      background: transparent;
+      border: none;
+      color: var(--surface-muted-text, #888);
+      cursor: pointer;
+      font-size: 1.1em;
+      line-height: 1;
+      padding: 0 2px;
+    }
+
+    .search-close:hover {
+      color: inherit;
     }
+  `
+		];
+	}
+	render() {
+		const loading = this.#data.loading;
+		const progress = this.#data.progress;
+		return html`
+      <div class="container">
+        <ul part="list" class="scroll-fade-x">
+          <slot></slot>
+        </ul>
+        <div class="loading" part="loading" ?hidden=${!loading}>
+          ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : nothing}
+        </div>
+        <div
+          class="search-overlay"
+          part="search-overlay"
+          ?hidden=${!this._searchVisible}
+        >
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search…"
+            .value=${this._searchQuery}
+            @input=${this._onSearchInput}
+            @keydown=${this._onSearchKeydown}
+          />
+          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], DetailListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], DetailListElement.prototype, "interactionMode", void 0);
+__decorate([property({ type: String })], DetailListElement.prototype, "sort", void 0);
+__decorate([property({
+	type: String,
+	attribute: `sort-by`
+})], DetailListElement.prototype, "sortBy", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "sortComparator", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "items", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "provider", void 0);
+__decorate([property({
+	type: String,
+	attribute: `display-property`
+})], DetailListElement.prototype, "displayProperty", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "formatter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-property`
+})], DetailListElement.prototype, "iconProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `key-property`
+})], DetailListElement.prototype, "keyProperty", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], DetailListElement.prototype, "itemWrap", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "checkboxRenderer", void 0);
+__decorate([state()], DetailListElement.prototype, "_searchVisible", void 0);
+__decorate([state()], DetailListElement.prototype, "_searchQuery", void 0);
+__decorate([query(`.search-input`)], DetailListElement.prototype, "_searchInputEl", void 0);
+__decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
+DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
+//#endregion
+//#region src/dock/dock-drag.ts
+let activeDrag = null;
+const dragHosts = /* @__PURE__ */ new Set();
+function registerDockHost(host) {
+	dragHosts.add(host);
+}
+function unregisterDockHost(host) {
+	dragHosts.delete(host);
+	if (activeDrag !== null && activeDrag.sourceHost === host);
+}
+/**
+* Begin a dock-panel drag. Called by hosts in response to their own
+* `dock-panel-drag-start` events (titlebar or tab-item handles).
+*/
+function startDrag(panelId, sourceHost, pointerId, clientX, clientY) {
+	if (activeDrag !== null);
+	activeDrag = {
+		panelId,
+		sourceHost,
+		pointerId,
+		ghost: createGhostForPanel(sourceHost, panelId),
+		outside: false
+	};
+	for (const host of dragHosts) host.setDragActive(true);
+	activeDrag.ghost?.move(clientX, clientY);
+	window.addEventListener(`pointermove`, onPointerMove);
+	window.addEventListener(`pointerup`, onPointerUp);
+	window.addEventListener(`pointercancel`, onPointerCancel);
+	window.addEventListener(`keydown`, onKeyDown);
+}
+function createGhostForPanel(host, panelId) {
+	const panel = Array.from(host.children).find((el) => el instanceof HTMLElement && el.panelId === panelId);
+	if (!panel) return null;
+	const content = document.createElement(`span`);
+	content.style.display = `inline-flex`;
+	content.style.alignItems = `center`;
+	content.style.gap = `var(--space-xs, 4px)`;
+	content.style.minWidth = `0`;
+	if (panel.iconName) {
+		const icon = document.createElement(`ixfx-icon`);
+		icon.name = panel.iconName;
+		content.appendChild(icon);
+	}
+	const label = document.createElement(`span`);
+	label.textContent = panel.title || panelId;
+	label.style.overflow = `hidden`;
+	label.style.textOverflow = `ellipsis`;
+	label.style.whiteSpace = `nowrap`;
+	content.appendChild(label);
+	try {
+		return createDragGhost({
+			anchor: panel,
+			content
+		});
+	} catch {
+		return null;
+	}
+}
+function onPointerMove(event) {
+	const drag = activeDrag;
+	if (drag === null || event.pointerId !== drag.pointerId) return;
+	drag.ghost?.move(event.clientX, event.clientY);
+	const zone = findDropZone(drag, event.clientX, event.clientY);
+	for (const host of dragHosts) host.setDropZone(zone !== null && zone.host === host ? zone : null);
+	const outside = !pointerOverAnyHost(event.clientX, event.clientY);
+	if (outside !== drag.outside) {
+		drag.outside = outside;
+		dispatchBoundary(drag, outside ? `dock-panel-drag-out` : `dock-panel-drag-in`, event);
+	}
+}
+function onPointerUp(event) {
+	const drag = activeDrag;
+	if (drag === null || event.pointerId !== drag.pointerId) return;
+	const zone = findDropZone(drag, event.clientX, event.clientY);
+	if (zone !== null) zone.host.handleDrop(drag.panelId, zone, drag.sourceHost);
+	else if (!pointerOverAnyHost(event.clientX, event.clientY)) dispatchTearOut(drag, event);
+	endDrag();
+}
+function onPointerCancel(event) {
+	const drag = activeDrag;
+	if (drag === null || event.pointerId !== drag.pointerId) return;
+	endDrag();
+}
+function onKeyDown(event) {
+	if (activeDrag === null) return;
+	if (event.key !== `Escape`) return;
+	endDrag();
+}
+function findDropZone(drag, clientX, clientY) {
+	for (const host of dragHosts) {
+		const zone = host.computeDropZone(clientX, clientY, drag.panelId);
+		if (zone !== null) return zone;
+	}
+	return null;
+}
+/** True when the point lies within the bounding box of any registered host. */
+function pointerOverAnyHost(clientX, clientY) {
+	for (const host of dragHosts) {
+		const r = host.getBoundingClientRect();
+		if (clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom) return true;
+	}
+	return false;
+}
+function dispatchBoundary(drag, type, event) {
+	drag.sourceHost.dispatchEvent(new CustomEvent(type, {
+		detail: {
+			panelId: drag.panelId,
+			clientX: event.clientX,
+			clientY: event.clientY,
+			screenX: event.screenX,
+			screenY: event.screenY
+		},
+		bubbles: true,
+		composed: true
+	}));
+}
+function dispatchTearOut(drag, event) {
+	const snapshot = drag.sourceHost.getPanelSnapshot(drag.panelId);
+	if (snapshot === null) return;
+	drag.sourceHost.dispatchEvent(new CustomEvent(`dock-panel-tear-out`, {
+		detail: {
+			panelId: drag.panelId,
+			snapshot,
+			clientX: event.clientX,
+			clientY: event.clientY,
+			screenX: event.screenX,
+			screenY: event.screenY
+		},
+		bubbles: true,
+		composed: true
+	}));
+}
+function endDrag() {
+	const drag = activeDrag;
+	if (drag === null) return;
+	for (const host of dragHosts) {
+		host.setDropZone(null);
+		host.setDragActive(false);
+	}
+	drag.ghost?.destroy();
+	activeDrag = null;
+	window.removeEventListener(`pointermove`, onPointerMove);
+	window.removeEventListener(`pointerup`, onPointerUp);
+	window.removeEventListener(`pointercancel`, onPointerCancel);
+	window.removeEventListener(`keydown`, onKeyDown);
+}
+function isDragging() {
+	return activeDrag !== null;
+}
+function getActiveDragPanelId() {
+	return activeDrag?.panelId ?? null;
+}
+//#endregion
+//#region src/dock/dock-model.ts
+/**
+* The dock model is a plain mutable tree owned exclusively by the host
+* element. Mutators below change the tree in place; the host calls
+* `normalize(root)` then `requestUpdate()` after batching mutations.
+*/
+function isSplit(node) {
+	return node.kind === `split`;
+}
+function isStack(node) {
+	return node.kind === `stack`;
+}
+function createEmptyStack() {
+	return {
+		kind: `stack`,
+		panels: [],
+		active: ``
+	};
+}
+function createEmptyLayout() {
+	return {
+		version: 1,
+		root: createEmptyStack()
+	};
+}
+function createStack(panels, active) {
+	return {
+		kind: `stack`,
+		panels: [...panels],
+		active: active ?? panels[0] ?? ``
+	};
+}
+function createSplit(direction, children, sizes) {
+	const mean = children.length > 0 ? 1 / children.length : 1;
+	return {
+		kind: `split`,
+		direction,
+		children: [...children],
+		sizes: sizes ? [...sizes] : children.map(() => mean)
+	};
+}
+/**
+* Runs after every mutation:
+* - stack `active` fixed to a member of `panels` (or `''` when empty)
+* - empty stacks removed from their parent split (and their `sizes` entry)
+* - splits with ≤1 child replaced by that child (spliced into the parent)
+* - a child split whose direction equals its parent's is flattened into it,
+*   spreading its sizes across the slot it vacated
+* - `sizes` kept parallel to `children` (padded with the mean weight)
+* - an empty root collapses to a single empty stack
+*/
+function normalize(root) {
+	if (isStack(root)) {
+		if (!root.panels.includes(root.active)) root.active = root.panels[0] ?? ``;
+		return root;
+	}
+	for (let i = root.children.length - 1; i >= 0; i--) {
+		normalize(root.children[i]);
+		const child = root.children[i];
+		if (isStack(child) && child.panels.length === 0) {
+			root.children.splice(i, 1);
+			root.sizes.splice(i, 1);
+			continue;
+		}
+		if (isSplit(child) && child.children.length === 1) {
+			root.children.splice(i, 1, child.children[0]);
+			root.sizes.splice(i, 1, child.sizes[0] ?? root.sizes[i] ?? 1);
+		}
+	}
+	for (let i = root.children.length - 1; i >= 0; i--) {
+		const child = root.children[i];
+		if (isSplit(child) && child.direction === root.direction) {
+			root.children.splice(i, 1, ...child.children);
+			root.sizes.splice(i, 1, ...child.sizes);
+		}
+	}
+	if (root.children.length === 0) return replaceNodeContents(root, createEmptyStack());
+	if (root.children.length === 1) return root.children[0];
+	while (root.sizes.length < root.children.length) root.sizes.push(1 / root.children.length);
+	if (root.sizes.length > root.children.length) root.sizes.length = root.children.length;
+	return root;
+}
+/**
+* Turn `target` (a stack or split node object) into the shape of `source`'s
+* kind, used when the root itself must dissolve. Mutates `target` in place so
+* the host's root reference stays valid.
+*/
+function replaceNodeContents(target, source) {
+	if (isStack(source)) {
+		target.kind = `stack`;
+		const t = target;
+		t.panels = source.panels;
+		t.active = source.active;
+		delete t.collapsed;
+		delete t.preCollapseSize;
+	} else {
+		target.kind = `split`;
+		const t = target;
+		t.direction = source.direction;
+		t.children = source.children;
+		t.sizes = source.sizes;
+	}
+	return target;
+}
+function findNode(root, path) {
+	let current = root;
+	for (const index of path) {
+		if (!isSplit(current)) return null;
+		const next = current.children[index];
+		if (!next) return null;
+		current = next;
+	}
+	return current;
+}
+/** Parent split of the node at `path`; null when path is empty or malformed. */
+function findParentOf(root, path) {
+	if (path.length === 0) return null;
+	const parent = findNode(root, path.slice(0, -1));
+	return parent !== null && isSplit(parent) ? parent : null;
+}
+/** Path of the stack containing `panelId`, or null. */
+function findStackOf(root, panelId) {
+	return findStackOfInner(root, panelId, []);
+}
+function findStackOfInner(node, panelId, path) {
+	if (isStack(node)) return node.panels.includes(panelId) ? path : null;
+	for (let i = 0; i < node.children.length; i++) {
+		const found = findStackOfInner(node.children[i], panelId, [...path, i]);
+		if (found !== null) return found;
+	}
+	return null;
+}
+function collectPanelIds(root) {
+	if (isStack(root)) return [...root.panels];
+	return root.children.flatMap(collectPanelIds);
+}
+/**
+* Paths of every stack leaf, in tree order. `[]` is the root itself when it
+* is a stack.
+*/
+function collectStackPaths(root) {
+	const result = [];
+	collectStackPathsInner(root, [], result);
+	return result;
+}
+function collectStackPathsInner(node, path, out) {
+	if (isStack(node)) {
+		out.push(path);
+		return;
+	}
+	node.children.forEach((child, i) => collectStackPathsInner(child, [...path, i], out));
+}
+function addPanelToStack(stack, panelId, index) {
+	const at = index === void 0 ? stack.panels.length : Math.max(0, Math.min(index, stack.panels.length));
+	stack.panels.splice(at, 0, panelId);
+	stack.active = panelId;
+}
+function removePanelFromStack(stack, panelId) {
+	const index = stack.panels.indexOf(panelId);
+	if (index < 0) return;
+	stack.panels.splice(index, 1);
+	if (stack.active === panelId) stack.active = stack.panels[Math.min(index, stack.panels.length - 1)] ?? ``;
+}
+function setActive(stack, panelId) {
+	if (!stack.panels.includes(panelId) || stack.active === panelId) return false;
+	stack.active = panelId;
+	return true;
+}
+/**
+* Insert `node` beside the child at `targetPath`, into the parent split when
+* its direction matches `direction`, otherwise wrap the target in a new split.
+* `side` selects before/after; the neighbour's weight is split 50/50.
+* Returns the path of the inserted node, or null.
+*/
+function insertBeside(root, targetPath, direction, newNode, side) {
+	const target = findNode(root, targetPath);
+	if (target === null) return null;
+	if (targetPath.length === 0) {
+		if (isSplit(root) && root.direction === direction) {
+			const edgeIndex = side === `before` ? 0 : root.children.length;
+			const neighbourIndex = side === `before` ? 0 : root.children.length - 1;
+			const neighbour = root.sizes[neighbourIndex];
+			root.children.splice(edgeIndex, 0, newNode);
+			root.sizes.splice(edgeIndex, 0, neighbour !== void 0 ? neighbour / 2 : 1);
+			if (neighbour !== void 0) root.sizes[side === `before` ? neighbourIndex + 1 : neighbourIndex] = neighbour / 2;
+			return [edgeIndex];
+		}
+		wrapRoot(root, direction, newNode, side);
+		return [side === `before` ? 0 : 1];
+	}
+	const parent = findParentOf(root, targetPath);
+	if (parent === null) return null;
+	const index = targetPath[targetPath.length - 1];
+	if (parent.direction === direction) {
+		const insertAt = side === `before` ? index : index + 1;
+		const w = parent.sizes[index] !== void 0 ? parent.sizes[index] / 2 : 1;
+		parent.sizes[index] = w;
+		parent.children.splice(insertAt, 0, newNode);
+		parent.sizes.splice(insertAt, 0, w);
+		const childPath = [...targetPath.slice(0, -1), insertAt];
+		normalize(root);
+		return childPath;
+	}
+	const wrapper = createSplit(direction, side === `before` ? [newNode, target] : [target, newNode]);
+	parent.children[index] = wrapper;
+	normalize(root);
+	const childIndex = side === `before` ? 0 : 1;
+	return [
+		...targetPath.slice(0, -1),
+		index,
+		childIndex
+	];
+}
+/**
+* Wrap the whole root in a new split of `direction`, replacing it in place so
+* the caller's reference stays valid. Returns true on success.
+*/
+function wrapRoot(root, direction, newNode, side) {
+	replaceNodeContents(root, createSplit(direction, side === `before` ? [newNode, root] : [root, newNode]));
+	normalize(root);
+	return true;
+}
+/**
+* Remove the stack at `stackPath` from the tree. Its panels are moved into
+* `fallbackStack` (if given and still attached) so they are not silently
+* lost; otherwise they are dropped from the model (elements return to the
+* pool). Returns the removed stack.
+*/
+function extractStack(root, stackPath, fallbackStack) {
+	const stack = findNode(root, stackPath);
+	if (stack === null || !isStack(stack)) return null;
+	const isRoot = stackPath.length === 0;
+	if (fallbackStack && fallbackStack !== stack) {
+		for (const id of stack.panels) addPanelToStack(fallbackStack, id);
+		if (!isRoot) {
+			stack.panels = [];
+			stack.active = ``;
+		}
+	}
+	if (isRoot) {
+		replaceNodeContents(root, createEmptyStack());
+		return stack;
+	}
+	const parent = findParentOf(root, stackPath);
+	if (parent === null) return null;
+	const index = stackPath[stackPath.length - 1];
+	parent.children.splice(index, 1);
+	parent.sizes.splice(index, 1);
+	normalize(root);
+	return stack;
+}
+function serializeLayout(root) {
+	return {
+		version: 1,
+		root: serializeNode(root)
+	};
+}
+function serializeNode(node) {
+	if (isStack(node)) {
+		const out = {
+			kind: `stack`,
+			panels: [...node.panels],
+			active: node.active
+		};
+		if (node.collapsed !== void 0) out.collapsed = node.collapsed;
+		if (node.preCollapseSize !== void 0) out.preCollapseSize = node.preCollapseSize;
+		return out;
+	}
+	return {
+		kind: `split`,
+		direction: node.direction,
+		sizes: [...node.sizes],
+		children: node.children.map(serializeNode)
+	};
+}
+/**
+* Parse layout JSON, validate loosely, and normalize. Returns null when the
+* JSON is malformed or the root is missing/invalid.
+*/
+function parseLayout(json) {
+	try {
+		const parsed = JSON.parse(json);
+		if (parsed === null || typeof parsed !== `object`) return null;
+		const root = parsed.root;
+		if (root === null || typeof root !== `object` || !(`kind` in root)) return null;
+		return {
+			version: 1,
+			root: normalize(root)
+		};
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/tabs/tab-list-item.ts
+let TabListItemElement = class TabListItemElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.closeable = false;
+		this.hideLabels = false;
+		this.iconName = void 0;
+		this.description = void 0;
+		this.commandActive = void 0;
+		this.registry = void 0;
+		this._compact = false;
+		this._hasToolbarContent = false;
+		this._onToolbarSlotChange = () => {
+			this._updateToolbarContent();
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(([entry]) => {
+			this._compact = entry.contentRect.width < 64;
+		});
+		this._resizeObserver.observe(this);
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = void 0;
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+	}
+	updated(changed) {
+		super.updated(changed);
+		this._syncTooltipAttrs();
+		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
+	}
+	_syncTooltipAttrs() {
+		if (this.description) {
+			this.setAttribute(`data-tooltip`, this.description);
+			this.setAttribute(`data-tooltip-anchor`, `top`);
+		} else {
+			this.removeAttribute(`data-tooltip`);
+			this.removeAttribute(`data-tooltip-anchor`);
+		}
+	}
+	_syncCommandListener() {
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
+		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
+			if (id === this.commandActive) this.click();
+		});
+	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+	}
+	render() {
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
+		return html`
+      <div>
+        ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
+        ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
+        ${hasActions ? html`
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? html`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : nothing}
+        </div>
+        ` : nothing}
+      </div>
+    `;
+	}
+	_onCloseClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
+      :host {
+        --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
+        --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
+        --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
+        --selected-background: var(--ixfx-tab-selected-background, var(--surface-5));
+        --tab-padding: var(--ixfx-tab-padding, var(--space-s));
+        display: inline-flex;
+        min-width: 0;
+        user-select: none;
+        box-sizing: border-box;
+        font-size: var(--text-xs);
+        /* No explicit height: items stretch (align-self: stretch via the
+           list's flex container) so every tab in a strip shares one height
+           even when toolbars give some items taller content. */
+      }
+
+      :host > div {
+        display: flex;
+        align-items: center;
+        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
+        min-width: 0;
+        width: 100%;
+        font-weight: 500;
+        border: var(--selected-tab-border-width) solid transparent;
+        gap: var(--space-s);
+
+      }
+
+      :host([selected]) > div {
+        color: var(--selected-tab-color);
+        border-top-color: var(--indicator-color-top, transparent);
+        border-bottom-color: var(--indicator-color-bottom, transparent);
+        border-left-color: var(--indicator-color-left, transparent);
+        border-right-color: var(--indicator-color-right, transparent);
+        background: var(--selected-background);
+        font-weight: var(--selected-tab-weight);
+        border-radius:var(--radius-m);
+      }
+
+      .label {
+        overflow: var(--allow-overflow, hidden);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      ixfx-icon {
+        flex-shrink: 0;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .toolbar {
+        /* Always laid out (display: flex) so the tab's width doesn't shift when
+           the toolbar appears on selection. visibility: hidden keeps the
+           toolbar from receiving pointer events or painting, while preserving
+           the space its contents take up. */
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        visibility: hidden;
+      }
+
+      :host([selected]) .toolbar {
+        visibility: visible;
+      }
+
+      slot[name="toolbar"] {
+        display: contents;
+      }
+
+      /* Slotted buttons inherit these through the shadow boundary; keeps a
+         toolbar button from inflating the strip height. */
+      .toolbar ::slotted(ixfx-button) {
+        --ixfx-button-padding-block: var(--space-xs);
+      }
+
+      .close-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--space-xs);
+        cursor: pointer;
+        color: inherit;
+        border-radius: var(--radius-s);
+        opacity: var(--prominence-idle-opacity);
+        transition: opacity var(--transition), background var(--transition);
+      }
+
+      .close-btn:hover {
+        background: var(--surface-5);
+        opacity: var(--prominence-tickled-opacity);
+      }
+
+      .close-btn:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+
+      :host([selected]) .close-btn,
+      :host(:hover) .close-btn {
+        opacity: var(--prominence-tickled-opacity);
+      }
+    `
+		];
+	}
+};
+__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListItemElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], TabListItemElement.prototype, "iconName", void 0);
+__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
+__decorate([property({
+	type: String,
+	attribute: `command-active`
+})], TabListItemElement.prototype, "commandActive", void 0);
+__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
+__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
+//#endregion
+//#region src/dock/dock-panel.ts
+/** Pointer movement threshold before a titlebar press becomes a dock drag. */
+const DRAG_THRESHOLD_PX$1 = 5;
+let DockPanelElement = class DockPanelElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.panelId = ``;
+		this.title = ``;
+		this.iconName = ``;
+		this.closable = false;
+		this.collapsible = false;
+		this.accepts = ``;
+		this.presentation = `solo`;
+		this._collapsed = false;
+		this._dragPointerId = null;
+		this._dragStartX = 0;
+		this._dragStartY = 0;
+		this._dragStarted = false;
+		this._onPointerDown = (event) => {
+			if (event.button !== 0) return;
+			if (this.presentation === `tabbed`) return;
+			if (!this._isDragHandle(event)) return;
+			this._dragPointerId = event.pointerId;
+			this._dragStartX = event.clientX;
+			this._dragStartY = event.clientY;
+			this._dragStarted = false;
+			window.addEventListener(`pointermove`, this._onPointerMove);
+			window.addEventListener(`pointerup`, this._onPointerUp);
+			window.addEventListener(`pointercancel`, this._onPointerUp);
+		};
+		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$1) return;
+				this._dragStarted = true;
+				const pointerId = this._dragPointerId;
+				this._teardownDragListeners();
+				this._dispatchDragStart(pointerId, event.clientX, event.clientY);
+			}
+		};
+		this._onPointerUp = (event) => {
+			if (this._dragPointerId === null || event.pointerId !== this._dragPointerId) return;
+			this._teardownDragListeners();
+		};
+		this._onTitlebarToggle = (event) => {
+			event.stopPropagation();
+			this._collapsed = event.detail.collapsed;
+			this.dispatchEvent(new CustomEvent(`toggle`, {
+				detail: event.detail,
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onTitlebarClose = (event) => {
+			event.stopPropagation();
+			this.dispatchEvent(new CustomEvent(`close`, {
+				bubbles: true,
+				composed: true
+			}));
+			this.remove();
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`pointerdown`, this._onPointerDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._teardownDragListeners();
+		this.removeEventListener(`pointerdown`, this._onPointerDown);
+	}
+	_teardownDragListeners() {
+		this._dragPointerId = null;
+		this._dragStarted = false;
+		window.removeEventListener(`pointermove`, this._onPointerMove);
+		window.removeEventListener(`pointerup`, this._onPointerUp);
+		window.removeEventListener(`pointercancel`, this._onPointerUp);
+	}
+	/** Clicks that begin on the close / caret buttons or the toolbar are not drags. */
+	_isDragHandle(event) {
+		for (const node of event.composedPath()) {
+			if (!(node instanceof HTMLElement)) continue;
+			if (node.classList.contains(`close-btn`) || node.classList.contains(`caret-btn`) || node.classList.contains(`toolbar`)) return false;
+		}
+		return true;
+	}
+	_dispatchDragStart(pointerId, clientX, clientY) {
+		if (!this.panelId) return;
+		this.dispatchEvent(new CustomEvent(`dock-panel-drag-start`, {
+			detail: {
+				panelId: this.panelId,
+				pointerId,
+				clientX,
+				clientY
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const tabbed = this.presentation === `tabbed`;
+		const collapsed = !tabbed && this._collapsed;
+		return html`
+      ${tabbed ? nothing : html`
+        <ixfx-titlebar
+          .title=${this.title}
+          .iconName=${this.iconName}
+          .closable=${this.closable}
+          .collapsible=${this.collapsible}
+          .collapsed=${collapsed}
+          .toggleInteraction=${this.collapsible ? `implicit` : `disabled`}
+          @toggle=${this._onTitlebarToggle}
+          @close=${this._onTitlebarClose}
+        >
+          <slot name="toolbar" slot="toolbar"></slot>
+        </ixfx-titlebar>
+        `}
+      <div class="content" ?collapsed=${collapsed}>
+        <slot></slot>
+      </div>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+      }
+
+      ixfx-titlebar {
+        flex-shrink: 0;
+      }
+
+      .content {
+        flex: 1;
+        min-height: 0;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .content[collapsed] {
+        display: none;
+      }
+    `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `panel-id`,
+	reflect: true
+})], DockPanelElement.prototype, "panelId", void 0);
+__decorate([property({ type: String })], DockPanelElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], DockPanelElement.prototype, "iconName", void 0);
+__decorate([property({ type: Boolean })], DockPanelElement.prototype, "closable", void 0);
+__decorate([property({ type: Boolean })], DockPanelElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: String,
+	attribute: `accepts`
+})], DockPanelElement.prototype, "accepts", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DockPanelElement.prototype, "presentation", void 0);
+__decorate([state()], DockPanelElement.prototype, "_collapsed", void 0);
+DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelElement);
+//#endregion
+//#region src/dock/dock-host.ts
+/** 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 = 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). */
+const JUNCTION_MERGE_PX = 8;
+let DockHostElement = class DockHostElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.layout = null;
+		this.accepts = `tabs horizontal vertical`;
+		this._model = createStack([]);
+		this._pool = [];
+		this._dropZone = null;
+		this._dragActive = false;
+		this._junctions = [];
+		this._toolbarsOut = /* @__PURE__ */ new Map();
+		this._tabDragPending = null;
+		this._junctionsKey = ``;
+		this._junctionsRaf = null;
+		this._hostResizeObserver = null;
+		this._onDragStart = (event) => {
+			const { panelId, pointerId, clientX, clientY } = event.detail;
+			startDrag(panelId, this, pointerId, clientX, clientY);
+		};
+		this._onPoolSlotChange = () => {
+			this._syncPool();
+		};
+		this._onJunctionPointerDown = (event, junction) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			let started = false;
+			for (const target of junction.targets) {
+				if (!target.split.isConnected) continue;
+				if (target.split.beginGutterDrag(target.gutterIndex, event.pointerId, event.clientX, event.clientY)) started = true;
+			}
+			if (!started) return;
+			this._suppressNextClick();
+			const follow = () => this._scheduleJunctions();
+			const stop = () => {
+				window.removeEventListener(`pointermove`, follow);
+				window.removeEventListener(`pointerup`, stop);
+				window.removeEventListener(`pointercancel`, stop);
+			};
+			window.addEventListener(`pointermove`, follow);
+			window.addEventListener(`pointerup`, stop);
+			window.addEventListener(`pointercancel`, stop);
+		};
+		this._onSplitWeightsChanged = () => {
+			this._foldLiveWeights();
+			this._scheduleJunctions();
+		};
+		this._onSplitCollapsed = (event, collapsed) => {
+			const detail = event.detail;
+			if (!detail?.id) return;
+			const pathStr = this.shadowRoot?.getElementById(detail.id)?.getAttribute(`data-dock-path`);
+			if (pathStr === null || pathStr === void 0) return;
+			const node = findNode(this._model, parsePath(pathStr));
+			if (node === null || !isStack(node)) return;
+			if (collapsed) node.collapsed = true;
+			else delete node.collapsed;
+		};
+		this._onSplitClose = (event) => {
+			event.preventDefault();
+			const detail = event.detail;
+			if (!detail?.id) return;
+			const pathStr = this.shadowRoot?.getElementById(detail.id)?.getAttribute(`data-dock-path`);
+			if (pathStr === null || pathStr === void 0) return;
+			const path = parsePath(pathStr);
+			const paths = collectStackPaths(this._model).filter((p) => p.join(`-`) !== path.join(`-`));
+			const fallbackNode = paths.length > 0 ? findNode(this._model, paths[0]) : null;
+			const fallback = fallbackNode !== null && isStack(fallbackNode) ? fallbackNode : void 0;
+			this._returnAllToolbars();
+			extractStack(this._model, path, fallback);
+			this._commit();
+		};
+		this._onTabChange = (event, path) => {
+			const panelId = event.detail.selected;
+			const stack = findNode(this._model, path);
+			if (stack === null || !isStack(stack)) return;
+			if (!setActive(stack, panelId)) return;
+			this.requestUpdate();
+			this.dispatchEvent(new CustomEvent(`dock-panel-activated`, {
+				detail: { panelId },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onStripPointerDown = (event) => {
+			if (event.button !== 0) return;
+			const path = event.composedPath();
+			for (const node of path) {
+				if (!(node instanceof HTMLElement)) continue;
+				if (node.classList.contains(`list-toolbar`) || node.classList.contains(`close-btn`)) return;
+			}
+			const item = path.find((node) => node instanceof HTMLElement && node.tagName === `IXFX-TAB-LIST-ITEM`) ?? null;
+			if (item === null || !item.id) return;
+			this._tabDragPending = {
+				panelId: item.id,
+				pointerId: event.pointerId,
+				startX: event.clientX,
+				startY: event.clientY
+			};
+			window.addEventListener(`pointermove`, this._onTabDragMove);
+			window.addEventListener(`pointerup`, this._onTabDragUp);
+			window.addEventListener(`pointercancel`, this._onTabDragUp);
+		};
+		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) return;
+			this._tabDragPending = null;
+			this._teardownTabDragListeners();
+			this._suppressNextClick();
+			this.dispatchEvent(new CustomEvent(`dock-panel-drag-start`, {
+				detail: {
+					panelId: pending.panelId,
+					pointerId: pending.pointerId,
+					clientX: event.clientX,
+					clientY: event.clientY
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onTabDragUp = (event) => {
+			if (this._tabDragPending === null || event.pointerId !== this._tabDragPending.pointerId) return;
+			this._tabDragPending = null;
+			this._teardownTabDragListeners();
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._buildInitialModel();
+		registerDockHost(this);
+		this.addEventListener(`dock-panel-drag-start`, this._onDragStart);
+		this._hostResizeObserver = new ResizeObserver(() => this._scheduleJunctions());
+		this._hostResizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		unregisterDockHost(this);
+		this.removeEventListener(`dock-panel-drag-start`, this._onDragStart);
+		this._hostResizeObserver?.disconnect();
+		this._hostResizeObserver = null;
+		if (this._junctionsRaf !== null) {
+			cancelAnimationFrame(this._junctionsRaf);
+			this._junctionsRaf = null;
+		}
+		this._junctions = [];
+		this._junctionsKey = ``;
+		this._returnAllToolbars();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`layout`) && this.layout !== null) {
+			const parsed = parseLayout(this.layout);
+			if (parsed) {
+				this._model = parsed.root;
+				this._mergePoolIntoModel();
+			}
+		}
+	}
+	updated(changed) {
+		super.updated(changed);
+		this._syncSlots();
+		this._syncToolbars();
+		this._scheduleJunctions();
+	}
+	_buildInitialModel() {
+		if (this.layout !== null) {
+			const parsed = parseLayout(this.layout);
+			if (parsed) {
+				this._model = parsed.root;
+				this._mergePoolIntoModel();
+				return;
+			}
+		}
+		this._model = createStack([]);
+		this._mergePoolIntoModel();
+	}
+	/** Ensure every pooled panel element appears in the model (appended to the first stack). */
+	_mergePoolIntoModel() {
+		const known = new Set(collectPanelIds(this._model));
+		let changed = false;
+		for (const el of this._scanPanels()) if (!known.has(el.panelId)) {
+			this._appendPanelToFirstStack(el.panelId);
+			known.add(el.panelId);
+			changed = true;
+		}
+		if (changed) normalize(this._model);
+	}
+	_scanPanels() {
+		return Array.from(this.children).filter((el) => el instanceof HTMLElement && el.tagName === `IXFX-DOCK-PANEL` && Boolean(el.panelId));
+	}
+	_findPanelEl(panelId) {
+		return this._pool.find((p) => p.panelId === panelId) ?? this._scanPanels().find((p) => p.panelId === panelId);
+	}
+	_firstStack() {
+		const paths = collectStackPaths(this._model);
+		const node = paths.length > 0 ? findNode(this._model, paths[0]) : null;
+		if (node !== null && isStack(node)) return node;
+		const fresh = createStack([]);
+		wrapRoot(this._model, `row`, fresh, `after`);
+		normalize(this._model);
+		return fresh;
+	}
+	_appendPanelToFirstStack(panelId) {
+		addPanelToStack(this._model.kind === `stack` ? this._model : this._firstStack(), panelId);
+	}
+	_syncPool() {
+		const current = this._scanPanels();
+		const currentIds = new Set(current.map((p) => p.panelId));
+		let structuralChange = false;
+		for (const el of [...this._pool]) if (!currentIds.has(el.panelId)) {
+			this._toolbarsOut.delete(el.panelId);
+			this._removeFromModel(el.panelId);
+			this.dispatchEvent(new CustomEvent(`dock-panel-removed`, {
+				detail: { panelId: el.panelId },
+				bubbles: true,
+				composed: true
+			}));
+			structuralChange = true;
+		}
+		for (const el of current) if (!collectPanelIds(this._model).includes(el.panelId)) {
+			this._appendPanelToFirstStack(el.panelId);
+			normalize(this._model);
+			this.dispatchEvent(new CustomEvent(`dock-panel-added`, {
+				detail: { panelId: el.panelId },
+				bubbles: true,
+				composed: true
+			}));
+			structuralChange = true;
+		}
+		this._pool = current;
+		this.requestUpdate();
+		if (structuralChange) this._emitChange();
+	}
+	/** Serialize the current layout, folding live split weights from the DOM. */
+	saveLayout() {
+		this._foldLiveWeights();
+		return serializeLayout(this._model);
+	}
+	loadLayout(layout) {
+		this._returnAllToolbars();
+		this._model = normalize(cloneNode(layout.root));
+		this._mergePoolIntoModel();
+		this.requestUpdate();
+		this._emitChange();
+	}
+	addPanel(panel, target) {
+		let el;
+		if (panel instanceof HTMLElement) el = panel;
+		else {
+			el = document.createElement(`ixfx-dock-panel`);
+			el.panelId = panel.panelId;
+			if (panel.title !== void 0) el.title = panel.title;
+			if (panel.iconName !== void 0) el.iconName = panel.iconName;
+			if (panel.closable !== void 0) el.closable = panel.closable;
+			if (panel.collapsible !== void 0) el.collapsible = panel.collapsible;
+		}
+		if (el.parentElement !== this) this.appendChild(el);
+		if (!this._pool.some((p) => p.panelId === el.panelId)) this._pool = [...this._pool, el];
+		this._returnAllToolbars();
+		const op = target?.op ?? `tabs`;
+		if (target?.stack) {
+			const stackPath = findStackOf(this._model, target.stack);
+			if (stackPath !== null) {
+				if (op === `tabs`) {
+					const stack = findNode(this._model, stackPath);
+					if (stack !== null && isStack(stack)) addPanelToStack(stack, el.panelId, target.index);
+				} else insertBeside(this._model, stackPath, opToDirection(op), createStack([el.panelId]), `after`);
+			}
+		} else this._appendPanelToFirstStack(el.panelId);
+		normalize(this._model);
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`dock-panel-added`, {
+			detail: { panelId: el.panelId },
+			bubbles: true,
+			composed: true
+		}));
+		this._emitChange();
+	}
+	removePanel(panelId) {
+		if (!collectPanelIds(this._model).includes(panelId)) return false;
+		this._returnAllToolbars();
+		this._removeFromModel(panelId);
+		this._pool = this._pool.filter((p) => p.panelId !== panelId);
+		this._toolbarsOut.delete(panelId);
+		this._scanPanels().find((p) => p.panelId === panelId)?.remove();
+		normalize(this._model);
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`dock-panel-removed`, {
+			detail: { panelId },
+			bubbles: true,
+			composed: true
+		}));
+		this._emitChange();
+		return true;
+	}
+	activatePanel(panelId) {
+		const stackPath = findStackOf(this._model, panelId);
+		if (stackPath === null) return false;
+		const stack = findNode(this._model, stackPath);
+		if (stack === null || !isStack(stack)) return false;
+		if (!setActive(stack, panelId)) return false;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`dock-panel-activated`, {
+			detail: { panelId },
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	getPanelIds() {
+		return collectPanelIds(this._model);
+	}
+	/**
+	* Capture a structured-clone-safe {@link DockPanelSnapshot} of a panel
+	* (identity, chrome attributes, and a best-effort `innerHTML`). Returns
+	* null when no such panel element is known to this host.
+	*/
+	getPanelSnapshot(panelId) {
+		const el = this._findPanelEl(panelId);
+		if (el === void 0) return null;
+		return {
+			panelId: el.panelId,
+			title: el.title,
+			iconName: el.iconName,
+			closable: el.closable,
+			collapsible: el.collapsible,
+			accepts: el.accepts,
+			contentHTML: el.innerHTML
+		};
+	}
+	/**
+	* {@link getPanelSnapshot} + {@link removePanel} in one step: take the
+	* snapshot, then drop the panel (and its element) from this host. Call this
+	* from a `dock-panel-tear-out` handler once the receiving window has
+	* recreated the panel.
+	*/
+	detachPanel(panelId) {
+		const snapshot = this.getPanelSnapshot(panelId);
+		if (snapshot === null) return null;
+		this.removePanel(panelId);
+		return snapshot;
+	}
+	/**
+	* Hit-test viewport coordinates against this host and return a plain,
+	* serializable {@link DockDropTarget} (no element references) — or null when
+	* the point is outside the host or the resulting zone is disallowed by
+	* `accepts` / `canAccept`. Pure query: no model mutation, no overlay.
+	*
+	* `panelId` is passed to `canAccept`; use any stable id for an external
+	* panel (defaults to `"__external__"`).
+	*/
+	queryDropTarget(clientX, clientY, panelId = `__external__`) {
+		const zone = this.computeDropZone(clientX, clientY, panelId);
+		return zone === null ? null : zoneToTarget(zone);
+	}
+	/**
+	* Like {@link queryDropTarget}, but also shows the drop overlay so an
+	* external (cross-window) drag gets the same visual feedback as an in-page
+	* one. Call on every pointer update from the outer coordinator, then
+	* {@link endExternalDrop} when the drag leaves or ends.
+	*/
+	previewExternalDrop(clientX, clientY, panelId = `__external__`) {
+		this.setDragActive(true);
+		const zone = this.computeDropZone(clientX, clientY, panelId);
+		this.setDropZone(zone);
+		return zone === null ? null : zoneToTarget(zone);
+	}
+	/** Clear any overlay left by {@link previewExternalDrop}. */
+	endExternalDrop() {
+		this.setDropZone(null);
+		this.setDragActive(false);
+	}
+	/**
+	* Recreate a panel from a {@link DockPanelSnapshot} (or a bare
+	* {@link DockPanelInit}) and dock it. With `at` viewport coordinates the
+	* panel lands where a drop there would put it (respecting `accepts` /
+	* `canAccept`); without them, or when the point misses the host, it goes
+	* into the first stack. Returns the created element, or null when a panel
+	* with that id is already docked here.
+	*/
+	acceptExternalPanel(snapshot, at) {
+		if (collectPanelIds(this._model).includes(snapshot.panelId)) return null;
+		const el = document.createElement(`ixfx-dock-panel`);
+		el.panelId = snapshot.panelId;
+		if (snapshot.title !== void 0) el.title = snapshot.title;
+		if (snapshot.iconName !== void 0) el.iconName = snapshot.iconName;
+		if (snapshot.closable !== void 0) el.closable = snapshot.closable;
+		if (snapshot.collapsible !== void 0) el.collapsible = snapshot.collapsible;
+		if (`accepts` in snapshot && snapshot.accepts) el.setAttribute(`accepts`, snapshot.accepts);
+		if (`contentHTML` in snapshot && snapshot.contentHTML) el.innerHTML = snapshot.contentHTML;
+		this._returnAllToolbars();
+		this.appendChild(el);
+		this._pool = [...this._pool, el];
+		this._appendPanelToFirstStack(el.panelId);
+		normalize(this._model);
+		this.endExternalDrop();
+		const zone = at ? this.computeDropZone(at.clientX, at.clientY, el.panelId) : null;
+		if (zone !== null) this._applyZone(el.panelId, zone);
+		normalize(this._model);
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`dock-panel-added`, {
+			detail: { panelId: el.panelId },
+			bubbles: true,
+			composed: true
+		}));
+		this._emitChange();
+		return el;
+	}
+	/**
+	* Hit-test a pointer position against this host's leaves and edges. Returns
+	* a zone with rects relative to the host, or null when the pointer is
+	* outside the host or the candidate zone is disallowed.
+	*/
+	computeDropZone(clientX, clientY, panelId) {
+		const hostRect = this.getBoundingClientRect();
+		if (clientX < hostRect.left || clientX > hostRect.right || clientY < hostRect.top || clientY > hostRect.bottom) return null;
+		const rel = (r) => ({
+			x: r.left - hostRect.left,
+			y: r.top - hostRect.top,
+			w: r.width,
+			h: r.height
+		});
+		for (const path of collectStackPaths(this._model)) {
+			const leaf = this.shadowRoot?.querySelector(`[data-dock-path="${path.join(`-`)}"]`);
+			if (!leaf) continue;
+			const leafRect = leaf.getBoundingClientRect();
+			if (clientX < leafRect.left || clientX > leafRect.right || clientY < leafRect.top || clientY > leafRect.bottom) continue;
+			const stack = findNode(this._model, path);
+			if (stack === null || !isStack(stack)) continue;
+			const strip = leaf.querySelector(`ixfx-tab-list`);
+			if (strip !== null) {
+				const stripRect = strip.getBoundingClientRect();
+				if (clientX >= stripRect.left && clientX <= stripRect.right && clientY >= stripRect.top && clientY <= stripRect.bottom) {
+					const gapIndex = computeStripGapIndex(strip, clientX, clientY);
+					const zone = {
+						host: this,
+						operation: `tabs`,
+						targetPath: path,
+						side: `after`,
+						gapIndex,
+						rect: rel(leafRect),
+						caretRect: this._stripCaretRect(strip, gapIndex, hostRect)
+					};
+					return this._zoneAllowed(panelId, zone) ? zone : null;
+				}
+			}
+			const relX = (clientX - leafRect.left) / Math.max(leafRect.width, 1);
+			const relY = (clientY - leafRect.top) / Math.max(leafRect.height, 1);
+			if (relX >= BAND && relX <= .75 && relY >= BAND && relY <= .75) {
+				const zone = {
+					host: this,
+					operation: `tabs`,
+					targetPath: path,
+					side: `after`,
+					gapIndex: stack.panels.length,
+					rect: rel(leafRect)
+				};
+				return this._zoneAllowed(panelId, zone) ? zone : null;
+			}
+			const r = rel(leafRect);
+			let operation;
+			let side;
+			let zoneRect;
+			if (relX < BAND) {
+				operation = `split-vertical`;
+				side = `before`;
+				zoneRect = {
+					...r,
+					w: r.w / 2
+				};
+			} else if (relX > .75) {
+				operation = `split-vertical`;
+				side = `after`;
+				zoneRect = {
+					x: r.x + r.w / 2,
+					y: r.y,
+					w: r.w / 2,
+					h: r.h
+				};
+			} else if (relY < BAND) {
+				operation = `split-horizontal`;
+				side = `before`;
+				zoneRect = {
+					...r,
+					h: r.h / 2
+				};
+			} else {
+				operation = `split-horizontal`;
+				side = `after`;
+				zoneRect = {
+					x: r.x,
+					y: r.y + r.h / 2,
+					w: r.w,
+					h: r.h / 2
+				};
+			}
+			const zone = {
+				host: this,
+				operation,
+				targetPath: path,
+				side,
+				rect: zoneRect
+			};
+			return this._zoneAllowed(panelId, zone) ? zone : null;
+		}
+		const fromLeft = clientX - hostRect.left;
+		const fromRight = hostRect.right - clientX;
+		const fromTop = clientY - hostRect.top;
+		const fromBottom = hostRect.bottom - clientY;
+		const min = Math.min(fromLeft, fromRight, fromTop, fromBottom);
+		const full = {
+			x: 0,
+			y: 0,
+			w: hostRect.width,
+			h: hostRect.height
+		};
+		let operation;
+		let side;
+		let zoneRect;
+		if (min === fromLeft) {
+			operation = `split-vertical`;
+			side = `before`;
+			zoneRect = {
+				...full,
+				w: full.w / 2
+			};
+		} else if (min === fromRight) {
+			operation = `split-vertical`;
+			side = `after`;
+			zoneRect = {
+				x: full.x + full.w / 2,
+				y: full.y,
+				w: full.w / 2,
+				h: full.h
+			};
+		} else if (min === fromTop) {
+			operation = `split-horizontal`;
+			side = `before`;
+			zoneRect = {
+				...full,
+				h: full.h / 2
+			};
+		} else {
+			operation = `split-horizontal`;
+			side = `after`;
+			zoneRect = {
+				x: full.x,
+				y: full.y + full.h / 2,
+				w: full.w,
+				h: full.h / 2
+			};
+		}
+		const zone = {
+			host: this,
+			operation,
+			targetPath: [],
+			side,
+			rect: zoneRect
+		};
+		return this._zoneAllowed(panelId, zone) ? zone : null;
+	}
+	_zoneAllowed(panelId, zone) {
+		if (!tokenAllows(this.accepts, operationToToken(zone.operation))) return false;
+		const stack = findNode(this._model, zone.targetPath);
+		if (stack !== null && isStack(stack) && stack.panels.length === 1) {
+			const target = this._findPanelEl(stack.panels[0]);
+			if (target && !panelAllows(target.accepts, operationToToken(zone.operation))) return false;
+		}
+		if (this.canAccept && !this.canAccept(panelId, zone.operation)) return false;
+		return true;
+	}
+	/**
+	* Apply a drop. `sourceHost` differs from `this` when the drag crossed
+	* hosts; the panel element is adopted into this host first.
+	*/
+	handleDrop(panelId, zone, sourceHost) {
+		if (sourceHost !== void 0 && sourceHost !== this) sourceHost.releasePanel(panelId, this);
+		if (!collectPanelIds(this._model).includes(panelId)) {
+			if (!this._findPanelEl(panelId)) return;
+			this._appendPanelToFirstStack(panelId);
+			normalize(this._model);
+		}
+		this._applyZone(panelId, zone);
+		this._commit();
+	}
+	/**
+	* Move `panelId` (already present somewhere in the model) to the position
+	* described by `zone`. Shared by in-page drops and external panel adoption.
+	*/
+	_applyZone(panelId, zone) {
+		const sourcePath = findStackOf(this._model, panelId);
+		if (sourcePath !== null) {
+			const source = findNode(this._model, sourcePath);
+			if (source !== null && isStack(source)) removePanelFromStack(source, panelId);
+		}
+		if (zone.operation === `tabs`) {
+			const target = findNode(this._model, zone.targetPath);
+			if (target !== null && isStack(target)) addPanelToStack(target, panelId, zone.gapIndex);
+		} else insertBeside(this._model, zone.targetPath, opToDirection(zone.operation), createStack([panelId]), zone.side);
+	}
+	/**
+	* Move a panel element out of this host into `target`, dropping it from
+	* this host's model. Used for cross-host drags.
+	*/
+	releasePanel(panelId, target) {
+		this._returnAllToolbars();
+		const el = this._pool.find((p) => p.panelId === panelId);
+		const stackPath = findStackOf(this._model, panelId);
+		if (stackPath !== null) {
+			const stack = findNode(this._model, stackPath);
+			if (stack !== null && isStack(stack)) removePanelFromStack(stack, panelId);
+		}
+		normalize(this._model);
+		this._pool = this._pool.filter((p) => p !== el);
+		if (el !== void 0) target.adoptPanelElement(el);
+		this.requestUpdate();
+	}
+	/** Adopt a panel element from another host (the one sanctioned reparent). */
+	adoptPanelElement(el) {
+		this.appendChild(el);
+		if (!this._pool.some((p) => p.panelId === el.panelId)) this._pool = [...this._pool, el];
+		this._appendPanelToFirstStack(el.panelId);
+		normalize(this._model);
+		this.dispatchEvent(new CustomEvent(`dock-panel-added`, {
+			detail: { panelId: el.panelId },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	setDragActive(active) {
+		if (this._dragActive !== active) {
+			this._dragActive = active;
+			this.requestUpdate();
+		}
+	}
+	setDropZone(zone) {
+		if (this._dropZone !== zone) {
+			this._dropZone = zone;
+			this.requestUpdate();
+		}
+	}
+	_scheduleJunctions() {
+		if (this._junctionsRaf !== null) return;
+		this._junctionsRaf = requestAnimationFrame(() => {
+			this._junctionsRaf = null;
+			this._computeJunctions();
+		});
+	}
+	/**
+	* Find points where a parent split's gutter line meets a nested split's
+	* gutter (T and + crossings). Each junction handle starts both gutter drags
+	* at once, like a corner resize in VS Code.
+	*/
+	_computeJunctions() {
+		const shadow = this.shadowRoot;
+		if (shadow === null) return;
+		const hostRect = this.getBoundingClientRect();
+		const found = [];
+		for (const child of shadow.querySelectorAll(`ixfx-split-layout`)) {
+			const parent = child.parentElement?.closest(`ixfx-split-layout`) ?? null;
+			if (parent === null) continue;
+			if (typeof child.getGutterRects !== `function` || typeof parent.getGutterRects !== `function`) continue;
+			const childRect = child.getBoundingClientRect();
+			for (const [pi, pg] of parent.getGutterRects().entries()) for (const [ci, cg] of child.getGutterRects().entries()) {
+				const pgVertical = pg.width <= pg.height;
+				if (pgVertical === cg.width <= cg.height) continue;
+				let x;
+				let y;
+				if (pgVertical) {
+					x = pg.left + pg.width / 2;
+					y = cg.top + cg.height / 2;
+					if (Math.abs(x - childRect.left) > JUNCTION_TOL_PX && Math.abs(x - childRect.right) > JUNCTION_TOL_PX) continue;
+					if (y < pg.top || y > pg.bottom) continue;
+				} else {
+					y = pg.top + pg.height / 2;
+					x = cg.left + cg.width / 2;
+					if (Math.abs(y - childRect.top) > JUNCTION_TOL_PX && Math.abs(y - childRect.bottom) > JUNCTION_TOL_PX) continue;
+					if (x < pg.left || x > pg.right) continue;
+				}
+				found.push({
+					x: x - hostRect.left,
+					y: y - hostRect.top,
+					targets: [{
+						split: parent,
+						gutterIndex: pi
+					}, {
+						split: child,
+						gutterIndex: ci
+					}]
+				});
+			}
+		}
+		const merged = [];
+		for (const j of found) {
+			const near = merged.find((m) => Math.abs(m.x - j.x) <= JUNCTION_MERGE_PX && Math.abs(m.y - j.y) <= JUNCTION_MERGE_PX);
+			if (near === void 0) {
+				merged.push(j);
+				continue;
+			}
+			for (const t of j.targets) if (!near.targets.some((o) => o.split === t.split && o.gutterIndex === t.gutterIndex)) near.targets.push(t);
+		}
+		const key = merged.map((j) => `${Math.round(j.x)},${Math.round(j.y)}:${j.targets.map((t) => `${t.split.getAttribute(`data-dock-path`) ?? ``}#${t.gutterIndex}`).join(`|`)}`).join(`;`);
+		if (key === this._junctionsKey) return;
+		this._junctionsKey = key;
+		this._junctions = merged;
+	}
+	/** Fold live weights from each rendered `ixfx-split-layout` into the model. */
+	_foldLiveWeights() {
+		const splits = this.shadowRoot?.querySelectorAll(`ixfx-split-layout[data-dock-path]`);
+		if (splits === void 0) return;
+		for (const el of splits) {
+			const pathStr = el.getAttribute(`data-dock-path`);
+			if (pathStr === null) continue;
+			const node = findNode(this._model, parsePath(pathStr));
+			if (node === null || !isSplit(node)) continue;
+			const live = Object.values(el.getSizes());
+			if (live.length === node.children.length && !weightsEqual(live, node.sizes)) node.sizes = live;
+		}
+	}
+	_teardownTabDragListeners() {
+		window.removeEventListener(`pointermove`, this._onTabDragMove);
+		window.removeEventListener(`pointerup`, this._onTabDragUp);
+		window.removeEventListener(`pointercancel`, this._onTabDragUp);
+	}
+	/** After a dock drag from a tab/titlebar, swallow the trailing click so it cannot re-select or toggle. */
+	_suppressNextClick() {
+		const swallow = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			window.removeEventListener(`click`, swallow, true);
+		};
+		window.addEventListener(`click`, swallow, true);
+	}
+	_splitStack(path, op) {
+		const stack = findNode(this._model, path);
+		if (stack === null || !isStack(stack) || stack.panels.length === 0) return;
+		const activeId = stack.active;
+		this._returnAllToolbars();
+		removePanelFromStack(stack, activeId);
+		normalize(this._model);
+		insertBeside(this._model, path, opToDirection(op), createStack([activeId]), `after`);
+		this._commit();
+	}
+	_removeFromModel(panelId) {
+		const stackPath = findStackOf(this._model, panelId);
+		if (stackPath === null) return;
+		const stack = findNode(this._model, stackPath);
+		if (stack !== null && isStack(stack)) removePanelFromStack(stack, panelId);
+		normalize(this._model);
+	}
+	/** Normalize, re-render, and announce the structural change. */
+	_commit() {
+		normalize(this._model);
+		this.requestUpdate();
+		this._emitChange();
+	}
+	_syncSlots() {
+		const inModel = /* @__PURE__ */ new Set();
+		const visit = (node) => {
+			if (isStack(node)) for (const id of node.panels) {
+				inModel.add(id);
+				const el = this._findPanelEl(id);
+				if (el === void 0) continue;
+				el.setAttribute(`slot`, `dock-panel-${id}`);
+				el.presentation = `tabbed`;
+			}
+			else node.children.forEach(visit);
+		};
+		visit(this._model);
+		for (const el of this._pool) if (!inModel.has(el.panelId)) {
+			el.setAttribute(`slot`, ``);
+			el.presentation = `solo`;
+		}
+	}
+	/**
+	* Per-panel toolbar routing: docked panels render content-only, so the
+	* active panel's toolbar nodes live in its generated tab item (shown
+	* right-aligned while active). Node moves preserve element state. Panels
+	* outside the model keep their toolbar in their own (solo) chrome.
+	*/
+	_syncToolbars() {
+		const wanted = /* @__PURE__ */ new Map();
+		const visit = (node) => {
+			if (isStack(node)) {
+				if (node.panels.length > 0 && node.active) {
+					const el = this._findPanelEl(node.active);
+					if (el !== void 0) wanted.set(node.active, toolbarNodesOf(el));
+				}
+			} else node.children.forEach(visit);
+		};
+		visit(this._model);
+		for (const [panelId, nodes] of this._toolbarsOut) if (!wanted.has(panelId)) this._returnToolbar(panelId, nodes);
+		for (const [panelId, nodes] of wanted) {
+			if (this._toolbarsOut.has(panelId) || nodes.length === 0) continue;
+			const item = this.shadowRoot?.getElementById(panelId);
+			if (item === null || item === void 0) continue;
+			for (const node of nodes) item.appendChild(node);
+			this._toolbarsOut.set(panelId, nodes);
+		}
+	}
+	_returnToolbar(panelId, nodes) {
+		const el = this._findPanelEl(panelId);
+		if (el !== void 0) {
+			for (const node of nodes) if (node.isConnected) el.appendChild(node);
+		}
+		this._toolbarsOut.delete(panelId);
+	}
+	_returnAllToolbars() {
+		for (const [panelId, nodes] of [...this._toolbarsOut]) this._returnToolbar(panelId, nodes);
+	}
+	_emitChange() {
+		this.dispatchEvent(new CustomEvent(`dock-change`, {
+			detail: { layout: this.saveLayout() },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div class="root">
+        ${this._renderNode(this._model, [])}
+      </div>
+      <div class="overlay" ?hidden=${!this._dragActive}>
+        ${this._dropZone === null ? nothing : html`
+          <div class="zone-rect" style=${rectStyle(this._dropZone.rect)}></div>
+          ${this._dropZone.caretRect === void 0 ? nothing : html`<div class="zone-caret" style=${rectStyle(this._dropZone.caretRect)}></div>`}
+        `}
+      </div>
+      <div class="junctions" ?hidden=${this._dragActive}>
+        ${this._junctions.map((junction) => html`
+        <div
+          class="junction-handle"
+          style=${`left:${junction.x}px; top:${junction.y}px;`}
+          role="separator"
+          aria-label="Resize adjacent panels"
+          @pointerdown=${(e) => this._onJunctionPointerDown(e, junction)}
+        ></div>
+      `)}
+      </div>
+      <slot @slotchange=${this._onPoolSlotChange}></slot>
+    `;
+	}
+	_renderNode(node, path, size) {
+		if (isStack(node)) return this._renderLeaf(node, path, size);
+		return this._renderSplit(node, path, size);
+	}
+	_renderSplit(node, path, size) {
+		const pathStr = path.join(`-`);
+		return html`
+      <ixfx-split-layout
+        class="split"
+        direction=${node.direction}
+        size=${size === void 0 ? nothing : String(size)}
+        style=${`--split-gutter-size: var(--dock-split-bar-size, 2px)`}
+        data-dock-path=${pathStr}
+        @ixfx-split-resize=${this._onSplitWeightsChanged}
+        @ixfx-split-change=${this._onSplitWeightsChanged}
+        @ixfx-split-collapse=${(e) => this._onSplitCollapsed(e, true)}
+        @ixfx-split-expand=${(e) => this._onSplitCollapsed(e, false)}
+        @ixfx-split-close=${this._onSplitClose}
+      >
+        ${node.children.map((child, i) => this._renderNode(child, [...path, i], node.sizes[i]))}
+      </ixfx-split-layout>
+    `;
+	}
+	_renderLeaf(stack, path, size) {
+		const pathStr = path.join(`-`);
+		const collapsible = stack.panels.length === 1 ? this._findPanelEl(stack.panels[0])?.collapsible ?? false : false;
+		const leafAttrs = (content) => html`
+      <div
+        id=${`dock-leaf-${pathStr}`}
+        class="leaf"
+        data-dock-path=${pathStr}
+        size=${size === void 0 ? nothing : String(size)}
+        min=${collapsible ? `1px` : nothing}
+        when-small=${collapsible ? `collapse` : nothing}
+        ?collapsed=${stack.collapsed === true}
+      >${content}</div>
+    `;
+		if (stack.panels.length === 0) return leafAttrs(html`
+        <div class="empty" part="empty">
+          <slot name="empty"><span>Drop panels here</span></slot>
+        </div>
+      `);
+		return leafAttrs(html`
+      <ixfx-tab-list
+        class="strip"
+        orientation="horizontal"
+        @change=${(e) => this._onTabChange(e, path)}
+        @pointerdown=${this._onStripPointerDown}
+      >
+        ${repeat(stack.panels, (id) => id, (id) => this._renderTabItem(stack, id))}
+        <div slot="toolbar" class="group-toolbar">
+          <button
+            class="chrome-btn"
+            title="Split horizontally (top/bottom)"
+            @click=${() => this._splitStack(path, `split-horizontal`)}
+          >↕</button>
+          <button
+            class="chrome-btn"
+            title="Split vertically (left/right)"
+            @click=${() => this._splitStack(path, `split-vertical`)}
+          >↔</button>
+        </div>
+      </ixfx-tab-list>
+      <div class="leaf-body">
+        <slot name="dock-panel-${stack.active}"></slot>
+      </div>
+    `);
+	}
+	_renderTabItem(stack, panelId) {
+		const el = this._findPanelEl(panelId);
+		return html`
+      <ixfx-tab-list-item
+        id=${panelId}
+        ?selected=${panelId === stack.active}
+        .iconName=${el?.iconName ?? ``}
+        .closeable=${el?.closable ?? false}
+        @close=${() => this.removePanel(panelId)}
+      >${el?.title ?? panelId}</ixfx-tab-list-item>
+    `;
+	}
+	_stripCaretRect(strip, gapIndex, hostRect) {
+		const items = Array.from(strip.querySelectorAll(`ixfx-tab-list-item`));
+		if (items.length === 0) return void 0;
+		const index = Math.max(0, Math.min(gapIndex ?? items.length, items.length));
+		const edge = index < items.length ? items[index].getBoundingClientRect().left : items[items.length - 1].getBoundingClientRect().right;
+		const stripRect = strip.getBoundingClientRect();
+		return {
+			x: edge - hostRect.left - 1,
+			y: stripRect.top - hostRect.top,
+			w: 2,
+			h: stripRect.height
+		};
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        --dock-drop-zone-color: var(--accent);
+        --dock-drop-zone-opacity: 0.25;
+        --dock-collapsed-size: 40px;
+        --dock-split-bar-size: 2px;
+        position: relative;
+      }
 
-    /* ── Circular host sizing ── */
-    :host([fill-style="circular"][circular-style="grow"]),
-    :host([fill-style="circular"]:not([circular-style])) {
-      aspect-ratio: 1;
-    }
-  `
-		];
+      .root {
+        width: 100%;
+        height: 100%;
+      }
+
+      ixfx-split-layout.split {
+        width: 100%;
+        height: 100%;
+      }
+
+      .leaf {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        border: 1px solid var(--surface-4);
+        border-radius: var(--radius-m);
+      }
+
+      .leaf[collapsed] {
+        pointer-events: none;
+      }
+
+      .leaf[collapsed] .leaf-body,
+      .leaf[collapsed] .empty {
+        visibility: hidden;
+      }
+
+      .strip {
+        flex-shrink: 0;
+        border: 0;
+        /* The leaf background shows through selected tabs; the accent
+           underline indicator carries the selection. */
+        --ixfx-tab-selected-background: transparent;
+      }
+
+      /* Uniform tab height: a panel toolbar button would otherwise inflate
+         its tab item, giving strips of different stacks different heights. */
+      .strip ixfx-tab-list-item {
+        height: var(--dock-tab-height, 30px);
+      }
+
+      .leaf-body {
+        flex: 1;
+        min-height: 0;
+        min-width: 0;
+        box-sizing: border-box;
+        padding: var(--space-s);
+      }
+
+      .empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--surface-3-text);
+        opacity: 0.6;
+        font-size: var(--text-m);
+        border: 1px dashed var(--border-subtle);
+        border-radius: var(--radius-m);
+        margin: var(--space-s);
+      }
+
+      .group-toolbar {
+        display: flex;
+        gap: 2px;
+        padding: 0 var(--space-xs);
+      }
+
+      .chrome-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.6em;
+        height: 1.6em;
+        padding: 0;
+        background: none;
+        border: none;
+        border-radius: var(--radius-s);
+        color: inherit;
+        cursor: pointer;
+        opacity: var(--prominence-idle-opacity);
+        transition: background var(--transition), opacity var(--transition);
+      }
+
+      .chrome-btn:hover {
+        background: var(--surface-5);
+        opacity: var(--prominence-tickled-opacity);
+      }
+
+      .chrome-btn:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+
+      .overlay {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 100;
+      }
+
+      .zone-rect {
+        position: absolute;
+        background: var(--dock-drop-zone-color);
+        opacity: var(--dock-drop-zone-opacity);
+        border-radius: var(--radius-s);
+      }
+
+      .zone-caret {
+        position: absolute;
+        background: var(--dock-drop-zone-color);
+        border-radius: 1px;
+      }
+
+      .junctions {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 99;
+      }
+
+      .junctions[hidden] {
+        display: none;
+      }
+
+      .junction-handle {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        cursor: nwse-resize;
+        pointer-events: auto;
+      }
+
+      .junction-handle::after {
+        content: '';
+        position: absolute;
+        inset: 4px;
+        border-radius: 50%;
+        background: var(--dock-junction-color, var(--accent));
+        opacity: 0;
+        transition: opacity var(--transition);
+      }
+
+      .junction-handle:hover::after {
+        opacity: 0.9;
+      }
+
+      slot:not([name]) {
+        display: none;
+      }
+    `];
 	}
 };
-__decorate([property({ type: Number })], EditableNumber.prototype, "min", void 0);
-__decorate([property({ type: Number })], EditableNumber.prototype, "max", void 0);
-__decorate([property({ type: Number })], EditableNumber.prototype, "step", void 0);
-__decorate([property({ type: Number })], EditableNumber.prototype, "stops", void 0);
 __decorate([property({
-	type: Number,
-	attribute: `drag-sensitivity`
-})], EditableNumber.prototype, "dragSensitivity", void 0);
-__decorate([property({ attribute: `fill-style` })], EditableNumber.prototype, "fillStyle", void 0);
-__decorate([property({ attribute: `linear-style` })], EditableNumber.prototype, "linearStyle", void 0);
-__decorate([property({ attribute: `circular-style` })], EditableNumber.prototype, "circularStyle", void 0);
+	type: String,
+	attribute: `layout`
+})], DockHostElement.prototype, "layout", void 0);
 __decorate([property({
-	type: Boolean,
-	attribute: `no-drag`
-})], EditableNumber.prototype, "noDrag", void 0);
-__decorate([property({ type: Number })], EditableNumber.prototype, "precision", void 0);
-EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
+	type: String,
+	attribute: `accepts`
+})], DockHostElement.prototype, "accepts", void 0);
+__decorate([property({ attribute: false })], DockHostElement.prototype, "canAccept", void 0);
+__decorate([state()], DockHostElement.prototype, "_model", void 0);
+__decorate([state()], DockHostElement.prototype, "_pool", void 0);
+__decorate([state()], DockHostElement.prototype, "_dropZone", void 0);
+__decorate([state()], DockHostElement.prototype, "_dragActive", void 0);
+__decorate([state()], DockHostElement.prototype, "_junctions", void 0);
+DockHostElement = __decorate([safeCustomElement(`ixfx-dock-host`)], DockHostElement);
+/** `split-horizontal` = horizontal divider = panels stacked vertically. */
+function opToDirection(op) {
+	return op === `split-horizontal` ? `column` : `row`;
+}
+function operationToToken(op) {
+	if (op === `tabs`) return `tabs`;
+	return op === `split-horizontal` ? `horizontal` : `vertical`;
+}
+/** Host-level `accepts`: empty or `none` rejects everything. */
+function tokenAllows(tokens, token) {
+	const list = tokens.trim().split(/\s+/).filter((t) => t.length > 0);
+	if (list.length === 0 || list.length === 1 && list[0] === `none`) return false;
+	return list.includes(`all`) || list.includes(token);
+}
+/** Panel-level `accepts`: empty means unrestricted (host rules still apply). */
+function panelAllows(tokens, token) {
+	const list = tokens.trim().split(/\s+/).filter((t) => t.length > 0);
+	if (list.length === 0) return true;
+	if (list.length === 1 && list[0] === `none`) return false;
+	return list.includes(`all`) || list.includes(token);
+}
+function weightsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((v, i) => Math.abs(v - b[i]) < 1e-4);
+}
+function rectStyle(r) {
+	return `left:${r.x}px; top:${r.y}px; width:${r.w}px; height:${r.h}px;`;
+}
+/** Strip a live `DockDropZone` down to its serializable {@link DockDropTarget}. */
+function zoneToTarget(zone) {
+	return {
+		operation: zone.operation,
+		targetPath: [...zone.targetPath],
+		side: zone.side,
+		...zone.gapIndex === void 0 ? {} : { gapIndex: zone.gapIndex }
+	};
+}
+function cloneNode(node) {
+	return JSON.parse(JSON.stringify(node));
+}
+function parsePath(pathStr) {
+	return pathStr.length === 0 ? [] : pathStr.split(`-`).filter((s) => s.length > 0).map(Number);
+}
+/** Toolbar-slot light children of a dock panel. */
+function toolbarNodesOf(el) {
+	return Array.from(el.children).filter((c) => c instanceof HTMLElement && c.getAttribute(`slot`) === `toolbar`);
+}
+/** Nearest strip gap to the pointer (reuses the tab-list midpoint rule). */
+function computeStripGapIndex(strip, clientX, _clientY) {
+	const items = Array.from(strip.querySelectorAll(`ixfx-tab-list-item`));
+	if (items.length === 0) return 0;
+	for (let i = 0; i < items.length; i++) {
+		const r = items[i].getBoundingClientRect();
+		if (clientX < (r.left + r.right) / 2) return i;
+	}
+	return items.length;
+}
 //#endregion
 //#region src/form/form-group.ts
 let FormGroupElement = class FormGroupElement extends LitElement {
@@ -2766,6 +5217,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 		this.orientation = `horizontal`;
 		this.variant = `titlebar`;
 		this.toggleInteraction = `implicit`;
+		this.collapsible = true;
 		this.allowMultiple = false;
 		this.gap = `var(--space-m)`;
 	}
@@ -2782,7 +5234,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`)) this.updateComplete.then(() => {
+		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`)) this.updateComplete.then(() => {
 			this._propagateAll();
 		});
 	}
@@ -2792,6 +5244,8 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
 			panel.setAttribute(`variant`, this.variant);
 			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
 			panel.setAttribute(`orientation`, invertedOrientation);
+			if (this.collapsible) panel.setAttribute(`collapsible`, ``);
+			else panel.removeAttribute(`collapsible`);
 		}
 	}
 	render() {
@@ -2822,132 +5276,31 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
     ::slotted(ixfx-panel) {
       flex-shrink: 1;
     }
-
-    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
-      flex-basis: content;
-      min-width: 0;
-    }
-  `;
-	}
-};
-__decorate([property({
-	type: String,
-	reflect: true
-})], PanelGroupElement.prototype, "orientation", void 0);
-__decorate([property({ type: String })], PanelGroupElement.prototype, "variant", void 0);
-__decorate([property({
-	type: String,
-	attribute: `toggle-interaction`
-})], PanelGroupElement.prototype, "toggleInteraction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `allow-multiple`
-})], PanelGroupElement.prototype, "allowMultiple", void 0);
-__decorate([property()], PanelGroupElement.prototype, "gap", void 0);
-__decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
-//#endregion
-//#region src/util/is-numeric.ts
-function isNumeric(str) {
-	if (typeof str === `number`) return true;
-	if (typeof str !== `string`) return false;
-	const trimmed = str.trim();
-	return trimmed !== `` && !Number.isNaN(Number(trimmed));
-}
-//#endregion
-//#region src/util/tooltip.ts
-var _TooltipElement;
-let _baseStylesInjected = false;
-function ensureBaseTooltipStyles() {
-	if (_baseStylesInjected) return;
-	_baseStylesInjected = true;
-	const style = document.createElement(`style`);
-	style.textContent = `
-    ixfx-tooltip {
-      display: inline-block;
-      background: var(--surface-5);
-      color: var(--surface-5-text);
-      border: var(--border);
-      border-radius: var(--radius-l, 6px);
-      box-shadow: var(--shadow-m);
-      padding: var(--space-s, 4px);
-      font-size: 10px;
-      font-family: var(--font-family, inherit);
-    }
-    ixfx-tooltip .tooltip-type-number {
-      font-family: var(--font-mono, ui-monospace, monospace);
-    }
-  `;
-	document.head.appendChild(style);
-}
-let TooltipElement = class TooltipElement extends LitElement {
-	static {
-		_TooltipElement = this;
-	}
-	constructor(..._args) {
-		super(..._args);
-		this.valueFormatTooltip = _TooltipElement.defaultFormatter;
-		this.orientation = `top`;
-		this.anchor = `--tooltip`;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		ensureBaseTooltipStyles();
-	}
-	static {
-		this.numberFormatter = (v) => Math.floor(v).toString();
-	}
-	static {
-		this.defaultFormatter = (v) => {
-			if (typeof v === `number`) {
-				if (Number.isInteger(v)) return v.toString();
-				return v.toFixed(2);
-			} else if (typeof v === `string`) return v;
-			else return JSON.stringify(v);
-		};
-	}
-	#renderIcon() {
-		if (!this.icon) return nothing;
-		if (this.icon.startsWith(`<svg`)) return html`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return nothing;
-		return html`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
-	}
-	render() {
-		const classes = {
-			"tooltip": true,
-			"tooltip-orientation-top": this.orientation === `top`,
-			"tooltip-orientation-bottom": this.orientation === `bottom`,
-			"tooltip-orientation-right": this.orientation === `right`,
-			"tooltip-orientation-left": this.orientation === `left`,
-			"tooltip-type-text": true,
-			"tooltip-type-number": false,
-			"tooltip-style-bubble": true
-		};
-		let value = ``;
-		switch (typeof this.value) {
-			case `number`:
-				classes[`tooltip-type-number`] = true;
-				value = this.valueFormatTooltip(this.value);
-				break;
-			case `string`:
-				if (isNumeric(this.value)) {
-					classes[`tooltip-type-number`] = true;
-					value = this.valueFormatTooltip(Number.parseFloat(this.value));
-				} else value = this.value;
-				break;
-			default: value = JSON.stringify(this.value);
-		}
-		return html`<output style="--anchor-id: ${this.anchor}" class=${classMap(classes)}>${this.#renderIcon()}${value}</output>`;
-	}
-	createRenderRoot() {
-		return this;
+
+    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
+      flex-basis: content;
+      min-width: 0;
+    }
+  `;
 	}
 };
-__decorate([property({ type: String })], TooltipElement.prototype, "orientation", void 0);
-__decorate([property({ type: String })], TooltipElement.prototype, "anchor", void 0);
-__decorate([property()], TooltipElement.prototype, "value", void 0);
-__decorate([property({ type: String })], TooltipElement.prototype, "icon", void 0);
-TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+__decorate([property({
+	type: String,
+	reflect: true
+})], PanelGroupElement.prototype, "orientation", void 0);
+__decorate([property({ type: String })], PanelGroupElement.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], PanelGroupElement.prototype, "toggleInteraction", void 0);
+__decorate([property({ type: Boolean })], PanelGroupElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-multiple`
+})], PanelGroupElement.prototype, "allowMultiple", void 0);
+__decorate([property()], PanelGroupElement.prototype, "gap", void 0);
+__decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
+PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
 //#region src/util/drag.ts
 function getCoordinates(event) {
@@ -4006,278 +6359,54 @@ let SlidingNumberElement = class SlidingNumberElement extends LitElement {
       opacity: 0;
     }
 
-    .cell.digit[data-phase='enter'],
-    .cell.digit[data-phase='leave'] {
-      width: 0;
-    }
-
-    .cell.symbol[data-phase='enter'],
-    .cell.symbol[data-phase='leave'] {
-      max-width: 0;
-    }
-
-    .reel {
-      position: absolute;
-      inset: 0 0 auto 0;
-      display: flex;
-      flex-direction: column;
-      will-change: transform;
-      transform: translateY(calc(-1em * var(--o, 10)));
-    }
-
-    .reel > span {
-      display: block;
-      height: 1em;
-      line-height: 1;
-      text-align: center;
-    }
-
-    :host([data-static]) .cell {
-      transition: none;
-    }
-  `;
-	}
-};
-__decorate([property({ type: Number })], SlidingNumberElement.prototype, "value", void 0);
-__decorate([property({ type: String })], SlidingNumberElement.prototype, "locales", void 0);
-__decorate([property({ type: Object })], SlidingNumberElement.prototype, "format", void 0);
-__decorate([property({ type: String })], SlidingNumberElement.prototype, "prefix", void 0);
-__decorate([property({ type: String })], SlidingNumberElement.prototype, "suffix", void 0);
-__decorate([property({ type: String })], SlidingNumberElement.prototype, "trend", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `no-animate`
-})], SlidingNumberElement.prototype, "noAnimate", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: false
-})], SlidingNumberElement.prototype, "respectMotionPreference", void 0);
-__decorate([state()], SlidingNumberElement.prototype, "_cells", void 0);
-SlidingNumberElement = __decorate([safeCustomElement(`ixfx-sliding-number`)], SlidingNumberElement);
-//#endregion
-//#region src/tabs/tab-list-item.ts
-let TabListItemElement = class TabListItemElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.closeable = false;
-		this.hideLabels = false;
-		this.iconName = void 0;
-		this.description = void 0;
-		this.commandActive = void 0;
-		this.registry = void 0;
-		this._compact = false;
-		this._hasToolbarContent = false;
-		this._onToolbarSlotChange = () => {
-			this._updateToolbarContent();
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			this._compact = entry.contentRect.width < 64;
-		});
-		this._resizeObserver.observe(this);
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-	}
-	updated(changed) {
-		super.updated(changed);
-		this._syncTooltipAttrs();
-		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
-	}
-	_syncTooltipAttrs() {
-		if (this.description) {
-			this.setAttribute(`data-tooltip`, this.description);
-			this.setAttribute(`data-tooltip-anchor`, `top`);
-		} else {
-			this.removeAttribute(`data-tooltip`);
-			this.removeAttribute(`data-tooltip-anchor`);
-		}
-	}
-	_syncCommandListener() {
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
-		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
-			if (id === this.commandActive) this.click();
-		});
-	}
-	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
-	}
-	firstUpdated() {
-		this._updateToolbarContent();
-	}
-	render() {
-		const showLabel = !this.hideLabels || !this.iconName;
-		const hasActions = this.closeable || this._hasToolbarContent;
-		return html`
-      <div>
-        ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
-        ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
-        ${hasActions ? html`
-        <div class="actions">
-          <div class="toolbar"><slot name="toolbar"></slot></div>
-          ${this.closeable ? html`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close tab"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : nothing}
-        </div>
-        ` : nothing}
-      </div>
-    `;
-	}
-	_onCloseClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-		this.remove();
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			prominenceStyles,
-			css`
-      :host {
-        --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
-        --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
-        --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
-        --selected-background: var(--ixfx-tab-selected-background, var(--surface-5));
-        --tab-padding: var(--ixfx-tab-padding, var(--space-m));
-        display: inline-flex;
-        min-width: 0;
-        user-select: none;
-        box-sizing: border-box;
-        height:fit-content;
-      }
-
-      :host > div {
-        display: flex;
-        align-items: center;
-        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
-        min-width: 0;
-        width: 100%;
-        font-weight: 500;
-        border: var(--selected-tab-border-width) solid transparent;
-        gap: var(--space-s);
-
-      }
-
-      :host([selected]) > div {
-        color: var(--selected-tab-color);
-        border-top-color: var(--indicator-color-top, transparent);
-        border-bottom-color: var(--indicator-color-bottom, transparent);
-        border-left-color: var(--indicator-color-left, transparent);
-        border-right-color: var(--indicator-color-right, transparent);
-        background: var(--selected-background);
-        font-weight: var(--selected-tab-weight);
-        border-radius:var(--radius-m);
-      }
-
-      .label {
-        overflow: var(--allow-overflow, hidden);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        min-width: 0;
-        flex: 1 1 auto;
-      }
-
-      ixfx-icon {
-        flex-shrink: 0;
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        margin-left: auto;
-        flex-shrink: 0;
-      }
-
-      .toolbar {
-        /* Always laid out (display: flex) so the tab's width doesn't shift when
-           the toolbar appears on selection. visibility: hidden keeps the
-           toolbar from receiving pointer events or painting, while preserving
-           the space its contents take up. */
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        visibility: hidden;
-      }
-
-      :host([selected]) .toolbar {
-        visibility: visible;
-      }
-
-      slot[name="toolbar"] {
-        display: contents;
-      }
-
-      .close-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: var(--space-xs);
-        cursor: pointer;
-        color: inherit;
-        border-radius: var(--radius-s);
-        opacity: var(--prominence-idle-opacity);
-        transition: opacity var(--transition), background var(--transition);
-      }
-
-      .close-btn:hover {
-        background: var(--surface-5);
-        opacity: var(--prominence-tickled-opacity);
-      }
+    .cell.digit[data-phase='enter'],
+    .cell.digit[data-phase='leave'] {
+      width: 0;
+    }
 
-      .close-btn:focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: 1px;
-      }
+    .cell.symbol[data-phase='enter'],
+    .cell.symbol[data-phase='leave'] {
+      max-width: 0;
+    }
 
-      :host([selected]) .close-btn,
-      :host(:hover) .close-btn {
-        opacity: var(--prominence-tickled-opacity);
-      }
-    `
-		];
+    .reel {
+      position: absolute;
+      inset: 0 0 auto 0;
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
+      transform: translateY(calc(-1em * var(--o, 10)));
+    }
+
+    .reel > span {
+      display: block;
+      height: 1em;
+      line-height: 1;
+      text-align: center;
+    }
+
+    :host([data-static]) .cell {
+      transition: none;
+    }
+  `;
 	}
 };
-__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({ type: Number })], SlidingNumberElement.prototype, "value", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "locales", void 0);
+__decorate([property({ type: Object })], SlidingNumberElement.prototype, "format", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "prefix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "suffix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "trend", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `hide-labels`
-})], TabListItemElement.prototype, "hideLabels", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], TabListItemElement.prototype, "iconName", void 0);
-__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
+	attribute: `no-animate`
+})], SlidingNumberElement.prototype, "noAnimate", void 0);
 __decorate([property({
-	type: String,
-	attribute: `command-active`
-})], TabListItemElement.prototype, "commandActive", void 0);
-__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
-__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
-__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
-TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
+	type: Boolean,
+	attribute: false
+})], SlidingNumberElement.prototype, "respectMotionPreference", void 0);
+__decorate([state()], SlidingNumberElement.prototype, "_cells", void 0);
+SlidingNumberElement = __decorate([safeCustomElement(`ixfx-sliding-number`)], SlidingNumberElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
 let TabPanelElement = class TabPanelElement extends LitElement {
@@ -4793,7 +6922,7 @@ let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
       align-items: var(--toolbar-group-align-items, center);
       justify-content: var(--toolbar-group-justify-content, flex-start);
       gap: var(--toolbar-gap, var(--space-s));
-      padding: var(--space-xs);
+      padding: var(--toolbar-group-padding, var(--space-xs));
       border: 1px solid var(--border-subtle, var(--border));
       border-radius: var(--radius-s);
       background: var(--surface-3);
@@ -4849,6 +6978,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		this.orientation = `horizontal`;
 		this.layout = `one-line`;
 		this.verticalWriting = `auto`;
+		this.toolbarAlign = `near`;
 		this.showGroupLabels = false;
 		this.invisibleGroups = false;
 		this._overflowCount = 0;
@@ -4868,6 +6998,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
     :host {
       --toolbar-gap: var(--space-s);
       --toolbar-group-gap: var(--space-m);
+      --toolbar-overflow: auto;
       display: block;
       container-type: inline-size;
     }
@@ -4894,6 +7025,7 @@ let ToolbarElement = class ToolbarElement extends LitElement {
     :host([orientation="vertical-right"]) .inner { flex-direction: column; align-items: stretch; }
     :host([layout="wrap"]) .inner { flex-wrap: wrap; }
     :host([layout="one-line"]) .inner { flex-wrap: nowrap; overflow: hidden; }
+    :host([toolbar-align="far"][orientation="horizontal"]) .inner { justify-content: flex-end; }
     :host([orientation="vertical-left"][vertical-writing="auto"]) ::slotted(*) { writing-mode: sideways-lr; }
     :host([orientation="vertical-right"][vertical-writing="auto"]) ::slotted(*) { writing-mode: vertical-lr; }
     :host([vertical-writing="up"]) ::slotted(*) { writing-mode: vertical-rl; text-orientation: upright; }
@@ -4906,14 +7038,8 @@ let ToolbarElement = class ToolbarElement extends LitElement {
     .overflow-btn {
       anchor-name: var(--anchor-name);
       flex-shrink: 0;
-      background: var(--surface-3);
-      border: var(--border);
-      border-radius: var(--radius-s);
-      padding: var(--space-xs) var(--space-s);
-      cursor: pointer;
-      display: none;
     }
-    .overflow-btn[visible] { display: inline-flex; }
+    .overflow-btn[hidden] { display: none; }
     .overflow-popover {
       position: fixed;
       top: anchor(bottom);
@@ -4973,7 +7099,8 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		const isGrow = (el) => el.hasAttribute(`grow`) || el.matches(`[grow]`);
 		const overflowable = children.filter((el) => !isGrow(el));
 		const isHoriz = this.orientation === `horizontal`;
-		if (this.layout !== `one-line`) {
+		const overflowMode = getComputedStyle(this).getPropertyValue(`--toolbar-overflow`).trim();
+		if (this.layout !== `one-line` || overflowMode === `disabled`) {
 			let mutated = false;
 			for (const el of children) {
 				if (el.getAttribute(`slot`) === `overflow`) {
@@ -5005,8 +7132,23 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 			if (s > 0) this._sizes.set(el, s);
 			cum += (i ? gap : 0) + (this._sizes.get(el) ?? s);
 		});
-		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
 		let mutated = false;
+		if (overflowMode === `collapsed`) {
+			if (inMain.length > 0) {
+				for (const el of inMain) el.setAttribute(`slot`, `overflow`);
+				inOverflow.push(...inMain);
+				inMain.length = 0;
+				mutated = true;
+			}
+			const newCount = inOverflow.length;
+			if (newCount !== this._overflowCount) {
+				this._overflowCount = newCount;
+				mutated = true;
+			}
+			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;
@@ -5044,11 +7186,12 @@ let ToolbarElement = class ToolbarElement extends LitElement {
 		}
 	}
 	render() {
-		const hasOverflow = this._overflowCount > 0;
+		const overflowMode = getComputedStyle(this).getPropertyValue(`--toolbar-overflow`).trim();
+		const hasOverflow = this._overflowCount > 0 || overflowMode === `collapsed`;
 		return html`
       <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
         <slot></slot>
-        <button class="overflow-btn" ?visible=${hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</button>
+        <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>
@@ -5069,6 +7212,11 @@ __decorate([property({
 	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`,
@@ -5085,6 +7233,616 @@ __decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", v
 __decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
 ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
 //#endregion
+//#region src/twosplit-layout/split-layout.ts
+let TwoSplitLayoutElement = class TwoSplitLayoutElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.layout = `vertical`;
+		this.sizeA = ``;
+		this.sizeB = ``;
+		this.fixedA = false;
+		this.fixedB = false;
+		this.collapsible = false;
+		this.collapsedA = false;
+		this.collapsedB = false;
+		this.minSizeA = ``;
+		this.maxSizeA = ``;
+		this.minSizeB = ``;
+		this.maxSizeB = ``;
+		this._hasCorner = false;
+		this.#startSizeA = ``;
+		this.#startSizeB = ``;
+		this.#cornerStartX = 0;
+		this.#cornerStartY = 0;
+		this.#nestedSplitInitialSizeA = ``;
+		this.#pendingNestedUpdate = null;
+		this.#hysteresisThreshold = .1;
+		this.#onResizeHandleDown = (event) => {
+			event.preventDefault();
+			const zoneEl = this.getZone();
+			if (zoneEl) zoneEl.classList.add(`user-resizing`);
+			this.#elementBounds = this.getBoundingClientRect();
+			this.#startSizeA = this.sizeA;
+			this.#startSizeB = this.sizeB;
+			window.addEventListener(`pointerup`, this.#onResizeHandleUp);
+			window.addEventListener(`pointermove`, this.#onResizeHandleMove);
+		};
+		this.#onResizeHandleUp = (event) => {
+			event.preventDefault();
+			const zoneEl = this.getZone();
+			if (zoneEl) zoneEl.classList.remove(`user-resizing`);
+			window.removeEventListener(`pointerup`, this.#onResizeHandleUp);
+			window.removeEventListener(`pointermove`, this.#onResizeHandleMove);
+		};
+		this.#onResizeHandleMove = (event) => {
+			const bounds = this.#elementBounds;
+			if (!bounds) return;
+			const threshold = 5;
+			if (this.layout === `horizontal`) {
+				const y = event.y - bounds.y;
+				const relativeY = clamp(y / bounds.height);
+				if (this.collapsible && this.collapsedA) {
+					if (relativeY > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
+						this.collapsedA = false;
+						this.#dispatchCollapsedEvent(`A`, false);
+						this.#collapsedAPointerAtCollapse = void 0;
+						const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+						this.sizeA = sizeA;
+						this.sizeB = sizeB;
+					}
+				} else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {
+					this.collapsedA = true;
+					this.#dispatchCollapsedEvent(`A`, true);
+					this.sizeA = `0px`;
+					this.sizeB = `100%`;
+					this.#collapsedAPointerAtCollapse = relativeY;
+				} else if (!this.collapsedA) {
+					const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+					this.sizeA = sizeA;
+					this.sizeB = sizeB;
+				}
+				if (this.collapsible && this.collapsedB) {
+					if (relativeY < (this.#collapsedBPointerAtCollapse ?? .95) - this.#hysteresisThreshold) {
+						this.collapsedB = false;
+						this.#dispatchCollapsedEvent(`B`, false);
+						this.#collapsedBPointerAtCollapse = void 0;
+						const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+						this.sizeA = sizeA;
+						this.sizeB = sizeB;
+					}
+				} else if (this.collapsible && !this.collapsedB && relativeY > 1 - threshold / bounds.height) {
+					this.collapsedB = true;
+					this.#dispatchCollapsedEvent(`B`, true);
+					this.sizeA = `100%`;
+					this.sizeB = `0px`;
+					this.#collapsedBPointerAtCollapse = relativeY;
+				}
+			} else {
+				const x = event.x - bounds.x;
+				const relativeX = clamp(x / bounds.width);
+				if (this.collapsible && this.collapsedA) {
+					if (relativeX > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
+						this.collapsedA = false;
+						this.#dispatchCollapsedEvent(`A`, false);
+						this.#collapsedAPointerAtCollapse = void 0;
+						const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+						this.sizeA = sizeA;
+						this.sizeB = sizeB;
+					}
+				} else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {
+					this.collapsedA = true;
+					this.#dispatchCollapsedEvent(`A`, true);
+					this.sizeA = `0px`;
+					this.sizeB = `100%`;
+					this.#collapsedAPointerAtCollapse = relativeX;
+				} else if (!this.collapsedA) {
+					const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+					this.sizeA = sizeA;
+					this.sizeB = sizeB;
+				}
+				if (this.collapsible && this.collapsedB) {
+					if (relativeX < (this.#collapsedBPointerAtCollapse ?? .95) - this.#hysteresisThreshold) {
+						this.collapsedB = false;
+						this.#dispatchCollapsedEvent(`B`, false);
+						this.#collapsedBPointerAtCollapse = void 0;
+						const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+						this.sizeA = sizeA;
+						this.sizeB = sizeB;
+					}
+				} else if (this.collapsible && !this.collapsedB && relativeX > 1 - threshold / bounds.width) {
+					this.collapsedB = true;
+					this.#dispatchCollapsedEvent(`B`, true);
+					this.sizeA = `100%`;
+					this.sizeB = `0px`;
+					this.#collapsedBPointerAtCollapse = relativeX;
+				}
+			}
+			event.preventDefault();
+		};
+		this.#onCornerResizeDown = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			const zoneEl = this.getZone();
+			if (zoneEl) zoneEl.classList.add(`user-resizing`);
+			this.#elementBounds = this.getBoundingClientRect();
+			this.#cornerStartX = event.clientX;
+			this.#cornerStartY = event.clientY;
+			this.#startSizeA = this.sizeA;
+			this.#startSizeB = this.sizeB;
+			const nestedSplit = this.#getNestedSplit();
+			if (nestedSplit) {
+				this.#nestedSplitInitialSizeA = nestedSplit.sizeA;
+				const nestedBounds = nestedSplit.getBoundingClientRect();
+				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.split-bar`);
+				if (nestedHandle) {
+					this.#nestedSplitBounds = nestedBounds;
+					this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();
+				}
+				const nestedZoneEl = nestedSplit.getZone();
+				if (nestedZoneEl) nestedZoneEl.classList.add(`user-resizing`);
+			}
+			window.addEventListener(`pointerup`, this.#onCornerResizeUp);
+			window.addEventListener(`pointermove`, this.#onCornerResizeMove);
+		};
+		this.#onCornerResizeUp = (event) => {
+			event.preventDefault();
+			const zoneEl = this.getZone();
+			if (zoneEl) zoneEl.classList.remove(`user-resizing`);
+			const nestedSplit = this.#getNestedSplit();
+			if (nestedSplit) {
+				const nestedZoneEl = nestedSplit.getZone();
+				if (nestedZoneEl) nestedZoneEl.classList.remove(`user-resizing`);
+			}
+			window.removeEventListener(`pointerup`, this.#onCornerResizeUp);
+			window.removeEventListener(`pointermove`, this.#onCornerResizeMove);
+		};
+		this.#onCornerResizeMove = (event) => {
+			const outerBounds = this.#elementBounds;
+			const zoneEl = this.getZone();
+			const nestedSplit = this.#getNestedSplit();
+			if (!outerBounds || !zoneEl || !nestedSplit) return;
+			const zoneBounds = zoneEl.getBoundingClientRect();
+			const cursorZoneLocalX = event.clientX - zoneBounds.left;
+			const cursorZoneLocalY = event.clientY - zoneBounds.top;
+			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
+				let newOuterFraction = cursorZoneLocalX / outerBounds.width;
+				const newNestedFraction = cursorZoneLocalY / outerBounds.height;
+				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.width);
+				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);
+				this.sizeA = constrainedA;
+				this.sizeB = constrainedB;
+				this.#pendingNestedUpdate = {
+					sizeA: newNestedFraction,
+					sizeB: 1 - newNestedFraction
+				};
+				requestAnimationFrame(() => this.#applyPendingNestedUpdate());
+				const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+				if (cornerZone) {
+					cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
+					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
+				}
+			} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+				const newNestedFraction = cursorZoneLocalX / outerBounds.width;
+				let newOuterFraction = cursorZoneLocalY / outerBounds.height;
+				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.height);
+				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);
+				this.sizeA = constrainedA;
+				this.sizeB = constrainedB;
+				this.#pendingNestedUpdate = {
+					sizeA: newNestedFraction,
+					sizeB: 1 - newNestedFraction
+				};
+				requestAnimationFrame(() => this.#applyPendingNestedUpdate());
+				const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+				if (cornerZone) {
+					cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
+					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
+				}
+			}
+			event.preventDefault();
+		};
+	}
+	get showGrabHandle() {
+		const size = getComputedStyle(this).getPropertyValue(`--handle-size`).trim();
+		const num = Number.parseFloat(size);
+		return !Number.isNaN(num) && num > 3;
+	}
+	#elementBounds;
+	#startSizeA;
+	#startSizeB;
+	#cornerStartX;
+	#cornerStartY;
+	#nestedSplitInitialSizeA;
+	#cornerZone;
+	#nestedSplit;
+	#nestedSplitBounds;
+	#nestedHandleBounds;
+	#observer;
+	#pendingNestedUpdate;
+	#collapsedAPointerAtCollapse;
+	#collapsedBPointerAtCollapse;
+	#hysteresisThreshold;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#observer?.disconnect();
+	}
+	firstUpdated() {
+		this.#setupNestedSplitObserver();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`) || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) this.#updateCornerPosition();
+		if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) this.#updateDataCollapsed();
+	}
+	#updateDataCollapsed() {
+		if (this.collapsedA) this.setAttribute(`data-collapsed-a`, ``);
+		else this.removeAttribute(`data-collapsed-a`);
+		if (this.collapsedB) this.setAttribute(`data-collapsed-b`, ``);
+		else this.removeAttribute(`data-collapsed-b`);
+	}
+	#dispatchCollapsedEvent(panel, collapsed) {
+		this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {
+			detail: {
+				panel,
+				collapsed
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#setupNestedSplitObserver() {
+		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+		if (!slotA) return;
+		this.#observer = new MutationObserver(() => {
+			this.#checkForNestedSplit();
+		});
+		this.#observer.observe(slotA, {
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		this.#checkForNestedSplit();
+	}
+	#checkForNestedSplit() {
+		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+		if (!slotA) return;
+		const assignedElements = slotA.assignedElements();
+		const findNestedSplit = (elements) => {
+			for (const el of elements) {
+				if (el.tagName === `IXFX-SPLIT-LAYOUT`) return el;
+				const nested = findNestedSplit(Array.from(el.children));
+				if (nested) return nested;
+			}
+		};
+		const nestedSplit = findNestedSplit(assignedElements);
+		if (nestedSplit) {
+			this.#nestedSplit = nestedSplit;
+			this._hasCorner = true;
+			requestAnimationFrame(() => this.#updateCornerPosition());
+		} else {
+			this.#nestedSplit = void 0;
+			this._hasCorner = false;
+		}
+	}
+	#getNestedSplit() {
+		if (this.#nestedSplit) return this.#nestedSplit;
+		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+		if (!slotA) return void 0;
+		return slotA.assignedElements().find((el) => el.tagName === `IXFX-SPLIT-LAYOUT`);
+	}
+	#parseSizeAsFraction(size, total) {
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``)) / total;
+		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100;
+		return .5;
+	}
+	#parseSizeToPx(size, total) {
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``));
+		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100 * total;
+		return null;
+	}
+	#applyConstraints(sizeA, sizeB, total) {
+		let fractionA = this.#parseSizeAsFraction(sizeA, total);
+		let fractionB = this.#parseSizeAsFraction(sizeB, total);
+		const minA = this.#minSizeToFraction(this.minSizeA, total);
+		const minB = this.#minSizeToFraction(this.minSizeB, total);
+		const maxA = this.#maxSizeToFraction(this.maxSizeA, total);
+		const maxB = this.#maxSizeToFraction(this.maxSizeB, total);
+		if (minA !== null || minB !== null) {
+			const minSum = (minA ?? 0) + (minB ?? 0);
+			if (minSum > 1) {
+				const scale = 1 / minSum;
+				if (minA !== null) minA !== null ? fractionA = minA * scale : fractionA = 0;
+				if (minB !== null) minB !== null ? fractionB = minB * scale : fractionB = 0;
+			}
+			if (fractionA < (minA ?? 0)) fractionA = minA ?? 0;
+			if (fractionB < (minB ?? 0)) fractionB = minB ?? 0;
+		}
+		if (maxA !== null) {
+			if (fractionA > maxA) fractionA = maxA;
+		}
+		if (maxB !== null) {
+			if (fractionB > maxB) fractionB = maxB;
+		}
+		fractionB = 1 - fractionA;
+		const isPercentA = !this.sizeA.endsWith(`px`);
+		this.sizeB.endsWith(`px`);
+		if (isPercentA) return {
+			sizeA: `${fractionA * 100}%`,
+			sizeB: `${fractionB * 100}%`
+		};
+		else return {
+			sizeA: `${fractionA * total}px`,
+			sizeB: `${fractionB * total}px`
+		};
+	}
+	#minSizeToFraction(minSize, total) {
+		if (minSize.length === 0) return null;
+		const px = this.#parseSizeToPx(minSize, total);
+		if (px !== null) return px / total;
+		if (minSize.endsWith(`%`)) return Number.parseFloat(minSize.replace(`%`, ``)) / 100;
+		return null;
+	}
+	#maxSizeToFraction(maxSize, total) {
+		if (maxSize.length === 0) return null;
+		const px = this.#parseSizeToPx(maxSize, total);
+		if (px !== null) return px / total;
+		if (maxSize.endsWith(`%`)) return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;
+		return null;
+	}
+	#getIntersectionPoint() {
+		const outerBounds = this.getBoundingClientRect();
+		const zoneEl = this.getZone();
+		if (!zoneEl) return null;
+		const nestedSplit = this.#getNestedSplit();
+		if (!nestedSplit) return null;
+		zoneEl.getBoundingClientRect();
+		const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);
+		let x, y;
+		if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
+			x = outerFraction * outerBounds.width;
+			y = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height) * outerBounds.height;
+		} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+			x = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width) * outerBounds.width;
+			y = outerFraction * outerBounds.height;
+		} else return null;
+		return {
+			x,
+			y
+		};
+	}
+	#updateCornerPosition() {
+		if (!this._hasCorner) return;
+		const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+		if (!cornerZone) return;
+		if (!this.getZone()) return;
+		const intersection = this.#getIntersectionPoint();
+		if (!intersection) {
+			cornerZone.style.display = `none`;
+			return;
+		}
+		const cornerX = intersection.x - 6;
+		const cornerY = intersection.y - 6;
+		cornerZone.style.left = `${cornerX}px`;
+		cornerZone.style.top = `${cornerY}px`;
+		cornerZone.style.display = `block`;
+		const nestedSplit = this.#getNestedSplit();
+		if (nestedSplit) {
+			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) cornerZone.style.cursor = `nwse-resize`;
+			else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) cornerZone.style.cursor = `nesw-resize`;
+		}
+	}
+	getZone() {
+		if (!this.shadowRoot) return;
+		const el = this.shadowRoot.querySelector(`#zone`);
+		if (!el) return void 0;
+		return el;
+	}
+	#onResizeHandleDown;
+	#onResizeHandleUp;
+	#onResizeHandleMove;
+	#onCornerResizeDown;
+	#onCornerResizeUp;
+	#applyPendingNestedUpdate() {
+		if (!this.#pendingNestedUpdate) return;
+		const { sizeA, sizeB } = this.#pendingNestedUpdate;
+		const nested = this.#getNestedSplit();
+		if (nested) {
+			nested.sizeA = `${sizeA * 100}%`;
+			nested.sizeB = `${sizeB * 100}%`;
+		}
+		this.#pendingNestedUpdate = null;
+	}
+	#onCornerResizeMove;
+	render() {
+		const sizePrefix = this.layout === `vertical` ? `width` : `height`;
+		let sizeA = this.sizeA;
+		let sizeB = this.sizeB;
+		if (this.collapsedA) sizeA = `0px`;
+		else if (sizeA.length === 0 && sizeB.length === 0) sizeB = sizeA = `50%`;
+		else if (sizeA.length === 0) sizeA = `auto`;
+		else if (sizeB.length === 0) sizeB = `auto`;
+		if (this.collapsedB) sizeB = `0px`;
+		sizeA = `${sizePrefix}:${sizeA}`;
+		sizeB = `${sizePrefix}:${sizeB}`;
+		return html`
+    <div id="zone">
+      <slot style=${sizeA} name="a"></slot>
+      ${this._hasCorner ? html`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
+      <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
+        ${this.showGrabHandle ? html`
+          <div class="grab-handle">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        ` : ``}
+      </div>
+      <slot style=${sizeB} name="b"></slot>
+    </div>`;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+  :host {
+      --handle-size: 2px;
+      --handle-colour: transparent;
+      --handle-hover-colour: var(--surface-6);
+      --handle-active-colour: var(--accent);
+      --handle-bg: var(--handle-colour);
+      --handle-grab-colour: var(--border-subtle-color);
+      --handle-grab-dot-size: 3px;
+      --handle-grab-size: 16px;
+      --handle-grab-thickness: 8px;
+
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    #zone {
+      display: flex;
+      height: 100%;
+      position: relative;
+    }
+    slot {
+      display: block;
+      overflow: hidden;
+      border: var(--border-subtle);
+      border-radius: var(--radius-m);
+    }
+    :slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+
+    .split-bar {
+      position: relative;
+      background-color: var(--handle-colour);
+      transition: background-color 0.3s ease 0s;
+      width: var(--handle-size);
+      height: 100%;
+      cursor: ew-resize;
+      flex-shrink: 0;
+      border-radius: var(--radius-m);
+
+    }
+
+    @keyframes handle-hover {
+      from { background-color: var(--handle-colour); }
+      to { background-color: var(--handle-hover-colour); }
+    }
+
+    .grab-handle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--handle-grab-dot-size);
+      background: var(--handle-bg);
+      border-radius: var(--radius-s);
+    }
+
+    .grab-handle .dot {
+      width: var(--handle-grab-dot-size);
+      height: var(--handle-grab-dot-size);
+      border-radius: 50%;
+      background: var(--handle-grab-colour);
+      flex-shrink: 0;
+    }
+
+    :host([layout="vertical"]) .grab-handle {
+      flex-direction: column;
+      width: var(--handle-grab-thickness);
+      height: var(--handle-grab-size);
+    }
+
+    :host([layout="horizontal"]) .grab-handle {
+      flex-direction: row;
+      width: var(--handle-grab-size);
+      height: var(--handle-grab-thickness);
+    }
+
+    #zone.user-resizing .grab-handle {
+      display: none;
+    }
+    #zone.user-resizing {
+      slot {
+        opacity: 0.5;
+      }
+      .split-bar {
+        background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
+      }
+    }
+
+    #zone:not(.user-resizing) .split-bar:hover {
+      animation: handle-hover 0.001s ease-out 0.7s both;
+    }
+
+    .corner-zone {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      z-index: 10;
+      border-radius: 50%;
+      background: transparent;
+    }
+    .corner-zone:hover {
+      background: transparent;
+    }
+
+    :host([layout='horizontal']) {
+      #zone {
+        flex-direction: column;
+      }
+      .split-bar {
+        position: relative;
+        background-color: var(--handle-colour);
+        transition: background-color 0.3s ease 0s;
+        height: var(--handle-size);
+        width: 100%;
+        cursor: ns-resize;
+      }
+      #zone.user-resizing .split-bar {
+        background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
+      }
+    }
+
+    :host([data-collapsed-a]) slot[name="a"],
+    :host([data-collapsed-b]) slot[name="b"] {
+      display: none;
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "layout", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "sizeA", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "sizeB", void 0);
+__decorate([property({ type: Boolean })], TwoSplitLayoutElement.prototype, "fixedA", void 0);
+__decorate([property({ type: Boolean })], TwoSplitLayoutElement.prototype, "fixedB", void 0);
+__decorate([property({ type: Boolean })], TwoSplitLayoutElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TwoSplitLayoutElement.prototype, "collapsedA", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TwoSplitLayoutElement.prototype, "collapsedB", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "minSizeA", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "maxSizeA", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "minSizeB", void 0);
+__decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "maxSizeB", void 0);
+__decorate([state()], TwoSplitLayoutElement.prototype, "_hasCorner", void 0);
+TwoSplitLayoutElement = __decorate([safeCustomElement(`ixfx-twosplit-layout`)], TwoSplitLayoutElement);
+//#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
 	if (!(el instanceof HTMLElement)) return false;
@@ -5142,6 +7900,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, 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, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectDataResult, collectPanelIds, collectStackPaths, computeColour, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, getActiveDragPanelId, getIcon, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveTracks, serializeLayout, setActive, svgToDataUri, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map