@dimina-kit/electron-deck 0.1.0-dev.20260616102751 → 0.1.0-dev.20260618090552

package/dist/dock-react/index.js

@@ -1,5 +1,5 @@
-import { a as movePanel, c as setSizes, l as splitPanel, n as closePanel, o as setActive, r as extractPanel } from "../layout-CZtF0auJ.js";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { a as movePanel, c as setSizes, l as splitPanel, n as closePanel, o as setActive, r as extractPanel } from "../layout-WI8y1hxP.js";
+import { Fragment, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dock-react/drag-redock.ts
@@ -89,6 +89,24 @@ function isNoopRedock(dragged, draggedGroupId, target, zone) {
 	if (zone === "center" && draggedGroupId !== void 0 && draggedGroupId === target.groupId) return true;
 	return false;
 }
+/**
+* Map a pointer x-position over a horizontal tab strip to an insertion index for
+* a within-strip REORDER (the `dropPolicy:'reorder-only'` gesture). The strip is
+* the dragged tab's own group; `tabRects` are the tab buttons' rects in visual
+* order (each `left` is the rect's left edge, `width` its width). The index is
+* the count of tabs whose MIDPOINT the pointer has passed: the LEFT half of a tab
+* inserts BEFORE it, the RIGHT half (and the exact midpoint) inserts AFTER it. A
+* pointer left of the first tab → 0; past the last tab → `tabRects.length`. Pure
+* (no DOM): the caller measures the rects and passes the pointer x. An empty
+* strip or a non-finite pointer → 0.
+*/
+function computeReorderIndex(tabRects, pointerX) {
+	if (!Number.isFinite(pointerX)) return 0;
+	let index = 0;
+	for (const rect of tabRects) if (pointerX >= rect.left + rect.width / 2) index += 1;
+	else break;
+	return index;
+}
 //#endregion
 //#region src/dock-react/dock-view.tsx
 /**
@@ -110,6 +128,33 @@ function isNoopRedock(dragged, draggedGroupId, target, zone) {
 * tab's `data-deck-tab` attribute (the jsdom seam relies on the latter).
 */
 var DRAG_PANEL_MIME = "application/x-deck-panel";
+/**
+* The current layout EPOCH — the model's revision, bumped once per committed
+* mutation. `DockView` provides it; descendant panels read it via
+* `useDockLayoutEpoch`.
+*
+* Its reason to exist: a native-view overlay anchored inside a dock panel
+* (a `WebContentsView` tracking its slot's geometry) re-publishes its bounds
+* only on GEOMETRY events (ResizeObserver / window-resize / splitter-drag). A
+* layout mutation that REORDERS a slot without resizing it — flipping a
+* fixed-width simulator column left↔right, moving a region — produces NO such
+* event (a same-size flex reorder fires nothing), so the overlay would freeze
+* at its old position. The epoch is the layout layer's explicit "something
+* moved" signal: a panel hosting a native overlay re-measures (e.g. pulses its
+* view-anchor) when the epoch changes, catching the translate the browser never
+* reports. Default 0 (outside a provider): the consuming effect runs once on
+* mount, which is harmless.
+*/
+var LayoutEpochContext = createContext(0);
+/**
+* Read the current dock layout epoch (the model revision). Re-renders the caller
+* whenever a layout mutation commits. Keyed into a panel's effect deps, it lets
+* a native-overlay host re-measure on a reorder that fires no geometry event.
+* Returns 0 when used outside a `<DockView>`.
+*/
+function useDockLayoutEpoch() {
+	return useContext(LayoutEpochContext);
+}
 /** Normalize raw split weights to percentages summing ~100 for `defaultSize`. */
 function toPercentages(sizes) {
 	const total = sizes.reduce((a, b) => a + (b > 0 ? b : 0), 0);
@@ -120,11 +165,11 @@ function toPercentages(sizes) {
 	return sizes.map((s) => (s > 0 ? s : 0) / total * 100);
 }
 /**
-* Compute the `defaultSize` percentage for each FLEXIBLE (unconstrained) child,
-* keyed by its ORIGINAL child index. Fixed (px-pinned) children are excluded
-* from the pool entirely so their weight never pollutes the flexible siblings'
-* normalization (FIX E1). `constraints[i]` non-null ⇒ child i is fixed and is
-* absent from the returned map.
+* Compute the `defaultSize` percentage for each FLEXIBLE child, keyed by its
+* ORIGINAL child index. Px-sized children (a non-null `constraint` — `fixedPx`
+* locked OR `minPx` floored) are EXCLUDED from the pool: their size is px, not a
+* weight, so it must never pollute the flexible siblings' normalization (FIX E1).
+* `constraints[i]` non-null ⇒ child i is px-sized and absent from the returned map.
 */
 function computeFlexiblePercentages(sizes, constraints) {
 	const flexibleIndices = sizes.map((_, i) => i).filter((i) => (constraints?.[i] ?? null) === null);
@@ -138,10 +183,12 @@ function computeFlexiblePercentages(sizes, constraints) {
 function DockView(props) {
 	const { model, registry, renderDomPanel, bindNativeSlot } = props;
 	const [tree, setTree] = useState(() => model.get());
+	const [epoch, setEpoch] = useState(0);
 	useEffect(() => {
 		setTree(model.get());
 		return model.subscribe((snap) => {
 			setTree(snap.tree);
+			setEpoch(snap.revision);
 		});
 	}, [model]);
 	const handleActivate = useCallback((groupId, panelId) => {
@@ -155,12 +202,25 @@ function DockView(props) {
 	const handleApplyLayout = useCallback((splitId, weights) => {
 		model.apply((t) => setSizes(t, splitId, weights));
 	}, [model]);
-	const handleRedock = useCallback((groupId, activePanelId, draggedPanelId, zone) => {
+	const handleRedock = useCallback((groupId, activePanelId, draggedPanelId, zone, reorderIndex) => {
 		const target = {
 			groupId,
 			panelId: activePanelId
 		};
-		if (isNoopRedock(draggedPanelId, findPanelGroupId(model.get().root, draggedPanelId), target, zone)) return;
+		const draggedGroupId = findPanelGroupId(model.get().root, draggedPanelId);
+		if (registry.get(activePanelId)?.draggable === false) return;
+		if (registry.get(draggedPanelId)?.dropPolicy === "reorder-only") {
+			if (draggedGroupId === void 0 || draggedGroupId !== groupId) return;
+			if (zone !== "center") return;
+			const group = findGroupById(model.get().root, groupId);
+			const index = reorderIndex ?? (group ? group.panels.indexOf(activePanelId) : void 0);
+			model.apply((t) => movePanel(t, draggedPanelId, {
+				groupId,
+				index
+			}));
+			return;
+		}
+		if (isNoopRedock(draggedPanelId, draggedGroupId, target, zone)) return;
 		const mutation = dropZoneToMutation(zone, draggedPanelId, target);
 		if (mutation.kind === "move") {
 			model.apply((t) => movePanel(t, mutation.panelId, { groupId: mutation.destGroupId }));
@@ -171,18 +231,21 @@ function DockView(props) {
 			if (findPanelGroupId(tree.root, mutation.atPanelId) === void 0) return t;
 			return splitPanel(tree, mutation.atPanelId, mutation.dir, mutation.newPanelId, mutation.side);
 		});
-	}, [model]);
-	return /* @__PURE__ */ jsx(Fragment, { children: renderNode(tree.root, {
-		registry,
-		renderDomPanel,
-		bindNativeSlot,
-		onActivate: handleActivate,
-		onApplyLayout: handleApplyLayout,
-		onRedock: handleRedock,
-		onClose: handleClose,
-		canClose,
-		isPanelInTree
-	}) });
+	}, [model, registry]);
+	return /* @__PURE__ */ jsx(LayoutEpochContext.Provider, {
+		value: epoch,
+		children: renderNode(tree.root, {
+			registry,
+			renderDomPanel,
+			bindNativeSlot,
+			onActivate: handleActivate,
+			onApplyLayout: handleApplyLayout,
+			onRedock: handleRedock,
+			onClose: handleClose,
+			canClose,
+			isPanelInTree
+		})
+	});
 }
 /** The id of the tab group currently holding `panelId`, or `undefined` if the
 * panel is not in the tree. Used by `handleRedock` to detect a drop back into
@@ -194,6 +257,17 @@ function findPanelGroupId(node, panelId) {
 		if (found !== void 0) return found;
 	}
 }
+/** The tab-group node with `groupId`, or `undefined`. Used by `handleRedock` to
+* read the live `panels` order of a reorder target (to anchor a same-group
+* reorder on the active panel's current index when the gesture carries no
+* pointer-derived index — e.g. the `__deckHandleDrop` test seam). */
+function findGroupById(node, groupId) {
+	if (node.kind === "tabs") return node.id === groupId ? node : void 0;
+	for (const child of node.children) {
+		const found = findGroupById(child, groupId);
+		if (found !== void 0) return found;
+	}
+}
 /** Total panels anywhere in the tree. Drives the last-panel close suppression:
 * a GroupView only knows its own node, so DockView computes this global count
 * once and threads the resulting `canClose` boolean down. */
@@ -243,6 +317,36 @@ var LAYOUT_EPSILON = .5;
 * self-healing (the next, larger resize writes back). If that ever matters,
 * scale the tolerance down by the flexible child count. */
 var FLEX_RATIO_TOLERANCE = .1;
+/**
+* The minimum weight a FLEXIBLE child may hold, given how many flexible children
+* share the split (Bug #1). A flexible `<Panel>` has no rrp `minSize` by default
+* (rrp floor is 0%), so a user can drag it to ~0 width; the resize write-back
+* would then persist a ~0 weight and the panel comes back invisible/stuck.
+*
+* The floor is `min(1, floor(90 / flexCount))` — i.e. ~1 weight unit (a flexible
+* split's weights are normalized to percentages downstream, so ~1 reads as ~1%
+* of the flexible pool). With any realistic flexible count this is exactly 1; the
+* `min(1, …)` only matters for a hypothetical 90+ flexible-child split. It is the
+* SAME value used for the rrp `minSize` (A) and the write-back clamp (B) so the
+* two defenses never disagree.
+*/
+function flexibleFloor(flexCount) {
+	return Math.min(1, Math.max(.5, Math.floor(90 / Math.max(1, flexCount))));
+}
+/**
+* Clamp the FLEXIBLE entries of a full-length weights array up to `floor` (Bug #1
+* defense B). Px-sized children (a non-null constraint) are left untouched — their
+* `sizes[i]` is a preserved placeholder, not a live weight. Returns a new array;
+* a weight already ≥ floor is kept verbatim so a healthy ratio is undisturbed.
+*/
+function clampFlexibleWeights(weights, constraints) {
+	const flexCount = weights.filter((_, i) => (constraints?.[i] ?? null) === null).length;
+	const floor = flexibleFloor(flexCount);
+	return weights.map((w, i) => {
+		if ((constraints?.[i] ?? null) !== null) return w;
+		return Number.isFinite(w) && w >= floor ? w : floor;
+	});
+}
 /** Are two panelId→percentage maps equivalent within `epsilon` percentage
 * points? Both maps must cover EXACTLY the `ids` key set — a missing key OR an
 * extra key (a key present in `a`/`b` but absent from `ids`) counts as NOT
@@ -340,6 +444,8 @@ function SplitView(props) {
 	const { node, ctx } = props;
 	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
 	const percentageByIndex = computeFlexiblePercentages(node.sizes, node.constraints);
+	const flexCount = node.children.filter((_, i) => (node.constraints?.[i] ?? null) === null).length;
+	const flexMinSize = String(flexibleFloor(flexCount));
 	const groupRef = useRef(null);
 	const nodeRef = useRef(node);
 	nodeRef.current = node;
@@ -347,7 +453,7 @@ function SplitView(props) {
 	node.children.forEach((child, i) => {
 		if (i > 0) items.push(/* @__PURE__ */ jsx(Separator, { "data-deck-resize-handle": "" }, `handle-${i}`));
 		const constraint = node.constraints?.[i] ?? null;
-		if (constraint) {
+		if (constraint?.fixedPx != null) {
 			const px = `${constraint.fixedPx}px`;
 			items.push(/* @__PURE__ */ jsx(Panel, {
 				id: child.id,
@@ -357,11 +463,24 @@ function SplitView(props) {
 				groupResizeBehavior: "preserve-pixel-size",
 				children: renderNode(child, ctx)
 			}, panelKey(child)));
-		} else items.push(/* @__PURE__ */ jsx(Panel, {
-			id: child.id,
-			defaultSize: percentageByIndex.get(i),
-			children: renderNode(child, ctx)
-		}, panelKey(child)));
+		} else if (constraint?.minPx != null) {
+			const px = `${constraint.minPx}px`;
+			items.push(/* @__PURE__ */ jsx(Panel, {
+				id: child.id,
+				defaultSize: px,
+				minSize: px,
+				groupResizeBehavior: "preserve-pixel-size",
+				children: renderNode(child, ctx)
+			}, panelKey(child)));
+		} else {
+			const pct = percentageByIndex.get(i);
+			items.push(/* @__PURE__ */ jsx(Panel, {
+				id: child.id,
+				defaultSize: pct != null ? String(pct) : void 0,
+				minSize: flexMinSize,
+				children: renderNode(child, ctx)
+			}, panelKey(child)));
+		}
 	});
 	const handleLayoutChanged = (layout) => {
 		const cur = nodeRef.current;
@@ -373,7 +492,7 @@ function SplitView(props) {
 		const modelNorm = incoming.indices.map((i) => modelPctByIndex.get(i) ?? 0);
 		if (!incoming.ratios.some((r, k) => Math.abs(r - modelNorm[k]) > FLEX_RATIO_TOLERANCE)) return;
 		const weights = curChildIds.map((id, i) => isFixedAt(i) ? cur.sizes[i] ?? 1 : layout[id]);
-		ctx.onApplyLayout(cur.id, weights);
+		ctx.onApplyLayout(cur.id, clampFlexibleWeights(weights, cur.constraints));
 	};
 	const setSplitRef = (el) => {
 		if (el) {
@@ -381,7 +500,7 @@ function SplitView(props) {
 				const cur = nodeRef.current;
 				const isFixedAt = (i) => (cur.constraints?.[i] ?? null) !== null;
 				const next = weights.map((w, i) => isFixedAt(i) ? cur.sizes[i] ?? 1 : w);
-				ctx.onApplyLayout(cur.id, next);
+				ctx.onApplyLayout(cur.id, clampFlexibleWeights(next, cur.constraints));
 			};
 			Object.defineProperty(el, "__deckGroupApi", {
 				configurable: true,
@@ -401,9 +520,15 @@ function SplitView(props) {
 		api.setLayout(targetMap);
 		return true;
 	}, []);
+	const sizesKey = node.sizes.join(",");
+	const childCountKey = node.children.length;
 	useEffect(() => {
 		runSync();
-	}, [node.sizes.join(","), runSync]);
+	}, [
+		sizesKey,
+		childCountKey,
+		runSync
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: setSplitRef,
 		"data-deck-split": node.id,
@@ -422,7 +547,7 @@ function SplitView(props) {
 				height: "100%"
 			},
 			children: items
-		})
+		}, node.children.length)
 	});
 }
 /** Stable React key for a child node (split id or group id). */
@@ -479,8 +604,37 @@ function GroupView(props) {
 		setDropZone(null);
 		const dragged = e.dataTransfer.getData(DRAG_PANEL_MIME) || e.dataTransfer.getData("text/plain");
 		if (!dragged || ctx.registry.get(dragged) === void 0 || !ctx.isPanelInTree(dragged)) return;
-		ctx.onRedock(node.id, node.active, dragged, zone);
+		const reorderIndex = computeReorderIndex(Array.from(e.currentTarget.querySelectorAll("[data-deck-tab]")).map((el) => {
+			const r = el.getBoundingClientRect();
+			return {
+				left: r.left,
+				width: r.width
+			};
+		}), e.clientX);
+		ctx.onRedock(node.id, node.active, dragged, zone, reorderIndex);
+	};
+	const handleTabStripDragOver = (e) => {
+		if (!e.dataTransfer.types.includes(DRAG_PANEL_MIME)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setDropZone(null);
+	};
+	const handleTabStripDrop = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDropZone(null);
+		const dragged = e.dataTransfer.getData(DRAG_PANEL_MIME) || e.dataTransfer.getData("text/plain");
+		if (!dragged || ctx.registry.get(dragged) === void 0 || !ctx.isPanelInTree(dragged)) return;
+		const reorderIndex = computeReorderIndex(Array.from(e.currentTarget.querySelectorAll("[data-deck-tab]")).map((el) => {
+			const r = el.getBoundingClientRect();
+			return {
+				left: r.left,
+				width: r.width
+			};
+		}), e.clientX);
+		ctx.onRedock(node.id, node.active, dragged, "center", reorderIndex);
 	};
+	const visibleTabs = node.panels.filter((panelId) => !ctx.registry.get(panelId)?.hideTab);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setGroupRef,
 		"data-deck-group": node.id,
@@ -497,16 +651,19 @@ function GroupView(props) {
 			minHeight: 0
 		},
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			visibleTabs.length > 0 ? /* @__PURE__ */ jsx("div", {
 				role: "tablist",
 				style: { flexShrink: 0 },
-				children: node.panels.map((panelId) => {
+				onDragOver: handleTabStripDragOver,
+				onDrop: handleTabStripDrop,
+				children: visibleTabs.map((panelId) => {
 					const active = panelId === node.active;
-					const title = ctx.registry.get(panelId)?.title ?? panelId;
+					const descriptor = ctx.registry.get(panelId);
+					const title = descriptor?.title ?? panelId;
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						role: "tab",
-						draggable: "true",
+						draggable: descriptor?.draggable !== false ? "true" : void 0,
 						"data-deck-tab": panelId,
 						"data-active": active ? "true" : "false",
 						onDragStart: (e) => {
@@ -543,7 +700,7 @@ function GroupView(props) {
 						}) : null]
 					}, panelId);
 				})
-			}),
+			}) : null,
 			renderActiveBody(node, ctx),
 			dropZone ? /* @__PURE__ */ jsx(DropIndicator, { zone: dropZone }) : null
 		]
@@ -633,7 +790,8 @@ function renderActiveBody(node, ctx) {
 		return /* @__PURE__ */ jsx("div", {
 			"data-deck-panel-body": panelId,
 			style: {
-				display: active ? void 0 : "none",
+				display: active ? "flex" : "none",
+				flexDirection: "column",
 				flex: 1,
 				minWidth: 0,
 				minHeight: 0
@@ -666,6 +824,6 @@ function NativeSlot(props) {
 	});
 }
 //#endregion
-export { DockView, computeDropZone, computeFlexiblePercentages, dropZoneToMutation, isNoopRedock, layoutsEquivalent };
+export { DockView, computeDropZone, computeFlexiblePercentages, computeReorderIndex, dropZoneToMutation, isNoopRedock, layoutsEquivalent, useDockLayoutEpoch };
 
 //# sourceMappingURL=index.js.map