@dashfoo/react 0.7.0 → 0.8.2

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, 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);
@@ -182,7 +178,7 @@ const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
 	const createTabRef = useRef(createTab);
 	useEffect(() => {
 		createTabRef.current = createTab;
-	});
+	}, [createTab]);
 	const data = useMemo(() => ({
 		createTab: () => createTabRef.current(),
 		type: "external"
@@ -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
@@ -227,7 +227,8 @@ const localStorageAdapter = {
 		if (typeof window === "undefined") return null;
 		try {
 			return window.localStorage.getItem(key);
-		} catch {
+		} catch (error) {
+			console.warn("[dashfoo] failed to load persisted layout", error);
 			return null;
 		}
 	},
@@ -235,7 +236,9 @@ const localStorageAdapter = {
 		if (typeof window === "undefined") return;
 		try {
 			window.localStorage.removeItem(key);
-		} catch {}
+		} catch (error) {
+			console.warn("[dashfoo] failed to clear persisted layout", error);
+		}
 	},
 	setItem: (key, value) => {
 		if (typeof window === "undefined") return;
@@ -246,33 +249,39 @@ const localStorageAdapter = {
 		}
 	}
 };
+const removeStoredLayout = ({ key, storage }) => {
+	try {
+		storage.removeItem(key);
+	} catch (error) {
+		console.warn("[dashfoo] failed to clear persisted layout", error);
+	}
+};
 const usePersistence = (config, defaultModel) => {
 	const configRef = useRef(config);
 	useEffect(() => {
 		configRef.current = config;
-	});
-	const [initialModel] = useState(() => {
-		if (config === null || defaultModel === void 0) return defaultModel;
-		const raw = config.storage.getItem(config.key);
-		if (raw === null) return defaultModel;
-		try {
-			return fromJSON(raw);
-		} catch {
-			return defaultModel;
-		}
-	});
+	}, [config]);
+	const [initialModel, setInitialModel] = useState(defaultModel);
+	const loaded = useRef(false);
 	useEffect(() => {
+		if (loaded.current) return;
+		loaded.current = true;
 		const current = configRef.current;
-		if (current === null) return;
-		const raw = current.storage.getItem(current.key);
-		if (raw === null) return;
+		if (current === null || defaultModel === void 0) return;
 		try {
-			fromJSON(raw);
+			const raw = current.storage.getItem(current.key);
+			if (raw === null) return;
+			try {
+				const restored = fromJSON(raw);
+				setInitialModel(restored);
+			} catch (error) {
+				console.warn("[dashfoo] discarding unreadable persisted layout", error);
+				removeStoredLayout(current);
+			}
 		} catch (error) {
-			console.warn("[dashfoo] discarding unreadable persisted layout", error);
-			current.storage.removeItem(current.key);
+			console.warn("[dashfoo] failed to load persisted layout", error);
 		}
-	}, []);
+	}, [defaultModel]);
 	const loadedKey = useRef(config?.key);
 	useEffect(() => {
 		if (config !== null && config.key !== loadedKey.current) {
@@ -288,8 +297,13 @@ const usePersistence = (config, defaultModel) => {
 			timer.current = null;
 		}
 		if (pending.current !== null) {
-			pending.current.storage.setItem(pending.current.key, pending.current.value);
+			const write = pending.current;
 			pending.current = null;
+			try {
+				write.storage.setItem(write.key, write.value);
+			} catch (error) {
+				console.warn("[dashfoo] failed to persist layout", error);
+			}
 		}
 	}, []);
 	const save = useCallback((next) => {
@@ -325,7 +339,7 @@ const usePersistence = (config, defaultModel) => {
 		}
 		pending.current = null;
 		const current = configRef.current;
-		if (current !== null) current.storage.removeItem(current.key);
+		if (current !== null) removeStoredLayout(current);
 	}, []);
 	return useMemo(() => ({
 		clear,
@@ -352,23 +366,30 @@ const activeBreakpoint = (breakpoints, width) => {
 	if (!fallback) throw new Error("useResponsiveModel requires at least one breakpoint.");
 	return breakpoints.find((breakpoint) => matchBreakpoint(breakpoint, width)) ?? fallback;
 };
+const observeWidth = (element, onWidth) => {
+	const observer = new ResizeObserver((entries) => {
+		const entry = entries.at(0);
+		if (entry) onWidth(entry.contentRect.width);
+	});
+	observer.observe(element);
+	return () => {
+		observer.disconnect();
+	};
+};
+const listenToMedia = (list, handleChange) => {
+	list.addEventListener("change", handleChange);
+	return () => {
+		list.removeEventListener("change", handleChange);
+	};
+};
 const useContainerWidth = () => {
 	const [width, setWidth] = useState(Number.POSITIVE_INFINITY);
-	const observerRef = useRef(null);
-	const containerRef = useCallback((element) => {
-		observerRef.current?.disconnect();
-		if (!element) return;
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries.at(0);
-			if (entry) setWidth(entry.contentRect.width);
-		});
-		observer.observe(element);
-		observerRef.current = observer;
-	}, []);
-	useEffect(() => () => {
-		observerRef.current?.disconnect();
-	}, []);
-	return [containerRef, width];
+	const [container, setContainer] = useState(null);
+	useEffect(() => {
+		if (!container) return;
+		return observeWidth(container, setWidth);
+	}, [container]);
+	return [setContainer, width];
 };
 const useResponsiveModel = ({ breakpoints }) => {
 	const [containerRef, width] = useContainerWidth();
@@ -380,9 +401,9 @@ const useResponsiveModel = ({ breakpoints }) => {
 		const handleChange = () => {
 			setMediaTick((tick) => tick + 1);
 		};
-		for (const list of lists) list.addEventListener("change", handleChange);
+		const cleanups = lists.map((list) => listenToMedia(list, handleChange));
 		return () => {
-			for (const list of lists) list.removeEventListener("change", handleChange);
+			for (const cleanup of cleanups) cleanup();
 		};
 	}, [breakpoints]);
 	const active = activeBreakpoint(breakpoints, width);
@@ -412,19 +433,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 +461,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 +473,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 +524,7 @@ const useDashfooStore = (options) => {
 		undo
 	}), [
 		actorRef,
-		controlledModel,
+		controlled,
 		dispatch,
 		model,
 		redo,
@@ -502,21 +533,38 @@ const useDashfooStore = (options) => {
 	]);
 };
 
+//#endregion
+//#region src/lib/compact-model.ts
+const compactRow = (node, orientation) => {
+	const children = node.children.map((child) => child.type === "row" ? compactRow(child, orientation) : {
+		...child,
+		weight: 1
+	});
+	return {
+		...node,
+		children,
+		orientation,
+		weight: children.reduce((sum, child) => sum + child.weight, 0)
+	};
+};
+const compactModel = (model, orientation = "column") => ({
+	...model,
+	layout: compactRow(model.layout, orientation),
+	maximizedTabsetId: void 0
+});
+
 //#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 {
+	if (data.type === "tabset") return {
 		id: String(data.tabsetId),
 		kind: "tabset"
 	};
-	if (data?.type === "external") {
+	if (data.type === "external") {
 		if (!isTabFactory(data.createTab)) {
 			console.warn("[dashfoo] external drag source is missing its createTab function");
 			return null;
@@ -571,7 +619,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 +643,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";
@@ -628,13 +677,13 @@ const PREVIEW_OFFSET = {
 	y: 8
 };
 const labelOf = (source) => {
-	const raw = source?.data?.label;
-	return typeof raw === "string" ? raw : "";
+	if (typeof source?.data.label !== "string") return "";
+	return source.data.label;
 };
 const DragPreviewOverlay = ({ manager }) => {
 	const [chip, setChip] = useState(null);
 	useEffect(() => {
-		const offStart = manager.monitor.addEventListener("dragstart", (event) => {
+		const handleStart = (event) => {
 			const source = event.operation.source;
 			if (!source) return;
 			const rect = source.element?.getBoundingClientRect();
@@ -644,21 +693,24 @@ const DragPreviewOverlay = ({ manager }) => {
 				x: PREVIEW_OFFSET.x + (rect ? point.x - rect.left : 0),
 				y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
 			});
-		});
-		const offEnd = manager.monitor.addEventListener("dragend", () => {
+		};
+		const handleEnd = () => {
 			setChip(null);
-		});
+		};
+		manager.monitor.addEventListener("dragstart", handleStart);
+		manager.monitor.addEventListener("dragend", handleEnd);
 		return () => {
-			offStart();
-			offEnd();
+			manager.monitor.removeEventListener("dragstart", handleStart);
+			manager.monitor.removeEventListener("dragend", handleEnd);
 		};
 	}, [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 +726,8 @@ const DragPreviewOverlay = ({ manager }) => {
 };
 
 //#endregion
-//#region src/components/drag-root.tsx
+//#region src/components/dashfoo-drag-provider.tsx
+const isScopedTargetData = (data) => typeof data.layerId === "string" && typeof data.tabsetId === "string";
 const DashfooDragProvider = ({ children }) => {
 	const [manager] = useState(createDragManager);
 	useInsertionEffect(() => () => {
@@ -688,33 +741,29 @@ 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;
 			const data = target?.data;
-			const scope = data?.layerId === void 0 ? void 0 : scopes.get(data.layerId);
+			const scope = data && isScopedTargetData(data) ? scopes.get(data.layerId) : void 0;
 			const element = target?.element;
-			if (!scope || data?.tabsetId === void 0 || !(element instanceof HTMLElement)) return null;
+			if (!scope || !data || !isScopedTargetData(data) || !(element instanceof HTMLElement)) return null;
 			return {
 				element,
 				scope,
 				tabsetId: data.tabsetId
 			};
 		};
-		let intentLayerId = null;
 		const syncIntent = () => {
 			const operation = manager.dragOperation;
 			const found = scopedTarget();
 			const draggedId = operation.source ? String(operation.source.id) : void 0;
 			const intent = found === null ? null : found.scope.resolveIntent(found.tabsetId, found.element, operation.position.current, draggedId);
-			intentLayerId = intent === null || found === null ? null : found.scope.layerId;
 			actorRef.send({
-				intent,
+				drop: intent === null || found === null ? null : {
+					intent,
+					scope: found.scope.layerId
+				},
 				type: "OVER"
 			});
 		};
@@ -726,19 +775,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,18 +804,19 @@ 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 offEnd = manager.monitor.addEventListener("dragend", handleEnd);
+		manager.monitor.addEventListener("dragstart", handleStart);
+		manager.monitor.addEventListener("dragmove", scheduleResolve);
+		manager.monitor.addEventListener("collision", scheduleResolve);
+		manager.monitor.addEventListener("dragend", handleEnd);
 		return () => {
+			cancelPendingResolve();
 			commitSubscription.unsubscribe();
-			offStart();
-			offMove();
-			offCollision();
-			offEnd();
+			manager.monitor.removeEventListener("dragstart", handleStart);
+			manager.monitor.removeEventListener("dragmove", scheduleResolve);
+			manager.monitor.removeEventListener("collision", scheduleResolve);
+			manager.monitor.removeEventListener("dragend", handleEnd);
 		};
 	}, [
 		actorRef,
@@ -794,19 +852,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 +888,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 +911,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 +943,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 +1130,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,22 +1143,35 @@ 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 rect = panel.getBoundingClientRect();
+		const visibleGeometry = {
+			height: minimized ? geometry.height : rect.height,
+			left: rect.left,
+			top: rect.top,
+			width: minimized ? geometry.width : rect.width
+		};
 		const gesture = {
 			bounds: {
 				height: parent?.clientHeight ?? 0,
 				width: parent?.clientWidth ?? 0
 			},
 			edges: edgeKey === void 0 ? null : EDGE_BY_KEY.get(edgeKey) ?? null,
+			initialStyle: {
+				height: panel.style.height,
+				left: panel.style.left,
+				top: panel.style.top,
+				width: panel.style.width
+			},
+			latest: visibleGeometry,
+			moved: false,
 			pointerId: event.pointerId,
-			start: geometry,
+			start: visibleGeometry,
 			startX: event.clientX,
 			startY: event.clientY
 		};
 		gestureRef.current = gesture;
-		latestRef.current = geometry;
 		if (gesture.edges) panel.setPointerCapture(event.pointerId);
 	};
 	const handlePointerUp = (event) => {
@@ -1104,11 +1180,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 +1196,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 +1206,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,13 +1220,8 @@ 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;
-		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`;
-		}
+		if (!gesture.moved) return;
+		Object.assign(panel.style, gesture.initialStyle);
 	};
 	return {
 		handlers: {
@@ -1160,14 +1231,11 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 			onPointerUp: handlePointerUp
 		},
 		ref: setPanel,
-		style: minimized ? {
-			left: geometry.left,
-			top: geometry.top
-		} : {
-			height: geometry.height,
-			left: geometry.left,
-			top: geometry.top,
-			width: geometry.width
+		style: {
+			height: minimized ? void 0 : `min(${geometry.height}px, 100dvh)`,
+			left: `clamp(0px, ${geometry.left}px, calc(100vw - min(${minimized ? CHIP_SIZE.width : geometry.width}px, 100vw)))`,
+			top: `clamp(0px, ${geometry.top}px, calc(100dvh - min(${minimized ? CHIP_SIZE.height : geometry.height}px, 100dvh)))`,
+			width: minimized ? void 0 : `min(${geometry.width}px, 100vw)`
 		}
 	};
 };
@@ -1205,6 +1273,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;
@@ -1214,23 +1371,39 @@ const rootStyle = {
 	position: "relative",
 	width: "100%"
 };
-const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = true, draggableTabsets = true, editable = true, floatable = false, keepMounted = false, maximizable = true, model, renamableTabs = true, renderTab, renderTabLabel, renderTabsetToolbar, resizableSplits = true, restructurable = true, rootRef, snap, style, ...props }) => {
+const resolveCapabilities = (global, options) => {
+	const structural = options.editable && options.restructurable;
+	return {
+		closableTabs: options.editable && options.closableTabs && global.tabEnableClose !== false,
+		draggableTabs: structural && options.draggableTabs && global.tabEnableDrag !== false,
+		draggableTabsets: structural && options.draggableTabsets,
+		floatable: structural && options.floatable,
+		maximizable: options.maximizable && global.tabSetEnableMaximize !== false,
+		renamableTabs: options.editable && options.renamableTabs && global.tabEnableRename !== false,
+		resizableSplits: structural && options.resizableSplits && global.enableSplitResize !== false
+	};
+};
+const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = true, draggableTabsets = true, editable = true, floatable = false, keepMounted = false, maximizable = true, model, renamableTabs = true, renderers, resizableSplits = true, restructurable = true, rootRef, snap, style, ...props }) => {
 	const global = model.global;
 	const snapshot = {
-		closableTabs: editable && closableTabs && global.tabEnableClose !== false,
+		...resolveCapabilities(global, {
+			closableTabs,
+			draggableTabs,
+			draggableTabsets,
+			editable,
+			floatable,
+			maximizable,
+			renamableTabs,
+			resizableSplits,
+			restructurable
+		}),
 		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,
+		renderTab: renderers.tab,
+		renderTabLabel: renderers.tabLabel,
+		renderTabsetToolbar: renderers.tabsetToolbar,
 		snap: snap ?? global.snap ?? null,
 		splitDock: global.enableSplitDock !== false,
 		tabLocation: global.tabLocation ?? "top",
@@ -1241,14 +1414,11 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 	useLayoutEffect(() => {
 		store.setState(snapshot);
 	});
-	const layoutStyle = global.splitterSize === void 0 ? {
+	const layoutStyle = {
 		...rootStyle,
 		...style
-	} : {
-		...rootStyle,
-		"--dashfoo-splitter-size": `${global.splitterSize}px`,
-		...style
 	};
+	if (global.splitterSize !== void 0) layoutStyle["--dashfoo-splitter-size"] = `${global.splitterSize}px`;
 	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
 		value: store,
 		children: /* @__PURE__ */ jsx("div", {
@@ -1261,10 +1431,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 +1570,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 +1585,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 	},
 	editingTabId: null,
 	overflowItems: [],
+	pendingCloseTabId: null,
 	registerRenameInput: () => {
 		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
 		return () => {
@@ -1440,7 +1609,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);
@@ -1510,8 +1678,9 @@ const TabPanel = ({ render, tab }) => {
 	const renderTab = useLayout((state) => state.renderTab);
 	return render ? render(tab) : renderTab(tab);
 };
-const TabsetContent = ({ children, style, ...props }) => {
+const TabsetContent = forwardRef(({ children, style, ...props }, ref) => {
 	const node = useTabset((state) => state.node);
+	const editingTabId = useTabset((state) => state.editingTabId);
 	const visualSelected = useTabset((state) => state.visualSelected);
 	const keepMounted = useLayout((state) => state.keepMounted);
 	const mergedStyle = {
@@ -1520,11 +1689,13 @@ const TabsetContent = ({ children, style, ...props }) => {
 	};
 	if (keepMounted && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */ createElement("div", {
 		...props,
-		"aria-labelledby": tabDomId(node.id, tab.id),
+		"aria-label": editingTabId === tab.id ? tab.name : void 0,
+		"aria-labelledby": editingTabId === tab.id ? void 0 : tabDomId(node.id, tab.id),
 		"data-dashfoo": "tabcontent",
 		hidden: index !== visualSelected || void 0,
 		id: index === visualSelected ? panelDomId(node.id) : void 0,
 		key: tab.id,
+		ref: index === visualSelected ? ref : void 0,
 		role: index === visualSelected ? "tabpanel" : void 0,
 		style: mergedStyle,
 		tabIndex: index === visualSelected ? 0 : void 0
@@ -1535,9 +1706,11 @@ const TabsetContent = ({ children, style, ...props }) => {
 	const active = node.children[visualSelected];
 	if (active) return /* @__PURE__ */ jsx("div", {
 		...props,
-		"aria-labelledby": tabDomId(node.id, active.id),
+		"aria-label": editingTabId === active.id ? active.name : void 0,
+		"aria-labelledby": editingTabId === active.id ? void 0 : tabDomId(node.id, active.id),
 		"data-dashfoo": "tabcontent",
 		id: panelDomId(node.id),
+		ref,
 		role: "tabpanel",
 		style: mergedStyle,
 		tabIndex: 0,
@@ -1549,12 +1722,14 @@ const TabsetContent = ({ children, style, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-dashfoo": "tabcontent",
+		ref,
 		style: mergedStyle
 	});
-};
+});
+TabsetContent.displayName = "TabsetContent";
 
 //#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 +1817,6 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			case "Escape":
 				event.preventDefault();
 				closeAndReturnFocus();
-				break;
-			default: break;
 		}
 	};
 	const handleFocusOut = (event) => {
@@ -1689,7 +1862,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 +1873,90 @@ 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 = forwardRef(({ defaultValue, onBlur, onKeyDown, ...props }, userRef) => {
+	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"
+	});
+});
+RenameEditor.displayName = "RenameEditor";
+const TabsetRenameInput = forwardRef((props, ref) => {
+	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,
+		ref
+	});
+});
+TabsetRenameInput.displayName = "TabsetRenameInput";
+const TabsetCloseButton = forwardRef(({ children, onClick, ...props }, ref) => {
+	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,
+		ref,
+		tabIndex: index === visualSelected ? 0 : -1,
+		type: "button",
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+});
+TabsetCloseButton.displayName = "TabsetCloseButton";
+
 //#endregion
 //#region src/hooks/use-tab-overflow.ts
 const overflowingIds = (tablist) => {
@@ -1711,13 +1968,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();
@@ -1747,7 +2005,7 @@ const tabsetStyle = {
 	minWidth: 0,
 	width: "100%"
 };
-const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
+const TabsetRoot = forwardRef(({ children, node, style, ...props }, userRef) => {
 	const closableTabs = useLayout((state) => state.closableTabs);
 	const dispatch = useLayout((state) => state.dispatch);
 	const maximizable = useLayout((state) => state.maximizable);
@@ -1779,7 +2037,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 +2051,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();
@@ -1823,21 +2085,12 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 			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);
-};
+});
+TabsetRoot.displayName = "TabsetRoot";
 
 //#endregion
 //#region src/components/tabset/tabset-tab.tsx
-const TabsetTab = ({ children, ref: userRef, tab, ...props }) => {
+const TabsetTab = forwardRef(({ children, tab, ...props }, userRef) => {
 	const store = useContext(TabsetStoreContext);
 	const node = useTabset((state) => state.node);
 	const editing = useTabset((state) => state.editingTabId === tab.id);
@@ -1872,8 +2125,9 @@ const TabsetTab = ({ children, ref: userRef, tab, ...props }) => {
 			children
 		})
 	});
-};
-const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...props }) => {
+});
+TabsetTab.displayName = "TabsetTab";
+const TabsetTrigger = forwardRef(({ children, onClick, onDoubleClick, ...props }, userRef) => {
 	const { index, tab } = useTab();
 	const node = useTabset((state) => state.node);
 	const editing = useTabset((state) => state.editingTabId === tab.id);
@@ -1912,163 +2166,8 @@ const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...prop
 		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"
-	});
-};
-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, {})
-	});
-};
+TabsetTrigger.displayName = "TabsetTrigger";
 
 //#endregion
 //#region src/components/tabset/tabset-tablist.tsx
@@ -2081,50 +2180,60 @@ const tablistStyle = {
 	minWidth: 0,
 	overflowX: "auto"
 };
-const TabsetTabStrip = ({ style, ...props }) => /* @__PURE__ */ jsx("div", {
+const TabsetTabStrip = forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
 	"data-dashfoo": "tabstrip",
+	ref,
 	style: {
 		...stripStyle,
 		...style
 	}
-});
-const TabsetTablist = ({ onKeyDown, ref: userRef, style, ...props }) => {
+}));
+TabsetTabStrip.displayName = "TabsetTabStrip";
+const TabsetTablist = forwardRef(({ "aria-label": ariaLabel, children, onKeyDown, style, ...props }, userRef) => {
 	const node = useTabset((state) => state.node);
 	const registerTablist = useTabset((state) => state.registerTablist);
 	const selectTab = useTabset((state) => state.selectTab);
+	const editingTabId = useTabset((state) => state.editingTabId);
+	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 next = {
-			ArrowLeft: (node.selected - 1 + count) % count,
-			ArrowRight: (node.selected + 1) % count,
-			End: count - 1,
-			Home: 0
-		}[event.key];
+		const from = Math.max(visualSelected, 0);
+		const next = (/* @__PURE__ */ new Map([
+			["ArrowLeft", (from - 1 + count) % count],
+			["ArrowRight", (from + 1) % count],
+			["End", count - 1],
+			["Home", 0]
+		])).get(event.key);
 		if (next === void 0) return;
 		event.preventDefault();
 		selectTab(next, { focus: true });
 	};
 	const refCallback = useMemo(() => mergeRefs(registerTablist, userRef), [registerTablist, userRef]);
-	return /* @__PURE__ */ jsx("div", {
-		"aria-label": node.name ?? "Tabs",
+	const ownedTabs = node.children.filter((tab) => tab.id !== editingTabId).map((tab) => tabDomId(node.id, tab.id)).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		"aria-orientation": "horizontal",
 		"data-dashfoo": "tablist",
 		onKeyDown: handleKeyDown,
 		ref: refCallback,
-		role: "tablist",
 		style: {
 			...tablistStyle,
 			...style
 		},
-		tabIndex: -1
+		tabIndex: -1,
+		children: [ownedTabs ? /* @__PURE__ */ jsx("span", {
+			"aria-label": ariaLabel ?? node.name ?? "Tabs",
+			"aria-orientation": "horizontal",
+			"aria-owns": ownedTabs,
+			role: "tablist"
+		}) : null, children]
 	});
-};
+});
+TabsetTablist.displayName = "TabsetTablist";
 
 //#endregion
 //#region src/components/tabset/tabset-toolbar.tsx
@@ -2134,22 +2243,42 @@ const toolbarStyle = {
 	flexShrink: 0,
 	marginInlineStart: "auto"
 };
-const TabsetToolbar = ({ style, ...props }) => /* @__PURE__ */ jsx("div", {
+const TabsetToolbar = forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
 	"data-dashfoo": "tabset-toolbar",
+	ref,
 	style: {
 		...toolbarStyle,
 		...style
 	}
-});
-const TabsetGrip = ({ children, ref: userRef, ...props }) => {
-	const activeTabName = useTabset((state) => state.activeTab?.name ?? "");
+}));
+TabsetToolbar.displayName = "TabsetToolbar";
+/**
+* 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 = forwardRef(({ children, ...props }, userRef) => {
+	const activeTabName = useTabset((state) => state.activeTab?.name ?? "");
 	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",
@@ -2159,12 +2288,13 @@ const TabsetGrip = ({ children, ref: userRef, ...props }) => {
 		type: "button",
 		children: children ?? /* @__PURE__ */ jsx(GripIcon, {})
 	});
-};
-const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
+});
+TabsetGrip.displayName = "TabsetGrip";
+const TabsetMaximizeButton = forwardRef(({ children, onClick, ...props }, ref) => {
 	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();
@@ -2176,21 +2306,17 @@ const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
 		"aria-pressed": isMaximized,
 		"data-dashfoo": "tabset-maximize",
 		onClick: handleClick,
+		ref,
 		type: "button",
 		children: children ?? /* @__PURE__ */ jsx(MaximizeIcon, { maximized: isMaximized })
 	});
-};
-const TabsetFloatButton = ({ children, onClick, ...props }) => {
-	const floatable = useLayout((state) => state.floatable);
+});
+TabsetMaximizeButton.displayName = "TabsetMaximizeButton";
+const TabsetFloatButton = forwardRef(({ children, onClick, ...props }, ref) => {
 	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);
@@ -2206,24 +2332,23 @@ const TabsetFloatButton = ({ children, onClick, ...props }) => {
 		...props,
 		"data-dashfoo": "tabset-float",
 		onClick: handleClick,
+		ref,
 		type: "button",
 		children: children ?? /* @__PURE__ */ jsx(FloatIcon, {})
 	});
-};
+});
+TabsetFloatButton.displayName = "TabsetFloatButton";
 
 //#endregion
 //#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 +2400,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 +2414,7 @@ const RowView = ({ node, renderTabset }) => {
 			});
 		},
 		resizableSplits,
-		snap: effectiveSnap
+		snap: snapGrid
 	});
 	return /* @__PURE__ */ jsx(Group, {
 		"data-dashfoo": "row",
@@ -2589,8 +2715,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 +2731,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(() => model === void 0 ? resolvePersist(persist) : null, [model, persist]);
+	const persistence = usePersistence(persistConfig, defaultModel);
 	const handleModelChange = useCallback((next, action) => {
 		persistence.save(next);
 		onModelChange?.(next, action);
@@ -2618,6 +2745,14 @@ const DashfooLayout = forwardRef((props, ref) => {
 		onMaximizedTabsetChange,
 		onModelChange: handleModelChange
 	});
+	const { setModel } = store;
+	const appliedInitialModel = useRef(persistence.initialModel);
+	useEffect(() => {
+		if (persistence.initialModel !== void 0 && persistence.initialModel !== appliedInitialModel.current) {
+			appliedInitialModel.current = persistence.initialModel;
+			setModel(persistence.initialModel);
+		}
+	}, [persistence.initialModel, setModel]);
 	const hasSharedManager = useContext(SharedDragManagerContext) !== null;
 	useImperativeHandle(ref, () => ({
 		addTab: (tab, target) => {
@@ -2694,16 +2829,36 @@ const DashfooLayout = forwardRef((props, ref) => {
 		}
 		return /* @__PURE__ */ jsx(Component, { node: tab });
 	}, [components, factory]);
+	const renderers = useMemo(() => ({
+		tab: renderTab,
+		tabLabel: renderTabLabel,
+		tabsetToolbar: renderTabsetToolbar
+	}), [
+		renderTab,
+		renderTabLabel,
+		renderTabsetToolbar
+	]);
 	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: compactModel(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 +2869,12 @@ const DashfooLayout = forwardRef((props, ref) => {
 		editable,
 		floatable,
 		keepMounted,
-		maximizable,
+		maximizable: presentation.maximizable,
 		model: view,
 		renamableTabs,
-		renderTab,
-		renderTabLabel,
-		renderTabsetToolbar,
+		renderers,
 		resizableSplits,
-		restructurable: !isCompact,
+		restructurable: presentation.restructurable,
 		rootRef: containerRef,
 		snap,
 		children: hasSharedManager ? tree : /* @__PURE__ */ jsx(DashfooDragProvider, { children: tree })
@@ -2730,31 +2883,62 @@ const DashfooLayout = forwardRef((props, ref) => {
 DashfooLayout.displayName = "DashfooLayout";
 
 //#endregion
-//#region src/components/panel.tsx
-const PanelRoot = (props) => /* @__PURE__ */ jsx("div", {
+//#region src/components/panel-badge.tsx
+const PanelBadge = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", {
 	...props,
-	"data-dashfoo": "panel"
-});
-const PanelHeader = (props) => /* @__PURE__ */ jsx("div", {
+	"data-dashfoo": "panel-badge",
+	ref
+}));
+PanelBadge.displayName = "PanelBadge";
+
+//#endregion
+//#region src/components/panel-body.tsx
+const PanelBody = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
-	"data-dashfoo": "panel-header"
-});
-const PanelBody = (props) => /* @__PURE__ */ jsx("div", {
+	"data-dashfoo": "panel-body",
+	ref,
+	tabIndex: props.tabIndex ?? 0
+}));
+PanelBody.displayName = "PanelBody";
+
+//#endregion
+//#region src/components/panel-header.tsx
+const PanelHeader = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
-	"data-dashfoo": "panel-body"
-});
-const PanelTitle = (props) => /* @__PURE__ */ jsx("span", {
+	"data-dashfoo": "panel-header",
+	ref
+}));
+PanelHeader.displayName = "PanelHeader";
+
+//#endregion
+//#region src/components/panel-icon.tsx
+const PanelIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", {
 	...props,
-	"data-dashfoo": "panel-title"
-});
-const PanelIcon = (props) => /* @__PURE__ */ jsx("span", {
+	"data-dashfoo": "panel-icon",
+	ref
+}));
+PanelIcon.displayName = "PanelIcon";
+
+//#endregion
+//#region src/components/panel-root.tsx
+const PanelRoot = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
-	"data-dashfoo": "panel-icon"
-});
-const PanelBadge = (props) => /* @__PURE__ */ jsx("span", {
+	"data-dashfoo": "panel",
+	ref
+}));
+PanelRoot.displayName = "PanelRoot";
+
+//#endregion
+//#region src/components/panel-title.tsx
+const PanelTitle = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", {
 	...props,
-	"data-dashfoo": "panel-badge"
-});
+	"data-dashfoo": "panel-title",
+	ref
+}));
+PanelTitle.displayName = "PanelTitle";
+
+//#endregion
+//#region src/components/panel.tsx
 const Panel = {
 	Badge: PanelBadge,
 	Body: PanelBody,