@dashfoo/react 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { canRedo, canUndo, dashfooMachine, decideSnap, dockLocationFor, dragDockMachine, findTabset, fromJSON, normalize, resolveDockTarget, settleSnap, snapEnabled, splitEdge, 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 { useActorRef, useSelector } from "@xstate/react";
@@ -66,11 +66,7 @@ const createDragManager = () => new DragDropManager({
 const DragRootContext = createContext(null);
 const DragContext = createContext(null);
 const SharedDragManagerContext = createContext(null);
-/**
-* The actor assigns a freshly built intent on every pointer move, so selecting
-* `context.intent` by reference would re-render every reader of `useDropIntent`
-* for each move that resolved to the same slot.
-*/
+/** 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 useDraggableHandle = () => {
 	const elementRef = useRef(null);
@@ -193,19 +189,23 @@ const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
 	}, disabled, label);
 };
 /**
-* Both drag readers are documented as working anywhere under the provider, which
-* includes a custom overlay mounted beside the layout rather than inside a drag
-* layer, so they read the root's actor. Outside a provider entirely there is no
-* actor to read and they report the empty state instead of throwing: a component
-* that renders both inside and outside a layout should not crash in one of them.
+* 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 = () => {
 	const actorRef = useContext(DragRootContext)?.actorRef;
-	return useSelector(actorRef, (snapshot) => snapshot?.context.subject ?? null);
+	return useSelector(actorRef, (snapshot) => {
+		const drag = snapshot?.context.drag;
+		return drag?.kind === "dragging" ? drag.subject : null;
+	});
 };
 const useDropIntent = () => {
 	const actorRef = useContext(DragRootContext)?.actorRef;
-	return useSelector(actorRef, (snapshot) => snapshot?.context.intent ?? null, sameDropIntent);
+	return useSelector(actorRef, (snapshot) => {
+		const drag = snapshot?.context.drag;
+		return drag?.kind === "dragging" ? drag.drop?.intent ?? null : null;
+	}, sameDropIntent);
 };
 
 //#endregion
@@ -251,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) {
@@ -412,19 +413,21 @@ const warnOnce = (key, 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);
@@ -438,6 +441,10 @@ const useDashfooStore = (options) => {
 	const dispatch = useCallback((action) => {
 		const resolved = onAction ? onAction(action) : action;
 		if (!resolved) return;
+		if (controlled) {
+			notify(model, reducer(model, resolved), resolved);
+			return;
+		}
 		const before = actorRef.getSnapshot().context.history.present;
 		actorRef.send({
 			action: resolved,
@@ -446,46 +453,50 @@ const useDashfooStore = (options) => {
 		notify(before, actorRef.getSnapshot().context.history.present, resolved);
 	}, [
 		actorRef,
+		controlled,
+		model,
 		notify,
 		onAction
 	]);
 	const undo = useCallback(() => {
-		if (controlledModel !== void 0) {
+		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) {
+		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: () => controlledModel === void 0 && canRedo(actorRef.getSnapshot().context.history),
-		canUndo: () => controlledModel === void 0 && canUndo(actorRef.getSnapshot().context.history),
+		canRedo: () => !controlled && canRedo(actorRef.getSnapshot().context.history),
+		canUndo: () => !controlled && canUndo(actorRef.getSnapshot().context.history),
 		dispatch,
 		model,
 		redo,
@@ -493,7 +504,7 @@ const useDashfooStore = (options) => {
 		undo
 	}), [
 		actorRef,
-		controlledModel,
+		controlled,
 		dispatch,
 		model,
 		redo,
@@ -505,11 +516,8 @@ const useDashfooStore = (options) => {
 //#endregion
 //#region src/lib/drag-subject.ts
 const isTabFactory = (value) => typeof value === "function";
-/**
-* Reads what a dnd-kit source represents. It lives beside the manager wiring
-* rather than in the layer adapter because `dragstart` fires once per gesture on
-* the shared manager, above any one layer.
-*/
+/** 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 {
@@ -571,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",
@@ -595,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";
@@ -653,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: {
@@ -674,7 +684,7 @@ 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(() => () => {
@@ -688,11 +698,6 @@ const DashfooDragProvider = ({ children }) => {
 			scopes.delete(scope.layerId);
 		};
 	}, [scopes]);
-	/**
-	* One listener set and one actor for the whole tree. Attached per layer, a
-	* single pointer move fanned out to every float's actor, and each one that did
-	* not own the target resolved `intent: null` and then swallowed the drop.
-	*/
 	useEffect(() => {
 		const scopedTarget = () => {
 			const target = manager.dragOperation.target;
@@ -706,15 +711,16 @@ const DashfooDragProvider = ({ children }) => {
 				tabsetId: data.tabsetId
 			};
 		};
-		let intentLayerId = null;
 		const syncIntent = () => {
 			const operation = manager.dragOperation;
 			const found = scopedTarget();
 			const draggedId = operation.source ? String(operation.source.id) : void 0;
 			const intent = found === null ? null : found.scope.resolveIntent(found.tabsetId, found.element, operation.position.current, draggedId);
-			intentLayerId = intent === null || found === null ? null : found.scope.layerId;
 			actorRef.send({
-				intent,
+				drop: intent === null || found === null ? null : {
+					intent,
+					scope: found.scope.layerId
+				},
 				type: "OVER"
 			});
 		};
@@ -726,19 +732,27 @@ const DashfooDragProvider = ({ children }) => {
 				manager.actions.stop({ canceled: true });
 				return;
 			}
-			intentLayerId = null;
 			actorRef.send({
 				subject,
 				type: "START"
 			});
 		};
-		const handleMove = () => {
-			syncIntent();
+		let frame = null;
+		const scheduleResolve = () => {
+			if (frame !== null) return;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				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;
@@ -747,13 +761,14 @@ const DashfooDragProvider = ({ children }) => {
 			actorRef.send({ type: "DROP" });
 		};
 		const commitSubscription = actorRef.on("COMMIT", (emitted) => {
-			(intentLayerId === null ? void 0 : scopes.get(intentLayerId))?.commit(emitted.action);
+			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();
@@ -794,19 +809,34 @@ const useLayout = (selector) => {
 };
 
 //#endregion
-//#region src/components/drag-adapter.tsx
+//#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";
-const tabRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => tab.dataset.tabId === excludeId ? [] : [tab.getBoundingClientRect()]);
-const intentForTabset = (id, element, point, draggedId) => {
+/** 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 && pointInRect(point, strip.getBoundingClientRect())) return {
-		index: insertionIndex(tabRects(strip, draggedId), point.x),
+	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 intentForTabset = (id, element, point, strip) => {
+	if (strip && pointInRect(point, strip.rect)) return {
+		index: insertionIndex(strip.tabRects, point.x),
 		location: "center",
 		targetId: id
 	};
-	const location = dockLocationFor(resolveDockTarget(point, element.getBoundingClientRect()));
+	const location = resolveDockTarget(point, element.getBoundingClientRect());
 	if (location === "center" && strip) return {
-		index: tabRects(strip, draggedId).length,
+		index: strip.tabRects.length,
 		location,
 		targetId: id
 	};
@@ -815,11 +845,7 @@ const intentForTabset = (id, element, point, draggedId) => {
 		targetId: id
 	};
 };
-/**
-* One drag layer: the main tree, or one float. It holds no drag state of its
-* own. It registers how its own tabsets turn a pointer into an intent and where
-* a committed action goes, then draws the indicator over its own droppables.
-*/
+/** 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);
@@ -842,8 +868,9 @@ const DragScope = ({ children, onCommit, splitDock }) => {
 		layerId,
 		resolveIntent: (targetId, element, point, draggedId) => {
 			if (layoutStore?.getState().editable === false) return null;
-			if (!shouldAllowDrop(draggedId, targetId, [...element.querySelectorAll("[data-dashfoo=\"tab\"]")].map((tab) => tab.dataset.tabId ?? ""))) return null;
-			const intent = intentForTabset(targetId, element, point, draggedId);
+			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
@@ -873,10 +900,8 @@ const DragScope = ({ children, onCommit, splitDock }) => {
 	});
 };
 /**
-* Mounts its own root when there is none above it, so a hand-composed
-* `Layout.DragLayer` still works standalone. The choice is made on the first
-* render, as it was for the manager this used to create itself: a root that
-* disappears later means a torn-down tree, which `DragScope` reports.
+* 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;
@@ -1062,16 +1087,11 @@ const CHIP_SIZE = {
 	width: 168
 };
 const TAP_SLOP = 4;
-/**
-* Moving and resizing writes straight to the panel's inline style and only
-* dispatches on pointer-up: routing every pointermove through the model would
-* re-render the whole layout tree behind the float.
-*/
+/** 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 latestRef = useRef(geometry);
-	const movedRef = useRef(false);
 	const setPanel = (element) => {
 		panelRef.current = element;
 	};
@@ -1080,7 +1100,6 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		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 = {
@@ -1089,13 +1108,14 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 				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
 		};
 		gestureRef.current = gesture;
-		latestRef.current = geometry;
 		if (gesture.edges) panel.setPointerCapture(event.pointerId);
 	};
 	const handlePointerUp = (event) => {
@@ -1104,11 +1124,11 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		gestureRef.current = null;
 		const panel = panelRef.current;
 		if (panel?.hasPointerCapture?.(event.pointerId) === true) panel.releasePointerCapture(event.pointerId);
-		if (!movedRef.current) {
+		if (!gesture.moved) {
 			onTap();
 			return;
 		}
-		onCommit(latestRef.current);
+		onCommit(gesture.latest);
 	};
 	const handlePointerMove = (event) => {
 		const gesture = gestureRef.current;
@@ -1120,9 +1140,9 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		}
 		const dx = event.clientX - gesture.startX;
 		const dy = event.clientY - gesture.startY;
-		if (!movedRef.current) {
+		if (!gesture.moved) {
 			if (Math.hypot(dx, dy) <= TAP_SLOP) return;
-			movedRef.current = true;
+			gesture.moved = true;
 			if (!gesture.edges) panel.setPointerCapture(gesture.pointerId);
 		}
 		const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
@@ -1130,7 +1150,7 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 			left: gesture.start.left + dx,
 			top: gesture.start.top + dy
 		}, gesture.bounds, minimized ? CHIP_SIZE : void 0);
-		latestRef.current = next;
+		gesture.latest = next;
 		panel.style.left = `${next.left}px`;
 		panel.style.top = `${next.top}px`;
 		if (!minimized) {
@@ -1144,7 +1164,7 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
 		gestureRef.current = null;
 		if (panel.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
-		if (!movedRef.current) return;
+		if (!gesture.moved) return;
 		panel.style.left = `${gesture.start.left}px`;
 		panel.style.top = `${gesture.start.top}px`;
 		if (!minimized) {
@@ -1205,6 +1225,95 @@ const useInlineRename = ({ currentName, inputRef, onCommit, onDone }) => {
 	};
 };
 
+//#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;
@@ -1261,10 +1370,8 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 	});
 };
 /**
-* A nested subtree (a float) renders through the same components as the main
-* layout, minus a few capabilities. It republishes the parent store with the
-* overrides applied instead of re-deriving every flag from a synthetic model,
-* so anything the parent changes keeps flowing into the subtree.
+* 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 = {
@@ -1402,7 +1509,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 		set({ editingTabId: null });
 	},
 	closeTab: (tabId) => {
-		set({ restoreFocus: true });
+		set({ pendingCloseTabId: tabId });
 		get().dispatch({
 			tabId,
 			type: "deleteTab"
@@ -1417,6 +1524,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 	},
 	editingTabId: null,
 	overflowItems: [],
+	pendingCloseTabId: null,
 	registerRenameInput: () => {
 		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
 		return () => {
@@ -1440,7 +1548,6 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 			type: "renameTab"
 		});
 	},
-	restoreFocus: false,
 	selectOverflowTab: (tabId) => {
 		const { dispatch, node, tablistElement } = get();
 		const index = node.children.findIndex((tab) => tab.id === tabId);
@@ -1554,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",
@@ -1642,8 +1749,6 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			case "Escape":
 				event.preventDefault();
 				closeAndReturnFocus();
-				break;
-			default: break;
 		}
 	};
 	const handleFocusOut = (event) => {
@@ -1689,7 +1794,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 };
 
 //#endregion
-//#region src/components/tabset/tabset-overflow.tsx
+//#region src/components/tabset/tabset-overflow-menu.tsx
 const TabsetOverflowMenu = () => {
 	const overflowItems = useTabset((state) => state.overflowItems);
 	const selectOverflowTab = useTabset((state) => state.selectOverflowTab);
@@ -1700,6 +1805,83 @@ const TabsetOverflowMenu = () => {
 	});
 };
 
+//#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, {})
+	});
+};
+
 //#endregion
 //#region src/hooks/use-tab-overflow.ts
 const overflowingIds = (tablist) => {
@@ -1711,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();
@@ -1779,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) => ({
@@ -1791,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();
@@ -1825,16 +2012,6 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 	});
 };
 
-//#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 }) => {
@@ -1914,162 +2091,6 @@ const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...prop
 	});
 };
 
-//#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"
-	});
-};
-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, {})
-	});
-};
-
 //#endregion
 //#region src/components/tabset/tabset-tablist.tsx
 const stripStyle = {
@@ -2093,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];
@@ -2142,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",
@@ -2162,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();
@@ -2181,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);
@@ -2215,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: [
@@ -2275,7 +2307,8 @@ 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, 0);
 	const { beginBoundaryDrag, groupRef, onLayoutChange, onLayoutChanged, snappedBoundary } = useSnapResize({
@@ -2288,7 +2321,7 @@ const RowView = ({ node, renderTabset }) => {
 			});
 		},
 		resizableSplits,
-		snap: effectiveSnap
+		snap: snapGrid
 	});
 	return /* @__PURE__ */ jsx(Group, {
 		"data-dashfoo": "row",
@@ -2589,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,
@@ -2605,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);
@@ -2696,14 +2730,25 @@ 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 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,
+		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, {
@@ -2714,14 +2759,14 @@ const DashfooLayout = forwardRef((props, ref) => {
 		editable,
 		floatable,
 		keepMounted,
-		maximizable,
+		maximizable: presentation.maximizable,
 		model: view,
 		renamableTabs,
 		renderTab,
 		renderTabLabel,
 		renderTabsetToolbar,
 		resizableSplits,
-		restructurable: !isCompact,
+		restructurable: presentation.restructurable,
 		rootRef: containerRef,
 		snap,
 		children: hasSharedManager ? tree : /* @__PURE__ */ jsx(DashfooDragProvider, { children: tree })