@dimina-kit/electron-deck 0.1.0-dev.20260702182435 → 0.1.0-dev.20260703051110

package/dist/dock-react/index.js

@@ -1,9 +1,79 @@
-import { a as closePanelForUser, c as extractPanel, d as setActive, m as splitPanel, p as setSizes, u as movePanel } from "../layout-ByOiOdnc.js";
+import { a as closePanelForUser, c as extractPanel, d as setActive, g as findGroupById, h as countPanels, m as splitPanel, p as setSizes, u as movePanel, v as findPanelGroupId } from "../layout-D-LYJIpM.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
 /**
+* A zero/negative/non-finite rect has no meaningful edge bands; a non-finite
+* point can't be classified either. Note a non-finite WIDTH/HEIGHT (e.g.
+* Infinity) satisfies `> 0` and would otherwise slip through — `band = ef *
+* min(Infinity, h)` yields a finite band and the point is misclassified as an
+* EDGE zone — so reject finiteness EXPLICITLY (N1).
+*/
+function isDegenerateDropInput(width, height, x, y) {
+	return !(width > 0) || !(height > 0) || !Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(x) || !Number.isFinite(y);
+}
+/**
+* Clamp the band fraction to [0, 0.5] (N1): a fraction > 0.5 makes the left
+* and right bands (and top/bottom) OVERLAP, so a point near the right edge of
+* a narrow rect would satisfy BOTH `inLeft` and `inRight` and be misread as
+* `left`. Capping at 0.5 keeps the two bands disjoint.
+*/
+function clampEdgeFraction(edgeFraction) {
+	return Number.isFinite(edgeFraction) ? Math.max(0, Math.min(.5, edgeFraction)) : .25;
+}
+/**
+* A pointer dragged past the panel edge has no band membership; clamp it to
+* the nearest edge zone. `undefined` when the point is IN the rect (the
+* caller falls through to band classification). Both axes out (a diagonal
+* corner): the axis with the LARGER overshoot magnitude wins; an exact tie is
+* broken by HORIZONTAL (the x axis).
+*/
+function classifyOutOfRectDropZone(width, height, x, y) {
+	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) return void 0;
+	const magX = Math.abs(outX);
+	if (magX >= Math.abs(outY) && magX > 0) return outX < 0 ? "left" : "right";
+	return outY < 0 ? "top" : "bottom";
+}
+function computeBandMembership(width, height, x, y, ef) {
+	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;
+	return {
+		inLeft,
+		inTop,
+		activeHoriz: inLeft || inRight,
+		activeVert: inTop || inBottom
+	};
+}
+/**
+* Corner tie-break (both axes active): pick the edge with the SMALLER
+* normalized distance. Only the ACTIVE horizontal edge and ACTIVE vertical
+* edge can compete (left vs right and top vs bottom can't both be active for
+* a sane rect). On an exact tie, HORIZONTAL wins (`<=` on the horizontal
+* distance).
+*/
+function cornerTieBreak(width, height, x, y, inLeft, inTop) {
+	if ((inLeft ? x / width : (width - x) / width) <= (inTop ? y / height : (height - y) / height)) return inLeft ? "left" : "right";
+	return inTop ? "top" : "bottom";
+}
+/**
+* Classify an IN-RECT point by edge-band membership. No band => interior
+* (`center`, the tab-join zone). One active band => that edge directly. Both
+* axes active (a corner) => {@link cornerTieBreak}.
+*/
+function classifyInRectDropZone(width, height, x, y, ef) {
+	const { inLeft, inTop, activeHoriz, activeVert } = computeBandMembership(width, height, x, y, ef);
+	if (!activeHoriz && !activeVert) return "center";
+	if (activeHoriz && !activeVert) return inLeft ? "left" : "right";
+	if (activeVert && !activeHoriz) return inTop ? "top" : "bottom";
+	return cornerTieBreak(width, height, x, y, inLeft, inTop);
+}
+/**
 * Classify a pointer position (RELATIVE to the rect's top-left; `(0,0)` is the
 * corner) into a drop zone.
 *
@@ -18,29 +88,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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";
+	if (isDegenerateDropInput(width, height, x, y)) return "center";
+	const ef = clampEdgeFraction(edgeFraction);
+	const outOfRectZone = classifyOutOfRectDropZone(width, height, x, y);
+	if (outOfRectZone !== void 0) return outOfRectZone;
+	return classifyInRectDropZone(width, height, x, y, ef);
 }
 /**
 * Translate a drop zone into an engine-neutral re-dock descriptor.
@@ -107,55 +159,44 @@ function computeReorderIndex(tabRects, pointerX) {
 	else break;
 	return index;
 }
-//#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`.
+* Translate a tab strip's VISIBLE-tab drop index into the insertion index
+* `movePanel`'s same-group reorder expects.
 *
-* 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";
-var activeDragPanelId = null;
-/**
-* The current layout EPOCH — the model's revision, bumped once per committed
-* mutation. `DockView` provides it; descendant panels read it via
-* `useDockLayoutEpoch`.
+* `computeReorderIndex` reports how many VISIBLE-tab midpoints the pointer has
+* passed (0..`visibleTabIds.length`), COUNTING the dragged tab's own midpoint and
+* measured over rects that OMIT `hideTab` panels. `movePanel` inserts into
+* `panels.filter(p => p !== dragged)` — a different coordinate space. Two shifts
+* reconcile them:
 *
-* 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>`.
+*   1. Once the pointer passes the dragged tab's OWN midpoint the strip index has
+*      counted the dragged slot, so drop it back out (−1) to get the insertion
+*      slot among the OTHER visible tabs.
+*   2. Map that visible slot onto the full `panels` order (which may carry hidden
+*      tabs the strip never measured): insert before whichever visible tab now
+*      occupies the slot, or append when the slot is past the last visible tab.
 */
-function useDockLayoutEpoch() {
-	return useContext(LayoutEpochContext);
+function resolveReorderInsertIndex(panels, visibleTabIds, draggedPanelId, stripInsertIndex) {
+	const draggedVisibleIndex = visibleTabIds.indexOf(draggedPanelId);
+	const passedOwnMidpoint = draggedVisibleIndex >= 0 && stripInsertIndex > draggedVisibleIndex;
+	const filteredVisible = visibleTabIds.filter((id) => id !== draggedPanelId);
+	const filteredPanels = panels.filter((id) => id !== draggedPanelId);
+	let visibleInsert = passedOwnMidpoint ? stripInsertIndex - 1 : stripInsertIndex;
+	if (visibleInsert < 0) visibleInsert = 0;
+	if (visibleInsert > filteredVisible.length) visibleInsert = filteredVisible.length;
+	if (visibleInsert >= filteredVisible.length) return filteredPanels.length;
+	const anchor = filteredVisible[visibleInsert];
+	const anchorIndex = filteredPanels.indexOf(anchor);
+	return anchorIndex >= 0 ? anchorIndex : filteredPanels.length;
 }
+//#endregion
+//#region src/dock-react/split-sizing.ts
+/** 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;
 /** 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);
@@ -181,146 +222,6 @@ function computeFlexiblePercentages(sizes, constraints) {
 	});
 	return out;
 }
-function DockView(props) {
-	const { model, registry, renderDomPanel, bindNativeSlot, suppressReorderOnlyDropIndicator, onActiveTabClick } = 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) => {
-		model.apply((t) => setActive(t, groupId, panelId));
-	}, [model]);
-	const handleClose = useCallback((panelId) => {
-		model.apply((t) => closePanelForUser(t, panelId, registry));
-	}, [model, registry]);
-	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, reorderIndex) => {
-		const target = {
-			groupId,
-			panelId: activePanelId
-		};
-		const draggedGroupId = findPanelGroupId(model.get().root, draggedPanelId);
-		if (registry.get(draggedPanelId)?.draggable === false) return;
-		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 }));
-			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, registry]);
-	return /* @__PURE__ */ jsx(LayoutEpochContext.Provider, {
-		value: epoch,
-		children: renderNode(tree.root, {
-			registry,
-			renderDomPanel,
-			bindNativeSlot,
-			onActivate: handleActivate,
-			onActiveTabClick,
-			onApplyLayout: handleApplyLayout,
-			onRedock: handleRedock,
-			onClose: handleClose,
-			canClose,
-			isPanelInTree,
-			suppressReorderOnlyDropIndicator: suppressReorderOnlyDropIndicator ?? false
-		})
-	});
-}
-/** 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;
-	}
-}
-/** 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. */
-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;
 /**
 * 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
@@ -388,38 +289,48 @@ function layoutsEquivalent(a, b, ids, epsilon = LAYOUT_EPSILON) {
 */
 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 fixedTotal = sumFixedLivePercent(childIds, isFixedAt, live);
+	if (fixedTotal === null) return null;
 	const remaining = Math.max(0, 100 - fixedTotal);
 	let flexWeightTotal = 0;
+	let flexibleCount = 0;
 	for (let i = 0; i < childIds.length; i++) {
 		if (isFixedAt(i)) continue;
 		const w = sizes[i] ?? 0;
 		flexWeightTotal += w > 0 ? w : 0;
+		flexibleCount += 1;
 	}
-	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;
+		out[id] = isFixedAt(i) ? live[id] : flexibleShare(sizes[i] ?? 0, remaining, flexWeightTotal, flexibleCount);
 	}
 	return out;
 }
 /**
+* Sum the fixed children's CURRENT live percentages (preserving their px
+* lock). Null when a fixed child has no measured live % — the caller cannot
+* build a faithful map then.
+*/
+function sumFixedLivePercent(childIds, isFixedAt, live) {
+	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;
+	}
+	return fixedTotal;
+}
+/**
+* One flexible child's percentage share of the `remaining` space. A degenerate
+* weight pool (total ≤ 0) splits the remaining space evenly instead.
+*/
+function flexibleShare(weight, remaining, flexWeightTotal, flexibleCount) {
+	if (flexWeightTotal <= 0) return flexibleCount > 0 ? remaining / flexibleCount : remaining;
+	return remaining * (weight > 0 ? weight : 0) / flexWeightTotal;
+}
+/**
 * 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,
@@ -444,6 +355,14 @@ function incomingFlexRatios(childIds, constraints, layout) {
 		ratios: toPercentages(raw)
 	};
 }
+//#endregion
+//#region src/dock-react/split-view.tsx
+/**
+* `SplitView` — one split node rendered as a react-resizable-panels Group, plus
+* the model↔view sync machine (M1): it pushes the model's flexible weights into
+* the live Group via `setLayout` and writes a genuine user resize back through
+* `ctx.onApplyLayout`. The split-sizing arithmetic lives in `./split-sizing`.
+*/
 function SplitView(props) {
 	const { node, ctx } = props;
 	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
@@ -494,7 +413,7 @@ function SplitView(props) {
 		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;
+		if (!incoming.ratios.some((r, k) => Math.abs(r - modelNorm[k]) > .1)) return;
 		const weights = curChildIds.map((id, i) => isFixedAt(i) ? cur.sizes[i] ?? 1 : layout[id]);
 		ctx.onApplyLayout(cur.id, clampFlexibleWeights(weights, cur.constraints));
 	};
@@ -558,12 +477,85 @@ function SplitView(props) {
 function panelKey(node) {
 	return node.id;
 }
-function renderGroup(node, ctx) {
-	return /* @__PURE__ */ jsx(GroupView, {
-		node,
-		ctx
-	}, node.id);
+//#endregion
+//#region src/dock-react/panel-body.tsx
+/**
+* Tab-group body rendering under DOM-panel keepalive: `renderActiveBody` (the
+* body region) + `NativeSlot` (the anchor for an active native panel).
+*/
+/**
+* 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").slice().sort((a, b) => a < b ? -1 : a > b ? 1 : 0).map((panelId) => {
+		const active = panelId === activeId;
+		return /* @__PURE__ */ jsx("div", {
+			"data-deck-panel-body": panelId,
+			style: {
+				display: active ? "flex" : "none",
+				flexDirection: "column",
+				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
+//#region src/dock-react/group-view.tsx
+/**
+* `GroupView` — one tab GROUP: the draggable tab strip, the active body, the
+* imperative `__deckHandleDrop` seam, and a geometry-driven drop indicator while
+* a drag hovers. Owns all tab drag/drop handlers.
+*/
+/**
+* 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";
 /**
 * One tab GROUP: tab strip (draggable tabs) + active body + the imperative
 * `__deckHandleDrop` seam + a geometry-driven drop indicator while a drag hovers.
@@ -582,8 +574,10 @@ function GroupView(props) {
 		};
 	};
 	const handleDragOver = (e) => {
+		if (!e.dataTransfer?.types.includes(DRAG_PANEL_MIME)) return;
 		e.preventDefault();
-		if (ctx.suppressReorderOnlyDropIndicator && activeDragPanelId !== null && ctx.registry.get(activeDragPanelId)?.dropPolicy === "reorder-only") {
+		const draggedId = ctx.activeDragPanelId.current;
+		if (ctx.suppressReorderOnlyDropIndicator && draggedId !== null && ctx.registry.get(draggedId)?.dropPolicy === "reorder-only") {
 			setDropZone(null);
 			return;
 		}
@@ -610,7 +604,7 @@ function GroupView(props) {
 			y: e.clientY - rect.top
 		});
 		setDropZone(null);
-		const dragged = e.dataTransfer.getData(DRAG_PANEL_MIME) || e.dataTransfer.getData("text/plain");
+		const dragged = e.dataTransfer?.getData(DRAG_PANEL_MIME);
 		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();
@@ -622,7 +616,7 @@ function GroupView(props) {
 		ctx.onRedock(node.id, node.active, dragged, zone, reorderIndex);
 	};
 	const handleTabStripDragOver = (e) => {
-		if (!e.dataTransfer.types.includes(DRAG_PANEL_MIME)) return;
+		if (!e.dataTransfer?.types.includes(DRAG_PANEL_MIME)) return;
 		e.preventDefault();
 		e.stopPropagation();
 		setDropZone(null);
@@ -631,7 +625,7 @@ function GroupView(props) {
 		e.preventDefault();
 		e.stopPropagation();
 		setDropZone(null);
-		const dragged = e.dataTransfer.getData(DRAG_PANEL_MIME) || e.dataTransfer.getData("text/plain");
+		const dragged = e.dataTransfer?.getData(DRAG_PANEL_MIME);
 		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();
@@ -682,10 +676,10 @@ function GroupView(props) {
 							e.dataTransfer.setData(DRAG_PANEL_MIME, panelId);
 							e.dataTransfer.setData("text/plain", panelId);
 							e.dataTransfer.effectAllowed = "move";
-							activeDragPanelId = panelId;
+							ctx.activeDragPanelId.current = panelId;
 						},
 						onDragEnd: () => {
-							activeDragPanelId = null;
+							ctx.activeDragPanelId.current = null;
 						},
 						onClick: () => {
 							if (!active) ctx.onActivate(node.id, panelId);
@@ -777,66 +771,167 @@ function DropIndicator(props) {
 		style: dropIndicatorStyle(props.zone)
 	});
 }
+//#endregion
+//#region src/dock-react/dock-view.tsx
 /**
-* Render a tab group's body region under DOM-panel KEEPALIVE.
+* `<DockView>` — React renderer for a layout-as-data tree.
 *
-* - 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.
+* 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 stateful child
+* views (`SplitView`, `GroupView`) and the body renderer live in sibling
+* modules; this file owns the orchestration (`renderNode`) + the shared
+* `RenderContext`.
 */
-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 ? "flex" : "none",
-				flexDirection: "column",
-				flex: 1,
-				minWidth: 0,
-				minHeight: 0
-			},
-			children: ctx.renderDomPanel(panelId, { active })
-		}, `dom-${panelId}`);
-	})] });
+/**
+* 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);
 }
 /**
-* 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.
+* Apply a `reorder-only` panel's redock. Such a panel may ONLY reorder WITHIN
+* its own group: it never leaves the group (a center drop into another group)
+* and never edge-splits (any edge zone, own or other group) — those drops are
+* rejected here. The reorder anchors on the pointer-derived index when the
+* gesture supplies one (real drag), else on the active anchor's CURRENT index
+* (the imperative seam carries no pointer). The pointer index is a VISIBLE-tab
+* strip index (hideTab panels omitted, dragged tab's own slot counted); the
+* strip↔model coordinate reconciliation lives only here.
 */
-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%"
+function applyReorderOnlyRedock(model, registry, drop) {
+	const { groupId, activePanelId, draggedPanelId, draggedGroupId, zone, reorderIndex } = drop;
+	if (draggedGroupId === void 0 || draggedGroupId !== groupId) return;
+	if (zone !== "center") return;
+	const group = findGroupById(model.get().root, groupId);
+	let index;
+	if (reorderIndex !== void 0 && group) {
+		const visibleTabIds = group.panels.filter((panelId) => registry.get(panelId)?.hideTab !== true);
+		index = resolveReorderInsertIndex(group.panels, visibleTabIds, draggedPanelId, reorderIndex);
+	} else index = group ? group.panels.indexOf(activePanelId) : void 0;
+	model.apply((t) => movePanel(t, draggedPanelId, {
+		groupId,
+		index
+	}));
+}
+function DockView(props) {
+	const { model, registry, renderDomPanel, bindNativeSlot, suppressReorderOnlyDropIndicator, onActiveTabClick } = props;
+	const [tree, setTree] = useState(() => model.get());
+	const [epoch, setEpoch] = useState(0);
+	const activeDragPanelId = useRef(null);
+	useEffect(() => {
+		setTree(model.get());
+		return model.subscribe((snap) => {
+			setTree(snap.tree);
+			setEpoch(snap.revision);
+		});
+	}, [model]);
+	const handleActivate = useCallback((groupId, panelId) => {
+		model.apply((t) => setActive(t, groupId, panelId));
+	}, [model]);
+	const handleClose = useCallback((panelId) => {
+		model.apply((t) => closePanelForUser(t, panelId, registry));
+	}, [model, registry]);
+	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, reorderIndex) => {
+		const target = {
+			groupId,
+			panelId: activePanelId
+		};
+		const draggedGroupId = findPanelGroupId(model.get().root, draggedPanelId);
+		if (registry.get(draggedPanelId)?.draggable === false) return;
+		if (registry.get(activePanelId)?.draggable === false) return;
+		if (registry.get(draggedPanelId)?.dropPolicy === "reorder-only") {
+			applyReorderOnlyRedock(model, registry, {
+				groupId,
+				activePanelId,
+				draggedPanelId,
+				draggedGroupId,
+				zone,
+				reorderIndex
+			});
+			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 }));
+			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, registry]);
+	return /* @__PURE__ */ jsx(LayoutEpochContext.Provider, {
+		value: epoch,
+		children: renderNode(tree.root, {
+			registry,
+			renderDomPanel,
+			bindNativeSlot,
+			onActivate: handleActivate,
+			onActiveTabClick,
+			onApplyLayout: handleApplyLayout,
+			onRedock: handleRedock,
+			onClose: handleClose,
+			canClose,
+			isPanelInTree,
+			suppressReorderOnlyDropIndicator: suppressReorderOnlyDropIndicator ?? false,
+			activeDragPanelId
+		})
 	});
 }
+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);
+}
+function renderGroup(node, ctx) {
+	return /* @__PURE__ */ jsx(GroupView, {
+		node,
+		ctx
+	}, node.id);
+}
 //#endregion
-export { DockView, computeDropZone, computeFlexiblePercentages, computeReorderIndex, dropZoneToMutation, isNoopRedock, layoutsEquivalent, useDockLayoutEpoch };
+export { DockView, computeDropZone, computeFlexiblePercentages, computeReorderIndex, dropZoneToMutation, isNoopRedock, layoutsEquivalent, resolveReorderInsertIndex, useDockLayoutEpoch };
 
 //# sourceMappingURL=index.js.map