@dashfoo/react 0.8.0 → 0.8.2

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { canRedo, canUndo, dashfooMachine, decideSnap, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, resolveSnapGrid, 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";
@@ -178,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"
@@ -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,34 +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 [load] = useState(() => {
-		if (config === null) return { kind: "absent" };
-		const raw = config.storage.getItem(config.key);
-		if (raw === null) return { kind: "absent" };
+	}, [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 || defaultModel === void 0) return;
 		try {
-			return {
-				kind: "loaded",
-				model: 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) {
-			return {
-				error,
-				kind: "corrupt"
-			};
+			console.warn("[dashfoo] failed to load persisted layout", error);
 		}
-	});
-	const initialModel = load.kind === "loaded" && defaultModel !== void 0 ? load.model : defaultModel;
-	useEffect(() => {
-		const current = configRef.current;
-		if (current === null || load.kind !== "corrupt") return;
-		console.warn("[dashfoo] discarding unreadable persisted layout", load.error);
-		current.storage.removeItem(current.key);
-	}, [load]);
+	}, [defaultModel]);
 	const loadedKey = useRef(config?.key);
 	useEffect(() => {
 		if (config !== null && config.key !== loadedKey.current) {
@@ -289,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) => {
@@ -326,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,
@@ -353,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();
@@ -381,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);
@@ -513,6 +533,26 @@ 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";
@@ -520,11 +560,11 @@ const isTabFactory = (value) => typeof value === "function";
 * 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;
@@ -637,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();
@@ -653,13 +693,15 @@ 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) => {
@@ -685,6 +727,7 @@ const DragPreviewOverlay = ({ manager }) => {
 
 //#endregion
 //#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(() => () => {
@@ -702,9 +745,9 @@ const DashfooDragProvider = ({ children }) => {
 		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,
@@ -763,17 +806,17 @@ const DashfooDragProvider = ({ children }) => {
 		const commitSubscription = actorRef.on("COMMIT", (emitted) => {
 			scopes.get(emitted.scope)?.commit(emitted.action);
 		});
-		const offStart = manager.monitor.addEventListener("dragstart", handleStart);
-		const offMove = manager.monitor.addEventListener("dragmove", scheduleResolve);
-		const offCollision = manager.monitor.addEventListener("collision", scheduleResolve);
-		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,
@@ -1102,16 +1145,29 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
 		const edgeKey = event.currentTarget.dataset.edge;
 		const parent = panel.offsetParent instanceof HTMLElement ? panel.offsetParent : null;
+		const 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,
-			latest: geometry,
+			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
 		};
@@ -1165,12 +1221,7 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		gestureRef.current = null;
 		if (panel.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
 		if (!gesture.moved) return;
-		panel.style.left = `${gesture.start.left}px`;
-		panel.style.top = `${gesture.start.top}px`;
-		if (!minimized) {
-			panel.style.width = `${gesture.start.width}px`;
-			panel.style.height = `${gesture.start.height}px`;
-		}
+		Object.assign(panel.style, gesture.initialStyle);
 	};
 	return {
 		handlers: {
@@ -1180,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)`
 		}
 	};
 };
@@ -1323,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",
@@ -1350,14 +1414,11 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 	useLayoutEffect(() => {
 		store.setState(snapshot);
 	});
-	const layoutStyle = global.splitterSize === void 0 ? {
-		...rootStyle,
-		...style
-	} : {
+	const layoutStyle = {
 		...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", {
@@ -1617,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 = {
@@ -1627,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
@@ -1642,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,
@@ -1656,9 +1722,11 @@ 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-menu.tsx
@@ -1817,7 +1885,7 @@ const mergeRefs = (...refs) => (value) => {
 
 //#endregion
 //#region src/components/tabset/tabset-rename-input.tsx
-const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props }) => {
+const RenameEditor = forwardRef(({ defaultValue, onBlur, onKeyDown, ...props }, userRef) => {
 	const { tab } = useTab();
 	const cancelRename = useTabset((state) => state.cancelRename);
 	const commitRename = useTabset((state) => state.commitRename);
@@ -1849,16 +1917,21 @@ const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props
 		ref: refCallback,
 		type: "text"
 	});
-};
-const TabsetRenameInput = (props) => {
+});
+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 });
-};
-const TabsetCloseButton = ({ children, onClick, ...props }) => {
+	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);
@@ -1876,11 +1949,13 @@ const TabsetCloseButton = ({ children, onClick, ...props }) => {
 		...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
@@ -1930,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);
@@ -2010,11 +2085,12 @@ const TabsetRoot = ({ children, node, ref: userRef, style, ...props }) => {
 			children
 		})
 	});
-};
+});
+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);
@@ -2049,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);
@@ -2089,7 +2166,8 @@ const TabsetTrigger = ({ children, onClick, onDoubleClick, ref: userRef, ...prop
 		type: "button",
 		children: children ?? (renderTabLabel ? renderTabLabel(tab) : tab.name)
 	});
-};
+});
+TabsetTrigger.displayName = "TabsetTrigger";
 
 //#endregion
 //#region src/components/tabset/tabset-tablist.tsx
@@ -2102,18 +2180,21 @@ 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);
@@ -2122,32 +2203,37 @@ const TabsetTablist = ({ onKeyDown, ref: userRef, style, ...props }) => {
 		const count = node.children.length;
 		if (count === 0) return;
 		const from = Math.max(visualSelected, 0);
-		const next = {
-			ArrowLeft: (from - 1 + count) % count,
-			ArrowRight: (from + 1) % count,
-			End: count - 1,
-			Home: 0
-		}[event.key];
+		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
@@ -2157,14 +2243,16 @@ 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
 	}
-});
+}));
+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.
@@ -2184,7 +2272,7 @@ const useTabsetChrome = () => {
 		overflow: overflowCount > 0
 	};
 };
-const TabsetGrip = ({ children, ref: userRef, ...props }) => {
+const TabsetGrip = forwardRef(({ children, ...props }, userRef) => {
 	const activeTabName = useTabset((state) => state.activeTab?.name ?? "");
 	const node = useTabset((state) => state.node);
 	const { grip } = useTabsetChrome();
@@ -2200,8 +2288,9 @@ 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 toggleMaximize = useTabset((state) => state.toggleMaximize);
 	const { maximize } = useTabsetChrome();
@@ -2217,11 +2306,13 @@ 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 }) => {
+});
+TabsetMaximizeButton.displayName = "TabsetMaximizeButton";
+const TabsetFloatButton = forwardRef(({ children, onClick, ...props }, ref) => {
 	const dispatch = useLayout((state) => state.dispatch);
 	const node = useTabset((state) => state.node);
 	const { float } = useTabsetChrome();
@@ -2241,10 +2332,12 @@ 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
@@ -2638,7 +2731,7 @@ const resolvePersist = (persist) => {
 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 persistConfig = useMemo(() => resolvePersist(persist), [persist]);
+	const persistConfig = useMemo(() => model === void 0 ? resolvePersist(persist) : null, [model, persist]);
 	const persistence = usePersistence(persistConfig, defaultModel);
 	const handleModelChange = useCallback((next, action) => {
 		persistence.save(next);
@@ -2652,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) => {
@@ -2728,12 +2829,21 @@ 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;
 	/** Everything the compact breakpoint changes, decided once. */
 	const presentation = useMemo(() => isCompact ? {
 		maximizable: false,
-		model: stackModel(store.model, responsive?.orientation),
+		model: compactModel(store.model, responsive?.orientation),
 		restructurable: false
 	} : {
 		maximizable,
@@ -2762,9 +2872,7 @@ const DashfooLayout = forwardRef((props, ref) => {
 		maximizable: presentation.maximizable,
 		model: view,
 		renamableTabs,
-		renderTab,
-		renderTabLabel,
-		renderTabsetToolbar,
+		renderers,
 		resizableSplits,
 		restructurable: presentation.restructurable,
 		rootRef: containerRef,
@@ -2775,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,