@dashfoo/react 0.5.1 → 0.6.0

package/dist/index.js

@@ -2,12 +2,48 @@
 
 import { canRedo, canUndo, dashfooMachine, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, snapEnabled, snapSizes, stackModel, tabNodeSchema, toJSON, zoneRect } from "@dashfoo/core";
 import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Accessibility, DragDropManager, Draggable, Feedback, PointerSensor } from "@dnd-kit/dom";
+import { Accessibility, DragDropManager, Draggable, Droppable, Feedback, PointerSensor } from "@dnd-kit/dom";
 import { createStore, useStore } from "zustand";
+import { CollisionPriority, CollisionType } from "@dnd-kit/abstract";
 import { useActorRef, useSelector } from "@xstate/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel as Panel$1, Separator } from "react-resizable-panels";
 
+//#region src/lib/topmost-collision.ts
+const createTopmostPointerIntersection = (topElementAt = (x, y) => document.elementFromPoint(x, y)) => {
+	let cached = null;
+	const topAt = (x, y) => {
+		if (cached && cached.x === x && cached.y === y) return cached.top;
+		const top = topElementAt(x, y);
+		cached = {
+			top,
+			x,
+			y
+		};
+		queueMicrotask(() => {
+			cached = null;
+		});
+		return top;
+	};
+	return ({ dragOperation, droppable }) => {
+		const { element } = droppable;
+		if (!element) return null;
+		const point = dragOperation.position.current;
+		const top = topAt(point.x, point.y);
+		if (!top || !element.contains(top)) return null;
+		let depth = 0;
+		for (let node = element; node; node = node.parentElement) depth += 1;
+		return {
+			id: droppable.id,
+			priority: CollisionPriority.High,
+			type: CollisionType.PointerIntersection,
+			value: depth
+		};
+	};
+};
+const topmostPointerIntersection = createTopmostPointerIntersection();
+
+//#endregion
 //#region src/hooks/drag-hooks.tsx
 const INTERACTIVE_SELECTOR = `
   input:not([disabled]),
@@ -24,7 +60,7 @@ const preventActivation = (event, source) => {
 	return interactive !== null && interactive !== source.element;
 };
 const createDragManager = () => new DragDropManager({
-	plugins: (defaults) => defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback),
+	plugins: (defaults) => [...defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback), Feedback.configure({ dropAnimation: null })],
 	sensors: () => [PointerSensor.configure({ preventActivation })]
 });
 const DragContext = createContext(null);
@@ -109,9 +145,37 @@ const useTabsetDraggable = (tabsetId, disabled = false, label = "") => {
 };
 const useTabsetDroppable = (tabsetId) => {
 	const context = useContext(DragContext);
-	return { ref: useCallback((element) => {
-		context?.registerTabset(tabsetId, element);
-	}, [context, tabsetId]) };
+	const elementRef = useRef(null);
+	const droppableRef = useRef(null);
+	const ref = useCallback((element) => {
+		elementRef.current = element;
+		if (droppableRef.current) droppableRef.current.element = element ?? void 0;
+	}, []);
+	const layerId = context?.layerId;
+	const manager = context?.manager;
+	useEffect(() => {
+		if (!manager || layerId === void 0) return;
+		const droppable = new Droppable({
+			collisionDetector: topmostPointerIntersection,
+			data: {
+				layerId,
+				tabsetId,
+				type: "tabset"
+			},
+			id: `${layerId}:${tabsetId}`
+		}, manager);
+		droppable.element = elementRef.current ?? void 0;
+		droppableRef.current = droppable;
+		return () => {
+			droppable.destroy();
+			droppableRef.current = null;
+		};
+	}, [
+		layerId,
+		manager,
+		tabsetId
+	]);
+	return { ref };
 };
 const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
 	const id = useId();
@@ -422,31 +486,6 @@ const useDashfooStore = (options) => {
 	]);
 };
 
-//#endregion
-//#region src/components/drag-root.tsx
-const DashfooDragProvider = ({ children }) => {
-	const [manager] = useState(createDragManager);
-	useInsertionEffect(() => () => manager.destroy(), [manager]);
-	const [subjectStore] = useState(createDragSubjectStore);
-	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
-		value: manager,
-		children: /* @__PURE__ */ jsx(DragSubjectStoreContext.Provider, {
-			value: subjectStore,
-			children
-		})
-	});
-};
-
-//#endregion
-//#region src/hooks/layout-store.ts
-const createLayoutStore = (initial) => createStore(() => initial);
-const LayoutStoreContext = createContext(null);
-const useLayout = (selector) => {
-	const store = useContext(LayoutStoreContext);
-	if (store === null) throw new Error("dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.");
-	return useStore(store, selector);
-};
-
 //#endregion
 //#region src/lib/tab-insertion.ts
 const pointInRect = (point, rect) => point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
@@ -472,15 +511,6 @@ const shouldAllowDrop = (draggedId, targetId, tabIds) => {
 	return true;
 };
 
-//#endregion
-//#region src/lib/warn-once.ts
-const warned = /* @__PURE__ */ new Set();
-const warnOnce = (key, message) => {
-	if (warned.has(key)) return;
-	warned.add(key);
-	console.warn(`[dashfoo] ${message}`);
-};
-
 //#endregion
 //#region src/components/drag-overlays.tsx
 const overlayBase = {
@@ -511,37 +541,107 @@ const DockIndicator = ({ actorRef, getTabsetElement }) => {
 	if (!intent) return null;
 	const element = getTabsetElement(intent.targetId);
 	if (!element) return null;
+	const zIndex = element.closest("[data-dashfoo=\"float\"]") ? overlayBase.zIndex : "auto";
 	if (intent.location === "center") {
 		const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
 		if (strip) return /* @__PURE__ */ jsx("div", {
 			"data-dashfoo": "dock-indicator",
-			style: lineStyle(insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0))
+			style: {
+				...lineStyle(insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0)),
+				zIndex
+			}
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
 		"data-dashfoo": "dock-indicator",
-		style: paneStyle(zoneRect(element.getBoundingClientRect(), intent.location))
+		style: {
+			...paneStyle(zoneRect(element.getBoundingClientRect(), intent.location)),
+			zIndex
+		}
 	});
 };
-const previewStyle = {
-	left: 0,
-	position: "fixed",
-	top: 0,
-	zIndex: 9999
+const PREVIEW_OFFSET = {
+	x: 12,
+	y: 8
 };
-const DragPreview = ({ overlayRef, preview }) => {
-	if (!preview) return null;
+const labelOf = (source) => {
+	const raw = source?.data?.label;
+	return typeof raw === "string" ? raw : "";
+};
+const DragPreviewOverlay = ({ manager }) => {
+	const [chip, setChip] = useState(null);
+	useEffect(() => {
+		const offStart = manager.monitor.addEventListener("dragstart", (event) => {
+			const source = event.operation.source;
+			if (!source) return;
+			const rect = source.element?.getBoundingClientRect();
+			const point = event.operation.position.current;
+			setChip({
+				label: labelOf(source),
+				x: PREVIEW_OFFSET.x + (rect ? point.x - rect.left : 0),
+				y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
+			});
+		});
+		const offEnd = manager.monitor.addEventListener("dragend", () => setChip(null));
+		return () => {
+			offStart();
+			offEnd();
+		};
+	}, [manager]);
 	return /* @__PURE__ */ jsx("div", {
-		"data-dashfoo": "drag-preview",
-		ref: overlayRef,
-		style: {
-			...previewStyle,
-			transform: `translate(${preview.x}px, ${preview.y}px)`
-		},
-		children: preview.label
+		"data-dnd-overlay": "",
+		ref: useCallback((element) => {
+			const feedback = manager.registry.plugins.get(Feedback);
+			if (feedback) feedback.overlay = element ?? void 0;
+		}, [manager]),
+		children: chip === null ? null : /* @__PURE__ */ jsx("div", {
+			"data-dashfoo": "drag-preview",
+			style: {
+				left: 0,
+				position: "absolute",
+				top: 0,
+				transform: `translate(${chip.x}px, ${chip.y}px)`,
+				width: "max-content"
+			},
+			children: chip.label
+		})
 	});
 };
 
+//#endregion
+//#region src/components/drag-root.tsx
+const DashfooDragProvider = ({ children }) => {
+	const [manager] = useState(createDragManager);
+	useInsertionEffect(() => () => manager.destroy(), [manager]);
+	const [subjectStore] = useState(createDragSubjectStore);
+	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
+		value: manager,
+		children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
+			value: subjectStore,
+			children: [children, /* @__PURE__ */ jsx(DragPreviewOverlay, { manager })]
+		})
+	});
+};
+
+//#endregion
+//#region src/hooks/layout-store.ts
+const createLayoutStore = (initial) => createStore(() => initial);
+const LayoutStoreContext = createContext(null);
+const useLayout = (selector) => {
+	const store = useContext(LayoutStoreContext);
+	if (store === null) throw new Error("dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.");
+	return useStore(store, selector);
+};
+
+//#endregion
+//#region src/lib/warn-once.ts
+const warned = /* @__PURE__ */ new Set();
+const warnOnce = (key, message) => {
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[dashfoo] ${message}`);
+};
+
 //#endregion
 //#region src/components/drag-adapter.tsx
 const tabRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => tab.dataset.tabId === excludeId ? [] : [tab.getBoundingClientRect()]);
@@ -564,14 +664,6 @@ const intentForTabset = (id, element, point, draggedId) => {
 		targetId: id
 	};
 };
-const PREVIEW_OFFSET = {
-	x: 12,
-	y: 8
-};
-const labelOf = (source) => {
-	const raw = source?.data?.label;
-	return typeof raw === "string" ? raw : "";
-};
 const isTabFactory = (value) => typeof value === "function";
 const subjectFor = (source) => {
 	const data = source.data;
@@ -610,9 +702,6 @@ const subjectFor = (source) => {
 const DragProvider = ({ children, onCommit, splitDock }) => {
 	const actorRef = useActorRef(dragDockMachine);
 	const layoutStore = useContext(LayoutStoreContext);
-	const [tabsets] = useState(() => /* @__PURE__ */ new Map());
-	const overlayRef = useRef(null);
-	const [preview, setPreview] = useState(null);
 	const sharedManager = useContext(SharedDragManagerContext);
 	const [ownManager] = useState(() => sharedManager ? null : createDragManager());
 	useInsertionEffect(() => () => ownManager?.destroy(), [ownManager]);
@@ -650,6 +739,10 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 		onCommitRef.current = onCommit;
 		splitDockRef.current = splitDock;
 	});
+	const getTabsetElement = useCallback((id) => {
+		const element = manager.registry.droppables.get(`${ownerId}:${id}`)?.element;
+		return element instanceof HTMLElement ? element : void 0;
+	}, [manager, ownerId]);
 	useEffect(() => {
 		const subscription = actorRef.on("COMMIT", (emitted) => {
 			if (layoutStore?.getState().editable === false) return;
@@ -664,23 +757,7 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 			subscription.unsubscribe();
 		};
 	}, [actorRef, layoutStore]);
-	const registerTabset = useCallback((id, element) => {
-		if (element) tabsets.set(id, element);
-		else tabsets.delete(id);
-	}, [tabsets]);
-	const getTabsetElement = useCallback((id) => tabsets.get(id), [tabsets]);
-	const attachOverlay = useCallback((element) => {
-		overlayRef.current = element;
-	}, []);
 	useEffect(() => {
-		const tabsetAt = (point) => {
-			const top = document.elementFromPoint(point.x, point.y);
-			if (!top) return;
-			for (const [id, element] of tabsets) if (element.contains(top)) return {
-				element,
-				id
-			};
-		};
 		const resolveIntent = (targetId, element, point, draggedId) => {
 			if (layoutStore?.getState().editable === false) return null;
 			if (!shouldAllowDrop(draggedId, targetId, [...element.querySelectorAll("[data-dashfoo=\"tab\"]")].map((tab) => tab.dataset.tabId ?? ""))) return null;
@@ -691,71 +768,62 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 			};
 			return intent;
 		};
-		const positionOverlay = (point) => {
-			const element = overlayRef.current;
-			if (element) element.style.transform = `translate(${point.x + PREVIEW_OFFSET.x}px, ${point.y + PREVIEW_OFFSET.y}px)`;
-		};
 		const handleStart = (event) => {
 			const source = event.operation.source;
 			if (!source) return;
 			const subject = subjectFor(source);
-			if (!subject) return;
-			const point = event.operation.position.current;
-			setPreview({
-				label: labelOf(source),
-				x: point.x + PREVIEW_OFFSET.x,
-				y: point.y + PREVIEW_OFFSET.y
-			});
+			if (!subject) {
+				manager.actions.stop({ canceled: true });
+				return;
+			}
 			actorRef.send({
 				subject,
 				type: "START"
 			});
 		};
-		const handleMove = (event) => {
-			const op = event.operation;
-			const point = op.position.current;
-			positionOverlay(point);
-			const draggedId = op.source ? String(op.source.id) : void 0;
-			const hit = tabsetAt(point);
+		const syncIntent = () => {
+			const operation = manager.dragOperation;
+			const point = operation.position.current;
+			const target = operation.target;
+			const data = target?.data;
+			const tabsetId = data?.layerId === ownerId ? data.tabsetId : void 0;
+			const element = tabsetId === void 0 ? void 0 : target?.element;
+			const draggedId = operation.source ? String(operation.source.id) : void 0;
 			actorRef.send({
-				intent: hit ? resolveIntent(hit.id, hit.element, point, draggedId) : null,
+				intent: tabsetId !== void 0 && element instanceof HTMLElement ? resolveIntent(tabsetId, element, point, draggedId) : null,
 				type: "OVER"
 			});
 		};
+		const handleMove = () => syncIntent();
+		const handleCollision = () => syncIntent();
 		const handleEnd = (event) => {
-			setPreview(null);
 			if (event.canceled) {
 				actorRef.send({ type: "CANCEL" });
 				return;
 			}
-			const op = event.operation;
-			const point = op.position.current;
-			const draggedId = op.source ? String(op.source.id) : void 0;
-			const hit = tabsetAt(point);
-			if (hit) actorRef.send({
-				intent: resolveIntent(hit.id, hit.element, point, draggedId),
-				type: "OVER"
-			});
+			syncIntent();
 			actorRef.send({ type: "DROP" });
 		};
 		const offStart = manager.monitor.addEventListener("dragstart", handleStart);
 		const offMove = manager.monitor.addEventListener("dragmove", handleMove);
+		const offCollision = manager.monitor.addEventListener("collision", handleCollision);
 		const offEnd = manager.monitor.addEventListener("dragend", handleEnd);
 		return () => {
 			offStart();
 			offMove();
+			offCollision();
 			offEnd();
 		};
 	}, [
 		actorRef,
 		layoutStore,
 		manager,
-		tabsets
+		ownerId
 	]);
 	const contextValue = useMemo(() => ({
-		manager,
-		registerTabset
-	}), [manager, registerTabset]);
+		layerId: ownerId,
+		manager
+	}), [manager, ownerId]);
 	return /* @__PURE__ */ jsx(DragContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
@@ -766,10 +834,7 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 					actorRef,
 					getTabsetElement
 				}),
-				/* @__PURE__ */ jsx(DragPreview, {
-					overlayRef: attachOverlay,
-					preview
-				})
+				ownManager === null ? null : /* @__PURE__ */ jsx(DragPreviewOverlay, { manager: ownManager })
 			]
 		})
 	});
@@ -825,6 +890,125 @@ const resizeRect = (start, edges, dx, dy) => {
 	};
 };
 
+//#endregion
+//#region src/components/float-resize-handles.ts
+const EDGE_THICKNESS = 12;
+const EDGE_OFFSET = -6;
+const CORNER_SIZE = 20;
+const CORNER_OFFSET = -8;
+const EDGE_INSET = 12;
+const RESIZE_HANDLES = [
+	{
+		edges: {
+			x: 0,
+			y: -1
+		},
+		key: "n",
+		style: {
+			cursor: "ns-resize",
+			height: EDGE_THICKNESS,
+			insetInline: EDGE_INSET,
+			top: EDGE_OFFSET
+		}
+	},
+	{
+		edges: {
+			x: 0,
+			y: 1
+		},
+		key: "s",
+		style: {
+			bottom: EDGE_OFFSET,
+			cursor: "ns-resize",
+			height: EDGE_THICKNESS,
+			insetInline: EDGE_INSET
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: 0
+		},
+		key: "e",
+		style: {
+			cursor: "ew-resize",
+			insetBlock: EDGE_INSET,
+			right: EDGE_OFFSET,
+			width: EDGE_THICKNESS
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: 0
+		},
+		key: "w",
+		style: {
+			cursor: "ew-resize",
+			insetBlock: EDGE_INSET,
+			left: EDGE_OFFSET,
+			width: EDGE_THICKNESS
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: -1
+		},
+		key: "ne",
+		style: {
+			cursor: "nesw-resize",
+			height: CORNER_SIZE,
+			right: CORNER_OFFSET,
+			top: CORNER_OFFSET,
+			width: CORNER_SIZE
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: -1
+		},
+		key: "nw",
+		style: {
+			cursor: "nwse-resize",
+			height: CORNER_SIZE,
+			left: CORNER_OFFSET,
+			top: CORNER_OFFSET,
+			width: CORNER_SIZE
+		}
+	},
+	{
+		edges: {
+			x: 1,
+			y: 1
+		},
+		key: "se",
+		style: {
+			bottom: CORNER_OFFSET,
+			cursor: "nwse-resize",
+			height: CORNER_SIZE,
+			right: CORNER_OFFSET,
+			width: CORNER_SIZE
+		}
+	},
+	{
+		edges: {
+			x: -1,
+			y: 1
+		},
+		key: "sw",
+		style: {
+			bottom: CORNER_OFFSET,
+			cursor: "nesw-resize",
+			height: CORNER_SIZE,
+			left: CORNER_OFFSET,
+			width: CORNER_SIZE
+		}
+	}
+];
+const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
+
 //#endregion
 //#region src/components/layout-root.tsx
 const DEFAULT_TABSET_MIN_SIZE = 320;
@@ -1148,6 +1332,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			"data-dashfoo": "tab-overflow",
 			onClick: handleToggle,
 			ref: triggerRef,
+			title: "More tabs",
 			type: "button",
 			children: /* @__PURE__ */ jsx(OverflowIcon, {})
 		}), open ? /* @__PURE__ */ jsx("div", {
@@ -1547,6 +1732,7 @@ const TabsetCloseButton = ({ children, onClick, ...props }) => {
 	};
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": `Close ${tab.name}`,
+		title: `Close ${tab.name}`,
 		...props,
 		"data-dashfoo": "tab-close",
 		onClick: handleClick,
@@ -1638,6 +1824,7 @@ const TabsetGrip = ({ children, ref: userRef, ...props }) => {
 	if (hidden) return null;
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": "Move tabset",
+		title: "Move tabset",
 		...props,
 		"data-dashfoo": "tabset-grip",
 		ref: refCallback,
@@ -1656,6 +1843,7 @@ const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
 	};
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": isMaximized ? "Restore" : "Maximize",
+		title: isMaximized ? "Restore tabset" : "Maximize tabset",
 		...props,
 		"aria-pressed": isMaximized,
 		"data-dashfoo": "tabset-maximize",
@@ -1685,6 +1873,7 @@ const TabsetFloatButton = ({ children, onClick, ...props }) => {
 	};
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": "Float panel",
+		title: "Float panel",
 		...props,
 		"data-dashfoo": "tabset-float",
 		onClick: handleClick,
@@ -1917,117 +2106,6 @@ const bodyStyle = {
 	minHeight: 0,
 	position: "relative"
 };
-const RESIZE_HANDLES = [
-	{
-		edges: {
-			x: 0,
-			y: -1
-		},
-		key: "n",
-		style: {
-			cursor: "ns-resize",
-			height: 6,
-			insetInline: 10,
-			top: -3
-		}
-	},
-	{
-		edges: {
-			x: 0,
-			y: 1
-		},
-		key: "s",
-		style: {
-			bottom: -3,
-			cursor: "ns-resize",
-			height: 6,
-			insetInline: 10
-		}
-	},
-	{
-		edges: {
-			x: 1,
-			y: 0
-		},
-		key: "e",
-		style: {
-			cursor: "ew-resize",
-			insetBlock: 10,
-			right: -3,
-			width: 6
-		}
-	},
-	{
-		edges: {
-			x: -1,
-			y: 0
-		},
-		key: "w",
-		style: {
-			cursor: "ew-resize",
-			insetBlock: 10,
-			left: -3,
-			width: 6
-		}
-	},
-	{
-		edges: {
-			x: 1,
-			y: -1
-		},
-		key: "ne",
-		style: {
-			cursor: "nesw-resize",
-			height: 14,
-			right: -4,
-			top: -4,
-			width: 14
-		}
-	},
-	{
-		edges: {
-			x: -1,
-			y: -1
-		},
-		key: "nw",
-		style: {
-			cursor: "nwse-resize",
-			height: 14,
-			left: -4,
-			top: -4,
-			width: 14
-		}
-	},
-	{
-		edges: {
-			x: 1,
-			y: 1
-		},
-		key: "se",
-		style: {
-			bottom: -4,
-			cursor: "nwse-resize",
-			height: 14,
-			right: -4,
-			width: 14
-		}
-	},
-	{
-		edges: {
-			x: -1,
-			y: 1
-		},
-		key: "sw",
-		style: {
-			bottom: -4,
-			cursor: "nesw-resize",
-			height: 14,
-			left: -4,
-			width: 14
-		}
-	}
-];
-const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
 const CHIP_SIZE = {
 	height: 34,
 	width: 168
@@ -2120,10 +2198,12 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 	const handlePointerDown = (event) => {
 		const panel = panelRef.current;
 		if (!panel || !editable) return;
+		const prior = gestureRef.current;
+		if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
 		movedRef.current = false;
 		const edgeKey = event.currentTarget.dataset.edge;
 		const parent = panel.offsetParent;
-		gestureRef.current = {
+		const gesture = {
 			bounds: {
 				height: parent?.clientHeight ?? 0,
 				width: parent?.clientWidth ?? 0
@@ -2134,18 +2214,40 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			startX: event.clientX,
 			startY: event.clientY
 		};
+		gestureRef.current = gesture;
 		latestRef.current = node.geometry;
+		if (gesture.edges) panel.setPointerCapture(event.pointerId);
+	};
+	const handlePointerUp = (event) => {
+		const gesture = gestureRef.current;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		gestureRef.current = null;
+		const panel = panelRef.current;
+		if (panel?.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
+		if (!movedRef.current) {
+			if (node.minimized) restore();
+			return;
+		}
+		dispatch({
+			floatId: node.id,
+			geometry: latestRef.current,
+			type: "moveFloat"
+		});
 	};
 	const handlePointerMove = (event) => {
 		const gesture = gestureRef.current;
 		const panel = panelRef.current;
 		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
+		if (event.buttons === 0) {
+			handlePointerUp(event);
+			return;
+		}
 		const dx = event.clientX - gesture.startX;
 		const dy = event.clientY - gesture.startY;
 		if (!movedRef.current) {
 			if (Math.hypot(dx, dy) <= TAP_SLOP) return;
 			movedRef.current = true;
-			panel.setPointerCapture(gesture.pointerId);
+			if (!gesture.edges) panel.setPointerCapture(gesture.pointerId);
 		}
 		const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
 			...gesture.start,
@@ -2160,20 +2262,19 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			panel.style.height = `${next.height}px`;
 		}
 	};
-	const handlePointerUp = (event) => {
+	const handlePointerCancel = (event) => {
 		const gesture = gestureRef.current;
-		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		const panel = panelRef.current;
+		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
 		gestureRef.current = null;
-		if (!movedRef.current) {
-			if (node.minimized) restore();
-			return;
+		if (panel.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
+		if (!movedRef.current) return;
+		panel.style.left = `${gesture.start.left}px`;
+		panel.style.top = `${gesture.start.top}px`;
+		if (!node.minimized) {
+			panel.style.width = `${gesture.start.width}px`;
+			panel.style.height = `${gesture.start.height}px`;
 		}
-		panelRef.current?.releasePointerCapture(event.pointerId);
-		dispatch({
-			floatId: node.id,
-			geometry: latestRef.current,
-			type: "moveFloat"
-		});
 	};
 	if (node.minimized) return /* @__PURE__ */ jsxs("button", {
 		"aria-label": `Restore ${floatTitle(node)} panel`,
@@ -2184,6 +2285,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 				restore();
 			}
 		},
+		onPointerCancel: handlePointerCancel,
 		onPointerDown: handlePointerDown,
 		onPointerDownCapture: onFocus,
 		onPointerMove: handlePointerMove,
@@ -2210,6 +2312,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-dashfoo": "float",
+		onPointerCancel: handlePointerCancel,
 		onPointerDownCapture: onFocus,
 		onPointerMove: handlePointerMove,
 		onPointerUp: handlePointerUp,
@@ -2252,6 +2355,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 						}),
 						onPointerDown: (event) => event.stopPropagation(),
 						style: dockButtonStyle,
+						title: "Minimize panel",
 						type: "button",
 						children: /* @__PURE__ */ jsx(MinimizeIcon, {})
 					}), /* @__PURE__ */ jsx("button", {
@@ -2263,6 +2367,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 						}),
 						onPointerDown: (event) => event.stopPropagation(),
 						style: dockButtonStyle,
+						title: "Dock panel back",
 						type: "button",
 						children: /* @__PURE__ */ jsx(DockIcon, {})
 					})] })
@@ -2310,7 +2415,8 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 const overlayStyle = {
 	inset: 0,
 	pointerEvents: "none",
-	position: "fixed"
+	position: "fixed",
+	zIndex: 1
 };
 const FloatOverlay = ({ floats, global }) => {
 	const [topId, setTopId] = useState(null);