@dashfoo/react 0.6.4 → 0.8.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, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, resolveSnapGrid, 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,11 @@ 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 intent is rebuilt every pointer move, so readers compare by value. */
 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 +188,24 @@ const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
 		id: `external-${id}`
 	}, disabled, label);
 };
+/**
+* Reads the root's actor, so it works from an overlay mounted beside the layout
+* rather than inside a drag layer. Outside a provider it reports the empty state
+* instead of throwing.
+*/
 const useDragSubject = () => {
-	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.subject);
+	const actorRef = useContext(DragRootContext)?.actorRef;
+	return useSelector(actorRef, (snapshot) => {
+		const drag = snapshot?.context.drag;
+		return drag?.kind === "dragging" ? drag.subject : null;
+	});
 };
 const useDropIntent = () => {
-	return useStore(useContext(DragSubjectStoreContext) ?? nullSubjectStore, (state) => state.intent);
+	const actorRef = useContext(DragRootContext)?.actorRef;
+	return useSelector(actorRef, (snapshot) => {
+		const drag = snapshot?.context.drag;
+		return drag?.kind === "dragging" ? drag.drop?.intent ?? null : null;
+	}, sameDropIntent);
 };
 
 //#endregion
@@ -244,28 +251,29 @@ const usePersistence = (config, defaultModel) => {
 	useEffect(() => {
 		configRef.current = config;
 	});
-	const [initialModel] = useState(() => {
-		if (config === null || defaultModel === void 0) return defaultModel;
+	const [load] = useState(() => {
+		if (config === null) return { kind: "absent" };
 		const raw = config.storage.getItem(config.key);
-		if (raw === null) return defaultModel;
+		if (raw === null) return { kind: "absent" };
 		try {
-			return fromJSON(raw);
-		} catch {
-			return defaultModel;
+			return {
+				kind: "loaded",
+				model: fromJSON(raw)
+			};
+		} catch (error) {
+			return {
+				error,
+				kind: "corrupt"
+			};
 		}
 	});
+	const initialModel = load.kind === "loaded" && defaultModel !== void 0 ? load.model : defaultModel;
 	useEffect(() => {
 		const current = configRef.current;
-		if (current === null) return;
-		const raw = current.storage.getItem(current.key);
-		if (raw === null) return;
-		try {
-			fromJSON(raw);
-		} catch (error) {
-			console.warn("[dashfoo] discarding unreadable persisted layout", error);
-			current.storage.removeItem(current.key);
-		}
-	}, []);
+		if (current === null || load.kind !== "corrupt") return;
+		console.warn("[dashfoo] discarding unreadable persisted layout", load.error);
+		current.storage.removeItem(current.key);
+	}, [load]);
 	const loadedKey = useRef(config?.key);
 	useEffect(() => {
 		if (config !== null && config.key !== loadedKey.current) {
@@ -393,21 +401,33 @@ 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 CONTROLLED_SET_MODEL_MESSAGE = "setModel (and resetLayout) do nothing while `model` is controlled; set the model you own instead";
+const CONTROLLED_MODE_SWITCH_MESSAGE = "`model` was added or removed after mount; a layout is controlled or uncontrolled for its whole life, so the first render wins. Remount (key=…) to switch";
+const CONTROLLED_WITH_DEFAULT_MESSAGE = "`model` and `defaultModel` were both passed; `model` wins and `defaultModel` (and `persist`) are ignored";
+/** The mode is latched on the first render; running both sources leaves the
+* unread one describing a document nobody rendered. */
 const useDashfooStore = (options) => {
 	const { defaultModel, model: controlledModel, onAction, onActiveTabsetChange, onMaximizedTabsetChange, onModelChange } = options;
 	const initialModel = controlledModel ?? defaultModel;
 	if (initialModel === void 0) throw new Error("useDashfooStore requires either a `model` or a `defaultModel`.");
+	const [controlled] = useState(() => controlledModel !== void 0);
+	if (controlled !== (controlledModel !== void 0)) warnOnce("controlled-mode-switch", CONTROLLED_MODE_SWITCH_MESSAGE);
+	if (controlled && defaultModel !== void 0) warnOnce("controlled-with-default", CONTROLLED_WITH_DEFAULT_MESSAGE);
 	const actorRef = useActorRef(dashfooMachine, { input: { model: normalize(initialModel) } });
 	const history = useSelector(actorRef, (snapshot) => snapshot.context.history);
-	useEffect(() => {
-		if (controlledModel !== void 0) actorRef.send({
-			model: normalize(controlledModel),
-			type: "SET_MODEL"
-		});
-	}, [actorRef, controlledModel]);
-	const model = controlledModel ?? history.present;
+	const model = useMemo(() => controlledModel === void 0 ? history.present : normalize(controlledModel), [controlledModel, history.present]);
 	const notify = useCallback((before, after, action) => {
 		if (Object.is(before, after)) return;
 		onModelChange?.(after, action);
@@ -421,61 +441,62 @@ 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);
+		if (controlled) {
+			notify(model, reducer(model, resolved), resolved);
+			return;
+		}
+		const before = actorRef.getSnapshot().context.history.present;
+		actorRef.send({
+			action: resolved,
+			type: "DISPATCH"
+		});
+		notify(before, actorRef.getSnapshot().context.history.present, resolved);
 	}, [
 		actorRef,
-		controlledModel,
+		controlled,
+		model,
 		notify,
 		onAction
 	]);
 	const undo = useCallback(() => {
-		if (controlledModel !== void 0) return;
+		if (controlled) {
+			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;
-		notify(before, after);
+		notify(before, actorRef.getSnapshot().context.history.present);
 	}, [
 		actorRef,
-		controlledModel,
+		controlled,
 		notify
 	]);
 	const redo = useCallback(() => {
-		if (controlledModel !== void 0) return;
+		if (controlled) {
+			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;
-		notify(before, after);
+		notify(before, actorRef.getSnapshot().context.history.present);
 	}, [
 		actorRef,
-		controlledModel,
+		controlled,
 		notify
 	]);
 	const setModel = useCallback((next) => {
+		if (controlled) {
+			warnOnce("controlled-set-model", CONTROLLED_SET_MODEL_MESSAGE);
+			return;
+		}
 		actorRef.send({
 			model: normalize(next),
 			type: "SET_MODEL"
 		});
-	}, [actorRef]);
+	}, [actorRef, controlled]);
 	return useMemo(() => ({
-		canRedo: () => canRedo(actorRef.getSnapshot().context.history),
-		canUndo: () => canUndo(actorRef.getSnapshot().context.history),
+		canRedo: () => !controlled && canRedo(actorRef.getSnapshot().context.history),
+		canUndo: () => !controlled && canUndo(actorRef.getSnapshot().context.history),
 		dispatch,
 		model,
 		redo,
@@ -483,6 +504,7 @@ const useDashfooStore = (options) => {
 		undo
 	}), [
 		actorRef,
+		controlled,
 		dispatch,
 		model,
 		redo,
@@ -491,6 +513,46 @@ const useDashfooStore = (options) => {
 	]);
 };
 
+//#endregion
+//#region src/lib/drag-subject.ts
+const isTabFactory = (value) => typeof value === "function";
+/** Beside the manager wiring, not the layer adapter: `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;
@@ -517,7 +579,7 @@ const shouldAllowDrop = (draggedId, targetId, tabIds) => {
 };
 
 //#endregion
-//#region src/components/drag-overlays.tsx
+//#region src/components/drag-preview-overlay.tsx
 const overlayBase = {
 	boxSizing: "border-box",
 	pointerEvents: "none",
@@ -541,9 +603,10 @@ const lineStyle = (zone) => ({
 });
 const tabItemRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab-item\"]")].flatMap((item) => item.querySelector("[data-dashfoo=\"tab\"]")?.dataset.tabId === excludeId ? [] : [item.getBoundingClientRect()]);
 const DockIndicator = ({ actorRef, getTabsetElement }) => {
-	const intent = useSelector(actorRef, (snapshot) => snapshot.context.intent);
-	const draggedId = useSelector(actorRef, (snapshot) => snapshot.context.subject?.id);
-	if (!intent) return null;
+	const drag = useSelector(actorRef, (snapshot) => snapshot.context.drag);
+	if (drag.kind !== "dragging" || drag.drop === null) return null;
+	const { intent } = drag.drop;
+	const draggedId = drag.subject.id;
 	const element = getTabsetElement(intent.targetId);
 	if (!element) return null;
 	const zIndex = element.closest("[data-dashfoo=\"float\"]") ? overlayBase.zIndex : "auto";
@@ -599,12 +662,13 @@ const DragPreviewOverlay = ({ manager }) => {
 			offEnd();
 		};
 	}, [manager]);
+	const attachOverlay = useCallback((element) => {
+		const feedback = manager.registry.plugins.get(Feedback);
+		if (feedback) feedback.overlay = element ?? void 0;
+	}, [manager]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-dnd-overlay": "",
-		ref: useCallback((element) => {
-			const feedback = manager.registry.plugins.get(Feedback);
-			if (feedback) feedback.overlay = element ?? void 0;
-		}, [manager]),
+		ref: attachOverlay,
 		children: chip === null ? null : /* @__PURE__ */ jsx("div", {
 			"data-dashfoo": "drag-preview",
 			style: {
@@ -620,166 +684,45 @@ const DragPreviewOverlay = ({ manager }) => {
 };
 
 //#endregion
-//#region src/components/drag-root.tsx
+//#region src/components/dashfoo-drag-provider.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()]);
-const intentForTabset = (id, element, point, draggedId) => {
-	const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
-	if (strip && pointInRect(point, strip.getBoundingClientRect())) return {
-		index: insertionIndex(tabRects(strip, draggedId), point.x),
-		location: "center",
-		targetId: id
-	};
-	const target = resolveDockTarget(point, element.getBoundingClientRect());
-	const location = target.kind === "tab" ? "center" : `split-${target.edge}`;
-	if (location === "center" && strip) return {
-		index: tabRects(strip, draggedId).length,
-		location,
-		targetId: id
-	};
-	return {
-		location,
-		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);
-	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 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;
-			const commit = onCommitRef.current ?? 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);
-		});
+	const [scopes] = useState(() => /* @__PURE__ */ new Map());
+	const registerScope = useCallback((scope) => {
+		scopes.set(scope.layerId, scope);
 		return () => {
-			subscription.unsubscribe();
+			scopes.delete(scope.layerId);
 		};
-	}, [actorRef, layoutStore]);
+	}, [scopes]);
 	useEffect(() => {
-		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;
-			const intent = intentForTabset(targetId, element, point, draggedId);
-			if (!(splitDockRef.current ?? layoutStore?.getState().splitDock ?? true) && intent.location.startsWith("split-")) return {
-				location: "center",
-				targetId
+		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
 			};
-			return intent;
+		};
+		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);
+			actorRef.send({
+				drop: intent === null || found === null ? null : {
+					intent,
+					scope: found.scope.layerId
+				},
+				type: "OVER"
+			});
 		};
 		const handleStart = (event) => {
 			const source = event.operation.source;
@@ -794,26 +737,22 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 				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"
+		let frame = null;
+		const scheduleResolve = () => {
+			if (frame !== null) return;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				syncIntent();
 			});
 		};
-		const handleMove = () => {
-			syncIntent();
-		};
-		const handleCollision = () => {
-			syncIntent();
+		const cancelPendingResolve = () => {
+			if (frame !== null) {
+				cancelAnimationFrame(frame);
+				frame = null;
+			}
 		};
 		const handleEnd = (event) => {
+			cancelPendingResolve();
 			if (event.canceled) {
 				actorRef.send({ type: "CANCEL" });
 				return;
@@ -821,11 +760,16 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 			syncIntent();
 			actorRef.send({ type: "DROP" });
 		};
+		const commitSubscription = actorRef.on("COMMIT", (emitted) => {
+			scopes.get(emitted.scope)?.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 offMove = manager.monitor.addEventListener("dragmove", scheduleResolve);
+		const offCollision = manager.monitor.addEventListener("collision", scheduleResolve);
 		const offEnd = manager.monitor.addEventListener("dragend", handleEnd);
 		return () => {
+			cancelPendingResolve();
+			commitSubscription.unsubscribe();
 			offStart();
 			offMove();
 			offCollision();
@@ -833,114 +777,144 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 		};
 	}, [
 		actorRef,
-		layoutStore,
 		manager,
-		ownerId
+		scopes
 	]);
-	const contextValue = useMemo(() => ({
-		layerId: ownerId,
-		manager
-	}), [manager, ownerId]);
-	return /* @__PURE__ */ jsx(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 })
-			]
+	const rootValue = useMemo(() => ({
+		actorRef,
+		manager,
+		registerScope
+	}), [
+		actorRef,
+		manager,
+		registerScope
+	]);
+	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
+		value: manager,
+		children: /* @__PURE__ */ jsxs(DragRootContext.Provider, {
+			value: rootValue,
+			children: [children, /* @__PURE__ */ jsx(DragPreviewOverlay, { manager })]
 		})
 	});
 };
 
 //#endregion
-//#region src/components/float-context.ts
-const FloatLayerContext = createContext(false);
-const useHasFloatLayer = () => useContext(FloatLayerContext);
+//#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/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();
+//#region src/components/drag-provider.tsx
+const MISSING_ROOT = "[dashfoo] DashfooDragProvider unmounted while its layout is still mounted; keep the provider above the layout or remount the layout";
+/** One DOM pass per pointer move, where resolving a drop used to run three. */
+const measureStrip = (element, excludeId) => {
+	const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
+	if (!strip) return null;
+	const tabIds = [];
+	const tabRects = [];
+	for (const tab of strip.querySelectorAll("[data-dashfoo=\"tab\"]")) {
+		const tabId = tab.dataset.tabId ?? "";
+		tabIds.push(tabId);
+		if (tabId !== excludeId) tabRects.push(tab.getBoundingClientRect());
+	}
+	return {
+		rect: strip.getBoundingClientRect(),
+		tabIds,
+		tabRects
 	};
-	const handleKeyDown = (event) => {
-		if (event.key === "Enter") {
-			done.current = true;
-			commit(event.currentTarget.value);
-		} else if (event.key === "Escape") {
-			done.current = true;
-			onDone();
-		}
+};
+const intentForTabset = (id, element, point, strip) => {
+	if (strip && pointInRect(point, strip.rect)) return {
+		index: insertionIndex(strip.tabRects, point.x),
+		location: "center",
+		targetId: id
 	};
-	const handleBlur = (event) => {
-		if (done.current) return;
-		done.current = true;
-		commit(event.currentTarget.value);
+	const location = resolveDockTarget(point, element.getBoundingClientRect());
+	if (location === "center" && strip) return {
+		index: strip.tabRects.length,
+		location,
+		targetId: id
 	};
 	return {
-		handleBlur,
-		handleKeyDown
+		location,
+		targetId: id
 	};
 };
-
-//#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
+/** One drag layer (the main tree, or one float). Holds no drag state of its own. */
+const DragScope = ({ children, onCommit, splitDock }) => {
+	const root = useContext(DragRootContext);
+	const layoutStore = useContext(LayoutStoreContext);
+	const layerId = useId();
+	const manager = root?.manager;
+	const getTabsetElement = useCallback((id) => {
+		const element = manager?.registry.droppables.get(`${layerId}:${id}`)?.element;
+		return element instanceof HTMLElement ? element : void 0;
+	}, [layerId, manager]);
+	const scope = useMemo(() => ({
+		commit: (action) => {
+			if (layoutStore?.getState().editable === false) return;
+			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(action);
+		},
+		layerId,
+		resolveIntent: (targetId, element, point, draggedId) => {
+			if (layoutStore?.getState().editable === false) return null;
+			const strip = measureStrip(element, draggedId);
+			if (!shouldAllowDrop(draggedId, targetId, strip?.tabIds ?? [])) return null;
+			const intent = intentForTabset(targetId, element, point, strip);
+			if (!(splitDock ?? layoutStore?.getState().splitDock ?? true) && splitEdge(intent.location) !== void 0) return {
+				location: "center",
+				targetId
+			};
+			return intent;
+		}
+	}), [
+		layerId,
+		layoutStore,
+		onCommit,
+		splitDock
+	]);
+	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: [children, /* @__PURE__ */ jsx(DockIndicator, {
+			actorRef: contextValue.actorRef,
+			getTabsetElement
+		})]
 	});
 };
-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
-	};
+/**
+* Mounts its own root when there is none above it. Decided on the first render:
+* 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/components/float-resize-handles.ts
 const EDGE_THICKNESS = 12;
@@ -1061,122 +1035,527 @@ const RESIZE_HANDLES = [
 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;
-const rootStyle = {
-	display: "flex",
-	height: "100%",
-	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 global = model.global;
-	const snapshot = {
-		closableTabs: editable && closableTabs && global.tabEnableClose !== false,
-		dispatch,
-		draggableTabs: editable && draggableTabs && global.tabEnableDrag !== false,
-		draggableTabsets: editable && draggableTabsets,
-		editable,
-		floatable: editable && floatable,
-		keepMounted,
-		maximizable: maximizable && global.tabSetEnableMaximize !== false,
-		maximizedTabsetId: model.maximizedTabsetId,
-		renamableTabs: editable && renamableTabs && global.tabEnableRename !== false,
-		renderTab,
-		renderTabLabel,
-		renderTabsetToolbar,
-		resizableSplits: editable && resizableSplits && global.enableSplitResize !== false,
-		snap: snap ?? global.snap ?? null,
-		splitDock: global.enableSplitDock !== false,
-		tabLocation: global.tabLocation ?? "top",
-		tabsetMinSize: global.tabSetMinSize ?? DEFAULT_TABSET_MIN_SIZE,
-		tabStripEnabled: global.tabSetEnableTabStrip !== false
+//#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))
 	};
-	const [store] = useState(() => createLayoutStore(snapshot));
-	useLayoutEffect(() => {
-		store.setState(snapshot);
+	return clampToBounds(seeded, {
+		height: window.innerHeight,
+		width: window.innerWidth
 	});
-	const layoutStyle = global.splitterSize === void 0 ? {
-		...rootStyle,
-		...style
-	} : {
-		...rootStyle,
-		"--dashfoo-splitter-size": `${global.splitterSize}px`,
-		...style
+};
+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
 	};
-	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
-		value: store,
-		children: /* @__PURE__ */ jsx("div", {
-			...props,
-			"data-dashfoo": "layout",
-			ref: rootRef,
-			style: layoutStyle,
-			children
-		})
-	});
 };
 
 //#endregion
-//#region src/lib/tab-ids.ts
-const tabDomId = (tabsetId, tabId) => `dashfoo-tab-${tabsetId}-${tabId}`;
-const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
-
-//#endregion
-//#region src/components/tabset/tabset-store.ts
-const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
-const createTabsetStore = (initial) => createStore((set, get) => ({
-	...initial,
-	cancelRename: () => {
-		set({ editingTabId: null });
-	},
-	closeTab: (tabId) => {
-		set({ restoreFocus: true });
-		get().dispatch({
-			tabId,
-			type: "deleteTab"
-		});
-	},
-	commitRename: (tabId, value) => {
-		set({ editingTabId: null });
-		const { node, renameTab } = get();
-		const trimmed = value.trim();
-		const current = node.children.find((tab) => tab.id === tabId)?.name;
-		if (trimmed && trimmed !== current) renameTab(tabId, trimmed);
-	},
-	editingTabId: null,
-	overflowItems: [],
-	registerRenameInput: () => {
-		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
-		return () => {
-			set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+//#region src/hooks/use-float-gesture.ts
+const CHIP_SIZE = {
+	height: 34,
+	width: 168
+};
+const TAP_SLOP = 4;
+/** Writes inline style and dispatches only on pointer-up: routing every move
+* through the model would re-render the whole tree behind the float. */
+const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) => {
+	const panelRef = useRef(null);
+	const gestureRef = useRef(null);
+	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);
+		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,
+			latest: geometry,
+			moved: false,
+			pointerId: event.pointerId,
+			start: geometry,
+			startX: event.clientX,
+			startY: event.clientY
 		};
-	},
-	registerTablist: (element) => {
-		if (element) {
-			const current = get().tablistElement;
-			if (current && current !== element) warnOnce(`duplicate-tablist-${get().node.id}`, "more than one <Tabset.Tablist> under the same <Tabset.Root>; the last one wins for keyboard focus and overflow");
-			set({ tablistElement: element });
+		gestureRef.current = gesture;
+		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 (!gesture.moved) {
+			onTap();
 			return;
 		}
-		set({ tablistElement: null });
-	},
-	renameInputCount: 0,
-	renameTab: (tabId, name) => {
-		get().dispatch({
-			name,
-			tabId,
-			type: "renameTab"
-		});
-	},
-	restoreFocus: false,
-	selectOverflowTab: (tabId) => {
-		const { dispatch, node, tablistElement } = get();
-		const index = node.children.findIndex((tab) => tab.id === tabId);
-		if (index === -1) return;
-		dispatch({
-			index,
-			tabsetId: node.id,
-			type: "selectTab"
+		onCommit(gesture.latest);
+	};
+	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 (!gesture.moved) {
+			if (Math.hypot(dx, dy) <= TAP_SLOP) return;
+			gesture.moved = 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);
+		gesture.latest = 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 (!gesture.moved) 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/close-icon.tsx
+const iconStyle = { pointerEvents: "none" };
+const Icon = ({ children }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "12",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	style: iconStyle,
+	viewBox: "0 0 24 24",
+	width: "12",
+	children
+});
+const CloseIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] });
+const GripIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "5",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "19",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "19",
+		cy: "19",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("circle", {
+		cx: "5",
+		cy: "19",
+		r: "1"
+	})
+] });
+const MaximizeIcon = ({ maximized }) => maximized ? /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "m14 10 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M20 10h-6V4" }),
+	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M4 14h6v6" })
+] }) : /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+	/* @__PURE__ */ jsx("path", { d: "m21 3-7 7" }),
+	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+	/* @__PURE__ */ jsx("path", { d: "M9 21H3v-6" })
+] });
+const FloatIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("rect", {
+	height: "14",
+	rx: "2",
+	width: "18",
+	x: "3",
+	y: "6"
+}), /* @__PURE__ */ jsx("path", { d: "M3 10h18" })] });
+const MinimizeIcon = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+const DockIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" }),
+	/* @__PURE__ */ jsx("path", { d: "M11 8 7 12l4 4" }),
+	/* @__PURE__ */ jsx("path", { d: "M7 12h10" })
+] });
+
+//#endregion
+//#region src/components/layout-root.tsx
+const DEFAULT_TABSET_MIN_SIZE = 320;
+const rootStyle = {
+	display: "flex",
+	height: "100%",
+	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, restructurable = true, rootRef, snap, style, ...props }) => {
+	const global = model.global;
+	const snapshot = {
+		closableTabs: editable && closableTabs && global.tabEnableClose !== false,
+		dispatch,
+		draggableTabs: editable && restructurable && draggableTabs && global.tabEnableDrag !== false,
+		draggableTabsets: editable && restructurable && draggableTabsets,
+		editable,
+		floatable: editable && restructurable && floatable,
+		keepMounted,
+		maximizable: maximizable && global.tabSetEnableMaximize !== false,
+		maximizedTabsetId: model.maximizedTabsetId,
+		renamableTabs: editable && renamableTabs && global.tabEnableRename !== false,
+		renderTab,
+		renderTabLabel,
+		renderTabsetToolbar,
+		resizableSplits: editable && restructurable && resizableSplits && global.enableSplitResize !== false,
+		snap: snap ?? global.snap ?? null,
+		splitDock: global.enableSplitDock !== false,
+		tabLocation: global.tabLocation ?? "top",
+		tabsetMinSize: global.tabSetMinSize ?? DEFAULT_TABSET_MIN_SIZE,
+		tabStripEnabled: global.tabSetEnableTabStrip !== false
+	};
+	const [store] = useState(() => createLayoutStore(snapshot));
+	useLayoutEffect(() => {
+		store.setState(snapshot);
+	});
+	const layoutStyle = global.splitterSize === void 0 ? {
+		...rootStyle,
+		...style
+	} : {
+		...rootStyle,
+		"--dashfoo-splitter-size": `${global.splitterSize}px`,
+		...style
+	};
+	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-dashfoo": "layout",
+			ref: rootRef,
+			style: layoutStyle,
+			children
+		})
+	});
+};
+/**
+* Republishes the parent store with overrides applied rather than re-deriving
+* flags, 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",
+			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}`;
+const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
+
+//#endregion
+//#region src/components/tabset/tabset-store.ts
+const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
+const createTabsetStore = (initial) => createStore((set, get) => ({
+	...initial,
+	cancelRename: () => {
+		set({ editingTabId: null });
+	},
+	closeTab: (tabId) => {
+		set({ pendingCloseTabId: tabId });
+		get().dispatch({
+			tabId,
+			type: "deleteTab"
+		});
+	},
+	commitRename: (tabId, value) => {
+		set({ editingTabId: null });
+		const { node, renameTab } = get();
+		const trimmed = value.trim();
+		const current = node.children.find((tab) => tab.id === tabId)?.name;
+		if (trimmed && trimmed !== current) renameTab(tabId, trimmed);
+	},
+	editingTabId: null,
+	overflowItems: [],
+	pendingCloseTabId: null,
+	registerRenameInput: () => {
+		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
+		return () => {
+			set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+		};
+	},
+	registerTablist: (element) => {
+		if (element) {
+			const current = get().tablistElement;
+			if (current && current !== element) warnOnce(`duplicate-tablist-${get().node.id}`, "more than one <Tabset.Tablist> under the same <Tabset.Root>; the last one wins for keyboard focus and overflow");
+			set({ tablistElement: element });
+			return;
+		}
+		set({ tablistElement: null });
+	},
+	renameInputCount: 0,
+	renameTab: (tabId, name) => {
+		get().dispatch({
+			name,
+			tabId,
+			type: "renameTab"
+		});
+	},
+	selectOverflowTab: (tabId) => {
+		const { dispatch, node, tablistElement } = get();
+		const index = node.children.findIndex((tab) => tab.id === tabId);
+		if (index === -1) return;
+		dispatch({
+			index,
+			tabsetId: node.id,
+			type: "selectTab"
 		});
 		tabButtonIn(tablistElement, node.id, tabId)?.scrollIntoView({
 			block: "nearest",
@@ -1282,7 +1661,7 @@ const TabsetContent = ({ children, style, ...props }) => {
 };
 
 //#endregion
-//#region src/components/tab-overflow.tsx
+//#region src/components/tab-overflow-menu.tsx
 const OverflowIcon = () => /* @__PURE__ */ jsxs("svg", {
 	"aria-hidden": "true",
 	fill: "currentColor",
@@ -1370,8 +1749,6 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			case "Escape":
 				event.preventDefault();
 				closeAndReturnFocus();
-				break;
-			default: break;
 		}
 	};
 	const handleFocusOut = (event) => {
@@ -1415,16 +1792,93 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 		}) : null]
 	});
 };
-
-//#endregion
-//#region src/components/tabset/tabset-overflow.tsx
-const TabsetOverflowMenu = () => {
-	const overflowItems = useTabset((state) => state.overflowItems);
-	const selectOverflowTab = useTabset((state) => state.selectOverflowTab);
-	if (overflowItems.length === 0) return null;
-	return /* @__PURE__ */ jsx(TabOverflowMenu, {
-		items: overflowItems,
-		onSelect: selectOverflowTab
+
+//#endregion
+//#region src/components/tabset/tabset-overflow-menu.tsx
+const TabsetOverflowMenu = () => {
+	const overflowItems = useTabset((state) => state.overflowItems);
+	const selectOverflowTab = useTabset((state) => state.selectOverflowTab);
+	if (overflowItems.length === 0) return null;
+	return /* @__PURE__ */ jsx(TabOverflowMenu, {
+		items: overflowItems,
+		onSelect: selectOverflowTab
+	});
+};
+
+//#endregion
+//#region src/lib/merge-refs.ts
+const applyRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const mergeRefs = (...refs) => (value) => {
+	for (const ref of refs) applyRef(ref, value);
+};
+
+//#endregion
+//#region src/components/tabset/tabset-rename-input.tsx
+const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props }) => {
+	const { tab } = useTab();
+	const cancelRename = useTabset((state) => state.cancelRename);
+	const commitRename = useTabset((state) => state.commitRename);
+	const inputRef = useRef(null);
+	const rename = useInlineRename({
+		currentName: tab.name,
+		inputRef,
+		onCommit: (name) => {
+			commitRename(tab.id, name);
+		},
+		onDone: cancelRename
+	});
+	const refCallback = useMemo(() => mergeRefs(inputRef, userRef), [userRef]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		rename.handleKeyDown(event);
+	};
+	const handleCommitOnBlur = (event) => {
+		onBlur?.(event);
+		rename.handleBlur(event);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": `Rename ${tab.name}`,
+		...props,
+		"data-dashfoo": "tab-rename",
+		defaultValue: defaultValue ?? tab.name,
+		onBlur: handleCommitOnBlur,
+		onKeyDown: handleKeyDown,
+		ref: refCallback,
+		type: "text"
+	});
+};
+const TabsetRenameInput = (props) => {
+	const { tab } = useTab();
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const registerRenameInput = useTabset((state) => state.registerRenameInput);
+	useEffect(() => registerRenameInput(), [registerRenameInput]);
+	if (!editing) return null;
+	return /* @__PURE__ */ jsx(RenameEditor, { ...props });
+};
+const TabsetCloseButton = ({ children, onClick, ...props }) => {
+	const { index, tab } = useTab();
+	const closeTab = useTabset((state) => state.closeTab);
+	const editing = useTabset((state) => state.editingTabId === tab.id);
+	const tabsClosable = useTabset((state) => state.tabsClosable);
+	const visualSelected = useTabset((state) => state.visualSelected);
+	if (!(tabsClosable && tab.enableClose !== false) || editing) return null;
+	const handleClick = (event) => {
+		onClick?.(event);
+		event.stopPropagation();
+		closeTab(tab.id);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Close ${tab.name}`,
+		title: `Close ${tab.name}`,
+		...props,
+		"data-dashfoo": "tab-close",
+		onClick: handleClick,
+		tabIndex: index === visualSelected ? 0 : -1,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
 	});
 };
 
@@ -1439,13 +1893,14 @@ const overflowingIds = (tablist) => {
 		return clipped && tabId !== void 0 && tabId !== "" ? [tabId] : [];
 	});
 };
+const sameIds = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
 const useTabOverflow = (tablist, signature) => {
 	const [overflow, setOverflow] = useState([]);
 	useEffect(() => {
 		const recompute = () => {
 			setOverflow((previous) => {
 				const next = tablist ? overflowingIds(tablist) : [];
-				return next.length === 0 && previous.length === 0 ? previous : next;
+				return sameIds(previous, next) ? previous : next;
 			});
 		};
 		recompute();
@@ -1507,7 +1962,9 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 	useLayoutEffect(() => {
 		store.setState(snapshot);
 	});
-	const overflow = useTabOverflow(useStore(store, (state) => state.tablistElement), node.children.map((tab) => `${tab.id}:${tab.name}`).join("|"));
+	const tablistElement = useStore(store, (state) => state.tablistElement);
+	const overflowSignature = node.children.map((tab) => `${tab.id}:${tab.name}`).join("|");
+	const overflow = useTabOverflow(tablistElement, overflowSignature);
 	const overflowItems = useMemo(() => {
 		const names = new Map(node.children.map((tab) => [tab.id, tab.name]));
 		return overflow.map((id) => ({
@@ -1519,8 +1976,10 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 		store.setState({ overflowItems });
 	}, [overflowItems, store]);
 	useEffect(() => {
-		if (!store.getState().restoreFocus) return;
-		store.setState({ restoreFocus: false });
+		const { pendingCloseTabId } = store.getState();
+		if (pendingCloseTabId === null) return;
+		store.setState({ pendingCloseTabId: null });
+		if (node.children.some((tab) => tab.id === pendingCloseTabId)) return;
 		const activeTabId = node.children[node.selected]?.id;
 		if (activeTabId) tabsetRef.current?.querySelector(`#${CSS.escape(tabDomId(node.id, activeTabId))}`)?.focus();
 		else tabsetRef.current?.focus();
@@ -1548,253 +2007,87 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 				...style
 			},
 			tabIndex: -1,
-			children
-		})
-	});
-};
-
-//#endregion
-//#region src/lib/merge-refs.ts
-const applyRef = (ref, value) => {
-	if (typeof ref === "function") ref(value);
-	else if (ref) ref.current = value;
-};
-const mergeRefs = (...refs) => (value) => {
-	for (const ref of refs) applyRef(ref, value);
-};
-
-//#endregion
-//#region src/components/tabset/tabset-tab.tsx
-const TabsetTab = ({ children, ref: userRef, tab, ...props }) => {
-	const store = useContext(TabsetStoreContext);
-	const node = useTabset((state) => state.node);
-	const editing = useTabset((state) => state.editingTabId === tab.id);
-	const dragSubject = useDragSubject();
-	const isDragging = dragSubject?.kind === "tab" && dragSubject.id === tab.id;
-	const itemRef = useRef(null);
-	const wasEditing = useRef(false);
-	const index = node.children.findIndex((child) => child.id === tab.id);
-	useEffect(() => {
-		if (store?.getState().node.children.some((child) => child.id === tab.id) === false) warnOnce(`orphan-tab-${tab.id}`, `<Tabset.Tab> for "${tab.id}" is not a child of its Tabset.Root's node; it renders but can never be selected`);
-	}, [
-		index === -1,
-		store,
-		tab.id
-	]);
-	useEffect(() => {
-		if (wasEditing.current && !editing) itemRef.current?.querySelector("[data-dashfoo=\"tab\"]")?.focus();
-		wasEditing.current = editing;
-	}, [editing]);
-	const contextValue = useMemo(() => ({
-		index,
-		tab
-	}), [index, tab]);
-	const refCallback = useMemo(() => mergeRefs(itemRef, userRef), [userRef]);
-	return /* @__PURE__ */ jsx(TabContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx("span", {
-			...props,
-			"data-dashfoo": "tab-item",
-			"data-dragging": isDragging || void 0,
-			ref: refCallback,
-			children
-		})
-	});
-};
-const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...props }) => {
-	const { index, tab } = useTab();
-	const node = useTabset((state) => state.node);
-	const editing = useTabset((state) => state.editingTabId === tab.id);
-	const selectTab = useTabset((state) => state.selectTab);
-	const startEditing = useTabset((state) => state.startEditing);
-	const tabsRenamable = useTabset((state) => state.tabsRenamable);
-	const visualSelected = useTabset((state) => state.visualSelected);
-	const draggableTabs = useLayout((state) => state.draggableTabs);
-	const renderTabLabel = useLayout((state) => state.renderTabLabel);
-	const { ref } = useTabDraggable(tab.id, !draggableTabs || tab.enableDrag === false, tab.name);
-	const refCallback = useMemo(() => mergeRefs(ref, userRef), [ref, userRef]);
-	if (editing) return null;
-	const selected = index === visualSelected;
-	const renamable = tabsRenamable && tab.enableRename !== false;
-	const handleClick = (event) => {
-		onClick?.(event);
-		selectTab(index);
-	};
-	const handleDoubleClick = (event) => {
-		onDoubleClick?.(event);
-		if (renamable) startEditing(tab.id);
-	};
-	return /* @__PURE__ */ jsx("button", {
-		"aria-label": renderTabLabel ? tab.name : void 0,
-		...props,
-		"aria-controls": panelDomId(node.id),
-		"aria-selected": selected,
-		"data-dashfoo": "tab",
-		"data-tab-id": tab.id,
-		id: tabDomId(node.id, tab.id),
-		onClick: handleClick,
-		onDoubleClick: handleDoubleClick,
-		ref: refCallback,
-		role: "tab",
-		tabIndex: selected ? 0 : -1,
-		type: "button",
-		children: children ?? (renderTabLabel ? renderTabLabel(tab) : tab.name)
-	});
-};
-
-//#endregion
-//#region src/components/tabset-icons.tsx
-const iconStyle = { pointerEvents: "none" };
-const Icon = ({ children }) => /* @__PURE__ */ jsx("svg", {
-	"aria-hidden": "true",
-	fill: "none",
-	height: "12",
-	stroke: "currentColor",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	strokeWidth: "2",
-	style: iconStyle,
-	viewBox: "0 0 24 24",
-	width: "12",
-	children
-});
-const CloseIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] });
-const GripIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
-	/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "5",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "19",
-		cy: "5",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "5",
-		cy: "5",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "19",
-		cy: "12",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "5",
-		cy: "12",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "19",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "19",
-		cy: "19",
-		r: "1"
-	}),
-	/* @__PURE__ */ jsx("circle", {
-		cx: "5",
-		cy: "19",
-		r: "1"
-	})
-] });
-const MaximizeIcon = ({ maximized }) => maximized ? /* @__PURE__ */ jsxs(Icon, { children: [
-	/* @__PURE__ */ jsx("path", { d: "m14 10 7-7" }),
-	/* @__PURE__ */ jsx("path", { d: "M20 10h-6V4" }),
-	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
-	/* @__PURE__ */ jsx("path", { d: "M4 14h6v6" })
-] }) : /* @__PURE__ */ jsxs(Icon, { children: [
-	/* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-	/* @__PURE__ */ jsx("path", { d: "m21 3-7 7" }),
-	/* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
-	/* @__PURE__ */ jsx("path", { d: "M9 21H3v-6" })
-] });
-const FloatIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx("rect", {
-	height: "14",
-	rx: "2",
-	width: "18",
-	x: "3",
-	y: "6"
-}), /* @__PURE__ */ jsx("path", { d: "M3 10h18" })] });
-const MinimizeIcon = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
-const DockIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
-	/* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" }),
-	/* @__PURE__ */ jsx("path", { d: "M11 8 7 12l4 4" }),
-	/* @__PURE__ */ jsx("path", { d: "M7 12h10" })
-] });
-
-//#endregion
-//#region src/components/tabset/tabset-tab-controls.tsx
-const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props }) => {
-	const { tab } = useTab();
-	const cancelRename = useTabset((state) => state.cancelRename);
-	const commitRename = useTabset((state) => state.commitRename);
-	const inputRef = useRef(null);
-	const rename = useInlineRename({
-		currentName: tab.name,
-		inputRef,
-		onCommit: (name) => {
-			commitRename(tab.id, name);
-		},
-		onDone: cancelRename
-	});
-	const refCallback = useMemo(() => mergeRefs(inputRef, userRef), [userRef]);
-	const handleKeyDown = (event) => {
-		onKeyDown?.(event);
-		rename.handleKeyDown(event);
-	};
-	const handleCommitOnBlur = (event) => {
-		onBlur?.(event);
-		rename.handleBlur(event);
-	};
-	return /* @__PURE__ */ jsx("input", {
-		"aria-label": `Rename ${tab.name}`,
-		...props,
-		"data-dashfoo": "tab-rename",
-		defaultValue: defaultValue ?? tab.name,
-		onBlur: handleCommitOnBlur,
-		onKeyDown: handleKeyDown,
-		ref: refCallback,
-		type: "text"
+			children
+		})
 	});
 };
-const TabsetRenameInput = (props) => {
-	const { tab } = useTab();
+
+//#endregion
+//#region src/components/tabset/tabset-tab.tsx
+const TabsetTab = ({ children, ref: userRef, tab, ...props }) => {
+	const store = useContext(TabsetStoreContext);
+	const node = useTabset((state) => state.node);
 	const editing = useTabset((state) => state.editingTabId === tab.id);
-	const registerRenameInput = useTabset((state) => state.registerRenameInput);
-	useEffect(() => registerRenameInput(), [registerRenameInput]);
-	if (!editing) return null;
-	return /* @__PURE__ */ jsx(RenameEditor, { ...props });
+	const dragSubject = useDragSubject();
+	const isDragging = dragSubject?.kind === "tab" && dragSubject.id === tab.id;
+	const itemRef = useRef(null);
+	const wasEditing = useRef(false);
+	const index = node.children.findIndex((child) => child.id === tab.id);
+	useEffect(() => {
+		if (store?.getState().node.children.some((child) => child.id === tab.id) === false) warnOnce(`orphan-tab-${tab.id}`, `<Tabset.Tab> for "${tab.id}" is not a child of its Tabset.Root's node; it renders but can never be selected`);
+	}, [
+		index === -1,
+		store,
+		tab.id
+	]);
+	useEffect(() => {
+		if (wasEditing.current && !editing) itemRef.current?.querySelector("[data-dashfoo=\"tab\"]")?.focus();
+		wasEditing.current = editing;
+	}, [editing]);
+	const contextValue = useMemo(() => ({
+		index,
+		tab
+	}), [index, tab]);
+	const refCallback = useMemo(() => mergeRefs(itemRef, userRef), [userRef]);
+	return /* @__PURE__ */ jsx(TabContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			...props,
+			"data-dashfoo": "tab-item",
+			"data-dragging": isDragging || void 0,
+			ref: refCallback,
+			children
+		})
+	});
 };
-const TabsetCloseButton = ({ children, onClick, ...props }) => {
+const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...props }) => {
 	const { index, tab } = useTab();
-	const closeTab = useTabset((state) => state.closeTab);
+	const node = useTabset((state) => state.node);
 	const editing = useTabset((state) => state.editingTabId === tab.id);
-	const tabsClosable = useTabset((state) => state.tabsClosable);
+	const selectTab = useTabset((state) => state.selectTab);
+	const startEditing = useTabset((state) => state.startEditing);
+	const tabsRenamable = useTabset((state) => state.tabsRenamable);
 	const visualSelected = useTabset((state) => state.visualSelected);
-	if (!(tabsClosable && tab.enableClose !== false) || editing) return null;
+	const draggableTabs = useLayout((state) => state.draggableTabs);
+	const renderTabLabel = useLayout((state) => state.renderTabLabel);
+	const { ref } = useTabDraggable(tab.id, !draggableTabs || tab.enableDrag === false, tab.name);
+	const refCallback = useMemo(() => mergeRefs(ref, userRef), [ref, userRef]);
+	if (editing) return null;
+	const selected = index === visualSelected;
+	const renamable = tabsRenamable && tab.enableRename !== false;
 	const handleClick = (event) => {
 		onClick?.(event);
-		event.stopPropagation();
-		closeTab(tab.id);
+		selectTab(index);
+	};
+	const handleDoubleClick = (event) => {
+		onDoubleClick?.(event);
+		if (renamable) startEditing(tab.id);
 	};
 	return /* @__PURE__ */ jsx("button", {
-		"aria-label": `Close ${tab.name}`,
-		title: `Close ${tab.name}`,
+		"aria-label": renderTabLabel ? tab.name : void 0,
 		...props,
-		"data-dashfoo": "tab-close",
+		"aria-controls": panelDomId(node.id),
+		"aria-selected": selected,
+		"data-dashfoo": "tab",
+		"data-tab-id": tab.id,
+		id: tabDomId(node.id, tab.id),
 		onClick: handleClick,
-		tabIndex: index === visualSelected ? 0 : -1,
+		onDoubleClick: handleDoubleClick,
+		ref: refCallback,
+		role: "tab",
+		tabIndex: selected ? 0 : -1,
 		type: "button",
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: children ?? (renderTabLabel ? renderTabLabel(tab) : tab.name)
 	});
 };
 
@@ -1821,15 +2114,17 @@ const TabsetTablist = ({ onKeyDown, ref: userRef, style, ...props }) => {
 	const node = useTabset((state) => state.node);
 	const registerTablist = useTabset((state) => state.registerTablist);
 	const selectTab = useTabset((state) => state.selectTab);
+	const visualSelected = useTabset((state) => state.visualSelected);
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
 		if (event.defaultPrevented) return;
 		if (!(event.target instanceof HTMLElement) || !event.target.closest("[role=\"tab\"]")) return;
 		const count = node.children.length;
 		if (count === 0) return;
+		const from = Math.max(visualSelected, 0);
 		const next = {
-			ArrowLeft: (node.selected - 1 + count) % count,
-			ArrowRight: (node.selected + 1) % count,
+			ArrowLeft: (from - 1 + count) % count,
+			ArrowRight: (from + 1) % count,
 			End: count - 1,
 			Home: 0
 		}[event.key];
@@ -1870,14 +2165,32 @@ const TabsetToolbar = ({ style, ...props }) => /* @__PURE__ */ jsx("div", {
 		...style
 	}
 });
+/**
+* One answer per control, shared by the controls and by the layout deciding
+* whether to render a toolbar at all, so the two cannot disagree.
+*/
+const useTabsetChrome = () => {
+	const draggableTabsets = useLayout((state) => state.draggableTabsets);
+	const floatable = useLayout((state) => state.floatable);
+	const isMaximized = useTabset((state) => state.isMaximized);
+	const overflowCount = useTabset((state) => state.overflowItems.length);
+	const showMaximize = useTabset((state) => state.showMaximize);
+	const hasFloatLayer = useHasFloatLayer();
+	if (floatable && !isMaximized && !hasFloatLayer) warnOnce("float-no-layer", "Tabset.FloatButton needs a <Layout.FloatLayer> around the layout (DashfooLayout adds one); the float control is hidden");
+	return {
+		float: floatable && !isMaximized && hasFloatLayer,
+		grip: draggableTabsets && !isMaximized,
+		maximize: showMaximize,
+		overflow: overflowCount > 0
+	};
+};
 const TabsetGrip = ({ children, ref: userRef, ...props }) => {
 	const activeTabName = useTabset((state) => state.activeTab?.name ?? "");
-	const isMaximized = useTabset((state) => state.isMaximized);
 	const node = useTabset((state) => state.node);
-	const hidden = !useLayout((state) => state.draggableTabsets) || isMaximized;
-	const { ref } = useTabsetDraggable(node.id, hidden, activeTabName);
+	const { grip } = useTabsetChrome();
+	const { ref } = useTabsetDraggable(node.id, !grip, activeTabName);
 	const refCallback = useMemo(() => mergeRefs(ref, userRef), [ref, userRef]);
-	if (hidden) return null;
+	if (!grip) return null;
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": "Move tabset",
 		title: "Move tabset",
@@ -1890,9 +2203,9 @@ const TabsetGrip = ({ children, ref: userRef, ...props }) => {
 };
 const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
 	const isMaximized = useTabset((state) => state.isMaximized);
-	const showMaximize = useTabset((state) => state.showMaximize);
 	const toggleMaximize = useTabset((state) => state.toggleMaximize);
-	if (!showMaximize) return null;
+	const { maximize } = useTabsetChrome();
+	if (!maximize) return null;
 	const handleClick = (event) => {
 		onClick?.(event);
 		toggleMaximize();
@@ -1909,16 +2222,10 @@ const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
 	});
 };
 const TabsetFloatButton = ({ children, onClick, ...props }) => {
-	const floatable = useLayout((state) => state.floatable);
 	const dispatch = useLayout((state) => state.dispatch);
-	const isMaximized = useTabset((state) => state.isMaximized);
 	const node = useTabset((state) => state.node);
-	const hasFloatLayer = useHasFloatLayer();
-	if (!floatable || isMaximized) return null;
-	if (!hasFloatLayer) {
-		warnOnce("float-no-layer", "Tabset.FloatButton needs a <Layout.FloatLayer> around the layout (DashfooLayout adds one); the float control is hidden");
-		return null;
-	}
+	const { float } = useTabsetChrome();
+	if (!float) return null;
 	const handleClick = (event) => {
 		onClick?.(event);
 		const geometry = measureFloatRect(event.currentTarget);
@@ -1943,15 +2250,12 @@ const TabsetFloatButton = ({ children, onClick, ...props }) => {
 //#region src/components/tabset/tabset-view.tsx
 const tabsetContent = /* @__PURE__ */ jsx(TabsetContent, {});
 const DefaultTabsetLayout = () => {
-	const draggableTabsets = useLayout((state) => state.draggableTabsets);
-	const floatable = useLayout((state) => state.floatable);
 	const renderTabsetToolbar = useLayout((state) => state.renderTabsetToolbar);
 	const tabLocation = useLayout((state) => state.tabLocation);
 	const tabStripEnabled = useLayout((state) => state.tabStripEnabled);
-	const isMaximized = useTabset((state) => state.isMaximized);
 	const node = useTabset((state) => state.node);
-	const overflowCount = useTabset((state) => state.overflowItems.length);
-	const showToolbar = useTabset((state) => state.showMaximize) || renderTabsetToolbar !== void 0 || overflowCount > 0 || floatable && !isMaximized || draggableTabsets && !isMaximized;
+	const chrome = useTabsetChrome();
+	const showToolbar = renderTabsetToolbar !== void 0 || Object.values(chrome).some(Boolean);
 	const strip = tabStripEnabled ? /* @__PURE__ */ jsxs(TabsetTabStrip, { children: [/* @__PURE__ */ jsx(TabsetTablist, { children: node.children.map((tab) => /* @__PURE__ */ jsxs(TabsetTab, {
 		tab,
 		children: [
@@ -1983,22 +2287,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;
@@ -2019,91 +2307,33 @@ const RowView = ({ node, renderTabset }) => {
 	const tabsetMinSize = useLayout((state) => state.tabsetMinSize);
 	const globalSnap = useLayout((state) => state.snap);
 	const effectiveSnap = node.snap ?? globalSnap;
-	const snapActive = snapEnabled(effectiveSnap);
+	const snapGrid = useMemo(() => resolveSnapGrid(effectiveSnap, node.children.length), [effectiveSnap, node.children.length]);
+	const snapActive = snapEnabled(snapGrid);
 	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: snapGrid
+	});
 	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);
@@ -2115,7 +2345,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}%`,
@@ -2159,11 +2389,12 @@ 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({
@@ -2211,25 +2442,10 @@ const FloatTitle = ({ dispatch, node, renamable }) => {
 		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({
@@ -2238,88 +2454,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 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: 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) === true) panel.releasePointerCapture(event.pointerId);
-		if (!movedRef.current) {
-			if (node.minimized === true) 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 === true ? CHIP_SIZE : void 0);
-		latestRef.current = next;
-		panel.style.left = `${next.left}px`;
-		panel.style.top = `${next.top}px`;
-		if (node.minimized !== true) {
-			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 !== true) {
-			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 === true) return /* @__PURE__ */ jsxs("button", {
+	if (minimized) return /* @__PURE__ */ jsxs("button", {
+		...rootHandlers,
 		"aria-label": `Restore ${floatTitle(node)} panel`,
 		"data-dashfoo": "float-chip",
 		onKeyDown: (event) => {
@@ -2328,19 +2486,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", {
@@ -2348,31 +2497,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"
@@ -2427,29 +2561,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",
@@ -2469,14 +2589,13 @@ 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);
@@ -2485,12 +2604,9 @@ const FloatOverlay = ({ floats, global }) => {
 		}, 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
@@ -2506,8 +2622,8 @@ const Layout = {
 //#endregion
 //#region src/components/dashfoo-layout.tsx
 const DEFAULT_PERSIST_DEBOUNCE_MS = 300;
-const resolvePersist = (persist, hasDefaultModel) => {
-	if (persist === void 0 || !hasDefaultModel) return null;
+const resolvePersist = (persist) => {
+	if (persist === void 0) return null;
 	if (typeof persist === "string") return {
 		debounceMs: DEFAULT_PERSIST_DEBOUNCE_MS,
 		key: persist,
@@ -2522,7 +2638,8 @@ const resolvePersist = (persist, hasDefaultModel) => {
 const warnedComponents = /* @__PURE__ */ new Set();
 const DashfooLayout = forwardRef((props, ref) => {
 	const { closableTabs = true, components, defaultModel, draggableTabs = true, draggableTabsets = true, editable = true, factory, floatable = false, keepMounted = false, maximizable = true, model, onAction, onActiveTabsetChange, onMaximizedTabsetChange, onModelChange, persist, renamableTabs = true, renderTabLabel, renderTabsetToolbar, resizableSplits = true, responsive, snap } = props;
-	const persistence = usePersistence(useMemo(() => resolvePersist(persist, defaultModel !== void 0), [persist, defaultModel]), defaultModel);
+	const persistConfig = useMemo(() => resolvePersist(persist), [persist]);
+	const persistence = usePersistence(persistConfig, defaultModel);
 	const handleModelChange = useCallback((next, action) => {
 		persistence.save(next);
 		onModelChange?.(next, action);
@@ -2613,37 +2730,43 @@ const DashfooLayout = forwardRef((props, ref) => {
 	}, [components, factory]);
 	const [containerRef, width] = useContainerWidth();
 	const isCompact = responsive !== void 0 && width <= responsive.maxWidth;
-	const view = useMemo(() => isCompact ? stackModel(store.model, responsive?.orientation) : store.model, [
+	/** Everything the compact breakpoint changes, decided once. */
+	const presentation = useMemo(() => isCompact ? {
+		maximizable: false,
+		model: stackModel(store.model, responsive?.orientation),
+		restructurable: false
+	} : {
+		maximizable,
+		model: store.model,
+		restructurable: true
+	}, [
 		isCompact,
+		maximizable,
 		responsive?.orientation,
 		store.model
 	]);
-	const storeDispatch = store.dispatch;
-	const dispatch = useCallback((action) => {
-		if (isCompact && action.type === "adjustSplit") return;
-		storeDispatch(action);
-	}, [isCompact, storeDispatch]);
+	const view = presentation.model;
 	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: view.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,
+		maximizable: presentation.maximizable,
 		model: view,
 		renamableTabs,
 		renderTab,
 		renderTabLabel,
 		renderTabsetToolbar,
-		resizableSplits: isCompact ? false : resizableSplits,
+		resizableSplits,
+		restructurable: presentation.restructurable,
 		rootRef: containerRef,
 		snap,
 		children: hasSharedManager ? tree : /* @__PURE__ */ jsx(DashfooDragProvider, { children: tree })