@deepseek-ai/dsh-client-ui-dockkit 0.2.1-rc.4 → 0.2.2-alpha.2

package/lib/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Children, Fragment as Fragment$1, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { IconCloseFillRegular, IconCloseOutlineRegular, IconPanelLeftOutlineRegular, IconPlusOutlineRegular, MenuSurface, Tooltip, focusWithoutRing, modalSelector, observeComposition } from "@deepseek-ai/dsh-client-ui-primitives";
 import { createPortal } from "react-dom";
@@ -1328,6 +1328,89 @@ function resizedRect(rect, dx, dy, min) {
 		height: Math.max(min.height, rect.height + dy)
 	};
 }
+/** One axis clamped into `[min, max]`; an empty span pins it at `min`. */
+function clampAxis(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+/**
+* The nearest rectangle that lies inside the bounds, per axis. A panel larger
+* than the bounds on an axis takes the bounds' size on it, so its header
+* controls and resize corner stay reachable.
+* @param rect - any rectangle, possibly outside the bounds.
+* @param bounds - the viewport region.
+* @returns the rectangle moved inside the bounds, its size capped by them.
+*/
+function legalFloatRect(rect, bounds) {
+	const width = Math.min(rect.width, bounds.width);
+	const height = Math.min(rect.height, bounds.height - bounds.top);
+	return {
+		x: clampAxis(rect.x, 0, bounds.width - width),
+		y: clampAxis(rect.y, bounds.top, bounds.height - height),
+		width,
+		height
+	};
+}
+/** Displacement past an edge for a pointer overflow: slope 1 at the edge, approaching `FLOAT_RESISTANCE`. */
+function resist(overflow) {
+	return Math.sign(overflow) * 120 * Math.abs(overflow) / (120 + Math.abs(overflow));
+}
+/**
+* Where a dragged panel draws when the pointer has taken it past an edge: the
+* legal rectangle plus a resisted share of the overflow on each axis.
+* @param desired - the rectangle the pointer travel asks for.
+* @param bounds - the viewport region.
+* @returns the drawn rectangle at the legal size; equal to `desired` while it is legal.
+*/
+function resistedRect(desired, bounds) {
+	const legal = legalFloatRect(desired, bounds);
+	return {
+		...legal,
+		x: legal.x + resist(desired.x - legal.x),
+		y: legal.y + resist(desired.y - legal.y)
+	};
+}
+/** The largest displacement `unresistedRect` inverts; `resist` only approaches `FLOAT_RESISTANCE`. */
+const MAX_INVERTIBLE = 120 * .99;
+/**
+* Pointer overflow that `resist` maps to a displacement, the displacement capped
+* at `MAX_INVERTIBLE`. A panel drawn further out than that is picked up at the
+* cap, which moves it inward by less than 1.2 px.
+*/
+function unresist(displacement) {
+	const shown = Math.min(Math.abs(displacement), MAX_INVERTIBLE);
+	return Math.sign(displacement) * 120 * shown / (120 - shown);
+}
+/**
+* The rectangle a drag must start from so that zero pointer travel draws
+* `drawn`, the inverse of `resistedRect`: a press on a panel still outside the
+* bounds picks it up where it is.
+* @param drawn - where the panel is drawn now.
+* @param bounds - the viewport region.
+* @returns the start rectangle at the legal size; equal to `drawn` while it is legal.
+*/
+function unresistedRect(drawn, bounds) {
+	const legal = legalFloatRect(drawn, bounds);
+	return {
+		...legal,
+		x: legal.x + unresist(drawn.x - legal.x),
+		y: legal.y + unresist(drawn.y - legal.y)
+	};
+}
+/**
+* A resized rectangle whose bottom-right corner stays inside the bounds, never
+* below the minimum size.
+* @param rect - the resized rectangle; its origin may lie outside the bounds.
+* @param bounds - the viewport region.
+* @param min - smallest size the panel may take.
+* @returns the rectangle with its size capped by the bounds.
+*/
+function boundedResize(rect, bounds, min) {
+	return {
+		...rect,
+		width: Math.max(min.width, Math.min(rect.width, bounds.width - rect.x)),
+		height: Math.max(min.height, Math.min(rect.height, bounds.height - rect.y))
+	};
+}
 /**
 * Where a panel should appear when a tab is dropped outside the docked area.
 * @param x - drop point x.
@@ -2222,6 +2305,18 @@ function useGesture(reset) {
 	};
 }
 //#endregion
+//#region lib/types/components/TabBody.js
+/**
+* A tab's body from the embedder's renderer, shared by every layout. A layout
+* re-renders for its own previews (a float gesture or return, a divider or tab
+* drag) on every frame; the body is memoized on the renderer and the tab
+* record, so such a frame leaves it untouched.
+*/
+/** One tab's body, re-rendered only when `renderTab` or `tab` is a new object. */
+const TabBody = memo(function TabBody({ tab, renderTab }) {
+	return renderTab(tab);
+});
+//#endregion
 //#region lib/types/components/TabMenu.js
 /**
 * The per-tab context menu, opened by a secondary press on the chip. It carries
@@ -2308,6 +2403,9 @@ function TabMenu({ labels, anchor, onClose, onDismiss, extras }) {
 		onClick: (event) => {
 			event.stopPropagation();
 		},
+		onAuxClick: (event) => {
+			event.stopPropagation();
+		},
 		children: [onClose !== void 0 && jsx("button", {
 			type: "button",
 			role: "menuitem",
@@ -2370,10 +2468,12 @@ function TabTitle({ children }) {
 * A chip is a capsule carrying one control, its close, shown over its right
 * end while the chip is active, hovered, or focused; the context menu
 * (secondary press) carries the same close plus whatever the embedder appends.
-* Both close routes draw only while the embedder's `canCloseTab` allows, and
-* a pane's lone chip whose close is withheld draws quiet — no capsule, no
-* hover fill — since there is nothing to select against and nothing to do to
-* it.
+* A middle click anywhere on the chip, including its close control, closes
+* without selecting the tab, unless another mouse button is still held.
+* The embedder's `canCloseTab`
+* governs all close routes. A pane's lone chip whose close is withheld draws
+* quiet — no capsule, no hover fill — since there is nothing to select against
+* and nothing to do to it.
 * Between neighbouring chips sits a slot: a fixed-width box drawing a
 * hairline, blank beside the active chip, and the drop caret when a drag
 * targets that index, so a caret never widens the row; the two end slots
@@ -2525,28 +2625,68 @@ function useStripScrollFades(box, tabs) {
 	}, [box, tabs]);
 }
 /**
+* Move the chip box to `left` at once, overriding the stylesheet's smooth
+* `scroll-behavior` for this one assignment.
+*/
+function jumpTo(element, left) {
+	element.style.scrollBehavior = "auto";
+	element.scrollLeft = left;
+	element.style.removeProperty("scroll-behavior");
+}
+/**
 * Bring the active chip into the chip box's view whenever the active tab or
 * the row of chips changes: a tab opened or selected past the box's edge, or
 * moved there by a close or a reorder, scrolls the box to it, with the fade
 * band (24px) cleared so the chip is not under it. A chip already in view
 * moves nothing. Direct DOM, like the fades above: the box's scroll position
 * renders nothing.
-*/
-function useActiveChipInView(box, chips, tabs, activeTabId) {
+*
+* A box newly mounted, or newly showing another pane, first jumps to that
+* pane's offset in `offsets`, so a strip that replaces another for the same
+* pane continues from where that one stood and glides only the remaining
+* distance. With no recorded offset the first placement jumps rather than
+* glides from the row's start. The box records its offset in `offsets` when
+* it unmounts or leaves its pane.
+*/
+function useActiveChipInView(box, chips, tabs, activeTabId, paneId, offsets) {
+	const placed = useRef(void 0);
+	useLayoutEffect(() => {
+		if (offsets === void 0) return void 0;
+		const element = box.current;
+		/* v8 ignore next -- the box is rendered unconditionally with the strip. */
+		if (element === null) return void 0;
+		return () => {
+			offsets.set(paneId, element.scrollLeft);
+		};
+	}, [
+		box,
+		paneId,
+		offsets
+	]);
 	useLayoutEffect(() => {
 		const element = box.current;
 		const chip = activeTabId === void 0 ? void 0 : chips.get(activeTabId);
 		/* v8 ignore next -- the box and the active tab's chip are rendered with the strip. */
 		if (element === null || chip === void 0) return;
+		const first = placed.current !== paneId;
+		placed.current = paneId;
+		const recorded = first ? offsets?.get(paneId) : void 0;
+		if (recorded !== void 0) jumpTo(element, recorded);
 		const bounds = element.getBoundingClientRect();
 		const rect = chip.getBoundingClientRect();
-		if (rect.left < bounds.left) element.scrollLeft += rect.left - bounds.left - STRIP_FADE;
-		else if (rect.right > bounds.right) element.scrollLeft += rect.right - bounds.right + STRIP_FADE;
+		let delta = 0;
+		if (rect.left < bounds.left) delta = rect.left - bounds.left - STRIP_FADE;
+		else if (rect.right > bounds.right) delta = rect.right - bounds.right + STRIP_FADE;
+		if (delta === 0) return;
+		if (first && recorded === void 0) jumpTo(element, element.scrollLeft + delta);
+		else element.scrollLeft += delta;
 	}, [
 		box,
 		chips,
 		tabs,
-		activeTabId
+		activeTabId,
+		paneId,
+		offsets
 	]);
 }
 /** Width of the chip box's fade at a hidden side; mirrors the stylesheet's 24px. */
@@ -2558,13 +2698,13 @@ function splitBlockedTitle(labels, block) {
 		case "width": return labels.splitPaneNarrow;
 	}
 }
-/** @param props - pane state and gestures. @returns its tab strip without a content container. */
-function TabStrip({ state, pane, callbacks }) {
+/** @param props - pane state, gestures and shared offsets. @returns its tab strip without a content container. */
+function TabStrip({ state, pane, callbacks, offsets }) {
 	const [menu, setMenu] = useState(void 0);
 	const [chips] = useState(() => /* @__PURE__ */ new Map());
 	const stripTabs = useRef(null);
 	useStripScrollFades(stripTabs, pane.tabs);
-	useActiveChipInView(stripTabs, chips, pane.tabs, pane.activeTabId);
+	useActiveChipInView(stripTabs, chips, pane.tabs, pane.activeTabId, pane.id, offsets);
 	const block = callbacks.splitBlock(pane.id);
 	const target = callbacks.dropTarget;
 	const stripIndex = target !== void 0 && target.kind === "strip" && target.paneId === pane.id ? target.index : void 0;
@@ -2610,9 +2750,18 @@ function TabStrip({ state, pane, callbacks }) {
 							else chips.set(tabId, element);
 						},
 						onPointerDown: (event) => {
-							if (event.button === 2) return;
+							if (event.button !== 0) return;
 							callbacks.onTabPressed(tabId, event);
 						},
+						onMouseDown: (event) => {
+							if (event.button === 1) event.preventDefault();
+						},
+						onAuxClick: (event) => {
+							if (event.button !== 1) return;
+							event.preventDefault();
+							event.stopPropagation();
+							if (closable && event.buttons === 0) callbacks.onCloseTab(tabId);
+						},
 						onClick: (event) => {
 							event.stopPropagation();
 							activate(tabId);
@@ -2709,9 +2858,13 @@ function TabStrip({ state, pane, callbacks }) {
 				shortcutKeys: callbacks.labels.splitPaneKeys,
 				side: "bottom",
 				delayMs: 500,
+				openOnClick: block !== void 0,
 				children: jsx("span", {
 					tabIndex: block === void 0 ? void 0 : 0,
 					"aria-label": block === void 0 ? void 0 : splitBlockedTitle(callbacks.labels, block),
+					onClick: (event) => {
+						if (block !== void 0) event.stopPropagation();
+					},
 					children: jsx("button", {
 						type: "button",
 						className: css.iconButton,
@@ -2781,7 +2934,10 @@ function TabPanel({ state, pane, callbacks }) {
 			children: [active === void 0 ? jsx("p", {
 				className: css.empty,
 				children: callbacks.labels.emptyPane
-			}) : callbacks.renderTab(active), jsx(PaneDropHints, {
+			}) : jsx(TabBody, {
+				tab: active,
+				renderTab: callbacks.renderTab
+			}), jsx(PaneDropHints, {
 				pane,
 				callbacks
 			})]
@@ -2828,6 +2984,72 @@ function PaneTree({ state, nodeId, callbacks, preview }) {
 	});
 }
 //#endregion
+//#region lib/types/engine/spring.js
+/**
+* The spring a floating panel follows back inside the viewport after a release
+* past an edge. Pure and clock-free: the caller supplies each frame's elapsed
+* time, so trajectories are deterministic for a given sequence of frames.
+*/
+/** Seconds the spring takes for one undamped period; sets its stiffness. */
+const RESPONSE = .32;
+/** Below 1, so the return overshoots slightly inward (about 3.5%), which always stays legal. */
+const DAMPING_RATIO = .72;
+const OMEGA = 2 * Math.PI / RESPONSE;
+/** Fixed integration step, so the motion does not depend on the frame rate. */
+const SUBSTEP = 1 / 480;
+/** Position and speed below which an axis counts as at rest. */
+const REST_DISTANCE = 1;
+const REST_SPEED = 60;
+/** Fastest release velocity a return starts with, in pixels per second. */
+const SPRING_MAX_VELOCITY = 1500;
+/**
+* Advance one axis by an elapsed time, in equal substeps no longer than `SUBSTEP`
+* (semi-implicit Euler).
+* @param axis - the axis state.
+* @param target - the position the spring pulls toward.
+* @param dtSeconds - elapsed time, already clamped by the caller.
+* @returns the advanced state.
+*/
+function stepSpring(axis, target, dtSeconds) {
+	const steps = Math.max(1, Math.ceil(dtSeconds / SUBSTEP));
+	const h = dtSeconds / steps;
+	let { position, velocity } = axis;
+	for (let step = 0; step < steps; step++) {
+		velocity += (-OMEGA * OMEGA * (position - target) - 2 * DAMPING_RATIO * OMEGA * velocity) * h;
+		position += velocity * h;
+	}
+	return {
+		position,
+		velocity
+	};
+}
+/**
+* The velocity an axis starts its return with. An axis already at its target
+* keeps still. Outward speed is capped at `omega0 * (reach - |offset|)`: the
+* spring carries a start offset `d` and speed `v` at most `d + 0.46 * v / omega0`
+* from its target, so the whole return stays within `reach`.
+* @param position - where the axis is drawn at release.
+* @param target - the position the spring pulls toward.
+* @param velocity - the drawn release velocity, in pixels per second.
+* @param reach - the farthest the return may be from the target.
+* @returns the starting velocity.
+*/
+function launchVelocity(position, target, velocity, reach) {
+	const offset = position - target;
+	if (offset === 0) return 0;
+	if (Math.sign(velocity) !== Math.sign(offset)) return velocity;
+	return Math.sign(offset) * Math.min(Math.abs(velocity), OMEGA * Math.max(0, reach - Math.abs(offset)));
+}
+/**
+* Whether an axis has come to rest at its target.
+* @param axis - the axis state.
+* @param target - the spring's target.
+* @returns true within `REST_DISTANCE` of the target and slower than `REST_SPEED`.
+*/
+function springSettled(axis, target) {
+	return Math.abs(axis.position - target) <= REST_DISTANCE && Math.abs(axis.velocity) <= REST_SPEED;
+}
+//#endregion
 //#region lib/types/components/FloatLayer.js
 /**
 * The floating layer: one overlay panel per floating pane, bottom-to-top in the
@@ -2844,7 +3066,7 @@ function PaneTree({ state, nodeId, callbacks, preview }) {
 * only `state` and the outward contracts. An embedder may portal it anywhere,
 * and nothing here assumes the docked tree is an ancestor or even present.
 */
-/** The rectangle a gesture has reached. */
+/** The rectangle the pointer travel asks for, before the viewport has its say. */
 function draggedRect(drag, x, y) {
 	const dx = x - drag.originX;
 	const dy = y - drag.originY;
@@ -2859,57 +3081,244 @@ function raised(state, paneId) {
 	return state.activePaneId === paneId && state.floats.at(-1) === paneId;
 }
 /**
+* The viewport region panels stay inside. It reads the window size and the
+* root's caption attributes only, so starting a gesture never forces layout.
+*/
+function floatBounds() {
+	const root = document.documentElement;
+	const windows = root.hasAttribute("data-windows-titlebar");
+	const caption = windows && !root.hasAttribute("data-fullscreen") ? Number.parseFloat(root.style.getPropertyValue("--dsh-windows-titlebar-height")) : 0;
+	return {
+		top: windows ? (Number.isFinite(caption) ? caption : 0) + 20 : 0,
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+}
+/** Whether the platform asks for reduced motion; environments without `matchMedia` (jsdom) report no preference. */
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** How much recent drawing history the release velocity is measured over. */
+const VELOCITY_WINDOW_MS = 100;
+/** Append a drawn position and drop the samples more than `VELOCITY_WINDOW_MS` older than it. */
+function sampleDrawn(samples, t, rect) {
+	samples.push({
+		t,
+		x: rect.x,
+		y: rect.y
+	});
+	while (t - samples[0].t > VELOCITY_WINDOW_MS) samples.shift();
+}
+/**
+* Drawn panel velocity over the kept samples, capped per axis, in pixels per
+* second. It follows the drawn panel rather than the pointer, so the speed stays
+* continuous across a release where the resistance slows the panel.
+*/
+function releaseVelocity(samples) {
+	const first = samples[0];
+	const last = samples[samples.length - 1];
+	if (last.t === first.t) return {
+		x: 0,
+		y: 0
+	};
+	const rate = (travel) => Math.max(-1500, Math.min(SPRING_MAX_VELOCITY, travel / (last.t - first.t) * 1e3));
+	return {
+		x: rate(last.x - first.x),
+		y: rate(last.y - first.y)
+	};
+}
+/**
+* Inline position of a floating panel. A gesture or return draws it exactly at
+* `rect`. At rest the panel only publishes `rect` to the `.float` rule, which
+* clamps it into the viewport and below the caption floor, so a stale viewport
+* reading in `useFloatGestures` still leaves the panel inside.
+* @param rect - the rectangle to draw.
+* @param lifted - whether a gesture or return is drawing the panel.
+* @returns the panel's inline position and size.
+*/
+function floatStyle(rect, lifted) {
+	if (lifted) return {
+		left: rect.x,
+		top: rect.y,
+		width: rect.width,
+		height: rect.height
+	};
+	return {
+		"--dsh-dockkit-float-x": `${rect.x}px`,
+		"--dsh-dockkit-float-y": `${rect.y}px`,
+		"--dsh-dockkit-float-width": `${rect.width}px`,
+		"--dsh-dockkit-float-height": `${rect.height}px`
+	};
+}
+/**
 * Shared move/resize gestures; changing layout mode never owns the content DOM.
+* Panels draw at their stored rectangle projected into the viewport, so a
+* shrinking window pushes them in without recording anything. A move past an
+* edge draws with resistance; its release records the legal rectangle and the
+* panel springs there from where it was drawn.
 * @param state - committed layout and float stacking order.
 * @param intents - gesture settlements.
-* @returns the current preview and focus/gesture callbacks.
+* @returns the current preview, the rectangle to draw per panel, and focus/gesture callbacks.
 */
 function useFloatGestures(state, intents) {
 	const [preview, setPreview] = useState(void 0);
+	const [bounds, setBounds] = useState(floatBounds);
+	const area = useRef(bounds);
+	const latest = useRef(state);
+	latest.current = state;
+	const settling = useRef(void 0);
 	const begin = useGesture(() => {
 		setPreview(void 0);
 	});
+	/** Stop a running return where it is; reports whether one was running. */
+	const cancelSettling = useRef(() => {
+		const running = settling.current;
+		if (running === void 0) return false;
+		cancelAnimationFrame(running.frame);
+		settling.current = void 0;
+		return true;
+	}).current;
+	useEffect(() => {
+		const resize = () => {
+			if (cancelSettling()) setPreview(void 0);
+			area.current = floatBounds();
+			setBounds(area.current);
+		};
+		window.addEventListener("resize", resize);
+		return () => {
+			window.removeEventListener("resize", resize);
+			cancelSettling();
+		};
+	}, [cancelSettling]);
+	/**
+	* One animation frame of a return: advance the spring, or end it at its
+	* target. It also ends once the panel's record no longer projects to the
+	* target, as after an undo, a dock or a close, so the release's `moveFloat`
+	* or `resizeFloat` must reach `state` before the first frame.
+	*/
+	const frame = () => {
+		const running = settling.current;
+		const now = performance.now();
+		const gap = now - running.last;
+		running.last = now;
+		const layout = latest.current;
+		if (layout.floats.includes(running.paneId) && sameRect(legalFloatRect(floatRect(getPane(layout, running.paneId)), area.current), running.target) && gap <= 250 && now - running.started < 900) {
+			const dt = Math.min(gap, 64) / 1e3;
+			running.x = stepSpring(running.x, running.target.x, dt);
+			running.y = stepSpring(running.y, running.target.y, dt);
+			if (!springSettled(running.x, running.target.x) || !springSettled(running.y, running.target.y)) {
+				setPreview({
+					paneId: running.paneId,
+					rect: {
+						...running.target,
+						x: running.x.position,
+						y: running.y.position
+					}
+				});
+				running.frame = requestAnimationFrame(frame);
+				return;
+			}
+		}
+		settling.current = void 0;
+		setPreview(void 0);
+	};
+	/** Spring a panel from where it was drawn to its recorded rectangle, never farther than `FLOAT_RESISTANCE` outside it. */
+	const settle = (paneId, from, target, velocity) => {
+		const axis = (position, goal, speed) => ({
+			position,
+			velocity: launchVelocity(position, goal, speed, 120)
+		});
+		const now = performance.now();
+		settling.current = {
+			paneId,
+			target,
+			started: now,
+			last: now,
+			x: axis(from.x, target.x, velocity.x),
+			y: axis(from.y, target.y, velocity.y),
+			frame: requestAnimationFrame(frame)
+		};
+		setPreview({
+			paneId,
+			rect: from
+		});
+	};
 	/** Focus and raise a panel from a press or click on it, unless it is raised already. */
 	const raise = (paneId) => {
 		if (raised(state, paneId)) return;
 		intents.focusPane(paneId);
 	};
-	/** Start a move or resize from a press on the panel's grip or corner; a release that moved nothing is a click. */
+	/**
+	* Where a panel draws: its gesture or return preview, otherwise its stored
+	* rectangle projected into the viewport.
+	* @param paneId - the floating pane.
+	* @param stored - its recorded rectangle.
+	* @returns the rectangle to draw.
+	*/
+	const rectOf = (paneId, stored) => preview?.paneId === paneId ? preview.rect : legalFloatRect(stored, bounds);
+	/**
+	* Start a move or resize from a press on the panel's grip or corner. A release
+	* that reaches the same legal rectangle as the press is a click and only raises,
+	* also for a panel drawn projected from its record.
+	*/
 	const drag = (mode, paneId, event) => {
 		event.stopPropagation();
-		const root = document.documentElement;
-		const windows = root.hasAttribute("data-windows-titlebar");
-		const caption = windows && !root.hasAttribute("data-fullscreen") ? Number.parseFloat(root.style.getPropertyValue("--dsh-windows-titlebar-height")) : 0;
-		const saved = floatRect(getPane(state, paneId));
-		const rect = {
-			...saved,
-			y: Math.max(saved.y, windows ? caption + 20 : 0)
-		};
+		const drawn = settling.current?.paneId === paneId ? preview?.rect : void 0;
+		if (cancelSettling() && drawn === void 0) setPreview(void 0);
+		area.current = floatBounds();
+		const reduce = reducedMotion();
+		const shown = drawn ?? legalFloatRect(floatRect(getPane(state, paneId)), area.current);
+		const rect = mode === "move" && !reduce ? unresistedRect(shown, area.current) : shown;
 		const start = {
 			mode,
 			originX: event.clientX,
 			originY: event.clientY,
 			rect
 		};
+		/** The rectangle to draw for a pointer position, and the legal one a release there records. */
+		const reached = (x, y) => {
+			const desired = draggedRect(start, x, y);
+			if (mode === "resize") {
+				const resized = boundedResize(desired, area.current, FLOAT_MIN_SIZE);
+				const legal = legalFloatRect(resized, area.current);
+				return {
+					drawn: reduce ? legal : resized,
+					legal
+				};
+			}
+			const legal = legalFloatRect(desired, area.current);
+			return {
+				drawn: reduce ? legal : resistedRect(desired, area.current),
+				legal
+			};
+		};
+		const pressed = reached(event.clientX, event.clientY);
+		const samples = [];
+		sampleDrawn(samples, performance.now(), pressed.drawn);
 		begin(event.currentTarget, event.pointerId, {
 			move: (moved) => {
+				const { drawn } = reached(moved.clientX, moved.clientY);
+				sampleDrawn(samples, performance.now(), drawn);
 				setPreview({
 					paneId,
-					rect: draggedRect(start, moved.clientX, moved.clientY)
+					rect: drawn
 				});
 			},
 			up: (released) => {
-				const rect = draggedRect(start, released.clientX, released.clientY);
-				if (sameRect(rect, start.rect)) raise(paneId);
-				else if (mode === "move") intents.moveFloat(paneId, rect.x, rect.y);
-				else intents.resizeFloat(paneId, rect);
+				const { drawn, legal } = reached(released.clientX, released.clientY);
+				sampleDrawn(samples, performance.now(), drawn);
+				if (sameRect(legal, pressed.legal)) raise(paneId);
+				else if (mode === "move") intents.moveFloat(paneId, legal.x, legal.y);
+				else intents.resizeFloat(paneId, legal);
+				if (!sameRect(drawn, legal)) settle(paneId, drawn, legal, releaseVelocity(samples));
 			}
 		});
 	};
 	return {
 		preview,
 		raise,
-		drag
+		drag,
+		rectOf
 	};
 }
 /**
@@ -2973,22 +3382,19 @@ function FloatHeader({ paneId, tab, labels, intents, renderTabTitle, canCloseTab
 }
 /** Every floating panel, in z order. */
 function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canCloseTab }) {
-	const { preview, raise, drag } = useFloatGestures(state, intents);
+	const { preview, raise, drag, rectOf } = useFloatGestures(state, intents);
 	return jsx(Fragment, { children: state.floats.map((paneId, depth) => {
 		const pane = getPane(state, paneId);
 		const tab = getTab(state, onlyTabId(pane));
 		const lifted = preview?.paneId === paneId ? preview.rect : void 0;
-		const live = lifted ?? floatRect(pane);
+		const live = rectOf(paneId, floatRect(pane));
 		return jsxs("div", {
 			className: css.float,
 			"data-dockkit-float": paneId,
 			tabIndex: -1,
 			"data-dockkit-float-active": state.activePaneId === paneId || void 0,
 			style: {
-				left: live.x,
-				top: `max(var(--dsh-dockkit-float-top, 0px), ${live.y}px)`,
-				width: live.width,
-				height: live.height,
+				...floatStyle(live, lifted !== void 0),
 				zIndex: lifted === void 0 ? depth + 1 : state.floats.length + 1
 			},
 			onPointerDown: () => {
@@ -3006,7 +3412,10 @@ function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canClos
 				}),
 				jsx("div", {
 					className: css.floatBody,
-					children: renderTab(tab)
+					children: jsx(TabBody, {
+						tab,
+						renderTab
+					})
 				}),
 				jsx("div", {
 					className: css.floatResize,
@@ -3023,7 +3432,7 @@ function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canClos
 //#region lib/types/components/TabLayout.js
 /** Stable tab siblings in one horizontal Grid, including viewport-positioned floats. */
 /** A tab's ancestors stay identical across selection, pane moves and floating. */
-function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRequest, keepMounted, active = true }) {
+function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRequest, offsets, keepMounted, active = true }) {
 	const floating = pane.host === "float";
 	const selected = floating || pane.activeTabId === tab.id;
 	const visible = active && selected && (floating || state.expanded);
@@ -3067,7 +3476,7 @@ function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRe
 		callbacks
 	]);
 	const lifted = floating && floats.preview?.paneId === pane.id ? floats.preview.rect : void 0;
-	const rect = floating ? lifted ?? floatRect(pane) : void 0;
+	const rect = floating ? floats.rectOf(pane.id, floatRect(pane)) : void 0;
 	const depth = lifted === void 0 ? state.floats.indexOf(pane.id) + 1 : state.floats.length + 1;
 	return jsx("div", {
 		className: clsx(css.tabCell, floating && css.floatingCell),
@@ -3090,12 +3499,7 @@ function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRe
 			"data-dockkit-float": floating ? pane.id : void 0,
 			"data-dockkit-float-active": floating && state.activePaneId === pane.id || void 0,
 			"data-dockkit-column": !floating ? column : void 0,
-			style: rect === void 0 ? void 0 : {
-				left: rect.x,
-				top: `max(var(--dsh-dockkit-float-top, 0px), ${rect.y}px)`,
-				width: rect.width,
-				height: rect.height
-			},
+			style: rect === void 0 ? void 0 : floatStyle(rect, lifted !== void 0),
 			onPointerDown: () => {
 				if (floating) floats.raise(pane.id);
 			},
@@ -3116,13 +3520,17 @@ function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRe
 					}) : jsx(TabStrip, {
 						state,
 						pane,
-						callbacks
+						callbacks,
+						offsets
 					}))
 				}),
 				jsxs("div", {
 					ref: body,
 					className: clsx(css.tabHostBody, floating ? css.floatBody : css.paneBody),
-					children: [visited && (retained || active && selected) ? callbacks.renderTab(tab) : null, !floating && jsx(PaneDropHints, {
+					children: [visited && (retained || active && selected) ? jsx(TabBody, {
+						tab,
+						renderTab: callbacks.renderTab
+					}) : null, !floating && jsx(PaneDropHints, {
 						pane,
 						callbacks
 					})]
@@ -3147,6 +3555,7 @@ function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRe
 function TabLayout(props) {
 	const { state, callbacks, preview } = props;
 	const focusRequest = useRef();
+	const [offsets] = useState(() => /* @__PURE__ */ new Map());
 	const tabCallbacks = {
 		...callbacks,
 		onFocusTab: (tabId) => {
@@ -3177,7 +3586,8 @@ function TabLayout(props) {
 					pane,
 					column: panes.findIndex((candidate) => candidate.id === pane.id),
 					floats,
-					focusRequest
+					focusRequest,
+					offsets
 				}, tab.id);
 			}),
 			panes.filter((pane) => pane.tabs.length === 0).map((pane) => jsx("div", {
@@ -3216,8 +3626,8 @@ function TabLayout(props) {
 *
 * A gesture only previews until it ends, then leaves through one intent, so the
 * embedder's operation sequence stays the single source of truth. Releasing a tab
-* clear of this surface floats it; releasing inside it but on no pane is not a
-* move at all.
+* clear of this surface floats it; releasing inside it without an effective
+* drop target changes nothing.
 */
 const NO_PREVIEW = {
 	draggingTabId: void 0,
@@ -3231,18 +3641,26 @@ const ALWAYS = () => true;
 /**
 * Resolve where a pointer sits inside the docked surface. An edge zone is only
 * offered where the split it would make is allowed: within the pane budget and
-* with room for two halves; otherwise the release is not a move at all.
+* with room for two halves. Strip slots that preserve the dragged tab's position
+* offer no caret or placement intent. An undefined target inside the surface
+* leaves the layout unchanged on release.
 */
-function hitTest(root, x, y, canSplit, fits, dropZones) {
+function hitTest(root, x, y, tabId, canSplit, fits, dropZones) {
 	for (const [paneId, pane] of paneElements(root)) {
 		const rect = pane.getBoundingClientRect();
 		if (!containsPoint(rect, x, y)) continue;
 		const strip = pane.querySelector("[data-dockkit-strip]");
-		if (strip !== null && containsPoint(strip.getBoundingClientRect(), x, y)) return {
-			kind: "strip",
-			paneId,
-			index: insertionIndex([...strip.querySelectorAll("[data-dockkit-tab]")].map((tab) => tab.getBoundingClientRect()), x)
-		};
+		if (strip !== null && containsPoint(strip.getBoundingClientRect(), x, y)) {
+			const tabs = [...strip.querySelectorAll("[data-dockkit-tab]")];
+			const index = insertionIndex(tabs.map((tab) => tab.getBoundingClientRect()), x);
+			const sourceIndex = tabs.findIndex((tab) => tab.dataset.dockkitTab === tabId);
+			if (sourceIndex >= 0 && (index === sourceIndex || index === sourceIndex + 1)) return void 0;
+			return {
+				kind: "strip",
+				paneId,
+				index
+			};
+		}
 		const zone = dropZones === "horizontal" ? canSplit && fitOf(fits, paneId).row ? x < rect.x + rect.width / 2 ? "left" : "right" : "center" : zoneInRect(rect, x, y);
 		if (zone !== "center") {
 			const fit = fitOf(fits, paneId);
@@ -3334,12 +3752,12 @@ function Surface({ state, canSplit, canAddTab, canCloseTab, intents, labels, ren
 						setPreview({
 							...NO_PREVIEW,
 							draggingTabId: tabId,
-							dropTarget: hitTest(root, moved.clientX, moved.clientY, canSplit, fits, dropZones)
+							dropTarget: hitTest(root, moved.clientX, moved.clientY, tabId, canSplit, fits, dropZones)
 						});
 					},
 					up: (released) => {
 						if (!dragging) return;
-						const target = hitTest(root, released.clientX, released.clientY, canSplit, fits, dropZones);
+						const target = hitTest(root, released.clientX, released.clientY, tabId, canSplit, fits, dropZones);
 						if (target === void 0) {
 							if (containsPoint(root.getBoundingClientRect(), released.clientX, released.clientY)) return;
 							intents.floatTab(tabId, floatRectAt(released.clientX, released.clientY, FLOAT_DEFAULT_SIZE));