@deepseek-ai/dsh-client-ui-dockkit 0.1.5-alpha.1 → 0.1.5-alpha.2

package/lib/index.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+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 { createPortal } from "react-dom";
 import css from "./components/dockkit.module.css";
 //#region lib/types/engine/tree.js
@@ -1231,21 +1232,23 @@ function insertionIndex(tabRects, x) {
 }
 /**
 * The minimums where no computed style can be read, mirroring
-* `dockkit.module.css`: `.splitRow > .divider` is 4px wide; `.tab` is 44px of
-* content plus 10px + 5px of padding (content-box), 59px; the body's 12px
-* padding above and below one 13px secondary line at 1.6 line-height is 45px,
-* held to 48px.
+* `dockkit.module.css`: `.splitRow > .divider` takes no layout width (its
+* hairline is painted over the seam); `.tab` is 80px of content plus
+* 10px + 10px of padding (content-box), 100px; 12px above and below one 13px
+* secondary line at 1.6 line-height — the inset a body draws for itself, as
+* `.empty` does — is 45px, held to 48px.
 */
 const SPLIT_MINIMUMS = {
-	divider: 4,
-	chip: 59,
+	divider: 0,
+	chip: 100,
 	body: 48
 };
 /**
 * The room rule. After an equal split each half must hold what cannot shrink:
-* horizontally the strip's fixed part — its width minus the chip box and the
-* fill, which is the padding, the gaps, and every control that pane draws —
-* plus one chip at its minimum; vertically the strip plus a minimum body. The
+* horizontally the strip's fixed part — its width minus the chip box, the
+* fill, and `splitControlWidth`, which is the padding, the gaps, and every
+* control a half would still draw — plus one chip at its minimum; vertically
+* the strip plus a minimum body. The
 * borders are what the pane's box exceeds the strip's by. An unmeasured pane
 * (no layout, as under jsdom) fits: the rule only blocks on a positive reading.
 * @param measure - the pane's rectangles.
@@ -1259,7 +1262,7 @@ function halvesFit(measure, minimums = SPLIT_MINIMUMS) {
 		column: true
 	};
 	const borders = Math.max(0, pane.width - strip.width);
-	const fixed = Math.max(0, strip.width - measure.chipsWidth - measure.fillWidth);
+	const fixed = Math.max(0, strip.width - measure.chipsWidth - measure.fillWidth - (measure.splitControlWidth ?? 0));
 	const halfWidth = (pane.width - minimums.divider) / 2 - borders;
 	const halfHeight = (pane.height - minimums.divider) / 2 - borders;
 	return {
@@ -1565,16 +1568,19 @@ function planPlaceTab(state, tabId, toPaneId, index) {
 /**
 * Resolve a tab release on a pane body: the centre moves the tab in, an edge
 * splits the pane and seats the tab in the new half. A pane's only tab released
-* on that pane changes nothing in either zone: the split would empty the pane
-* and seat the tab beside where it already was.
+* on that pane's centre changes nothing; released on its edge it splits, and
+* the factory's tab backfills the pane the drag would otherwise empty — without
+* a factory that release also changes nothing, since the split would empty the
+* pane and seat the tab beside where it already was.
 * @param state - current layout.
 * @param mint - id source for a pane an edge release creates.
 * @param tabId - the dragged tab.
 * @param targetPaneId - pane under the pointer.
 * @param zone - dock region the pointer released in.
+* @param makeTab - builds the tab that backfills a pane its only tab splits away from.
 * @returns the operations, or none when the release changes nothing.
 */
-function planDropTab(state, mint, tabId, targetPaneId, zone) {
+function planDropTab(state, mint, tabId, targetPaneId, zone, makeTab) {
 	const source = findTabPane(state, tabId);
 	const target = getPane(state, targetPaneId);
 	if (target.host !== "dock") return NOTHING;
@@ -1583,17 +1589,26 @@ function planDropTab(state, mint, tabId, targetPaneId, zone) {
 		if (source.id === targetPaneId) return NOTHING;
 		return [tabInto(source, tabId, targetPaneId, target.tabs.length)];
 	}
-	if (source.id === targetPaneId && source.tabs.length === 1) return NOTHING;
+	const vacates = source.id === targetPaneId && source.tabs.length === 1;
+	if (vacates && makeTab === void 0) return NOTHING;
 	if (!canSplit(state)) return NOTHING;
 	const newPaneId = mint("pane");
-	return [{
+	const ops = [{
 		type: "split",
 		paneId: targetPaneId,
 		axis: split.axis,
 		direction: split.direction,
 		newPaneId,
 		newSplitId: mint("split")
-	}, tabInto(source, tabId, newPaneId, 0)];
+	}];
+	if (vacates && makeTab !== void 0) ops.push({
+		type: "openTab",
+		paneId: targetPaneId,
+		tab: makeTab(mint("tab")),
+		index: source.tabs.length
+	});
+	ops.push(tabInto(source, tabId, newPaneId, 0));
+	return ops;
 }
 /**
 * Take a tab out into a floating panel.
@@ -2052,11 +2067,29 @@ function dividerSize(root) {
 	return thickness > 0 ? thickness : SPLIT_MINIMUMS.divider;
 }
 /**
+* The rendered split control's footprint in the strip's fixed part: its box
+* plus the strip's own gap, both of which the strip sheds when the control
+* hides. 0 while the control is hidden or unmeasured.
+*/
+function splitControlFootprint(pane) {
+	const control = pane.querySelector("[data-dockkit-split-button]");
+	if (control === null) return 0;
+	const width = control.getBoundingClientRect().width;
+	if (!(width > 0)) return 0;
+	const strip = pane.querySelector("[data-dockkit-strip]");
+	/* v8 ignore next -- the control only renders inside a strip. */
+	return width + (strip === null ? 0 : px(getComputedStyle(strip).columnGap));
+}
+/**
 * Measure every docked pane under `root`.
 * @param root - the docked surface's element.
+* @param splitHiddenWhenBlocked - whether the embedder hides blocked split
+* controls (`hideSplitWhenBlocked`); the room rule then leaves the control's
+* footprint out of each strip's fixed part, so the reading cannot flip with
+* the control's visibility (see `PaneMeasure.splitControlWidth`).
 * @returns each pane's fit, keyed by pane id.
 */
-function measurePaneFits(root) {
+function measurePaneFits(root, splitHiddenWhenBlocked = false) {
 	const minimums = {
 		divider: dividerSize(root),
 		chip: chipMinimum(root),
@@ -2067,7 +2100,8 @@ function measurePaneFits(root) {
 		pane: rectOf(pane),
 		strip: rectOf(pane.querySelector("[data-dockkit-strip]")),
 		chipsWidth: rectOf(pane.querySelector("[data-dockkit-strip-tabs]")).width,
-		fillWidth: rectOf(pane.querySelector("[data-dockkit-strip-fill]")).width
+		fillWidth: rectOf(pane.querySelector("[data-dockkit-strip-fill]")).width,
+		splitControlWidth: splitHiddenWhenBlocked ? splitControlFootprint(pane) : 0
 	}, minimums));
 	return fits;
 }
@@ -2189,8 +2223,10 @@ function useGesture(reset) {
 * The per-tab context menu, opened by a secondary press on the chip. It carries
 * the close gesture and whatever the embedder appends; the copy and float
 * gestures have no menu item — copying is an embedder API, floating is a drag
-* released clear of the surface. Presentational — it renders what its props
-* supply and dismisses itself on outside presses.
+* released clear of the surface. A menu that would hold no item at all renders
+* no popup, so a secondary press on a chip with nothing to offer shows nothing.
+* Presentational — it renders what its props supply and dismisses itself on
+* outside presses.
 *
 * It renders in a portal, positioned against the control that opened it. The tab
 * strip clips its overflow on purpose (so it never becomes a scroll container
@@ -2215,11 +2251,11 @@ function placeMenu(anchor, menu) {
 function TabMenu({ labels, anchor, onClose, onDismiss, extras }) {
 	const self = useRef(null);
 	const [position, setPosition] = useState(void 0);
+	const hasItems = onClose !== void 0 || Children.toArray(extras).some((item) => item !== "");
 	useLayoutEffect(() => {
-		/* v8 ignore next -- the ref is attached by effect time: the menu renders unconditionally. */
 		if (self.current === null) return;
 		setPosition(placeMenu(anchor, self.current));
-	}, [anchor]);
+	}, [anchor, hasItems]);
 	useEffect(() => {
 		const menu = self.current;
 		/* v8 ignore next -- the ref is attached by effect time: the menu renders unconditionally. */
@@ -2232,7 +2268,8 @@ function TabMenu({ labels, anchor, onClose, onDismiss, extras }) {
 		return () => {
 			window.removeEventListener("pointerdown", onPointerDown, true);
 		};
-	}, [onDismiss]);
+	}, [onDismiss, hasItems]);
+	if (!hasItems) return null;
 	return createPortal(jsxs("div", {
 		className: css.menu,
 		ref: self,
@@ -2249,7 +2286,7 @@ function TabMenu({ labels, anchor, onClose, onDismiss, extras }) {
 		onClick: (event) => {
 			event.stopPropagation();
 		},
-		children: [jsx("button", {
+		children: [onClose !== void 0 && jsx("button", {
 			type: "button",
 			role: "menuitem",
 			className: css.menuItem,
@@ -2260,70 +2297,142 @@ function TabMenu({ labels, anchor, onClose, onDismiss, extras }) {
 	}), document.body);
 }
 //#endregion
+//#region lib/types/components/TabTitle.js
+/**
+* A chip's title: one line, clipped at the chip's inset, never ellipsized.
+* While the text is wider than its box the span carries
+* `data-dockkit-tab-clipped`, and the stylesheet fades the text out at the
+* clipped edge in place of an ellipsis. Written to the DOM directly rather
+* than through state: a reading changes nothing that renders, only how the
+* stylesheet paints it. Re-read after every commit (the text may have
+* changed) and whenever the span's box resizes (the chip shrank or grew).
+*/
+/** Set or clear the span's `data-dockkit-tab-clipped` from its current geometry. */
+function markClipped(element) {
+	if (element.scrollWidth > element.clientWidth + 1) element.dataset.dockkitTabClipped = "";
+	else delete element.dataset.dockkitTabClipped;
+}
+/** The title span of a strip chip or a floating panel's header chip. */
+function TabTitle({ children }) {
+	const span = useRef(null);
+	useLayoutEffect(() => {
+		/* v8 ignore next -- the span is rendered unconditionally. */
+		if (span.current !== null) markClipped(span.current);
+	});
+	useLayoutEffect(() => {
+		const element = span.current;
+		/* v8 ignore next -- the span is rendered unconditionally. */
+		if (element === null || typeof ResizeObserver === "undefined") return void 0;
+		const observer = new ResizeObserver(() => {
+			markClipped(element);
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	return jsx("span", {
+		ref: span,
+		className: css.tabTitle,
+		"data-dockkit-tab-title": true,
+		children
+	});
+}
+//#endregion
 //#region lib/types/components/TabPanel.js
 /**
 * One pane: its tab strip (drag source, drop target, split control) and the
 * active tab's body with the dock preview overlay. Presentational; every gesture
 * leaves through `PaneCallbacks`, and the body itself comes from `renderTab`.
 *
-* A chip is a capsule carrying one control, its close, at its right end; the
-* context menu (secondary press) carries the same close plus whatever the
-* embedder appends. The chips sit in their own box, the strip's one shrinking
-* part: in a narrow pane they ellipsize and then clip there, so the add
-* control after them (drawn while the embedder's `canAddTab` allows), the
-* pane's split control, and the embedder's chrome keep their width and their
-* place at the strip's end.
-*/
-/** The split control's glyph: a frame divided by a vertical line, as the split itself is. */
+* A chip is a capsule carrying one control, its close, shown over its right
+* end while the chip is active, hovered, or focused; the context menu
+* (secondary press) carries the same close plus whatever the embedder appends.
+* Both close routes draw only while the embedder's `canCloseTab` allows, and
+* a pane's lone chip whose close is withheld draws quiet — no capsule, no
+* hover fill — since there is nothing to select against and nothing to do to
+* it.
+* Between neighbouring chips sits a slot: a fixed-width box drawing a
+* hairline, blank beside the active chip, and the drop caret when a drag
+* targets that index, so a caret never widens the row; the two end slots
+* exist only while targeted. The chips sit in their own box, the strip's one
+* shrinking part: in a narrow pane their titles fade at the clipped edge down
+* to the chip's floor and then the chips scroll there, keeping the active one
+* in view, so the add control after them (drawn while the embedder's
+* `canAddTab` allows), the pane's split control, and the embedder's chrome keep
+* their width and their place at the strip's end.
+*/
+/**
+* The ic_ds_panel_left_outline_16 frame alone: its outer and inner rounded
+* rectangles as one even-odd ring, without the divider. The glyphs below draw
+* 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. */
 function SplitGlyph() {
-	return jsxs("svg", {
-		width: "14",
-		height: "14",
-		viewBox: "0 0 14 14",
-		fill: "none",
-		"aria-hidden": "true",
-		children: [jsx("rect", {
-			x: "1.5",
-			y: "2",
-			width: "11",
-			height: "10",
-			rx: "1.5",
-			stroke: "currentColor"
-		}), jsx("path", {
-			d: "M7 2v10",
-			stroke: "currentColor"
-		})]
-	});
-}
-/** The add control's glyph. */
-function PlusGlyph() {
 	return jsx("svg", {
-		width: "12",
-		height: "12",
-		viewBox: "0 0 12 12",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
 		fill: "none",
 		"aria-hidden": "true",
 		children: jsx("path", {
-			d: "M6 1.5v9M1.5 6h9",
-			stroke: "currentColor",
-			strokeWidth: "1.2",
-			strokeLinecap: "round"
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: `${PANEL_FRAME}M7.31989 1.88307H8.68012V14.1169H7.31989V1.88307Z`,
+			fill: "currentColor"
 		})
 	});
 }
-/** The close control's glyph. */
-function CloseGlyph() {
-	return jsx("svg", {
-		width: "10",
-		height: "10",
-		viewBox: "0 0 10 10",
+/**
+* The drop hint's fill per zone: the half or the whole a release would fill
+* drawn solid, so the hint names its zone before its caption is read. A half
+* is drawn out to the frame's outer edge, under the ring, so its visible edge
+* is exactly the ring's inner edge with no seam at the corners; the whole sits
+* one stroke inside the frame so the ring stays visible around it.
+*/
+const ZONE_FILL = {
+	center: "M4.56 3.48H11.44A1.6 1.6 0 0 1 13.04 5.08V10.92A1.6 1.6 0 0 1 11.44 12.52H4.56A1.6 1.6 0 0 1 2.96 10.92V5.08A1.6 1.6 0 0 1 4.56 3.48Z",
+	left: "M4 0.523H8V15.477H4A4 4 0 0 1 0 11.477V4.523A4 4 0 0 1 4 0.523Z",
+	right: "M8 0.523H12A4 4 0 0 1 16 4.523V11.477A4 4 0 0 1 12 15.477H8Z",
+	top: "M0 8V4.523A4 4 0 0 1 4 0.523H12A4 4 0 0 1 16 4.523V8Z",
+	bottom: "M0 8H16V11.477A4 4 0 0 1 12 15.477H4A4 4 0 0 1 0 11.477Z"
+};
+/** The drop hint's glyph: the panel frame with the zone's fill drawn solid. */
+function ZoneGlyph({ zone }) {
+	return jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
 		fill: "none",
 		"aria-hidden": "true",
-		children: jsx("path", {
-			d: "M1.5 1.5l7 7M8.5 1.5l-7 7",
-			stroke: "currentColor",
-			strokeWidth: "1.2",
-			strokeLinecap: "round"
+		children: [jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: PANEL_FRAME,
+			fill: "currentColor"
+		}), jsx("path", {
+			d: ZONE_FILL[zone],
+			fill: "currentColor"
+		})]
+	});
+}
+/**
+* One landing card, inset inside the region a release would fill: a dashed
+* frame, the zone's glyph, and its caption. `active` is the region under the
+* pointer; a sibling shown for orientation only draws quieter.
+*/
+function DockHint({ zone, active, labels }) {
+	return jsx("div", {
+		className: css.dockHint,
+		"data-dockkit-dock-zone": zone,
+		"data-dockkit-drop-active": active || void 0,
+		children: jsxs("div", {
+			className: css.dockHintCard,
+			children: [jsx(ZoneGlyph, { zone }), jsx("span", {
+				className: css.dockHintLabel,
+				children: labels.dropZone[zone]
+			})]
 		})
 	});
 }
@@ -2348,10 +2457,80 @@ function chipToFocus(key, tabs, tabId) {
 function selects(key) {
 	return key === "Enter" || key === " ";
 }
-/** The split control's title: what it does, or why it cannot right now. */
-function splitTitle(labels, block) {
+/**
+* Which sides of the chip box hold chips scrolled out of view, as the
+* `data-dockkit-strip-scroll` value the stylesheet fades: `undefined` while
+* every chip is in view.
+*/
+function hiddenSides(box) {
+	const start = box.scrollLeft > 1;
+	const end = box.scrollLeft + box.clientWidth < box.scrollWidth - 1;
+	if (start && end) return "start end";
+	if (start) return "start";
+	if (end) return "end";
+}
+/**
+* Keep the chip box's `data-dockkit-strip-scroll` current: read after each
+* commit that can change the chips, on scroll, and on resize. Written to the
+* DOM directly rather than through state because a reading never changes
+* what renders, only how the stylesheet fades it.
+*
+* Known gap: a content-width change that alters neither `tabs` nor the box's
+* outer size — a live `renderTabTitle` growing a chip, or a drop-caret slot
+* mounting mid-drag — keeps the fade at its last reading until the next
+* scroll or resize. The fade is orientation chrome, so a stale edge fades a
+* few frames late rather than hiding anything.
+*/
+function useStripScrollFades(box, tabs) {
+	useLayoutEffect(() => {
+		const element = box.current;
+		/* v8 ignore next -- the box is rendered unconditionally with the strip. */
+		if (element === null) return void 0;
+		const apply = () => {
+			const sides = hiddenSides(element);
+			if (sides === void 0) delete element.dataset.dockkitStripScroll;
+			else element.dataset.dockkitStripScroll = sides;
+		};
+		apply();
+		element.addEventListener("scroll", apply, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(apply);
+		observer?.observe(element);
+		return () => {
+			element.removeEventListener("scroll", apply);
+			observer?.disconnect();
+		};
+	}, [box, tabs]);
+}
+/**
+* Bring the active chip into the chip box's view whenever the active tab or
+* the row of chips changes: a tab opened or selected past the box's edge, or
+* moved there by a close or a reorder, scrolls the box to it, with the fade
+* band (24px) cleared so the chip is not under it. A chip already in view
+* moves nothing. Direct DOM, like the fades above: the box's scroll position
+* renders nothing.
+*/
+function useActiveChipInView(box, chips, tabs, activeTabId) {
+	useLayoutEffect(() => {
+		const element = box.current;
+		const chip = activeTabId === void 0 ? void 0 : chips.get(activeTabId);
+		/* v8 ignore next -- the box and the active tab's chip are rendered with the strip. */
+		if (element === null || chip === void 0) return;
+		const bounds = element.getBoundingClientRect();
+		const rect = chip.getBoundingClientRect();
+		if (rect.left < bounds.left) element.scrollLeft += rect.left - bounds.left - STRIP_FADE;
+		else if (rect.right > bounds.right) element.scrollLeft += rect.right - bounds.right + STRIP_FADE;
+	}, [
+		box,
+		chips,
+		tabs,
+		activeTabId
+	]);
+}
+/** Width of the chip box's fade at a hidden side; mirrors the stylesheet's 24px. */
+const STRIP_FADE = 24;
+/** Why the split control cannot act right now. */
+function splitBlockedTitle(labels, block) {
 	switch (block) {
-		case void 0: return labels.splitPane;
 		case "budget": return labels.splitPaneDisabled;
 		case "width": return labels.splitPaneNarrow;
 	}
@@ -2360,6 +2539,9 @@ function splitTitle(labels, block) {
 function TabPanel({ 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;
@@ -2390,21 +2572,25 @@ function TabPanel({ state, pane, callbacks }) {
 			"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;
-						return jsxs(Fragment$1, { children: [stripIndex === index && jsx("div", {
-							className: css.caret,
-							"data-dockkit-caret": index
+						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, callbacks.draggingTabId === tabId && css.tabDragging),
+							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);
@@ -2439,12 +2625,8 @@ function TabPanel({ state, pane, callbacks }) {
 								});
 							},
 							children: [
-								jsx("span", {
-									className: css.tabTitle,
-									"data-dockkit-tab-title": true,
-									children: callbacks.renderTabTitle?.(tab) ?? tab.title
-								}),
-								jsx("button", {
+								jsx(TabTitle, { children: callbacks.renderTabTitle?.(tab) ?? tab.title }),
+								closable && jsx("button", {
 									type: "button",
 									className: css.tabClose,
 									"aria-label": callbacks.labels.closeTab,
@@ -2456,15 +2638,15 @@ function TabPanel({ state, pane, callbacks }) {
 										event.stopPropagation();
 										callbacks.onCloseTab(tabId);
 									},
-									children: jsx(CloseGlyph, {})
+									children: jsx(IconCloseFill14, { size: 14 })
 								}),
 								menu?.tabId === tabId && jsx(TabMenu, {
 									labels: callbacks.labels,
 									anchor: menu.anchor,
-									onClose: () => {
+									onClose: closable ? () => {
 										setMenu(void 0);
 										callbacks.onCloseTab(tabId);
-									},
+									} : void 0,
 									onDismiss: () => {
 										setMenu(void 0);
 									},
@@ -2475,39 +2657,49 @@ function TabPanel({ state, pane, callbacks }) {
 							]
 						})] }, tabId);
 					}), stripIndex === pane.tabs.length && jsx("div", {
-						className: css.caret,
+						className: clsx(css.slot, css.slotCaret),
 						"data-dockkit-caret": stripIndex
 					})]
 				}),
-				callbacks.canAddTab(pane.id) && jsx("button", {
-					type: "button",
-					className: css.addTab,
-					"aria-label": callbacks.labels.addTab,
-					title: callbacks.labels.addTab,
-					"data-dockkit-add-tab": pane.id,
-					onClick: (event) => {
-						event.stopPropagation();
-						callbacks.onAddTab(pane.id);
-					},
-					children: jsx(PlusGlyph, {})
+				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: jsx(IconPlusOutline16, { size: 14 })
+					})
 				}),
 				jsx("div", {
 					className: css.stripFill,
 					"data-dockkit-strip-fill": true
 				}),
-				!(callbacks.hideSplitAtCapacity && block === "budget") && jsx("button", {
-					type: "button",
-					className: css.iconButton,
-					"aria-label": callbacks.labels.splitPane,
-					title: splitTitle(callbacks.labels, block),
+				!(callbacks.hideSplitWhenBlocked && block !== void 0) && jsx(Tooltip, {
+					label: callbacks.labels.splitPane,
+					side: "bottom",
+					delayMs: 500,
 					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, {})
+					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,
@@ -2523,18 +2715,22 @@ function TabPanel({ state, pane, callbacks }) {
 			children: [active === void 0 ? jsx("p", {
 				className: css.empty,
 				children: callbacks.labels.emptyPane
-			}) : callbacks.renderTab(active), zone !== void 0 && (callbacks.horizontalDrops && zone !== "center" ? jsxs(Fragment, { children: [jsx("div", {
-				className: css.dockHint,
-				"data-dockkit-dock-zone": "left",
-				"data-dockkit-drop-active": zone === "left" || void 0
-			}), jsx("div", {
-				className: css.dockHint,
-				"data-dockkit-dock-zone": "right",
-				"data-dockkit-drop-active": zone === "right" || void 0
-			})] }) : jsx("div", {
-				className: css.dockHint,
-				"data-dockkit-dock-zone": zone
-			}))]
+			}) : 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
+			})] })]
 		})]
 	});
 }
@@ -2596,7 +2792,7 @@ const NO_PREVIEW = {
 };
 /** Nothing measured yet: every pane fits until a reading says otherwise. */
 const NO_FITS = /* @__PURE__ */ new Map();
-/** The default add-control policy: every pane offers one. */
+/** The default policy for the omitted callbacks: every pane offers the add control, every tab its close. */
 const ALWAYS = () => true;
 /**
 * Resolve where a pointer sits inside the docked surface. An edge zone is only
@@ -2642,7 +2838,7 @@ function sameSizes(a, b) {
 	});
 }
 /** The split tree and the gestures over it. */
-function DockSurface({ state, canSplit, canAddTab, intents, labels, renderTab, renderTabTitle, renderTabMenuItems, chrome, onRoom, dropZones = "edges", minPaneFraction = MIN_PANE_FRACTION, hideSplitAtCapacity = false }) {
+function DockSurface({ state, canSplit, canAddTab, canCloseTab, intents, labels, renderTab, renderTabTitle, renderTabMenuItems, chrome, onRoom, dropZones = "edges", minPaneFraction = MIN_PANE_FRACTION, hideSplitWhenBlocked = false }) {
 	const surface = useRef(null);
 	const [preview, setPreview] = useState(NO_PREVIEW);
 	const [fits, setFits] = useState(NO_FITS);
@@ -2658,10 +2854,10 @@ function DockSurface({ state, canSplit, canAddTab, intents, labels, renderTab, r
 	}, []);
 	const remeasure = useCallback(() => {
 		withSurface((root) => {
-			const next = measurePaneFits(root);
+			const next = measurePaneFits(root, hideSplitWhenBlocked);
 			setFits((current) => sameFits(current, next) ? current : next);
 		});
-	}, [withSurface]);
+	}, [withSurface, hideSplitWhenBlocked]);
 	useLayoutEffect(() => {
 		remeasure();
 	});
@@ -2753,8 +2949,9 @@ function DockSurface({ state, canSplit, canAddTab, intents, labels, renderTab, r
 			});
 		},
 		splitBlock,
-		hideSplitAtCapacity,
+		hideSplitWhenBlocked,
 		canAddTab: canAddTab ?? ALWAYS,
+		canCloseTab: canCloseTab ?? ALWAYS,
 		dropTarget: preview.dropTarget,
 		horizontalDrops: dropZones === "horizontal",
 		draggingTabId: preview.draggingTabId,
@@ -2782,8 +2979,9 @@ function DockSurface({ state, canSplit, canAddTab, intents, labels, renderTab, r
 //#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 and renders no tab
-* strip — the panel *is* the tab. Pressing a panel's body raises it. Its grip
+* 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
@@ -2809,7 +3007,7 @@ 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 }) {
+function FloatLayer({ state, intents, labels, renderTab, renderTabTitle, canCloseTab }) {
 	const [preview, setPreview] = useState(void 0);
 	const begin = useGesture(() => {
 		setPreview(void 0);
@@ -2864,42 +3062,53 @@ function FloatLayer({ state, intents, labels, renderTab, renderTabTitle }) {
 			},
 			children: [
 				jsxs("header", {
-					className: css.floatHeader,
+					className: clsx(css.tabStrip, css.floatHeader),
 					"data-dockkit-float-grip": paneId,
 					onPointerDown: (event) => {
 						drag("move", paneId, event);
 					},
 					children: [
-						jsx("span", {
-							className: css.floatTitle,
+						jsx("div", {
+							className: clsx(css.tab, css.floatTitle),
 							"data-dockkit-float-title": true,
-							children: renderTabTitle?.(tab) ?? tab.title
+							children: jsx(TabTitle, { children: renderTabTitle?.(tab) ?? tab.title })
 						}),
-						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("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 })
+							})
 						}),
-						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: "✕"
+						(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, {})
+							})
 						})
 					]
 				}),