@dashfoo/react 0.8.3 → 0.9.0

package/dist/index.js

@@ -13,7 +13,7 @@ import { Group, Panel as Panel$1, Separator } from "react-resizable-panels";
 const createTopmostPointerIntersection = (topElementAt = (x, y) => document.elementFromPoint(x, y)) => {
 	let cached = null;
 	const topAt = (x, y) => {
-		if (cached && cached.x === x && cached.y === y) return cached.top;
+		if (cached?.x === x && cached.y === y) return cached.top;
 		const top = topElementAt(x, y);
 		cached = {
 			top,
@@ -602,7 +602,7 @@ const insertionIndex = (rects, pointerX) => {
 };
 const INSERTION_LINE_WIDTH = 4;
 const insertionLineRect = (stripRect, itemRects, index) => {
-	const at = itemRects[index];
+	const at = itemRects.at(index);
 	const last = itemRects.at(-1);
 	const left = (at?.x ?? (last ? last.x + last.width : stripRect.x)) - INSERTION_LINE_WIDTH / 2;
 	return {
@@ -620,26 +620,16 @@ const shouldAllowDrop = (draggedId, targetId, tabIds) => {
 
 //#endregion
 //#region src/components/drag-preview-overlay.tsx
-const overlayBase = {
-	boxSizing: "border-box",
-	pointerEvents: "none",
-	position: "fixed",
-	transition: "var(--dashfoo-dock-transition, left 60ms, top 60ms, width 60ms, height 60ms)",
-	zIndex: 9999
-};
-const paneStyle = (zone) => ({
-	...overlayBase,
-	background: "var(--dashfoo-dock-fill, oklch(0.556 0 0 / 0.18))",
-	border: "var(--dashfoo-dock-border-width, 1px) solid var(--dashfoo-dock-border, oklch(0.708 0 0 / 0.75))",
-	borderRadius: "var(--dashfoo-dock-radius, 6px)",
-	height: zone.height,
-	left: zone.x,
-	top: zone.y,
-	width: zone.width
-});
-const lineStyle = (zone) => ({
-	...paneStyle(zone),
-	borderRadius: "var(--dashfoo-dock-line-radius, 2px)"
+const DockZone = ({ insertion = false, zIndex, zone }) => /* @__PURE__ */ jsx("div", {
+	"data-dashfoo": "dock-indicator",
+	"data-insertion": insertion || void 0,
+	style: {
+		"--dashfoo-dock-height": `${zone.height}px`,
+		"--dashfoo-dock-left": `${zone.x}px`,
+		"--dashfoo-dock-top": `${zone.y}px`,
+		"--dashfoo-dock-width": `${zone.width}px`,
+		"--dashfoo-dock-z": zIndex
+	}
 });
 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 }) => {
@@ -649,27 +639,22 @@ const DockIndicator = ({ actorRef, getTabsetElement }) => {
 	const draggedId = drag.subject.id;
 	const element = getTabsetElement(intent.targetId);
 	if (!element) return null;
-	const zIndex = element.closest("[data-dashfoo=\"float\"]") ? overlayBase.zIndex : "auto";
+	const zIndex = element.closest("[data-dashfoo=\"float\"]") ? 9999 : "auto";
 	if (intent.location === "center") {
 		const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
 		if (strip) {
 			const line = insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0);
-			return /* @__PURE__ */ jsx("div", {
-				"data-dashfoo": "dock-indicator",
-				style: {
-					...lineStyle(line),
-					zIndex
-				}
+			return /* @__PURE__ */ jsx(DockZone, {
+				insertion: true,
+				zIndex,
+				zone: line
 			});
 		}
 	}
 	const zone = zoneRect(element.getBoundingClientRect(), intent.location);
-	return /* @__PURE__ */ jsx("div", {
-		"data-dashfoo": "dock-indicator",
-		style: {
-			...paneStyle(zone),
-			zIndex
-		}
+	return /* @__PURE__ */ jsx(DockZone, {
+		zIndex,
+		zone
 	});
 };
 const PREVIEW_OFFSET = {
@@ -714,11 +699,8 @@ const DragPreviewOverlay = ({ manager }) => {
 		children: chip === null ? null : /* @__PURE__ */ jsx("div", {
 			"data-dashfoo": "drag-preview",
 			style: {
-				left: 0,
-				position: "absolute",
-				top: 0,
-				transform: `translate(${chip.x}px, ${chip.y}px)`,
-				width: "max-content"
+				"--dashfoo-preview-x": `${chip.x}px`,
+				"--dashfoo-preview-y": `${chip.y}px`
 			},
 			children: chip.label
 		})
@@ -960,119 +942,62 @@ const useHasFloatLayer = () => useContext(FloatLayerContext);
 
 //#endregion
 //#region src/components/float-resize-handles.ts
-const EDGE_THICKNESS = 12;
-const EDGE_OFFSET = -6;
-const CORNER_SIZE = 20;
-const CORNER_OFFSET = -8;
-const EDGE_INSET = 12;
 const RESIZE_HANDLES = [
 	{
 		edges: {
 			x: 0,
 			y: -1
 		},
-		key: "n",
-		style: {
-			cursor: "ns-resize",
-			height: EDGE_THICKNESS,
-			insetInline: EDGE_INSET,
-			top: EDGE_OFFSET
-		}
+		key: "n"
 	},
 	{
 		edges: {
 			x: 0,
 			y: 1
 		},
-		key: "s",
-		style: {
-			bottom: EDGE_OFFSET,
-			cursor: "ns-resize",
-			height: EDGE_THICKNESS,
-			insetInline: EDGE_INSET
-		}
+		key: "s"
 	},
 	{
 		edges: {
 			x: 1,
 			y: 0
 		},
-		key: "e",
-		style: {
-			cursor: "ew-resize",
-			insetBlock: EDGE_INSET,
-			right: EDGE_OFFSET,
-			width: EDGE_THICKNESS
-		}
+		key: "e"
 	},
 	{
 		edges: {
 			x: -1,
 			y: 0
 		},
-		key: "w",
-		style: {
-			cursor: "ew-resize",
-			insetBlock: EDGE_INSET,
-			left: EDGE_OFFSET,
-			width: EDGE_THICKNESS
-		}
+		key: "w"
 	},
 	{
 		edges: {
 			x: 1,
 			y: -1
 		},
-		key: "ne",
-		style: {
-			cursor: "nesw-resize",
-			height: CORNER_SIZE,
-			right: CORNER_OFFSET,
-			top: CORNER_OFFSET,
-			width: CORNER_SIZE
-		}
+		key: "ne"
 	},
 	{
 		edges: {
 			x: -1,
 			y: -1
 		},
-		key: "nw",
-		style: {
-			cursor: "nwse-resize",
-			height: CORNER_SIZE,
-			left: CORNER_OFFSET,
-			top: CORNER_OFFSET,
-			width: CORNER_SIZE
-		}
+		key: "nw"
 	},
 	{
 		edges: {
 			x: 1,
 			y: 1
 		},
-		key: "se",
-		style: {
-			bottom: CORNER_OFFSET,
-			cursor: "nwse-resize",
-			height: CORNER_SIZE,
-			right: CORNER_OFFSET,
-			width: CORNER_SIZE
-		}
+		key: "se"
 	},
 	{
 		edges: {
 			x: -1,
 			y: 1
 		},
-		key: "sw",
-		style: {
-			bottom: CORNER_OFFSET,
-			cursor: "nesw-resize",
-			height: CORNER_SIZE,
-			left: CORNER_OFFSET,
-			width: CORNER_SIZE
-		}
+		key: "sw"
 	}
 ];
 const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
@@ -1130,8 +1055,9 @@ const CHIP_SIZE = {
 	width: 168
 };
 const TAP_SLOP = 4;
-/** Writes inline style and dispatches only on pointer-up: routing every move
-* through the model would re-render the whole tree behind the float. */
+const releaseCapture = (panel, pointerId) => {
+	if (panel.hasPointerCapture?.(pointerId)) panel.releasePointerCapture(pointerId);
+};
 const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) => {
 	const panelRef = useRef(null);
 	const gestureRef = useRef(null);
@@ -1142,7 +1068,7 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		const panel = panelRef.current;
 		if (!panel || !editable) return;
 		const prior = gestureRef.current;
-		if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
+		if (prior) releaseCapture(panel, prior.pointerId);
 		const edgeKey = event.currentTarget.dataset.edge;
 		const parent = panel.offsetParent instanceof HTMLElement ? panel.offsetParent : null;
 		const rect = panel.getBoundingClientRect();
@@ -1159,10 +1085,10 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 			},
 			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
+				"--dashfoo-float-height": panel.style.getPropertyValue("--dashfoo-float-height"),
+				"--dashfoo-float-left": panel.style.getPropertyValue("--dashfoo-float-left"),
+				"--dashfoo-float-top": panel.style.getPropertyValue("--dashfoo-float-top"),
+				"--dashfoo-float-width": panel.style.getPropertyValue("--dashfoo-float-width")
 			},
 			latest: visibleGeometry,
 			moved: false,
@@ -1179,7 +1105,7 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		if (!gesture || event.pointerId !== gesture.pointerId) return;
 		gestureRef.current = null;
 		const panel = panelRef.current;
-		if (panel?.hasPointerCapture?.(event.pointerId) === true) panel.releasePointerCapture(event.pointerId);
+		if (panel) releaseCapture(panel, event.pointerId);
 		if (!gesture.moved) {
 			onTap();
 			return;
@@ -1207,11 +1133,11 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 			top: gesture.start.top + dy
 		}, gesture.bounds, minimized ? CHIP_SIZE : void 0);
 		gesture.latest = next;
-		panel.style.left = `${next.left}px`;
-		panel.style.top = `${next.top}px`;
+		panel.style.setProperty("--dashfoo-float-left", `${next.left}px`);
+		panel.style.setProperty("--dashfoo-float-top", `${next.top}px`);
 		if (!minimized) {
-			panel.style.width = `${next.width}px`;
-			panel.style.height = `${next.height}px`;
+			panel.style.setProperty("--dashfoo-float-width", `${next.width}px`);
+			panel.style.setProperty("--dashfoo-float-height", `${next.height}px`);
 		}
 	};
 	const handlePointerCancel = (event) => {
@@ -1219,9 +1145,9 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		const panel = panelRef.current;
 		if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
 		gestureRef.current = null;
-		if (panel.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
+		releaseCapture(panel, event.pointerId);
 		if (!gesture.moved) return;
-		Object.assign(panel.style, gesture.initialStyle);
+		for (const [property, value] of Object.entries(gesture.initialStyle)) panel.style.setProperty(property, value);
 	};
 	return {
 		handlers: {
@@ -1232,10 +1158,10 @@ const useFloatGesture = ({ editable, geometry, minimized, onCommit, onTap }) =>
 		},
 		ref: setPanel,
 		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)`
+			"--dashfoo-float-height": `${geometry.height}px`,
+			"--dashfoo-float-left": `${geometry.left}px`,
+			"--dashfoo-float-top": `${geometry.top}px`,
+			"--dashfoo-float-width": `${geometry.width}px`
 		}
 	};
 };
@@ -1275,16 +1201,15 @@ 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",
+	"data-dashfoo": "icon",
 	fill: "none",
 	height: "12",
 	stroke: "currentColor",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	strokeWidth: "2",
-	style: iconStyle,
 	viewBox: "0 0 24 24",
 	width: "12",
 	children
@@ -1365,12 +1290,6 @@ const DockIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
 //#endregion
 //#region src/components/layout-root.tsx
 const DEFAULT_TABSET_MIN_SIZE = 320;
-const rootStyle = {
-	display: "flex",
-	height: "100%",
-	position: "relative",
-	width: "100%"
-};
 const resolveCapabilities = (global, options) => {
 	const structural = options.editable && options.restructurable;
 	return {
@@ -1383,7 +1302,7 @@ const resolveCapabilities = (global, options) => {
 		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 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, ...props }) => {
 	const global = model.global;
 	const snapshot = {
 		...resolveCapabilities(global, {
@@ -1414,18 +1333,13 @@ const LayoutRoot = ({ children, closableTabs = true, dispatch, draggableTabs = t
 	useLayoutEffect(() => {
 		store.setState(snapshot);
 	});
-	const layoutStyle = {
-		...rootStyle,
-		...style
-	};
-	if (global.splitterSize !== void 0) layoutStyle["--dashfoo-splitter-size"] = `${global.splitterSize}px`;
 	return /* @__PURE__ */ jsx(LayoutStoreContext.Provider, {
 		value: store,
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
 			"data-dashfoo": "layout",
 			ref: rootRef,
-			style: layoutStyle,
+			style: { "--dashfoo-splitter-size": global.splitterSize === void 0 ? void 0 : `${global.splitterSize}px` },
 			children
 		})
 	});
@@ -1447,7 +1361,6 @@ const LayoutOverrides = ({ children, overrides }) => {
 		value: store,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-dashfoo": "layout",
-			style: rootStyle,
 			children
 		})
 	});
@@ -1472,10 +1385,9 @@ const layoutFromOrdered = (sizes, children) => children.reduce((layout, child, i
 	return layout;
 }, {});
 const layoutsMatch = (current, expected) => {
-	const currentIds = Object.keys(current);
-	const expectedIds = Object.keys(expected);
-	if (currentIds.length !== expectedIds.length) return false;
-	return expectedIds.every((id) => Math.abs((current[id] ?? NaN) - expected[id]) <= WEIGHT_EPSILON);
+	const expectedEntries = Object.entries(expected);
+	if (Object.keys(current).length !== expectedEntries.length) return false;
+	return expectedEntries.every(([id, weight]) => Math.abs((current[id] ?? NaN) - weight) <= WEIGHT_EPSILON);
 };
 const useSnapResize = ({ children, onWeightsSettled, resizableSplits, snap }) => {
 	const groupRef = useRef(null);
@@ -1536,7 +1448,7 @@ const useSnapResize = ({ children, onWeightsSettled, resizableSplits, snap }) =>
 		if (!resizableSplits) return;
 		const weights = settleSnap(children.map((child) => layout[child.id] ?? child.weight), boundary, snap);
 		if (!weights.some((weight, index) => {
-			const child = children[index];
+			const child = children.at(index);
 			return child !== void 0 && Math.abs(weight - child.weight) > WEIGHT_EPSILON;
 		})) return;
 		onWeightsSettled(weights);
@@ -1631,8 +1543,8 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 			type: "selectTab"
 		});
 		if (options?.focus === true) {
-			const tabId = node.children[index]?.id;
-			if (tabId) tabButtonIn(tablistElement, node.id, tabId)?.focus();
+			const tab = node.children[index];
+			if (tab) tabButtonIn(tablistElement, node.id, tab.id)?.focus();
 		}
 	},
 	startEditing: (tabId) => {
@@ -1669,11 +1581,6 @@ const useTab = () => {
 
 //#endregion
 //#region src/components/tabset/tabset-content.tsx
-const contentStyle = {
-	flex: 1,
-	minHeight: 0,
-	overflow: "auto"
-};
 const TabPanel = ({ render, tab }) => {
 	const renderTab = useLayout((state) => state.renderTab);
 	return render ? render(tab) : renderTab(tab);
@@ -1682,12 +1589,7 @@ 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 = {
-		...contentStyle,
-		...style
-	};
-	if (keepMounted && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */ createElement("div", {
+	if (useLayout((state) => state.keepMounted) && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */ createElement("div", {
 		...props,
 		"aria-label": editingTabId === tab.id ? tab.name : void 0,
 		"aria-labelledby": editingTabId === tab.id ? void 0 : tabDomId(node.id, tab.id),
@@ -1697,13 +1599,13 @@ const TabsetContent = forwardRef(({ children, style, ...props }, ref) => {
 		key: tab.id,
 		ref: index === visualSelected ? ref : void 0,
 		role: index === visualSelected ? "tabpanel" : void 0,
-		style: mergedStyle,
+		style,
 		tabIndex: index === visualSelected ? 0 : void 0
 	}, /* @__PURE__ */ jsx(TabPanel, {
 		render: children,
 		tab
 	})));
-	const active = node.children[visualSelected];
+	const active = visualSelected < 0 ? void 0 : node.children.at(visualSelected);
 	if (active) return /* @__PURE__ */ jsx("div", {
 		...props,
 		"aria-label": editingTabId === active.id ? active.name : void 0,
@@ -1712,7 +1614,7 @@ const TabsetContent = forwardRef(({ children, style, ...props }, ref) => {
 		id: panelDomId(node.id),
 		ref,
 		role: "tabpanel",
-		style: mergedStyle,
+		style,
 		tabIndex: 0,
 		children: /* @__PURE__ */ jsx(TabPanel, {
 			render: children,
@@ -1723,7 +1625,7 @@ const TabsetContent = forwardRef(({ children, style, ...props }, ref) => {
 		...props,
 		"data-dashfoo": "tabcontent",
 		ref,
-		style: mergedStyle
+		style
 	});
 });
 TabsetContent.displayName = "TabsetContent";
@@ -1754,12 +1656,6 @@ const OverflowIcon = () => /* @__PURE__ */ jsxs("svg", {
 		})
 	]
 });
-const menuStyle = {
-	position: "absolute",
-	right: 0,
-	top: "100%",
-	zIndex: 10
-};
 const TabOverflowMenu = ({ items, onSelect }) => {
 	const [open, setOpen] = useState(false);
 	const [activeIndex, setActiveIndex] = useState(0);
@@ -1826,7 +1722,6 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-dashfoo": "tab-overflow-root",
 		ref: rootRef,
-		style: { position: "relative" },
 		children: [/* @__PURE__ */ jsx("button", {
 			"aria-expanded": open,
 			"aria-haspopup": "menu",
@@ -1842,7 +1737,6 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			onBlur: handleFocusOut,
 			onKeyDown: handleMenuKeyDown,
 			role: "menu",
-			style: menuStyle,
 			tabIndex: -1,
 			children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
 				"data-dashfoo": "tab-overflow-item",
@@ -1997,14 +1891,6 @@ const fallbackSelectedIndex = (count, removedIndex) => removedIndex + 1 < count
 
 //#endregion
 //#region src/components/tabset/tabset-root.tsx
-const tabsetStyle = {
-	display: "flex",
-	flexDirection: "column",
-	height: "100%",
-	minHeight: 0,
-	minWidth: 0,
-	width: "100%"
-};
 const TabsetRoot = forwardRef(({ children, node, style, ...props }, userRef) => {
 	const closableTabs = useLayout((state) => state.closableTabs);
 	const dispatch = useLayout((state) => state.dispatch);
@@ -2055,8 +1941,8 @@ const TabsetRoot = forwardRef(({ children, node, style, ...props }, userRef) =>
 		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();
+		const selectedTab = node.children[node.selected];
+		if (selectedTab) tabsetRef.current?.querySelector(`#${CSS.escape(tabDomId(node.id, selectedTab.id))}`)?.focus();
 		else tabsetRef.current?.focus();
 	}, [
 		node.children,
@@ -2077,10 +1963,7 @@ const TabsetRoot = forwardRef(({ children, node, style, ...props }, userRef) =>
 				if (typeof userRef === "function") userRef(element);
 				else if (userRef) userRef.current = element;
 			},
-			style: {
-				...tabsetStyle,
-				...style
-			},
+			style,
 			tabIndex: -1,
 			children
 		})
@@ -2127,7 +2010,7 @@ const TabsetTab = forwardRef(({ children, tab, ...props }, userRef) => {
 	});
 });
 TabsetTab.displayName = "TabsetTab";
-const TabsetTrigger = forwardRef(({ children, onClick, onDoubleClick, ...props }, userRef) => {
+const TabsetTrigger = forwardRef(({ children, onClick, onDoubleClick, onKeyDown, ...props }, userRef) => {
 	const { index, tab } = useTab();
 	const node = useTabset((state) => state.node);
 	const editing = useTabset((state) => state.editingTabId === tab.id);
@@ -2150,6 +2033,21 @@ const TabsetTrigger = forwardRef(({ children, onClick, onDoubleClick, ...props }
 		onDoubleClick?.(event);
 		if (renamable) startEditing(tab.id);
 	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		const count = node.children.length;
+		if (event.defaultPrevented || count === 0) return;
+		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 });
+	};
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": renderTabLabel ? tab.name : void 0,
 		...props,
@@ -2160,6 +2058,7 @@ const TabsetTrigger = forwardRef(({ children, onClick, onDoubleClick, ...props }
 		id: tabDomId(node.id, tab.id),
 		onClick: handleClick,
 		onDoubleClick: handleDoubleClick,
+		onKeyDown: handleKeyDown,
 		ref: refCallback,
 		role: "tab",
 		tabIndex: selected ? 0 : -1,
@@ -2171,59 +2070,24 @@ TabsetTrigger.displayName = "TabsetTrigger";
 
 //#endregion
 //#region src/components/tabset/tabset-tablist.tsx
-const stripStyle = {
-	display: "flex",
-	flexShrink: 0
-};
-const tablistStyle = {
-	display: "flex",
-	minWidth: 0,
-	overflowX: "auto"
-};
 const TabsetTabStrip = forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
 	"data-dashfoo": "tabstrip",
 	ref,
-	style: {
-		...stripStyle,
-		...style
-	}
+	style
 }));
 TabsetTabStrip.displayName = "TabsetTabStrip";
-const TabsetTablist = forwardRef(({ "aria-label": ariaLabel, children, onKeyDown, style, ...props }, userRef) => {
+const TabsetTablist = forwardRef(({ "aria-label": ariaLabel, children, 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 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]);
-	const ownedTabs = node.children.filter((tab) => tab.id !== editingTabId).map((tab) => tabDomId(node.id, tab.id)).join(" ");
+	const ownedTabs = node.children.flatMap((tab) => tab.id === editingTabId ? [] : [tabDomId(node.id, tab.id)]).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		"data-dashfoo": "tablist",
-		onKeyDown: handleKeyDown,
 		ref: refCallback,
-		style: {
-			...tablistStyle,
-			...style
-		},
+		style,
 		tabIndex: -1,
 		children: [ownedTabs ? /* @__PURE__ */ jsx("span", {
 			"aria-label": ariaLabel ?? node.name ?? "Tabs",
@@ -2237,20 +2101,11 @@ TabsetTablist.displayName = "TabsetTablist";
 
 //#endregion
 //#region src/components/tabset/tabset-toolbar.tsx
-const toolbarStyle = {
-	alignItems: "center",
-	display: "flex",
-	flexShrink: 0,
-	marginInlineStart: "auto"
-};
 const TabsetToolbar = forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	...props,
 	"data-dashfoo": "tabset-toolbar",
 	ref,
-	style: {
-		...toolbarStyle,
-		...style
-	}
+	style
 }));
 TabsetToolbar.displayName = "TabsetToolbar";
 /**
@@ -2374,12 +2229,6 @@ const TabsetView = ({ node }) => /* @__PURE__ */ jsx(TabsetRoot, {
 //#region src/components/row-view.tsx
 const dimensionToSize = (dimension) => `${dimension.value}${dimension.unit}`;
 const dimensionToPixels = (dimension) => dimension?.unit === "px" ? dimension.value : void 0;
-const groupStyle = {
-	display: "flex",
-	flex: 1,
-	minHeight: 0,
-	minWidth: 0
-};
 const descendantMinSize = (child, axis, tabsetMinSize) => {
 	const explicit = dimensionToPixels(child.min);
 	if (explicit !== void 0) return explicit;
@@ -2424,7 +2273,6 @@ const RowView = ({ node, renderTabset }) => {
 		onLayoutChange: snapActive ? onLayoutChange : void 0,
 		onLayoutChanged,
 		orientation,
-		style: groupStyle,
 		children: node.children.map((child, index) => {
 			const percent = child.weight / total * 100;
 			let min = child.min ? dimensionToSize(child.min) : void 0;
@@ -2457,31 +2305,6 @@ const RowView = ({ node, renderTabset }) => {
 //#endregion
 //#region src/components/float-panel.tsx
 const floatTitle = (node) => node.name ?? "Panel";
-const titleBarStyle = {
-	alignItems: "center",
-	display: "flex",
-	flexShrink: 0,
-	gap: "0.375rem",
-	touchAction: "none"
-};
-const titleStyle = {
-	flex: 1,
-	minWidth: 0,
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	whiteSpace: "nowrap"
-};
-const dockButtonStyle = {
-	alignItems: "center",
-	cursor: "pointer",
-	display: "inline-flex",
-	flexShrink: 0
-};
-const bodyStyle = {
-	flex: 1,
-	minHeight: 0,
-	position: "relative"
-};
 const FLOAT_OVERRIDES = {
 	draggableTabsets: false,
 	floatable: false,
@@ -2512,7 +2335,6 @@ const FloatTitleEditor = ({ dispatch, node, onDone }) => {
 			event.stopPropagation();
 		},
 		ref: inputRef,
-		style: titleStyle,
 		type: "text"
 	});
 };
@@ -2530,7 +2352,6 @@ const FloatTitle = ({ dispatch, node, renamable }) => {
 		onDoubleClick: renamable ? () => {
 			setEditing(true);
 		} : void 0,
-		style: titleStyle,
 		title: renamable ? "Double-click to rename" : void 0,
 		children: floatTitle(node)
 	});
@@ -2564,10 +2385,11 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 	});
 	const { onPointerDown, ...rootHandlers } = handlers;
 	const frameStyle = {
-		...style,
-		pointerEvents: "auto",
-		position: "absolute",
-		zIndex
+		"--dashfoo-float-height": style["--dashfoo-float-height"],
+		"--dashfoo-float-left": style["--dashfoo-float-left"],
+		"--dashfoo-float-top": style["--dashfoo-float-top"],
+		"--dashfoo-float-width": style["--dashfoo-float-width"],
+		"--dashfoo-float-z": zIndex
 	};
 	if (minimized) return /* @__PURE__ */ jsxs("button", {
 		...rootHandlers,
@@ -2599,11 +2421,8 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				"data-dashfoo": "float-titlebar",
+				"data-editable": editable || void 0,
 				onPointerDown,
-				style: editable ? titleBarStyle : {
-					...titleBarStyle,
-					cursor: "default"
-				},
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
@@ -2628,7 +2447,6 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 						onPointerDown: (event) => {
 							event.stopPropagation();
 						},
-						style: dockButtonStyle,
 						title: "Minimize panel",
 						type: "button",
 						children: /* @__PURE__ */ jsx(MinimizeIcon, {})
@@ -2644,7 +2462,6 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 						onPointerDown: (event) => {
 							event.stopPropagation();
 						},
-						style: dockButtonStyle,
 						title: "Dock panel back",
 						type: "button",
 						children: /* @__PURE__ */ jsx(DockIcon, {})
@@ -2653,7 +2470,6 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				"data-dashfoo": "float-body",
-				style: bodyStyle,
 				children: /* @__PURE__ */ jsx(LayoutOverrides, {
 					overrides: FLOAT_OVERRIDES,
 					children: /* @__PURE__ */ jsx(DragProvider, { children: /* @__PURE__ */ jsx(RowView, { node: node.layout }) })
@@ -2662,13 +2478,7 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 			editable && RESIZE_HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
 				"data-dashfoo": "float-resize",
 				"data-edge": handle.key,
-				onPointerDown,
-				style: {
-					position: "absolute",
-					touchAction: "none",
-					zIndex: 1,
-					...handle.style
-				}
+				onPointerDown
 			}, handle.key))
 		]
 	});
@@ -2676,18 +2486,11 @@ const FloatPanel = ({ node, onFocus, zIndex }) => {
 
 //#endregion
 //#region src/components/float-layer.tsx
-const overlayStyle = {
-	inset: 0,
-	pointerEvents: "none",
-	position: "fixed",
-	zIndex: 1
-};
 const FloatOverlay = ({ floats }) => {
 	const [topId, setTopId] = useState(null);
 	if (floats.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-dashfoo": "float-overlay",
-		style: overlayStyle,
 		children: floats.map((node) => /* @__PURE__ */ jsx(FloatPanel, {
 			node,
 			onFocus: () => {
@@ -2840,19 +2643,20 @@ const DashfooLayout = forwardRef((props, ref) => {
 	]);
 	const [containerRef, width] = useContainerWidth();
 	const isCompact = responsive !== void 0 && width <= responsive.maxWidth;
+	const compactOrientation = responsive?.orientation;
 	/** Everything the compact breakpoint changes, decided once. */
 	const presentation = useMemo(() => isCompact ? {
 		maximizable: false,
-		model: compactModel(store.model, responsive?.orientation),
+		model: compactModel(store.model, compactOrientation),
 		restructurable: false
 	} : {
 		maximizable,
 		model: store.model,
 		restructurable: true
 	}, [
+		compactOrientation,
 		isCompact,
 		maximizable,
-		responsive?.orientation,
 		store.model
 	]);
 	const view = presentation.model;