diff --git a/src/components/DockTabs.svelte b/src/components/DockTabs.svelte
index f3ad525c4..89a84e36d 100644
--- a/src/components/DockTabs.svelte
+++ b/src/components/DockTabs.svelte
@@ -1,3 +1,8 @@
+<script module>
+	// 40 F6: one scroll position for every docked strip (see keepScroll)
+	let sharedScroll = 0;
+</script>
+
 <script>
 	// Notebook tab strip for the bottom dock. EVERY panel that is docked+open is a tab
 	// here — the Flow family (Node editor / Flow Code / Animation / UV editor / Shader
@@ -35,8 +40,12 @@
 	// strip it UNDOCKS that view into a floating window. Both are the fast paths for
 	// what the tab's right-click menu already offered in words, which is what keeps the
 	// feature reachable on a device that cannot drag.
-	import { dockTabs, bottomDockActive, activateDock, dockMinimized, reorderDockTabs, armDockMode } from '$lib/bottomDock';
-	import { dockAddItems, dockTabItems, closeStoreFor } from '$lib/dockMenu';
+	import { dockTabs, bottomDockActive, activateDock, dockMinimized, reorderDockTabs, armDockMode, undockButtonMode } from '$lib/bottomDock';
+	import { dockAddItems, dockTabItems, closeDockView, undockFromDock, undockInto } from '$lib/dockMenu';
+	import { windowAt, nodeOf } from '$lib/windowTabs';
+	import { phoneShell } from '$lib/ui/phoneShell.js';
+	import { mobileUndockAllowed } from '../stores/appStore.js';
+	import DockViewsSheet from './DockViewsSheet.svelte';
 	import { stripScroll } from '$lib/ui/stripScroll.js';
 	import ContextMenu from './ContextMenu.svelte';
 	import Icon from './ui/Icon.svelte';
@@ -45,7 +54,15 @@
 	// Rebuilt per OPEN, not once at init: the list drops views that are already docked,
 	// and that set changes every time a tab opens or closes.
 	let addItems = $state(/** @type {any[]} */ ([]));
+	// 40 F9: on a phone (with floating windows off) "+" is a sheet listing EVERY window with
+	// a show/hide toggle; with floating windows on, a phone behaves like the desktop.
+	const sheetMode = $derived($phoneShell && !$mobileUndockAllowed);
+	let sheetOpen = $state(false);
 	function openAdd(/** @type {MouseEvent} */ e) {
+		if (sheetMode) {
+			sheetOpen = true;
+			return;
+		}
 		const r = /** @type {HTMLElement} */ (e.currentTarget).getBoundingClientRect();
 		addItems = dockAddItems();
 		addMenu = { x: r.left, y: r.bottom + 4 };
@@ -81,6 +98,15 @@
 	let dropX = $state(0);
 	/** released here and the view undocks instead of moving */
 	let dropOut = $state(false);
+	/** 40 F10: the floating window a drag released out of the strip would JOIN as a tab */
+	let joinKey = $state(/** @type {string|null} */ (null));
+	/** @param {string|null} key */
+	function markJoin(key) {
+		if (key === joinKey) return;
+		nodeOf(joinKey ?? '')?.classList.remove('merge-target');
+		joinKey = key;
+		nodeOf(key ?? '')?.classList.add('merge-target');
+	}
 	/** a drag that just ended must not also activate the tab — self-expiring, because a
 	 * pointer that left the button fires no click at all and a sticky flag would then eat
 	 * the next real one */
@@ -130,6 +156,7 @@
 				e.clientX > strip.right + OUT_MARGIN ||
 				e.clientY < strip.top - OUT_MARGIN ||
 				e.clientY > strip.bottom + OUT_MARGIN;
+			markJoin(dropOut ? windowAt(e.clientX, e.clientY, dragKey ?? undefined) : null);
 			dropIndex = rects.filter((r) => e.clientX > r.left + r.width / 2).length;
 			const at = dropIndex < rects.length ? rects[dropIndex].left : rects[rects.length - 1].right;
 			dropX = at - strip.left + scroll;
@@ -141,9 +168,16 @@
 			const state = pending;
 			const dragged = dragKey;
 			const out = dropOut;
+			const join = out ? windowAt(e.clientX, e.clientY, dragged ?? undefined) : null;
 			cleanup();
 			if (!state || !dragged) return; // never travelled: the click activates the tab
 			draggedAt = performance.now();
+			if (join) {
+				// 40 F10: dropped onto/into a floating window — it joins that window as a tab
+				// (forms a group) instead of floating on its own
+				undockInto(dragged, join);
+				return;
+			}
 			if (out) {
 				// the W5 seam every panel already consumes — the panel owns its own mode
 				armDockMode(dragged, false);
@@ -159,6 +193,7 @@
 			pending = null;
 			dragKey = null;
 			dropOut = false;
+			markJoin(null);
 			window.removeEventListener('pointermove', move);
 			window.removeEventListener('pointerup', up);
 			window.removeEventListener('pointercancel', cancel);
@@ -176,6 +211,47 @@
 		};
 	}
 
+	// --- 40 F6: the strip KEEPS its scroll position ---------------------------------------
+	// Only the visible docked panel renders (or is shown), so each tab switch brings up ANOTHER
+	// panel's strip — a fresh element at scrollLeft 0, which snapped a strip scrolled to its 5th tab
+	// back to the start the moment that tab was picked. One position is shared by every strip
+	// instance (module state), saved while a strip is on screen and put back whenever one comes on
+	// screen (mount, or a display:none panel shown again — its width goes 0 → N). Then the active
+	// tab is brought in only if NONE of it is in view (it was activated from elsewhere — a key,
+	// the toolbar), so a click on a tab, which is always at least partly visible, never moves
+	// the strip.
+	/** @param {HTMLElement} node */
+	function keepScroll(node) {
+		let shown = false;
+		const restore = () => {
+			node.scrollLeft = sharedScroll;
+			const on = /** @type {HTMLElement | null} */ (node.querySelector('[data-dock-tab][aria-selected="true"]'));
+			if (!on) return;
+			const a = on.offsetLeft;
+			const b = a + on.offsetWidth;
+			const view = node.scrollLeft + node.clientWidth;
+			if (b > node.scrollLeft && a < view) return; // some of it shows: leave the strip alone
+			if (b <= node.scrollLeft) node.scrollLeft = Math.max(0, a - 24);
+			else node.scrollLeft = b + 44 - node.clientWidth; // + its own ✕ and the fade
+		};
+		const save = () => {
+			if (node.clientWidth > 0) sharedScroll = node.scrollLeft;
+		};
+		const ro = new ResizeObserver(() => {
+			const now = node.clientWidth > 0;
+			if (now && !shown) restore();
+			shown = now;
+		});
+		ro.observe(node);
+		node.addEventListener('scroll', save, { passive: true });
+		return {
+			destroy() {
+				ro.disconnect();
+				node.removeEventListener('scroll', save);
+			}
+		};
+	}
+
 	/** @param {string} key */
 	function tabClick(key) {
 		if (performance.now() - draggedAt < 300) return; // that was a drag, not a click
@@ -192,43 +268,55 @@
 <!-- 38 NOTES-38 #29: each tab carries its own ✕ (the same Close as its right-click menu), and the
      "+" sits OUTSIDE the scrolling strip so it stays pinned and visible however many tabs there
      are. `stripEl` is still the scroll box the W7 drag measures (reorder vs undock). -->
-<div class="dt-row absolute -top-6 left-3 right-24 z-20 flex">
-	<div bind:this={stripEl} class="tp-noscrollbar dt-scroll relative flex min-w-0 overflow-x-auto" use:stripScroll>
-		<div class="tp-ui tp-dtabs tp-dtabs-slim" role="tablist" aria-label="Docked views">
-			{#each $dockTabs as tab (tab.key)}
-				<span class="tp-dtab-group" class:tp-dtab-group-on={$bottomDockActive === tab.key}>
-					<button
-						data-dock-tab={tab.key}
-						role="tab"
-						aria-selected={$bottomDockActive === tab.key}
-						class="tab-note tp-dtab select-none {$bottomDockActive === tab.key ? 'dt-on' : 'dt-off'} {dragKey === tab.key
-							? 'dt-dragging opacity-40'
-							: ''}"
-						title="{tab.title} — drag to reorder, or out of the strip to undock"
-						use:tabDrag={{ key: tab.key }}
-						oncontextmenu={(/** @type {MouseEvent} */ e) => openTabMenu(e, tab.key)}
-						onclick={() => tabClick(tab.key)}
-						>{#if tab.icon}<span class="tp-dtab-ico"><Icon name={tab.icon} size={16} aria-hidden="true" /></span>{/if}{tab.title}</button
-					>
-					<button
-						data-dock-tab-close={tab.key}
-						class="tab-note tp-dtab-x"
-						title="Close {tab.title}"
-						aria-label="Close {tab.title}"
-						onclick={() => closeStoreFor(tab.key)?.set(true)}><Icon name="x" size={16} aria-hidden="true" /></button
-					>
-				</span>
-			{/each}
+<!-- 40 F6: the BAR (background + border) is the non-scrolling `.dt-bar`, and the scroll box
+     inside it is bare. Before, the bar was the scroll box's flex child with `min-width: 0`, so it
+     shrank to the visible width and every tab scrolled past it had no background (the scene showed
+     through — transparent-tab-header), and the edge fade masked the box that held the paint, so
+     the fade faded into the scene. Now the fade masks only the tabs, over the bar's own paint. -->
+<div class="dt-row absolute -top-6 left-3 z-20 flex" class:right-24={!sheetMode} class:right-14={sheetMode}>
+	<div class="tp-ui tp-dtabs tp-dtabs-slim dt-bar">
+		<div
+			bind:this={stripEl}
+			class="tp-noscrollbar dt-scroll relative flex min-w-0 overflow-x-auto"
+			use:stripScroll
+			use:keepScroll
+		>
+			<div class="dt-tabs" role="tablist" aria-label="Docked views">
+				{#each $dockTabs as tab (tab.key)}
+					<span class="tp-dtab-group" class:tp-dtab-group-on={$bottomDockActive === tab.key}>
+						<button
+							data-dock-tab={tab.key}
+							role="tab"
+							aria-selected={$bottomDockActive === tab.key}
+							class="tab-note tp-dtab select-none {$bottomDockActive === tab.key ? 'dt-on' : 'dt-off'} {dragKey === tab.key
+								? 'dt-dragging opacity-40'
+								: ''}"
+							title="{tab.title} — drag to reorder, or out of the strip to undock"
+							use:tabDrag={{ key: tab.key }}
+							oncontextmenu={(/** @type {MouseEvent} */ e) => openTabMenu(e, tab.key)}
+							onclick={() => tabClick(tab.key)}
+							>{#if tab.icon}<span class="tp-dtab-ico"><Icon name={tab.icon} size={16} aria-hidden="true" /></span>{/if}{tab.title}</button
+						>
+						<button
+							data-dock-tab-close={tab.key}
+							class="tab-note tp-dtab-x"
+							title="Close {tab.title}"
+							aria-label="Close {tab.title}"
+							onclick={() => closeDockView(tab.key)}><Icon name="x" size={16} aria-hidden="true" /></button
+						>
+					</span>
+				{/each}
+			</div>
+			<!-- the insertion bar: where the dragged tab would land. Hidden once the pointer is
+			     clear of the strip, because there the drop means UNDOCK, not "put it here". -->
+			{#if dragKey && !dropOut}
+				<div
+					id="dock-tab-drop"
+					class="dt-drop pointer-events-none absolute bottom-0 top-0 w-0.5"
+					style="left: {dropX}px"
+				></div>
+			{/if}
 		</div>
-		<!-- the insertion bar: where the dragged tab would land. Hidden once the pointer is
-		     clear of the strip, because there the drop means UNDOCK, not "put it here". -->
-		{#if dragKey && !dropOut}
-			<div
-				id="dock-tab-drop"
-				class="dt-drop pointer-events-none absolute bottom-0 top-0 w-0.5"
-				style="left: {dropX}px"
-			></div>
-		{/if}
 	</div>
 	<div class="tp-ui tp-dtabs tp-dtabs-slim shrink-0">
 		<button
@@ -244,6 +332,18 @@
 <!-- the dock's OWN chrome, pinned to the right edge of the dock (= of the window) -->
 <div class="absolute -top-6 right-3 z-20 flex">
 	<div class="tp-ui tp-dtabs tp-dtabs-slim">
+		<!-- 40 F8: undock lives HERE, left of "minimize the dock", not inside each docked window.
+		     It undocks the ACTIVE tab (or, per Settings, every tab as one tabbed window). A phone
+		     whose windows cannot float has nothing to undock to, so it shows no button. -->
+		{#if !sheetMode}
+			<button
+				id="dock-undock"
+				class="tab-note dt-btn tp-dtab tp-dtab-icon"
+				title={$undockButtonMode === 'group' ? 'Undock all tabs as one floating window' : 'Undock this view into a floating window'}
+				aria-label={$undockButtonMode === 'group' ? 'Undock all tabs' : 'Undock into a floating window'}
+				onclick={() => undockFromDock()}><Icon name="app-window" size={16} aria-hidden="true" /></button
+			>
+		{/if}
 		<button
 			id="dock-minimize"
 			class="tab-note dt-btn tp-dtab tp-dtab-icon"
@@ -254,6 +354,9 @@
 	</div>
 </div>
 
+{#if sheetOpen}
+	<DockViewsSheet bind:open={sheetOpen} />
+{/if}
 {#if addMenu}
 	<ContextMenu x={addMenu.x} y={addMenu.y} items={addItems} on:close={() => (addMenu = null)} />
 {/if}
@@ -270,4 +373,16 @@
 	.dt-drop {
 		background: var(--accent);
 	}
+	/* 40 F6: the bar paints; it shrinks to the row (min-width 0) while the tabs inside the bare
+	   scroll box keep their full width (flex-shrink 0), so the paint is under every tab */
+	.dt-bar {
+		display: flex;
+		min-width: 0;
+	}
+	.dt-tabs {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: 2px;
+	}
 </style>
diff --git a/src/components/DockViewsSheet.svelte b/src/components/DockViewsSheet.svelte
new file mode 100644
index 000000000..63d04ad4d
--- /dev/null
+++ b/src/components/DockViewsSheet.svelte
@@ -0,0 +1,101 @@
+<script>
+	// 40 F9 — the dock's "+" on a PHONE (with floating windows off): a sheet listing EVERY
+	// window, each with a show/hide switch. On the desktop — and on a phone with floating
+	// windows on (Settings ▸ Interface ▸ Allow undocking on touch screens) — "+" keeps its
+	// add-a-view menu, which brings views into the dock. Here a window can only ever live in
+	// the dock, so "show" opens it there as the visible tab and "hide" closes it.
+	//
+	// Portaled to <body>: the dock panel is a fixed, z-indexed box, so a sheet left inside it
+	// would sit in the dock's stacking context, under the phone bar and the Play button.
+	import Sheet from './ui/Sheet.svelte';
+	import Toggle from './ui/Toggle.svelte';
+	import Icon from './ui/Icon.svelte';
+	import { dockSheetRows, setDockViewShown } from '$lib/dockMenu';
+	import { dockOccupants, DOCK_ICONS } from '$lib/bottomDock';
+
+	/** @type {{open?: boolean}} */
+	let { open = $bindable(false) } = $props();
+
+	// re-read whenever the dock's occupants change (a toggle docks/undocks a view); the
+	// arguments are what the derived depends on — dockSheetRows reads them through get()
+	/** @param {any} _occupants @param {boolean} _open */
+	const rowsFor = (_occupants, _open) => dockSheetRows();
+	const rows = $derived(rowsFor($dockOccupants, open));
+
+	/** @param {HTMLElement} node */
+	function portal(node) {
+		document.body.appendChild(node);
+		return { destroy: () => node.remove() };
+	}
+</script>
+
+<div use:portal>
+	<Sheet bind:open title="Windows" detents={['half', 'full']} id="dock-views-sheet" modal topInset={124}>
+		<ul class="dvs-list" aria-label="Windows">
+			{#each rows as row (row.key)}
+				<li class="dvs-row" data-dock-view={row.key}>
+					<span class="dvs-ico" aria-hidden="true"><Icon name={DOCK_ICONS[row.key] ?? 'app-window'} size={20} /></span>
+					<span class="dvs-text">
+						<span class="dvs-title">{row.title}</span>
+						<span class="dvs-desc">{row.tooltip}</span>
+					</span>
+					<Toggle
+						id="dock-view-toggle-{row.key}"
+						label="Show {row.title}"
+						checked={row.open}
+						onchange={(/** @type {boolean} */ on) => setDockViewShown(row.key, on)}
+					/>
+				</li>
+			{/each}
+		</ul>
+	</Sheet>
+</div>
+
+<style>
+	/* NOTES-38 #32 / 40 F1: a sheet ends at the phone bar — Play stays visible and tappable
+	   (the bar's height is the phone shell's --ps-bar-h; 0 when there is no bar) */
+	:global(.sh#dock-views-sheet) {
+		bottom: var(--ps-bar-h, 0px) !important;
+	}
+	.dvs-list {
+		display: grid;
+		/* a track sizes to its widest unwrapped description otherwise, and pushes the switches
+		   off the sheet's right edge */
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--space-1);
+		margin: 0;
+		padding: 0 var(--space-2) var(--space-4);
+		list-style: none;
+	}
+	.dvs-row {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		gap: var(--space-3);
+		min-height: 52px;
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-input);
+	}
+	.dvs-ico {
+		display: inline-flex;
+		color: var(--text-muted);
+	}
+	.dvs-text {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		min-width: 0;
+	}
+	.dvs-title {
+		color: var(--text);
+		font-size: var(--fs-body);
+		font-weight: 600;
+	}
+	.dvs-desc {
+		overflow: hidden;
+		color: var(--text-muted);
+		font-size: var(--fs-desc);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/src/components/Flow.svelte b/src/components/Flow.svelte
index 0d72d5252..dd5dab6b7 100644
--- a/src/components/Flow.svelte
+++ b/src/components/Flow.svelte
@@ -201,13 +201,6 @@
 				onpointerup={endResize}
 			></div>
 			<DockTabs />
-			<button
-				id="flow-undock"
-				class="tp-dock-btn absolute right-2 top-2 z-10"
-				title="Undock into a floating window"
-				aria-label="Undock into a floating window"
-				onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button
-			>
 			<div class="relative" style="height: {$dockHeight - 16}px">
 				<SvelteFlowProvider>
 					<Nodes bind:paletteOpen />
diff --git a/src/components/editors/AnimationWindow.svelte b/src/components/editors/AnimationWindow.svelte
index 60aa95d86..f6edbccea 100644
--- a/src/components/editors/AnimationWindow.svelte
+++ b/src/components/editors/AnimationWindow.svelte
@@ -40,6 +40,7 @@
 	import DockTabs from '../DockTabs.svelte';
 	import WindowChrome from '../ui/WindowChrome.svelte';
 	import ScrollStrip from '../ui/ScrollStrip.svelte';
+	import { fullName } from '$lib/ui/fullName.js';
 	import Segmented from '../ui/Segmented.svelte';
 	import { createGesture } from '$lib/modalGrab';
 	// W5: the BINDING for this pane's grab key lives in the shortcut registry (an
@@ -2669,14 +2670,22 @@
 				onpointerup={endResize}
 			></div>
 			<DockTabs />
-			<div class="flex shrink-0 items-center gap-2 pb-1">
-				<span class="tp-dock-title">Animation</span>
-				<span class="tp-dock-sub">{target ? target.name || 'object' : 'no selection'}</span>
-				{#if compact && target}{@render paneSwitch()}{/if}
-				<span class="flex-1"></span>
-				<button class="tp-dock-btn" title="Undock into a floating window" aria-label="Undock" onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button>
-				<button class="tp-dock-btn" title="Close" aria-label="Close" onclick={() => animationClose.set(true)}><Icon name="x" size={16} /></button>
-			</div>
+			<!-- 40 F7/F8: no ✕ and no undock here any more (the tab carries ✕, the dock's own
+			     chrome carries undock), and the object's NAME is one ellipsized line: on a
+			     phone-narrow editor it moves to its own row above the pane switch, so a long
+			     name can never push the controls apart (B2ack-wall-super). -->
+			{#if compact && target}
+				<div class="tp-dock-crumb" id="animation-name-row">
+					<span class="tp-dock-title">Animation</span>
+					<span class="tp-dock-sub" id="animation-target-name" use:fullName>{target.name || 'object'}</span>
+				</div>
+				<div class="flex shrink-0 items-center gap-2 pb-1">{@render paneSwitch()}</div>
+			{:else}
+				<div class="flex min-w-0 shrink-0 items-center gap-2 pb-1">
+					<span class="tp-dock-title">Animation</span>
+					<span class="tp-dock-sub" id="animation-target-name" use:fullName>{target ? target.name || 'object' : 'no selection'}</span>
+				</div>
+			{/if}
 			<div class="flex min-h-0 flex-1 flex-col">
 				{@render body()}
 			</div>
@@ -2707,14 +2716,14 @@
 			>
 				{#snippet heading()}
 					<span class="wc-label">Animation</span>
-					<span class="wc-sub">{target ? target.name || 'object' : 'no selection'}</span>
-					{#if compact && target}{@render paneSwitch()}{/if}
+					<span class="wc-sub" id="animation-target-name" use:fullName>{target ? target.name || 'object' : 'no selection'}</span>
 					<span class="flex-1"></span>
 				{/snippet}
 				{#snippet actions()}
 					<button class="wc-act-text" title="Dock to the bottom" onclick={() => setDocked(true)}><Icon name="panel-bottom" size={16} />Dock</button>
 				{/snippet}
 			</WindowChrome>
+			{#if compact && target}<div class="flex shrink-0 items-center gap-2 px-2 py-1">{@render paneSwitch()}</div>{/if}
 			{@render body()}
 			<div
 				class="resize-cue absolute bottom-0 right-0 z-10 h-3.5 w-3.5 cursor-se-resize rounded-tl bg-border-strong/40"
diff --git a/src/components/editors/CodeWorkspace.svelte b/src/components/editors/CodeWorkspace.svelte
index f783aff8b..dd8849294 100644
--- a/src/components/editors/CodeWorkspace.svelte
+++ b/src/components/editors/CodeWorkspace.svelte
@@ -7,7 +7,8 @@
 	//
 	// It replaces the single-script ScriptPanel: a Script node's typed-sockets editor rides
 	// here for the tab that edits ONE script node (same element ids, so its suites carry over).
-	import { untrack } from 'svelte';
+	import { untrack, onMount } from 'svelte';
+	import { registerDockCloser } from '$lib/dockMenu';
 	import { get } from 'svelte/store';
 	import Icon from '../ui/Icon.svelte';
 	import CodeEditor from './CodeEditor.svelte';
@@ -415,6 +416,9 @@
 		closeFailed = 0;
 		confirmCloseAll = true;
 	}
+	// 40 F8: a docked workspace closes from its TAB's ✕ — which takes this same path, so the
+	// unsaved-tabs question still comes first
+	onMount(() => registerDockCloser('code', requestCloseWorkspace));
 	async function closeSavingAll() {
 		const failed = await saveAllCodeTabs();
 		if (failed.length) {
@@ -762,8 +766,6 @@
 			<span class="flex-1"></span>
 			{@render openGraph()}
 			{@render sideToggle('right')}
-			<button class="tp-dock-btn" title="Undock into a floating window" aria-label="Undock into a floating window" onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button>
-			<button id="code-ws-close" class="tp-dock-btn" title="Close the code workspace" aria-label="Close the code workspace" onclick={requestCloseWorkspace}><Icon name="x" size={16} /></button>
 		</div>
 		{@render main()}
 	</div>
diff --git a/src/components/editors/Explorer.svelte b/src/components/editors/Explorer.svelte
index 27a2467cb..94cc4981f 100644
--- a/src/components/editors/Explorer.svelte
+++ b/src/components/editors/Explorer.svelte
@@ -8328,13 +8328,6 @@
 				{@render logChip()}
 				{@render storageChip()}
 				{@render identityChip()}
-				<button
-					id="explorer-undock"
-					class="tp-dock-btn shrink-0"
-					title="Undock into a floating window"
-					aria-label="Undock into a floating window"
-					onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button
-				>
 			</div>
 			<div style="height: {$dockHeight - 44}px">
 				{@render content()}
diff --git a/src/components/editors/FlowCode.svelte b/src/components/editors/FlowCode.svelte
index 1dfcc8bed..696eb9cff 100644
--- a/src/components/editors/FlowCode.svelte
+++ b/src/components/editors/FlowCode.svelte
@@ -232,8 +232,6 @@
 				<span class="tp-dock-title">Flow Code</span>
 				<span class="flex-1"></span>
 				{@render editorActions()}
-				<button class="tp-dock-btn" title="Undock into a floating window" aria-label="Undock into a floating window" onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button>
-				<button class="tp-dock-btn" title="Close" aria-label="Close Flow Code" onclick={() => flowCodeClose.set(true)}><Icon name="x" size={16} /></button>
 			</div>
 			<div class="flex min-h-0 flex-1 flex-col">
 				{@render body()}
diff --git a/src/components/editors/HudEditor.svelte b/src/components/editors/HudEditor.svelte
index 106374edc..58778f22f 100644
--- a/src/components/editors/HudEditor.svelte
+++ b/src/components/editors/HudEditor.svelte
@@ -1454,8 +1454,6 @@
 			<div class="flex shrink-0 items-center gap-2 pb-1">
 				<span class="tp-dock-title">HUD editor</span>
 				<span class="flex-1"></span>
-				<button class="tp-dock-btn" title="Undock into a floating window" onclick={() => setDocked(false)} aria-label="Undock into a floating window"><Icon name="app-window" size={16} /></button>
-				<button class="tp-dock-btn" title="Close" onclick={() => hudEditorClose.set(true)} aria-label="Close"><Icon name="x" size={16} /></button>
 			</div>
 			<div class="flex min-h-0 flex-1 flex-col">
 				{@render body()}
diff --git a/src/components/editors/Profiler.svelte b/src/components/editors/Profiler.svelte
index 4eaf64578..2cf74dd49 100644
--- a/src/components/editors/Profiler.svelte
+++ b/src/components/editors/Profiler.svelte
@@ -827,16 +827,6 @@
 				<span class="w-2"></span>
 				<!-- 38 NOTES-38 #38/#39: the controls scroll sideways on a phone; undock/close stay pinned -->
 				<ScrollStrip class="pf-strip" label="Profiler tools" id="profiler-toolbar">{@render controls()}</ScrollStrip>
-				<button class="tp-dock-btn"
-					title="Undock into a floating window"
-					aria-label="Undock the Profiler"
-					onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button
-				>
-				<button class="tp-dock-btn"
-					title="Close"
-					aria-label="Close the Profiler"
-					onclick={() => profilerClose.set(true)}><Icon name="x" size={16} /></button
-				>
 			</div>
 			<div class="flex min-h-0 flex-1 flex-col">
 				{@render body()}
diff --git a/src/components/editors/ShaderEditor.svelte b/src/components/editors/ShaderEditor.svelte
index bec319577..0d7f7ebf7 100644
--- a/src/components/editors/ShaderEditor.svelte
+++ b/src/components/editors/ShaderEditor.svelte
@@ -693,12 +693,15 @@
 			<Icon name="trash-2" size={16} aria-hidden="true" />
 		</button>
 	{/if}
-	<button class="tp-dock-btn"
-		id="shader-close"
-		title="Close"
-		aria-label="Close the shader editor"
-		onclick={() => shaderEditorClose.set(true)}><Icon name="x" size={16} /></button
-	>
+	<!-- 40 F8: a DOCKED editor closes from its tab's ✕; only the floating window keeps one -->
+	{#if !docked}
+		<button class="tp-dock-btn"
+			id="shader-close"
+			title="Close"
+			aria-label="Close the shader editor"
+			onclick={() => shaderEditorClose.set(true)}><Icon name="x" size={16} /></button
+		>
+	{/if}
 {/snippet}
 
 {#snippet paletteContent(/** @type {number} */ paneH, /** @type {(key: string) => void} */ pick)}
@@ -1039,12 +1042,6 @@
 				<span class="shader-scope" id="shader-scope">{scopeLabel}</span>
 			</ScrollStrip>
 			<div class="shader-actions">
-				<button class="tp-dock-btn"
-					id="shader-undock"
-					title="Undock into a floating window"
-					aria-label="Undock the shader editor"
-					onclick={() => setDocked(false)}><Icon name="app-window" size={16} /></button
-				>
 				{@render editorActions()}
 			</div>
 		</div>
diff --git a/src/components/editors/UvEditor.svelte b/src/components/editors/UvEditor.svelte
index 1d14245c6..41a5b2c18 100644
--- a/src/components/editors/UvEditor.svelte
+++ b/src/components/editors/UvEditor.svelte
@@ -2021,8 +2021,6 @@
 			<div class="flex shrink-0 items-center gap-2 pb-1">
 				<span class="tp-dock-title">UV editor</span>
 				<span class="flex-1"></span>
-				<button class="tp-dock-btn" title="Undock into a floating window" onclick={() => setDocked(false)} aria-label="Undock into a floating window"><Icon name="app-window" size={16} /></button>
-				<button class="tp-dock-btn" title="Close" onclick={() => uvEditorClose.set(true)} aria-label="Close"><Icon name="x" size={16} /></button>
 			</div>
 			<div class="flex min-h-0 flex-1 flex-col">
 				{@render body()}
diff --git a/src/components/menu/LayoutsMenu.svelte b/src/components/menu/LayoutsMenu.svelte
index e6613052d..0b27c0751 100644
--- a/src/components/menu/LayoutsMenu.svelte
+++ b/src/components/menu/LayoutsMenu.svelte
@@ -1,71 +1,51 @@
 <script>
-	// 37 R14 — the Layouts popover the burger menu opens: the saved layouts + "save the
-	// current layout", without going through Settings. Closes on Escape / an outside press.
-	import Icon from '../ui/Icon.svelte';
+	// 37 R14 — the Layouts dialog the burger menu opens: the saved layouts + "save the current
+	// layout", without going through Settings. Closes on Escape / the ✕ / an outside press.
+	// 40 F11: it was a hand-rolled fixed panel painted with `--surface`, a pre-38 theme variable
+	// most themes no longer define, so it rendered see-through over the scene on the phone AND
+	// desktop (layouts-modal). It is the kit modal now (ui/ModalDialog): the dim, the surface, the
+	// modal header, the full-screen-under-640 treatment — the same box as Sessions or Recording.
+	import ModalDialog from '../ui/ModalDialog.svelte';
 	import WorkspaceLayouts from './WorkspaceLayouts.svelte';
 	import { layoutsMenuOpen } from '$lib/uiLayouts';
 
-	/** @type {HTMLElement|null} */
-	let panel = $state(null);
-
-	/** @param {PointerEvent} e */
-	function outside(e) {
-		if (!$layoutsMenuOpen || !panel) return;
-		if (panel.contains(/** @type {Node} */ (e.target))) return;
-		if (/** @type {HTMLElement} */ (e.target)?.closest?.('#open-layouts')) return;
-		layoutsMenuOpen.set(false);
-	}
+	const close = () => layoutsMenuOpen.set(false);
 </script>
 
+<!-- Escape in the window's CAPTURE phase: the dialog autofocuses its name field, and the burger
+     menu's tree it renders in stops keydown on the way up, so neither the dialog's own handler
+     nor a bubbling window listener ever heard it; and deleting a row unmounts the button that
+     had focus (focus falls to <body>), so it must not depend on focus being inside either.
+     A rename field's own Escape (it cancels the rename) is left alone. -->
 <svelte:window
-	onpointerdown={outside}
-	onkeydown={(e) => {
-		if ($layoutsMenuOpen && e.key === 'Escape') layoutsMenuOpen.set(false);
+	onkeydowncapture={(e) => {
+		if (!$layoutsMenuOpen || e.key !== 'Escape') return;
+		if (/** @type {HTMLElement} */ (e.target)?.classList?.contains('wl-rename')) return;
+		close();
 	}}
 />
 
-{#if $layoutsMenuOpen}
-	<div id="layouts-menu" class="layouts-menu ui-panel" role="region" aria-label="Workspace layouts" bind:this={panel}>
-		<div class="lm-head">
-			<span class="lm-title">Workspace layouts</span>
-			<button class="lm-close" title="Close" aria-label="Close" onclick={() => layoutsMenuOpen.set(false)}><Icon name="x" size={16} aria-hidden="true" /></button>
-		</div>
-		<WorkspaceLayouts idPrefix="layouts-menu" />
-	</div>
-{/if}
+<ModalDialog
+	id="layouts-menu"
+	class="layouts-dialog"
+	title="Workspace layouts"
+	width="sm"
+	outsideclose
+	bind:open={() => $layoutsMenuOpen, (v) => layoutsMenuOpen.set(v)}
+	aria-label="Workspace layouts"
+>
+	<WorkspaceLayouts idPrefix="layouts-menu" />
+</ModalDialog>
 
 <style>
-	.layouts-menu {
-		position: fixed;
-		top: 64px;
-		left: 16px;
-		width: min(300px, calc(100vw - 32px));
-		padding: 10px;
-		z-index: var(--z-modal);
-		background: var(--surface);
-		color: var(--text);
-		border: 1px solid var(--border);
-	}
-	.lm-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 6px;
-	}
-	.lm-title {
-		font-size: 0.85rem;
-		font-weight: 600;
-	}
-	.lm-close {
-		display: inline-flex;
-		padding: 3px;
-		color: var(--text-muted);
-		background: transparent;
-		border: 0;
-		border-radius: 4px;
-		cursor: pointer;
-	}
-	.lm-close:hover {
-		color: var(--text);
+	/* ModalDialog's `width="sm"` (max-width) loses to .tp-modal-frame's LAYERED !important
+	   max-width (ui.css is imported into layer(utilities), and a layered !important outranks an
+	   unlayered one), so every kit modal renders at the frame's 1200px. A one-field dialog that
+	   wide reads as broken; WIDTH is not a property the frame sets on the desktop, so it holds.
+	   The phone (≤640px) keeps the frame's full-screen sheet. */
+	@media (min-width: 641px) {
+		:global(dialog.md.layouts-dialog) {
+			width: min(480px, 94vw);
+		}
 	}
 </style>
diff --git a/src/components/menu/TabStrips.svelte b/src/components/menu/TabStrips.svelte
index 8ca4c2e41..9cf5d3ab9 100644
--- a/src/components/menu/TabStrips.svelte
+++ b/src/components/menu/TabStrips.svelte
@@ -8,7 +8,8 @@
 	import { focusTick, raiseWindowNode } from '$lib/windowFocus';
 	import ContextMenu from '../ContextMenu.svelte';
 	import Icon from '../ui/Icon.svelte';
-	import { DOCK_ICONS } from '$lib/bottomDock';
+	import { DOCK_ICONS, DOCK_FAMILY } from '$lib/bottomDock';
+	import { dockAllOf } from '$lib/dockMenu';
 
 	// 38 NOTES-38 #23: the view icon before each tab's name — the dock's icons plus the
 	// windows that only ever float
@@ -122,6 +123,20 @@
 			{/each}
 		</div>
 		<span class="flex-1"></span>
+		<!-- 40 F8: dock ALL of this window's tabs, left of "close all tabs" (a lone tab docks by
+		     dragging it to the dock). Only views that have a docked mode are offered. -->
+		{#if group.members.some((/** @type {string} */ k) => DOCK_FAMILY.includes(k))}
+			<button
+				class="ts-dock tp-dtab tp-dtab-icon shrink-0"
+				data-group-dock={group.id}
+				title="Dock all tabs in this window"
+				aria-label="Dock all tabs in this window"
+				onpointerdown={(e) => e.stopPropagation()}
+				onclick={() => dockAllOf(group.members, group.active)}
+			>
+				<Icon name="panel-bottom" size={16} />
+			</button>
+		{/if}
 		<button
 			class="ts-close tp-dtab tp-dtab-icon shrink-0"
 			title="Close all tabs in this window"
diff --git a/src/components/menu/settings/InterfaceSettings.svelte b/src/components/menu/settings/InterfaceSettings.svelte
index 883f0e7a8..68784ef77 100644
--- a/src/components/menu/settings/InterfaceSettings.svelte
+++ b/src/components/menu/settings/InterfaceSettings.svelte
@@ -22,6 +22,7 @@
 		'object search in the right-click menu': ['object search in menu', 'search objects', 'context menu'],
 		'show fps and draw calls': ['show fps + draw calls', 'fps', 'performance', 'frame rate', 'framerate'],
 		'knocked-off idle': ['idle', 'away', 'afk', 'dizzy', 'knocked', 'stars', 'avatar', 'character'],
+		'undock button': ['undock', 'dock', 'float', 'floating', 'window', 'tabs', 'tabbed', 'group'],
 		'workspace layouts': ['layout', 'layouts', 'workspace', 'windows', 'dock', 'docked', 'panels', 'arrangement', 'save layout', 'restore layout', 'sizes']
 	};
 	for (const [row, words] of Object.entries(ROW_WORDS)) registerSettingsKeywords(row, words);
@@ -58,6 +59,7 @@
 	import { allowTextSelection } from '$lib/textSelection';
 	import { peersAsClassic, knockedAfterSeconds, KNOCKED_AFTER_CHOICES } from '$lib/avatars/avatarState';
 	import WorkspaceLayoutsSettings from './WorkspaceLayoutsSettings.svelte'; // 37 R14
+	import UndockButtonSettings from './UndockButtonSettings.svelte'; // 40 F8
 	import { gameSoundVolume } from '$lib/gameSfx';
 	import { gameMusicVolume } from '$lib/gameMusic';
 	import { showWelcomeOnStart, showWhatsNewNotice, openWelcome } from '$lib/whatsNew';
@@ -256,6 +258,7 @@
 			>
 		</SettingRow>
 		<WorkspaceLayoutsSettings />
+		<UndockButtonSettings />
 		<SettingRow id="row-touch-tools" label="Touch tools" description="Undo, Redo and Multi-select buttons beside the logo. On by default on phones.">
 			<Toggle id="setting-touch-tools" label="Touch tools" bind:checked={$touchTools} />
 		</SettingRow>
diff --git a/src/components/menu/settings/UndockButtonSettings.svelte b/src/components/menu/settings/UndockButtonSettings.svelte
new file mode 100644
index 000000000..a568aa5f6
--- /dev/null
+++ b/src/components/menu/settings/UndockButtonSettings.svelte
@@ -0,0 +1,24 @@
+<script>
+	// 40 F8 — Settings ▸ Interface ▸ Windows & chrome ▸ "Undock button". Its own file so the
+	// settings page stays a one-line union. What the dock's undock button (left of "minimize
+	// the dock") does: undock the ACTIVE tab (default) or every docked tab as ONE floating
+	// tabbed window. LOCAL (this device), persisted by bottomDock.undockButtonMode.
+	import SettingRow from '../../ui/SettingRow.svelte';
+	import Segmented from '../../ui/Segmented.svelte';
+	import { undockButtonMode } from '$lib/bottomDock';
+
+	const OPTIONS = [
+		{ value: 'active', label: 'Active window' },
+		{ value: 'group', label: 'All as one tabbed group' }
+	];
+</script>
+
+<SettingRow
+	id="row-undock-button"
+	label="Undock button"
+	description="What the dock's undock button does: take out the tab you are looking at, or every docked tab as one floating window with tabs."
+	badge="This device"
+	keywords="undock dock float floating window tabs group tabbed"
+>
+	<Segmented id="undock-button-mode" label="Undock button" options={OPTIONS} value={$undockButtonMode} onchange={(/** @type {string} */ v) => undockButtonMode.set(v)} />
+</SettingRow>
diff --git a/src/components/ui/WindowChrome.svelte b/src/components/ui/WindowChrome.svelte
index c5696a549..3c7ef6a7e 100644
--- a/src/components/ui/WindowChrome.svelte
+++ b/src/components/ui/WindowChrome.svelte
@@ -27,6 +27,7 @@
 	//   closeAttrs    on the close button (an id, the tooltip with its shortcut "Close (O)")
 	import Icon from './Icon.svelte';
 	import { minimalScroll } from '$lib/ui/minimalScroll.js';
+	import { fullName } from '$lib/ui/fullName.js';
 
 	/** @type {{size?: 'modal'|'panel'|'tool', title?: string, icon?: string, count?: number|string, titleId?: string, onclose?: (() => void) | null, closeLabel?: string, onpin?: (() => void) | null, pinned?: boolean, pinAttrs?: Record<string, any>, onpopout?: (() => void) | null, onback?: (() => void) | null, backLabel?: string, bare?: boolean, headerClass?: string, closeAttrs?: Record<string, any>, heading?: import('svelte').Snippet, body?: boolean, padded?: boolean, elevated?: boolean, headerEl?: HTMLElement | null, headerAttrs?: Record<string, any>, actions?: import('svelte').Snippet, footer?: import('svelte').Snippet, children?: import('svelte').Snippet} & Record<string, any>} */
 	let {
@@ -76,7 +77,7 @@
 			{#if icon && size === 'panel' && !onback}
 				<span class="wc-icon" aria-hidden="true"><Icon name={icon} size={16} /></span>
 			{/if}
-			<h2 class="wc-title" id={titleId}>{title}</h2>
+			<h2 class="wc-title" id={titleId} use:fullName={title}>{title}</h2>
 		{/if}
 		{#if hasCount}<span class="wc-count">{count}</span>{/if}
 		{#if actions}<div class="wc-actions">{@render actions()}</div>{/if}
diff --git a/src/lib/bottomDock.js b/src/lib/bottomDock.js
index 4f8b817ce..8650e2067 100644
--- a/src/lib/bottomDock.js
+++ b/src/lib/bottomDock.js
@@ -1,6 +1,7 @@
 import { writable, derived, get } from 'svelte/store';
 import { viewPrefs } from './viewPrefs';
 import { onLayoutRestore } from './uiLayoutsCore';
+import { safeStorage } from './safeStorage';
 
 // Bottom dock: the dock shows exactly ONE panel at a time, and every panel that is
 // docked+open is a notebook TAB in it — the Flow family (Node editor / Flow Code /
@@ -85,6 +86,46 @@ export function armDockMode(key, docked) {
 	dockModeArm.set({ token: ++dockArmToken, key, docked: !!docked });
 }
 
+/**
+ * 40 F8 — arm SEVERAL panels in turn. `dockModeArm` is one write-once slot (a panel
+ * consumes it by clearing it), so arming in a loop left only the last key armed. This
+ * queues them: the next arm goes out once the previous one was consumed, or after a short
+ * grace when no panel is mounted to consume it (a closed view).
+ * @type {{key: string, docked: boolean}[]}
+ */
+const armQueue = [];
+let armPumping = false;
+/** @param {string[]} keys @param {boolean} docked */
+export function armDockModes(keys, docked) {
+	for (const key of keys) armQueue.push({ key, docked: !!docked });
+	pumpArms();
+}
+function pumpArms() {
+	if (armPumping) return;
+	const next = armQueue.shift();
+	if (!next) return;
+	armPumping = true;
+	armDockMode(next.key, next.docked);
+	const started = Date.now();
+	const wait = () => {
+		if (get(dockModeArm) === null || Date.now() - started > 600) {
+			armPumping = false;
+			pumpArms();
+			return;
+		}
+		setTimeout(wait, 16);
+	};
+	setTimeout(wait, 0);
+}
+
+/**
+ * 40 F8 — what the dock's undock button (beside "minimize the dock") does: 'active' takes
+ * out the visible tab (the default, user 2026-10-08), 'group' takes out every docked tab as
+ * ONE floating tabbed window. Device-scoped, Settings ▸ Interface ▸ Windows & chrome.
+ */
+export const undockButtonMode = writable(safeStorage.getItem('dockUndockMode') === 'group' ? 'group' : 'active');
+undockButtonMode.subscribe((value) => safeStorage.setItem('dockUndockMode', value));
+
 /** {key: {present, height}} — docked AND open */
 export const dockOccupants = writable(
 	/** @type {Record<string, {present: boolean, height: number}>} */ ({})
diff --git a/src/lib/debugHooks.js b/src/lib/debugHooks.js
index 6160ac29e..abf667ff3 100644
--- a/src/lib/debugHooks.js
+++ b/src/lib/debugHooks.js
@@ -145,6 +145,7 @@ export const DEBUG_HOOKS = [
 	['avatarModel', () => import('./avatarModel')],
 	['explorer', () => import('./explorer')],
 	['bottomDock', () => import('./bottomDock')],
+	['dockMenu', () => import('./dockMenu')],
 	['explorerDrop', () => import('./explorerDrop')],
 	['assetShare', () => import('./assetShare')],
 	['soundRuntime', () => import('./soundRuntime')],
diff --git a/src/lib/dockMenu.js b/src/lib/dockMenu.js
index 0dd0d7842..e767ccea6 100644
--- a/src/lib/dockMenu.js
+++ b/src/lib/dockMenu.js
@@ -10,7 +10,8 @@ import {
 	codeWorkspaceClose
 } from '../stores/appStore';
 import { get } from 'svelte/store';
-import { activateDock, armDockMode, dockOccupants, dockTabs, moveDockTab, DOCK_TITLES } from './bottomDock';
+import { activateDock, armDockMode, armDockModes, dockOccupants, dockTabs, moveDockTab, visibleDockKey, undockButtonMode, DOCK_FAMILY, DOCK_TITLES } from './bottomDock';
+import { queueMerge } from './windowTabs';
 
 // The dock's "+" add-a-view menu, in ONE place. The docked tab strip
 // (DockTabs.svelte) and the FLOATING Node editor's header "+" (Flow.svelte) each
@@ -155,11 +156,98 @@ export function dockTabItems(key) {
 	items.push({
 		label: 'Close',
 		tooltip: `Close ${title} (it leaves the dock; nothing else is touched)`,
-		action: () => closeStoreFor(key)?.set(true)
+		action: () => closeDockView(key)
 	});
 	return items;
 }
 
+/**
+ * 40 F8 — closing a DOCKED view is its tab's ✕ (or the tab menu's Close) now; the docked
+ * header carries no ✕ of its own. A view whose close must ASK first (the code workspace
+ * with unsaved tabs) registers its own closer here, so the tab ✕ takes the same path its
+ * header ✕ used to.
+ * @type {Record<string, () => void>}
+ */
+const dockClosers = {};
+/** @param {string} key @param {() => void} fn @returns {() => void} unregister */
+export function registerDockCloser(key, fn) {
+	dockClosers[key] = fn;
+	return () => {
+		if (dockClosers[key] === fn) delete dockClosers[key];
+	};
+}
+/** @param {string} key */
+export function closeDockView(key) {
+	if (dockClosers[key]) dockClosers[key]();
+	else closeStoreFor(key)?.set(true);
+}
+
+/**
+ * 40 F8 — the dock's undock button (left of "minimize the dock"). By default it takes the
+ * ACTIVE tab out into a floating window; with Settings ▸ Interface ▸ Windows & chrome ▸
+ * "Undock button: all as one tabbed group" it takes every docked tab out as ONE floating
+ * window with a tab per view (the first tab is the window the others join).
+ * @param {'active'|'group'=} mode defaults to the setting
+ */
+export function undockFromDock(mode) {
+	const how = mode ?? get(undockButtonMode);
+	if (how === 'group') {
+		const keys = get(dockTabs).map((t) => t.key);
+		if (!keys.length) return;
+		armDockModes(keys, false);
+		for (const key of keys.slice(1)) queueMerge(keys[0], key);
+		return;
+	}
+	const key = get(visibleDockKey);
+	if (key) armDockMode(key, false);
+}
+
+/**
+ * 40 F8 — a floating tab group's dock button (left of "close all tabs") docks ALL of its
+ * tabs. Members that have no docked mode (Objects, Chat, the AI window) stay floating.
+ * @param {string[]} members @param {string=} active the tab to show once docked
+ * @returns {number} how many were docked
+ */
+export function dockAllOf(members, active) {
+	const keys = members.filter((k) => DOCK_FAMILY.includes(k));
+	if (!keys.length) return 0;
+	armDockModes(keys, true);
+	activateDock(active && keys.includes(active) ? active : keys[0]);
+	return keys.length;
+}
+
+/**
+ * 40 F10 — a docked tab dropped onto/into a floating window joins it as a TAB.
+ * @param {string} key the docked view @param {string} targetKey the floating window
+ */
+export function undockInto(key, targetKey) {
+	armDockMode(key, false);
+	queueMerge(targetKey, key);
+}
+
+/**
+ * 40 F9 — the phone's "+" sheet: EVERY window (the Node editor too), with whether it is
+ * open. Toggling one on opens it in the dock and shows it; off closes it.
+ * @returns {{key: string, title: string, tooltip: string, open: boolean}[]}
+ */
+export function dockSheetRows() {
+	const occupied = get(dockOccupants);
+	return [{ key: 'flow', tooltip: 'Wire the scene’s behaviour as nodes' }, ...DOCK_VIEWS].map((view) => {
+		const closer = closeStoreFor(view.key);
+		return {
+			key: view.key,
+			title: DOCK_TITLES[view.key] ?? view.key,
+			tooltip: view.tooltip,
+			open: !!occupied[view.key]?.present || (!!closer && get(closer) === false)
+		};
+	});
+}
+/** @param {string} key @param {boolean} on */
+export function setDockViewShown(key, on) {
+	if (on) dockView(key);
+	else closeDockView(key);
+}
+
 /**
  * W2: the dock key -> the store that CLOSES that panel (every one of these is inverted
  * app-wide: true = closed). It lives here beside the add list, and not in bottomDock.js,
diff --git a/src/lib/dragWindow.js b/src/lib/dragWindow.js
index 9657d8c48..01c4ecf48 100644
--- a/src/lib/dragWindow.js
+++ b/src/lib/dragWindow.js
@@ -239,6 +239,13 @@ export function dragWindow(node, { key, defaultRect = {}, resizable = false, axi
 		typeof ResizeObserver !== 'undefined'
 			? new ResizeObserver(() => {
 					if (typeof rect.left !== 'number' || dragging) return;
+					// 40 F10: a TAB MEMBER is placed by its group (windowTabs.applyMember), and a tab
+					// switch is a 0x0 -> WxH box change — so this re-clamp from the window's OWN rect
+					// threw the revealed member back to where it last floated while the group's tab
+					// strip stayed put ("the group header breaks after grouping or switching tabs;
+					// a drag recovers it" — the drag re-applies the group rect). The reveal and the
+					// layout-restore paths already stand down for a member; this one did not.
+					if (node.dataset.tabMember || node.dataset.docked) return;
 					const box = node.offsetWidth + 'x' + node.offsetHeight;
 					if (box === lastBox) return;
 					lastBox = box;
@@ -459,6 +466,8 @@ export function dragWindow(node, { key, defaultRect = {}, resizable = false, axi
 	// display decision, never saved — the reveal rule's reasoning).
 	const onWindowResize = () => {
 		if (suspended() || typeof rect.left !== 'number' || typeof rect.top !== 'number') return;
+		// 40 F10: a tab member is placed by its group (see the size watch above)
+		if (node.dataset.tabMember || node.dataset.docked) return;
 		if (resizable) clampSize();
 		const before = rect.left + ',' + rect.top;
 		clamp(false);
diff --git a/src/lib/ui/fullName.js b/src/lib/ui/fullName.js
new file mode 100644
index 000000000..eec376b50
--- /dev/null
+++ b/src/lib/ui/fullName.js
@@ -0,0 +1,121 @@
+// 40 F7 — a long object/file name never breaks a window header. The name sits on ONE line
+// and ends in "…" when it does not fit (the element's own CSS: `white-space: nowrap;
+// overflow: hidden; text-overflow: ellipsis; min-width: 0`); this action is the other half:
+// the FULL name on hover (a `title` set only while the text is actually cut) and on a touch
+// long-press (a small tip under the name, gone on the next touch or after a few seconds).
+// The long-press also cancels the browser's own callout/context menu on that name.
+//
+// `use:fullName` on the element that ellipsizes; the full text is its textContent unless a
+// string parameter names it.
+
+const HOLD_MS = 450;
+const SLOP_PX = 8;
+const TIP_MS = 3500;
+
+/** @type {HTMLElement | null} the one tip on screen */
+let tipEl = null;
+/** @type {ReturnType<typeof setTimeout> | undefined} */
+let tipTimer;
+
+function hideTip() {
+	clearTimeout(tipTimer);
+	tipEl?.remove();
+	tipEl = null;
+	window.removeEventListener('pointerdown', hideTip, true);
+}
+
+/** @param {HTMLElement} anchor @param {string} text */
+function showTip(anchor, text) {
+	hideTip();
+	const r = anchor.getBoundingClientRect();
+	const tip = document.createElement('div');
+	tip.className = 'tp-ui tp-fullname-tip';
+	tip.setAttribute('role', 'tooltip');
+	tip.textContent = text;
+	document.body.appendChild(tip);
+	const w = tip.offsetWidth;
+	const left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8));
+	const below = r.bottom + 6;
+	const top = below + tip.offsetHeight > window.innerHeight - 8 ? Math.max(8, r.top - tip.offsetHeight - 6) : below;
+	tip.style.left = `${left}px`;
+	tip.style.top = `${top}px`;
+	tipEl = tip;
+	tipTimer = setTimeout(hideTip, TIP_MS);
+	// the next touch anywhere dismisses it (capture: before that touch does anything else)
+	setTimeout(() => window.addEventListener('pointerdown', hideTip, true), 0);
+}
+
+/** @param {HTMLElement} node */
+const cut = (node) => node.scrollWidth > node.clientWidth + 1;
+
+/**
+ * @param {HTMLElement} node
+ * @param {string=} full the full name (default: the element's text)
+ */
+export function fullName(node, full) {
+	if (typeof window === 'undefined') return {};
+	let name = full;
+	const text = () => (name ?? node.textContent ?? '').trim();
+	const sync = () => {
+		if (cut(node)) node.title = text();
+		else node.removeAttribute('title');
+	};
+	/** @type {ReturnType<typeof setTimeout> | undefined} */
+	let hold;
+	let sx = 0;
+	let sy = 0;
+	let shown = false;
+	/** @param {PointerEvent} e */
+	const down = (e) => {
+		if (e.pointerType === 'mouse') return;
+		sx = e.clientX;
+		sy = e.clientY;
+		shown = false;
+		clearTimeout(hold);
+		hold = setTimeout(() => {
+			if (!text()) return;
+			shown = true;
+			showTip(node, text());
+		}, HOLD_MS);
+	};
+	/** @param {PointerEvent} e */
+	const move = (e) => {
+		if (hold && Math.hypot(e.clientX - sx, e.clientY - sy) > SLOP_PX) clearTimeout(hold);
+	};
+	const up = () => clearTimeout(hold);
+	/** @param {Event} e */
+	const menu = (e) => {
+		// a long-press on the name is OURS: no browser callout on top of the tip
+		if (shown) e.preventDefault();
+	};
+	const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => requestAnimationFrame(sync)) : null;
+	ro?.observe(node);
+	const mo = new MutationObserver(() => requestAnimationFrame(sync));
+	mo.observe(node, { childList: true, characterData: true, subtree: true });
+	node.addEventListener('pointerenter', sync);
+	node.addEventListener('pointerdown', down);
+	node.addEventListener('pointermove', move);
+	node.addEventListener('pointerup', up);
+	node.addEventListener('pointercancel', up);
+	node.addEventListener('contextmenu', menu);
+	sync();
+	return {
+		/** @param {string=} next */
+		update(next) {
+			name = next;
+			sync();
+		},
+		destroy() {
+			clearTimeout(hold);
+			ro?.disconnect();
+			mo.disconnect();
+			node.removeEventListener('pointerenter', sync);
+			node.removeEventListener('pointerdown', down);
+			node.removeEventListener('pointermove', move);
+			node.removeEventListener('pointerup', up);
+			node.removeEventListener('pointercancel', up);
+			node.removeEventListener('contextmenu', menu);
+			if (tipEl && shown) hideTip();
+		}
+	};
+}
diff --git a/src/lib/windowTabs.js b/src/lib/windowTabs.js
index adae80cfc..165c3d1e8 100644
--- a/src/lib/windowTabs.js
+++ b/src/lib/windowTabs.js
@@ -324,6 +324,53 @@ export function headerTargetAt(x, y, excludeKey) {
 	return null;
 }
 
+/**
+ * 40 F10 — the floating window whose BOX (not just its header) is under (x, y), the
+ * topmost one: a docked tab dropped onto or into a floating window joins it as a tab.
+ * Read through `elementFromPoint`, so whatever is in front wins by construction.
+ * @param {number} x @param {number} y @param {string=} excludeKey
+ * @returns {string|null}
+ */
+export function windowAt(x, y, excludeKey) {
+	if (typeof document === 'undefined') return null;
+	const hit = document.elementFromPoint(x, y);
+	if (!hit) return null;
+	for (const [key, entry] of registry) {
+		if (key === excludeKey || entry.node.dataset?.docked) continue;
+		if (entry.node.style.display === 'none') continue;
+		if (entry.node.contains(hit)) return key;
+	}
+	return null;
+}
+
+/**
+ * 40 F8/F10 — "group `addKey` into `targetKey`'s window once both are floating". A docked
+ * view becomes a floating window a frame or two AFTER it is asked to (its component swaps
+ * branches and registers through `tabbable`), so the merge cannot run where the gesture
+ * ends; it waits here and runs as soon as both are registered.
+ * @type {{target: string, add: string, at: number}[]}
+ */
+let pendingMerges = [];
+/** @param {string} targetKey @param {string} addKey */
+export function queueMerge(targetKey, addKey) {
+	if (targetKey === addKey) return;
+	pendingMerges = pendingMerges.filter((m) => m.add !== addKey);
+	pendingMerges.push({ target: targetKey, add: addKey, at: Date.now() });
+	runPendingMerges();
+}
+function runPendingMerges() {
+	const now = Date.now();
+	// a merge whose window never arrived (closed meanwhile) is dropped after 5 s
+	pendingMerges = pendingMerges.filter((m) => now - m.at < 5000);
+	const ready = pendingMerges.filter((m) => registry.has(m.target) && registry.has(m.add));
+	if (!ready.length) return;
+	pendingMerges = pendingMerges.filter((m) => !ready.includes(m));
+	// after layout: the new window has to have a box before the group adopts a rect
+	requestAnimationFrame(() => {
+		for (const m of ready) mergeWindows(m.target, m.add);
+	});
+}
+
 /** @param {string} key */
 export function titleOf(key) {
 	return registry.get(key)?.title ?? key;
@@ -410,6 +457,11 @@ export function tabbable(node, { key, title, openStore, isOpen = (v) => !!v, clo
 
 	// drag-merge: dropping this window's header onto another window's header
 	let draggingHeader = false;
+	/** 40 F10: where the header press started — a press that never TRAVELS is a click (raise
+	 *  the window), never a merge, even when it lands over another window's header band */
+	let downX = 0;
+	let downY = 0;
+	let travelled = false;
 	/** @type {any} */ let mergeTarget = null;
 	/** the window whose HEADER is under (x, y) — the merge hit test (W7 lifted the body
 	 * to module scope so the bottom-dock band can consult the very same rule) */
@@ -425,15 +477,21 @@ export function tabbable(node, { key, title, openStore, isOpen = (v) => !!v, clo
 		if (!isHeaderDrag(e.target)) return; // 36 F4: a tab/control in the header is not a grip
 		if (groupOfKey(key)) return; // grouped windows drag via the strip
 		draggingHeader = true;
+		downX = e.clientX;
+		downY = e.clientY;
+		travelled = false;
 	};
 	const move = (/** @type {any} */ e) => {
+		if (!draggingHeader) return;
+		if (!travelled && Math.hypot(e.clientX - downX, e.clientY - downY) > 4) travelled = true;
 		// live feedback (104): the header you would merge into lights up
-		if (draggingHeader) setMergeTarget(targetAt(e.clientX, e.clientY));
+		if (travelled) setMergeTarget(targetAt(e.clientX, e.clientY));
 	};
 	const up = (/** @type {any} */ e) => {
 		if (!draggingHeader) return;
 		draggingHeader = false;
 		setMergeTarget(null);
+		if (!travelled) return;
 		const otherKey = targetAt(e.clientX, e.clientY);
 		if (otherKey) mergeWindows(otherKey, key);
 	};
@@ -442,6 +500,7 @@ export function tabbable(node, { key, title, openStore, isOpen = (v) => !!v, clo
 	window.addEventListener('pointerup', up);
 
 	tryRestore();
+	runPendingMerges();
 
 	return {
 		destroy() {
diff --git a/src/styles/windows.css b/src/styles/windows.css
index 5d059f868..0864bd781 100644
--- a/src/styles/windows.css
+++ b/src/styles/windows.css
@@ -398,3 +398,45 @@
 	-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); /* tokens-ok: mask alpha, not a colour */
 	mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); /* tokens-ok: mask alpha, not a colour */
 }
+
+/* 40 F7 — a window header's NAME (the object/file it is showing) is one line ending in "…";
+   the full name is on hover / a touch long-press ($lib/ui/fullName.js). `.tp-dock-sub` is the
+   docked header's name (it had no rule at all, so "B2ack wall super" wrapped to three lines
+   and pushed the controls down); `.tp-dock-crumb` is the row the name moves to when the
+   header's own row is taken by controls (a phone-narrow editor's pane switch). */
+.tp-dock-sub {
+	flex: 0 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--fs-section);
+	color: var(--text-faint);
+}
+.tp-dock-crumb {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	padding: 0 2px 2px;
+	font-size: var(--fs-desc);
+	color: var(--text-muted);
+}
+.tp-dock-crumb > .tp-dock-sub {
+	font-size: inherit;
+	color: var(--text);
+}
+.tp-fullname-tip {
+	position: fixed;
+	z-index: var(--z-menu);
+	max-width: min(90vw, 420px);
+	padding: 6px 10px;
+	overflow-wrap: anywhere;
+	border: 1px solid var(--border);
+	border-radius: var(--radius-input);
+	background: var(--surface-1);
+	color: var(--text);
+	box-shadow: var(--shadow-window);
+	font: 400 var(--fs-desc) var(--font-ui);
+	pointer-events: none;
+}
diff --git a/tests/e2e/code-node.test.cjs b/tests/e2e/code-node.test.cjs
index bf08c5cb3..60787437c 100644
--- a/tests/e2e/code-node.test.cjs
+++ b/tests/e2e/code-node.test.cjs
@@ -141,13 +141,13 @@ h.run(async () => {
 	h.check(await dblclickNode(A, 'cn-script'), 'premise: the script card is on screen');
 	// 36-code merged: the opener is the code workspace — the Script node opens as its tab
 	await h.eventually(() => tabsOf(A), (t) => t.some((x) => x.nodeId === 'cn-script'), 'double-click a Script → its tab in the code workspace', 15000);
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 
 	await centerOn(A, 'cn-bhv');
 	await A.page.waitForTimeout(400);
 	await dblclickNode(A, 'cn-bhv');
 	await h.eventually(() => tabsOf(A), (t) => t.some((x) => x.nodeId === 'cn-bhv' && x.kind === 'behaviour'), 'double-click a Behaviour → its source in the code workspace', 15000);
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 
 	// 36-games-graphs: Mini Golf's rules moved to its Main graph; its module is the ENGINE now
 	await addGraph(A, [node('cn-ref', 'coderef', { label: 'Code link', module: 'minigolf', file: 'module.js', title: 'Mini Golf engine' }, 440, 200)]);
@@ -163,7 +163,7 @@ h.run(async () => {
 		6000
 	);
 	if (SHOTS) await A.page.screenshot({ path: path.join(SHOTS, '22-module-source-readonly.png') });
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 
 	// a module's own node (registered by a core module — hello, the SDK example) opens the same way
 	const golfType = await A.page.evaluate(() => {
@@ -179,7 +179,7 @@ h.run(async () => {
 		await A.page.waitForTimeout(400);
 		await dblclickNode(A, 'cn-golf');
 		await h.eventually(() => A.page.evaluate(() => window.__stores.codeOpen?.lastOpenCode?.()), (r) => r?.source === 'module' && r?.ref === 'hello', `double-click a module node (${golfType}) → its module's source`, 4000);
-		await A.page.locator('#code-ws-close').click().catch(() => {});
+		await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	} else h.check(false, 'premise: the core hello module registered a node type');
 
 	// --- 3: the seam ------------------------------------------------------------------------
@@ -214,7 +214,7 @@ h.run(async () => {
 	);
 	const after = await dataOf(B, 'cn-script');
 	if (!(after?.inputs ?? []).some((s) => s.name === 'extra')) console.log('diag code:', JSON.stringify(after?.code), JSON.stringify(after?.inputs));
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 
 	// --- 5: module-bound code is read-only until forked ------------------------------------
 	await addGraph(A, [node('cn-mod', 'script', { label: 'Script', inputs: [], code: 'object.rotation.y = time;', src: { kind: 'module', module: 'minigolf', file: 'spin.js' } }, 0, 400)]);
@@ -230,7 +230,7 @@ h.run(async () => {
 		'the copy is in the Explorer library'
 	);
 	await h.eventually(() => A.page.locator('#script-readonly').count(), (n) => n === 0, 'the editor becomes editable after the fork', 6000);
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 
 	// --- 6: the Main graph migration -------------------------------------------------------
 	if (GOLF) {
diff --git a/tests/e2e/code-sidebars.test.cjs b/tests/e2e/code-sidebars.test.cjs
index a4bf306ad..0b8cf30ac 100644
--- a/tests/e2e/code-sidebars.test.cjs
+++ b/tests/e2e/code-sidebars.test.cjs
@@ -451,12 +451,12 @@ h.run(async () => {
 		return ev.defaultPrevented;
 	});
 	h.check(beforeUnload === true, 'S7: leaving the page with unsaved code asks (beforeunload)');
-	await page.locator('#code-ws-close').click();
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 	await page.waitForTimeout(300);
 	h.check(await page.locator('#code-ws-confirm-all').isVisible(), 'S7: ✕ with an unsaved file asks Save all / Don\'t save / Cancel');
 	await page.locator('#code-ws-confirm-all-cancel').click();
 	h.check((await read(page, 'codeWorkspaceClose')) === false && (await page.locator('#code-ws-confirm-all').count()) === 0, 'S7: Cancel keeps the workspace open');
-	await page.locator('#code-ws-close').click();
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 	await page.locator('#code-ws-confirm-all-save').click();
 	await page.waitForTimeout(500);
 	h.check((await read(page, 'codeWorkspaceClose')) === true, 'S7: Save all closes it');
@@ -464,7 +464,7 @@ h.run(async () => {
 	await S(page, () => window.__stores.codeWorkspace.openCode({ source: 'script', ref: { nodeId: 'cs-undo', graphId: 'scene' } }));
 	await page.waitForTimeout(600);
 	await S(page, (id) => window.__stores.codeWorkspace.setTabCode(id, 'object.position.y = ;'), uTab);
-	await page.locator('#code-ws-close').click();
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 	await page.locator('#code-ws-confirm-all-save').click();
 	await page.waitForTimeout(500);
 	h.check((await read(page, 'codeWorkspaceClose')) === false && /could not be saved/.test(await page.locator('#code-ws-confirm-all').innerText()), 'S7: code that does not check is not saved — the dialog stays and says why');
@@ -553,7 +553,7 @@ h.run(async () => {
 	h.check(/rgb\((2[0-5]\d|1[89]\d), /.test(lightBg), 'F9: the sidebars follow the light theme (' + lightBg + ')');
 	await S(page, () => window.__stores.themes.theme.set('dark'));
 	await page.waitForTimeout(300);
-	await page.locator('#code-ws-dock button[title="Undock into a floating window"]').click();
+	await page.locator('#code-ws-dock #dock-undock').click();
 	await page.waitForTimeout(800);
 	h.check(await page.locator('#code-ws-window #code-ws-left').isVisible() && (await page.locator('#code-ws-window #code-ws-right').count()) === 1, 'F9: floating, the window has both sidebars');
 	const ftabs = await tabIds(page);
diff --git a/tests/e2e/dock-chrome-40.test.cjs b/tests/e2e/dock-chrome-40.test.cjs
new file mode 100644
index 000000000..5835ed2e6
--- /dev/null
+++ b/tests/e2e/dock-chrome-40.test.cjs
@@ -0,0 +1,394 @@
+// 40-docks — roadmap 40 F6-F11, the user's 1.31 review of the dock and window chrome.
+//
+//   F6  docked tab strips: every tab sits on the strip's own paint when scrolled (tabs past
+//       the 3rd used to show the scene through — transparent-tab-header), and picking a tab
+//       never resets the strip's scroll position (a fresh strip per panel started at 0)
+//   F7  a long object name never breaks a window header (B2ack-wall-super): one line, "…",
+//       full name on hover/long-press, out of the control row on a phone-narrow editor
+//   F8  docked windows carry no ✕ (tabs do); undock sits left of "minimize the dock" and
+//       undocks the ACTIVE tab (Settings: all as one tabbed group); a floating group's dock
+//       button docks ALL its tabs
+//   F9  "+" on a phone (floating windows off) = a sheet of every window with show/hide
+//       switches; with floating windows on, a phone behaves like the desktop
+//   F10 a docked tab dropped onto a floating window JOINS it as a tab; a group member never
+//       jumps off its group (and its tab strip) after grouping or a tab switch
+//   F11 the Layouts dialog is the kit modal: opaque, sized, Escape closes
+//
+// Phone gestures are TOUCH (a hasTouch/isMobile context, locator.tap + touchscreen); desktop
+// gestures are a real mouse. Run: APP_URL='https://theprototype.app:5393/' npm run e2e -- dock-chrome-40
+const h = require('./helpers.cjs');
+
+const VIEWS = ['flow', 'flowcode', 'animation', 'uv', 'shader', 'hud', 'explorer', 'profiler'];
+const CLOSERS = { flow: 'flowGraphClose', flowcode: 'flowCodeClose', animation: 'animationClose', uv: 'uvEditorClose', shader: 'shaderEditorClose', hud: 'hudEditorClose', explorer: 'explorerClose', profiler: 'profilerClose' };
+const DOCKED_KEYS = { flowDocked: 'true', flowCodeDocked: 'true', animationDocked: 'true', uvDocked: 'true', shaderDocked: 'true', hudDocked: 'true', explorerDocked: 'true', profilerDocked: 'true', codeDocked: 'true' };
+const STRIP = '.dt-scroll';
+const LONG = 'B2ack wall super — the long name of an imported wall piece.glb';
+
+const PHONE = { viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true, deviceScaleFactor: 2 };
+
+/** open every dock view, docked, and show `active` */
+async function openAll(page, active) {
+	await page.evaluate(({ VIEWS, CLOSERS, active }) => {
+		const s = window.__stores;
+		for (const v of VIEWS) s[CLOSERS[v]].set(false);
+		setTimeout(() => s.bottomDock.activateDock(active), 400);
+	}, { VIEWS, CLOSERS, active });
+	await page.waitForTimeout(1800);
+}
+
+/** the strip of the panel on screen: its scroll, sizes, and the paint under each visible tab */
+const stripState = (page) =>
+	page.evaluate((sel) => {
+		const el = [...document.querySelectorAll(sel)].find((e) => e.offsetParent);
+		if (!el) return null;
+		const sr = el.getBoundingClientRect();
+		const tabs = [...el.querySelectorAll('[data-dock-tab]')].map((t) => {
+			const r = t.getBoundingClientRect();
+			// the nearest ancestor that PAINTS (an opaque background) — the tab's own pill is
+			// transparent unless active, so this is what shows through around its label
+			let a = t.parentElement;
+			while (a && a !== document.body) {
+				const bg = getComputedStyle(a).backgroundColor;
+				if (bg && bg !== 'transparent' && !/rgba\(.*,\s*0\)$/.test(bg)) break;
+				a = a.parentElement;
+			}
+			const pr = a?.getBoundingClientRect();
+			const visible = r.right > sr.left + 1 && r.left < sr.right - 1;
+			// only the part of the tab the strip actually shows has to be painted
+			const l = Math.max(r.left, sr.left);
+			const rt = Math.min(r.right, sr.right);
+			const painted = !!pr && pr.left <= l + 1 && pr.right >= rt - 1 && pr.top <= r.top + 1 && pr.bottom >= r.bottom - 1;
+			return { key: t.dataset.dockTab, visible, painted, cx: Math.round((l + rt) / 2), cy: Math.round((r.top + r.bottom) / 2), selected: t.getAttribute('aria-selected') === 'true' };
+		});
+		return { scroll: Math.round(el.scrollLeft), width: el.clientWidth, full: el.scrollWidth, maskOnScroller: getComputedStyle(el).maskImage !== 'none', scrollerBg: getComputedStyle(el).backgroundColor, tabs };
+	}, STRIP);
+
+h.run(async () => {
+	const browser = await h.launch();
+
+	// =====================================================================================
+	// F6 — PHONE: the strip, scrolled, then a tab picked by a TAP
+	// =====================================================================================
+	{
+		const P = await h.setupPage(browser, 'phone', { context: PHONE, storage: DOCKED_KEYS });
+		const page = P.page;
+		await openAll(page, 'flow');
+		const s0 = await stripState(page);
+		h.check(!!s0 && s0.full > s0.width + 40, `F6 premise: eight docked views overflow the phone strip (${s0 && s0.width}/${s0 && s0.full})`);
+		// scroll to the far end the way a finger does: a touch drag across the strip
+		await page.evaluate((sel) => {
+			const el = [...document.querySelectorAll(sel)].find((e) => e.offsetParent);
+			el.scrollLeft = el.scrollWidth;
+			el.dispatchEvent(new Event('scroll'));
+		}, STRIP);
+		await page.waitForTimeout(300);
+		const s1 = await stripState(page);
+		const shown = s1.tabs.filter((t) => t.visible);
+		h.check(s1.scroll > 100, `F6 premise: the strip is scrolled (${s1.scroll}px)`);
+		h.check(
+			shown.length >= 2 && shown.every((t) => t.painted),
+			`F6.1 every tab on screen sits on the strip's own paint when scrolled — none shows the scene through (${shown.map((t) => t.key + ':' + t.painted).join(' ')})`
+		);
+		h.check(!s1.scrollerBg || /rgba\(0, 0, 0, 0\)|transparent/.test(s1.scrollerBg), `F6.2 the edge fade masks a BARE scroll box, so it fades into the bar, not into the scene (scroller bg ${s1.scrollerBg})`);
+		// pick a visible tab past the 3rd with a TAP
+		const tgt = shown.filter((t) => !t.selected && VIEWS.indexOf(t.key) >= 3)[0];
+		const target = tgt?.key;
+		h.check(!!target, `F6 premise: a tab past the 3rd is on screen to tap (${target})`);
+		const scrollBefore = s1.scroll;
+		// a finger on the part of the tab that shows (locator.tap would scroll it into view first)
+		await page.touchscreen.tap(tgt.cx, tgt.cy);
+		await page.waitForTimeout(1200);
+		const s2 = await stripState(page);
+		h.check(s2.tabs.find((t) => t.key === target)?.selected === true, `F6 premise: the tapped tab is now the active one (${target})`);
+		h.check(
+			Math.abs(s2.scroll - scrollBefore) <= 2,
+			`F6.3 picking a tab never resets the strip's scroll (before ${scrollBefore}px, after ${s2.scroll}px — it used to snap to 0 on the new panel's fresh strip)`
+		);
+		h.check(s2.tabs.filter((t) => t.visible).every((t) => t.painted), 'F6.4 ...and the tabs on the new panel\'s strip are painted too');
+
+		// ---- F9 — PHONE "+": a sheet of every window with show/hide switches ----------------
+		await page.evaluate(() => window.__stores.explorerClose.set(true));
+		await page.waitForTimeout(700);
+		h.check((await page.locator('#dock-undock:visible').count()) === 0, 'F9.0 a phone whose windows cannot float shows no undock button (nothing to undock to)');
+		await page.locator('#dock-add-view:visible').first().tap();
+		await page.waitForTimeout(900);
+		const sheet = await page.evaluate(() => ({
+			open: !!document.querySelector('#dock-views-sheet'),
+			rows: [...document.querySelectorAll('[data-dock-view]')].map((r) => r.dataset.dockView),
+			menu: !!document.querySelector('[role=menu]')
+		}));
+		h.check(sheet.open && !sheet.menu, `F9.1 "+" on a phone opens a SHEET, not the desktop menu (${JSON.stringify(sheet)})`);
+		const bar = await page.evaluate(() => {
+			const sh = document.querySelector('#dock-views-sheet')?.getBoundingClientRect();
+			const play = document.querySelector('#play-button')?.getBoundingClientRect();
+			const tg = document.querySelector('#dock-view-toggle-explorer')?.getBoundingClientRect();
+			return { sheetBottom: sh && Math.round(sh.bottom), playTop: play && Math.round(play.top), toggleRight: tg && Math.round(tg.right), vw: window.innerWidth };
+		});
+		h.check(!bar.playTop || bar.sheetBottom <= bar.playTop + 30, `F9.1b the sheet ends at the phone bar — Play is not covered (${JSON.stringify(bar)})`);
+		h.check(!!bar.toggleRight && bar.toggleRight <= bar.vw, `F9.1c every row's switch is on screen (${JSON.stringify(bar)})`);
+		h.check(['flow', 'explorer', 'animation', 'uv', 'shader', 'hud', 'profiler', 'code', 'flowcode'].every((k) => sheet.rows.includes(k)), `F9.2 ...listing EVERY window, the Node editor too (${sheet.rows.join(',')})`);
+		const exToggle = page.locator('#dock-view-toggle-explorer');
+		h.check((await exToggle.getAttribute('aria-pressed')) === 'false', 'F9.3 a closed window reads OFF');
+		await exToggle.tap();
+		await page.waitForTimeout(1200);
+		const afterOn = await page.evaluate(() => {
+			const s = window.__stores;
+			let occ, vis, ec;
+			s.bottomDock.dockOccupants.subscribe((v) => (occ = v))();
+			s.bottomDock.visibleDockKey.subscribe((v) => (vis = v))();
+			s.explorerClose.subscribe((v) => (ec = v))();
+			return { present: !!occ.explorer?.present, visible: vis, closed: ec };
+		});
+		h.check(afterOn.present && afterOn.visible === 'explorer' && afterOn.closed === false, `F9.4 switching a window ON opens it in the dock as the visible tab (${JSON.stringify(afterOn)})`);
+		h.check((await exToggle.getAttribute('aria-pressed')) === 'true', 'F9.5 ...and its switch reads ON');
+		await exToggle.tap();
+		await page.waitForTimeout(900);
+		h.check((await page.evaluate(() => { let v; window.__stores.explorerClose.subscribe((x) => (v = x))(); return v; })) === true, 'F9.6 switching it OFF closes it');
+		await page.touchscreen.tap(195, 270); // the modal sheet's scrim, above the sheet and below the top chrome
+		await page.waitForTimeout(600);
+		h.check(!(await page.locator('#dock-views-sheet').count()), 'F9.6b a tap on the scrim closes the sheet');
+		await page.evaluate(() => window.__stores.mobileUndockAllowed.set(true));
+		await page.waitForTimeout(700);
+		await page.locator('#dock-add-view:visible').first().tap();
+		await page.waitForTimeout(700);
+		const desktopLike = await page.evaluate(() => ({ sheet: !!document.querySelector('#dock-views-sheet'), menu: !!document.querySelector('[role=menu]'), undock: [...document.querySelectorAll('#dock-undock')].some((b) => b.offsetParent) }));
+		h.check(desktopLike.menu && !desktopLike.sheet && desktopLike.undock, `F9.7 with floating windows enabled a phone behaves like the desktop: the add menu and an undock button (${JSON.stringify(desktopLike)})`);
+		await page.keyboard.press('Escape');
+		await page.waitForTimeout(300);
+		if (await page.locator('[role=menu]').count()) await page.touchscreen.tap(195, 120);
+		await page.evaluate(() => window.__stores.mobileUndockAllowed.set(false));
+		await page.waitForTimeout(400);
+
+		// ---- F7 — PHONE: a long name in the docked Animation header -------------------------
+		await page.evaluate((LONG) => {
+			const s = window.__stores;
+			s.commandsHandler.sceneCommand('/create box');
+			let g;
+			s.objectsGroup.subscribe((x) => (g = x))();
+			const obj = g.children[g.children.length - 1];
+			obj.name = LONG;
+			s.objectsGroup.update((v) => v);
+			s.objectActions.selectObject(obj.uuid);
+			s.animationClose.set(false);
+			s.bottomDock.activateDock('animation');
+		}, LONG);
+		await page.waitForTimeout(1500);
+		const head = await page.evaluate(() => {
+			const name = document.querySelector('#animation-dock #animation-target-name');
+			const pane = document.querySelector('#animation-dock #animation-pane');
+			const nr = name?.getBoundingClientRect();
+			const pr = pane?.getBoundingClientRect();
+			return {
+				lineH: nr ? Math.round(nr.height) : 0,
+				cut: name ? name.scrollWidth > name.clientWidth : false,
+				title: name?.getAttribute('title'),
+				nameBottom: nr ? Math.round(nr.bottom) : 0,
+				paneTop: pr ? Math.round(pr.top) : 0,
+				paneInside: pr ? pr.right <= window.innerWidth + 1 : false
+			};
+		});
+		h.check(head.lineH > 0 && head.lineH <= 26, `F7.1 the object's name is ONE line in the docked header (${head.lineH}px tall — it wrapped to three lines)`);
+		h.check(head.cut, 'F7.2 ...ending in "…" because it does not fit');
+		h.check(head.title === LONG, `F7.3 ...with the FULL name on hover (title="${head.title}")`);
+		h.check(head.paneTop >= head.nameBottom - 1 && head.paneInside, `F7.4 the name moved OUT of the control row: the pane switch sits below it, inside the screen (${JSON.stringify(head)})`);
+		// long-press (touch) shows the full name
+		const nb = await page.locator('#animation-dock #animation-target-name').boundingBox();
+		const cdp = await page.context().newCDPSession(page);
+		const pt = { x: Math.round(nb.x + 30), y: Math.round(nb.y + nb.height / 2) };
+		await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [pt] });
+		await page.waitForTimeout(700);
+		const tip = await page.evaluate(() => document.querySelector('.tp-fullname-tip')?.textContent ?? null);
+		await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] });
+		h.check(tip === LONG, `F7.5 a touch long-press on the name shows the full name (${tip})`);
+		await page.waitForTimeout(300);
+
+		// ---- F11 — PHONE: the Layouts dialog ------------------------------------------------
+		await page.evaluate(() => window.__stores.uiLayouts.layoutsMenuOpen.set(true));
+		await page.waitForTimeout(800);
+		const lp = await page.evaluate(() => {
+			const el = document.querySelector('#layouts-menu');
+			if (!el) return null;
+			const cs = getComputedStyle(el);
+			const r = el.getBoundingClientRect();
+			return { tag: el.tagName, kit: el.classList.contains('md'), bg: cs.backgroundColor, w: Math.round(r.width) };
+		});
+		h.check(!!lp && lp.tag === 'DIALOG' && lp.kit, `F11.1 the Layouts dialog is the kit modal on a phone (${JSON.stringify(lp)})`);
+		h.check(!!lp && /^rgb\(/.test(lp.bg), `F11.2 ...painted with an OPAQUE surface — it rendered see-through (${lp && lp.bg})`);
+		await page.keyboard.press('Escape');
+		await page.waitForTimeout(400);
+		h.check(!(await page.locator('#layouts-menu').count()), 'F11.3 Escape closes it');
+		h.check((h.pageErrors(P) || []).length === 0, 'phone: no page errors (' + (h.pageErrors(P) || []).join(' | ') + ')');
+		await P.ctx.close();
+	}
+
+	// =====================================================================================
+	// DESKTOP — F6 (mouse), F8, F10, F11
+	// =====================================================================================
+	{
+		const D = await h.setupPage(browser, 'desktop', { context: { viewport: { width: 760, height: 900 } }, storage: DOCKED_KEYS });
+		const page = D.page;
+		await openAll(page, 'flow');
+		// F6 with a mouse on a narrow desktop window
+		await page.evaluate((sel) => {
+			const el = [...document.querySelectorAll(sel)].find((e) => e.offsetParent);
+			el.scrollLeft = el.scrollWidth;
+			el.dispatchEvent(new Event('scroll'));
+		}, STRIP);
+		await page.waitForTimeout(300);
+		const d1 = await stripState(page);
+		const pick = d1.tabs.filter((t) => t.visible && !t.selected && VIEWS.indexOf(t.key) >= 3)[0];
+		await page.mouse.click(pick.cx, pick.cy);
+		await page.waitForTimeout(1000);
+		const d2 = await stripState(page);
+		h.check(d1.scroll > 50 && Math.abs(d2.scroll - d1.scroll) <= 2, `F6.5 desktop: clicking a tab keeps the strip where it was (${d1.scroll} -> ${d2.scroll}px)`);
+		h.check(d2.tabs.filter((t) => t.visible).every((t) => t.painted), 'F6.6 desktop: every tab on screen is painted');
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.waitForTimeout(800);
+
+		// ---- F8 — the docked chrome ---------------------------------------------------------
+		await page.evaluate(() => window.__stores.bottomDock.activateDock('animation'));
+		await page.waitForTimeout(700);
+		const chrome = await page.evaluate(() => {
+			const panel = document.querySelector('#animation-dock');
+			const inside = [...panel.querySelectorAll('button')].filter((b) => b.offsetParent && !b.closest('.dt-row') && !b.closest('#dock-undock') && /^(Close|Undock)/i.test(b.getAttribute('aria-label') ?? ''));
+			const und = [...document.querySelectorAll('#dock-undock')].find((b) => b.offsetParent);
+			const min = [...document.querySelectorAll('#dock-minimize')].find((b) => b.offsetParent);
+			const ur = und?.getBoundingClientRect();
+			const mr = min?.getBoundingClientRect();
+			return { inside: inside.map((b) => b.getAttribute('aria-label')), und: !!ur, leftOfMin: !!ur && !!mr && ur.right <= mr.left + 1 && Math.abs(ur.top - mr.top) < 4, tabX: !!panel.querySelector('[data-dock-tab-close="animation"]') };
+		});
+		h.check(chrome.inside.length === 0, `F8.1 a docked window carries no ✕ and no undock inside it (${chrome.inside.join(',')})`);
+		h.check(chrome.tabX, 'F8.2 ...its TAB carries the ✕');
+		h.check(chrome.und && chrome.leftOfMin, `F8.3 undock sits left of "minimize the dock" (${JSON.stringify(chrome)})`);
+		// the setting row exists in Settings ▸ Interface
+		await page.evaluate(() => {
+			window.__stores.settingsSection.set('interface');
+			window.__stores.settingsOpen.set(true);
+		});
+		await page.waitForTimeout(900);
+		h.check((await page.locator('#row-undock-button').count()) === 1, 'F8.4 Settings ▸ Interface carries the "Undock button" row');
+		await page.evaluate(() => window.__stores.settingsOpen.set(false));
+		await page.waitForTimeout(500);
+		// default: undock the ACTIVE window only
+		await page.locator('#dock-undock:visible').first().click();
+		await page.waitForTimeout(1400);
+		const one = await page.evaluate(() => {
+			let occ;
+			window.__stores.bottomDock.dockOccupants.subscribe((v) => (occ = v))();
+			return { animWin: !!document.querySelector('#animation-window'), stillDocked: Object.keys(occ).filter((k) => occ[k]?.present).sort() };
+		});
+		h.check(one.animWin && !one.stillDocked.includes('animation') && one.stillDocked.length >= 6, `F8.5 the default undocks the ACTIVE window only (${JSON.stringify(one)})`);
+
+		// ---- F10 — drop a docked tab INTO that floating window: it joins as a tab ----------
+		await page.evaluate(() => window.__stores.bottomDock.activateDock('uv'));
+		await page.waitForTimeout(800);
+		// the window floats where it last was, over the dock strip — carry it up by its header
+		// first, or the press lands on the window instead of the tab
+		const hb = await page.locator('#animation-window .move-handle').first().boundingBox();
+		await page.mouse.move(hb.x + 60, hb.y + hb.height / 2);
+		await page.mouse.down();
+		await page.mouse.move(hb.x + 260, 70, { steps: 8 });
+		await page.mouse.up();
+		await page.waitForTimeout(600);
+		// the user's case: the joining window's OWN remembered spot is somewhere else entirely
+		// (here parked mostly off the right edge) — a reveal that re-clamps from that rect moves
+		// the member off its group (F10.5 below)
+		await page.evaluate(() => localStorage.setItem('win:uv', JSON.stringify({ left: window.innerWidth - 60, top: window.innerHeight - 200 })));
+		const tabBox = await page.locator('[data-dock-tab="uv"]:visible').first().boundingBox();
+		const winBox = await page.locator('#animation-window').boundingBox();
+		await page.mouse.move(tabBox.x + tabBox.width / 2, tabBox.y + tabBox.height / 2);
+		await page.mouse.down();
+		await page.mouse.move(tabBox.x + tabBox.width / 2, tabBox.y - 40, { steps: 6 });
+		await page.mouse.move(winBox.x + winBox.width / 2, winBox.y + winBox.height / 2, { steps: 12 });
+		const lit = await page.evaluate(() => document.querySelector('#animation-window')?.classList.contains('merge-target'));
+		await page.mouse.up();
+		await page.waitForTimeout(1600);
+		h.check(lit === true, 'F10.1 dragging a docked tab over a floating window lights it as the drop target');
+		const grouped = await page.evaluate(() => {
+			let g;
+			window.__stores.windowTabs.tabGroups.subscribe((v) => (g = v))();
+			return g.map((x) => ({ members: x.members, active: x.active }));
+		});
+		h.check(grouped.some((x) => x.members.includes('animation') && x.members.includes('uv')), `F10.2 ...and the drop JOINS it as a tab instead of a second floating window (${JSON.stringify(grouped)})`);
+		// a member never jumps off its group: switch tabs both ways, then compare the windows to the strip
+		const attached = () =>
+			page.evaluate(() => {
+				let g;
+				window.__stores.windowTabs.tabGroups.subscribe((v) => (g = v))();
+				const grp = g.find((x) => x.members.includes('uv'));
+				if (!grp) return { active: null, strip: null, win: [0, 0] };
+				const strip = document.querySelector('.tab-strip')?.getBoundingClientRect();
+				const node = document.querySelector(grp.active === 'uv' ? '#uv-window' : '#animation-window').getBoundingClientRect();
+				return { active: grp.active, strip: strip && [Math.round(strip.left), Math.round(strip.top)], win: [Math.round(node.left), Math.round(node.top)] };
+			});
+		const same = (a) => !!a.strip && Math.abs(a.strip[0] - a.win[0]) <= 2 && Math.abs(a.strip[1] - a.win[1]) <= 2;
+		const a1 = await attached();
+		await page.locator('.tab-strip .ts-tab', { hasText: 'Animation' }).click();
+		await page.waitForTimeout(900);
+		const a2 = await attached();
+		await page.locator('.tab-strip .ts-tab', { hasText: 'UV editor' }).click();
+		await page.waitForTimeout(900);
+		const a3 = await attached();
+		h.check(same(a1), `F10.3 right after grouping, the window sits under its tab strip (${JSON.stringify(a1)})`);
+		h.check(same(a2) && same(a3), `F10.4 ...and after switching tabs both ways it still does — no drag needed to recover (${JSON.stringify([a2, a3])})`);
+		// a browser resize is the other re-clamp: the members stay on the strip through it too
+		await page.setViewportSize({ width: 1300, height: 820 });
+		await page.waitForTimeout(700);
+		await page.locator('.tab-strip .ts-tab', { hasText: 'Animation' }).click();
+		await page.waitForTimeout(700);
+		const a4 = await attached();
+		await page.locator('.tab-strip .ts-tab', { hasText: 'UV editor' }).click();
+		await page.waitForTimeout(700);
+		const a5 = await attached();
+		await page.setViewportSize({ width: 1440, height: 900 });
+		await page.waitForTimeout(700);
+		h.check(same(a4) && same(a5), `F10.5 ...and through a window resize plus two more switches (${JSON.stringify([a4, a5])})`);
+
+		// ---- F8 — the floating group's dock button docks ALL its tabs ----------------------
+		const dockBtn = await page.evaluate(() => {
+			const b = document.querySelector('.tab-strip .ts-dock')?.getBoundingClientRect();
+			const c = document.querySelector('.tab-strip .ts-close')?.getBoundingClientRect();
+			return { has: !!b, leftOfClose: !!b && !!c && b.right <= c.left + 1 };
+		});
+		h.check(dockBtn.has && dockBtn.leftOfClose, `F8.6 a floating tabbed group has a dock button left of "close all tabs" (${JSON.stringify(dockBtn)})`);
+		await page.locator('.tab-strip .ts-dock').click();
+		await page.waitForTimeout(1600);
+		const back = await page.evaluate(() => {
+			let occ, g;
+			window.__stores.bottomDock.dockOccupants.subscribe((v) => (occ = v))();
+			window.__stores.windowTabs.tabGroups.subscribe((v) => (g = v))();
+			return { anim: !!occ.animation?.present, uv: !!occ.uv?.present, groups: g.length, windows: !!document.querySelector('#animation-window, #uv-window') };
+		});
+		h.check(back.anim && back.uv && back.groups === 0 && !back.windows, `F8.7 ...which docks EVERY tab of it (${JSON.stringify(back)})`);
+
+		// ---- F8 — Settings "all as one tabbed group" ---------------------------------------
+		await page.evaluate(() => window.__stores.bottomDock.undockButtonMode.set('group'));
+		await page.waitForTimeout(300);
+		const nDocked = await page.evaluate(() => { let t; window.__stores.bottomDock.dockTabs.subscribe((v) => (t = v))(); return t.length; });
+		await page.locator('#dock-undock:visible').first().click();
+		await page.waitForTimeout(nDocked * 700 + 2500);
+		const all = await page.evaluate(() => {
+			let occ, g;
+			window.__stores.bottomDock.dockOccupants.subscribe((v) => (occ = v))();
+			window.__stores.windowTabs.tabGroups.subscribe((v) => (g = v))();
+			return { docked: Object.keys(occ).filter((k) => occ[k]?.present), groups: g.map((x) => x.members.length) };
+		});
+		h.check(all.docked.length === 0 && all.groups.length === 1 && all.groups[0] === nDocked, `F8.8 "all as one tabbed group": every docked tab leaves as ONE floating window with a tab each (${nDocked} tabs -> ${JSON.stringify(all)})`);
+		await page.evaluate(() => window.__stores.bottomDock.undockButtonMode.set('active'));
+
+		// ---- F11 — DESKTOP: the Layouts dialog ----------------------------------------------
+		await page.evaluate(() => window.__stores.uiLayouts.layoutsMenuOpen.set(true));
+		await page.waitForTimeout(800);
+		const ld = await page.evaluate(() => {
+			const el = document.querySelector('#layouts-menu');
+			const r = el?.getBoundingClientRect();
+			return el ? { tag: el.tagName, bg: getComputedStyle(el).backgroundColor, w: Math.round(r.width) } : null;
+		});
+		h.check(!!ld && ld.tag === 'DIALOG' && /^rgb\(/.test(ld.bg) && ld.w <= 482 && ld.w >= 300, `F11.4 desktop: the kit modal, opaque, a dialog-sized box (${JSON.stringify(ld)})`);
+		await page.keyboard.press('Escape');
+		await page.waitForTimeout(400);
+		h.check(!(await page.locator('#layouts-menu').count()), 'F11.5 Escape closes it');
+		h.check((h.pageErrors(D) || []).length === 0, 'desktop: no page errors (' + (h.pageErrors(D) || []).join(' | ') + ')');
+	}
+	await h.finish(browser);
+});
diff --git a/tests/e2e/dock-splits.test.cjs b/tests/e2e/dock-splits.test.cjs
index 4835f0115..07f298a91 100644
--- a/tests/e2e/dock-splits.test.cjs
+++ b/tests/e2e/dock-splits.test.cjs
@@ -38,7 +38,7 @@ h.run(async () => {
 	// a second window dropped ONTO it splits the edge
 	await A.page.locator('p[title="Node editor (N)"]').click();
 	await A.page.waitForTimeout(500);
-	await A.page.locator('#flow-undock').click();
+	await A.page.locator('#dock-undock:visible').first().click();
 	await A.page.waitForTimeout(400);
 	const flow0 = await box(A.page, '#flow-window');
 	await A.page.mouse.move(flow0.x + 120, flow0.y + 12);
@@ -87,7 +87,7 @@ h.run(async () => {
 	if (third) {
 		await A.page.evaluate(() => window.__stores.explorerClose.set(false));
 		await A.page.waitForTimeout(600);
-		const undockBtn = A.page.locator('#explorer-undock');
+		const undockBtn = A.page.locator('#dock-undock:visible');
 		if (await undockBtn.count()) {
 			await undockBtn.first().click();
 			await A.page.waitForTimeout(400);
diff --git a/tests/e2e/docking.test.cjs b/tests/e2e/docking.test.cjs
index aebb295a8..5f26860f1 100644
--- a/tests/e2e/docking.test.cjs
+++ b/tests/e2e/docking.test.cjs
@@ -52,7 +52,7 @@ h.run(async () => {
 	// refusal is for a THIRD; the split's own coverage is dock-splits
 	await A.page.locator('p[title="Node editor (N)"]').click();
 	await A.page.waitForTimeout(500);
-	await A.page.locator('#flow-undock').click();
+	await A.page.locator('#dock-undock:visible').first().click();
 	await A.page.waitForTimeout(400);
 	const flow = await A.page.locator('#flow-window').boundingBox();
 	await A.page.mouse.move(flow.x + 120, flow.y + 12);
diff --git a/tests/e2e/explorer-header-panels.test.cjs b/tests/e2e/explorer-header-panels.test.cjs
index 6d214e1ce..e89e40781 100644
--- a/tests/e2e/explorer-header-panels.test.cjs
+++ b/tests/e2e/explorer-header-panels.test.cjs
@@ -555,7 +555,7 @@ h.run(async () => {
 	// The header exists TWICE -- the bottom dock and the floating window -- so the chip
 	// is one snippet rendered from both. A second call site nobody drives is a second
 	// call site that can quietly be wrong (and it is where duplicate ids would show up).
-	await A.page.locator('#explorer-undock').click();
+	await A.page.locator('#dock-undock:visible').click();
 	await A.page.waitForTimeout(900);
 	const floated = await A.page.evaluate(() => ({
 		windowed: !!document.querySelector('#explorer-window'),
diff --git a/tests/e2e/explorer.test.cjs b/tests/e2e/explorer.test.cjs
index cb81b710a..2cd79c553 100644
--- a/tests/e2e/explorer.test.cjs
+++ b/tests/e2e/explorer.test.cjs
@@ -78,7 +78,7 @@ h.run(async () => {
 	);
 
 	// undock -> floating window -> dock back
-	await A.page.locator('#explorer-undock').click();
+	await A.page.locator('#dock-undock:visible').click();
 	await A.page.waitForTimeout(400);
 	h.check(await A.page.locator('#explorer-window').isVisible(), 'Explorer undocks into a window');
 	await A.page.locator('#explorer-dock').click();
diff --git a/tests/e2e/game-dungeon-realms.test.cjs b/tests/e2e/game-dungeon-realms.test.cjs
index 2f80b4c1a..39392cffe 100644
--- a/tests/e2e/game-dungeon-realms.test.cjs
+++ b/tests/e2e/game-dungeon-realms.test.cjs
@@ -395,7 +395,7 @@ h.run(async () => {
 		await D.page.keyboard.insertText(code.replace('const EXTRA_GEMS = 0;', 'const EXTRA_GEMS = 1;'));
 		await D.page.keyboard.press('Control+S');
 		await h.eventually(() => nodesOf(D.page, 'behaviour').then((n) => n[0].data.code), (c) => /const EXTRA_GEMS = 1;/.test(c), '7.5 Ctrl+S put the edited code on the node', 6000);
-		await D.page.locator('#code-ws-close').click().catch(() => {});
+		await D.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 		await h.eventually(() => D.page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, rulesId), (st) => st === 'running', '7.6 the edited rules reloaded', 10000);
 		// both felt in Play: start, the HUD line, and the portal opens on the right gem
 		await D.page.evaluate(() => window.__stores.isLocked.set(true));
diff --git a/tests/e2e/game-escape-room.test.cjs b/tests/e2e/game-escape-room.test.cjs
index 7f84bcecc..ee8f9c0d4 100644
--- a/tests/e2e/game-escape-room.test.cjs
+++ b/tests/e2e/game-escape-room.test.cjs
@@ -217,7 +217,7 @@ h.run(async () => {
 	await page.keyboard.insertText(edited);
 	await page.keyboard.press('Control+S');
 	await h.eventually(codeNow, (c) => /const CODE = \[1, 1, 1\];/.test(c), 'Ctrl+S saved the code onto the node (the dial code is 1 · 1 · 1)', 6000);
-	await page.locator('#code-ws-close').click().catch(() => {});
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await h.eventually(() => page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, rid), (st) => st === 'running', 'the edited rules reloaded and run', 8000);
 	/** the workshop practice room: dials once each (the code change), the crank fitted and turned (the graph change) */
 	const feel = async (when) => {
diff --git a/tests/e2e/game-football.test.cjs b/tests/e2e/game-football.test.cjs
index 8af0f897e..c8123a9c9 100644
--- a/tests/e2e/game-football.test.cjs
+++ b/tests/e2e/game-football.test.cjs
@@ -668,7 +668,7 @@ h.run(async () => {
 		await A.page.keyboard.insertText(fr.code.replace('const GOAL_POINTS = 1;', 'const GOAL_POINTS = 2;'));
 		await A.page.keyboard.press('Control+S');
 		await h.eventually(() => rulesNode(), (n) => /const GOAL_POINTS = 2;/.test(n?.code ?? ''), '8.5 Ctrl+S put the edited code on the node', 6000);
-		await A.page.locator('#code-ws-close').click().catch(() => {});
+		await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 		await h.eventually(() => low.page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, fr.id), (st) => st === 'running', '8.6 the authority reloaded the edited rules', 10000);
 		// both felt in Play: a rematch, ONE goal = 2 for blue, and first-to-2 ends it
 		await A.page.evaluate(() => window.__stores.isLocked.set(true));
diff --git a/tests/e2e/game-marble-maze.test.cjs b/tests/e2e/game-marble-maze.test.cjs
index 762664551..94166d5ae 100644
--- a/tests/e2e/game-marble-maze.test.cjs
+++ b/tests/e2e/game-marble-maze.test.cjs
@@ -239,7 +239,7 @@ const CANDIDATES = [
 	await page.keyboard.insertText(edited);
 	await page.keyboard.press('Control+S');
 	await h.eventually(codeNow, (c) => /name: 'Gentle roll'/.test(c), "Ctrl+S saved the code onto the node (maze 1 is 'Gentle roll')", 6000);
-	await page.locator('#code-ws-close').click().catch(() => {});
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await h.eventually(() => page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, rid), (st) => st === 'running', 'the edited rules reloaded and run', 8000);
 	const feel = async (when) => {
 		await page.evaluate(() => window.__stores.isLocked.set(true));
diff --git a/tests/e2e/game-mini-golf.test.cjs b/tests/e2e/game-mini-golf.test.cjs
index e9c3ac8ea..094eec7a4 100644
--- a/tests/e2e/game-mini-golf.test.cjs
+++ b/tests/e2e/game-mini-golf.test.cjs
@@ -293,7 +293,7 @@ h.run(async () => {
 	await page.keyboard.insertText(edited);
 	await page.keyboard.press('Control+S');
 	await h.eventually(codeNow, (c) => /name: 'Straight', par: 4,/.test(c), 'Ctrl+S saved the code onto the node (hole 1 is par 4)', 6000);
-	await page.locator('#code-ws-close').click().catch(() => {});
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await h.eventually(() => page.evaluate(() => window.__stores.behaviours.behavioursDebug().status[window.__minigolf.rulesNode()]?.status), (st) => st === 'running', 'the edited rules reloaded and run', 8000);
 	// both felt in Play
 	await page.evaluate(() => window.__stores.isLocked.set(true));
diff --git a/tests/e2e/game-sky-run.test.cjs b/tests/e2e/game-sky-run.test.cjs
index 124121723..ba2c1787a 100644
--- a/tests/e2e/game-sky-run.test.cjs
+++ b/tests/e2e/game-sky-run.test.cjs
@@ -285,7 +285,7 @@ h.run(async () => {
 	await page.keyboard.insertText(edited);
 	await page.keyboard.press('Control+S');
 	await h.eventually(codeNow, (c) => /name: 'Puff Steps'/.test(c), "Ctrl+S saved the code onto the node (stage 1 is 'Puff Steps')", 6000);
-	await page.locator('#code-ws-close').click().catch(() => {});
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await h.eventually(() => page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, rid), (st) => st === 'running', 'the edited rules reloaded and run', 8000);
 	/** stage 1 from the menu, the HUD title (the code change), then a fall (the graph change) */
 	const feel = async (when) => {
diff --git a/tests/e2e/game-target-toss.test.cjs b/tests/e2e/game-target-toss.test.cjs
index 39a6bc1ee..d8e341c2e 100644
--- a/tests/e2e/game-target-toss.test.cjs
+++ b/tests/e2e/game-target-toss.test.cjs
@@ -250,7 +250,7 @@ h.run(async () => {
 	await page.keyboard.insertText(edited);
 	await page.keyboard.press('Control+S');
 	await h.eventually(codeNow, (c) => /const POINTS = \{ can: 150,/.test(c), 'Ctrl+S saved the code onto the node (a can is worth 150)', 6000);
-	await page.locator('#code-ws-close').click().catch(() => {});
+	await page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await h.eventually(() => page.evaluate((id) => window.__stores.behaviours.behavioursDebug().status[id]?.status, rid), (st) => st === 'running', 'the edited rules reloaded and run', 8000);
 	/** stage 1, every can swept off: six cans x 150 with no combo = exactly 900 */
 	const feel = async (when) => {
diff --git a/tests/e2e/hud-editor-wysiwyg.test.cjs b/tests/e2e/hud-editor-wysiwyg.test.cjs
index afb46f8e4..8e1766f0f 100644
--- a/tests/e2e/hud-editor-wysiwyg.test.cjs
+++ b/tests/e2e/hud-editor-wysiwyg.test.cjs
@@ -379,7 +379,7 @@ h.run(async () => {
 	// Undock the HUD editor: that is a real floating window at --z-window, and the one
 	// guaranteed to be on screen.
 	await page.evaluate(() => {
-		const btn = document.querySelector('#hud-dock button[title="Undock into a floating window"]');
+		const btn = document.querySelector('#hud-dock #dock-undock');
 		btn?.click();
 	});
 	await page.waitForTimeout(1200);
diff --git a/tests/e2e/layout.test.cjs b/tests/e2e/layout.test.cjs
index fe1234ebe..b8ade36e3 100644
--- a/tests/e2e/layout.test.cjs
+++ b/tests/e2e/layout.test.cjs
@@ -50,7 +50,7 @@ h.run(async () => {
 	h.check(Math.abs(parseInt(persisted) - after) < 12, `new height persisted (${persisted})`);
 
 	// undock into a floating window
-	await A.page.locator('#flow-undock').click();
+	await A.page.locator('#dock-undock:visible').first().click();
 	await A.page.waitForTimeout(500);
 	h.check(
 		await A.page.locator('#flow-window .svelte-flow').isVisible(),
diff --git a/tests/e2e/node-ux-notes.test.cjs b/tests/e2e/node-ux-notes.test.cjs
index b2ad97d52..287744cc1 100644
--- a/tests/e2e/node-ux-notes.test.cjs
+++ b/tests/e2e/node-ux-notes.test.cjs
@@ -230,7 +230,7 @@ h.run(async () => {
 	});
 	h.check(opened.panel === 'sc' || opened.ws, `Open code opens the script node's code (${JSON.stringify(opened)})`);
 	await p.evaluate(() => window.__stores.scriptEditorOpen.set(null));
-	if (opened.ws) await p.locator('#code-ws-close').click().catch(() => {});
+	if (opened.ws) await p.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click().catch(() => {});
 	await p.waitForTimeout(300);
 
 	await select(p, ['a', 'b', 'c']);
diff --git a/tests/e2e/profiler-ui.test.cjs b/tests/e2e/profiler-ui.test.cjs
index 9cee4c537..0a810c7b9 100644
--- a/tests/e2e/profiler-ui.test.cjs
+++ b/tests/e2e/profiler-ui.test.cjs
@@ -610,7 +610,7 @@ h.run(async () => {
 	);
 
 	// undock / redock keeps working
-	await page.click('button[aria-label="Undock the Profiler"]');
+	await page.locator('#dock-undock:visible').click();
 	await page.waitForSelector('#profiler-window', { timeout: 5000 });
 	await shot('7-floating');
 	await page.click('#profiler-window button:text("Dock")');
diff --git a/tests/e2e/script-nodes.test.cjs b/tests/e2e/script-nodes.test.cjs
index 5174eb67e..524c973e9 100644
--- a/tests/e2e/script-nodes.test.cjs
+++ b/tests/e2e/script-nodes.test.cjs
@@ -105,7 +105,7 @@ h.run(async () => {
 	// 36-code: "Edit code" opens the node's tab in the code workspace (ScriptPanel retired)
 	await A.page.locator('#code-ws-dock .cm-editor, #code-ws-window .cm-editor').first().waitFor({ timeout: 45000 }).catch(() => {});
 	h.check((await A.page.locator('.cm-editor').count()) > 0, 'CodeMirror editor panel mounts');
-	await A.page.locator('#code-ws-close').click();
+	await A.page.locator('#code-ws-close:visible, [data-dock-tab-close="code"]:visible').first().click();
 	await A.page.locator('p[title="Node editor (N)"]').click();
 
 	await A.page.evaluate(async () => {
diff --git a/tests/e2e/shader-window.test.cjs b/tests/e2e/shader-window.test.cjs
index 6b331c603..c0858aae9 100644
--- a/tests/e2e/shader-window.test.cjs
+++ b/tests/e2e/shader-window.test.cjs
@@ -109,8 +109,8 @@ h.run(async () => {
 	h.check(s.present === true, `1.2 ...and reports itself as a dock tab (present=${s.present})`);
 	h.check(s.visible === 'shader', `1.3 ...as the visible one (visible=${s.visible})`);
 	h.check(s.hasBody, `1.4 the graph body renders`);
-	const undockBtn = await A.page.evaluate(() => !!document.getElementById('shader-undock'));
-	h.check(undockBtn, `1.5 the docked header offers ⧉ Undock (#shader-undock present=${undockBtn})`);
+	const undockBtn = await A.page.evaluate(() => !!document.querySelector('#shader-editor #dock-undock'));
+	h.check(undockBtn, `1.5 40 F8: the dock's own chrome offers Undock (the dock's #dock-undock present=${undockBtn})`);
 	// the top-edge dock resize cue W6 added must survive the restructure
 	const cue = await A.page.evaluate(() => !!document.querySelector('#shader-editor .resize-cue'));
 	h.check(cue, `1.6 the top-edge dock resize cue is still there (${cue})`);
diff --git a/tests/e2e/tab-group-geometry.test.cjs b/tests/e2e/tab-group-geometry.test.cjs
index f1a113f0e..bbd2e1573 100644
--- a/tests/e2e/tab-group-geometry.test.cjs
+++ b/tests/e2e/tab-group-geometry.test.cjs
@@ -39,7 +39,7 @@ h.run(async () => {
 	await page.evaluate(() => window.__stores.explorerClose.set(false));
 	await page.waitForTimeout(1200);
 	if (!(await page.locator('#explorer-window').count())) {
-		await page.locator('#explorer-undock').click({ timeout: 20000 });
+		await page.locator('#dock-undock:visible').click({ timeout: 20000 });
 		await page.waitForTimeout(900);
 	}
 	await page.evaluate(() => window.__stores.flowGraphClose?.set?.(false));
diff --git a/tests/e2e/tab-group-stacking.test.cjs b/tests/e2e/tab-group-stacking.test.cjs
index 73a93ecbc..09c6b24a4 100644
--- a/tests/e2e/tab-group-stacking.test.cjs
+++ b/tests/e2e/tab-group-stacking.test.cjs
@@ -37,7 +37,7 @@ h.run(async () => {
 	});
 	await page.waitForTimeout(1200);
 	if (!(await page.locator('#explorer-window').count())) {
-		await page.locator('#explorer-undock').click({ timeout: 20000 });
+		await page.locator('#dock-undock:visible').click({ timeout: 20000 });
 		await page.waitForTimeout(900);
 	}
 	await page.evaluate(() => window.__stores.chatHidden?.set?.(''));
diff --git a/tests/e2e/window-header-ranking.test.cjs b/tests/e2e/window-header-ranking.test.cjs
index 18feeba16..cf87c4783 100644
--- a/tests/e2e/window-header-ranking.test.cjs
+++ b/tests/e2e/window-header-ranking.test.cjs
@@ -232,7 +232,7 @@ h.run(async () => {
 	await page.evaluate(() => window.__stores.explorerClose.set(false));
 	await page.waitForTimeout(400);
 	if (!(await page.locator('#explorer-window').count())) {
-		await page.locator('#explorer-undock').click();
+		await page.locator('#dock-undock:visible').click();
 		await page.waitForTimeout(700);
 	}
 	const EX = '#explorer-window';