@dashfoo/react 0.6.3 → 0.7.0

package/dist/index.js

@@ -1,12 +1,12 @@
 "use client";
 
-import { canRedo, canUndo, dashfooMachine, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, snapEnabled, snapSizes, stackModel, tabNodeSchema, toJSON, zoneRect } from "@dashfoo/core";
+import { canRedo, canUndo, dashfooMachine, decideSnap, dockLocationFor, dragDockMachine, findTabset, fromJSON, normalize, resolveDockTarget, settleSnap, snapEnabled, splitEdge, stackModel, tabNodeSchema, toJSON, zoneRect } from "@dashfoo/core";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 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 { CollisionPriority, CollisionType } from "@dnd-kit/abstract";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createStore, useStore } from "zustand";
 import { Group, Panel as Panel$1, Separator } from "react-resizable-panels";
 
 //#region src/lib/topmost-collision.ts
@@ -63,17 +63,15 @@ const createDragManager = () => new DragDropManager({
 	plugins: (defaults) => [...defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback), Feedback.configure({ dropAnimation: null })],
 	sensors: () => [PointerSensor.configure({ preventActivation })]
 });
+const DragRootContext = createContext(null);
 const DragContext = createContext(null);
 const SharedDragManagerContext = createContext(null);
-const createDragSubjectStore = () => createStore(() => ({
-	intent: null,
-	intentOwner: null,
-	subject: null
-}));
+/**
+* The actor assigns a freshly built intent on every pointer move, so selecting
+* `context.intent` by reference would re-render every reader of `useDropIntent`
+* for each move that resolved to the same slot.
+*/
 const sameDropIntent = (a, b) => a === b || a !== null && b !== null && a.index === b.index && a.location === b.location && a.targetId === b.targetId;
-const sameDragSubject = (a, b) => a === b || a !== null && b !== null && a.id === b.id && a.kind === b.kind;
-const nullSubjectStore = createDragSubjectStore();
-const DragSubjectStoreContext = createContext(null);
 const useDraggableHandle = () => {
 	const elementRef = useRef(null);
 	const draggableRef = useRef(null);
@@ -194,11 +192,20 @@ const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
 		id: `external-${id}`
 	}, disabled, label);
 };
+/**
+* Both drag readers are documented as working anywhere under the provider, which
+* includes a custom overlay mounted beside the layout rather than inside a drag
+* layer, so they read the root's actor. Outside a provider entirely there is no
+* actor to read and they report the empty state instead of throwing: a component
+* that renders both inside and outside a layout should not crash in one of them.
+*/
 const useDragSubject = () => {
-	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.subject);
+	const actorRef = useContext(DragRootContext)?.actorRef;
+	return useSelector(actorRef, (snapshot) => snapshot?.context.subject ?? null);
 };
 const useDropIntent = () => {
-	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.intent);
+	const actorRef = useContext(DragRootContext)?.actorRef;
+	return useSelector(actorRef, (snapshot) => snapshot?.context.intent ?? null, sameDropIntent);
 };
 
 //#endregion
@@ -269,7 +276,7 @@ const usePersistence = (config, defaultModel) => {
 	const loadedKey = useRef(config?.key);
 	useEffect(() => {
 		if (config !== null && config.key !== loadedKey.current) {
-			console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key — remount (key={persistKey}) to load the new key");
+			console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key; remount (key={persistKey}) to load the new key");
 			loadedKey.current = config.key;
 		}
 	}, [config]);
@@ -352,7 +359,7 @@ const useContainerWidth = () => {
 		observerRef.current?.disconnect();
 		if (!element) return;
 		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
+			const entry = entries.at(0);
 			if (entry) setWidth(entry.contentRect.width);
 		});
 		observer.observe(element);
@@ -393,8 +400,18 @@ const useResponsiveModel = ({ breakpoints }) => {
 	}, [active, containerRef]);
 };
 
+//#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/hooks/store.ts
+const CONTROLLED_HISTORY_MESSAGE = "undo/redo are unavailable while `model` is controlled; keep the history in the state you own and drive it through onModelChange";
 const useDashfooStore = (options) => {
 	const { defaultModel, model: controlledModel, onAction, onActiveTabsetChange, onMaximizedTabsetChange, onModelChange } = options;
 	const initialModel = controlledModel ?? defaultModel;
@@ -421,32 +438,22 @@ const useDashfooStore = (options) => {
 	const dispatch = useCallback((action) => {
 		const resolved = onAction ? onAction(action) : action;
 		if (!resolved) return;
-		const transition = (() => {
-			if (controlledModel === void 0) {
-				const before = actorRef.getSnapshot().context.history.present;
-				actorRef.send({
-					action: resolved,
-					type: "DISPATCH"
-				});
-				return {
-					after: actorRef.getSnapshot().context.history.present,
-					before
-				};
-			}
-			return {
-				after: reducer(controlledModel, resolved),
-				before: normalize(controlledModel)
-			};
-		})();
-		notify(transition.before, transition.after, resolved);
+		const before = actorRef.getSnapshot().context.history.present;
+		actorRef.send({
+			action: resolved,
+			type: "DISPATCH"
+		});
+		notify(before, actorRef.getSnapshot().context.history.present, resolved);
 	}, [
 		actorRef,
-		controlledModel,
 		notify,
 		onAction
 	]);
 	const undo = useCallback(() => {
-		if (controlledModel !== void 0) return;
+		if (controlledModel !== void 0) {
+			warnOnce("controlled-undo", CONTROLLED_HISTORY_MESSAGE);
+			return;
+		}
 		const before = actorRef.getSnapshot().context.history.present;
 		actorRef.send({ type: "UNDO" });
 		const after = actorRef.getSnapshot().context.history.present;
@@ -457,7 +464,10 @@ const useDashfooStore = (options) => {
 		notify
 	]);
 	const redo = useCallback(() => {
-		if (controlledModel !== void 0) return;
+		if (controlledModel !== void 0) {
+			warnOnce("controlled-redo", CONTROLLED_HISTORY_MESSAGE);
+			return;
+		}
 		const before = actorRef.getSnapshot().context.history.present;
 		actorRef.send({ type: "REDO" });
 		const after = actorRef.getSnapshot().context.history.present;
@@ -474,8 +484,8 @@ const useDashfooStore = (options) => {
 		});
 	}, [actorRef]);
 	return useMemo(() => ({
-		canRedo: () => canRedo(actorRef.getSnapshot().context.history),
-		canUndo: () => canUndo(actorRef.getSnapshot().context.history),
+		canRedo: () => controlledModel === void 0 && canRedo(actorRef.getSnapshot().context.history),
+		canUndo: () => controlledModel === void 0 && canUndo(actorRef.getSnapshot().context.history),
 		dispatch,
 		model,
 		redo,
@@ -483,6 +493,7 @@ const useDashfooStore = (options) => {
 		undo
 	}), [
 		actorRef,
+		controlledModel,
 		dispatch,
 		model,
 		redo,
@@ -491,6 +502,49 @@ const useDashfooStore = (options) => {
 	]);
 };
 
+//#endregion
+//#region src/lib/drag-subject.ts
+const isTabFactory = (value) => typeof value === "function";
+/**
+* Reads what a dnd-kit source represents. It lives beside the manager wiring
+* rather than in the layer adapter because `dragstart` fires once per gesture on
+* the shared manager, above any one layer.
+*/
+const subjectFor = (source) => {
+	const data = source.data;
+	if (data?.type === "tabset") return {
+		id: String(data.tabsetId),
+		kind: "tabset"
+	};
+	if (data?.type === "external") {
+		if (!isTabFactory(data.createTab)) {
+			console.warn("[dashfoo] external drag source is missing its createTab function");
+			return null;
+		}
+		let candidate;
+		try {
+			candidate = data.createTab();
+		} catch (error) {
+			console.warn("[dashfoo] external drag source createTab threw", error);
+			return null;
+		}
+		const parsed = tabNodeSchema.safeParse(candidate);
+		if (!parsed.success) {
+			console.warn("[dashfoo] external drag source returned an invalid tab", parsed.error);
+			return null;
+		}
+		return {
+			id: String(source.id),
+			kind: "external",
+			tab: parsed.data
+		};
+	}
+	return {
+		id: String(source.id),
+		kind: "tab"
+	};
+};
+
 //#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;
@@ -591,7 +645,9 @@ const DragPreviewOverlay = ({ manager }) => {
 				y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
 			});
 		});
-		const offEnd = manager.monitor.addEventListener("dragend", () => setChip(null));
+		const offEnd = manager.monitor.addEventListener("dragend", () => {
+			setChip(null);
+		});
 		return () => {
 			offStart();
 			offEnd();
@@ -621,12 +677,107 @@ const DragPreviewOverlay = ({ manager }) => {
 //#region src/components/drag-root.tsx
 const DashfooDragProvider = ({ children }) => {
 	const [manager] = useState(createDragManager);
-	useInsertionEffect(() => () => manager.destroy(), [manager]);
-	const [subjectStore] = useState(createDragSubjectStore);
+	useInsertionEffect(() => () => {
+		manager.destroy();
+	}, [manager]);
+	const actorRef = useActorRef(dragDockMachine);
+	const [scopes] = useState(() => /* @__PURE__ */ new Map());
+	const registerScope = useCallback((scope) => {
+		scopes.set(scope.layerId, scope);
+		return () => {
+			scopes.delete(scope.layerId);
+		};
+	}, [scopes]);
+	/**
+	* One listener set and one actor for the whole tree. Attached per layer, a
+	* single pointer move fanned out to every float's actor, and each one that did
+	* not own the target resolved `intent: null` and then swallowed the drop.
+	*/
+	useEffect(() => {
+		const scopedTarget = () => {
+			const target = manager.dragOperation.target;
+			const data = target?.data;
+			const scope = data?.layerId === void 0 ? void 0 : scopes.get(data.layerId);
+			const element = target?.element;
+			if (!scope || data?.tabsetId === void 0 || !(element instanceof HTMLElement)) return null;
+			return {
+				element,
+				scope,
+				tabsetId: data.tabsetId
+			};
+		};
+		let intentLayerId = null;
+		const syncIntent = () => {
+			const operation = manager.dragOperation;
+			const found = scopedTarget();
+			const draggedId = operation.source ? String(operation.source.id) : void 0;
+			const intent = found === null ? null : found.scope.resolveIntent(found.tabsetId, found.element, operation.position.current, draggedId);
+			intentLayerId = intent === null || found === null ? null : found.scope.layerId;
+			actorRef.send({
+				intent,
+				type: "OVER"
+			});
+		};
+		const handleStart = (event) => {
+			const source = event.operation.source;
+			if (!source) return;
+			const subject = subjectFor(source);
+			if (!subject) {
+				manager.actions.stop({ canceled: true });
+				return;
+			}
+			intentLayerId = null;
+			actorRef.send({
+				subject,
+				type: "START"
+			});
+		};
+		const handleMove = () => {
+			syncIntent();
+		};
+		const handleCollision = () => {
+			syncIntent();
+		};
+		const handleEnd = (event) => {
+			if (event.canceled) {
+				actorRef.send({ type: "CANCEL" });
+				return;
+			}
+			syncIntent();
+			actorRef.send({ type: "DROP" });
+		};
+		const commitSubscription = actorRef.on("COMMIT", (emitted) => {
+			(intentLayerId === null ? void 0 : scopes.get(intentLayerId))?.commit(emitted.action);
+		});
+		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 () => {
+			commitSubscription.unsubscribe();
+			offStart();
+			offMove();
+			offCollision();
+			offEnd();
+		};
+	}, [
+		actorRef,
+		manager,
+		scopes
+	]);
+	const rootValue = useMemo(() => ({
+		actorRef,
+		manager,
+		registerScope
+	}), [
+		actorRef,
+		manager,
+		registerScope
+	]);
 	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
 		value: manager,
-		children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
-			value: subjectStore,
+		children: /* @__PURE__ */ jsxs(DragRootContext.Provider, {
+			value: rootValue,
 			children: [children, /* @__PURE__ */ jsx(DragPreviewOverlay, { manager })]
 		})
 	});
@@ -642,17 +793,9 @@ const useLayout = (selector) => {
 	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 MISSING_ROOT = "[dashfoo] DashfooDragProvider unmounted while its layout is still mounted; keep the provider above the layout or remount the layout";
 const tabRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => tab.dataset.tabId === excludeId ? [] : [tab.getBoundingClientRect()]);
 const intentForTabset = (id, element, point, draggedId) => {
 	const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
@@ -661,8 +804,7 @@ const intentForTabset = (id, element, point, draggedId) => {
 		location: "center",
 		targetId: id
 	};
-	const target = resolveDockTarget(point, element.getBoundingClientRect());
-	const location = target.kind === "tab" ? "center" : `split-${target.edge}`;
+	const location = dockLocationFor(resolveDockTarget(point, element.getBoundingClientRect()));
 	if (location === "center" && strip) return {
 		index: tabRects(strip, draggedId).length,
 		location,
@@ -673,266 +815,81 @@ const intentForTabset = (id, element, point, draggedId) => {
 		targetId: id
 	};
 };
-const isTabFactory = (value) => typeof value === "function";
-const subjectFor = (source) => {
-	const data = source.data;
-	if (data?.type === "tabset") return {
-		id: String(data.tabsetId),
-		kind: "tabset"
-	};
-	if (data?.type === "external") {
-		if (!isTabFactory(data.createTab)) {
-			console.warn("[dashfoo] external drag source is missing its createTab function");
-			return null;
-		}
-		let candidate;
-		try {
-			candidate = data.createTab();
-		} catch (error) {
-			console.warn("[dashfoo] external drag source createTab threw", error);
-			return null;
-		}
-		const parsed = tabNodeSchema.safeParse(candidate);
-		if (!parsed.success) {
-			console.warn("[dashfoo] external drag source returned an invalid tab", parsed.error);
-			return null;
-		}
-		return {
-			id: String(source.id),
-			kind: "external",
-			tab: parsed.data
-		};
-	}
-	return {
-		id: String(source.id),
-		kind: "tab"
-	};
-};
-const DragProvider = ({ children, onCommit, splitDock }) => {
-	const actorRef = useActorRef(dragDockMachine);
+/**
+* One drag layer: the main tree, or one float. It holds no drag state of its
+* own. It registers how its own tabsets turn a pointer into an intent and where
+* a committed action goes, then draws the indicator over its own droppables.
+*/
+const DragScope = ({ children, onCommit, splitDock }) => {
+	const root = useContext(DragRootContext);
 	const layoutStore = useContext(LayoutStoreContext);
-	const sharedManager = useContext(SharedDragManagerContext);
-	const [ownManager] = useState(() => sharedManager ? null : createDragManager());
-	useInsertionEffect(() => () => ownManager?.destroy(), [ownManager]);
-	const manager = sharedManager ?? ownManager;
-	if (manager === null) throw new Error("[dashfoo] DashfooDragProvider unmounted while its layout is still mounted; keep the provider above the layout or remount the layout");
-	const inheritedStore = useContext(DragSubjectStoreContext);
-	const [subjectStore] = useState(() => inheritedStore ?? createDragSubjectStore());
-	const ownerId = useId();
-	useEffect(() => {
-		const subscription = actorRef.subscribe((snapshot) => {
-			const { intent, subject } = snapshot.context;
-			const state = subjectStore.getState();
-			if (intent !== null) {
-				if (!sameDropIntent(state.intent, intent) || state.intentOwner !== ownerId) subjectStore.setState({
-					intent,
-					intentOwner: ownerId
-				});
-			} else if (state.intent !== null && state.intentOwner === ownerId) subjectStore.setState({
-				intent: null,
-				intentOwner: null
-			});
-			if (!sameDragSubject(subjectStore.getState().subject, subject)) subjectStore.setState({ subject });
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [
-		actorRef,
-		ownerId,
-		subjectStore
-	]);
-	const onCommitRef = useRef(onCommit);
-	const splitDockRef = useRef(splitDock);
-	useEffect(() => {
-		onCommitRef.current = onCommit;
-		splitDockRef.current = splitDock;
-	});
+	const layerId = useId();
+	const manager = root?.manager;
 	const getTabsetElement = useCallback((id) => {
-		const element = manager.registry.droppables.get(`${ownerId}:${id}`)?.element;
+		const element = manager?.registry.droppables.get(`${layerId}:${id}`)?.element;
 		return element instanceof HTMLElement ? element : void 0;
-	}, [manager, ownerId]);
-	useEffect(() => {
-		const subscription = actorRef.on("COMMIT", (emitted) => {
+	}, [layerId, manager]);
+	const scope = useMemo(() => ({
+		commit: (action) => {
 			if (layoutStore?.getState().editable === false) return;
-			const commit = onCommitRef.current ?? layoutStore?.getState().dispatch;
+			const commit = onCommit ?? layoutStore?.getState().dispatch;
 			if (!commit) {
 				warnOnce("drag-layer-no-commit", "Layout.DragLayer has neither an onCommit prop nor a <Layout.Root> above it; drops are ignored");
 				return;
 			}
-			commit(emitted.action);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [actorRef, layoutStore]);
-	useEffect(() => {
-		const resolveIntent = (targetId, element, point, draggedId) => {
+			commit(action);
+		},
+		layerId,
+		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;
 			const intent = intentForTabset(targetId, element, point, draggedId);
-			if (!(splitDockRef.current ?? layoutStore?.getState().splitDock ?? true) && intent.location.startsWith("split-")) return {
+			if (!(splitDock ?? layoutStore?.getState().splitDock ?? true) && splitEdge(intent.location) !== void 0) return {
 				location: "center",
 				targetId
 			};
 			return intent;
-		};
-		const handleStart = (event) => {
-			const source = event.operation.source;
-			if (!source) return;
-			const subject = subjectFor(source);
-			if (!subject) {
-				manager.actions.stop({ canceled: true });
-				return;
-			}
-			actorRef.send({
-				subject,
-				type: "START"
-			});
-		};
-		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: tabsetId !== void 0 && element instanceof HTMLElement ? resolveIntent(tabsetId, element, point, draggedId) : null,
-				type: "OVER"
-			});
-		};
-		const handleMove = () => syncIntent();
-		const handleCollision = () => syncIntent();
-		const handleEnd = (event) => {
-			if (event.canceled) {
-				actorRef.send({ type: "CANCEL" });
-				return;
-			}
-			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,
+		}
+	}), [
+		layerId,
 		layoutStore,
-		manager,
-		ownerId
+		onCommit,
+		splitDock
 	]);
-	const contextValue = useMemo(() => ({
-		layerId: ownerId,
-		manager
-	}), [manager, ownerId]);
-	return /* @__PURE__ */ jsx(DragContext.Provider, {
+	const registerScope = root?.registerScope;
+	useEffect(() => registerScope?.(scope), [registerScope, scope]);
+	const contextValue = useMemo(() => root === null ? null : {
+		actorRef: root.actorRef,
+		layerId,
+		manager: root.manager
+	}, [layerId, root]);
+	if (contextValue === null) throw new Error(MISSING_ROOT);
+	return /* @__PURE__ */ jsxs(DragContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
-			value: subjectStore,
-			children: [
-				children,
-				/* @__PURE__ */ jsx(DockIndicator, {
-					actorRef,
-					getTabsetElement
-				}),
-				ownManager === null ? null : /* @__PURE__ */ jsx(DragPreviewOverlay, { manager: ownManager })
-			]
-		})
+		children: [children, /* @__PURE__ */ jsx(DockIndicator, {
+			actorRef: contextValue.actorRef,
+			getTabsetElement
+		})]
 	});
 };
+/**
+* Mounts its own root when there is none above it, so a hand-composed
+* `Layout.DragLayer` still works standalone. The choice is made on the first
+* render, as it was for the manager this used to create itself: a root that
+* disappears later means a torn-down tree, which `DragScope` reports.
+*/
+const DragProvider = (props) => {
+	const hasRoot = useContext(DragRootContext) !== null;
+	const [ownsRoot] = useState(() => !hasRoot);
+	const layer = /* @__PURE__ */ jsx(DragScope, { ...props });
+	return ownsRoot ? /* @__PURE__ */ jsx(DashfooDragProvider, { children: layer }) : layer;
+};
 
 //#endregion
 //#region src/components/float-context.ts
 const FloatLayerContext = createContext(false);
 const useHasFloatLayer = () => useContext(FloatLayerContext);
 
-//#endregion
-//#region src/hooks/use-inline-rename.ts
-const useInlineRename = ({ currentName, inputRef, onCommit, onDone }) => {
-	const done = useRef(false);
-	useEffect(() => {
-		inputRef.current?.focus();
-		inputRef.current?.select();
-	}, [inputRef]);
-	const commit = (value) => {
-		const trimmed = value.trim();
-		if (trimmed && trimmed !== currentName) onCommit(trimmed);
-		onDone();
-	};
-	const handleKeyDown = (event) => {
-		if (event.key === "Enter") {
-			done.current = true;
-			commit(event.currentTarget.value);
-		} else if (event.key === "Escape") {
-			done.current = true;
-			onDone();
-		}
-	};
-	const handleBlur = (event) => {
-		if (done.current) return;
-		done.current = true;
-		commit(event.currentTarget.value);
-	};
-	return {
-		handleBlur,
-		handleKeyDown
-	};
-};
-
-//#endregion
-//#region src/lib/float-geometry.ts
-const MIN_WIDTH = 200;
-const MIN_HEIGHT = 120;
-const DEFAULT_WIDTH = 480;
-const DEFAULT_HEIGHT = 340;
-const LIFT_OFFSET = 16;
-const clampToBounds = (rect, bounds, size = rect) => ({
-	height: rect.height,
-	left: Math.max(0, Math.min(rect.left, Math.max(0, bounds.width - size.width))),
-	top: Math.max(0, Math.min(rect.top, Math.max(0, bounds.height - size.height))),
-	width: rect.width
-});
-const measureFloatRect = (element) => {
-	const rect = (element.closest("[data-dashfoo=\"tabset\"]") ?? element).getBoundingClientRect();
-	const seeded = {
-		height: Math.max(MIN_HEIGHT, Math.min(Math.round(rect.height), DEFAULT_HEIGHT)),
-		left: Math.round(rect.left) + LIFT_OFFSET,
-		top: Math.round(rect.top) + LIFT_OFFSET,
-		width: Math.max(MIN_WIDTH, Math.min(Math.round(rect.width), DEFAULT_WIDTH))
-	};
-	return clampToBounds(seeded, {
-		height: window.innerHeight,
-		width: window.innerWidth
-	});
-};
-const resizeRect = (start, edges, dx, dy) => {
-	let { height, left, top, width } = start;
-	if (edges.x === 1) width = Math.max(MIN_WIDTH, start.width + dx);
-	else if (edges.x === -1) {
-		width = Math.max(MIN_WIDTH, start.width - dx);
-		left = Math.max(0, start.left + (start.width - width));
-	}
-	if (edges.y === 1) height = Math.max(MIN_HEIGHT, start.height + dy);
-	else if (edges.y === -1) {
-		height = Math.max(MIN_HEIGHT, start.height - dy);
-		top = Math.max(0, start.top + (start.height - height));
-	}
-	return {
-		height,
-		left,
-		top,
-		width
-	};
-};
-
 //#endregion
 //#region src/components/float-resize-handles.ts
 const EDGE_THICKNESS = 12;
@@ -1052,6 +1009,202 @@ const RESIZE_HANDLES = [
 ];
 const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
 
+//#endregion
+//#region src/lib/float-geometry.ts
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 120;
+const DEFAULT_WIDTH = 480;
+const DEFAULT_HEIGHT = 340;
+const LIFT_OFFSET = 16;
+const clampToBounds = (rect, bounds, size = rect) => ({
+	height: rect.height,
+	left: Math.max(0, Math.min(rect.left, Math.max(0, bounds.width - size.width))),
+	top: Math.max(0, Math.min(rect.top, Math.max(0, bounds.height - size.height))),
+	width: rect.width
+});
+const measureFloatRect = (element) => {
+	const rect = (element.closest("[data-dashfoo=\"tabset\"]") ?? element).getBoundingClientRect();
+	const seeded = {
+		height: Math.max(MIN_HEIGHT, Math.min(Math.round(rect.height), DEFAULT_HEIGHT)),
+		left: Math.round(rect.left) + LIFT_OFFSET,
+		top: Math.round(rect.top) + LIFT_OFFSET,
+		width: Math.max(MIN_WIDTH, Math.min(Math.round(rect.width), DEFAULT_WIDTH))
+	};
+	return clampToBounds(seeded, {
+		height: window.innerHeight,
+		width: window.innerWidth
+	});
+};
+const resizeRect = (start, edges, dx, dy) => {
+	let { height, left, top, width } = start;
+	if (edges.x === 1) width = Math.max(MIN_WIDTH, start.width + dx);
+	else if (edges.x === -1) {
+		width = Math.max(MIN_WIDTH, start.width - dx);
+		left = Math.max(0, start.left + (start.width - width));
+	}
+	if (edges.y === 1) height = Math.max(MIN_HEIGHT, start.height + dy);
+	else if (edges.y === -1) {
+		height = Math.max(MIN_HEIGHT, start.height - dy);
+		top = Math.max(0, start.top + (start.height - height));
+	}
+	return {
+		height,
+		left,
+		top,
+		width
+	};
+};
+
+//#endregion
+//#region src/hooks/use-float-gesture.ts
+const CHIP_SIZE = {
+	height: 34,
+	width: 168
+};
+const TAP_SLOP = 4;
+/**
+* Moving and resizing writes straight to the panel's inline style and only
+* dispatches on pointer-up: routing every pointermove through the model would
+* re-render the whole layout tree behind the float.
+*/
+const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) => {
+	const panelRef = useRef(null);
+	const gestureRef = useRef(null);
+	const latestRef = useRef(geometry);
+	const movedRef = useRef(false);
+	const setPanel = (element) => {
+		panelRef.current = element;
+	};
+	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 instanceof HTMLElement ? panel.offsetParent : null;
+		const gesture = {
+			bounds: {
+				height: parent?.clientHeight ?? 0,
+				width: parent?.clientWidth ?? 0
+			},
+			edges: edgeKey === void 0 ? null : EDGE_BY_KEY.get(edgeKey) ?? null,
+			pointerId: event.pointerId,
+			start: geometry,
+			startX: event.clientX,
+			startY: event.clientY
+		};
+		gestureRef.current = gesture;
+		latestRef.current = 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) === true) panel.releasePointerCapture(event.pointerId);
+		if (!movedRef.current) {
+			onTap();
+			return;
+		}
+		onCommit(latestRef.current);
+	};
+	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;
+			if (!gesture.edges) panel.setPointerCapture(gesture.pointerId);
+		}
+		const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
+			...gesture.start,
+			left: gesture.start.left + dx,
+			top: gesture.start.top + dy
+		}, gesture.bounds, minimized ? CHIP_SIZE : void 0);
+		latestRef.current = next;
+		panel.style.left = `${next.left}px`;
+		panel.style.top = `${next.top}px`;
+		if (!minimized) {
+			panel.style.width = `${next.width}px`;
+			panel.style.height = `${next.height}px`;
+		}
+	};
+	const handlePointerCancel = (event) => {
+		const gesture = gestureRef.current;
+		const panel = panelRef.current;
+		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
+		gestureRef.current = null;
+		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 (!minimized) {
+			panel.style.width = `${gesture.start.width}px`;
+			panel.style.height = `${gesture.start.height}px`;
+		}
+	};
+	return {
+		handlers: {
+			onPointerCancel: handlePointerCancel,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp
+		},
+		ref: setPanel,
+		style: minimized ? {
+			left: geometry.left,
+			top: geometry.top
+		} : {
+			height: geometry.height,
+			left: geometry.left,
+			top: geometry.top,
+			width: geometry.width
+		}
+	};
+};
+
+//#endregion
+//#region src/hooks/use-inline-rename.ts
+const useInlineRename = ({ currentName, inputRef, onCommit, onDone }) => {
+	const done = useRef(false);
+	useEffect(() => {
+		inputRef.current?.focus();
+		inputRef.current?.select();
+	}, [inputRef]);
+	const commit = (value) => {
+		const trimmed = value.trim();
+		if (trimmed && trimmed !== currentName) onCommit(trimmed);
+		onDone();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			done.current = true;
+			commit(event.currentTarget.value);
+		} else if (event.key === "Escape") {
+			done.current = true;
+			onDone();
+		}
+	};
+	const handleBlur = (event) => {
+		if (done.current) return;
+		done.current = true;
+		commit(event.currentTarget.value);
+	};
+	return {
+		handleBlur,
+		handleKeyDown
+	};
+};
+
 //#endregion
 //#region src/components/layout-root.tsx
 const DEFAULT_TABSET_MIN_SIZE = 320;
@@ -1061,15 +1214,15 @@ const rootStyle = {
 	position: "relative",
 	width: "100%"
 };
-const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = true, draggableTabsets = true, editable = true, floatable = false, keepMounted = false, maximizable = true, model, renamableTabs = true, renderTab, renderTabLabel, renderTabsetToolbar, resizableSplits = true, rootRef, snap, style, ...props }) => {
+const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = true, draggableTabsets = true, editable = true, floatable = false, keepMounted = false, maximizable = true, model, renamableTabs = true, renderTab, renderTabLabel, renderTabsetToolbar, resizableSplits = true, restructurable = true, rootRef, snap, style, ...props }) => {
 	const global = model.global;
 	const snapshot = {
 		closableTabs: editable && closableTabs && global.tabEnableClose !== false,
 		dispatch,
-		draggableTabs: editable && draggableTabs && global.tabEnableDrag !== false,
-		draggableTabsets: editable && draggableTabsets,
+		draggableTabs: editable && restructurable && draggableTabs && global.tabEnableDrag !== false,
+		draggableTabsets: editable && restructurable && draggableTabsets,
 		editable,
-		floatable: editable && floatable,
+		floatable: editable && restructurable && floatable,
 		keepMounted,
 		maximizable: maximizable && global.tabSetEnableMaximize !== false,
 		maximizedTabsetId: model.maximizedTabsetId,
@@ -1077,7 +1230,7 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 		renderTab,
 		renderTabLabel,
 		renderTabsetToolbar,
-		resizableSplits: editable && resizableSplits && global.enableSplitResize !== false,
+		resizableSplits: editable && restructurable && resizableSplits && global.enableSplitResize !== false,
 		snap: snap ?? global.snap ?? null,
 		splitDock: global.enableSplitDock !== false,
 		tabLocation: global.tabLocation ?? "top",
@@ -1099,15 +1252,142 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
 		value: store,
 		children: /* @__PURE__ */ jsx("div", {
-			...props,
+			...props,
+			"data-dashfoo": "layout",
+			ref: rootRef,
+			style: layoutStyle,
+			children
+		})
+	});
+};
+/**
+* A nested subtree (a float) renders through the same components as the main
+* layout, minus a few capabilities. It republishes the parent store with the
+* overrides applied instead of re-deriving every flag from a synthetic model,
+* so anything the parent changes keeps flowing into the subtree.
+*/
+const LayoutOverrides = ({ children, overrides }) => {
+	const snapshot = {
+		...useLayout((state) => state),
+		...overrides
+	};
+	const [store] = useState(() => createLayoutStore(snapshot));
+	useLayoutEffect(() => {
+		store.setState(snapshot);
+	});
+	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx("div", {
 			"data-dashfoo": "layout",
-			ref: rootRef,
-			style: layoutStyle,
+			style: rootStyle,
 			children
 		})
 	});
 };
 
+//#endregion
+//#region src/hooks/use-snap-resize.ts
+const WEIGHT_EPSILON = .01;
+const IDLE = { kind: "idle" };
+const boundaryOf = (state) => state.kind === "dragging" || state.kind === "snapped" ? state.boundary : null;
+const snappedBoundaryOf = (state) => state.kind === "snapped" ? state.boundary : null;
+const layoutFromWeights = (children) => {
+	const total = children.reduce((sum, child) => sum + child.weight, 0);
+	return children.reduce((layout, child) => {
+		layout[child.id] = child.weight / total * 100;
+		return layout;
+	}, {});
+};
+const orderedFromLayout = (layout, children) => children.map((child) => layout[child.id] ?? 0);
+const layoutFromOrdered = (sizes, children) => children.reduce((layout, child, index) => {
+	layout[child.id] = sizes[index] ?? 0;
+	return layout;
+}, {});
+const layoutsMatch = (current, expected) => {
+	const currentIds = Object.keys(current);
+	const expectedIds = Object.keys(expected);
+	if (currentIds.length !== expectedIds.length) return false;
+	return expectedIds.every((id) => Math.abs((current[id] ?? NaN) - expected[id]) <= WEIGHT_EPSILON);
+};
+const useSnapResize = ({ children, onWeightsSettled, resizableSplits, snap }) => {
+	const groupRef = useRef(null);
+	const state = useRef(IDLE);
+	const [snappedBoundary, setSnappedBoundary] = useState(null);
+	const transition = useCallback((next) => {
+		state.current = next;
+		setSnappedBoundary(snappedBoundaryOf(next));
+	}, []);
+	const desiredLayout = useMemo(() => layoutFromWeights(children), [children]);
+	useLayoutEffect(() => {
+		const group = groupRef.current;
+		if (!group) return;
+		const current = group.getLayout();
+		if (!(Object.keys(current).length === Object.keys(desiredLayout).length && Object.keys(desiredLayout).every((id) => id in current)) || layoutsMatch(current, desiredLayout)) return;
+		transition({ kind: "syncing" });
+		group.setLayout(desiredLayout);
+		const frame = requestAnimationFrame(() => {
+			transition(IDLE);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			transition(IDLE);
+		};
+	}, [desiredLayout, transition]);
+	const onLayoutChange = (layout) => {
+		if (state.current.kind === "syncing" || !resizableSplits) return;
+		const boundary = boundaryOf(state.current);
+		if (boundary === null) return;
+		const decision = decideSnap(orderedFromLayout(layout, children), boundary, snap);
+		if (decision.kind === "inactive") return;
+		if (decision.kind === "clear") {
+			transition({
+				boundary,
+				kind: "dragging"
+			});
+			return;
+		}
+		transition({
+			boundary,
+			kind: "snapped"
+		});
+		const group = groupRef.current;
+		const target = layoutFromOrdered(decision.sizes, children);
+		if (!group || layoutsMatch(layout, target)) return;
+		transition({ kind: "syncing" });
+		group.setLayout(target);
+		transition({
+			boundary,
+			kind: "snapped"
+		});
+	};
+	const onLayoutChanged = (layout, meta) => {
+		if (!meta.isUserInteraction) return;
+		if (state.current.kind === "syncing") return;
+		const boundary = boundaryOf(state.current);
+		transition(IDLE);
+		if (!resizableSplits) return;
+		const weights = settleSnap(children.map((child) => layout[child.id] ?? child.weight), boundary, snap);
+		if (!weights.some((weight, index) => {
+			const child = children[index];
+			return child !== void 0 && Math.abs(weight - child.weight) > WEIGHT_EPSILON;
+		})) return;
+		onWeightsSettled(weights);
+	};
+	const beginBoundaryDrag = (boundary) => {
+		transition({
+			boundary,
+			kind: "dragging"
+		});
+	};
+	return {
+		beginBoundaryDrag,
+		groupRef,
+		onLayoutChange,
+		onLayoutChanged,
+		snappedBoundary
+	};
+};
+
 //#endregion
 //#region src/lib/tab-ids.ts
 const tabDomId = (tabsetId, tabId) => `dashfoo-tab-${tabsetId}-${tabId}`;
@@ -1118,7 +1398,9 @@ const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
 const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
 const createTabsetStore = (initial) => createStore((set, get) => ({
 	...initial,
-	cancelRename: () => set({ editingTabId: null }),
+	cancelRename: () => {
+		set({ editingTabId: null });
+	},
 	closeTab: (tabId) => {
 		set({ restoreFocus: true });
 		get().dispatch({
@@ -1137,7 +1419,9 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 	overflowItems: [],
 	registerRenameInput: () => {
 		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
-		return () => set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+		return () => {
+			set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+		};
 	},
 	registerTablist: (element) => {
 		if (element) {
@@ -1149,11 +1433,13 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 		set({ tablistElement: null });
 	},
 	renameInputCount: 0,
-	renameTab: (tabId, name) => get().dispatch({
-		name,
-		tabId,
-		type: "renameTab"
-	}),
+	renameTab: (tabId, name) => {
+		get().dispatch({
+			name,
+			tabId,
+			type: "renameTab"
+		});
+	},
 	restoreFocus: false,
 	selectOverflowTab: (tabId) => {
 		const { dispatch, node, tablistElement } = get();
@@ -1176,7 +1462,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 			tabsetId: node.id,
 			type: "selectTab"
 		});
-		if (options?.focus) {
+		if (options?.focus === true) {
 			const tabId = node.children[index]?.id;
 			if (tabId) tabButtonIn(tablistElement, node.id, tabId)?.focus();
 		}
@@ -1308,7 +1594,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (event) => {
-			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setOpen(false);
+			if (event.target instanceof Node && rootRef.current?.contains(event.target) !== true) setOpen(false);
 		};
 		document.addEventListener("pointerdown", handlePointerDown);
 		return () => {
@@ -1361,7 +1647,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 		}
 	};
 	const handleFocusOut = (event) => {
-		if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) return;
+		if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget) === true) return;
 		setOpen(false);
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -1387,7 +1673,9 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			tabIndex: -1,
 			children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
 				"data-dashfoo": "tab-overflow-item",
-				onClick: () => handleSelect(item.id),
+				onClick: () => {
+					handleSelect(item.id);
+				},
 				ref: (node) => {
 					itemRefs.current[index] = node;
 				},
@@ -1418,7 +1706,9 @@ const overflowingIds = (tablist) => {
 	const box = tablist.getBoundingClientRect();
 	return [...tablist.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => {
 		const rect = tab.getBoundingClientRect();
-		return (rect.right > box.right + 1 || rect.left < box.left - 1) && tab.dataset.tabId ? [tab.dataset.tabId] : [];
+		const clipped = rect.right > box.right + 1 || rect.left < box.left - 1;
+		const tabId = tab.dataset.tabId;
+		return clipped && tabId !== void 0 && tabId !== "" ? [tabId] : [];
 	});
 };
 const useTabOverflow = (tablist, signature) => {
@@ -1723,7 +2013,9 @@ const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props
 	const rename = useInlineRename({
 		currentName: tab.name,
 		inputRef,
-		onCommit: (name) => commitRename(tab.id, name),
+		onCommit: (name) => {
+			commitRename(tab.id, name);
+		},
 		onDone: cancelRename
 	});
 	const refCallback = useMemo(() => mergeRefs(inputRef, userRef), [userRef]);
@@ -1963,22 +2255,6 @@ const groupStyle = {
 	minHeight: 0,
 	minWidth: 0
 };
-const WEIGHT_EPSILON = .01;
-const layoutFromWeights = (children, total) => children.reduce((layout, child) => {
-	layout[child.id] = (child.weight ?? 1) / total * 100;
-	return layout;
-}, {});
-const orderedFromLayout = (layout, children) => children.map((child) => layout[child.id] ?? 0);
-const layoutFromOrdered = (sizes, children) => children.reduce((layout, child, index) => {
-	layout[child.id] = sizes[index] ?? 0;
-	return layout;
-}, {});
-const layoutsMatch = (current, expected) => {
-	const currentIds = Object.keys(current);
-	const expectedIds = Object.keys(expected);
-	if (currentIds.length !== expectedIds.length) return false;
-	return expectedIds.every((id) => Math.abs((current[id] ?? NaN) - expected[id]) <= WEIGHT_EPSILON);
-};
 const descendantMinSize = (child, axis, tabsetMinSize) => {
 	const explicit = dimensionToPixels(child.min);
 	if (explicit !== void 0) return explicit;
@@ -2001,89 +2277,30 @@ const RowView = ({ node, renderTabset }) => {
 	const effectiveSnap = node.snap ?? globalSnap;
 	const snapActive = snapEnabled(effectiveSnap);
 	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
-	const total = node.children.reduce((sum, child) => sum + (child.weight ?? 1), 0);
-	const desiredLayout = useMemo(() => layoutFromWeights(node.children, total), [node.children, total]);
-	const groupRef = useRef(null);
-	const groupElement = useRef(null);
-	const syncing = useRef(false);
-	const activeBoundary = useRef(null);
-	const snapping = useRef(false);
-	const snappedBoundaryRef = useRef(null);
-	const [snappedBoundary, setSnappedBoundary] = useState(null);
-	const setHighlight = (boundary) => {
-		if (boundary !== snappedBoundaryRef.current) {
-			snappedBoundaryRef.current = boundary;
-			setSnappedBoundary(boundary);
-		}
-	};
-	const setSnapTransition = (active) => {
-		const element = groupElement.current;
-		if (!element) return;
-		if (active) element.dataset.dashfooSnapping = "true";
-		else delete element.dataset.dashfooSnapping;
-	};
-	useLayoutEffect(() => {
-		const group = groupRef.current;
-		if (!group) return;
-		const current = group.getLayout();
-		if (!(Object.keys(current).length === Object.keys(desiredLayout).length && Object.keys(desiredLayout).every((id) => id in current)) || layoutsMatch(current, desiredLayout)) return;
-		syncing.current = true;
-		group.setLayout(desiredLayout);
-		const frame = requestAnimationFrame(() => {
-			syncing.current = false;
-		});
-		return () => {
-			cancelAnimationFrame(frame);
-			syncing.current = false;
-		};
-	}, [desiredLayout]);
-	const handleLayoutChange = (layout) => {
-		if (snapping.current || syncing.current || !resizableSplits) return;
-		if (effectiveSnap === null || !snapActive) return;
-		const boundary = activeBoundary.current;
-		if (boundary === null) return;
-		const { sizes, snapped } = snapSizes(orderedFromLayout(layout, node.children), boundary, effectiveSnap);
-		setHighlight(snapped ? boundary : null);
-		if (!snapped) {
-			setSnapTransition(false);
-			return;
-		}
-		setSnapTransition(true);
-		const group = groupRef.current;
-		const target = layoutFromOrdered(sizes, node.children);
-		if (!group || layoutsMatch(layout, target)) return;
-		snapping.current = true;
-		group.setLayout(target);
-		snapping.current = false;
-	};
-	const handleLayoutChanged = (layout, meta) => {
-		if (!meta.isUserInteraction) return;
-		if (syncing.current) return;
-		const boundary = activeBoundary.current;
-		activeBoundary.current = null;
-		setHighlight(null);
-		setSnapTransition(false);
-		if (!resizableSplits) return;
-		let weights = node.children.map((child) => layout[child.id] ?? child.weight ?? 1);
-		if (boundary !== null && effectiveSnap !== null && snapActive) weights = snapSizes(weights, boundary, effectiveSnap).sizes;
-		if (!weights.some((weight, index) => Math.abs(weight - (node.children[index]?.weight ?? 1)) > WEIGHT_EPSILON)) return;
-		dispatch({
-			rowId: node.id,
-			type: "adjustSplit",
-			weights
-		});
-	};
+	const total = node.children.reduce((sum, child) => sum + child.weight, 0);
+	const { beginBoundaryDrag, groupRef, onLayoutChange, onLayoutChanged, snappedBoundary } = useSnapResize({
+		children: node.children,
+		onWeightsSettled: (weights) => {
+			dispatch({
+				rowId: node.id,
+				type: "adjustSplit",
+				weights
+			});
+		},
+		resizableSplits,
+		snap: effectiveSnap
+	});
 	return /* @__PURE__ */ jsx(Group, {
 		"data-dashfoo": "row",
+		"data-dashfoo-snapping": snappedBoundary === null ? void 0 : "true",
 		disabled: !resizableSplits,
-		elementRef: groupElement,
 		groupRef,
-		onLayoutChange: snapActive ? handleLayoutChange : void 0,
-		onLayoutChanged: handleLayoutChanged,
+		onLayoutChange: snapActive ? onLayoutChange : void 0,
+		onLayoutChanged,
 		orientation,
 		style: groupStyle,
 		children: node.children.map((child, index) => {
-			const percent = (child.weight ?? 1) / total * 100;
+			const percent = child.weight / total * 100;
 			let min = child.min ? dimensionToSize(child.min) : void 0;
 			if (min === void 0) {
 				const minimum = descendantMinSize(child, node.orientation, tabsetMinSize);
@@ -2095,7 +2312,7 @@ const RowView = ({ node, renderTabset }) => {
 				"data-dashfoo-snapped": snappedBoundary === index - 1 ? "true" : void 0,
 				disabled: !resizableSplits,
 				onPointerDown: snapActive && resizableSplits ? () => {
-					activeBoundary.current = index - 1;
+					beginBoundaryDrag(index - 1);
 				} : void 0
 			}) : null, /* @__PURE__ */ jsx(Panel$1, {
 				defaultSize: `${percent}%`,
@@ -2139,21 +2356,24 @@ const bodyStyle = {
 	minHeight: 0,
 	position: "relative"
 };
-const CHIP_SIZE = {
-	height: 34,
-	width: 168
+const FLOAT_OVERRIDES = {
+	draggableTabsets: false,
+	floatable: false,
+	maximizable: false,
+	maximizedTabsetId: void 0
 };
-const TAP_SLOP = 4;
 const FloatTitleEditor = ({ dispatch, node, onDone }) => {
 	const inputRef = useRef(null);
 	const { handleBlur, handleKeyDown } = useInlineRename({
 		currentName: floatTitle(node),
 		inputRef,
-		onCommit: (name) => dispatch({
-			floatId: node.id,
-			name,
-			type: "renameFloat"
-		}),
+		onCommit: (name) => {
+			dispatch({
+				floatId: node.id,
+				name,
+				type: "renameFloat"
+			});
+		},
 		onDone
 	});
 	return /* @__PURE__ */ jsx("input", {
@@ -2162,7 +2382,9 @@ const FloatTitleEditor = ({ dispatch, node, onDone }) => {
 		defaultValue: floatTitle(node),
 		onBlur: handleBlur,
 		onKeyDown: handleKeyDown,
-		onPointerDown: (event) => event.stopPropagation(),
+		onPointerDown: (event) => {
+			event.stopPropagation();
+		},
 		ref: inputRef,
 		style: titleStyle,
 		type: "text"
@@ -2173,35 +2395,24 @@ const FloatTitle = ({ dispatch, node, renamable }) => {
 	if (renamable && editing) return /* @__PURE__ */ jsx(FloatTitleEditor, {
 		dispatch,
 		node,
-		onDone: () => setEditing(false)
+		onDone: () => {
+			setEditing(false);
+		}
 	});
 	return /* @__PURE__ */ jsx("span", {
 		"data-dashfoo": "float-title",
-		onDoubleClick: renamable ? () => setEditing(true) : void 0,
+		onDoubleClick: renamable ? () => {
+			setEditing(true);
+		} : void 0,
 		style: titleStyle,
 		title: renamable ? "Double-click to rename" : void 0,
 		children: floatTitle(node)
 	});
 };
-const FloatPanel = ({ global, node, onFocus, zIndex }) => {
+const FloatPanel = ({ node, onFocus, zIndex }) => {
 	const dispatch = useLayout((state) => state.dispatch);
-	const closableTabs = useLayout((state) => state.closableTabs);
-	const draggableTabs = useLayout((state) => state.draggableTabs);
 	const editable = useLayout((state) => state.editable);
-	const renamableTabs = useLayout((state) => state.renamableTabs);
-	const resizableSplits = useLayout((state) => state.resizableSplits);
-	const keepMounted = useLayout((state) => state.keepMounted);
-	const renderTab = useLayout((state) => state.renderTab);
-	const renderTabLabel = useLayout((state) => state.renderTabLabel);
-	const renderTabsetToolbar = useLayout((state) => state.renderTabsetToolbar);
-	const snap = useLayout((state) => state.snap);
-	const panelRef = useRef(null);
-	const gestureRef = useRef(null);
-	const latestRef = useRef(node.geometry);
-	const movedRef = useRef(false);
-	const setPanel = (element) => {
-		panelRef.current = element;
-	};
+	const minimized = node.minimized === true;
 	const restore = () => {
 		if (!editable) return;
 		dispatch({
@@ -2210,88 +2421,30 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			type: "setFloatMinimized"
 		});
 	};
-	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;
-		const gesture = {
-			bounds: {
-				height: parent?.clientHeight ?? 0,
-				width: parent?.clientWidth ?? 0
-			},
-			edges: edgeKey ? EDGE_BY_KEY.get(edgeKey) ?? null : null,
-			pointerId: event.pointerId,
-			start: node.geometry,
-			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;
-			if (!gesture.edges) panel.setPointerCapture(gesture.pointerId);
-		}
-		const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
-			...gesture.start,
-			left: gesture.start.left + dx,
-			top: gesture.start.top + dy
-		}, gesture.bounds, node.minimized ? CHIP_SIZE : void 0);
-		latestRef.current = next;
-		panel.style.left = `${next.left}px`;
-		panel.style.top = `${next.top}px`;
-		if (!node.minimized) {
-			panel.style.width = `${next.width}px`;
-			panel.style.height = `${next.height}px`;
-		}
-	};
-	const handlePointerCancel = (event) => {
-		const gesture = gestureRef.current;
-		const panel = panelRef.current;
-		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
-		gestureRef.current = null;
-		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`;
+	const { handlers, ref, style } = useFloatGesture({
+		editable,
+		geometry: node.geometry,
+		minimized,
+		onCommit: (geometry) => {
+			dispatch({
+				floatId: node.id,
+				geometry,
+				type: "moveFloat"
+			});
+		},
+		onTap: () => {
+			if (minimized) restore();
 		}
+	});
+	const { onPointerDown, ...rootHandlers } = handlers;
+	const frameStyle = {
+		...style,
+		pointerEvents: "auto",
+		position: "absolute",
+		zIndex
 	};
-	if (node.minimized) return /* @__PURE__ */ jsxs("button", {
+	if (minimized) return /* @__PURE__ */ jsxs("button", {
+		...rootHandlers,
 		"aria-label": `Restore ${floatTitle(node)} panel`,
 		"data-dashfoo": "float-chip",
 		onKeyDown: (event) => {
@@ -2300,19 +2453,10 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 				restore();
 			}
 		},
-		onPointerCancel: handlePointerCancel,
-		onPointerDown: handlePointerDown,
+		onPointerDown,
 		onPointerDownCapture: onFocus,
-		onPointerMove: handlePointerMove,
-		onPointerUp: handlePointerUp,
-		ref: setPanel,
-		style: {
-			left: node.geometry.left,
-			pointerEvents: "auto",
-			position: "absolute",
-			top: node.geometry.top,
-			zIndex
-		},
+		ref,
+		style: frameStyle,
 		title: floatTitle(node),
 		type: "button",
 		children: [/* @__PURE__ */ jsx(FloatIcon, {}), /* @__PURE__ */ jsx("span", {
@@ -2320,31 +2464,16 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			children: floatTitle(node)
 		})]
 	});
-	const floatModel = {
-		global,
-		layout: node.layout,
-		version: 1
-	};
 	return /* @__PURE__ */ jsxs("div", {
+		...rootHandlers,
 		"data-dashfoo": "float",
-		onPointerCancel: handlePointerCancel,
 		onPointerDownCapture: onFocus,
-		onPointerMove: handlePointerMove,
-		onPointerUp: handlePointerUp,
-		ref: setPanel,
-		style: {
-			height: node.geometry.height,
-			left: node.geometry.left,
-			pointerEvents: "auto",
-			position: "absolute",
-			top: node.geometry.top,
-			width: node.geometry.width,
-			zIndex
-		},
+		ref,
+		style: frameStyle,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				"data-dashfoo": "float-titlebar",
-				onPointerDown: handlePointerDown,
+				onPointerDown,
 				style: editable ? titleBarStyle : {
 					...titleBarStyle,
 					cursor: "default"
@@ -2363,12 +2492,16 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 					editable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 						"aria-label": "Minimize panel",
 						"data-dashfoo": "float-minimize",
-						onClick: () => dispatch({
-							floatId: node.id,
-							minimized: true,
-							type: "setFloatMinimized"
-						}),
-						onPointerDown: (event) => event.stopPropagation(),
+						onClick: () => {
+							dispatch({
+								floatId: node.id,
+								minimized: true,
+								type: "setFloatMinimized"
+							});
+						},
+						onPointerDown: (event) => {
+							event.stopPropagation();
+						},
 						style: dockButtonStyle,
 						title: "Minimize panel",
 						type: "button",
@@ -2376,11 +2509,15 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 					}), /* @__PURE__ */ jsx("button", {
 						"aria-label": "Dock panel back into the main layout",
 						"data-dashfoo": "float-dock",
-						onClick: () => dispatch({
-							floatId: node.id,
-							type: "dockFloat"
-						}),
-						onPointerDown: (event) => event.stopPropagation(),
+						onClick: () => {
+							dispatch({
+								floatId: node.id,
+								type: "dockFloat"
+							});
+						},
+						onPointerDown: (event) => {
+							event.stopPropagation();
+						},
 						style: dockButtonStyle,
 						title: "Dock panel back",
 						type: "button",
@@ -2391,29 +2528,15 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			/* @__PURE__ */ jsx("div", {
 				"data-dashfoo": "float-body",
 				style: bodyStyle,
-				children: /* @__PURE__ */ jsx(LayoutRoot, {
-					closableTabs,
-					dispatch,
-					draggableTabs,
-					draggableTabsets: false,
-					editable,
-					floatable: false,
-					keepMounted,
-					maximizable: false,
-					model: floatModel,
-					renamableTabs,
-					renderTab,
-					renderTabLabel,
-					renderTabsetToolbar,
-					resizableSplits,
-					snap: snap ?? void 0,
+				children: /* @__PURE__ */ jsx(LayoutOverrides, {
+					overrides: FLOAT_OVERRIDES,
 					children: /* @__PURE__ */ jsx(DragProvider, { children: /* @__PURE__ */ jsx(RowView, { node: node.layout }) })
 				})
 			}),
 			editable && RESIZE_HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
 				"data-dashfoo": "float-resize",
 				"data-edge": handle.key,
-				onPointerDown: handlePointerDown,
+				onPointerDown,
 				style: {
 					position: "absolute",
 					touchAction: "none",
@@ -2433,26 +2556,24 @@ const overlayStyle = {
 	position: "fixed",
 	zIndex: 1
 };
-const FloatOverlay = ({ floats, global }) => {
+const FloatOverlay = ({ floats }) => {
 	const [topId, setTopId] = useState(null);
 	if (floats.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-dashfoo": "float-overlay",
 		style: overlayStyle,
 		children: floats.map((node) => /* @__PURE__ */ jsx(FloatPanel, {
-			global,
 			node,
-			onFocus: () => setTopId(node.id),
+			onFocus: () => {
+				setTopId(node.id);
+			},
 			zIndex: node.id === topId ? 2 : 1
 		}, node.id))
 	});
 };
-const FloatLayer = ({ children, floats, global }) => /* @__PURE__ */ jsxs(FloatLayerContext.Provider, {
+const FloatLayer = ({ children, floats }) => /* @__PURE__ */ jsxs(FloatLayerContext.Provider, {
 	value: true,
-	children: [children, /* @__PURE__ */ jsx(FloatOverlay, {
-		floats,
-		global
-	})]
+	children: [children, /* @__PURE__ */ jsx(FloatOverlay, { floats })]
 });
 
 //#endregion
@@ -2499,48 +2620,62 @@ const DashfooLayout = forwardRef((props, ref) => {
 	});
 	const hasSharedManager = useContext(SharedDragManagerContext) !== null;
 	useImperativeHandle(ref, () => ({
-		addTab: (tab, target) => store.dispatch({
-			index: target.index,
-			location: target.location ?? "center",
-			tab,
-			targetId: target.targetId,
-			type: "addNode"
-		}),
+		addTab: (tab, target) => {
+			store.dispatch({
+				index: target.index,
+				location: target.location ?? "center",
+				tab,
+				targetId: target.targetId,
+				type: "addNode"
+			});
+		},
 		canRedo: store.canRedo,
 		canUndo: store.canUndo,
-		closeTab: (tabId) => store.dispatch({
-			tabId,
-			type: "deleteTab"
-		}),
+		closeTab: (tabId) => {
+			store.dispatch({
+				tabId,
+				type: "deleteTab"
+			});
+		},
 		dispatch: store.dispatch,
-		dockFloat: (floatId) => store.dispatch({
-			floatId,
-			type: "dockFloat"
-		}),
-		floatTab: (tabId) => store.dispatch({
-			tabId,
-			type: "floatTab"
-		}),
+		dockFloat: (floatId) => {
+			store.dispatch({
+				floatId,
+				type: "dockFloat"
+			});
+		},
+		floatTab: (tabId) => {
+			store.dispatch({
+				tabId,
+				type: "floatTab"
+			});
+		},
 		getModel: () => store.model,
-		maximizeTabset: (tabsetId) => store.dispatch({
-			tabsetId,
-			type: "setMaximizedTabset"
-		}),
+		maximizeTabset: (tabsetId) => {
+			store.dispatch({
+				tabsetId,
+				type: "setMaximizedTabset"
+			});
+		},
 		redo: store.redo,
-		renameTab: (tabId, name) => store.dispatch({
-			name,
-			tabId,
-			type: "renameTab"
-		}),
+		renameTab: (tabId, name) => {
+			store.dispatch({
+				name,
+				tabId,
+				type: "renameTab"
+			});
+		},
 		resetLayout: () => {
 			persistence.clear();
 			if (defaultModel !== void 0) store.setModel(defaultModel);
 		},
-		selectTab: (tabsetId, index) => store.dispatch({
-			index,
-			tabsetId,
-			type: "selectTab"
-		}),
+		selectTab: (tabsetId, index) => {
+			store.dispatch({
+				index,
+				tabsetId,
+				type: "selectTab"
+			});
+		},
 		undo: store.undo
 	}), [
 		defaultModel,
@@ -2566,24 +2701,18 @@ const DashfooLayout = forwardRef((props, ref) => {
 		responsive?.orientation,
 		store.model
 	]);
-	const storeDispatch = store.dispatch;
-	const dispatch = useCallback((action) => {
-		if (isCompact && action.type === "adjustSplit") return;
-		storeDispatch(action);
-	}, [isCompact, storeDispatch]);
-	const maximized = view.maximizedTabsetId ? findTabset(view, view.maximizedTabsetId) : void 0;
+	const maximized = view.maximizedTabsetId === void 0 ? void 0 : findTabset(view, view.maximizedTabsetId);
 	const tree = /* @__PURE__ */ jsx(Layout.FloatLayer, {
-		floats: store.model.floats ?? [],
-		global: store.model.global,
+		floats: store.model.floats,
 		children: /* @__PURE__ */ jsx(Layout.DragLayer, { children: maximized ? /* @__PURE__ */ jsx(Layout.Tabset, { node: maximized }) : /* @__PURE__ */ jsx(Layout.Rows, { node: view.layout }) })
 	});
 	return /* @__PURE__ */ jsx(Layout.Root, {
 		closableTabs,
-		dispatch,
-		draggableTabs: isCompact ? false : draggableTabs,
-		draggableTabsets: isCompact ? false : draggableTabsets,
+		dispatch: store.dispatch,
+		draggableTabs,
+		draggableTabsets,
 		editable,
-		floatable: isCompact ? false : floatable,
+		floatable,
 		keepMounted,
 		maximizable,
 		model: view,
@@ -2591,7 +2720,8 @@ const DashfooLayout = forwardRef((props, ref) => {
 		renderTab,
 		renderTabLabel,
 		renderTabsetToolbar,
-		resizableSplits: isCompact ? false : resizableSplits,
+		resizableSplits,
+		restructurable: !isCompact,
 		rootRef: containerRef,
 		snap,
 		children: hasSharedManager ? tree : /* @__PURE__ */ jsx(DashfooDragProvider, { children: tree })