@ixfx/components 0.15.2 → 0.15.4

package/dist/index.js

@@ -26,7 +26,7 @@ import { t as CheckedSelect } from "./checked-select-CBUidG7n.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-DwAa6RDh.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-2_TRrLAV.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-D8VxvR9u.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
@@ -75,6 +75,7 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, scaler } from "@ixfx/numbers";
+import { live } from "lit/directives/live.js";
 //#region src/bottom-drawer/bottom-drawer.ts
 /** Builds the command id for a named drawer's command, e.g. `inspector.expand`. */
 function bottomDrawerCommandId(name, command) {
@@ -2722,7 +2723,10 @@ function startDrag(panelId, sourceHost, pointerId, clientX, clientY, kind) {
 		ghost: createGhostForPanel(sourceHost, panelId),
 		outside: false
 	};
-	for (const host of dragHosts) host.setDragActive(true);
+	for (const host of dragHosts) host.setDragActive(true, hostsExchange(sourceHost, host) ? {
+		panelId,
+		kind
+	} : void 0);
 	activeDrag.ghost?.move(clientX, clientY);
 	window.addEventListener(`pointermove`, onPointerMove);
 	window.addEventListener(`pointerup`, onPointerUp);
@@ -2787,10 +2791,18 @@ function onKeyDown(event) {
 	if (event.key !== `Escape`) return;
 	endDrag();
 }
+/**
+* Whether `target` may receive panels dragged from `source`: always for the
+* same host; otherwise only when the source is not `isolated` and both hosts
+* share a `family`.
+*/
+function hostsExchange(source, target) {
+	if (source === target) return true;
+	return !source.isolated && source.family === target.family;
+}
 function findDropZone(drag, clientX, clientY) {
-	const sourceIsolated = drag.sourceHost.isolated;
 	for (const host of dragHosts) {
-		if (sourceIsolated && host !== drag.sourceHost) continue;
+		if (!hostsExchange(drag.sourceHost, host)) continue;
 		const zone = host.computeDropZone(clientX, clientY, drag.panelId, drag.kind);
 		if (zone !== null) return zone;
 	}
@@ -2956,6 +2968,8 @@ function replaceNodeContents(target, source) {
 		else delete t.name;
 		if (source.hideLabels !== void 0) t.hideLabels = source.hideLabels;
 		else delete t.hideLabels;
+		if (source.hideSingleTabStrip !== void 0) t.hideSingleTabStrip = source.hideSingleTabStrip;
+		else delete t.hideSingleTabStrip;
 		delete t.collapsed;
 		delete t.preCollapseSize;
 		if (source.collapsed !== void 0) t.collapsed = source.collapsed;
@@ -2970,6 +2984,8 @@ function replaceNodeContents(target, source) {
 		delete stale.panels;
 		delete stale.active;
 		delete stale.name;
+		delete stale.hideLabels;
+		delete stale.hideSingleTabStrip;
 		delete stale.collapsed;
 		delete stale.preCollapseSize;
 	}
@@ -3386,6 +3402,8 @@ function moveLeafNodeToEdge(root, ref, edge) {
 			active: rest.active
 		};
 		if (rest.name !== void 0) remaining.name = rest.name;
+		if (rest.hideLabels !== void 0) remaining.hideLabels = rest.hideLabels;
+		if (rest.hideSingleTabStrip !== void 0) remaining.hideSingleTabStrip = rest.hideSingleTabStrip;
 		if (rest.collapsed !== void 0) remaining.collapsed = rest.collapsed;
 		if (rest.preCollapseSize !== void 0) remaining.preCollapseSize = rest.preCollapseSize;
 		replaceNodeContents(root, {
@@ -3435,6 +3453,7 @@ function serializeNode(node) {
 		};
 		if (node.name !== void 0) out.name = node.name;
 		if (node.hideLabels !== void 0) out.hideLabels = node.hideLabels;
+		if (node.hideSingleTabStrip !== void 0) out.hideSingleTabStrip = node.hideSingleTabStrip;
 		if (node.collapsed !== void 0) out.collapsed = node.collapsed;
 		if (node.preCollapseSize !== void 0) out.preCollapseSize = node.preCollapseSize;
 		return out;
@@ -3464,6 +3483,36 @@ function parseLayout(json) {
 		return null;
 	}
 }
+/** Every stack holding at least one panel, keyed by node identity. */
+function snapshotNonEmptyStacks(root) {
+	const out = /* @__PURE__ */ new Map();
+	const visit = (node) => {
+		if (isStack(node)) {
+			if (node.panels.length > 0) out.set(node, {
+				name: node.name,
+				key: node.panels.join(`\n`)
+			});
+			return;
+		}
+		node.children.forEach(visit);
+	};
+	visit(root);
+	return out;
+}
+/**
+* Stacks in `before` that no longer hold their panels in `after`. A stack
+* node that was re-created with the same panels (some leaf moves rebuild
+* nodes) does not count as emptied.
+*/
+function findEmptiedStacks(before, after) {
+	const afterKeys = new Set([...after.values()].map((s) => s.key));
+	const emptied = [];
+	for (const [node, snapshot] of before) {
+		if (after.has(node) || afterKeys.has(snapshot.key)) continue;
+		emptied.push(snapshot);
+	}
+	return emptied;
+}
 //#endregion
 //#region src/tabs/tab-list-item.ts
 const resizeHandlers = /* @__PURE__ */ new WeakMap();
@@ -4077,6 +4126,8 @@ DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelE
 const BAND = .25;
 /** Pointer movement threshold before a press becomes a dock drag (matches tab-list). */
 const DRAG_THRESHOLD_PX$3 = 5;
+/** Tab items of a strip, or the stand-in tab of a hidden strip's drop hint. */
+const STRIP_ITEMS = `ixfx-tab-list-item, .ghost-tab`;
 /** 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). */
@@ -4087,10 +4138,15 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this.layout = null;
 		this.accepts = `tabs horizontal vertical`;
 		this.isolated = false;
+		this.hideSingleTabStrip = false;
+		this.family = ``;
+		this.acceptsKinds = null;
 		this._model = createStack([]);
 		this._pool = [];
 		this._dropZone = null;
 		this._dragActive = false;
+		this._dragPanel = null;
+		this._liveStacks = /* @__PURE__ */ new Map();
 		this._junctions = [];
 		this._toolbarsOut = /* @__PURE__ */ new Map();
 		this._leafContentRules = /* @__PURE__ */ new Map();
@@ -4103,6 +4159,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._toolbarObserver = null;
 		this._panelObservers = /* @__PURE__ */ new Map();
 		this._onDragStart = (event) => {
+			if (event.composedPath().find((n) => n instanceof HTMLElement && n.tagName === `IXFX-DOCK-HOST`) !== this) return;
 			const { panelId, pointerId, clientX, clientY } = event.detail;
 			startDrag(panelId, this, pointerId, clientX, clientY, this._findPanelEl(panelId)?.kind);
 		};
@@ -4178,17 +4235,18 @@ let DockHostElement = class DockHostElement extends LitElement {
 				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 = {
+			const item = tabItemIn(path);
+			if (item === null) return;
+			this._armPanelDrag(item.id, event);
+		};
+		this._onStripContextMenu = (event) => {
+			const item = tabItemIn(event.composedPath());
+			if (item === null) return;
+			if (!this._emit(`dock-tab-contextmenu`, {
 				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);
+				clientX: event.clientX,
+				clientY: event.clientY
+			}, true)) event.preventDefault();
 		};
 		this._onTabDragMove = (event) => {
 			const pending = this._tabDragPending;
@@ -4217,6 +4275,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this._buildInitialModel();
+		this._liveStacks = snapshotNonEmptyStacks(this._model);
 		registerDockHost(this);
 		this.addEventListener(`dock-panel-drag-start`, this._onDragStart);
 		this._hostResizeObserver = new ResizeObserver(() => this._scheduleJunctions());
@@ -4255,8 +4314,25 @@ let DockHostElement = class DockHostElement extends LitElement {
 			if (parsed) {
 				this._model = parsed.root;
 				this._mergePoolIntoModel();
+				this._liveStacks = snapshotNonEmptyStacks(this._model);
 			}
 		}
+		this._returnToolbarsOfHiddenStrips();
+	}
+	/**
+	* A toolbar parked in a tab item would be destroyed with the strip, so
+	* hand it back before a hidden strip stops rendering.
+	*/
+	_returnToolbarsOfHiddenStrips() {
+		for (const [panelId, nodes] of [...this._toolbarsOut]) {
+			const path = findStackOf(this._model, panelId);
+			const stack = path === null ? null : findNode(this._model, path);
+			if (stack === null || !isStack(stack) || this._stripHidden(stack)) this._returnToolbar(panelId, nodes);
+		}
+	}
+	/** Whether `stack` currently renders without a tab strip. */
+	_stripHidden(stack) {
+		return stack.panels.length === 1 && (stack.hideSingleTabStrip ?? this.hideSingleTabStrip);
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -4385,11 +4461,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			this._unobservePanel(el);
 			this._toolbarsOut.delete(el.panelId);
 			this._removeFromModel(el.panelId);
-			this.dispatchEvent(new CustomEvent(`dock-panel-removed`, {
-				detail: { panelId: el.panelId },
-				bubbles: true,
-				composed: true
-			}));
+			this._emitRemoved(el.panelId);
 			structuralChange = true;
 		}
 		for (const el of current) {
@@ -4397,11 +4469,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			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
-				}));
+				this._emitAdded(el.panelId);
 				structuralChange = true;
 			}
 		}
@@ -4419,6 +4487,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._loadGeneration++;
 		this._model = normalize(cloneNode(layout.root));
 		this._mergePoolIntoModel();
+		this._liveStacks = snapshotNonEmptyStacks(this._model);
 		this.requestUpdate();
 		this._emitChange();
 	}
@@ -4478,11 +4547,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		} 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._emitAdded(el.panelId);
 		this._emitChange();
 		return true;
 	}
@@ -4505,11 +4570,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		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._emitRemoved(panelId);
 		this._emitChange();
 		return true;
 	}
@@ -4752,7 +4813,10 @@ let DockHostElement = class DockHostElement extends LitElement {
 	* {@link endExternalDrop} when the drag leaves or ends.
 	*/
 	previewExternalDrop(clientX, clientY, panelId = `__external__`, kind) {
-		this.setDragActive(true);
+		this.setDragActive(true, {
+			panelId,
+			kind
+		});
 		const zone = this.computeDropZone(clientX, clientY, panelId, kind);
 		this.setDropZone(zone);
 		return zone === null ? null : zoneToTarget(zone);
@@ -4768,11 +4832,12 @@ let DockHostElement = class DockHostElement extends LitElement {
 	* panel lands where a drop there would put it (respecting `accepts` /
 	* `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.
+	* Returns the created element, or null when a panel with that id is
+	* already docked here or its kind is refused by `acceptsKinds`.
 	*/
 	acceptExternalPanel(snapshot, at) {
 		if (collectPanelIds(this._model).includes(snapshot.panelId)) return null;
+		if (this.acceptsKinds !== null && !this.acceptsKinds.includes(normalizeKind(snapshot.kind))) return null;
 		const el = document.createElement(`ixfx-dock-panel`);
 		el.panelId = snapshot.panelId;
 		if (snapshot.title !== void 0) el.title = snapshot.title;
@@ -4783,20 +4848,16 @@ let DockHostElement = class DockHostElement extends LitElement {
 		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);
+		this.appendChild(el);
 		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._emitAdded(el.panelId);
 		this._emitChange();
 		return el;
 	}
@@ -4815,6 +4876,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			w: r.width,
 			h: r.height
 		});
+		const splitsAllowed = tokenAllows(this.accepts, `horizontal`) || tokenAllows(this.accepts, `vertical`);
 		for (const path of collectStackPaths(this._model)) {
 			const leaf = this.shadowRoot?.querySelector(`[data-dock-path="${path.join(`-`)}"]`);
 			if (!leaf) continue;
@@ -4822,7 +4884,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			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`);
+			const strip = leaf.querySelector(`ixfx-tab-list`) ?? leaf.querySelector(`.ghost-strip`);
 			if (strip !== null) {
 				const stripRect = strip.getBoundingClientRect();
 				if (clientX >= stripRect.left && clientX <= stripRect.right && clientY >= stripRect.top && clientY <= stripRect.bottom) {
@@ -4841,7 +4903,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 			}
 			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) {
+			if (!splitsAllowed || relX >= BAND && relX <= .75 && relY >= BAND && relY <= .75) {
 				const zone = {
 					host: this,
 					operation: `tabs`,
@@ -4955,6 +5017,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		return this._zoneAllowed(panelId, zone, resolvedKind) ? zone : null;
 	}
 	_zoneAllowed(panelId, zone, kind) {
+		if (this.acceptsKinds !== null && !collectPanelIds(this._model).includes(panelId) && !this.acceptsKinds.includes(normalizeKind(kind))) return false;
 		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) {
@@ -4981,6 +5044,11 @@ let DockHostElement = class DockHostElement extends LitElement {
 		}
 		this._applyZone(panelId, zone, sourceHost === void 0 || sourceHost === this);
 		this._commit();
+		if (sourceHost !== void 0 && sourceHost !== this) this._emit(`dock-panel-moved`, {
+			panelId,
+			sourceHost,
+			targetHost: this
+		});
 	}
 	/**
 	* Move `panelId` (already present somewhere in the model) to the position
@@ -5021,26 +5089,34 @@ let DockHostElement = class DockHostElement extends LitElement {
 		}
 		normalize(this._model);
 		this._pool = this._pool.filter((p) => p !== el);
-		if (el !== void 0) target.adoptPanelElement(el);
+		this._toolbarsOut.delete(panelId);
+		this._emitRemoved(panelId, target);
+		if (el !== void 0) target.adoptPanelElement(el, this);
 		this.requestUpdate();
+		this._emitChange();
 	}
-	/** Adopt a panel element from another host (the one sanctioned reparent). */
-	adoptPanelElement(el) {
-		this.appendChild(el);
+	/**
+	* Adopt a panel element from another host (the one sanctioned reparent).
+	* `sourceHost` is reported in `dock-panel-added`.
+	*/
+	adoptPanelElement(el, sourceHost = null) {
 		if (!this._pool.some((p) => p.panelId === el.panelId)) this._pool = [...this._pool, el];
-		this._appendPanelToFirstStack(el.panelId);
+		if (!collectPanelIds(this._model).includes(el.panelId)) this._appendPanelToFirstStack(el.panelId);
+		this.appendChild(el);
 		normalize(this._model);
-		this.dispatchEvent(new CustomEvent(`dock-panel-added`, {
-			detail: { panelId: el.panelId },
-			bubbles: true,
-			composed: true
-		}));
+		this._emitAdded(el.panelId, sourceHost);
 	}
-	setDragActive(active) {
+	/**
+	* `drag` names the panel in flight when this host may receive it; it drives
+	* the drop hint over a leaf whose tab strip is hidden.
+	*/
+	setDragActive(active, drag) {
+		const next = active && drag !== void 0 ? drag : null;
 		if (this._dragActive !== active) {
 			this._dragActive = active;
 			this.requestUpdate();
 		}
+		if (this._dragPanel?.panelId !== next?.panelId || this._dragPanel?.kind !== next?.kind) this._dragPanel = next;
 	}
 	setDropZone(zone) {
 		if (this._dropZone !== zone) {
@@ -5132,6 +5208,29 @@ let DockHostElement = class DockHostElement extends LitElement {
 			}
 		}
 	}
+	/**
+	* Start a panel drag from an app-supplied handle — the way to move a panel
+	* whose tab strip is hidden. Call it from the handle's `pointerdown`. The
+	* drag begins once the pointer moves a few pixels (a plain click is left
+	* alone) and then behaves exactly like a tab-item drag. Returns false when
+	* the panel is not docked here or the press is not a primary-button press.
+	*/
+	beginPanelDrag(panelId, event) {
+		if (event.button !== 0 || !collectPanelIds(this._model).includes(panelId)) return false;
+		this._armPanelDrag(panelId, event);
+		return true;
+	}
+	_armPanelDrag(panelId, event) {
+		this._tabDragPending = {
+			panelId,
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY
+		};
+		window.addEventListener(`pointermove`, this._onTabDragMove);
+		window.addEventListener(`pointerup`, this._onTabDragUp);
+		window.addEventListener(`pointercancel`, this._onTabDragUp);
+	}
 	_teardownTabDragListeners() {
 		window.removeEventListener(`pointermove`, this._onTabDragMove);
 		window.removeEventListener(`pointerup`, this._onTabDragUp);
@@ -5213,13 +5312,44 @@ let DockHostElement = class DockHostElement extends LitElement {
 	_returnAllToolbars() {
 		for (const [panelId, nodes] of [...this._toolbarsOut]) this._returnToolbar(panelId, nodes);
 	}
-	_emitChange() {
-		this.dispatchEvent(new CustomEvent(`dock-change`, {
-			detail: { layout: this.saveLayout() },
+	/** Dispatch a bubbling, composed event; returns false when a cancelable one was cancelled. */
+	_emit(type, detail, cancelable = false) {
+		return this.dispatchEvent(new CustomEvent(type, {
+			detail,
 			bubbles: true,
-			composed: true
+			composed: true,
+			cancelable
 		}));
 	}
+	_emitAdded(panelId, sourceHost = null) {
+		this._emit(`dock-panel-added`, {
+			panelId,
+			sourceHost,
+			targetHost: this
+		});
+	}
+	_emitRemoved(panelId, targetHost = null) {
+		this._emit(`dock-panel-removed`, {
+			panelId,
+			sourceHost: this,
+			targetHost
+		});
+	}
+	/** Announce `dock-stack-empty` for each stack that lost its last panel since the last change. */
+	_announceEmptiedStacks() {
+		const now = snapshotNonEmptyStacks(this._model);
+		const emptied = findEmptiedStacks(this._liveStacks, now);
+		this._liveStacks = now;
+		for (const stack of emptied) this._emit(`dock-stack-empty`, {
+			name: stack.name ?? null,
+			hostEmpty: now.size === 0
+		});
+	}
+	_emitChange() {
+		const layout = this.saveLayout();
+		this._announceEmptiedStacks();
+		this._emit(`dock-change`, { layout });
+	}
 	render() {
 		return html`
       <div class="root">
@@ -5255,7 +5385,7 @@ let DockHostElement = class DockHostElement extends LitElement {
       <ixfx-split-layout
         class="split"
         direction=${node.direction}
-        size=${size === void 0 ? nothing : String(size)}
+        size=${size === void 0 ? nothing : live(String(size))}
         style=${`--split-gutter-size: var(--dock-split-bar-size, 2px); --split-collapsed-size: var(--dock-collapsed-size, 40px)`}
         data-dock-path=${pathStr}
         data-dock-gen=${this._loadGeneration}
@@ -5278,7 +5408,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         class="leaf"
         data-dock-path=${pathStr}
         data-dock-name=${stack.name ?? nothing}
-        size=${size === void 0 ? nothing : String(size)}
+        size=${size === void 0 ? nothing : live(String(size))}
         min=${collapsible ? `1px` : nothing}
         when-small=${collapsible ? `collapse` : nothing}
         ?collapsed=${stack.collapsed === true}
@@ -5290,6 +5420,12 @@ let DockHostElement = class DockHostElement extends LitElement {
         </div>
       `);
 		const toolbarSlot = stack.name !== void 0 && this._toolbarSlots.has(`toolbar-${stack.name}`) ? html`<slot name="toolbar-${stack.name}" slot="toolbar"></slot>` : nothing;
+		if (this._stripHidden(stack)) return leafAttrs(html`
+        ${this._renderDropHint(stack, path)}
+        <div class="leaf-body">
+          <slot name="dock-panel-${stack.active}"></slot>
+        </div>
+      `);
 		return leafAttrs(html`
       <ixfx-tab-list
         class="strip"
@@ -5299,6 +5435,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         ?hide-labels=${stack.hideLabels === true}
         @change=${(e) => this._onTabChange(e, path)}
         @pointerdown=${this._onStripPointerDown}
+        @contextmenu=${this._onStripContextMenu}
       >
         ${repeat(stack.panels, (id) => id, (id) => this._renderTabItem(stack, id))}
         ${toolbarSlot}
@@ -5307,6 +5444,34 @@ let DockHostElement = class DockHostElement extends LitElement {
         <slot name="dock-panel-${stack.active}"></slot>
       </div>
     `);
+	}
+	/**
+	* While a drag that this leaf would accept is in flight, overlay a compact
+	* strip stand-in on the hidden strip's slot: it shows where the dropped tab
+	* will land (the overlay takes no layout space, so nothing jumps).
+	*/
+	_renderDropHint(stack, path) {
+		const drag = this._dragPanel;
+		if (!this._dragActive || drag === null || stack.panels[0] === drag.panelId) return nothing;
+		const probe = {
+			host: this,
+			operation: `tabs`,
+			targetPath: path,
+			side: `after`,
+			rect: {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			}
+		};
+		if (!this._zoneAllowed(drag.panelId, probe, drag.kind)) return nothing;
+		const id = stack.panels[0];
+		return html`
+      <div class="ghost-strip" part="drop-hint">
+        <span class="ghost-tab">${this._findPanelEl(id)?.title || id}</span>
+      </div>
+    `;
 	}
 	_renderTabItem(stack, panelId) {
 		const el = this._findPanelEl(panelId);
@@ -5321,7 +5486,7 @@ let DockHostElement = class DockHostElement extends LitElement {
     `;
 	}
 	_stripCaretRect(strip, gapIndex, hostRect) {
-		const items = Array.from(strip.querySelectorAll(`ixfx-tab-list-item`));
+		const items = Array.from(strip.querySelectorAll(STRIP_ITEMS));
 		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;
@@ -5368,6 +5533,7 @@ let DockHostElement = class DockHostElement extends LitElement {
         min-height: 0;
         box-sizing: border-box;
         overflow: hidden;
+        position: relative;
         border: 1px solid var(--surface-4);
         border-radius: var(--radius-m);
       }
@@ -5405,6 +5571,32 @@ let DockHostElement = class DockHostElement extends LitElement {
         padding-right: var(--space-xs);
       }
 
+      /* Drop hint over a hidden strip: overlaid, so it reserves no height. */
+      .ghost-strip {
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: var(--dock-tab-height, 30px);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 var(--space-s);
+        background: var(--surface-3);
+        border-bottom: 1px solid var(--surface-4);
+        color: var(--surface-3-text);
+        font-size: var(--text-m);
+        pointer-events: none;
+      }
+
+      .ghost-tab {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 4px;
+      }
+
       .leaf-body {
         flex: 1;
         min-height: 0;
@@ -5496,11 +5688,24 @@ __decorate([property({
 	type: Boolean,
 	attribute: `isolated`
 })], DockHostElement.prototype, "isolated", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-single-tab-strip`
+})], DockHostElement.prototype, "hideSingleTabStrip", void 0);
+__decorate([property({
+	type: String,
+	attribute: `family`
+})], DockHostElement.prototype, "family", void 0);
+__decorate([property({
+	attribute: `accepts-kinds`,
+	converter: { fromAttribute: (value) => value === null ? null : value.split(/\s+/).filter((k) => k.length > 0) }
+})], DockHostElement.prototype, "acceptsKinds", 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, "_dragPanel", void 0);
 __decorate([state()], DockHostElement.prototype, "_junctions", void 0);
 DockHostElement = __decorate([safeCustomElement(`ixfx-dock-host`)], DockHostElement);
 /** `split-horizontal` = horizontal divider = panels stacked vertically. */
@@ -5550,13 +5755,18 @@ function normalizeKind(kind) {
 function parsePath(pathStr) {
 	return pathStr.length === 0 ? [] : pathStr.split(`-`).filter((s) => s.length > 0).map(Number);
 }
+/** The tab item in an event's composed path, if it has a panel id. */
+function tabItemIn(path) {
+	const item = path.find((node) => node instanceof HTMLElement && node.tagName === `IXFX-TAB-LIST-ITEM`);
+	return item !== void 0 && item.id ? item : null;
+}
 /** 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`));
+	const items = Array.from(strip.querySelectorAll(STRIP_ITEMS));
 	if (items.length === 0) return 0;
 	for (let i = 0; i < items.length; i++) {
 		const r = items[i].getBoundingClientRect();
@@ -16056,4 +16266,4 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EMPTY_GROUP_LABEL, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, defaultGroupLabel, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, partitionByGroup, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveGroupKey, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toGroupKey, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_SIBLING_SPACING, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EMPTY_GROUP_LABEL, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clampToDisk, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, decomposeViewIsometry, defaultGroupLabel, distribute, dropTargetFor, euclideanRadiusForHyperbolicDistance, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, geodesicInterpolate, geodesicPath, geodesicSegment, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, init, insertBeside, invertIsometry, isDragging, isHyperbolicDescendantId, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, norm, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, partitionByGroup, poincareDistance, pointerOverAnyHost, prefersReducedMotion, preserveRestoreWeights, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveGroupKey, resolveLeafPath, resolveTracks, rotationIsometry, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, snapshotNonEmptyStacks, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toGroupKey, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, viewIsometry, walk, wrapRoot };