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

package/dist/dock-react/index.js

@@ -0,0 +1,671 @@
+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 { Group, Panel, Separator } from "react-resizable-panels";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dock-react/drag-redock.ts
+/**
+* Classify a pointer position (RELATIVE to the rect's top-left; `(0,0)` is the
+* corner) into a drop zone.
+*
+* Band thickness = `edgeFraction * min(width, height)` — a single symmetric band
+* width derived from the SHORTER side so a wide/short panel doesn't get an
+* absurdly fat horizontal band. A point in NO band is `center` (the tab-join
+* interior). A point in TWO bands (a corner) tie-breaks by NORMALIZED distance
+* to each active edge; on an exact tie HORIZONTAL wins. A point OUTSIDE the rect
+* clamps to the nearest edge zone (per-axis; diagonal corners pick the larger
+* overshoot, horizontal breaking ties).
+*/
+function computeDropZone(rect, point, edgeFraction = .25) {
+	const { width, height } = rect;
+	const { x, y } = point;
+	if (!(width > 0) || !(height > 0) || !Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(x) || !Number.isFinite(y)) return "center";
+	const ef = Number.isFinite(edgeFraction) ? Math.max(0, Math.min(.5, edgeFraction)) : .25;
+	const outX = x < 0 ? x : x > width ? x - width : 0;
+	const outY = y < 0 ? y : y > height ? y - height : 0;
+	if (outX !== 0 || outY !== 0) {
+		const magX = Math.abs(outX);
+		if (magX >= Math.abs(outY)) {
+			if (magX > 0) return outX < 0 ? "left" : "right";
+		}
+		return outY < 0 ? "top" : "bottom";
+	}
+	const band = ef * Math.min(width, height);
+	const inLeft = x < band;
+	const inRight = x > width - band;
+	const inTop = y < band;
+	const inBottom = y > height - band;
+	const activeHoriz = inLeft || inRight;
+	const activeVert = inTop || inBottom;
+	if (!activeHoriz && !activeVert) return "center";
+	if (activeHoriz && !activeVert) return inLeft ? "left" : "right";
+	if (activeVert && !activeHoriz) return inTop ? "top" : "bottom";
+	if ((inLeft ? x / width : (width - x) / width) <= (inTop ? y / height : (height - y) / height)) return inLeft ? "left" : "right";
+	return inTop ? "top" : "bottom";
+}
+/**
+* Translate a drop zone into an engine-neutral re-dock descriptor.
+*
+*   center => move the dragged panel into the target's tab group.
+*   left/right => split the target panel horizontally (row), dragged before/after.
+*   top/bottom => split the target panel vertically (column), dragged before/after.
+*/
+function dropZoneToMutation(zone, dragged, target) {
+	if (zone === "center") return {
+		kind: "move",
+		panelId: dragged,
+		destGroupId: target.groupId
+	};
+	const dir = zone === "left" || zone === "right" ? "row" : "column";
+	const side = zone === "left" || zone === "top" ? "before" : "after";
+	return {
+		kind: "split",
+		atPanelId: target.panelId,
+		dir,
+		side,
+		newPanelId: dragged
+	};
+}
+/**
+* A re-dock is a NO-OP when it would not change the tree:
+*
+*   1. The drop targets the dragged panel ITSELF (`dragged === target.panelId`),
+*      in ANY zone — you can neither tab a panel onto its own tab nor split a
+*      panel around itself. Crucially this also guards the SPLIT case: without
+*      it, `extractPanel(dragged)` then `splitPanel(atPanelId = dragged)` removes
+*      the very anchor it then splits at and THROWS (the self-collapse / single-
+*      panel-self-split bug).
+*   2. A `center` drop into a group the dragged panel ALREADY lives in
+*      (`draggedGroupId === target.groupId`) — `movePanel` would re-append it and
+*      bump the revision for no visible change (churn).
+*
+* A SPLIT onto a DIFFERENT panel of the dragged panel's own group is still a real
+* re-dock (it splits the group around that sibling), so it is NOT a no-op.
+*
+* `draggedGroupId` is the id of the tab group currently holding `dragged`
+* (`undefined` if it is not in the tree).
+*/
+function isNoopRedock(dragged, draggedGroupId, target, zone) {
+	if (dragged === target.panelId) return true;
+	if (zone === "center" && draggedGroupId !== void 0 && draggedGroupId === target.groupId) return true;
+	return false;
+}
+//#endregion
+//#region src/dock-react/dock-view.tsx
+/**
+* `<DockView>` — React renderer for a layout-as-data tree.
+*
+* Pure function of the current model snapshot (+ registry + the two host
+* callbacks). It owns NO layout state: it subscribes to the `LayoutModel`,
+* keeps the latest tree in component state, and re-renders on every emission.
+* All structural targeting is via STABLE `data-*` attributes — see the
+* contract doc-block in `dock-view.test.tsx`.
+*
+* This file lives under `src/dock-react/` (NOT `src/layout/`), so importing
+* react here does not violate the pure-TS layout boundary.
+*/
+/**
+* The dataTransfer MIME under which a drag carries the dragged panel id. A
+* custom type (vs `text/plain`) keeps deck drags from being confused with
+* arbitrary text drops; the panel id also stays recoverable from the source
+* tab's `data-deck-tab` attribute (the jsdom seam relies on the latter).
+*/
+var DRAG_PANEL_MIME = "application/x-deck-panel";
+/** 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);
+	if (total <= 0) {
+		const even = sizes.length > 0 ? 100 / sizes.length : 100;
+		return sizes.map(() => even);
+	}
+	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.
+*/
+function computeFlexiblePercentages(sizes, constraints) {
+	const flexibleIndices = sizes.map((_, i) => i).filter((i) => (constraints?.[i] ?? null) === null);
+	const pct = toPercentages(flexibleIndices.map((i) => sizes[i] ?? 0));
+	const out = /* @__PURE__ */ new Map();
+	flexibleIndices.forEach((origIndex, j) => {
+		out.set(origIndex, pct[j]);
+	});
+	return out;
+}
+function DockView(props) {
+	const { model, registry, renderDomPanel, bindNativeSlot } = props;
+	const [tree, setTree] = useState(() => model.get());
+	useEffect(() => {
+		setTree(model.get());
+		return model.subscribe((snap) => {
+			setTree(snap.tree);
+		});
+	}, [model]);
+	const handleActivate = useCallback((groupId, panelId) => {
+		model.apply((t) => setActive(t, groupId, panelId));
+	}, [model]);
+	const handleClose = useCallback((panelId) => {
+		model.apply((t) => closePanel(t, panelId));
+	}, [model]);
+	const canClose = countPanels(tree.root) > 1;
+	const isPanelInTree = useCallback((panelId) => findPanelGroupId(tree.root, panelId) !== void 0, [tree]);
+	const handleApplyLayout = useCallback((splitId, weights) => {
+		model.apply((t) => setSizes(t, splitId, weights));
+	}, [model]);
+	const handleRedock = useCallback((groupId, activePanelId, draggedPanelId, zone) => {
+		const target = {
+			groupId,
+			panelId: activePanelId
+		};
+		if (isNoopRedock(draggedPanelId, findPanelGroupId(model.get().root, draggedPanelId), target, zone)) return;
+		const mutation = dropZoneToMutation(zone, draggedPanelId, target);
+		if (mutation.kind === "move") {
+			model.apply((t) => movePanel(t, mutation.panelId, { groupId: mutation.destGroupId }));
+			return;
+		}
+		model.apply((t) => {
+			const { tree } = extractPanel(t, mutation.newPanelId);
+			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
+	}) });
+}
+/** 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
+* the dragged panel's own group (M2) and to guard a vanished split anchor (M1). */
+function findPanelGroupId(node, panelId) {
+	if (node.kind === "tabs") return node.panels.includes(panelId) ? node.id : void 0;
+	for (const child of node.children) {
+		const found = findPanelGroupId(child, panelId);
+		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. */
+function countPanels(node) {
+	if (node.kind === "tabs") return node.panels.length;
+	return node.children.reduce((sum, child) => sum + countPanels(child), 0);
+}
+function renderNode(node, ctx) {
+	return node.kind === "split" ? renderSplit(node, ctx) : renderGroup(node, ctx);
+}
+/** A split is a stateful component (it holds the rrp Group imperative ref + runs
+* the M1 model→view sync effect), so render it via JSX with a STABLE key so
+* React preserves that ref / its kept-alive subtree across model emissions
+* rather than remounting on every snapshot. Mirrors `renderGroup`/`GroupView`. */
+function renderSplit(node, ctx) {
+	return /* @__PURE__ */ jsx(SplitView, {
+		node,
+		ctx
+	}, node.id);
+}
+/** Epsilon (in percentage points) within which two split layouts are treated as
+* equivalent. Guards BOTH sides of the model↔view loop: we skip pushing a
+* `setLayout` when the live layout already matches the target, and skip the
+* `onLayoutChanged` write-back when the incoming layout matches the model — so
+* `setLayout`→`onLayoutChanged`→write-back→re-sync cannot loop. */
+var LAYOUT_EPSILON = .5;
+/** TIGHT tolerance (percentage points) for the BASIS-NORMALIZED flexible-ratio
+* compare in `handleLayoutChanged`. We normalize the incoming layout's flexible
+* subset to ratios summing to 100 and compare them against the model's flexible
+* ratios (`computeFlexiblePercentages`, also summing to 100). If they match
+* within this tolerance the `onLayoutChanged` is either our own `setLayout` echo
+* OR a ratio-preserving spontaneous re-measure (mount / fixed-px re-pin /
+* container resize) — SKIP the write-back. If they differ it is a genuine user
+* resize (pointer OR keyboard) — WRITE BACK.
+*
+* Set to ~0.1pp: large enough to absorb rrp's ~3-decimal float noise on an echo,
+* yet FAR below a real drag's delta. R1's "sub-0.5%" drag moves a panel ~0.33pp
+* of the container; normalized over the two-flexible-child subset that is ~0.66pp
+* of ratio — comfortably above 0.1, so it is NOT mistaken for an echo and is
+* written back.
+*
+* CAVEAT: this is a flexible-RATIO tolerance (the flexible subset normalized to
+* sum 100), NOT a container-%. It is safe against rrp's 3-decimal echo noise.
+* In a pathologically WIDE split (~≥10 flexible children) a single arrow-key
+* nudge (±~5% of the container on one child) can, once normalized over many
+* flexible siblings, fall BELOW 0.1pp of ratio and be skipped — exotic and
+* 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;
+/** 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
+* equivalent so the sync is not falsely suppressed. A non-finite value
+* (NaN/±Infinity) is likewise NOT equivalent — `typeof NaN === 'number'` and
+* `Math.abs(NaN - x) > eps` is `false`, so without the `Number.isFinite` guard a
+* NaN would slip through as "equivalent" and wrongly suppress a legitimate
+* sync/write-back (N1). EXPORTED (pure) for direct unit coverage. */
+function layoutsEquivalent(a, b, ids, epsilon = LAYOUT_EPSILON) {
+	const idSet = new Set(ids);
+	for (const k of Object.keys(a)) if (!idSet.has(k)) return false;
+	for (const k of Object.keys(b)) if (!idSet.has(k)) return false;
+	for (const id of ids) {
+		const av = a[id];
+		const bv = b[id];
+		if (!Number.isFinite(av) || !Number.isFinite(bv)) return false;
+		if (Math.abs(av - bv) > epsilon) return false;
+	}
+	return true;
+}
+/**
+* Build the panel-ID→PERCENTAGE map for an imperative `setLayout`, given the
+* model's full-length raw `sizes` (per child) and `constraints`:
+*
+*  - FIXED (px-pinned) children keep their CURRENT measured percentage (read
+*    from the live `getLayout()`); they are NOT derived from weights, so a
+*    flexible-weights change never disturbs their pixel lock.
+*  - The REMAINING percentage (100 − Σ fixed%) is distributed across the
+*    FLEXIBLE children in proportion to their weights.
+*
+* Returns `null` when the map can't be built faithfully (e.g. `live` is empty —
+* jsdom's stub — or a fixed child's live % is missing), so the caller skips the
+* `setLayout` rather than pushing a corrupt total. The result always sums to
+* ~100 over all children.
+*/
+function buildSetLayoutMap(childIds, sizes, constraints, live) {
+	const isFixedAt = (i) => (constraints?.[i] ?? null) !== null;
+	let fixedTotal = 0;
+	for (let i = 0; i < childIds.length; i++) {
+		if (!isFixedAt(i)) continue;
+		const livePct = live[childIds[i]];
+		if (typeof livePct !== "number") return null;
+		fixedTotal += livePct;
+	}
+	const remaining = Math.max(0, 100 - fixedTotal);
+	let flexWeightTotal = 0;
+	for (let i = 0; i < childIds.length; i++) {
+		if (isFixedAt(i)) continue;
+		const w = sizes[i] ?? 0;
+		flexWeightTotal += w > 0 ? w : 0;
+	}
+	const flexibleCount = childIds.length - childIds.filter((_, i) => isFixedAt(i)).length;
+	const out = {};
+	for (let i = 0; i < childIds.length; i++) {
+		const id = childIds[i];
+		if (isFixedAt(i)) {
+			out[id] = live[id];
+			continue;
+		}
+		if (flexWeightTotal <= 0) {
+			out[id] = flexibleCount > 0 ? remaining / flexibleCount : remaining;
+			continue;
+		}
+		const w = sizes[i] ?? 0;
+		out[id] = remaining * (w > 0 ? w : 0) / flexWeightTotal;
+	}
+	return out;
+}
+/**
+* Extract an rrp `onLayoutChanged` map's FLEXIBLE subset (skipping fixed-px
+* children) in child order and NORMALIZE it by its own sum to ratios summing to
+* ~100 — the basis `computeFlexiblePercentages` already produces for the model,
+* so the two are directly comparable. Returns the original child `indices`
+* alongside the `ratios`. Null when the map is malformed (a flexible id is
+* missing / non-finite) or there is no flexible child — the caller then never
+* writes back from it.
+*/
+function incomingFlexRatios(childIds, constraints, layout) {
+	const indices = [];
+	const raw = [];
+	for (let i = 0; i < childIds.length; i++) {
+		if ((constraints?.[i] ?? null) !== null) continue;
+		const v = layout[childIds[i]];
+		if (typeof v !== "number" || !Number.isFinite(v)) return null;
+		indices.push(i);
+		raw.push(v > 0 ? v : 0);
+	}
+	if (indices.length === 0) return null;
+	return {
+		indices,
+		ratios: toPercentages(raw)
+	};
+}
+function SplitView(props) {
+	const { node, ctx } = props;
+	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
+	const percentageByIndex = computeFlexiblePercentages(node.sizes, node.constraints);
+	const groupRef = useRef(null);
+	const nodeRef = useRef(node);
+	nodeRef.current = node;
+	const items = [];
+	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) {
+			const px = `${constraint.fixedPx}px`;
+			items.push(/* @__PURE__ */ jsx(Panel, {
+				id: child.id,
+				defaultSize: px,
+				minSize: px,
+				maxSize: px,
+				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)));
+	});
+	const handleLayoutChanged = (layout) => {
+		const cur = nodeRef.current;
+		const curChildIds = cur.children.map((c) => c.id);
+		const isFixedAt = (i) => (cur.constraints?.[i] ?? null) !== null;
+		const incoming = incomingFlexRatios(curChildIds, cur.constraints, layout);
+		if (!incoming) return;
+		const modelPctByIndex = computeFlexiblePercentages(cur.sizes, cur.constraints);
+		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);
+	};
+	const setSplitRef = (el) => {
+		if (el) {
+			el.__deckApplyLayout = (weights) => {
+				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);
+			};
+			Object.defineProperty(el, "__deckGroupApi", {
+				configurable: true,
+				get: () => groupRef.current ?? void 0
+			});
+		}
+	};
+	const runSync = useCallback(() => {
+		const api = groupRef.current;
+		if (!api) return false;
+		const cur = nodeRef.current;
+		const curChildIds = cur.children.map((c) => c.id);
+		const live = api.getLayout();
+		const targetMap = buildSetLayoutMap(curChildIds, cur.sizes, cur.constraints, live);
+		if (!targetMap) return false;
+		if (layoutsEquivalent(live, targetMap, curChildIds)) return false;
+		api.setLayout(targetMap);
+		return true;
+	}, []);
+	useEffect(() => {
+		runSync();
+	}, [node.sizes.join(","), runSync]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setSplitRef,
+		"data-deck-split": node.id,
+		"data-orientation": node.orientation,
+		"data-deck-sizes": node.sizes.join(","),
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		children: /* @__PURE__ */ jsx(Group, {
+			groupRef,
+			orientation,
+			onLayoutChanged: handleLayoutChanged,
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			children: items
+		})
+	});
+}
+/** Stable React key for a child node (split id or group id). */
+function panelKey(node) {
+	return node.id;
+}
+function renderGroup(node, ctx) {
+	return /* @__PURE__ */ jsx(GroupView, {
+		node,
+		ctx
+	}, node.id);
+}
+/**
+* One tab GROUP: tab strip (draggable tabs) + active body + the imperative
+* `__deckHandleDrop` seam + a geometry-driven drop indicator while a drag hovers.
+*/
+function GroupView(props) {
+	const { node, ctx } = props;
+	const [dropZone, setDropZone] = useState(null);
+	const nodeRef = useRef(node);
+	nodeRef.current = node;
+	const redockRef = useRef(ctx.onRedock);
+	redockRef.current = ctx.onRedock;
+	const setGroupRef = (el) => {
+		if (el) el.__deckHandleDrop = (draggedPanelId, zone) => {
+			const current = nodeRef.current;
+			redockRef.current(current.id, current.active, draggedPanelId, zone);
+		};
+	};
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		const rect = e.currentTarget.getBoundingClientRect();
+		setDropZone(computeDropZone({
+			width: rect.width,
+			height: rect.height
+		}, {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		}));
+	};
+	const handleDragLeave = () => {
+		setDropZone(null);
+	};
+	const handleDrop = (e) => {
+		e.preventDefault();
+		const rect = e.currentTarget.getBoundingClientRect();
+		const zone = computeDropZone({
+			width: rect.width,
+			height: rect.height
+		}, {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		});
+		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);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setGroupRef,
+		"data-deck-group": node.id,
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop,
+		style: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height: "100%",
+			minWidth: 0,
+			minHeight: 0
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "tablist",
+				style: { flexShrink: 0 },
+				children: node.panels.map((panelId) => {
+					const active = panelId === node.active;
+					const title = ctx.registry.get(panelId)?.title ?? panelId;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "tab",
+						draggable: "true",
+						"data-deck-tab": panelId,
+						"data-active": active ? "true" : "false",
+						onDragStart: (e) => {
+							if (e.target instanceof Element && e.target.closest("[data-deck-tab-close]") !== null) {
+								e.preventDefault();
+								return;
+							}
+							e.dataTransfer.setData(DRAG_PANEL_MIME, panelId);
+							e.dataTransfer.setData("text/plain", panelId);
+							e.dataTransfer.effectAllowed = "move";
+						},
+						onClick: () => {
+							if (!active) ctx.onActivate(node.id, panelId);
+						},
+						children: [title, ctx.canClose ? /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: 0,
+							"data-deck-tab-close": panelId,
+							"aria-label": `Close ${title}`,
+							onPointerDown: (e) => e.stopPropagation(),
+							onClick: (e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								ctx.onClose(panelId);
+							},
+							onKeyDown: (e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.stopPropagation();
+									e.preventDefault();
+									ctx.onClose(panelId);
+								}
+							},
+							children: "×"
+						}) : null]
+					}, panelId);
+				})
+			}),
+			renderActiveBody(node, ctx),
+			dropZone ? /* @__PURE__ */ jsx(DropIndicator, { zone: dropZone }) : null
+		]
+	});
+}
+/**
+* Translate a drop zone into the indicator overlay's geometry. `center` covers
+* the whole group (a tab-join highlight); each edge zone is a HALF-band ribbon
+* pinned to that edge. Pure presentation — the host can re-skin via the
+* `data-deck-drop-zone` attribute; these inline styles are a sane default.
+*/
+function dropIndicatorStyle(zone) {
+	const base = {
+		position: "absolute",
+		pointerEvents: "none",
+		background: "rgba(64, 128, 255, 0.25)",
+		outline: "2px solid rgba(64, 128, 255, 0.6)"
+	};
+	switch (zone) {
+		case "left": return {
+			...base,
+			left: "0",
+			top: "0",
+			width: "50%",
+			height: "100%"
+		};
+		case "right": return {
+			...base,
+			right: "0",
+			top: "0",
+			width: "50%",
+			height: "100%"
+		};
+		case "top": return {
+			...base,
+			left: "0",
+			top: "0",
+			width: "100%",
+			height: "50%"
+		};
+		case "bottom": return {
+			...base,
+			left: "0",
+			bottom: "0",
+			width: "100%",
+			height: "50%"
+		};
+		default: return {
+			...base,
+			left: "0",
+			top: "0",
+			width: "100%",
+			height: "100%"
+		};
+	}
+}
+/** The drop-zone highlight rendered over a group during a drag-over. */
+function DropIndicator(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-deck-drop-zone": props.zone,
+		style: dropIndicatorStyle(props.zone)
+	});
+}
+/**
+* Render a tab group's body region under DOM-panel KEEPALIVE.
+*
+* - DOM panels: ALL of the group's DOM panels are mounted SIMULTANEOUSLY, each
+*   under a STABLE React key (`dom-${panelId}`) so switching the active tab never
+*   remounts a body — React state + scroll persist across A→B→A. The active body
+*   fills the region (flex:1); inactive ones stay in the DOM but `display:none`.
+*   Each body's host renderer receives `{ active }` and is re-invoked with the
+*   new flag on every activation change (no remount), so a host can fire
+*   on-activation side effects off the false→true edge.
+* - Native panels: EXEMPT from keepalive. The single ACTIVE native panel mounts a
+*   `NativeSlot` (keyed on the active id, so deactivation unmounts it and fires
+*   `bindNativeSlot(id, null)`); inactive native panels render nothing. Keeping a
+*   bound native slot mounted-but-hidden would collapse its WebContentsView rect.
+*/
+function renderActiveBody(node, ctx) {
+	const activeId = node.active;
+	if (!activeId) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [ctx.registry.get(activeId)?.kind === "native" ? /* @__PURE__ */ jsx(NativeSlot, {
+		panelId: activeId,
+		bindNativeSlot: ctx.bindNativeSlot
+	}, activeId) : null, node.panels.filter((panelId) => ctx.registry.get(panelId)?.kind !== "native").map((panelId) => {
+		const active = panelId === activeId;
+		return /* @__PURE__ */ jsx("div", {
+			"data-deck-panel-body": panelId,
+			style: {
+				display: active ? void 0 : "none",
+				flex: 1,
+				minWidth: 0,
+				minHeight: 0
+			},
+			children: ctx.renderDomPanel(panelId, { active })
+		}, `dom-${panelId}`);
+	})] });
+}
+/**
+* Empty anchor slot for an ACTIVE native panel. A ref-callback binds the live
+* element on mount and unbinds (`null`) on unmount. Keying the element on the
+* active panel id (in the parent) guarantees deactivation unmounts this slot —
+* firing the `null` cleanup — and re-activation mounts a fresh one, re-binding.
+*/
+function NativeSlot(props) {
+	const { panelId, bindNativeSlot } = props;
+	const bindRef = useRef(bindNativeSlot);
+	bindRef.current = bindNativeSlot;
+	return /* @__PURE__ */ jsx("div", {
+		ref: useCallback((el) => {
+			bindRef.current(panelId, el);
+		}, [panelId]),
+		"data-deck-native-slot": panelId,
+		style: {
+			flex: 1,
+			minWidth: 0,
+			minHeight: 0,
+			height: "100%"
+		}
+	});
+}
+//#endregion
+export { DockView, computeDropZone, computeFlexiblePercentages, dropZoneToMutation, isNoopRedock, layoutsEquivalent };
+
+//# sourceMappingURL=index.js.map