@ixfx/components 0.8.4 → 0.8.6

package/bundle/index.js

@@ -4669,26 +4669,18 @@ let BottomDrawerElement = class BottomDrawerElement extends i {
       --bottom-drawer-collapsed-width: 96px;
 
       display: block;
-      position: relative;
-      height: 100%;
-      min-width: 0;
-      min-height: 0;
-      overflow: hidden;
-    }
-    .content {
       position: absolute;
       inset: 0;
       min-width: 0;
       min-height: 0;
-    }
-    .content ::slotted(*) {
-      width: 100%;
-      height: 100%;
+      overflow: hidden;
+      pointer-events: none;
     }
     .drawer {
       --m: 0;
       position: absolute;
       z-index: 2;
+      pointer-events: auto;
       right: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
       bottom: 0;
       left: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
@@ -4923,7 +4915,6 @@ let BottomDrawerElement = class BottomDrawerElement extends i {
 		const height = this.open ? raw * (1 - morph) + 20 * morph : 20;
 		const opacity = this.maintainHandle && this.open ? 1 : this.#dragOpacity(raw);
 		return b`
-      <div class="content"><slot></slot></div>
       <section
         class="drawer"
         style=${`--bottom-drawer-height: ${height}px; --bottom-drawer-opacity: ${opacity}; --m: ${morph}`}
@@ -4955,7 +4946,7 @@ let BottomDrawerElement = class BottomDrawerElement extends i {
         >
           <slot name="toolbar" slot="toolbar"></slot>
         </ixfx-titlebar>
-        <div class="body" ?inert=${!this.open}><slot name="drawer"></slot></div>
+        <div class="body" ?inert=${!this.open}><slot></slot></div>
       </section>
     `;
 	}
@@ -19008,6 +18999,16 @@ let DockHostElement = class DockHostElement extends i {
 		if (rules.deny.has(kind)) return false;
 		return rules.allow === null || rules.allow.has(kind);
 	}
+	/**
+	* Whether an edge drop may split a new sibling leaf beside `stack`. Unnamed
+	* leaves and leaves with no policy always allow it; a named leaf whose
+	* policy sets `allowEdgeSplit: false` does not (strict named-area
+	* containment).
+	*/
+	_leafAllowsEdgeSplit(stack) {
+		if (stack.name === void 0) return true;
+		return this._leafContentRules.get(stack.name)?.allowEdgeSplit ?? true;
+	}
 	/** First stack (tree order) whose rules admit `kind`, else the first stack. */
 	_firstStackAllowing(kind) {
 		for (const path of collectStackPaths(this._model)) {
@@ -19072,6 +19073,9 @@ let DockHostElement = class DockHostElement extends i {
 			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 if (op !== `tabs` && !this._stackAllowsEdgeSplitAt(namedPath)) {
+				console.warn(`[ixfx-dock-host] addPanel: container "${target.container}" forbids edge splits (allowEdgeSplit: false)`);
+				return false;
 			} else stackPath = namedPath;
 		} else if (target?.stack) {
 			const found = findStackOf(this._model, target.stack);
@@ -19079,6 +19083,9 @@ let DockHostElement = class DockHostElement extends i {
 			else if (op === `tabs` && !this._stackAllowsKindAt(found, kind)) {
 				console.warn(`[ixfx-dock-host] addPanel: target stack does not admit kind "${kind}"`);
 				return false;
+			} else if (op !== `tabs` && !this._stackAllowsEdgeSplitAt(found)) {
+				console.warn(`[ixfx-dock-host] addPanel: target stack forbids edge splits (allowEdgeSplit: false)`);
+				return false;
 			} else stackPath = found;
 		}
 		if (stackPath !== null && op !== `tabs`) {
@@ -19120,6 +19127,11 @@ let DockHostElement = class DockHostElement extends i {
 		const stack = findNode(this._model, stackPath);
 		return stack !== null && isStack(stack) && this._stackAllowsKind(stack, kind);
 	}
+	/** Whether the stack at `stackPath` permits an edge split beside it. */
+	_stackAllowsEdgeSplitAt(stackPath) {
+		const stack = findNode(this._model, stackPath);
+		return stack === null || !isStack(stack) || this._leafAllowsEdgeSplit(stack);
+	}
 	removePanel(panelId) {
 		if (!collectPanelIds(this._model).includes(panelId)) return false;
 		this._returnAllToolbars();
@@ -19181,11 +19193,26 @@ let DockHostElement = class DockHostElement extends i {
 	getContainerElements(name) {
 		return this.getContainerPanels(name).map((id) => this._findPanelEl(id)).filter((el) => el !== void 0);
 	}
+	_defaultLeafRule() {
+		return {
+			allow: null,
+			deny: /* @__PURE__ */ new Set(),
+			allowEdgeSplit: true
+		};
+	}
+	/** A rule entry that constrains nothing — safe to drop from the map. */
+	_isEmptyLeafRule(entry) {
+		return entry.allow === null && entry.deny.size === 0 && entry.allowEdgeSplit;
+	}
+	_warnUnknownContainer(method, key) {
+		if (findStackPathByName(this._model, key) === null) console.warn(`[ixfx-dock-host] ${method}: no container named "${key}" yet; rule stored`);
+	}
 	/**
 	* 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).
+	* `addPanel`, and re-homing into the leaf then refuse other kinds. Whether
+	* edge splits beside the leaf are offered is governed separately by
+	* {@link setLeafPlacementPolicy}'s `allowEdgeSplit` (default `true`).
 	* 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
@@ -19197,14 +19224,10 @@ let DockHostElement = class DockHostElement extends i {
 			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;
+		const entry = this._leafContentRules.get(key) ?? this._defaultLeafRule();
+		entry.allow = new Set(kinds.map((k) => k.trim()).filter((k) => k.length > 0));
 		this._leafContentRules.set(key, entry);
-		if (findStackPathByName(this._model, key) === null) console.warn(`[ixfx-dock-host] setLeafExclusiveContents: no container named "${key}" yet; rule stored`);
+		this._warnUnknownContainer(`setLeafExclusiveContents`, key);
 	}
 	/**
 	* Forbid the given panel kinds in a named container — e.g.
@@ -19218,21 +19241,53 @@ let DockHostElement = class DockHostElement extends i {
 			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);
+		const entry = this._leafContentRules.get(key) ?? this._defaultLeafRule();
+		entry.deny = new Set(kinds.map((k) => k.trim()).filter((k) => k.length > 0));
+		if (this._isEmptyLeafRule(entry)) this._leafContentRules.delete(key);
+		else this._leafContentRules.set(key, entry);
+		this._warnUnknownContainer(`setLeafDenyContents`, key);
+	}
+	/**
+	* Set (merge) the full placement policy for a named leaf: kind allow/deny
+	* lists plus the `allowEdgeSplit` gate. Omitted fields are left unchanged
+	* — pass `clearLeafPlacementPolicy(name)` to reset. `allowKinds` /
+	* `denyKinds` are equivalent to {@link setLeafExclusiveContents} /
+	* {@link setLeafDenyContents} and share the same storage.
+	*
+	* `allowEdgeSplit: false` enforces strict named-area containment: the edge
+	* drop zones beside the leaf go inert for every placement route (pointer
+	* preview and drop, `queryDropTarget` / `previewExternalDrop`,
+	* `addPanel` with a split `op`), so a panel cannot escape the area by
+	* splitting next to it. A permitted split still creates an *unnamed,
+	* unconstrained* leaf — the policy is not propagated to it.
+	*
+	* Warns when no stack currently carries `name`; the policy is stored and
+	* applies once one appears. Host policy: kept across `loadLayout()`, never
+	* serialized.
+	*/
+	setLeafPlacementPolicy(name, policy) {
+		const key = name.trim();
+		if (!key) {
+			console.warn(`[ixfx-dock-host] setLeafPlacementPolicy: empty container name`);
+			return;
+		}
+		const entry = this._leafContentRules.get(key) ?? this._defaultLeafRule();
+		if (policy.allowKinds !== void 0) entry.allow = new Set(policy.allowKinds.map((k) => k.trim()).filter((k) => k.length > 0));
+		if (policy.denyKinds !== void 0) entry.deny = new Set(policy.denyKinds.map((k) => k.trim()).filter((k) => k.length > 0));
+		if (policy.allowEdgeSplit !== void 0) entry.allowEdgeSplit = policy.allowEdgeSplit;
+		if (this._isEmptyLeafRule(entry)) 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`);
+		this._warnUnknownContainer(`setLeafPlacementPolicy`, key);
 	}
-	/** Remove every content rule for a named container. */
+	/** Remove every content rule and reset the edge-split gate for a named container. */
 	clearLeafContentRestrictions(name) {
 		this._leafContentRules.delete(name.trim());
 	}
-	/** Copy of a container's rules, or null when unrestricted. */
+	/** Alias of {@link clearLeafContentRestrictions} — clears kind rules and the edge-split gate. */
+	clearLeafPlacementPolicy(name) {
+		this._leafContentRules.delete(name.trim());
+	}
+	/** Copy of a container's kind rules, or null when unrestricted. */
 	getLeafContentRestrictions(name) {
 		const rules = this._leafContentRules.get(name.trim());
 		if (rules === void 0) return null;
@@ -19241,6 +19296,16 @@ let DockHostElement = class DockHostElement extends i {
 			deny: [...rules.deny]
 		};
 	}
+	/** Resolved placement policy for a container, or null when it has none. */
+	getLeafPlacementPolicy(name) {
+		const rules = this._leafContentRules.get(name.trim());
+		if (rules === void 0) return null;
+		return {
+			allowKinds: rules.allow === null ? null : [...rules.allow],
+			denyKinds: [...rules.deny],
+			allowEdgeSplit: rules.allowEdgeSplit
+		};
+	}
 	/**
 	* Geometric neighbours of a leaf (`name` or numeric `path`) — what sits
 	* above / below / left / right of it on screen. Each entry is
@@ -19535,6 +19600,7 @@ let DockHostElement = class DockHostElement extends i {
 		if (zone.operation === `tabs` && stack !== null && isStack(stack)) {
 			if (!this._stackAllowsKind(stack, kind?.trim() ? kind.trim() : this._panelKind(panelId))) return false;
 		}
+		if (zone.operation !== `tabs` && stack !== null && isStack(stack) && !this._leafAllowsEdgeSplit(stack)) return false;
 		if (this.canAccept && !this.canAccept(panelId, zone.operation)) return false;
 		return true;
 	}
@@ -21914,14 +21980,8 @@ let GridListElement = class GridListElement extends i {
 				}
 			},
 			shouldStart: (event) => {
-				if (!this.itemsDraggable) return true;
-				const cell = event.composedPath()[0]?.closest?.(`.cell`);
-				if (!cell) return true;
-				const key = cell.dataset.key;
-				if (!key) return true;
-				const index = this.#source.indexOfKey(key);
-				if (index < 0) return true;
-				return !this.#source.isSelectable(index);
+				for (const node of event.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return false;
+				return true;
 			}
 		});
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
@@ -21936,26 +21996,17 @@ let GridListElement = class GridListElement extends i {
 			});
 		};
 		this.#onDragStart = (e, key) => {
+			this.#doDragStart(key, () => e.preventDefault(), e);
+		};
+		this.#onSlottedDragStart = (e) => {
 			if (!this.itemsDraggable) return;
-			const index = this.#source.indexOfKey(key);
-			if (index < 0 || !this.#source.isSelectable(index)) return;
-			if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
-			const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
-			const detail = {
-				key,
-				index: this.#source.indexOfKey(key),
-				item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
-				selectedKeys
-			};
-			if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
-				e.preventDefault();
-				return;
-			}
-			this.#nativeDragging = true;
-			this.#dragOriginKey = key;
-			this.toggleAttribute(`data-native-dragging`, true);
-			const count = selectedKeys.length;
-			this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+			let cell = e.composedPath().find((n) => n instanceof Element && n.classList.contains(`cell`));
+			if (!cell && e.target instanceof Element) cell = e.target.closest?.(`.cell`);
+			if (!cell) return;
+			const key = cell.dataset.key;
+			if (!key) return;
+			if (e instanceof DragEvent) this.#doDragStart(key, () => e.preventDefault(), e);
+			else this.#doDragStart(key, () => {});
 		};
 		this.#onDragEnd = () => {
 			this.#clearNativeDragState();
@@ -22132,7 +22183,6 @@ let GridListElement = class GridListElement extends i {
         align-items: center;
         justify-content: center;
         overflow: hidden;
-        draggable: false;
       }
       .thumb ::slotted(*:empty)::after {
         content: "Empty";
@@ -22611,6 +22661,7 @@ let GridListElement = class GridListElement extends i {
 		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
+		this.#initSlottedDragInterceptor();
 	}
 	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
 	#rebuildSource() {
@@ -22700,6 +22751,7 @@ let GridListElement = class GridListElement extends i {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
 		}
+		if (changed.has(`itemsDraggable`)) this.#syncSlottedDraggable();
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -23226,7 +23278,140 @@ let GridListElement = class GridListElement extends i {
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	#doDragStart(key, cancelled, dragEvent) {
+		if (!this.itemsDraggable) return false;
+		const index = this.#source.indexOfKey(key);
+		if (index < 0 || !this.#source.isSelectable(index)) return false;
+		if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
+		const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
+		const detail = {
+			key,
+			index: this.#source.indexOfKey(key),
+			item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
+			selectedKeys
+		};
+		if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
+			cancelled();
+			return false;
+		}
+		this.#nativeDragging = true;
+		this.#dragOriginKey = key;
+		this.toggleAttribute(`data-native-dragging`, true);
+		const count = selectedKeys.length;
+		this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+		if (dragEvent && count > 1) this.#setMultiItemDragImage(dragEvent, selectedKeys);
+		return true;
+	}
+	#setMultiItemDragImage(e, selectedKeys) {
+		const preview = this.#createMultiItemPreview(selectedKeys);
+		document.body.appendChild(preview);
+		const rect = preview.getBoundingClientRect();
+		e.dataTransfer?.setDragImage(preview, rect.width / 2, rect.height / 2);
+		requestAnimationFrame(() => preview.remove());
+	}
+	#createMultiItemPreview(selectedKeys) {
+		const preview = document.createElement(`div`);
+		preview.style.cssText = `
+      position: fixed;
+      top: -9999px;
+      left: -9999px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 8px;
+      background: var(--surface-4, #333);
+      border: 1px solid var(--border, #555);
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+      font-family: system-ui, sans-serif;
+      font-size: 12px;
+      color: var(--surface-text, #fff);
+      max-width: 200px;
+      z-index: 999999;
+    `;
+		const header = document.createElement(`div`);
+		header.style.cssText = `
+      font-weight: 600;
+      padding-bottom: 4px;
+      border-bottom: 1px solid var(--border, #555);
+      margin-bottom: 4px;
+    `;
+		header.textContent = `${selectedKeys.length} items`;
+		preview.appendChild(header);
+		for (const key of selectedKeys.slice(0, 5)) {
+			const row = this.#createPreviewRow(key);
+			if (row) preview.appendChild(row);
+		}
+		if (selectedKeys.length > 5) {
+			const more = document.createElement(`div`);
+			more.style.cssText = `opacity: 0.6; text-align: center;`;
+			more.textContent = `+${selectedKeys.length - 5} more`;
+			preview.appendChild(more);
+		}
+		return preview;
+	}
+	#createPreviewRow(key) {
+		const el = this.#source.resolveKeyToElement(key);
+		if (!el) return null;
+		const row = document.createElement(`div`);
+		row.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    `;
+		const thumb = document.createElement(`div`);
+		thumb.style.cssText = `
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      overflow: hidden;
+      background: var(--surface-5, #444);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+		const slottedImg = el.querySelector(`img`);
+		const slottedSvg = el.querySelector(`svg`);
+		const slottedPlaceholder = el.querySelector(`.placeholder`);
+		if (slottedImg) {
+			const img = slottedImg.cloneNode(true);
+			img.style.cssText = `width: 100%; height: 100%; object-fit: cover;`;
+			thumb.appendChild(img);
+		} else if (slottedSvg) {
+			const svg = slottedSvg.cloneNode(true);
+			svg.style.cssText = `width: 70%; height: 70%; opacity: 0.8;`;
+			thumb.appendChild(svg);
+		} else if (slottedPlaceholder) thumb.textContent = slottedPlaceholder.textContent || `?`;
+		const label = document.createElement(`span`);
+		label.style.cssText = `
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+		label.textContent = el.getAttribute(`data-label`) || key;
+		row.appendChild(thumb);
+		row.appendChild(label);
+		return row;
+	}
 	#onDragStart;
+	#onSlottedDragStart;
+	#initSlottedDragInterceptor() {
+		this.renderRoot.addEventListener(`dragstart`, this.#onSlottedDragStart, { capture: true });
+		const observer = new MutationObserver(() => this.#syncSlottedDraggable());
+		observer.observe(this, {
+			childList: true,
+			subtree: true
+		});
+		this.#slottedDragObserver = observer;
+		this.#syncSlottedDraggable();
+	}
+	#slottedDragObserver;
+	#syncSlottedDraggable() {
+		const draggable = this.itemsDraggable;
+		for (const child of this.children) if (child instanceof HTMLElement) child.draggable = draggable;
+	}
 	#onDragEnd;
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);