@ixfx/components 0.7.0 → 0.7.1

package/bundle/index.js

@@ -1,5 +1,6 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
 import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Fzf } from "fzf";
 import { Colour } from "@ixfx/visual";
@@ -7,7 +8,6 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { Easings } from "@ixfx/modulation";
 import { classMap } from "lit/directives/class-map.js";
 import "@clinth/vcanvas";
@@ -1405,18 +1405,43 @@ function safeCustomElement(name) {
 //#endregion
 //#region src/icons/registry.ts
 const _registry = /* @__PURE__ */ new Map();
+let _iconFont;
 const iconBus = new EventTarget();
 function registerIcon(name, svg) {
-	_registry.set(name, svg);
+	_registry.set(name, {
+		kind: `svg`,
+		svg
+	});
+	iconBus.dispatchEvent(new CustomEvent(`ixfx-icon-change`, { detail: { name } }));
+}
+function registerFontIcon(name, glyph) {
+	let char;
+	if (typeof glyph === `number`) char = String.fromCodePoint(glyph);
+	else char = glyph;
+	if (char.length === 0) throw new Error(`registerFontIcon: glyph must be non-empty`);
+	_registry.set(name, {
+		kind: `font`,
+		char
+	});
 	iconBus.dispatchEvent(new CustomEvent(`ixfx-icon-change`, { detail: { name } }));
 }
 function getIcon(name) {
+	const entry = _registry.get(name);
+	return entry?.kind === `svg` ? entry.svg : void 0;
+}
+function getIconEntry(name) {
 	return _registry.get(name);
 }
 function hasIcon(name) {
 	return _registry.has(name);
 }
-/** Converts an SVG string to a CSS data-URI value, e.g. for use as a mask-image. */
+function setIconFont(fontFamily) {
+	_iconFont = fontFamily;
+	iconBus.dispatchEvent(new CustomEvent(`ixfx-icon-font-change`, { detail: { name: `` } }));
+}
+function getIconFont() {
+	return _iconFont;
+}
 function svgToDataUri(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
@@ -1440,26 +1465,43 @@ let IxfxIconElement = class IxfxIconElement extends i {
 		this.#onIconChange = (e) => {
 			if (e.detail.name === this.name) this.requestUpdate();
 		};
+		this.#onFontChange = () => {
+			if (getIconEntry(this.name)?.kind === `font`) this.requestUpdate();
+		};
 	}
 	#onIconChange;
+	#onFontChange;
 	connectedCallback() {
 		super.connectedCallback();
 		iconBus.addEventListener(`ixfx-icon-change`, this.#onIconChange);
+		iconBus.addEventListener(`ixfx-icon-font-change`, this.#onFontChange);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		iconBus.removeEventListener(`ixfx-icon-change`, this.#onIconChange);
+		iconBus.removeEventListener(`ixfx-icon-font-change`, this.#onFontChange);
 	}
 	render() {
-		const svg = getIcon(this.name);
-		if (!svg) return A;
+		const entry = getIconEntry(this.name);
+		if (!entry) return A;
 		const hasLabel = this.label.length > 0;
+		if (entry.kind === `font`) {
+			const fontFamily = getIconFont();
+			return b`
+        <span
+          class="font-icon"
+          style=${styleMap({ fontFamily: fontFamily ?? `` })}
+          aria-hidden=${hasLabel ? A : `true`}
+          aria-label=${hasLabel ? this.label : A}
+        >${entry.char}</span>
+      `;
+		}
 		return b`
       <span
         class="icon-wrapper"
         aria-hidden=${hasLabel ? A : `true`}
         aria-label=${hasLabel ? this.label : A}
-      >${unsafeHTML(svg)}</span>
+      >${unsafeHTML(entry.svg)}</span>
     `;
 	}
 	updated(changed) {
@@ -1492,17 +1534,28 @@ let IxfxIconElement = class IxfxIconElement extends i {
       opacity: var(--prominence-disabled-opacity, 0.5);
     }
 
-    .icon-wrapper {
+    .icon-wrapper,
+    .font-icon {
       display: contents;
     }
 
-    :host svg {
+    :host svg,
+    :host .font-icon {
       width: 100%;
       height: 100%;
       transition: transform var(--transition, 0.15s ease-out);
     }
 
-    :host([rotate]) svg {
+    :host .font-icon {
+      font-family: inherit;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([rotate]) svg,
+    :host([rotate]) .font-icon {
       transform: rotate(var(--rotate));
     }
   `];
@@ -3164,6 +3217,11 @@ const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="tr
 */
 const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
 /**
+* Plus / add icon. Pairs with `close` for add/remove actions.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_ADD = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
+/**
 * Error / warning icon. Useful for error notifications.
 * fill="currentColor" so it inherits CSS color.
 */
@@ -3188,12 +3246,31 @@ const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hi
 * fill="currentColor" so it inherits CSS color.
 */
 const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
+/**
+* Folder. Useful for file explorers and sidebars.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
+/**
+* Document / file page. Useful for file lists and document tabs.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FILE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>`;
+/**
+* Magnifying glass. Useful for search panels and inputs.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
 function registerDefaults() {
 	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
 	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
 	registerIcon(`caret-right`, ICON_CARET_RIGHT);
 	registerIcon(`check`, ICON_CHECK);
 	registerIcon(`close`, ICON_CLOSE);
+	registerIcon(`file`, ICON_FILE);
+	registerIcon(`folder`, ICON_FOLDER);
+	registerIcon(`search`, ICON_SEARCH);
+	registerIcon(`add`, ICON_ADD);
 	registerIcon(`error`, ICON_ERROR);
 	registerIcon(`folder-up`, ICON_FOLDER_UP);
 	registerIcon(`info`, ICON_INFO);
@@ -3409,7 +3486,7 @@ let ButtonElement = class ButtonElement extends i {
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return A;
 		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return A;
+		if (!hasIcon(this.icon)) return A;
 		return b`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
 	}
 	render() {
@@ -4244,6 +4321,7 @@ let MenuTrigger = class MenuTrigger extends i {
 		super(..._args);
 		this.mode = `trigger`;
 		this.label = `⋮`;
+		this.iconName = ``;
 		this.placement = `bottom-start`;
 		this.tabStop = true;
 		this._isOpen = false;
@@ -4453,11 +4531,18 @@ let MenuTrigger = class MenuTrigger extends i {
 
     .trigger-area {
       anchor-name: var(--anchor-name);
-      display: inline-flex;
+      /* Block flex (not inline-flex): as an inline-level box this would join
+         the host's inline formatting context and pick up strut/baseline gaps
+         above and below the button, offsetting the glyph from center. */
+      display: flex;
       align-items: stretch;
     }
 
     .trigger-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
       background: none;
       border: none;
       color: var(--surface-3-text);
@@ -4522,7 +4607,7 @@ let MenuTrigger = class MenuTrigger extends i {
         @click=${this._handleTriggerClick}
         @contextmenu=${this._handleContextMenu}
       >
-        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.label}</button>` : null}
+        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.iconName ? b`<ixfx-icon name=${this.iconName}></ixfx-icon>` : this.label}</button>` : null}
         <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
       </div>
       <div
@@ -4537,6 +4622,10 @@ let MenuTrigger = class MenuTrigger extends i {
 };
 __decorate([property({ type: String })], MenuTrigger.prototype, "mode", void 0);
 __decorate([property({ type: String })], MenuTrigger.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], MenuTrigger.prototype, "iconName", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
 __decorate([property({ type: String })], MenuTrigger.prototype, "placement", void 0);
@@ -12807,10 +12896,11 @@ function unregisterDockHost(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) {
+function startDrag(panelId, sourceHost, pointerId, clientX, clientY, kind) {
 	if (activeDrag !== null);
 	activeDrag = {
 		panelId,
+		kind,
 		sourceHost,
 		pointerId,
 		ghost: createGhostForPanel(sourceHost, panelId),
@@ -12883,7 +12973,7 @@ function onKeyDown(event) {
 }
 function findDropZone(drag, clientX, clientY) {
 	for (const host of dragHosts) {
-		const zone = host.computeDropZone(clientX, clientY, drag.panelId);
+		const zone = host.computeDropZone(clientX, clientY, drag.panelId, drag.kind);
 		if (zone !== null) return zone;
 	}
 	return null;
@@ -12971,12 +13061,15 @@ function createEmptyLayout() {
 		root: createEmptyStack()
 	};
 }
-function createStack(panels, active) {
-	return {
+function createStack(panels, active, name) {
+	const stack = {
 		kind: `stack`,
 		panels: [...panels],
 		active: active ?? panels[0] ?? ``
 	};
+	const trimmed = name?.trim();
+	if (trimmed) stack.name = trimmed;
+	return stack;
 }
 function createSplit(direction, children, sizes) {
 	const mean = children.length > 0 ? 1 / children.length : 1;
@@ -12990,7 +13083,8 @@ function createSplit(direction, children, sizes) {
 /**
 * 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)
+* - empty *unnamed* stacks removed from their parent split (and their
+*   `sizes` entry); named empty stacks are kept so the name stays addressable
 * - 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
@@ -12999,13 +13093,14 @@ function createSplit(direction, children, sizes) {
 */
 function normalize(root) {
 	if (isStack(root)) {
+		sanitizeStackName(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) {
+		if (isStack(child) && child.panels.length === 0 && !child.name) {
 			root.children.splice(i, 1);
 			root.sizes.splice(i, 1);
 			continue;
@@ -13039,17 +13134,36 @@ function replaceNodeContents(target, source) {
 		const t = target;
 		t.panels = source.panels;
 		t.active = source.active;
+		if (source.name !== void 0) t.name = source.name;
+		else delete t.name;
+		if (source.hideLabels !== void 0) t.hideLabels = source.hideLabels;
+		else delete t.hideLabels;
 		delete t.collapsed;
 		delete t.preCollapseSize;
+		if (source.collapsed !== void 0) t.collapsed = source.collapsed;
+		if (source.preCollapseSize !== void 0) t.preCollapseSize = source.preCollapseSize;
 	} else {
 		target.kind = `split`;
 		const t = target;
 		t.direction = source.direction;
 		t.children = source.children;
 		t.sizes = source.sizes;
+		const stale = t;
+		delete stale.panels;
+		delete stale.active;
+		delete stale.name;
+		delete stale.collapsed;
+		delete stale.preCollapseSize;
 	}
 	return target;
 }
+/** Trim `name`; drop it when empty / non-string so lookups stay predictable. */
+function sanitizeStackName(stack) {
+	if (stack.name === void 0) return;
+	const trimmed = typeof stack.name === `string` ? stack.name.trim() : ``;
+	if (trimmed) stack.name = trimmed;
+	else delete stack.name;
+}
 function findNode(root, path) {
 	let current = root;
 	for (const index of path) {
@@ -13083,6 +13197,36 @@ function collectPanelIds(root) {
 	return root.children.flatMap(collectPanelIds);
 }
 /**
+* Path of the first stack (tree order) whose `name` matches, or null.
+* Names are expected to be unique per layout; duplicates resolve first-wins.
+*/
+function findStackPathByName(root, name) {
+	const wanted = name.trim();
+	if (!wanted) return null;
+	return findStackPathByNameInner(root, wanted, []);
+}
+function findStackPathByNameInner(node, name, path) {
+	if (isStack(node)) return node.name === name ? path : null;
+	for (let i = 0; i < node.children.length; i++) {
+		const found = findStackPathByNameInner(node.children[i], name, [...path, i]);
+		if (found !== null) return found;
+	}
+	return null;
+}
+/** Names of every named stack leaf, in tree order. */
+function collectContainerNames(root) {
+	const out = [];
+	const visit = (node) => {
+		if (isStack(node)) {
+			if (node.name) out.push(node.name);
+			return;
+		}
+		node.children.forEach(visit);
+	};
+	visit(root);
+	return out;
+}
+/**
 * Paths of every stack leaf, in tree order. `[]` is the root itself when it
 * is a stack.
 */
@@ -13197,6 +13341,251 @@ function extractStack(root, stackPath, fallbackStack) {
 	normalize(root);
 	return stack;
 }
+/** Tolerance for edge-touch comparisons in unit-square geometry. */
+const GEOM_EPS = 1e-9;
+function pathsEqual(a, b) {
+	return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+/**
+* Resolve a {@link DockLeafRef} to a stack path. Strings match container
+* `name` first-wins; arrays must index an existing stack leaf. Returns null
+* when unresolvable.
+*/
+function resolveLeafPath(root, ref) {
+	if (typeof ref === `string`) return findStackPathByName(root, ref);
+	if (!Array.isArray(ref)) return null;
+	let current = root;
+	for (const index of ref) {
+		if (!Number.isInteger(index) || index < 0) return null;
+		if (!isSplit(current)) return null;
+		const next = current.children[index];
+		if (!next) return null;
+		current = next;
+	}
+	return isStack(current) ? [...ref] : null;
+}
+/** Absolute (unit-square) rect of every stack leaf, in tree order. */
+function computeLeafGeoms(root) {
+	const out = [];
+	const visit = (node, path, rect) => {
+		if (isStack(node)) {
+			out.push({
+				path,
+				name: node.name ?? null,
+				rect
+			});
+			return;
+		}
+		const total = node.sizes.reduce((sum, w) => sum + w, 0);
+		const safe = total > 0 ? total : node.children.length || 1;
+		let offset = 0;
+		node.children.forEach((child, i) => {
+			const frac = (node.sizes[i] ?? safe / node.children.length) / safe;
+			if (node.direction === `row`) {
+				const w = rect.w * frac;
+				visit(child, [...path, i], {
+					x: rect.x + offset,
+					y: rect.y,
+					w,
+					h: rect.h
+				});
+				offset += w;
+			} else {
+				const h = rect.h * frac;
+				visit(child, [...path, i], {
+					x: rect.x,
+					y: rect.y + offset,
+					w: rect.w,
+					h
+				});
+				offset += h;
+			}
+		});
+	};
+	visit(root, [], {
+		x: 0,
+		y: 0,
+		w: 1,
+		h: 1
+	});
+	return out;
+}
+function intervalOverlap(a0, a1, b0, b1) {
+	return Math.min(a1, b1) - Math.max(a0, b0);
+}
+/**
+* Geometric neighbours of a leaf — what the user sees above / below / left /
+* right of it. Each list holds `{ name, path }` (name is null for unnamed
+* leaves), ordered most-overlapping first. Returns null when `ref` is
+* unresolvable.
+*/
+function getLeafNeighbours(root, ref) {
+	const path = resolveLeafPath(root, ref);
+	if (path === null) return null;
+	const geoms = computeLeafGeoms(root);
+	const self = geoms.find((g) => pathsEqual(g.path, path));
+	if (!self) return null;
+	const s = self.rect;
+	const above = [];
+	const below = [];
+	const left = [];
+	const right = [];
+	geoms.forEach((g, order) => {
+		if (g === self) return;
+		const r = g.rect;
+		const info = {
+			name: g.name,
+			path: [...g.path]
+		};
+		if (Math.abs(r.y + r.h - s.y) < GEOM_EPS) {
+			const o = intervalOverlap(r.x, r.x + r.w, s.x, s.x + s.w);
+			if (o > GEOM_EPS) above.push({
+				info,
+				overlap: o,
+				order
+			});
+		}
+		if (Math.abs(s.y + s.h - r.y) < GEOM_EPS) {
+			const o = intervalOverlap(r.x, r.x + r.w, s.x, s.x + s.w);
+			if (o > GEOM_EPS) below.push({
+				info,
+				overlap: o,
+				order
+			});
+		}
+		if (Math.abs(r.x + r.w - s.x) < GEOM_EPS) {
+			const o = intervalOverlap(r.y, r.y + r.h, s.y, s.y + s.h);
+			if (o > GEOM_EPS) left.push({
+				info,
+				overlap: o,
+				order
+			});
+		}
+		if (Math.abs(s.x + s.w - r.x) < GEOM_EPS) {
+			const o = intervalOverlap(r.y, r.y + r.h, s.y, s.y + s.h);
+			if (o > GEOM_EPS) right.push({
+				info,
+				overlap: o,
+				order
+			});
+		}
+	});
+	const rank = (hits) => hits.sort((a, b) => b.overlap - a.overlap || a.order - b.order).map((h) => h.info);
+	return {
+		above: rank(above),
+		below: rank(below),
+		left: rank(left),
+		right: rank(right)
+	};
+}
+/**
+* Exchange two leaves' positions in the tree, each carrying its size slot so
+* the remaining structure and proportions are untouched. Returns false when
+* either path is not a stack leaf.
+*/
+function swapLeaves(root, pathA, pathB) {
+	if (pathsEqual(pathA, pathB)) return false;
+	const nodeA = findNode(root, pathA);
+	const nodeB = findNode(root, pathB);
+	if (nodeA === null || nodeB === null || !isStack(nodeA) || !isStack(nodeB)) return false;
+	const parentA = findParentOf(root, pathA);
+	const parentB = findParentOf(root, pathB);
+	if (parentA === null || parentB === null) return false;
+	const indexA = pathA[pathA.length - 1];
+	const indexB = pathB[pathB.length - 1];
+	if (parentA === parentB) {
+		const p = parentA;
+		[p.children[indexA], p.children[indexB]] = [p.children[indexB], p.children[indexA]];
+		[p.sizes[indexA], p.sizes[indexB]] = [p.sizes[indexB] ?? 1, p.sizes[indexA] ?? 1];
+		return true;
+	}
+	const carriedNode = parentA.children[indexA];
+	const carriedSize = parentA.sizes[indexA] ?? 1;
+	parentA.children[indexA] = parentB.children[indexB];
+	parentA.sizes[indexA] = parentB.sizes[indexB] ?? 1;
+	parentB.children[indexB] = carriedNode;
+	parentB.sizes[indexB] = carriedSize;
+	return true;
+}
+/**
+* Move a leaf one position in `direction`, swapping with the neighbour it
+* shares the longest edge with. Returns false when `ref` is unresolvable or
+* nothing adjoins in that direction. Run `normalize()` afterwards.
+*/
+function moveLeafStep(root, ref, direction) {
+	const path = resolveLeafPath(root, ref);
+	if (path === null) return false;
+	const neighbours = getLeafNeighbours(root, ref);
+	if (neighbours === null) return false;
+	const list = direction === `up` ? neighbours.above : direction === `down` ? neighbours.below : direction === `left` ? neighbours.left : neighbours.right;
+	if (list.length === 0) return false;
+	return swapLeaves(root, path, list[0].path);
+}
+/**
+* Move a leaf to an edge of the overall layout, keeping the rest of the
+* tree intact as a single subtree and preserving the leaf's absolute size
+* along the target axis. Returns false when `ref` is unresolvable or the
+* layout holds a single leaf. Run `normalize()` afterwards (also safe to
+* call it twice — the host's commit does).
+*/
+function moveLeafNodeToEdge(root, ref, edge) {
+	const path = resolveLeafPath(root, ref);
+	if (path === null || path.length === 0) return false;
+	const self = computeLeafGeoms(root).find((g) => pathsEqual(g.path, path));
+	if (!self) return false;
+	const horizontal = edge === `left` || edge === `right`;
+	const frac = Math.min(Math.max(horizontal ? self.rect.w : self.rect.h, .05), .95);
+	if (!(frac > 0) || frac >= 1) return false;
+	const parent = findParentOf(root, path);
+	if (parent === null) return false;
+	const [node] = parent.children.splice(path[path.length - 1], 1);
+	parent.sizes.splice(path[path.length - 1], 1);
+	if (!node) return false;
+	normalize(root);
+	const atStart = edge === `left` || edge === `top`;
+	const direction = horizontal ? `row` : `column`;
+	if (isStack(root)) {
+		const rest = root;
+		const remaining = {
+			kind: `stack`,
+			panels: [...rest.panels],
+			active: rest.active
+		};
+		if (rest.name !== void 0) remaining.name = rest.name;
+		if (rest.collapsed !== void 0) remaining.collapsed = rest.collapsed;
+		if (rest.preCollapseSize !== void 0) remaining.preCollapseSize = rest.preCollapseSize;
+		replaceNodeContents(root, {
+			kind: `split`,
+			direction,
+			children: atStart ? [node, remaining] : [remaining, node],
+			sizes: atStart ? [frac, 1 - frac] : [1 - frac, frac]
+		});
+		return true;
+	}
+	if (isSplit(root) && root.direction === direction) {
+		const size = frac * (root.sizes.reduce((total, w) => total + w, 0) || root.children.length || 1) / (1 - frac);
+		const at = atStart ? 0 : root.children.length;
+		root.children.splice(at, 0, node);
+		root.sizes.splice(at, 0, size);
+		return true;
+	}
+	if (isSplit(root)) {
+		const inner = {
+			kind: `split`,
+			direction: root.direction,
+			children: root.children,
+			sizes: root.sizes
+		};
+		replaceNodeContents(root, {
+			kind: `split`,
+			direction,
+			children: atStart ? [node, inner] : [inner, node],
+			sizes: atStart ? [frac, 1 - frac] : [1 - frac, frac]
+		});
+		return true;
+	}
+	return false;
+}
 function serializeLayout(root) {
 	return {
 		version: 1,
@@ -13210,6 +13599,8 @@ function serializeNode(node) {
 			panels: [...node.panels],
 			active: node.active
 		};
+		if (node.name !== void 0) out.name = node.name;
+		if (node.hideLabels !== void 0) out.hideLabels = node.hideLabels;
 		if (node.collapsed !== void 0) out.collapsed = node.collapsed;
 		if (node.preCollapseSize !== void 0) out.preCollapseSize = node.preCollapseSize;
 		return out;
@@ -14259,14 +14650,12 @@ let TabListElement = class TabListElement extends i {
 			if (!el) return;
 			if (!this.#isVertical) {
 				if (event.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
-				const prev = el.scrollLeft;
-				el.scrollLeft = prev + event.deltaY;
-				if (el.scrollLeft !== prev) event.preventDefault();
+				el.scrollLeft = el.scrollLeft + event.deltaY;
+				event.preventDefault();
 			} else {
 				if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight) return;
-				const prev = el.scrollTop;
-				el.scrollTop = prev + event.deltaX;
-				if (el.scrollTop !== prev) event.preventDefault();
+				el.scrollTop = el.scrollTop + event.deltaX;
+				event.preventDefault();
 			}
 		};
 		this.#onSlotClick = (event) => {
@@ -14353,8 +14742,11 @@ let TabListElement = class TabListElement extends i {
 		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
 	}
 	get #containerClass() {
-		const base = this.scrollable ? `${this.orientation} scrollable` : this.orientation;
-		return this.dragMode === `reorder` ? `${base} reorder` : base;
+		return [
+			this.scrollable ? `${this.orientation} scrollable` : this.orientation,
+			this.scrollable ? this.#isVertical ? `scroll-fade-y` : `scroll-fade-x` : ``,
+			this.dragMode === `reorder` ? `reorder` : ``
+		].filter(Boolean).join(` `);
 	}
 	render() {
 		const caretStyle = this.#computeCaretStyle();
@@ -14636,7 +15028,11 @@ let TabListElement = class TabListElement extends i {
 		return this.shadowRoot?.getElementById(`container`) ?? null;
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			i$3`
   :host {
       display: inline-block;
       --activated-colour: var(--accent);
@@ -14719,8 +15115,12 @@ let TabListElement = class TabListElement extends i {
       overflow: hidden;
     }
     #container.horizontal.scrollable {
-      overflow-x: auto;
+      overflow-x: scroll;
       --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.horizontal.scrollable::-webkit-scrollbar {
+      display: none;
     }
     #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
       flex-shrink: 0;
@@ -14733,9 +15133,13 @@ let TabListElement = class TabListElement extends i {
       flex-direction: column-reverse;
     }
     #container.vertical-stack.scrollable {
-      overflow-y: auto;
+      overflow-y: scroll;
       max-height: var(--scroll-max-height);
       --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.vertical-stack.scrollable::-webkit-scrollbar {
+      display: none;
     }
     #container.vertical-side {
       flex-direction: column;
@@ -14745,9 +15149,13 @@ let TabListElement = class TabListElement extends i {
       flex-direction: column-reverse;
     }
     #container.vertical-side.scrollable {
-      overflow-y: auto;
+      overflow-y: scroll;
       max-height: var(--scroll-max-height);
       --allow-overflow: visible;
+      scrollbar-width: none;
+    }
+    #container.vertical-side.scrollable::-webkit-scrollbar {
+      display: none;
     }
 
     ::slotted(ixfx-tab-list-item) {
@@ -14790,7 +15198,8 @@ let TabListElement = class TabListElement extends i {
     ::slotted(.activated) {
       --colour: var(--activated-colour);
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
@@ -14822,9 +15231,13 @@ let TabListItemElement = class TabListItemElement extends i {
 		this.registry = void 0;
 		this._compact = false;
 		this._hasToolbarContent = false;
+		this._labelObserver = null;
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
+		this._onLabelSlotChange = () => {
+			this._syncLabelSizer();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -14833,6 +15246,13 @@ let TabListItemElement = class TabListItemElement extends i {
 		});
 		this._resizeObserver.observe(this);
 		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
+		this._labelObserver = new MutationObserver(() => this._syncLabelSizer());
+		this._labelObserver.observe(this, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -14840,7 +15260,10 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._resizeObserver = void 0;
 		this._commandCleanup?.();
 		this._commandCleanup = void 0;
+		this._labelObserver?.disconnect();
+		this._labelObserver = null;
 		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -14863,12 +15286,25 @@ let TabListItemElement = class TabListItemElement extends i {
 			if (id === this.commandActive) this.click();
 		});
 	}
+	/**
+	* Mirror the default-slot text into `.label[data-label]` for the `::after`
+	* width sizer. Slotted toolbar content is excluded.
+	*/
+	_syncLabelSizer() {
+		const slot = this.shadowRoot?.querySelector(`slot:not([name])`);
+		const label = this.shadowRoot?.querySelector(`.label`);
+		if (slot === null || slot === void 0 || label === null || label === void 0) return;
+		const text = slot.assignedNodes().filter((node) => !(node instanceof HTMLElement && node.hasAttribute(`slot`))).map((node) => node.textContent ?? ``).join(``);
+		if (text) label.setAttribute(`data-label`, text);
+		else label.removeAttribute(`data-label`);
+	}
 	_updateToolbarContent() {
 		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
 		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
 	}
 	firstUpdated() {
 		this._updateToolbarContent();
+		this._syncLabelSizer();
 	}
 	render() {
 		const showLabel = !this.hideLabels || !this.iconName;
@@ -14910,15 +15346,21 @@ let TabListItemElement = class TabListItemElement extends i {
 			i$3`
       :host {
         --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
+        --selected-tab-icon-color: var(--ixfx-selected-tab-icon-color, var(--accent));
         --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
         --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
+        --selected-tab-text-decoration: var(--ixfx-selected-tab-text-decoration, none);
+        --selected-tab-text-decoration-color: var(--ixfx-selected-tab-text-decoration-color, var(--accent));
+        --selected-tab-text-decoration-thickness: var(--ixfx-selected-tab-text-decoration-thickness, 0px);
+        --selected-tab-text-decoration-offset: var(--ixfx-selected-tab-text-decoration-offset, 2px);
         --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);
+        font-size: var(--text-m);
+        color: inherit;
         /* 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. */
@@ -14933,7 +15375,18 @@ let TabListItemElement = class TabListItemElement extends i {
         font-weight: 500;
         border: var(--selected-tab-border-width) solid transparent;
         gap: var(--space-s);
+        transition: background var(--transition, 0.15s);
+      }
 
+      /* Hover ("tickle") background. When --ixfx-tab-hover-background is
+         unset each state keeps its resting background, so existing
+         consumers see no change. */
+      :host(:hover:not([selected])) > div {
+        background: var(--ixfx-tab-hover-background, transparent);
+      }
+
+      :host([selected]:hover) > div {
+        background: var(--ixfx-tab-hover-background, var(--selected-background));
       }
 
       :host([selected]) > div {
@@ -14947,6 +15400,13 @@ let TabListItemElement = class TabListItemElement extends i {
         border-radius:var(--radius-m);
       }
 
+      :host([selected]) .label {
+        text-decoration: var(--selected-tab-text-decoration);
+        text-decoration-color: var(--selected-tab-text-decoration-color);
+        text-decoration-thickness: var(--selected-tab-text-decoration-thickness);
+        text-decoration-offset: var(--selected-tab-text-decoration-offset);
+      }
+
       .label {
         overflow: var(--allow-overflow, hidden);
         text-overflow: ellipsis;
@@ -14955,10 +15415,29 @@ let TabListItemElement = class TabListItemElement extends i {
         flex: 1 1 auto;
       }
 
+      /* Width sizer: an invisible copy of the label, always set at the
+         selected weight, so activating a tab (bold) never shifts the strip.
+         Text is mirrored from the default slot via the data-label attribute
+         (see _syncLabelSizer). */
+      .label::after {
+        content: attr(data-label);
+        display: block;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+        font-weight: var(--selected-tab-weight);
+      }
+
       ixfx-icon {
         flex-shrink: 0;
       }
 
+      /* Leading icon (direct child — not close/toolbar icons) picks up the
+         accent when selected, so icon-only tabs read as active. */
+      :host([selected]) > div > ixfx-icon {
+        color: var(--selected-tab-icon-color);
+      }
+
       .actions {
         display: flex;
         align-items: center;
@@ -15370,6 +15849,7 @@ let DockPanelElement = class DockPanelElement extends i {
 		this.iconName = ``;
 		this.closable = false;
 		this.collapsible = false;
+		this.kind = `any`;
 		this.accepts = ``;
 		this.presentation = `solo`;
 		this._collapsed = false;
@@ -15423,6 +15903,10 @@ let DockPanelElement = class DockPanelElement extends i {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.hasAttribute(`title`)) {
+			if (!this.hasAttribute(`label`)) this.title = this.getAttribute(`title`) ?? ``;
+			this.removeAttribute(`title`);
+		}
 		this.addEventListener(`pointerdown`, this._onPointerDown);
 	}
 	disconnectedCallback() {
@@ -15514,13 +15998,20 @@ __decorate([property({
 	attribute: `panel-id`,
 	reflect: true
 })], DockPanelElement.prototype, "panelId", void 0);
-__decorate([property({ type: String })], DockPanelElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `label`
+})], 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,
+	reflect: true
+})], DockPanelElement.prototype, "kind", void 0);
 __decorate([property({
 	type: String,
 	attribute: `accepts`
@@ -15552,13 +16043,16 @@ let DockHostElement = class DockHostElement extends i {
 		this._dragActive = false;
 		this._junctions = [];
 		this._toolbarsOut = /* @__PURE__ */ new Map();
+		this._leafContentRules = /* @__PURE__ */ new Map();
 		this._tabDragPending = null;
 		this._junctionsKey = ``;
 		this._junctionsRaf = null;
 		this._hostResizeObserver = null;
+		this._toolbarSlots = /* @__PURE__ */ new Set();
+		this._toolbarObserver = null;
 		this._onDragStart = (event) => {
 			const { panelId, pointerId, clientX, clientY } = event.detail;
-			startDrag(panelId, this, pointerId, clientX, clientY);
+			startDrag(panelId, this, pointerId, clientX, clientY, this._findPanelEl(panelId)?.kind);
 		};
 		this._onPoolSlotChange = () => {
 			this._syncPool();
@@ -15605,11 +16099,12 @@ let DockHostElement = class DockHostElement extends i {
 			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;
+			const closing = findNode(this._model, path);
+			if (closing === null || !isStack(closing)) return;
+			const moving = [...closing.panels];
 			this._returnAllToolbars();
-			extractStack(this._model, path, fallback);
+			extractStack(this._model, path);
+			for (const panelId of moving) addPanelToStack(this._firstStackAllowing(this._panelKind(panelId)), panelId);
 			this._commit();
 		};
 		this._onTabChange = (event, path) => {
@@ -15674,11 +16169,21 @@ let DockHostElement = class DockHostElement extends i {
 		this.addEventListener(`dock-panel-drag-start`, this._onDragStart);
 		this._hostResizeObserver = new ResizeObserver(() => this._scheduleJunctions());
 		this._hostResizeObserver.observe(this);
+		this._scanToolbarSlots();
+		this._toolbarObserver = new MutationObserver(() => this._scanToolbarSlots());
+		this._toolbarObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`slot`]
+		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		unregisterDockHost(this);
 		this.removeEventListener(`dock-panel-drag-start`, this._onDragStart);
+		this._toolbarObserver?.disconnect();
+		this._toolbarObserver = null;
 		this._hostResizeObserver?.disconnect();
 		this._hostResizeObserver = null;
 		if (this._junctionsRaf !== null) {
@@ -15731,6 +16236,19 @@ let DockHostElement = class DockHostElement extends i {
 	_scanPanels() {
 		return Array.from(this.children).filter((el) => el instanceof HTMLElement && el.tagName === `IXFX-DOCK-PANEL` && Boolean(el.panelId));
 	}
+	/** Refresh the set of provided `toolbar-<name>` slots; re-render on change. */
+	_scanToolbarSlots() {
+		const found = /* @__PURE__ */ new Set();
+		for (const child of this.children) {
+			if (!(child instanceof HTMLElement)) continue;
+			const slot = child.getAttribute(`slot`) ?? ``;
+			if (slot.startsWith(`toolbar-`) && slot.length > `toolbar-`.length) found.add(slot);
+		}
+		if (found.size !== this._toolbarSlots.size || [...found].some((s) => !this._toolbarSlots.has(s))) {
+			this._toolbarSlots = found;
+			this.requestUpdate();
+		}
+	}
 	_findPanelEl(panelId) {
 		return this._pool.find((p) => p.panelId === panelId) ?? this._scanPanels().find((p) => p.panelId === panelId);
 	}
@@ -15744,7 +16262,33 @@ let DockHostElement = class DockHostElement extends i {
 		return fresh;
 	}
 	_appendPanelToFirstStack(panelId) {
-		addPanelToStack(this._model.kind === `stack` ? this._model : this._firstStack(), panelId);
+		const kind = this._panelKind(panelId);
+		if (this._model.kind === `stack` && this._stackAllowsKind(this._model, kind)) {
+			addPanelToStack(this._model, panelId);
+			return;
+		}
+		addPanelToStack(this._firstStackAllowing(kind), panelId);
+	}
+	/** Normalized content kind of a panel (`'any'` when unknown/unset). */
+	_panelKind(panelId) {
+		return normalizeKind(this._findPanelEl(panelId)?.kind);
+	}
+	/** Whether `kind` may live in `stack` under the current leaf rules. */
+	_stackAllowsKind(stack, kind) {
+		if (stack.name === void 0) return true;
+		const rules = this._leafContentRules.get(stack.name);
+		if (rules === void 0) return true;
+		if (rules.deny.has(kind)) return false;
+		return rules.allow === null || rules.allow.has(kind);
+	}
+	/** First stack (tree order) whose rules admit `kind`, else the first stack. */
+	_firstStackAllowing(kind) {
+		for (const path of collectStackPaths(this._model)) {
+			const node = findNode(this._model, path);
+			if (node !== null && isStack(node) && this._stackAllowsKind(node, kind)) return node;
+		}
+		console.warn(`[ixfx-dock-host] no leaf admits kind "${kind}", using first stack`);
+		return this._firstStack();
 	}
 	_syncPool() {
 		const current = this._scanPanels();
@@ -15786,7 +16330,34 @@ let DockHostElement = class DockHostElement extends i {
 		this.requestUpdate();
 		this._emitChange();
 	}
+	/**
+	* Dock a panel. Returns false (without touching the DOM) when the
+	* explicitly targeted container denies the panel's `kind`.
+	*/
 	addPanel(panel, target) {
+		const kind = panel instanceof HTMLElement ? normalizeKind(panel.kind) : normalizeKind(panel.kind);
+		const op = target?.op ?? `tabs`;
+		let stackPath = null;
+		let splitTarget = null;
+		if (target?.container !== void 0) {
+			const namedPath = findStackPathByName(this._model, target.container);
+			if (namedPath === null) console.warn(`[ixfx-dock-host] addPanel: unknown container "${target.container}", appending to first admitting stack`);
+			else if (op === `tabs` && !this._stackAllowsKindAt(namedPath, kind)) {
+				console.warn(`[ixfx-dock-host] addPanel: container "${target.container}" does not admit kind "${kind}"`);
+				return false;
+			} else stackPath = namedPath;
+		} else if (target?.stack) {
+			const found = findStackOf(this._model, target.stack);
+			if (found === null) console.warn(`[ixfx-dock-host] addPanel: unknown stack panel "${target.stack}", appending to first admitting stack`);
+			else if (op === `tabs` && !this._stackAllowsKindAt(found, kind)) {
+				console.warn(`[ixfx-dock-host] addPanel: target stack does not admit kind "${kind}"`);
+				return false;
+			} else stackPath = found;
+		}
+		if (stackPath !== null && op !== `tabs`) {
+			splitTarget = stackPath;
+			stackPath = null;
+		}
 		let el;
 		if (panel instanceof HTMLElement) el = panel;
 		else {
@@ -15796,19 +16367,16 @@ let DockHostElement = class DockHostElement extends i {
 			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 (panel.kind !== void 0) el.kind = panel.kind;
 		}
 		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`);
-			}
+		if (collectPanelIds(this._model).includes(el.panelId)) this._removeFromModel(el.panelId);
+		if (splitTarget !== null) insertBeside(this._model, splitTarget, opToDirection(op), createStack([el.panelId]), `after`);
+		else if (stackPath !== null) {
+			const stack = findNode(this._model, stackPath);
+			if (stack !== null && isStack(stack)) addPanelToStack(stack, el.panelId, target?.index);
 		} else this._appendPanelToFirstStack(el.panelId);
 		normalize(this._model);
 		this.requestUpdate();
@@ -15818,6 +16386,12 @@ let DockHostElement = class DockHostElement extends i {
 			composed: true
 		}));
 		this._emitChange();
+		return true;
+	}
+	/** Whether the stack at `stackPath` admits `kind` under the leaf rules. */
+	_stackAllowsKindAt(stackPath, kind) {
+		const stack = findNode(this._model, stackPath);
+		return stack !== null && isStack(stack) && this._stackAllowsKind(stack, kind);
 	}
 	removePanel(panelId) {
 		if (!collectPanelIds(this._model).includes(panelId)) return false;
@@ -15853,6 +16427,123 @@ let DockHostElement = class DockHostElement extends i {
 	getPanelIds() {
 		return collectPanelIds(this._model);
 	}
+	/** Names of every named stack leaf, in tree order. */
+	getContainerNames() {
+		return collectContainerNames(this._model);
+	}
+	/**
+	* Snapshot of a named container (`{ name, panels, active }`), or null when
+	* no stack carries that name. First match wins when duplicated.
+	*/
+	getContainer(name) {
+		const path = findStackPathByName(this._model, name);
+		if (path === null) return null;
+		const node = findNode(this._model, path);
+		if (node === null || !isStack(node) || node.name === void 0) return null;
+		return {
+			name: node.name,
+			panels: [...node.panels],
+			active: node.active
+		};
+	}
+	/** Panel-ids in a named container, in tab order (`[]` when unknown/empty). */
+	getContainerPanels(name) {
+		return this.getContainer(name)?.panels ?? [];
+	}
+	/** Panel elements in a named container, in tab order — for iterating children. */
+	getContainerElements(name) {
+		return this.getContainerPanels(name).map((id) => this._findPanelEl(id)).filter((el) => el !== void 0);
+	}
+	/**
+	* Restrict a named container to only the given panel kinds — e.g.
+	* `setLeafExclusiveContents('editor', ['document'])`. `tabs` drops,
+	* `addPanel`, and re-homing into the leaf then refuse other kinds, while
+	* edge splits beside the leaf stay allowed (they create a new leaf).
+	* Pass `[]` to seal the leaf (nothing admitted). Warns when no stack
+	* currently carries `name`, but the rule is still stored and applies once
+	* one appears. Rules are host policy: kept across `loadLayout()`, never
+	* serialized.
+	*/
+	setLeafExclusiveContents(name, kinds) {
+		const key = name.trim();
+		if (!key) {
+			console.warn(`[ixfx-dock-host] setLeafExclusiveContents: empty container name`);
+			return;
+		}
+		const allow = new Set(kinds.map((k) => k.trim()).filter((k) => k.length > 0));
+		const entry = this._leafContentRules.get(key) ?? {
+			allow: null,
+			deny: /* @__PURE__ */ new Set()
+		};
+		entry.allow = allow;
+		this._leafContentRules.set(key, entry);
+		if (findStackPathByName(this._model, key) === null) console.warn(`[ixfx-dock-host] setLeafExclusiveContents: no container named "${key}" yet; rule stored`);
+	}
+	/**
+	* Forbid the given panel kinds in a named container — e.g.
+	* `setLeafDenyContents('footer', ['files', 'document'])`. Everything else
+	* stays admitted. Pass `[]` to lift the denial. See
+	* {@link setLeafExclusiveContents} for scope/ordering notes.
+	*/
+	setLeafDenyContents(name, kinds) {
+		const key = name.trim();
+		if (!key) {
+			console.warn(`[ixfx-dock-host] setLeafDenyContents: empty container name`);
+			return;
+		}
+		const deny = new Set(kinds.map((k) => k.trim()).filter((k) => k.length > 0));
+		const entry = this._leafContentRules.get(key) ?? {
+			allow: null,
+			deny: /* @__PURE__ */ new Set()
+		};
+		entry.deny = deny;
+		if (entry.allow === null && entry.deny.size === 0) this._leafContentRules.delete(key);
+		else this._leafContentRules.set(key, entry);
+		if (findStackPathByName(this._model, key) === null) console.warn(`[ixfx-dock-host] setLeafDenyContents: no container named "${key}" yet; rule stored`);
+	}
+	/** Remove every content rule for a named container. */
+	clearLeafContentRestrictions(name) {
+		this._leafContentRules.delete(name.trim());
+	}
+	/** Copy of a container's rules, or null when unrestricted. */
+	getLeafContentRestrictions(name) {
+		const rules = this._leafContentRules.get(name.trim());
+		if (rules === void 0) return null;
+		return {
+			allow: rules.allow === null ? null : [...rules.allow],
+			deny: [...rules.deny]
+		};
+	}
+	/**
+	* Geometric neighbours of a leaf (`name` or numeric `path`) — what sits
+	* above / below / left / right of it on screen. Each entry is
+	* `{ name, path }` (`name` is null for unnamed leaves), ordered
+	* most-overlapping first. Returns null when the leaf is unknown.
+	*/
+	getNeighbours(leaf) {
+		return getLeafNeighbours(this._model, leaf);
+	}
+	/**
+	* Move a leaf one position in `direction`, swapping with the neighbour it
+	* shares the longest edge with (both keep the remaining structure intact).
+	* Returns false when the leaf is unknown or nothing adjoins that way.
+	*/
+	moveLeaf(leaf, direction) {
+		if (!moveLeafStep(this._model, leaf, direction)) return false;
+		this._commit();
+		return true;
+	}
+	/**
+	* Move a leaf to an edge of the overall layout (e.g. toggle a sidebar from
+	* `left` to `right`). The rest of the layout stays intact as a single
+	* subtree and the leaf keeps its absolute size along the target axis.
+	* Returns false when the leaf is unknown or the layout holds one leaf.
+	*/
+	moveLeafToEdge(leaf, edge) {
+		if (!moveLeafNodeToEdge(this._model, leaf, edge)) return false;
+		this._commit();
+		return true;
+	}
 	/**
 	* Capture a structured-clone-safe {@link DockPanelSnapshot} of a panel
 	* (identity, chrome attributes, and a best-effort `innerHTML`). Returns
@@ -15867,6 +16558,7 @@ let DockHostElement = class DockHostElement extends i {
 			iconName: el.iconName,
 			closable: el.closable,
 			collapsible: el.collapsible,
+			kind: normalizeKind(el.kind),
 			accepts: el.accepts,
 			contentHTML: el.innerHTML
 		};
@@ -15890,10 +16582,11 @@ let DockHostElement = class DockHostElement extends i {
 	* `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__"`).
+	* panel (defaults to `"__external__"`). `kind` covers leaf content rules
+	* for panels unknown to this host (defaults to `'any'`).
 	*/
-	queryDropTarget(clientX, clientY, panelId = `__external__`) {
-		const zone = this.computeDropZone(clientX, clientY, panelId);
+	queryDropTarget(clientX, clientY, panelId = `__external__`, kind) {
+		const zone = this.computeDropZone(clientX, clientY, panelId, kind);
 		return zone === null ? null : zoneToTarget(zone);
 	}
 	/**
@@ -15902,9 +16595,9 @@ let DockHostElement = class DockHostElement extends i {
 	* one. Call on every pointer update from the outer coordinator, then
 	* {@link endExternalDrop} when the drag leaves or ends.
 	*/
-	previewExternalDrop(clientX, clientY, panelId = `__external__`) {
+	previewExternalDrop(clientX, clientY, panelId = `__external__`, kind) {
 		this.setDragActive(true);
-		const zone = this.computeDropZone(clientX, clientY, panelId);
+		const zone = this.computeDropZone(clientX, clientY, panelId, kind);
 		this.setDropZone(zone);
 		return zone === null ? null : zoneToTarget(zone);
 	}
@@ -15917,8 +16610,9 @@ let DockHostElement = class DockHostElement extends i {
 	* 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
+	* `canAccept` and leaf content rules); without them, or when the point
+	* misses the host, it goes into the first stack admitting its kind.
+	* Returns the created element, or null when a panel
 	* with that id is already docked here.
 	*/
 	acceptExternalPanel(snapshot, at) {
@@ -15929,6 +16623,7 @@ let DockHostElement = class DockHostElement extends i {
 		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 (`kind` in snapshot && snapshot.kind !== void 0) el.kind = snapshot.kind;
 		if (`accepts` in snapshot && snapshot.accepts) el.setAttribute(`accepts`, snapshot.accepts);
 		if (`contentHTML` in snapshot && snapshot.contentHTML) el.innerHTML = snapshot.contentHTML;
 		this._returnAllToolbars();
@@ -15954,9 +16649,10 @@ let DockHostElement = class DockHostElement extends i {
 	* 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) {
+	computeDropZone(clientX, clientY, panelId, kind) {
 		const hostRect = this.getBoundingClientRect();
 		if (clientX < hostRect.left || clientX > hostRect.right || clientY < hostRect.top || clientY > hostRect.bottom) return null;
+		const resolvedKind = kind?.trim() ? kind.trim() : this._panelKind(panelId);
 		const rel = (r) => ({
 			x: r.left - hostRect.left,
 			y: r.top - hostRect.top,
@@ -15984,7 +16680,7 @@ let DockHostElement = class DockHostElement extends i {
 						rect: rel(leafRect),
 						caretRect: this._stripCaretRect(strip, gapIndex, hostRect)
 					};
-					return this._zoneAllowed(panelId, zone) ? zone : null;
+					return this._zoneAllowed(panelId, zone, resolvedKind) ? zone : null;
 				}
 			}
 			const relX = (clientX - leafRect.left) / Math.max(leafRect.width, 1);
@@ -15998,7 +16694,7 @@ let DockHostElement = class DockHostElement extends i {
 					gapIndex: stack.panels.length,
 					rect: rel(leafRect)
 				};
-				return this._zoneAllowed(panelId, zone) ? zone : null;
+				return this._zoneAllowed(panelId, zone, resolvedKind) ? zone : null;
 			}
 			const r = rel(leafRect);
 			let operation;
@@ -16044,7 +16740,7 @@ let DockHostElement = class DockHostElement extends i {
 				side,
 				rect: zoneRect
 			};
-			return this._zoneAllowed(panelId, zone) ? zone : null;
+			return this._zoneAllowed(panelId, zone, resolvedKind) ? zone : null;
 		}
 		const fromLeft = clientX - hostRect.left;
 		const fromRight = hostRect.right - clientX;
@@ -16100,15 +16796,18 @@ let DockHostElement = class DockHostElement extends i {
 			side,
 			rect: zoneRect
 		};
-		return this._zoneAllowed(panelId, zone) ? zone : null;
+		return this._zoneAllowed(panelId, zone, resolvedKind) ? zone : null;
 	}
-	_zoneAllowed(panelId, zone) {
+	_zoneAllowed(panelId, zone, kind) {
 		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 (zone.operation === `tabs` && stack !== null && isStack(stack)) {
+			if (!this._stackAllowsKind(stack, kind?.trim() ? kind.trim() : this._panelKind(panelId))) return false;
+		}
 		if (this.canAccept && !this.canAccept(panelId, zone.operation)) return false;
 		return true;
 	}
@@ -16123,22 +16822,32 @@ let DockHostElement = class DockHostElement extends i {
 			this._appendPanelToFirstStack(panelId);
 			normalize(this._model);
 		}
-		this._applyZone(panelId, zone);
+		this._applyZone(panelId, zone, sourceHost === void 0 || sourceHost === this);
 		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) {
+	_applyZone(panelId, zone, transferName = false) {
 		const sourcePath = findStackOf(this._model, panelId);
+		let vacated = null;
 		if (sourcePath !== null) {
 			const source = findNode(this._model, sourcePath);
-			if (source !== null && isStack(source)) removePanelFromStack(source, panelId);
+			if (source !== null && isStack(source)) {
+				removePanelFromStack(source, panelId);
+				if (source.panels.length === 0) vacated = source;
+			}
 		}
 		if (zone.operation === `tabs`) {
 			const target = findNode(this._model, zone.targetPath);
-			if (target !== null && isStack(target)) addPanelToStack(target, panelId, zone.gapIndex);
+			if (target !== null && isStack(target)) {
+				addPanelToStack(target, panelId, zone.gapIndex);
+				if (transferName && vacated !== null && vacated !== target && vacated.name !== void 0 && target.name === void 0) {
+					target.name = vacated.name;
+					delete vacated.name;
+				}
+			}
 		} else insertBeside(this._model, zone.targetPath, opToDirection(zone.operation), createStack([panelId]), zone.side);
 	}
 	/**
@@ -16274,16 +16983,6 @@ let DockHostElement = class DockHostElement extends i {
 		};
 		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;
@@ -16414,6 +17113,7 @@ let DockHostElement = class DockHostElement extends i {
         id=${`dock-leaf-${pathStr}`}
         class="leaf"
         data-dock-path=${pathStr}
+        data-dock-name=${stack.name ?? A}
         size=${size === void 0 ? A : String(size)}
         min=${collapsible ? `1px` : A}
         when-small=${collapsible ? `collapse` : A}
@@ -16425,26 +17125,19 @@ let DockHostElement = class DockHostElement extends i {
           <slot name="empty"><span>Drop panels here</span></slot>
         </div>
       `);
+		const toolbarSlot = stack.name !== void 0 && this._toolbarSlots.has(`toolbar-${stack.name}`) ? b`<slot name="toolbar-${stack.name}" slot="toolbar"></slot>` : A;
 		return leafAttrs(b`
       <ixfx-tab-list
         class="strip"
         orientation="horizontal"
+        scrollable
+        shrink
+        ?hide-labels=${stack.hideLabels === true}
         @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>
+        ${toolbarSlot}
       </ixfx-tab-list>
       <div class="leaf-body">
         <slot name="dock-panel-${stack.active}"></slot>
@@ -16524,9 +17217,14 @@ let DockHostElement = class DockHostElement extends i {
       .strip {
         flex-shrink: 0;
         border: 0;
-        /* The leaf background shows through selected tabs; the accent
-           underline indicator carries the selection. */
+        /* The leaf background shows through selected tabs; a text underline
+           (not the border indicator) carries the selection. */
         --ixfx-tab-selected-background: transparent;
+        --ixfx-selected-tab-border-width: 0;
+        --ixfx-selected-tab-text-decoration: underline;
+        --ixfx-selected-tab-text-decoration-thickness: 2px;
+        --ixfx-selected-tab-text-decoration-offset: 4px;
+        --ixfx-tab-hover-background: var(--surface-4);
       }
 
       /* Uniform tab height: a panel toolbar button would otherwise inflate
@@ -16535,6 +17233,11 @@ let DockHostElement = class DockHostElement extends i {
         height: var(--dock-tab-height, 30px);
       }
 
+      /* Breathing room between strip toolbars and the leaf edge. */
+      .strip::part(list-toolbar) {
+        padding-right: var(--space-xs);
+      }
+
       .leaf-body {
         flex: 1;
         min-height: 0;
@@ -16556,38 +17259,6 @@ let DockHostElement = class DockHostElement extends i {
         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;
@@ -16704,6 +17375,10 @@ function zoneToTarget(zone) {
 function cloneNode(node) {
 	return JSON.parse(JSON.stringify(node));
 }
+/** Panel content kind, normalized (`'any'` when unset/blank). */
+function normalizeKind(kind) {
+	return (kind?.trim() ?? ``) || `any`;
+}
 function parsePath(pathStr) {
 	return pathStr.length === 0 ? [] : pathStr.split(`-`).filter((s) => s.length > 0).map(Number);
 }
@@ -26003,7 +26678,7 @@ let NotificationPillElement = class NotificationPillElement extends i {
 	#renderIcon() {
 		if (!this.icon) return A;
 		if (this.icon.startsWith(`<svg`)) return b`<span class="pill-icon">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return A;
+		if (!hasIcon(this.icon)) return A;
 		return b`<ixfx-icon class="pill-icon" name="${this.icon}"></ixfx-icon>`;
 	}
 	render() {
@@ -26802,7 +27477,7 @@ let TooltipElement = class TooltipElement extends i {
 	#renderIcon() {
 		if (!this.icon) return A;
 		if (this.icon.startsWith(`<svg`)) return b`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${unsafeHTML(this.icon)}</span>`;
-		if (!getIcon(this.icon)) return A;
+		if (!hasIcon(this.icon)) return A;
 		return b`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
 	}
 	render() {
@@ -35813,6 +36488,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-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 };
+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, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map