@deepseek-ai/dsh-client-ui-dockkit 0.1.6-alpha.2 → 0.1.7-alpha.2

package/lib/index.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import clsx from "clsx";
-import { IconCloseFill14, IconCloseOutline16, IconPanelLeftOutline16, IconPlusOutline16, Tooltip } from "@deepseek-ai/dsh-client-ui-primitives";
+import { IconCloseFillRegular, IconCloseOutlineRegular, IconPanelLeftOutlineRegular, IconPlusOutlineRegular, Tooltip } from "@deepseek-ai/dsh-client-ui-primitives";
 import { createPortal } from "react-dom";
 import css from "./components/dockkit.module.css";
 //#region lib/types/engine/tree.js
@@ -2163,6 +2163,10 @@ function followPointer(element, pointerId, followers) {
 	capturePointer(element, pointerId);
 	const controller = new AbortController();
 	const { signal } = controller;
+	element.dataset.dockkitPointer = String(pointerId);
+	signal.addEventListener("abort", () => {
+		if (element.dataset.dockkitPointer === String(pointerId)) delete element.dataset.dockkitPointer;
+	}, { once: true });
 	const own = (event) => event.pointerId === pointerId;
 	window.addEventListener("pointermove", (event) => {
 		if (own(event)) followers.move(event);
@@ -2368,20 +2372,21 @@ function TabTitle({ children }) {
 * inside it so they read as siblings of the panel controls beside them.
 */
 const PANEL_FRAME = "M9.67272 0.522841C10.8339 0.522841 11.76 0.522714 12.4963 0.602493C13.2453 0.683657 13.8789 0.854248 14.4264 1.25197C14.7504 1.48739 15.0355 1.77247 15.2709 2.0965C15.6686 2.64394 15.8392 3.27758 15.9204 4.02655C16.0002 4.7629 16 5.68895 16 6.85014V9.14986C16 10.3111 16.0002 11.2371 15.9204 11.9735C15.8392 12.7224 15.6686 13.3561 15.2709 13.9035C15.0355 14.2275 14.7504 14.5126 14.4264 14.748C13.8789 15.1458 13.2453 15.3163 12.4963 15.3975C11.76 15.4773 10.8339 15.4772 9.67272 15.4772H6.3273C5.16611 15.4772 4.24006 15.4773 3.50371 15.3975C2.75474 15.3163 2.1211 15.1458 1.57366 14.748C1.24963 14.5126 0.964549 14.2275 0.729131 13.9035C0.331407 13.3561 0.160817 12.7224 0.0796529 11.9735C-0.000126137 11.2371 1.25338e-09 10.3111 1.25338e-09 9.14986V6.85014C1.25329e-09 5.68895 -0.000126137 4.7629 0.0796529 4.02655C0.160817 3.27758 0.331407 2.64394 0.729131 2.0965C0.964549 1.77247 1.24963 1.48739 1.57366 1.25197C2.1211 0.854248 2.75474 0.683657 3.50371 0.602493C4.24006 0.522714 5.16611 0.522841 6.3273 0.522841H9.67272ZM4.1828 14.0873L5.54303 14.1118C5.78636 14.1128 6.04709 14.1169 6.3273 14.1169H9.67272C10.8639 14.1169 11.7032 14.1164 12.3493 14.0465C12.9824 13.9779 13.3497 13.8494 13.6268 13.6482C13.8354 13.4966 14.0195 13.3125 14.1711 13.1039C14.3723 12.8268 14.5007 12.4595 14.5693 11.8264C14.6393 11.1803 14.6398 10.341 14.6398 9.14986V6.85014C14.6398 5.65896 14.6393 4.81967 14.5693 4.1736C14.5007 3.54048 14.3723 3.17318 14.1711 2.89609C14.0195 2.68747 13.8354 2.50337 13.6268 2.35179C13.3497 2.1506 12.9824 2.02212 12.3493 1.95353C11.7032 1.88358 10.8639 1.88307 9.67272 1.88307H6.3273C6.04709 1.88307 5.78636 1.8862 5.54303 1.88715L4.1828 1.91166C3.99125 1.9216 3.8148 1.93577 3.65076 1.95353C3.01764 2.02212 2.65034 2.1506 2.37325 2.35179C2.16463 2.50337 1.98052 2.68747 1.82895 2.89609C1.62776 3.17318 1.49928 3.54048 1.43069 4.1736C1.36074 4.81967 1.36023 5.65896 1.36023 6.85014V9.14986C1.36023 10.341 1.36074 11.1803 1.43069 11.8264C1.49928 12.4595 1.62776 12.8268 1.82895 13.1039C1.98052 13.3125 2.16463 13.4966 2.37325 13.6482C2.65034 13.8494 3.01764 13.9779 3.65076 14.0465C3.81478 14.0642 3.99127 14.0774 4.1828 14.0873Z";
-/** The split control's glyph: the panel frame with its divider moved to the centre. */
+/** The split control's glyph from the shared product artwork. */
 function SplitGlyph() {
-	return jsx("svg", {
+	return jsxs("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 16 16",
 		fill: "none",
 		"aria-hidden": "true",
-		children: jsx("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: `${PANEL_FRAME}M7.31989 1.88307H8.68012V14.1169H7.31989V1.88307Z`,
-			fill: "currentColor"
-		})
+		children: [jsx("path", {
+			d: "M13.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V13.5C1.5 14.0523 1.94772 14.5 2.5 14.5H13.5C14.0523 14.5 14.5 14.0523 14.5 13.5V2.5C14.5 1.94772 14.0523 1.5 13.5 1.5Z",
+			stroke: "currentColor"
+		}), jsx("path", {
+			d: "M8 1.5V14.5",
+			stroke: "currentColor"
+		})]
 	});
 }
 /**
@@ -2535,18 +2540,16 @@ function splitBlockedTitle(labels, block) {
 		case "width": return labels.splitPaneNarrow;
 	}
 }
-/** The pane's tab strip, split control, and body. */
-function TabPanel({ state, pane, callbacks }) {
+/** @param props - pane state and gestures. @returns its tab strip without a content container. */
+function TabStrip({ state, pane, callbacks }) {
 	const [menu, setMenu] = useState(void 0);
 	const [chips] = useState(() => /* @__PURE__ */ new Map());
 	const stripTabs = useRef(null);
 	useStripScrollFades(stripTabs, pane.tabs);
 	useActiveChipInView(stripTabs, chips, pane.tabs, pane.activeTabId);
-	const active = pane.activeTabId === void 0 ? void 0 : getTab(state, pane.activeTabId);
 	const block = callbacks.splitBlock(pane.id);
 	const target = callbacks.dropTarget;
 	const stripIndex = target !== void 0 && target.kind === "strip" && target.paneId === pane.id ? target.index : void 0;
-	const zone = target !== void 0 && target.kind === "zone" && target.paneId === pane.id ? target.zone : void 0;
 	/** Select a tab from a click or a key, unless it is the active pane's selected tab already: that changes nothing. */
 	const activate = (tabId) => {
 		if (state.activePaneId === pane.id && pane.activeTabId === tabId) return;
@@ -2558,179 +2561,197 @@ function TabPanel({ state, pane, callbacks }) {
 		if (chip === void 0) return;
 		chip.focus();
 	};
-	return jsxs("section", {
-		className: css.pane,
-		"data-dockkit-pane": pane.id,
-		"data-dockkit-pane-active": state.activePaneId === pane.id || void 0,
-		onClick: () => {
-			if (state.activePaneId === pane.id) return;
-			callbacks.onFocusPane(pane.id);
-		},
-		children: [jsxs("div", {
-			className: css.tabStrip,
-			role: "tablist",
-			"data-dockkit-strip": pane.id,
-			children: [
-				jsxs("div", {
-					ref: stripTabs,
-					className: css.stripTabs,
-					role: "presentation",
-					"data-dockkit-strip-tabs": pane.id,
-					children: [pane.tabs.map((tabId, index) => {
-						const tab = getTab(state, tabId);
-						const selected = tabId === pane.activeTabId;
-						const closable = callbacks.canCloseTab(tabId);
-						const quiet = !closable && pane.tabs.length === 1;
-						return jsxs(Fragment$1, { children: [(index > 0 || stripIndex === index) && jsx("div", {
-							className: clsx(css.slot, stripIndex === index && css.slotCaret),
-							"data-dockkit-caret": stripIndex === index ? index : void 0
-						}), jsxs("div", {
-							role: "tab",
-							"aria-selected": selected,
-							tabIndex: selected ? 0 : -1,
-							className: clsx(css.tab, selected && css.tabActive, quiet && css.tabQuiet, callbacks.draggingTabId === tabId && css.tabDragging),
-							"data-dockkit-tab": tabId,
-							"data-dockkit-tab-quiet": quiet || void 0,
-							ref: (element) => {
-								if (element === null) chips.delete(tabId);
-								else chips.set(tabId, element);
-							},
-							onPointerDown: (event) => {
-								if (event.button === 2) return;
-								callbacks.onTabPressed(tabId, event);
-							},
-							onClick: (event) => {
-								event.stopPropagation();
-								activate(tabId);
-							},
-							onKeyDown: (event) => {
-								if (event.target !== event.currentTarget) return;
-								const next = chipToFocus(event.key, pane.tabs, tabId);
-								if (next !== void 0) {
-									event.preventDefault();
-									focusChip(next);
-									return;
-								}
-								if (selects(event.key)) {
-									event.preventDefault();
-									activate(tabId);
-								}
-							},
-							onContextMenu: (event) => {
-								event.preventDefault();
-								const anchor = event.currentTarget;
-								setMenu((current) => current?.tabId === tabId ? void 0 : {
-									tabId,
-									anchor
-								});
-							},
-							children: [
-								jsx(TabTitle, { children: callbacks.renderTabTitle?.(tab) ?? tab.title }),
-								closable && jsx("button", {
-									type: "button",
-									className: css.tabClose,
-									"aria-label": callbacks.labels.closeTab,
-									"data-dockkit-tab-close": tabId,
-									onPointerDown: (event) => {
-										event.stopPropagation();
-									},
-									onClick: (event) => {
-										event.stopPropagation();
-										callbacks.onCloseTab(tabId);
-									},
-									children: jsx(IconCloseFill14, { size: 14 })
-								}),
-								menu?.tabId === tabId && jsx(TabMenu, {
-									labels: callbacks.labels,
-									anchor: menu.anchor,
-									onClose: closable ? () => {
-										setMenu(void 0);
-										callbacks.onCloseTab(tabId);
-									} : void 0,
-									onDismiss: () => {
-										setMenu(void 0);
-									},
-									extras: callbacks.renderTabMenuItems?.(tab, () => {
-										setMenu(void 0);
-									})
-								})
-							]
-						})] }, tabId);
-					}), stripIndex === pane.tabs.length && jsx("div", {
-						className: clsx(css.slot, css.slotCaret),
-						"data-dockkit-caret": stripIndex
-					})]
-				}),
-				callbacks.canAddTab(pane.id) && jsx(Tooltip, {
-					label: callbacks.labels.addTab,
-					side: "bottom",
-					delayMs: 500,
-					children: jsx("button", {
-						type: "button",
-						className: css.addTab,
-						"aria-label": callbacks.labels.addTab,
-						"data-dockkit-add-tab": pane.id,
-						onClick: (event) => {
-							event.stopPropagation();
-							callbacks.onAddTab(pane.id);
+	return jsxs("div", {
+		className: css.tabStrip,
+		role: "tablist",
+		"data-dockkit-strip": pane.id,
+		children: [
+			jsxs("div", {
+				ref: stripTabs,
+				className: css.stripTabs,
+				role: "presentation",
+				"data-dockkit-strip-tabs": pane.id,
+				children: [pane.tabs.map((tabId, index) => {
+					const tab = getTab(state, tabId);
+					const selected = tabId === pane.activeTabId;
+					const closable = callbacks.canCloseTab(tabId);
+					const quiet = !closable && pane.tabs.length === 1;
+					return jsxs(Fragment$1, { children: [(index > 0 || stripIndex === index) && jsx("div", {
+						className: clsx(css.slot, stripIndex === index && css.slotCaret),
+						"data-dockkit-caret": stripIndex === index ? index : void 0
+					}), jsxs("div", {
+						role: "tab",
+						"aria-selected": selected,
+						tabIndex: selected ? 0 : -1,
+						className: clsx(css.tab, selected && css.tabActive, quiet && css.tabQuiet, callbacks.draggingTabId === tabId && css.tabDragging),
+						"data-dockkit-tab": tabId,
+						"data-dockkit-tab-quiet": quiet || void 0,
+						ref: (element) => {
+							if (element === null) chips.delete(tabId);
+							else chips.set(tabId, element);
+						},
+						onPointerDown: (event) => {
+							if (event.button === 2) return;
+							callbacks.onTabPressed(tabId, event);
 						},
-						children: jsx(IconPlusOutline16, { size: 14 })
-					})
-				}),
-				jsx("div", {
-					className: css.stripFill,
-					"data-dockkit-strip-fill": true
-				}),
-				!(callbacks.hideSplitWhenBlocked && block !== void 0) && jsx(Tooltip, {
-					label: callbacks.labels.splitPane,
-					side: "bottom",
-					delayMs: 500,
-					disabled: block !== void 0,
-					children: jsx("button", {
-						type: "button",
-						className: css.iconButton,
-						"aria-label": callbacks.labels.splitPane,
-						title: block === void 0 ? void 0 : splitBlockedTitle(callbacks.labels, block),
-						disabled: block !== void 0,
-						"data-dockkit-split-button": pane.id,
-						"data-dockkit-split-blocked": block,
 						onClick: (event) => {
 							event.stopPropagation();
-							callbacks.onSplitPane(pane.id);
+							activate(tabId);
 						},
-						children: jsx(SplitGlyph, {})
-					})
-				}),
-				pane.id === callbacks.chromePaneId && callbacks.chrome !== void 0 && jsx("div", {
-					className: css.stripChrome,
-					"data-dockkit-strip-chrome": true,
+						onKeyDown: (event) => {
+							if (event.target !== event.currentTarget) return;
+							const next = chipToFocus(event.key, pane.tabs, tabId);
+							if (next !== void 0) {
+								event.preventDefault();
+								focusChip(next);
+								return;
+							}
+							if (selects(event.key)) {
+								event.preventDefault();
+								activate(tabId);
+							}
+						},
+						onContextMenu: (event) => {
+							event.preventDefault();
+							const anchor = event.currentTarget;
+							setMenu((current) => current?.tabId === tabId ? void 0 : {
+								tabId,
+								anchor
+							});
+						},
+						children: [
+							jsx(TabTitle, { children: callbacks.renderTabTitle?.(tab) ?? tab.title }),
+							closable && jsx("button", {
+								type: "button",
+								className: css.tabClose,
+								"aria-label": callbacks.labels.closeTab,
+								"data-dockkit-tab-close": tabId,
+								onPointerDown: (event) => {
+									event.stopPropagation();
+								},
+								onClick: (event) => {
+									event.stopPropagation();
+									callbacks.onCloseTab(tabId);
+								},
+								children: jsx(IconCloseFillRegular, { size: 14 })
+							}),
+							menu?.tabId === tabId && jsx(TabMenu, {
+								labels: callbacks.labels,
+								anchor: menu.anchor,
+								onClose: closable ? () => {
+									setMenu(void 0);
+									callbacks.onCloseTab(tabId);
+								} : void 0,
+								onDismiss: () => {
+									setMenu(void 0);
+								},
+								extras: callbacks.renderTabMenuItems?.(tab, () => {
+									setMenu(void 0);
+								})
+							})
+						]
+					})] }, tabId);
+				}), stripIndex === pane.tabs.length && jsx("div", {
+					className: clsx(css.slot, css.slotCaret),
+					"data-dockkit-caret": stripIndex
+				})]
+			}),
+			callbacks.canAddTab(pane.id) && jsx(Tooltip, {
+				label: callbacks.labels.addTab,
+				side: "bottom",
+				delayMs: 500,
+				children: jsx("button", {
+					type: "button",
+					className: css.addTab,
+					"aria-label": callbacks.labels.addTab,
+					"data-dockkit-add-tab": pane.id,
 					onClick: (event) => {
 						event.stopPropagation();
+						callbacks.onAddTab(pane.id);
 					},
-					children: callbacks.chrome
+					children: jsx(IconPlusOutlineRegular, { size: 14 })
 				})
-			]
+			}),
+			jsx("div", {
+				className: css.stripFill,
+				"data-dockkit-strip-fill": true
+			}),
+			!(callbacks.hideSplitWhenBlocked && block !== void 0) && jsx(Tooltip, {
+				label: callbacks.labels.splitPane,
+				side: "bottom",
+				delayMs: 500,
+				disabled: block !== void 0,
+				children: jsx("button", {
+					type: "button",
+					className: css.iconButton,
+					"aria-label": callbacks.labels.splitPane,
+					title: block === void 0 ? void 0 : splitBlockedTitle(callbacks.labels, block),
+					disabled: block !== void 0,
+					"data-dockkit-split-button": pane.id,
+					"data-dockkit-split-blocked": block,
+					onClick: (event) => {
+						event.stopPropagation();
+						callbacks.onSplitPane(pane.id);
+					},
+					children: jsx(SplitGlyph, {})
+				})
+			}),
+			pane.id === callbacks.chromePaneId && callbacks.chrome !== void 0 && jsx("div", {
+				className: css.stripChrome,
+				"data-dockkit-strip-chrome": true,
+				onClick: (event) => {
+					event.stopPropagation();
+				},
+				children: callbacks.chrome
+			})
+		]
+	});
+}
+/** @param props - target pane and drag preview. @returns body-local drop feedback, or nothing. */
+function PaneDropHints({ pane, callbacks }) {
+	const target = callbacks.dropTarget;
+	const zone = target?.kind === "zone" && target.paneId === pane.id ? target.zone : void 0;
+	if (zone === void 0) return null;
+	return jsxs(Fragment, { children: [jsx("div", {
+		className: css.dockScrim,
+		"data-dockkit-dock-scrim": true
+	}), callbacks.horizontalDrops && zone !== "center" ? jsxs(Fragment, { children: [jsx(DockHint, {
+		zone: "left",
+		active: zone === "left",
+		labels: callbacks.labels
+	}), jsx(DockHint, {
+		zone: "right",
+		active: zone === "right",
+		labels: callbacks.labels
+	})] }) : jsx(DockHint, {
+		zone,
+		active: true,
+		labels: callbacks.labels
+	})] });
+}
+/** @param props - pane state and gestures. @returns one pane in the recursive, visibility-mounted layout. */
+function TabPanel({ state, pane, callbacks }) {
+	const active = pane.activeTabId === void 0 ? void 0 : getTab(state, pane.activeTabId);
+	return jsxs("section", {
+		className: css.pane,
+		"data-dockkit-pane": pane.id,
+		"data-dockkit-pane-active": state.activePaneId === pane.id || void 0,
+		onClick: () => {
+			if (state.activePaneId !== pane.id) callbacks.onFocusPane(pane.id);
+		},
+		children: [jsx(TabStrip, {
+			state,
+			pane,
+			callbacks
 		}), jsxs("div", {
 			className: css.paneBody,
 			children: [active === void 0 ? jsx("p", {
 				className: css.empty,
 				children: callbacks.labels.emptyPane
-			}) : callbacks.renderTab(active), zone !== void 0 && jsxs(Fragment, { children: [jsx("div", {
-				className: css.dockScrim,
-				"data-dockkit-dock-scrim": true
-			}), callbacks.horizontalDrops && zone !== "center" ? jsxs(Fragment, { children: [jsx(DockHint, {
-				zone: "left",
-				active: zone === "left",
-				labels: callbacks.labels
-			}), jsx(DockHint, {
-				zone: "right",
-				active: zone === "right",
-				labels: callbacks.labels
-			})] }) : jsx(DockHint, {
-				zone,
-				active: true,
-				labels: callbacks.labels
-			})] })]
+			}) : callbacks.renderTab(active), jsx(PaneDropHints, {
+				pane,
+				callbacks
+			})]
 		})]
 	});
 }
@@ -2774,6 +2795,375 @@ function PaneTree({ state, nodeId, callbacks, preview }) {
 	});
 }
 //#endregion
+//#region lib/types/components/FloatLayer.js
+/**
+* The floating layer: one overlay panel per floating pane, bottom-to-top in the
+* model's z order. A floating pane hosts exactly one tab; its header is the
+* strip's row holding that tab's chip, never selectable or closable from the
+* chip, and the send-back and close controls. Pressing a panel's body raises it. Its grip
+* and corner report through their gesture instead: a press released in place is
+* a click and raises the panel; a drag records the move or resize, and that
+* operation raises the panel itself, so one gesture is one intent. Raising a
+* panel that is active and on top already changes nothing and reports nothing.
+*
+* The layer owns its own drag and resize gestures, so where it mounts is not
+* part of its contract: panels are positioned in viewport coordinates and read
+* only `state` and the outward contracts. An embedder may portal it anywhere,
+* and nothing here assumes the docked tree is an ancestor or even present.
+*/
+/** The rectangle a gesture has reached. */
+function draggedRect(drag, x, y) {
+	const dx = x - drag.originX;
+	const dy = y - drag.originY;
+	return drag.mode === "move" ? movedRect(drag.rect, dx, dy) : resizedRect(drag.rect, dx, dy, FLOAT_MIN_SIZE);
+}
+/** Whether two rectangles agree in every coordinate. */
+function sameRect(a, b) {
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+/** Whether a floating pane is already where a raise would put it: focused and on top. */
+function raised(state, paneId) {
+	return state.activePaneId === paneId && state.floats.at(-1) === paneId;
+}
+/**
+* Shared move/resize gestures; changing layout mode never owns the content DOM.
+* @param state - committed layout and float stacking order.
+* @param intents - gesture settlements.
+* @returns the current preview and focus/gesture callbacks.
+*/
+function useFloatGestures(state, intents) {
+	const [preview, setPreview] = useState(void 0);
+	const begin = useGesture(() => {
+		setPreview(void 0);
+	});
+	/** Focus and raise a panel from a press or click on it, unless it is raised already. */
+	const raise = (paneId) => {
+		if (raised(state, paneId)) return;
+		intents.focusPane(paneId);
+	};
+	/** Start a move or resize from a press on the panel's grip or corner; a release that moved nothing is a click. */
+	const drag = (mode, paneId, event) => {
+		event.stopPropagation();
+		const start = {
+			mode,
+			originX: event.clientX,
+			originY: event.clientY,
+			rect: floatRect(getPane(state, paneId))
+		};
+		begin(event.currentTarget, event.pointerId, {
+			move: (moved) => {
+				setPreview({
+					paneId,
+					rect: draggedRect(start, moved.clientX, moved.clientY)
+				});
+			},
+			up: (released) => {
+				const rect = draggedRect(start, released.clientX, released.clientY);
+				if (sameRect(rect, start.rect)) raise(paneId);
+				else if (mode === "move") intents.moveFloat(paneId, rect.x, rect.y);
+				else intents.resizeFloat(paneId, rect);
+			}
+		});
+	};
+	return {
+		preview,
+		raise,
+		drag
+	};
+}
+/**
+* Header-only controls, usable above either retained or visibility-mounted bodies.
+* @param props - owning pane/tab, localized labels and gesture callbacks.
+* @returns the float header without a content container.
+*/
+function FloatHeader({ paneId, tab, labels, intents, renderTabTitle, canCloseTab, drag }) {
+	return jsxs("header", {
+		className: clsx(css.tabStrip, css.floatHeader),
+		"data-dockkit-float-grip": paneId,
+		onPointerDown: (event) => {
+			drag("move", paneId, event);
+		},
+		children: [
+			jsx("div", {
+				className: clsx(css.tab, css.floatTitle),
+				"data-dockkit-float-title": true,
+				children: jsx(TabTitle, { children: renderTabTitle?.(tab) ?? tab.title })
+			}),
+			jsx("div", { className: css.stripFill }),
+			jsx(Tooltip, {
+				label: labels.dockFloat,
+				side: "bottom",
+				delayMs: 500,
+				children: jsx("button", {
+					type: "button",
+					className: css.iconButton,
+					"aria-label": labels.dockFloat,
+					"data-dockkit-float-dock": paneId,
+					onPointerDown: (event) => {
+						event.stopPropagation();
+					},
+					onClick: () => {
+						intents.unfloatPane(paneId);
+					},
+					children: jsx(IconPanelLeftOutlineRegular, { className: css.dockGlyph })
+				})
+			}),
+			(canCloseTab?.(tab.id) ?? true) && jsx(Tooltip, {
+				label: labels.closeFloat,
+				side: "bottom",
+				delayMs: 500,
+				children: jsx("button", {
+					type: "button",
+					className: css.iconButton,
+					"aria-label": labels.closeFloat,
+					"data-dockkit-float-close": paneId,
+					onPointerDown: (event) => {
+						event.stopPropagation();
+					},
+					onClick: () => {
+						intents.closeTab(tab.id);
+					},
+					children: jsx(IconCloseOutlineRegular, {})
+				})
+			})
+		]
+	});
+}
+/** Every floating panel, in z order. */
+function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canCloseTab }) {
+	const { preview, raise, drag } = useFloatGestures(state, intents);
+	return jsx(Fragment, { children: state.floats.map((paneId, depth) => {
+		const pane = getPane(state, paneId);
+		const tab = getTab(state, onlyTabId(pane));
+		const lifted = preview?.paneId === paneId ? preview.rect : void 0;
+		const live = lifted ?? floatRect(pane);
+		return jsxs("div", {
+			className: css.float,
+			"data-dockkit-float": paneId,
+			"data-dockkit-float-active": state.activePaneId === paneId || void 0,
+			style: {
+				left: live.x,
+				top: live.y,
+				width: live.width,
+				height: live.height,
+				zIndex: lifted === void 0 ? depth + 1 : state.floats.length + 1
+			},
+			onPointerDown: () => {
+				raise(paneId);
+			},
+			children: [
+				jsx(FloatHeader, {
+					paneId,
+					tab,
+					labels,
+					intents,
+					renderTabTitle,
+					canCloseTab,
+					drag
+				}),
+				jsx("div", {
+					className: css.floatBody,
+					children: renderTab(tab)
+				}),
+				jsx("div", {
+					className: css.floatResize,
+					"data-dockkit-float-resize": paneId,
+					onPointerDown: (event) => {
+						drag("resize", paneId, event);
+					}
+				})
+			]
+		}, paneId);
+	}) });
+}
+//#endregion
+//#region lib/types/components/TabLayout.js
+/** Stable tab siblings in one horizontal Grid, including viewport-positioned floats. */
+/** A tab's ancestors stay identical across selection, pane moves and floating. */
+function TabHost({ state, callbacks, intents, tab, pane, column, floats, focusRequest, keepMounted, active = true }) {
+	const floating = pane.host === "float";
+	const selected = floating || pane.activeTabId === tab.id;
+	const visible = active && selected && (floating || state.expanded);
+	const retained = keepMounted?.(tab) ?? false;
+	const [visited, setVisited] = useState(visible);
+	if (visible && !visited) setVisited(true);
+	const host = useRef(null);
+	const body = useRef(null);
+	useLayoutEffect(() => {
+		const section = host.current;
+		section.inert = !visible;
+		const focused = document.activeElement;
+		if (!visible && focused instanceof HTMLElement && section.contains(focused)) focused.blur();
+		const request = focusRequest.current;
+		if (!visible || request?.tabId !== tab.id) return;
+		focusRequest.current = void 0;
+		if (focused !== null && focused !== document.body && focused !== document.documentElement && focused !== request.origin) return;
+		[...section.querySelector("[data-dockkit-strip]")?.querySelectorAll("[data-dockkit-tab]") ?? []].find((element) => element.dataset.dockkitTab === tab.id)?.focus({ preventScroll: true });
+	}, [
+		visible,
+		tab.id,
+		focusRequest
+	]);
+	useEffect(() => {
+		const element = body.current;
+		const focus = () => {
+			if (!visible) return;
+			if (floating) floats.raise(pane.id);
+			else if (state.activePaneId !== pane.id) callbacks.onFocusPane(pane.id);
+		};
+		element.addEventListener("focus", focus, true);
+		return () => {
+			element.removeEventListener("focus", focus, true);
+		};
+	}, [
+		visible,
+		floating,
+		floats,
+		pane.id,
+		state.activePaneId,
+		callbacks
+	]);
+	const lifted = floating && floats.preview?.paneId === pane.id ? floats.preview.rect : void 0;
+	const rect = floating ? lifted ?? floatRect(pane) : void 0;
+	const depth = lifted === void 0 ? state.floats.indexOf(pane.id) + 1 : state.floats.length + 1;
+	return jsx("div", {
+		className: clsx(css.tabCell, floating && css.floatingCell),
+		hidden: !selected,
+		"data-dockkit-host": floating ? "float" : "dock",
+		"data-dockkit-column": floating ? void 0 : column,
+		style: {
+			gridColumn: floating ? 1 : column * 2 + 1,
+			gridRow: 1,
+			order: floating ? depth : 0
+		},
+		children: jsxs("section", {
+			ref: host,
+			className: clsx(css.tabHost, floating ? css.float : css.pane),
+			"aria-hidden": !visible || void 0,
+			"data-dockkit-content": tab.id,
+			"data-dockkit-pane": !floating && selected ? pane.id : void 0,
+			"data-dockkit-pane-active": !floating && state.activePaneId === pane.id || void 0,
+			"data-dockkit-float": floating ? pane.id : void 0,
+			"data-dockkit-float-active": floating && state.activePaneId === pane.id || void 0,
+			"data-dockkit-column": !floating ? column : void 0,
+			style: rect === void 0 ? void 0 : {
+				left: rect.x,
+				top: rect.y,
+				width: rect.width,
+				height: rect.height
+			},
+			onPointerDown: () => {
+				if (floating) floats.raise(pane.id);
+			},
+			onClick: () => {
+				if (!floating && state.activePaneId !== pane.id) callbacks.onFocusPane(pane.id);
+			},
+			children: [
+				jsx("div", {
+					className: css.tabHostHeader,
+					children: selected && (floating ? jsx(FloatHeader, {
+						paneId: pane.id,
+						tab,
+						labels: callbacks.labels,
+						intents,
+						renderTabTitle: callbacks.renderTabTitle,
+						canCloseTab: callbacks.canCloseTab,
+						drag: floats.drag
+					}) : jsx(TabStrip, {
+						state,
+						pane,
+						callbacks
+					}))
+				}),
+				jsxs("div", {
+					ref: body,
+					className: clsx(css.tabHostBody, floating ? css.floatBody : css.paneBody),
+					children: [visited && (retained || active && selected) ? callbacks.renderTab(tab) : null, !floating && jsx(PaneDropHints, {
+						pane,
+						callbacks
+					})]
+				}),
+				floating && jsx("div", {
+					className: css.floatResize,
+					"data-dockkit-float-resize": pane.id,
+					onPointerDown: (event) => {
+						floats.drag("resize", pane.id, event);
+					}
+				})
+			]
+		})
+	});
+}
+/**
+* One or two horizontal panes; CSS resolves content sizes from track fractions.
+* @param props - committed layout, gesture preview and body retention policy.
+* @returns stable tab containers, including floating tabs.
+* @throws if the docked tree is not one pane or two horizontal panes.
+*/
+function TabLayout(props) {
+	const { state, callbacks, preview } = props;
+	const focusRequest = useRef();
+	const tabCallbacks = {
+		...callbacks,
+		onFocusTab: (tabId) => {
+			focusRequest.current = findTabPane(state, tabId).activeTabId === tabId ? void 0 : {
+				tabId,
+				origin: document.activeElement
+			};
+			callbacks.onFocusTab(tabId);
+		}
+	};
+	const root = getNode(state, state.rootId);
+	if (root.kind === "split" && (root.axis !== "row" || root.children.length !== 2)) throw new Error("DockLayout requires one pane or two horizontally split panes");
+	const panes = root.kind === "pane" ? [root] : root.children.map((id) => getPane(state, id));
+	const sizes = root.kind === "split" ? preview?.splitId === root.id ? preview.sizes : root.sizes : [1];
+	const floats = useFloatGestures(state, props.intents);
+	const columns = sizes.map((size) => `minmax(0, ${size}fr)`).join(" 0px ");
+	return jsxs("div", {
+		className: css.tabLayout,
+		"data-dockkit-split": root.kind === "split" ? root.id : void 0,
+		style: { gridTemplateColumns: columns },
+		children: [
+			Object.values(state.tabs).sort((a, b) => a.id.localeCompare(b.id)).map((tab) => {
+				const pane = findTabPane(state, tab.id);
+				return jsx(TabHost, {
+					...props,
+					callbacks: tabCallbacks,
+					tab,
+					pane,
+					column: panes.findIndex((candidate) => candidate.id === pane.id),
+					floats,
+					focusRequest
+				}, tab.id);
+			}),
+			panes.filter((pane) => pane.tabs.length === 0).map((pane) => jsx("div", {
+				className: css.emptyTabHost,
+				"data-dockkit-empty": true,
+				style: {
+					gridColumn: panes.indexOf(pane) * 2 + 1,
+					gridRow: 1
+				},
+				children: jsx(TabPanel, {
+					state,
+					pane,
+					callbacks
+				})
+			}, pane.id)),
+			root.kind === "split" && jsx("div", {
+				className: clsx(css.divider, css.tabLayoutDivider),
+				"data-dockkit-divider": `${root.id}:0`,
+				style: {
+					gridColumn: 2,
+					gridRow: 1
+				},
+				onPointerDown: (event) => {
+					callbacks.onDividerPressed(root.id, 0, event);
+				}
+			})
+		]
+	});
+}
+//#endregion
 //#region lib/types/components/DockSurface.js
 /**
 * The docked surface: the split tree plus the tab and divider gestures over it.
@@ -2838,7 +3228,7 @@ function sameSizes(a, b) {
 	});
 }
 /** The split tree and the gestures over it. */
-function DockSurface({ state, canSplit, canAddTab, canCloseTab, intents, labels, renderTab, renderTabTitle, renderTabMenuItems, chrome, onRoom, dropZones = "edges", minPaneFraction = MIN_PANE_FRACTION, hideSplitWhenBlocked = false }) {
+function Surface({ state, canSplit, canAddTab, canCloseTab, intents, labels, renderTab, renderTabTitle, renderTabMenuItems, chrome, onRoom, draw, dropZones = "edges", minPaneFraction = MIN_PANE_FRACTION, hideSplitWhenBlocked = false }) {
 	const surface = useRef(null);
 	const [preview, setPreview] = useState(NO_PREVIEW);
 	const [fits, setFits] = useState(NO_FITS);
@@ -2967,167 +3357,37 @@ function DockSurface({ state, canSplit, canAddTab, canCloseTab, intents, labels,
 		ref: surface,
 		"data-dockkit-surface": true,
 		"data-dockkit-drop-zones": dropZones,
-		children: jsx(PaneTree, {
-			state,
-			nodeId: state.rootId,
+		children: draw(callbacks, preview.sizes)
+	});
+}
+/** Recursive docked layout; floating content is rendered separately by FloatLayer. */
+function DockSurface(props) {
+	return jsx(Surface, {
+		...props,
+		draw: (callbacks, preview) => jsx(PaneTree, {
+			state: props.state,
+			nodeId: props.state.rootId,
 			callbacks,
-			preview: preview.sizes
+			preview
 		})
 	});
 }
-//#endregion
-//#region lib/types/components/FloatLayer.js
 /**
-* The floating layer: one overlay panel per floating pane, bottom-to-top in the
-* model's z order. A floating pane hosts exactly one tab; its header is the
-* strip's row holding that tab's chip, never selectable or closable from the
-* chip, and the send-back and close controls. Pressing a panel's body raises it. Its grip
-* and corner report through their gesture instead: a press released in place is
-* a click and raises the panel; a drag records the move or resize, and that
-* operation raises the panel itself, so one gesture is one intent. Raising a
-* panel that is active and on top already changes nothing and reports nothing.
-*
-* The layer owns its own drag and resize gestures, so where it mounts is not
-* part of its contract: panels are positioned in viewport coordinates and read
-* only `state` and the outward contracts. An embedder may portal it anywhere,
-* and nothing here assumes the docked tree is an ancestor or even present.
+* Render one pane or two horizontal panes, and their floats, in one stable content tree.
+* @param props - layout, gestures and lazy body-retention policy.
+* @returns the layout; the containing ancestors must not clip or establish a fixed-position containing block.
 */
-/** The rectangle a gesture has reached. */
-function draggedRect(drag, x, y) {
-	const dx = x - drag.originX;
-	const dy = y - drag.originY;
-	return drag.mode === "move" ? movedRect(drag.rect, dx, dy) : resizedRect(drag.rect, dx, dy, FLOAT_MIN_SIZE);
-}
-/** Whether two rectangles agree in every coordinate. */
-function sameRect(a, b) {
-	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
-}
-/** Whether a floating pane is already where a raise would put it: focused and on top. */
-function raised(state, paneId) {
-	return state.activePaneId === paneId && state.floats.at(-1) === paneId;
-}
-/** Every floating panel, in z order. */
-function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canCloseTab }) {
-	const [preview, setPreview] = useState(void 0);
-	const begin = useGesture(() => {
-		setPreview(void 0);
+function DockLayout(props) {
+	return jsx(Surface, {
+		...props,
+		draw: (callbacks, preview) => jsx(TabLayout, {
+			...props,
+			callbacks,
+			preview
+		})
 	});
-	/** Focus and raise a panel from a press or click on it, unless it is raised already. */
-	const raise = (paneId) => {
-		if (raised(state, paneId)) return;
-		intents.focusPane(paneId);
-	};
-	/** Start a move or resize from a press on the panel's grip or corner; a release that moved nothing is a click. */
-	const drag = (mode, paneId, event) => {
-		event.stopPropagation();
-		const start = {
-			mode,
-			originX: event.clientX,
-			originY: event.clientY,
-			rect: floatRect(getPane(state, paneId))
-		};
-		begin(event.currentTarget, event.pointerId, {
-			move: (moved) => {
-				setPreview({
-					paneId,
-					rect: draggedRect(start, moved.clientX, moved.clientY)
-				});
-			},
-			up: (released) => {
-				const rect = draggedRect(start, released.clientX, released.clientY);
-				if (sameRect(rect, start.rect)) raise(paneId);
-				else if (mode === "move") intents.moveFloat(paneId, rect.x, rect.y);
-				else intents.resizeFloat(paneId, rect);
-			}
-		});
-	};
-	return jsx(Fragment, { children: state.floats.map((paneId, depth) => {
-		const pane = getPane(state, paneId);
-		const tab = getTab(state, onlyTabId(pane));
-		const lifted = preview?.paneId === paneId ? preview.rect : void 0;
-		const live = lifted ?? floatRect(pane);
-		return jsxs("div", {
-			className: css.float,
-			"data-dockkit-float": paneId,
-			"data-dockkit-float-active": state.activePaneId === paneId || void 0,
-			style: {
-				left: live.x,
-				top: live.y,
-				width: live.width,
-				height: live.height,
-				zIndex: lifted === void 0 ? depth + 1 : state.floats.length + 1
-			},
-			onPointerDown: () => {
-				raise(paneId);
-			},
-			children: [
-				jsxs("header", {
-					className: clsx(css.tabStrip, css.floatHeader),
-					"data-dockkit-float-grip": paneId,
-					onPointerDown: (event) => {
-						drag("move", paneId, event);
-					},
-					children: [
-						jsx("div", {
-							className: clsx(css.tab, css.floatTitle),
-							"data-dockkit-float-title": true,
-							children: jsx(TabTitle, { children: renderTabTitle?.(tab) ?? tab.title })
-						}),
-						jsx("div", { className: css.stripFill }),
-						jsx(Tooltip, {
-							label: labels.dockFloat,
-							side: "bottom",
-							delayMs: 500,
-							children: jsx("button", {
-								type: "button",
-								className: css.iconButton,
-								"aria-label": labels.dockFloat,
-								"data-dockkit-float-dock": paneId,
-								onPointerDown: (event) => {
-									event.stopPropagation();
-								},
-								onClick: () => {
-									intents.unfloatPane(paneId);
-								},
-								children: jsx(IconPanelLeftOutline16, { className: css.dockGlyph })
-							})
-						}),
-						(canCloseTab?.(tab.id) ?? true) && jsx(Tooltip, {
-							label: labels.closeFloat,
-							side: "bottom",
-							delayMs: 500,
-							children: jsx("button", {
-								type: "button",
-								className: css.iconButton,
-								"aria-label": labels.closeFloat,
-								"data-dockkit-float-close": paneId,
-								onPointerDown: (event) => {
-									event.stopPropagation();
-								},
-								onClick: () => {
-									intents.closeTab(tab.id);
-								},
-								children: jsx(IconCloseOutline16, {})
-							})
-						})
-					]
-				}),
-				jsx("div", {
-					className: css.floatBody,
-					children: renderTab(tab)
-				}),
-				jsx("div", {
-					className: css.floatResize,
-					"data-dockkit-float-resize": paneId,
-					onPointerDown: (event) => {
-						drag("resize", paneId, event);
-					}
-				})
-			]
-		}, paneId);
-	}) });
 }
 //#endregion
-export { DOCK_EDGE_FRACTION, DOCK_ZONES, DRAG_THRESHOLD, DockController, DockSurface, EMPTY_HISTORY, FLOAT_DEFAULT_SIZE, FLOAT_MIN_SIZE, FloatLayer, MAX_DOCK_PANES, MIN_PANE_FRACTION, SPLIT_MINIMUMS, Sequencer, activeDockPaneId, applyOp, canSplit, canStepBack, canStepForward, clampSizes, containsPoint, createIdMinter, createInitialState, dividerSizes, dockPaneCount, dockPaneIds, findContentTab, findPaneContentTab, findParent, findTabPane, floatRectAt, getNode, getPane, getSplit, getTab, halvesFit, insertionIndex, isFocusOp, movedRect, passedThreshold, planAddTab, planDropTab, planDuplicateTab, planFloatTab, planOpenContent, planPlaceTab, planResizeSplit, planSetExpanded, planSetMode, planSettle, planSplitPane, planUnfloatPane, record, recordedOps, replay, resizedRect, stepBack, stepForward, topRightPaneId, zoneAt, zoneInRect, zoneSplit };
+export { DOCK_EDGE_FRACTION, DOCK_ZONES, DRAG_THRESHOLD, DockController, DockLayout, DockSurface, EMPTY_HISTORY, FLOAT_DEFAULT_SIZE, FLOAT_MIN_SIZE, FloatLayer, MAX_DOCK_PANES, MIN_PANE_FRACTION, SPLIT_MINIMUMS, Sequencer, activeDockPaneId, applyOp, canSplit, canStepBack, canStepForward, clampSizes, containsPoint, createIdMinter, createInitialState, dividerSizes, dockPaneCount, dockPaneIds, findContentTab, findPaneContentTab, findParent, findTabPane, floatRectAt, getNode, getPane, getSplit, getTab, halvesFit, insertionIndex, isFocusOp, movedRect, passedThreshold, planAddTab, planDropTab, planDuplicateTab, planFloatTab, planOpenContent, planPlaceTab, planResizeSplit, planSetExpanded, planSetMode, planSettle, planSplitPane, planUnfloatPane, record, recordedOps, replay, resizedRect, stepBack, stepForward, topRightPaneId, zoneAt, zoneInRect, zoneSplit };
 
 //# sourceMappingURL=index.js.map