From 69efbdbcffb0eec1c303a28f8e5347746de14d37 Mon Sep 17 00:00:00 2001
From: AlexZ005 <alexz005.info@gmail.com>
Date: Thu, 1 Oct 2026 20:53:42 +0300
Subject: [PATCH 1/3] [feat] editor ui: toolbar order, Interact cell like the
 others, perf counter, VR select-then-grip (WIP, proofs running)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- E1: default bar = move/rotate/scale, Interact, Play, object list, node editor, Explorer,
  Animation; a stored record that is still a shipped default migrates (keeps posX/collapsed),
  a customized bar wins as saved and does not gain Animation (PROMOTED_DEFAULTS)
- E2: the Interact <button> cell drops classActive's click-focus ring (focus-visible only)
- E3: the play well's hover halves answer `*:hover`, not `p:hover` (the Interact button left
  two pill-coloured corners beside Play)
- Q1: Settings > Interface > Viewport "Show FPS + draw calls" (+ VR settings row): the one
  FpsCounter in any mode, calls amber > 120 / red > 150 (fpsMeter.callsTier); vrPerfStrip.js
  head-locked strip in a headset; sceneBudget.noteExternalFrame so XR frames drive the
  draw-call sampler (the window rAF stops in a session)
- E4 (VR half): a SELECTED scenery object (>= 4 m / around the head) is grip-held in Edit;
  unselected scenery still moves the world; one-time headset hint
- tests: vitest fpsMeter + vrGrip; e2e editor-ui-33 (new), controls-roster + vr-grips-by-mode
  updated — the e2e proofs were still running at this commit (see the lane handover)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/hud/FpsCounter.svelte       |  34 ++-
 src/components/menu/Controls.svelte        |  68 ++++--
 src/components/menu/Settings.svelte        |   7 +
 src/components/play/VRSettingsPanel.svelte |   2 +
 src/lib/fpsMeter.js                        |  50 ++++-
 src/lib/gameKit.js                         |   1 +
 src/lib/sceneBudget.js                     |  23 ++
 src/lib/vrControls.js                      |  33 ++-
 src/lib/vrGameInput.js                     |   7 +-
 src/lib/vrGamePanel.js                     |   5 +-
 src/lib/vrGrip.js                          |  14 +-
 src/lib/vrPerfStrip.js                     | 153 +++++++++++++
 tests/e2e/controls-roster.test.cjs         |  81 +++----
 tests/e2e/editor-ui-33.test.cjs            | 248 +++++++++++++++++++++
 tests/e2e/vr-grips-by-mode.test.cjs        |  37 +++
 tests/unit/fpsMeter.test.js                |  35 +++
 tests/unit/vrGrip.test.js                  |  13 ++
 17 files changed, 740 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/vrPerfStrip.js
 create mode 100644 tests/e2e/editor-ui-33.test.cjs
 create mode 100644 tests/unit/fpsMeter.test.js

diff --git a/src/components/hud/FpsCounter.svelte b/src/components/hud/FpsCounter.svelte
index c9c74b72..0c7c0596 100644
--- a/src/components/hud/FpsCounter.svelte
+++ b/src/components/hud/FpsCounter.svelte
@@ -2,19 +2,32 @@
 	// 31 K3 G3 — the desktop FPS counter: this game's "Show FPS" setting, while playing it.
 	// The headset shows the same reading on the top strip and the wrist card (vrGamePanel).
 	// LOCAL chrome, pointer-events none, over the game's HUD.
+	// 33 Q1: the SAME counter answers the app-wide "Show FPS + draw calls" preference — in
+	// any scene, in any mode — and then colours the draw calls against the Quest budget
+	// (amber past 120, red past 150). One meter, one implementation: the headset's half is
+	// vrPerfStrip.js, reading the same `fpsReading`.
 	import { isLocked, isVRMode, editorMode } from '../../stores/sceneStore';
 	import { gameSettingValues } from '$lib/gameSettings';
-	import { fpsReading, fpsText } from '$lib/fpsMeter';
+	import { fpsReading, perfParts, perfStatsShown } from '$lib/fpsMeter';
 
 	const playing = $derived($isLocked === true);
-	const shown = $derived(!!$gameSettingValues.showFps && !$isVRMode && (playing || $editorMode === 'interact'));
-	const text = $derived(fpsText($fpsReading));
+	const gameShown = $derived(!!$gameSettingValues.showFps && (playing || $editorMode === 'interact'));
+	const shown = $derived(!$isVRMode && ($perfStatsShown || gameShown));
+	const parts = $derived(perfParts($fpsReading));
 </script>
 
 {#if shown}
-	<div id="game-fps-counter" class="fps" class:fps-play={playing} aria-live="off">
-		<span class="fps-main">{text.main}</span>
-		{#if text.detail}<span class="fps-detail">{text.detail}</span>{/if}
+	<div id="game-fps-counter" class="fps" class:fps-play={playing} data-tier={parts.tier} aria-live="off">
+		<span class="fps-main">{parts.fps}</span>
+		{#if parts.ms || parts.calls || parts.tris}
+			<span class="fps-detail"
+				>{#if parts.ms}<span>{parts.ms}</span>{/if}{#if parts.calls}{#if parts.ms}
+						·
+					{/if}<span id="fps-calls" class="fps-calls" data-tier={parts.tier}>{parts.calls}</span>{/if}{#if parts.tris}{#if parts.ms || parts.calls}
+						·
+					{/if}<span>{parts.tris}</span>{/if}</span
+			>
+		{/if}
 	</div>
 {/if}
 
@@ -49,4 +62,13 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+	/* 33 Q1: the draw-call budget — TIER_COLORS in fpsMeter.js holds the same three */
+	.fps-calls[data-tier='warn'] {
+		color: #fbbf24;
+		font-weight: 700;
+	}
+	.fps-calls[data-tier='over'] {
+		color: #f87171;
+		font-weight: 700;
+	}
 </style>
diff --git a/src/components/menu/Controls.svelte b/src/components/menu/Controls.svelte
index 64dc0045..0bcf4399 100644
--- a/src/components/menu/Controls.svelte
+++ b/src/components/menu/Controls.svelte
@@ -647,6 +647,9 @@
 	});
 	let classActive =
 		'group inline-flex items-center justify-center hover:bg-primary-700 focus:outline-hidden focus:ring-4 focus:ring-primary-300';
+	// 33 E2: the toggle cell's twin of classActive — same hover, no click-focus ring
+	const cellToggleClass =
+		'group inline-flex items-center justify-center hover:bg-primary-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-300';
 
 	// 18-B: object-list window size limits, shared with the clamp helpers
 	const OBJ_WIN_MIN = { minW: 250, minH: 200 };
@@ -981,11 +984,25 @@
 	 *  the FAB's own right-click menu (plus Settings' Reset window positions, which
 	 *  is the hatch for iOS Safari, where a long press fires no `contextmenu`). */
 	const SPACER = '__spacer';
-	// 30 P1: the Edit/Interact toggle ('mode') joins the default bar at the END — the same
-	// place loadLayout already appends a default id an older record has never heard of, so
-	// a fresh profile and an upgraded one agree, and the well keeps its slot after Scale
-	const DEFAULT_ORDER = ['move', 'rotate', 'scale', 'objects', 'flow', 'explorer', 'mode'];
-	const DEFAULT_SPACER = 3;
+	// 33 E1: THE USER'S ORDER — the transforms, then Interact, then Play (the well), then
+	// the views they open most: object list, node editor, Explorer, Animation. Interact
+	// sits beside Play because the two answer one question ("how am I touching the scene
+	// right now"), and Animation joined the default bar (it was an opt-in view before).
+	const DEFAULT_ORDER = ['move', 'rotate', 'scale', 'mode', 'objects', 'flow', 'explorer', 'animation'];
+	const DEFAULT_SPACER = 4;
+	/** 33 E1: the bars a profile could hold WITHOUT ever customizing — the default rows the
+	 *  app has shipped, read as the VISUAL row (the well as `__spacer`). A stored record
+	 *  that still IS one of these is a default nobody chose, so it migrates to the new
+	 *  default (keeping where the bar sits and whether it is collapsed); anything else is
+	 *  a custom bar and wins as saved. Pre-30 had no 'mode'; 30-31 appended it last. */
+	const LEGACY_DEFAULT_ROWS = [
+		'move,rotate,scale,__spacer,objects,flow,explorer',
+		'move,rotate,scale,__spacer,objects,flow,explorer,mode'
+	];
+	/** 33 E1: ids that became DEFAULT after having been opt-in. A custom record that does
+	 *  not list one LEFT it off on purpose (it was unticked), so it is not appended there —
+	 *  the append rule is for buttons new to the app, and these are not. */
+	const PROMOTED_DEFAULTS = ['animation'];
 
 	/** W8b: the roster is bigger than the bar. `DEFAULT_ORDER` is what a fresh profile
 	 *  puts ON the bar and has NOT changed — the same six ids, the same order, the same
@@ -999,7 +1016,10 @@
 	 *  Explorer (already a default button) — so the roster and the "+" cannot disagree
 	 *  about which views exist. Titles come from `DOCK_TITLES`, the dock's own names, so
 	 *  a button and its tab read the same word. */
-	const OPTIONAL_VIEWS = DOCK_VIEWS.filter((view) => view.key !== 'explorer').map((view) => view.key);
+	const VIEW_BUTTONS = DOCK_VIEWS.filter((view) => view.key !== 'explorer').map((view) => view.key);
+	// 33 E1: a view on the DEFAULT bar (Animation) is not also an optional one, or the
+	// Customize and Swap-with lists would carry it twice
+	const OPTIONAL_VIEWS = VIEW_BUTTONS.filter((key) => !DEFAULT_ORDER.includes(key));
 
 	/** the glyph for each optional view. Chosen from a rendered 18px sheet against the
 	 *  six already on the bar, not from the names — which is what caught the one real
@@ -1077,7 +1097,7 @@
 		// when it is the one on screen — which is the whole reason these are worth
 		// having as buttons: the "+" list can only ever open them.
 		...Object.fromEntries(
-			OPTIONAL_VIEWS.map((key) => [
+			VIEW_BUTTONS.map((key) => [
 				key,
 				{
 					title: DOCK_TITLES[key] ?? key,
@@ -1105,6 +1125,16 @@
 		};
 	}
 
+	/** 33 E1: is this stored record one of the default bars the app used to ship? */
+	function isLegacyDefault(order: string[], saved: any): boolean {
+		const hidden: string[] = Array.isArray(saved.hidden) ? saved.hidden : [];
+		if (hidden.some((id) => order.includes(id))) return false;
+		const row = [...order];
+		const at = Number.isFinite(saved.spacerIndex) ? Math.max(0, Math.min(saved.spacerIndex, row.length)) : 3;
+		row.splice(at, 0, SPACER);
+		return LEGACY_DEFAULT_ROWS.includes(row.join(','));
+	}
+
 	function defaultLayout(): ControlsLayout {
 		return { order: [...DEFAULT_ORDER], hidden: [], spacerIndex: DEFAULT_SPACER, collapsed: false, posX: null };
 	}
@@ -1132,7 +1162,11 @@
 						(id: any, at: number) => BUTTONS[id] && saved.order.indexOf(id) === at
 					)
 				: [];
-			for (const id of DEFAULT_ORDER) if (!order.includes(id)) order.push(id);
+			const posX0 = typeof saved.posX === 'number' && Number.isFinite(saved.posX) ? Math.max(0, Math.min(1, saved.posX)) : null;
+			// 33 E1: a record that is still a SHIPPED default migrates to today's default
+			if (isLegacyDefault(order, saved))
+				return { ...defaultLayout(), collapsed: saved.collapsed === true, posX: posX0 };
+			for (const id of DEFAULT_ORDER) if (!order.includes(id) && !PROMOTED_DEFAULTS.includes(id)) order.push(id);
 			const hidden: string[] = Array.isArray(saved.hidden)
 				? saved.hidden.filter((id: any) => order.includes(id))
 				: [];
@@ -1978,13 +2012,16 @@
 				       4b: the FAB is the well's own THIRD child now (see below), which is
 				     why the right half is addressed as `:nth-child(2)` rather than
 				     `:last-child` — the FAB would otherwise steal that position and the
-				     right-hand hover paint would silently stop appearing. -->
+				     right-hand hover paint would silently stop appearing.
+				       33 E3: the neighbour test is `*:hover`, never `p:hover` — the Interact
+				     toggle is a <button> (it carries aria-pressed), so beside the well it lit
+				     itself and left the two pill-coloured corners this paint exists to fill. -->
 				<div class="relative flex h-full w-10 items-stretch justify-center">
 					<div
-						class={'h-full w-5 [p:hover+div>&:first-child]:bg-primary-700' + (i === 0 ? ' rounded-l-full' : '')}
+						class={'h-full w-5 [*:hover+div>&:first-child]:bg-primary-700' + (i === 0 ? ' rounded-l-full' : '')}
 					></div>
 					<div
-						class={'h-full w-5 [div:has(+p:hover)>&:nth-child(2)]:bg-primary-700' +
+						class={'h-full w-5 [div:has(+*:hover)>&:nth-child(2)]:bg-primary-700' +
 							(i === visibleCells.length - 1 ? ' rounded-r-full' : '')}
 					></div>
 					<!-- QW (Controls Option A): the WHOLE button scales on hover anywhere on
@@ -2061,11 +2098,16 @@
 				{@const btn = BUTTONS[cell.id]}
 				{@const Glyph = btn.icon}
 				{#if btn.pressed}
-				<!-- 30 P1: a TOGGLE cell is a real button, so it can say aria-pressed -->
+				<!-- 30 P1: a TOGGLE cell is a real button, so it can say aria-pressed.
+				     33 E2: a <button> TAKES FOCUS on click where the <p> cells cannot, so
+				     classActive's `focus:ring-4` drew the theme's red ring on every press —
+				     the only cell that ever showed one. The ring is keyboard-only here
+				     (`focus-visible`, which a mouse press never matches), so a click looks
+				     like every other cell's. -->
 				<button
 					type="button"
 					id={btn.slot}
-					class={classActive +
+					class={cellToggleClass +
 						' w-10' +
 						(i === 0 ? ' rounded-l-full' : '') +
 						(i === visibleCells.length - 1 ? ' rounded-r-full' : '')}
diff --git a/src/components/menu/Settings.svelte b/src/components/menu/Settings.svelte
index 11581476..ce9c6472 100644
--- a/src/components/menu/Settings.svelte
+++ b/src/components/menu/Settings.svelte
@@ -13,6 +13,7 @@
 	import { lightHelperLength } from '$lib/lightHelpers';
 	import { flowMouseBindings, FLOW_MOUSE_BINDINGS } from '$lib/flowPrefs';
 	import { helpersInPlay } from '$lib/helperLayer';
+	import { perfStatsShown } from '$lib/fpsMeter';
 	import { gamepadPrefs, setGamepadPrefs, DEADZONE_RANGE, SENSITIVITY_RANGE } from '$lib/gamepadPrefs';
 	import { drawerSlot, cloudPluginInfo } from '$lib/cloudHooks';
 	import { versionString } from '$lib/version.js';
@@ -841,6 +842,12 @@
 						Add a "Search objects…" entry to the viewport right-click menu — find a scene object and fly the camera to it
 					</SettingRow>
 					<p class="ui-section-label">Viewport</p>
+					<SettingRow name="Show FPS + draw calls">
+						<svelte:fragment slot="control"><Toggle id="show-perf-stats" bind:checked={$perfStatsShown} /></svelte:fragment>
+						A small counter with the frame rate, frame time, draw calls and triangles — in the
+						corner of the viewport and, in a headset, on a strip at the top of the view. The draw
+						calls turn amber past 120 and red past 150, the practical limit on a Quest
+					</SettingRow>
 					<SettingRow name="Dock resizes the viewport">
 						<svelte:fragment slot="control">
 							<Toggle
diff --git a/src/components/play/VRSettingsPanel.svelte b/src/components/play/VRSettingsPanel.svelte
index 50ef50f0..5286c276 100644
--- a/src/components/play/VRSettingsPanel.svelte
+++ b/src/components/play/VRSettingsPanel.svelte
@@ -18,6 +18,7 @@
 	} from '../../stores/sceneStore'
 	import { vrHovered, vrSettingsGroup, controllerIndexFor } from '$lib/vrControls'
 	import { applyWindowPose } from '$lib/vrWindowPoses'
+	import { perfStatsShown } from '$lib/fpsMeter'
 	import { menuPoseFromController } from '$lib/vrRadialMenu'
 
 	// VR Settings panel (187): a controller-stuck replica of the desktop VR
@@ -43,6 +44,7 @@
 		{ action: 'settings:mirror', label: 'Mirror snap turn', toggle: true, active: $vrMirrorSnapTurn },
 		{ action: 'settings:angle', label: 'Snap turn: ' + ($vrSnapAngle ? $vrSnapAngle + ' deg' : 'Off') },
 		{ action: 'settings:vertexhold', label: 'Hold to move vertex', toggle: true, active: $vrVertexHold },
+		{ action: 'settings:perf', label: 'FPS + draw calls', toggle: true, active: $perfStatsShown },
 		{ action: 'settings:hz', label: 'Refresh: ' + ($vrTargetHz === 'auto' ? 'Max' : $vrTargetHz + ' Hz') },
 		{ action: 'settings:handstyle', label: 'Peer hands: ' + ($peerHandStyle === 'model' ? 'Model' : $peerHandStyle === 'hands' ? 'Hands' : 'Spheres') },
 		{ action: 'settings:passthrough', label: 'Passthrough', toggle: true, active: $vrPassthrough },
diff --git a/src/lib/fpsMeter.js b/src/lib/fpsMeter.js
index dd900c4b..5c4b5a7a 100644
--- a/src/lib/fpsMeter.js
+++ b/src/lib/fpsMeter.js
@@ -10,8 +10,52 @@
 // The draw calls / triangles are sceneBudget's per-display-frame totals (sampled ~1/s).
 // A LEAF: svelte/store + sceneBudget (itself a leaf) + sceneStore.
 import { writable, get } from 'svelte/store';
-import { registerFrameObserver, sceneMetrics } from './sceneBudget';
+import { registerFrameObserver, sceneMetrics, noteExternalFrame } from './sceneBudget';
 import { globalRenderer } from '../stores/sceneStore';
+import { safeStorage } from './safeStorage';
+
+// 33 Q1 — "Show amount of fps and draw calls within quest as an option in settings (150 is
+// limit for quest)". An APP-WIDE preference (Settings ▸ Interface ▸ Viewport, and the VR
+// settings panel), separate from a game's own Show FPS row: that one is a per-game choice
+// that only shows while you play, this one is a debugging lens on any scene in any mode.
+// Both draw THIS reading through the same counter (FpsCounter.svelte on the desktop; in a
+// headset vrPerfStrip.js), so there is one meter and one number. LOCAL, never replicated.
+
+const PERF_KEY = 'perfStats:show';
+/** the app-wide "Show FPS + draw calls" preference */
+export const perfStatsShown = writable(safeStorage.getItem(PERF_KEY) === 'true');
+perfStatsShown.subscribe((on) => {
+	safeStorage.setItem(PERF_KEY, on ? 'true' : 'false');
+});
+
+/** draw calls per frame past which the counter warns (amber) */
+export const CALLS_WARN = 120;
+/** the Quest's practical draw-call ceiling — past it the counter is RED */
+export const CALLS_LIMIT = 150;
+
+/** How a draw-call count reads against the Quest budget. Pure; exported for the unit layer.
+ * @param {number | null | undefined} calls @returns {'ok' | 'warn' | 'over' | null} */
+export function callsTier(calls) {
+	if (calls === null || calls === undefined || !Number.isFinite(calls)) return null;
+	if (calls > CALLS_LIMIT) return 'over';
+	if (calls > CALLS_WARN) return 'warn';
+	return 'ok';
+}
+
+/** the colour each tier is drawn in (desktop CSS and the VR canvas share it) */
+export const TIER_COLORS = { ok: '#d1d5db', warn: '#fbbf24', over: '#f87171' };
+
+/** A reading as its parts, for a counter that colours the calls. @param {FpsReading} r */
+export function perfParts(r) {
+	const tris = !r || r.tris === null ? null : r.tris >= 1000 ? Math.round(r.tris / 1000) + 'k' : String(r.tris);
+	return {
+		fps: !r || r.fps === null ? '— fps' : r.fps + ' fps',
+		ms: !r || r.ms === null ? null : r.ms + ' ms',
+		calls: !r || r.calls === null ? null : r.calls + ' calls',
+		tris: tris === null ? null : tris + ' tris',
+		tier: callsTier(r?.calls)
+	};
+}
 
 /** @typedef {{fps: number | null, ms: number | null, calls: number | null, tris: number | null, source: 'desktop' | 'xr' | null}} FpsReading */
 
@@ -62,6 +106,10 @@ function publish() {
 export function noteXrFrame(now = typeof performance !== 'undefined' ? performance.now() : Date.now()) {
 	if (lastXrAt) note(now - lastXrAt, 'xr');
 	lastXrAt = now;
+	// 33 Q1: the draw calls/triangles are averaged over DISPLAY frames, which sceneBudget
+	// counts off the window's rAF — and that does not run inside an immersive session, so
+	// the headset read a frozen (or empty) calls figure. An XR frame counts as one there.
+	noteExternalFrame(now);
 }
 
 registerFrameObserver((ms) => {
diff --git a/src/lib/gameKit.js b/src/lib/gameKit.js
index 6d29bb2c..26e7a4b0 100644
--- a/src/lib/gameKit.js
+++ b/src/lib/gameKit.js
@@ -17,6 +17,7 @@ export * as gameSettings from './gameSettings';
 export * as gameShellWire from './gameShellWire';
 export * as shellPanelDraw from './shellPanelDraw';
 export * as fpsMeter from './fpsMeter';
+export * as vrPerfStrip from './vrPerfStrip';
 export * as comfortVignette from './comfortVignette';
 export * as clap from './clap'; // 31 (Stars Room S3): the clap runtime + its test hook
 export * as clapGesture from './clapGesture'; // 31: the pure detector
diff --git a/src/lib/sceneBudget.js b/src/lib/sceneBudget.js
index cba26d4f..13740b08 100644
--- a/src/lib/sceneBudget.js
+++ b/src/lib/sceneBudget.js
@@ -632,8 +632,31 @@ export function registerFrameObserver(fn) {
 	return () => frameObservers.delete(fn);
 }
 
+/** when the window's own loop last ran (ms) — an external frame source stands down while it does */
+let lastLoopAt = 0;
+/** how long the window loop may be silent before an external source takes the count over */
+const LOOP_STALE_MS = 250;
+
+/**
+ * 33 Q1: a display frame from ANOTHER loop — an immersive session's XR frame, where the
+ * window's requestAnimationFrame does not run, so `loop` below never counts a frame and the
+ * per-frame render totals freeze. Ignored while the window loop is alive (an emulated
+ * session in a test runs both), so a frame is never counted twice.
+ * @param {number} now ms
+ */
+export function noteExternalFrame(now) {
+	if (!running || now - lastLoopAt < LOOP_STALE_MS) return;
+	renderFrames++;
+	countRenderCalls(get(globalRenderer));
+	if (now - lastSampleAt >= SAMPLE_MS) {
+		lastSampleAt = now;
+		sample();
+	}
+}
+
 function loop() {
 	const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
+	lastLoopAt = now;
 	if (lastFrameAt) {
 		const ms = now - lastFrameAt;
 		noteFrame(ms);
diff --git a/src/lib/vrControls.js b/src/lib/vrControls.js
index ac5ae97c..1db9a029 100644
--- a/src/lib/vrControls.js
+++ b/src/lib/vrControls.js
@@ -15,6 +15,7 @@ import {
 	vrVertexHold,
 	vrSettingsPanelOpen,
 	selectedObject,
+	selectedObjects,
 	isVRMode,
 	worldRig,
 	vrPassthrough,
@@ -57,6 +58,7 @@ import { activeRing, findMenuEntry, ringEntries, sectorFromStick, pushRing, popR
 import { paletteColorAt, barValueAt } from './vrPalette';
 // 30b (vr-play) C4: the ONE game-feel predicate (a leaf) + the pattern shapes (pure)
 import { gameFeelActive } from './gameFeel';
+import { perfStatsShown } from './fpsMeter'; // 33 Q1
 // 31 K3: the per-game settings (haptics, turning) and the pause menu's controller button
 import { hapticsAllowed, resolveTurning, gameSettingValues } from './gameSettings';
 import { toggleShellMenu, shellMenuAvailable } from './gameShell';
@@ -2844,6 +2846,7 @@ function onSqueezeStart(index) {
 		// 30b P2: Interact's grips never move the world (contract C1) — 31 K1: unless the play
 		// block allows it (`locomotion.worldGrab`); a grip on a grabbable still took it above
 		if (!gripMovesWorld(mode, mode === 'interact' && vrLocomotionNow().worldGestures)) return;
+		hintSceneryGrip();
 		emptyAirSqueeze[index] = true;
 		// 186: in stretch mode both grips drive the stretch, not a world grab
 		if (get(vrStretchObject)) return;
@@ -2934,6 +2937,7 @@ export function gripTargetOf(ray, handPos, mode) {
 	const camera = get(globalCamera);
 	const head = camera ? camera.getWorldPosition(new THREE.Vector3()) : null;
 	const locked = get(lockedObjects);
+	const selectedNow = get(selectedObjects);
 	const settings = mode === 'interact' ? resolvePlaySettings(get(globalScene)) : null;
 	const interaction = settings ? settings.interaction : 'grab';
 	// 31-towers P1: a player's grip reaches `play.reach` from the BODY (head down to the feet)
@@ -2950,7 +2954,9 @@ export function gripTargetOf(ray, handPos, mode) {
 		if (holdable && !near) lastGripRefusal = { uuid: object.uuid, reach };
 		return {
 			scenery: isScenery(box.isEmpty() ? null : box, head),
-			grabbable: holdable && near
+			grabbable: holdable && near,
+			// 33 E4: in Edit a SELECTED wall/floor/arena is held like any object
+			selected: selectedNow.includes(object.uuid)
 		};
 	};
 	/** @type {any[]} */
@@ -2967,10 +2973,11 @@ export function gripTargetOf(ray, handPos, mode) {
 			points.push(hit.point);
 		}
 	}
-	const picked = pickGripTarget(
-		order.map((object, i) => describe(object, points[i])),
-		mode
-	);
+	const described = order.map((object, i) => describe(object, points[i]));
+	const picked = pickGripTarget(described, mode);
+	// 33 E4: the first thing along the ray was a wall/floor the grip passed through — the
+	// hint below says how to move it instead (select it first)
+	lastGripPassedScenery = mode === 'edit' && picked !== 0 && !!described[0]?.scenery;
 	if (picked >= 0) {
 		lastGripRefusal = null;
 		return order[picked];
@@ -2988,6 +2995,19 @@ export function gripTargetOf(ray, handPos, mode) {
  * controller can jump — a switch mid-hold must not strand the mic open) */
 let pttByA = false;
 
+/** 33 E4: did the last Edit grip pass THROUGH scenery (an unselected wall/floor) first? */
+let lastGripPassedScenery = false;
+const SCENERY_HINT_KEY = 'hint:vrSelectScenery';
+/** Say ONCE (ever) how a wall or a floor moves in Edit: the grip that passed through it went
+ * to the world, which reads as "this object cannot be moved" unless something says so. */
+function hintSceneryGrip() {
+	if (!lastGripPassedScenery || safeStorage.getItem(SCENERY_HINT_KEY) === 'true') return;
+	safeStorage.setItem(SCENERY_HINT_KEY, 'true');
+	import('./gameAnnounce')
+		.then((m) => m.announce('Grip moves the world', { sub: 'To move a wall or a floor, select it with the trigger, then grip it', ms: 4500 }))
+		.catch(() => {});
+}
+
 /** 31-towers P1: the grip the reach refused last ({uuid, reach}), for the buzz and the suite
  * @type {{uuid: string, reach: number} | null} */
 let lastGripRefusal = null;
@@ -3432,6 +3452,9 @@ export function executeVRMenuAction(name) {
 			// K1: experimental forearm sleeve palette (default off)
 			vrSleeveEnabled.update((v) => !v);
 			try { safeStorage.setItem('vrSleeveEnabled', String(get(vrSleeveEnabled))); } catch {}
+		} else if (key === 'perf') {
+			// 33 Q1: the app-wide "Show FPS + draw calls" (fpsMeter persists it)
+			perfStatsShown.update((v) => !v);
 		} else if (key === 'resetpanels') {
 			resetWindowPoses();
 			showToast('VR panel positions reset');
diff --git a/src/lib/vrGameInput.js b/src/lib/vrGameInput.js
index aa8c0e9e..f26841cd 100644
--- a/src/lib/vrGameInput.js
+++ b/src/lib/vrGameInput.js
@@ -32,6 +32,7 @@ import { moduleInteractiveGroups, runClickHandlers } from './moduleSDK';
 import { isModuleTopLevel } from './moduleWorld';
 import { registerVRFrameHook, registerVRTriggerHooks, registerPanelGroupProvider, controllerIndexFor, hapticPattern, triggerClaimed, withRayCamera } from './vrControls';
 // P3 (C2): the game UI in VR — the panel, the wrist card, the strip, the banner
+import { vrPerfStripFrame, hideVrPerfStrip } from './vrPerfStrip';
 import { vrGamePanelFrame, panelTargetAlong, panelHover, pressPanelTarget, pokeFrame, uAcross, vrGameSurface, hideVrGamePanel } from './vrGamePanel';
 
 const _mat = new THREE.Matrix4();
@@ -391,12 +392,16 @@ export function startVrGameInput() {
 			if (!renderer?.xr?.isPresenting) {
 				// the session ENDED: take the surfaces down once (this hook runs every desktop
 				// frame too, where there is nothing to do)
-				if (presenting) hideVrGamePanel();
+				if (presenting) {
+					hideVrGamePanel();
+					hideVrPerfStrip();
+				}
 				presenting = false;
 				return;
 			}
 			presenting = true;
 			vrGamePanelFrame({ hands: [handPose('left'), null] });
+			vrPerfStripFrame(); // 33 Q1: Settings' "Show FPS + draw calls", every mode
 			for (const index of [0, 1]) {
 				const ray = controllerRayOf(index);
 				// the laser on the board wins over the world behind it
diff --git a/src/lib/vrGamePanel.js b/src/lib/vrGamePanel.js
index e6b62cc0..f060a7ef 100644
--- a/src/lib/vrGamePanel.js
+++ b/src/lib/vrGamePanel.js
@@ -60,7 +60,7 @@ import {
 import { gameSettingValues } from './gameSettings';
 import { drawShellPage, SHELL_STAGE } from './shellPanelDraw';
 // 31 K3 G3: Show FPS in the headset (the strip + the wrist)
-import { fpsReading, fpsText, noteXrFrame } from './fpsMeter';
+import { fpsReading, fpsText, noteXrFrame, perfStatsShown } from './fpsMeter';
 import { vignetteFrame } from './comfortVignette';
 
 /** the HUD's authoring reference — the editor artboard's stage */
@@ -746,7 +746,8 @@ export function vrGamePanelFrame(opts = {}) {
 		runtime
 	);
 	// 31 K3 G3: this game's Show FPS puts the counter FIRST on the strip and the wrist
-	if (live && get(gameSettingValues).showFps) lines.unshift(fpsText(get(fpsReading)).main);
+	// 33 Q1: not twice — with the app-wide perf strip on, the head-locked strip carries it
+	if (live && get(gameSettingValues).showFps && !get(perfStatsShown)) lines.unshift(fpsText(get(fpsReading)).main);
 	const wrist = surface('vr-game-wrist', 320, 300, WRIST_W);
 	const leftHand = opts.hands?.[0] ?? null;
 	if (live && leftHand) {
diff --git a/src/lib/vrGrip.js b/src/lib/vrGrip.js
index 0eb38228..c6bddc80 100644
--- a/src/lib/vrGrip.js
+++ b/src/lib/vrGrip.js
@@ -50,15 +50,23 @@ export function isScenery(box, head) {
 
 /**
  * Which candidate a grip takes, in ray order.
- * @param {{scenery: boolean, grabbable: boolean}[]} candidates top-level objects along the
- *   ray, nearest first (each once)
+ *
+ * 33 E4 — "not all objects positions can be moved in edit mode when in game": scenery was
+ * held by NOTHING, so in a game scene every wall, floor, pitch and arena could not be moved
+ * with a grip at all. The fix keeps the world gesture and makes the intent explicit: in
+ * EDIT, scenery you have SELECTED (the trigger selects it) is held like any object — the
+ * select-then-manipulate rule every editor follows. Unselected scenery still passes through
+ * to the world grab, so grabbing a room you are standing in still moves the world.
+ * @param {{scenery: boolean, grabbable: boolean, selected?: boolean}[]} candidates
+ *   top-level objects along the ray, nearest first (each once)
  * @param {'edit' | 'interact'} mode
  * @returns {number} the index taken, or -1 for "nothing" (empty air in Edit = the world)
  */
 export function pickGripTarget(candidates, mode) {
 	for (let i = 0; i < candidates.length; i++) {
 		const c = candidates[i];
-		if (!c || c.scenery) continue;
+		if (!c) continue;
+		if (c.scenery && !(mode !== 'interact' && c.selected)) continue;
 		if (mode === 'interact') return c.grabbable ? i : -1;
 		return i;
 	}
diff --git a/src/lib/vrPerfStrip.js b/src/lib/vrPerfStrip.js
new file mode 100644
index 00000000..d3c2e594
--- /dev/null
+++ b/src/lib/vrPerfStrip.js
@@ -0,0 +1,153 @@
+// 33 Q1 — THE PERF STRIP IN A HEADSET. "Show amount of fps and draw calls within quest as an
+// option in settings (150 is limit for quest)". The desktop half is FpsCounter.svelte; DOM is
+// invisible in a headset, so this draws the SAME reading (fpsMeter's `fpsReading`) on a small
+// head-locked canvas strip near the top of the view, in EVERY mode (Edit, Interact, Play) —
+// a debugging lens, not a game feature, so it does not wait for a game to be running the way
+// the game panel's own Show FPS line does.
+//
+// The draw calls are coloured against the Quest budget (fpsMeter's `callsTier`): amber past
+// 120, red past 150. Redrawn only when the text changes (the reading republishes ~2x/s).
+// Called once per XR frame from vrGameInput's frame hook; `hideVrPerfStrip` on session end.
+// Scene-root, local, overlay order (vrPanelOverlay) so no wall can cover it.
+import * as THREE from 'three';
+import { get } from 'svelte/store';
+import { globalScene, globalRenderer } from '../stores/sceneStore';
+import { fpsReading, perfParts, perfStatsShown, TIER_COLORS } from './fpsMeter';
+import { PANEL_ORDER } from './vrPanelOverlay';
+
+const PX_W = 768;
+const PX_H = 72;
+const WORLD_W = 0.42;
+/** metres ahead of the eyes, and up from the gaze line (above the game strip at 0.36/1.3) */
+const DIST = 1.2;
+const UP = 0.43;
+
+/** @type {{mesh: THREE.Mesh, canvas: HTMLCanvasElement, g: CanvasRenderingContext2D, texture: THREE.CanvasTexture, sig: string} | null} */
+let strip = null;
+const _fwd = new THREE.Vector3();
+const _up = new THREE.Vector3();
+const _head = { position: new THREE.Vector3(), quaternion: new THREE.Quaternion() };
+
+/** the headset's world pose, or null when nothing presents */
+function liveHead() {
+	const renderer = /** @type {any} */ (get(globalRenderer));
+	if (!renderer?.xr?.isPresenting) return null;
+	const cam = renderer.xr.getCamera();
+	cam.updateMatrixWorld?.(true);
+	cam.getWorldPosition(_head.position);
+	cam.getWorldQuaternion(_head.quaternion);
+	return _head;
+}
+/** the last text drawn, for the suites */
+const debug = { draws: 0, segments: /** @type {{text: string, color: string}[]} */ ([]) };
+
+function ensure() {
+	if (strip || typeof document === 'undefined') return strip;
+	const canvas = document.createElement('canvas');
+	canvas.width = PX_W;
+	canvas.height = PX_H;
+	const g = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
+	const texture = new THREE.CanvasTexture(canvas);
+	texture.colorSpace = THREE.SRGBColorSpace;
+	texture.anisotropy = 4;
+	const mesh = new THREE.Mesh(
+		new THREE.PlaneGeometry(WORLD_W, (WORLD_W * PX_H) / PX_W),
+		new THREE.MeshBasicMaterial({ map: texture, transparent: true, depthTest: false, depthWrite: false })
+	);
+	mesh.name = 'vr-perf-strip';
+	mesh.renderOrder = PANEL_ORDER;
+	mesh.frustumCulled = false;
+	mesh.visible = false;
+	mesh.userData.localOnly = true;
+	strip = { mesh, canvas, g, texture, sig: '' };
+	return strip;
+}
+
+/** The strip's segments for a reading: text + colour, in draw order. Exported for the suite.
+ * @param {import('./fpsMeter').FpsReading} r */
+export function perfSegments(r) {
+	const p = perfParts(r);
+	/** @type {{text: string, color: string}[]} */
+	const out = [{ text: p.fps, color: '#a7f3d0' }];
+	if (p.ms) out.push({ text: p.ms, color: TIER_COLORS.ok });
+	if (p.calls) out.push({ text: p.calls, color: TIER_COLORS[p.tier ?? 'ok'] });
+	if (p.tris) out.push({ text: p.tris, color: TIER_COLORS.ok });
+	return out;
+}
+
+/** @param {CanvasRenderingContext2D} g @param {{text: string, color: string}[]} segments */
+function draw(g, segments) {
+	const W = g.canvas.width;
+	const H = g.canvas.height;
+	g.clearRect(0, 0, W, H);
+	g.beginPath();
+	const r = H / 3;
+	g.moveTo(r, 0);
+	g.arcTo(W, 0, W, H, r);
+	g.arcTo(W, H, 0, H, r);
+	g.arcTo(0, H, 0, 0, r);
+	g.arcTo(0, 0, W, 0, r);
+	g.closePath();
+	g.fillStyle = 'rgba(0, 0, 0, 0.72)';
+	g.fill();
+	g.font = `700 ${Math.round(H * 0.5)}px ui-monospace, Menlo, monospace`;
+	g.textBaseline = 'middle';
+	g.textAlign = 'left';
+	const sep = '  ·  ';
+	const widths = segments.map((s) => g.measureText(s.text).width);
+	const sepW = g.measureText(sep).width;
+	const total = widths.reduce((a, b) => a + b, 0) + sepW * Math.max(0, segments.length - 1);
+	let x = Math.max(12, (W - total) / 2);
+	segments.forEach((s, i) => {
+		if (i) {
+			g.fillStyle = '#6b7280';
+			g.fillText(sep, x, H / 2);
+			x += sepW;
+		}
+		g.fillStyle = s.color;
+		g.fillText(s.text, x, H / 2);
+		x += widths[i];
+	});
+}
+
+/**
+ * One XR frame. `head` = the headset's world pose (default: the live XR camera; a suite
+ * passes a synthetic one, null = not presenting).
+ * @param {{position: THREE.Vector3, quaternion: THREE.Quaternion} | null} [head]
+ */
+export function vrPerfStripFrame(head = liveHead()) {
+	const on = !!head && get(perfStatsShown);
+	if (!on) {
+		if (strip) strip.mesh.visible = false;
+		return;
+	}
+	const s = ensure();
+	if (!s || !head) return;
+	const scene = /** @type {any} */ (get(globalScene));
+	if (scene && s.mesh.parent !== scene) scene.add(s.mesh);
+	const segments = perfSegments(get(fpsReading));
+	const sig = JSON.stringify(segments);
+	if (sig !== s.sig) {
+		s.sig = sig;
+		draw(s.g, segments);
+		s.texture.needsUpdate = true;
+		debug.draws++;
+		debug.segments = segments;
+	}
+	_fwd.set(0, 0, -1).applyQuaternion(head.quaternion);
+	_up.set(0, 1, 0).applyQuaternion(head.quaternion);
+	s.mesh.position.copy(head.position).addScaledVector(_fwd, DIST).addScaledVector(_up, UP);
+	s.mesh.quaternion.copy(head.quaternion);
+	s.mesh.updateMatrixWorld(true);
+	s.mesh.visible = true;
+}
+
+/** the session ended: take the strip down */
+export function hideVrPerfStrip() {
+	if (strip) strip.mesh.visible = false;
+}
+
+/** suites: what the strip shows right now */
+export function vrPerfStripDebug() {
+	return { visible: !!strip?.mesh.visible, parent: strip?.mesh.parent?.type ?? null, draws: debug.draws, segments: debug.segments };
+}
diff --git a/tests/e2e/controls-roster.test.cjs b/tests/e2e/controls-roster.test.cjs
index cbd373cb..0c88271e 100644
--- a/tests/e2e/controls-roster.test.cjs
+++ b/tests/e2e/controls-roster.test.cjs
@@ -82,13 +82,13 @@ h.run(async () => {
 	const A = await h.setupPage(browser, 'A');
 
 	// ---- premise: the default roster, in the default order ------------------------
-	// 30 P1: the Edit/Interact toggle joined the default bar at the right end (the place a
-	// default id new to an older record is appended), so the well keeps its slot
-	const DEFAULT = ['Move (1)', 'Rotate (2)', 'Scale (3)', '—', 'Object list (O)', 'Node editor (N)', 'Explorer', 'Interact mode (I)'];
+	// 33 E1: the user's order — transforms, Interact, Play (the well), object list, node
+	// editor, Explorer, Animation (Animation was an opt-in view before)
+	const DEFAULT = ['Move (1)', 'Rotate (2)', 'Scale (3)', 'Interact mode (I)', '—', 'Object list (O)', 'Node editor (N)', 'Explorer', 'Animation'];
 	let titles = await barTitles(A.page);
 	h.check(
 		titles.join(' | ') === DEFAULT.join(' | '),
-		`premise: seven buttons around the play well, in order (${titles.join(' | ')})`
+		`premise: eight buttons around the play well, in order (${titles.join(' | ')})`
 	);
 	h.check(
 		await A.page.evaluate(() => !!document.querySelector('#controls-pill #play-button')),
@@ -117,8 +117,8 @@ h.run(async () => {
 	// plus Play. It reads checked (it IS on the bar) and carries no toggle, because
 	// there is no toolbar without a way to press play.
 	h.check(
-		menu.filter((r) => r.checked).length === 8,
-		`Customize lists the seven buttons AND the play well as on the bar (${menu.filter((r) => r.checked).length})`
+		menu.filter((r) => r.checked).length === 9,
+		`Customize lists the eight buttons AND the play well as on the bar (${menu.filter((r) => r.checked).length})`
 	);
 	h.check(
 		menu.some((r) => r.label === 'Play' && r.checked),
@@ -137,14 +137,14 @@ h.run(async () => {
 	await pick(A.page, 'Rotate (2)');
 	titles = await barTitles(A.page);
 	h.check(!titles.includes('Rotate (2)'), `Rotate left the bar (${titles.join(' | ')})`);
-	h.check(titles.length === 7, `the bar lost exactly one cell (${titles.length})`);
+	h.check(titles.length === 8, `the bar lost exactly one cell (${titles.length})`);
 	h.check(
-		titles.indexOf('—') === 2,
+		titles.indexOf('—') === 3,
 		`the well stayed between the same neighbours — spacerIndex followed the hide (${titles.indexOf('—')})`
 	);
 	let saved = await layout(A.page);
 	h.check(
-		saved && saved.hidden.join(',') === 'rotate' && saved.spacerIndex === 2,
+		saved && saved.hidden.join(',') === 'rotate' && saved.spacerIndex === 3,
 		`the layout persisted (hidden=${saved?.hidden} spacerIndex=${saved?.spacerIndex})`
 	);
 
@@ -153,10 +153,10 @@ h.run(async () => {
 	await A.page.waitForTimeout(600);
 	titles = await barTitles(A.page);
 	h.check(
-		!titles.includes('Rotate (2)') && titles.length === 7,
+		!titles.includes('Rotate (2)') && titles.length === 8,
 		`the hidden button is still hidden after a reload (${titles.join(' | ')})`
 	);
-	h.check(titles.indexOf('—') === 2, 'the well came back where it was left');
+	h.check(titles.indexOf('—') === 3, 'the well came back where it was left');
 
 	// ---- REORDER: Move right on Move ----------------------------------------------
 	await cellMenu(A.page, 'Move (1)');
@@ -222,7 +222,7 @@ h.run(async () => {
 	await pick(A.page, 'Expand toolbar');
 	titles = await barTitles(A.page);
 	h.check(
-		titles.length === 7 && titles.includes('Explorer'),
+		titles.length === 8 && titles.includes('Explorer'),
 		`the FAB menu brings the bar back exactly as it was (${titles.join(' | ')})`
 	);
 	h.check((await layout(A.page))?.collapsed === false, 'expanding persisted too');
@@ -231,15 +231,15 @@ h.run(async () => {
 	await cellMenu(A.page, 'Explorer');
 	await pick(A.page, 'Customize toolbar…');
 	h.check(
-		(await rows(A.page)).filter((r) => r.checked).length === 7,
-		'premise: Customize opens showing the hidden button unchecked (6 buttons + Play)'
+		(await rows(A.page)).filter((r) => r.checked).length === 8,
+		'premise: Customize opens showing the hidden button unchecked (7 buttons + Play)'
 	);
 	await pick(A.page, 'Reset toolbar');
 	// W1: Reset is `keepOpen` too, so the list itself has to show the restored roster
 	h.check(await menuOpen(A.page), 'Reset toolbar leaves the Customize list up');
 	h.check(
-		(await rows(A.page)).filter((r) => r.checked).length === 8,
-		`and the rows re-rendered IN PLACE — all seven read checked again (${(await rows(A.page)).filter((r) => r.checked).length})`
+		(await rows(A.page)).filter((r) => r.checked).length === 9,
+		`and the rows re-rendered IN PLACE — all eight read checked again (${(await rows(A.page)).filter((r) => r.checked).length})`
 	);
 	titles = await barTitles(A.page);
 	h.check(
@@ -263,14 +263,14 @@ h.run(async () => {
 	const noWell = (list) => list.filter((t) => t !== '—');
 	h.check(
 		(await barTitles(A.page)).join(' | ') === DEFAULT.join(' | '),
-		'premise: the default row, with the well between Scale and Object list'
+		'premise: the default row, with the well between Interact and Object list'
 	);
-	await cellMenu(A.page, 'Scale (3)'); // the cell immediately LEFT of the FAB
+	await cellMenu(A.page, 'Interact mode (I)'); // the cell immediately LEFT of the FAB
 	await pick(A.page, 'Move right');
 	titles = await barTitles(A.page);
 	h.check(
-		titles.indexOf('—') === 2 && titles[3] === 'Scale (3)',
-		`Scale crossed the play button in ONE step (${titles.join(' | ')})`
+		titles.indexOf('—') === 3 && titles[4] === 'Interact mode (I)',
+		`Interact crossed the play button in ONE step (${titles.join(' | ')})`
 	);
 	h.check(
 		noWell(titles).join(' | ') === noWell(DEFAULT).join(' | '),
@@ -278,10 +278,10 @@ h.run(async () => {
 	);
 	saved = await layout(A.page);
 	h.check(
-		saved && saved.spacerIndex === 2 && saved.order.join(',') === 'move,rotate,scale,objects,flow,explorer,mode',
+		saved && saved.spacerIndex === 3 && saved.order.join(',') === 'move,rotate,scale,mode,objects,flow,explorer,animation',
 		`the RECORD is derived from the row: the well moved, the order did not (spacerIndex=${saved?.spacerIndex} order=${saved?.order.join(',')})`
 	);
-	await cellMenu(A.page, 'Scale (3)');
+	await cellMenu(A.page, 'Interact mode (I)');
 	await pick(A.page, 'Move left');
 	titles = await barTitles(A.page);
 	h.check(titles.join(' | ') === DEFAULT.join(' | '), `Move left undoes it exactly (${titles.join(' | ')})`);
@@ -291,7 +291,7 @@ h.run(async () => {
 	await pick(A.page, 'Move left');
 	titles = await barTitles(A.page);
 	h.check(
-		titles.indexOf('—') === 2 && noWell(titles).join(' | ') === noWell(DEFAULT).join(' | '),
+		titles.indexOf('—') === 3 && noWell(titles).join(' | ') === noWell(DEFAULT).join(' | '),
 		`the play button's own Move left walks the well one place (${titles.join(' | ')})`
 	);
 	await fabMenu(A.page);
@@ -307,7 +307,7 @@ h.run(async () => {
 		'the leftmost cell refuses Move left and offers Move right'
 	);
 	await closeMenus(A.page);
-	await cellMenu(A.page, 'Interact mode (I)');
+	await cellMenu(A.page, 'Animation');
 	menu = await rows(A.page);
 	h.check(
 		menu.find((r) => r.label === 'Move right')?.disabled === true,
@@ -585,7 +585,7 @@ h.run(async () => {
 	// pins the exact cells, their order AND the well's index — not just a count.
 	titles = await barTitles(A.page);
 	h.check(
-		titles.join(' | ') === DEFAULT.join(' | ') && titles.indexOf('—') === 3,
+		titles.join(' | ') === DEFAULT.join(' | ') && titles.indexOf('—') === 4,
 		`W8b: the default bar is the roster's default — same cells, same order, same well slot (${titles.join(' | ')})`
 	);
 	h.check(
@@ -594,10 +594,11 @@ h.run(async () => {
 	);
 	await openCustomize();
 	menu = await rows(A.page);
-	const OPTIONAL = ['Flow Code', 'Animation', 'UV editor', 'Shader editor', 'HUD editor'];
+	// 33 E1: Animation is a DEFAULT button now, so four views remain opt-in
+	const OPTIONAL = ['Flow Code', 'UV editor', 'Shader editor', 'HUD editor'];
 	h.check(
 		OPTIONAL.every((t) => menu.some((r) => r.label === t)),
-		`the five remaining dock views are LISTED in Customize (${menu.map((r) => r.label).join(' | ')})`
+		`the four remaining dock views are LISTED in Customize (${menu.map((r) => r.label).join(' | ')})`
 	);
 	h.check(
 		OPTIONAL.every((t) => !menu.find((r) => r.label === t)?.checked),
@@ -609,7 +610,7 @@ h.run(async () => {
 	);
 	h.check(
 		await A.page.evaluate(() =>
-			['Flow Code', 'Animation', 'UV editor', 'Shader editor', 'HUD editor'].every(
+			['Flow Code', 'UV editor', 'Shader editor', 'HUD editor'].every(
 				(t) => document.querySelector(`[role="menu"] button[aria-label="Move ${t} up"]`)?.disabled === true
 			)
 		),
@@ -624,7 +625,7 @@ h.run(async () => {
 	);
 	h.check(
 		await A.page.evaluate(
-			() => document.querySelector('[role="menu"] button[aria-label="Move Interact mode (I) down"]')?.disabled === true
+			() => document.querySelector('[role="menu"] button[aria-label="Move Animation down"]')?.disabled === true
 		),
 		'▼ is refused on the last row'
 	);
@@ -721,37 +722,37 @@ h.run(async () => {
 
 	// ---- OPTIONAL VIEWS BECOME REAL BUTTONS -----------------------------------------
 	await openCustomize();
-	await pick(A.page, 'Animation');
+	await pick(A.page, 'Flow Code');
 	titles = await barTitles(A.page);
 	h.check(
-		titles.includes('Animation') && titles.length === 9,
-		`enabling Animation put it on the bar (${titles.join(' | ')})`
+		titles.includes('Flow Code') && titles.length === 10,
+		`enabling Flow Code put it on the bar (${titles.join(' | ')})`
 	);
 	h.check(
-		titles.join(' | ') === [...DEFAULT, 'Animation'].join(' | '),
+		titles.join(' | ') === [...DEFAULT, 'Flow Code'].join(' | '),
 		'...appended at the right end, every existing cell untouched'
 	);
 	await closeMenus(A.page);
 	await h.freshReload(A);
 	await A.page.waitForTimeout(700);
 	h.check(
-		(await barTitles(A.page)).includes('Animation'),
+		(await barTitles(A.page)).includes('Flow Code'),
 		'the optional button SURVIVES a reload (loadLayout used to filter it straight back out)'
 	);
 	// and it is a real button: pressing it runs the same decision tree the Node editor
 	// button and the N key run, which is the whole reason it is worth having
-	await A.page.locator('#controls-pill p[title="Animation"]').click();
-	await h.eventually(dockKey, (k) => k === 'animation', 'pressing it opens the Animation dock tab');
-	await A.page.locator('#controls-pill p[title="Animation"]').click();
+	await A.page.locator('#controls-pill p[title="Flow Code"]').click();
+	await h.eventually(dockKey, (k) => k === 'flowcode', 'pressing it opens the Flow Code dock tab');
+	await A.page.locator('#controls-pill p[title="Flow Code"]').click();
 	await h.eventually(
-		() => A.page.evaluate(() => !!document.querySelector('#controls-pill p[title="Animation"] .text-primary-500')),
+		() => A.page.evaluate(() => !!document.querySelector('#controls-pill p[title="Flow Code"] .text-primary-500')),
 		(v) => v === false,
 		'...and pressing it again hides the panel, which the "+" list can never do'
 	);
 	await openCustomize();
-	await pick(A.page, 'Animation');
+	await pick(A.page, 'Flow Code');
 	h.check(
-		!(await barTitles(A.page)).includes('Animation'),
+		!(await barTitles(A.page)).includes('Flow Code'),
 		'disabling it takes it off the bar again'
 	);
 	await closeMenus(A.page);
diff --git a/tests/e2e/editor-ui-33.test.cjs b/tests/e2e/editor-ui-33.test.cjs
new file mode 100644
index 00000000..d2a5c612
--- /dev/null
+++ b/tests/e2e/editor-ui-33.test.cjs
@@ -0,0 +1,248 @@
+// Roadmap 33 (lane 33-editor-ui) — the toolbar and the perf counter, from the user's
+// 2026-10-01 feedback on the 1.18 preview:
+//   E1 "By default Interact mode button should be after move/rotate/scale buttons, then play
+//      button, then object list, node selector, explorer and animation" — the DEFAULT order;
+//      a stored record that is still a shipped default migrates, a custom bar wins as saved
+//   E2 "Interact mode button when clicked shows red border" — the only <button> cell took
+//      focus on click and wore classActive's focus ring; it must look like every other cell
+//   E3 "When I hover on interact mode button and it is near Play I see near play button not
+//      highlighted area (two small corners)" — the well's hover paint only listened to a
+//      <p> neighbour. Measured on real PIXELS at the corners the FAB circle leaves uncovered
+//   Q1 "Show amount of fps and draw calls within quest as an option in settings (150 is limit
+//      for quest)" — Settings ▸ Interface ▸ Viewport, the desktop corner counter in ANY mode,
+//      the VR strip (driven with a synthetic head, the vr-game-panel way), calls amber > 120
+//      and red > 150, and the XR frame source feeding the draw-call sampler
+const h = require('./helpers.cjs');
+
+const barTitles = (page) =>
+	page.evaluate(() =>
+		[...(document.querySelector('#controls-pill')?.firstElementChild?.children ?? [])].map(
+			(el) => el.getAttribute('title') ?? '—'
+		)
+	);
+const read = (page, path) =>
+	page.evaluate((path) => {
+		let o = window.__stores;
+		for (const k of path.split('.')) o = o[k];
+		let v;
+		o.subscribe((x) => (v = x))();
+		return v;
+	}, path);
+
+/** one composited pixel, decoded in the page (only four numbers cross the bridge) */
+async function pixelAt(page, x, y) {
+	const buf = await page.screenshot({ clip: { x: Math.round(x), y: Math.round(y), width: 1, height: 1 } });
+	return page.evaluate(async (b64) => {
+		const blob = await (await fetch('data:image/png;base64,' + b64)).blob();
+		const img = await createImageBitmap(blob);
+		const c = new OffscreenCanvas(1, 1);
+		const g = c.getContext('2d');
+		g.drawImage(img, 0, 0);
+		return [...g.getImageData(0, 0, 1, 1).data].slice(0, 3);
+	}, buf.toString('base64'));
+}
+const near = (a, b, tol = 6) => a.every((v, i) => Math.abs(v - b[i]) <= tol);
+
+h.run(async () => {
+	const browser = await h.launch();
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1280, height: 720 } } });
+	const page = A.page;
+	await page.waitForTimeout(800);
+
+	// ================================================================ E1 the default order
+	const DEFAULT = ['Move (1)', 'Rotate (2)', 'Scale (3)', 'Interact mode (I)', '—', 'Object list (O)', 'Node editor (N)', 'Explorer', 'Animation'];
+	let titles = await barTitles(page);
+	h.check(titles.join(' | ') === DEFAULT.join(' | '), 'E1.1 a fresh profile: transforms, Interact, Play, list, nodes, Explorer, Animation (' + titles.join(' | ') + ')');
+	h.check((await page.evaluate(() => localStorage.getItem('controlsLayout'))) === null, 'E1.2 and writes nothing');
+
+	// a record that is still the 1.17/1.18 default (nobody customized it) migrates, keeping
+	// where the bar sits and whether it is collapsed
+	await page.evaluate(() =>
+		localStorage.setItem('controlsLayout', JSON.stringify({ order: ['move', 'rotate', 'scale', 'objects', 'flow', 'explorer', 'mode'], hidden: [], spacerIndex: 3, collapsed: false, posX: 0.3 }))
+	);
+	await h.freshReload(A);
+	await page.waitForTimeout(700);
+	titles = await barTitles(page);
+	h.check(titles.join(' | ') === DEFAULT.join(' | '), 'E1.3 a stored OLD DEFAULT migrates to the new order (' + titles.join(' | ') + ')');
+	const pos = await page.evaluate(() => {
+		const nav = document.getElementById('controls-pill');
+		const r = nav.getBoundingClientRect();
+		return { centre: r.x + r.width / 2, vw: innerWidth };
+	});
+	h.check(pos.centre < pos.vw / 2 - 20, 'E1.4 ...and keeps where the bar was parked (posX 0.3, centre ' + Math.round(pos.centre) + ' of ' + pos.vw + ')');
+	// the pre-30 default (no Interact at all) migrates too
+	await page.evaluate(() => localStorage.setItem('controlsLayout', JSON.stringify({ order: ['move', 'rotate', 'scale', 'objects', 'flow', 'explorer'], hidden: [], spacerIndex: 3, collapsed: false })));
+	await h.freshReload(A);
+	await page.waitForTimeout(700);
+	h.check((await barTitles(page)).join(' | ') === DEFAULT.join(' | '), 'E1.5 the pre-30 default migrates as well');
+	// a CUSTOM bar wins as saved: Rotate hidden, the well moved — and Animation (opt-in
+	// before) is NOT forced onto a bar that never chose it
+	await page.evaluate(() =>
+		localStorage.setItem('controlsLayout', JSON.stringify({ order: ['move', 'rotate', 'scale', 'objects', 'flow', 'explorer', 'mode'], hidden: ['rotate'], spacerIndex: 2, collapsed: false, posX: null }))
+	);
+	await h.freshReload(A);
+	await page.waitForTimeout(700);
+	titles = await barTitles(page);
+	h.check(
+		titles.join(' | ') === ['Move (1)', 'Scale (3)', '—', 'Object list (O)', 'Node editor (N)', 'Explorer', 'Interact mode (I)'].join(' | '),
+		'E1.6 a CUSTOM bar keeps its own order, and gains no Animation (' + titles.join(' | ') + ')'
+	);
+	await page.evaluate(() => localStorage.removeItem('controlsLayout'));
+	await h.freshReload(A);
+	await page.waitForTimeout(700);
+	h.check((await barTitles(page)).join(' | ') === DEFAULT.join(' | '), 'premise: back on the default bar');
+	// Animation is a working default button: it opens the Animation dock tab
+	await page.locator('#controls-pill [title="Animation"]').click();
+	await h.eventually(() => read(page, 'bottomDock.bottomDockActive'), (k) => k === 'animation', 'E1.7 the default Animation button opens the Animation tab');
+	await page.locator('#controls-pill [title="Animation"]').click();
+	await page.waitForTimeout(300);
+
+	// ================================================================ E2 no red ring on click
+	const cell = page.locator('#editor-mode-toggle');
+	const box = await cell.boundingBox();
+	await page.mouse.move(box.x + box.width / 2, box.y - 120);
+	await page.waitForTimeout(200);
+	// a pixel just inside the cell's left edge, mid-height: the ring (box-shadow) would paint it
+	const edge = { x: box.x + 2, y: box.y + box.height / 2 };
+	const edgeBefore = await pixelAt(page, edge.x, edge.y);
+	await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+	await page.waitForTimeout(200);
+	h.check((await read(page, 'editorMode')) === 'interact', 'premise: the click switched to Interact');
+	h.check(await page.evaluate(() => document.activeElement?.id === 'editor-mode-toggle'), 'premise: the <button> holds focus after the click (the state that drew the ring)');
+	await page.mouse.move(box.x + box.width / 2, box.y - 120);
+	await page.waitForTimeout(250);
+	const shadow = await page.evaluate(() => getComputedStyle(document.getElementById('editor-mode-toggle')).boxShadow);
+	h.check(!/rgb/.test(shadow) || /0px 0px 0px 0px/.test(shadow.replace(/rgba?\([^)]*\)/g, '')), 'E2.1 a clicked Interact carries no focus ring (box-shadow ' + shadow + ')');
+	const edgeAfter = await pixelAt(page, edge.x, edge.y);
+	h.check(near(edgeBefore, edgeAfter, 4), 'E2.2 and its edge pixel is unchanged by the click (' + edgeBefore + ' -> ' + edgeAfter + ')');
+	h.check((await page.evaluate(() => getComputedStyle(document.getElementById('editor-mode-toggle')).outlineStyle)) === 'none', 'E2.3 no outline either');
+	h.check((await cell.getAttribute('aria-pressed')) === 'true', 'E2.4 it still says it is pressed (aria-pressed)');
+	await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+	await page.waitForTimeout(200);
+	h.check((await read(page, 'editorMode')) === 'edit', 'premise: back to Edit');
+	await page.evaluate(() => document.activeElement?.blur?.());
+
+	// ================================================================ E3 the corners by Play
+	const geo = await page.evaluate(() => {
+		const fab = document.getElementById('play-button');
+		const well = fab.parentElement;
+		const w = well.getBoundingClientRect();
+		const left = well.previousElementSibling.getBoundingClientRect();
+		const right = well.nextElementSibling.getBoundingClientRect();
+		return { w: { x: w.x, y: w.y, width: w.width, height: w.height }, leftTitle: well.previousElementSibling.getAttribute('title'), rightTitle: well.nextElementSibling.getAttribute('title'), left: { x: left.x, y: left.y, width: left.width, height: left.height }, right: { x: right.x, y: right.y, width: right.width, height: right.height } };
+	});
+	h.check(geo.leftTitle === 'Interact mode (I)', 'premise: Interact is the well\'s left neighbour (' + geo.leftTitle + ')');
+	// the corners of the well the 50 px circle does not cover: 1.5 px in from each corner
+	const cornerTL = { x: geo.w.x + 1.5, y: geo.w.y + 1.5 };
+	const cornerBL = { x: geo.w.x + 1.5, y: geo.w.y + geo.w.height - 2.5 };
+	const covered = await page.evaluate(([a, b]) => [a, b].map((p) => document.elementFromPoint(p.x, p.y)?.closest('#play-button') ? 'fab' : 'well'), [cornerTL, cornerBL]);
+	h.check(covered.every((c) => c === 'well'), 'premise: the probed corners are well, not FAB (' + covered + ')');
+	const pillBg = await pixelAt(page, cornerTL.x, cornerTL.y);
+	await page.mouse.move(geo.left.x + geo.left.width / 2, geo.left.y + geo.left.height / 2);
+	await page.waitForTimeout(250);
+	const hoverBg = await pixelAt(page, geo.left.x + 3, geo.left.y + geo.left.height / 2);
+	h.check(!near(hoverBg, pillBg, 10), 'premise: hovering Interact paints it (' + pillBg + ' -> ' + hoverBg + ')');
+	const tl = await pixelAt(page, cornerTL.x, cornerTL.y);
+	const bl = await pixelAt(page, cornerBL.x, cornerBL.y);
+	h.check(near(tl, hoverBg, 8), 'E3.1 the top corner beside Play takes the hover colour (' + tl + ' vs ' + hoverBg + ')');
+	h.check(near(bl, hoverBg, 8), 'E3.2 and the bottom corner (' + bl + ' vs ' + hoverBg + ')');
+	// the right half answers the right neighbour, the same rule (a <p> there)
+	await page.mouse.move(geo.right.x + geo.right.width / 2, geo.right.y + geo.right.height / 2);
+	await page.waitForTimeout(250);
+	const hoverR = await pixelAt(page, geo.right.x + geo.right.width - 3, geo.right.y + geo.right.height / 2);
+	const tr = await pixelAt(page, geo.w.x + geo.w.width - 2.5, geo.w.y + 1.5);
+	h.check(near(tr, hoverR, 8), 'E3.3 the right-hand corner follows Object list as before (' + tr + ' vs ' + hoverR + ')');
+	const tlNow = await pixelAt(page, cornerTL.x, cornerTL.y);
+	h.check(near(tlNow, pillBg, 8), 'E3.4 and the left corner is NOT painted by the right neighbour (' + tlNow + ')');
+	await page.mouse.move(640, 200);
+
+	// ================================================================ Q1 FPS + draw calls
+	h.check(!(await page.locator('#game-fps-counter').isVisible()), 'Q1.1 off by default');
+	await page.evaluate(() => {
+		window.__stores.settingsSection.set('interface');
+		window.__stores.settingsOpen.set(true);
+	});
+	const toggle = page.locator('#show-perf-stats');
+	await toggle.waitFor({ state: 'attached', timeout: 5000 });
+	await toggle.scrollIntoViewIfNeeded();
+	await toggle.click({ force: true });
+	await page.waitForTimeout(400);
+	h.check((await read(page, 'gameKit.fpsMeter.perfStatsShown')) === true, 'Q1.2 the Settings toggle turns it on');
+	await page.evaluate(() => window.__stores.settingsOpen.set(false));
+	await page.waitForTimeout(1300);
+	h.check((await read(page, 'editorMode')) === 'edit' && (await read(page, 'isLocked')) !== true, 'premise: in the EDITOR, not playing');
+	h.check(await page.locator('#game-fps-counter').isVisible(), 'Q1.3 the counter shows in the editor (app-wide, not only in a game)');
+	const text = ((await page.locator('#game-fps-counter').textContent()) ?? '').replace(/\s+/g, ' ').trim();
+	h.check(/\d+ fps/.test(text) && /ms/.test(text) && /calls/.test(text) && /tris/.test(text), 'Q1.4 fps, frame ms, draw calls and triangles (' + text + ')');
+	// the budget colours, through the real reading store
+	const tierAt = async (calls) => {
+		await page.evaluate((calls) => window.__stores.gameKit.fpsMeter.fpsReading.set({ fps: 72, ms: 13.9, calls, tris: 120000, source: 'desktop' }), calls);
+		await page.waitForTimeout(60);
+		return page.evaluate(() => {
+			const el = document.getElementById('fps-calls');
+			return { tier: el?.dataset.tier, color: el ? getComputedStyle(el).color : null };
+		});
+	};
+	const ok = await tierAt(98);
+	const warn = await tierAt(131);
+	const over = await tierAt(163);
+	h.check(ok.tier === 'ok' && warn.tier === 'warn' && over.tier === 'over', 'Q1.5 98 / 131 / 163 calls read ok / warn / over');
+	h.check(warn.color === 'rgb(251, 191, 36)', 'Q1.6 past 120 the calls are AMBER (' + warn.color + ')');
+	h.check(over.color === 'rgb(248, 113, 113)', 'Q1.7 past 150 they are RED (' + over.color + ')');
+	h.check(ok.color !== warn.color && ok.color !== over.color, 'Q1.8 and in budget they are neither (' + ok.color + ')');
+	// it persists (LOCAL)
+	await h.freshReload(A);
+	await page.waitForTimeout(1300);
+	h.check(await page.locator('#game-fps-counter').isVisible(), 'Q1.9 the preference survives a reload');
+
+	// ---- the headset: the strip, every mode, through the same reading
+	const strip = await page.evaluate(() => {
+		const s = window.__stores;
+		const THREE = s.THREE;
+		const k = s.gameKit;
+		k.fpsMeter.fpsReading.set({ fps: 72, ms: 13.9, calls: 163, tris: 248000, source: 'xr' });
+		const head = { position: new THREE.Vector3(0, 1.6, 0), quaternion: new THREE.Quaternion() };
+		k.vrPerfStrip.vrPerfStripFrame(head);
+		const on = k.vrPerfStrip.vrPerfStripDebug();
+		let scene;
+		s.globalScene.subscribe((v) => (scene = v))();
+		const mesh = scene.getObjectByName('vr-perf-strip');
+		const p = mesh ? mesh.position.toArray().map((n) => Math.round(n * 100) / 100) : null;
+		k.fpsMeter.fpsReading.set({ fps: 72, ms: 13.9, calls: 98, tris: 248000, source: 'xr' });
+		k.vrPerfStrip.vrPerfStripFrame(head);
+		const inBudget = k.vrPerfStrip.vrPerfStripDebug().segments;
+		k.fpsMeter.perfStatsShown.set(false);
+		k.vrPerfStrip.vrPerfStripFrame(head);
+		const off = k.vrPerfStrip.vrPerfStripDebug().visible;
+		k.fpsMeter.perfStatsShown.set(true);
+		k.vrPerfStrip.vrPerfStripFrame(null);
+		const notPresenting = k.vrPerfStrip.vrPerfStripDebug().visible;
+		return { on, p, inBudget, off, notPresenting, mode: (() => { let m; s.editorMode.subscribe((v) => (m = v))(); return m; })() };
+	});
+	h.check(strip.on.visible && strip.on.parent === 'Scene', 'Q1.10 in a headset the strip shows — in EDIT too (' + strip.mode + ')');
+	h.check(strip.p && strip.p[1] > 1.9 && strip.p[2] < -1, 'Q1.11 ...head-locked, ahead and above the gaze (' + strip.p + ')');
+	const callSeg = strip.on.segments.find((x) => /calls/.test(x.text));
+	h.check(strip.on.segments.map((x) => x.text).join(' · ') === '72 fps · 13.9 ms · 163 calls · 248k tris', 'Q1.12 the strip reads fps, ms, calls, tris (' + strip.on.segments.map((x) => x.text).join(' · ') + ')');
+	h.check(callSeg?.color === '#f87171', 'Q1.13 163 calls are drawn RED on the strip (' + callSeg?.color + ')');
+	h.check(strip.inBudget.find((x) => /calls/.test(x.text))?.color === '#d1d5db', 'Q1.14 98 calls are drawn plain');
+	h.check(strip.off === false, 'Q1.15 the Settings toggle takes it down in the headset too');
+	h.check(strip.notPresenting === false, 'Q1.16 and nothing shows outside a session');
+
+	// ---- the XR frame source feeds the draw-call sampler (the window rAF stops in a headset)
+	const xr = await page.evaluate(async () => {
+		const s = window.__stores;
+		let m0;
+		s.sceneBudget.sceneMetrics.subscribe((v) => (m0 = v))();
+		const before = m0.at;
+		// XR frames timestamped well past the window loop's last tick = a stalled window loop
+		const t0 = performance.now() + 60000;
+		for (let i = 0; i < 50; i++) s.gameKit.fpsMeter.noteXrFrame(t0 + i * (1000 / 72));
+		let m1;
+		s.sceneBudget.sceneMetrics.subscribe((v) => (m1 = v))();
+		return { sampled: m1.at > before, calls: m1.calls };
+	});
+	h.check(xr.sampled, 'Q1.17 XR frames alone drive a fresh draw-call sample (calls ' + xr.calls + ')');
+	await page.evaluate(() => window.__stores.gameKit.fpsMeter.perfStatsShown.set(false));
+
+	await h.finish(browser);
+});
diff --git a/tests/e2e/vr-grips-by-mode.test.cjs b/tests/e2e/vr-grips-by-mode.test.cjs
index 108026cb..c974e838 100644
--- a/tests/e2e/vr-grips-by-mode.test.cjs
+++ b/tests/e2e/vr-grips-by-mode.test.cjs
@@ -86,6 +86,13 @@ h.run(async () => {
 	s = await state(A.page);
 	h.check(s.grab === null, `Edit: a grip on a wall does not hold the wall (grab ${s.grab})`);
 	h.check(s.worldGrab, 'Edit: two grips on scenery start the two-grip WORLD grab');
+	// 33 E4: and the headset says, once, how the wall WOULD move
+	const hint = await A.page.evaluate(() => {
+		let v;
+		window.__stores.gameKit.gameAnnounce.gameAnnouncement.subscribe((x) => (v = x))();
+		return v;
+	});
+	h.check(hint?.text === 'Grip moves the world' && /select it with the trigger/.test(hint?.sub ?? ''), `E4: a one-time hint names select-then-grip (${hint?.text} / ${hint?.sub})`);
 	// spread the hands: the world scales up
 	await xr.pose(A.page, 'left', [-0.6, 1.6, 0]);
 	await xr.pose(A.page, 'right', [0.6, 1.6, 0]);
@@ -123,6 +130,36 @@ h.run(async () => {
 	if (undoBefore !== null) h.check(s.undo === undoBefore + 1, `Edit: the move is one undo entry (${undoBefore} -> ${s.undo})`);
 	await A.page.evaluate(() => window.__stores.objectActions.deselectObject());
 
+	// ---- 3b. EDIT: a SELECTED wall is held (33 E4) ------------------------------------------------
+	// "not all objects positions can be moved in edit mode when in game": scenery was held by
+	// nothing, so in a game no wall/floor/arena could be moved with a grip. Select it first (the
+	// trigger) and the grip holds it like any object; unselected it is still the world (1 and 2).
+	await aimWall();
+	await A.page.evaluate((uuid) => window.__stores.objectActions.selectObject(uuid), ids.wall);
+	await A.page.waitForTimeout(150);
+	const wallSelBefore = await posOf(A.page, ids.wall);
+	await grip(A.page, 'right', true);
+	s = await state(A.page);
+	h.check(s.grab === ids.wall && !s.worldGrab && !s.worldPan, `E4: Edit, a grip on the SELECTED wall holds the wall (grab ${s.grab})`);
+	await xr.pose(A.page, 'right', [0.8, 1.6, 0]);
+	await A.page.waitForTimeout(250);
+	await grip(A.page, 'right', false);
+	const wallSelAfter = await posOf(A.page, ids.wall);
+	h.check(Math.abs(wallSelAfter[0] - wallSelBefore[0] - 0.5) < 0.06, `E4: ...and moves with the hand (x ${wallSelBefore[0].toFixed(2)} -> ${wallSelAfter[0].toFixed(2)})`);
+	s = await state(A.page);
+	h.check(Math.abs(s.rigScale - 1) < 1e-6 && s.rigPos.every((v) => Math.abs(v) < 1e-6), 'E4: ...and the world stayed put');
+	// put the fixture back for the sections below
+	await A.page.evaluate(({ uuid, pos }) => {
+		const s = window.__stores;
+		let g;
+		s.objectsGroup.subscribe((x) => (g = x))();
+		const wall = g.getObjectByProperty('uuid', uuid);
+		wall.position.fromArray(pos);
+		wall.updateMatrixWorld(true);
+		s.objectActions.deselectObject();
+	}, { uuid: ids.wall, pos: wallSelBefore });
+	await aimWall();
+
 	// ---- 4. INTERACT: scenery and air do nothing — the world never moves ------------------------
 	await A.page.evaluate(() => window.__stores.objectActions.setEditorMode('interact'));
 	await aimWall();
diff --git a/tests/unit/fpsMeter.test.js b/tests/unit/fpsMeter.test.js
new file mode 100644
index 00000000..ee914f44
--- /dev/null
+++ b/tests/unit/fpsMeter.test.js
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { callsTier, perfParts, CALLS_WARN, CALLS_LIMIT } from '../../src/lib/fpsMeter.js';
+
+// 33 Q1: the draw-call budget on the counter — "150 is limit for quest". Amber past 120,
+// red past 150; the desktop counter and the VR strip both read `callsTier`.
+describe('callsTier', () => {
+	it('the thresholds are the Quest budget', () => {
+		expect(CALLS_WARN).toBe(120);
+		expect(CALLS_LIMIT).toBe(150);
+	});
+	it('ok up to 120, amber past it, red past 150 (both bounds inclusive of the lower tier)', () => {
+		expect(callsTier(0)).toBe('ok');
+		expect(callsTier(120)).toBe('ok');
+		expect(callsTier(121)).toBe('warn');
+		expect(callsTier(150)).toBe('warn');
+		expect(callsTier(151)).toBe('over');
+		expect(callsTier(900)).toBe('over');
+	});
+	it('nothing measured is no tier, not "ok"', () => {
+		expect(callsTier(null)).toBe(null);
+		expect(callsTier(undefined)).toBe(null);
+		expect(callsTier(NaN)).toBe(null);
+	});
+});
+
+describe('perfParts', () => {
+	it('a reading becomes the four parts the counter draws, with the tier', () => {
+		const p = perfParts({ fps: 72, ms: 13.9, calls: 163, tris: 248000, source: 'xr' });
+		expect(p).toEqual({ fps: '72 fps', ms: '13.9 ms', calls: '163 calls', tris: '248k tris', tier: 'over' });
+	});
+	it('an empty reading has no parts beyond the placeholder', () => {
+		const p = perfParts({ fps: null, ms: null, calls: null, tris: null, source: null });
+		expect(p).toEqual({ fps: '— fps', ms: null, calls: null, tris: null, tier: null });
+	});
+});
diff --git a/tests/unit/vrGrip.test.js b/tests/unit/vrGrip.test.js
index 3d127c82..d54eea16 100644
--- a/tests/unit/vrGrip.test.js
+++ b/tests/unit/vrGrip.test.js
@@ -51,6 +51,19 @@ describe('pickGripTarget', () => {
 	it('Interact: only a grabbable body is taken, through scenery', () => {
 		expect(pickGripTarget([wall, ball], 'interact')).toBe(1);
 	});
+	// 33 E4: "not all objects positions can be moved in edit mode when in game" — a wall,
+	// a floor or an arena was held by NOTHING. Selected, it is held in Edit like any object.
+	it('Edit: SELECTED scenery is held (select-then-grab); unselected still passes through', () => {
+		const selectedWall = { scenery: true, grabbable: false, selected: true };
+		expect(pickGripTarget([selectedWall, ball], 'edit')).toBe(0);
+		expect(pickGripTarget([wall, selectedWall], 'edit')).toBe(1);
+		expect(pickGripTarget([wall, ball], 'edit')).toBe(1);
+	});
+	it('Interact: selection never makes scenery holdable (a player cannot pick up the room)', () => {
+		const selectedWall = { scenery: true, grabbable: false, selected: true };
+		expect(pickGripTarget([selectedWall, ball], 'interact')).toBe(1);
+		expect(pickGripTarget([selectedWall], 'interact')).toBe(-1);
+	});
 	it('Interact: a non-grabbable object in front blocks the grab', () => {
 		expect(pickGripTarget([podium, ball], 'interact')).toBe(-1);
 		expect(pickGripTarget([wall, podium], 'interact')).toBe(-1);

From c561f24e9f847b857f2a2ec2389eb8f4f9e074af Mon Sep 17 00:00:00 2001
From: AlexZ005 <alexz005.info@gmail.com>
Date: Thu, 1 Oct 2026 23:50:18 +0300
Subject: [PATCH 2/3] [fix] edit in a running game: a released body stays where
 it was put (E4) + suite fixes

- physics.js: in EDIT, in a GAME scene (state-bound HUD screen or play.simOnPlay), releaseBody
  PARKS the body (hold 'edit': kinematic at its object pose, skipped by the deviation detector)
  instead of handing it back to the sim with a throw; leaving Edit (Interact or Play) releases
  every parked body at rest. A plain physics playground keeps the P-A editor throw.
  Measured before: Towers 10/44 pieces flung ~47 m, Stars Room 26/49 drifting, the football
  rolling away once a game ran and the editor went back to Edit.
- new suite edit-move-games: the seven games, every object (cap 60) dragged through the gizmo
  events, fresh AND game-running; parked bodies released on leaving Edit; Interact release not
  parked (counterfactual). Waves' walking enemies are module-positioned mid-wave (noted, F5).
- editor-ui-33: E3 corner pixels chosen outside the FAB and sampled un-hovered; Q1 toggle
  pressed as an element click. controls-roster: the walk needs a third press past Interact.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/lib/physics.js                 |  76 +++++++++++-
 tests/e2e/controls-roster.test.cjs |  11 +-
 tests/e2e/edit-move-games.test.cjs | 186 +++++++++++++++++++++++++++++
 tests/e2e/editor-ui-33.test.cjs    |  52 ++++++--
 4 files changed, 309 insertions(+), 16 deletions(-)
 create mode 100644 tests/e2e/edit-move-games.test.cjs

diff --git a/src/lib/physics.js b/src/lib/physics.js
index 14f0268b..36b4305e 100644
--- a/src/lib/physics.js
+++ b/src/lib/physics.js
@@ -4,7 +4,7 @@ import { createStreakWatch, PHYSICS_SLOW_MS, PHYSICS_SLOW_STEPS } from './overlo
 import { registerMetricSource } from './sceneBudget';
 import { writable, get } from 'svelte/store';
 import { flowGraphs, allNodes, allEdges, SCENE_GRAPH } from '../stores/flowStore';
-import { objectsGroup, lockedObjects, selectedObject, selectedObjects, pokeScene } from '../stores/sceneStore';
+import { objectsGroup, lockedObjects, selectedObject, selectedObjects, pokeScene, editorMode, isLocked } from '../stores/sceneStore';
 import { peers, showToast, openSceneSection } from '../stores/appStore';
 import { recordTransformSet, recordEntry } from './history';
 import {
@@ -25,8 +25,10 @@ import {
 	scenePhysicsGround,
 	scenePhysicsBounds,
 	scenePhysicsDefaults,
-	sceneKnock
+	sceneKnock,
+	scenePlay
 } from './scenePhysics';
+import { hudDocs, isGameHud } from './hudDocs'; // 33 E4: is this scene a game (a leaf)
 import { velocityFromSamples, clampThrow, MAX_LINVEL, MAX_ANGVEL } from './throwVelocity';
 // 29-F: the lower-id-keeps-the-world rule, as a leaf that imports nothing — the whole
 // decision is a pure function of four facts, so its truth table is a vitest unit.
@@ -69,7 +71,7 @@ export const remoteSimulating = writable(null);
 /** @type {any} */ let RAPIER = null;
 /** @type {any} */ let world = null;
 /** @typedef {{object: any, body: any, offset: THREE.Vector3, initialQuat: THREE.Quaternion,
- *   mode: 'dynamic'|'kinematic', hull: boolean, hold: 'user'|'external'|null, holdUntil: number,
+ *   mode: 'dynamic'|'kinematic', hull: boolean, hold: 'user'|'external'|'edit'|null, holdUntil: number,
  *   holdPeer?: string | null,
  *   samples: {t: number, pos: THREE.Vector3, quat: THREE.Quaternion}[],
  *   lastWritten: {pos: THREE.Vector3, quat: THREE.Quaternion},
@@ -1193,10 +1195,63 @@ export function holdBody(uuid) {
 export function releaseBody(uuid, velocity = null) {
 	const entry = bodies.find((e) => e.object.uuid === uuid && e.hold === 'user');
 	if (!entry || !world) return false;
+	// 33 E4: in EDIT a release PARKS the body where it was put (see editParking)
+	if (editParking()) {
+		parkHold(entry);
+		return true;
+	}
 	releaseHold(entry, velocity);
 	return true;
 }
 
+// 33 E4 — "not all objects positions can be moved in edit mode when in game". A game's
+// simulation keeps running after you leave Play (maybeSimOnPlay starts, never stops), so in
+// EDIT every dynamic body was handed back to physics the moment the gizmo or a grip let go:
+// MEASURED across the seven games, Towers' pieces flung ~47 m off the map, Stars Room's stars
+// and planets drifted away, the football rolled off — 47 objects in four games that could not
+// be put anywhere. A game may re-assert positions only in Interact/Play, so in Edit a release
+// PARKS the body: it stays a kinematic at the pose it was put down at (hold 'edit' — the
+// write-back and the deviation detector both skip it, its kinematic target IS the object's
+// pose) until the editor leaves Edit, when every parked body is released with NO velocity and
+// physics takes it from where it was left. Scoped to a GAME scene (a state-bound HUD screen, or
+// a play block that runs the sim on Play): a plain physics playground keeps P-A's editor throw
+// — flinging a crate with the gizmo is that scene's whole point.
+
+/** is a release in this mode a placement rather than a throw? */
+function editParking() {
+	if (get(editorMode) !== 'edit' || get(isLocked) === true) return false;
+	return get(scenePlay)?.simOnPlay === true || isGameHud(get(hudDocs));
+}
+
+/** @param {BodyEntry} entry */
+function parkHold(entry) {
+	entry.hold = 'edit';
+	entry.holdUntil = 0;
+	entry.holdPeer = null;
+	entry.samples = [];
+	entry.body.setLinvel({ x: 0, y: 0, z: 0 }, true);
+	entry.body.setAngvel({ x: 0, y: 0, z: 0 }, true);
+	entry.lastWritten.pos.copy(entry.object.position);
+	entry.lastWritten.quat.copy(entry.object.quaternion);
+}
+
+/** Leaving Edit: every parked body goes back to physics, at rest, from where it was put.
+ * Exported for the suite. @returns {number} how many were released */
+export function releaseParkedBodies() {
+	let n = 0;
+	for (const entry of bodies) {
+		if (entry.hold !== 'edit') continue;
+		releaseHold(entry, { linvel: [0, 0, 0], angvel: [0, 0, 0] });
+		n++;
+	}
+	return n;
+}
+
+/** suites: the uuids parked right now */
+export function parkedBodies() {
+	return bodies.filter((e) => e.hold === 'edit').map((e) => e.object.uuid);
+}
+
 /**
  * An incoming peer `move` landed on a body mid-sim (peerHandler calls this after
  * moveGeometry applied the transform). A dynamic body becomes an EXTERNAL
@@ -1340,7 +1395,7 @@ export function applyHit(data) {
  * meets it at speed has hit it. 29-F: `held: !!entry.hold` folded the two together, so
  * the waves template's walkers could not be knocked on the one peer that steps the world.
  * @param {string} uuid
- * @returns {{linvel: number[], angvel: number[], held: boolean, hold: 'user'|'external'|null} | null}
+ * @returns {{linvel: number[], angvel: number[], held: boolean, hold: 'user'|'external'|'edit'|null} | null}
  */
 export function bodyVelocityOf(uuid) {
 	if (!world) return null;
@@ -1475,7 +1530,7 @@ function stepInner(now) {
 	// mechanism self-contained (the dev server can split module instances, so a
 	// hook called from peerHandler can land on a different physics instance).
 	bodies.forEach((entry) => {
-		if (entry.mode !== 'dynamic' || entry.hold === 'user') return;
+		if (entry.mode !== 'dynamic' || entry.hold === 'user' || entry.hold === 'edit') return;
 		const written = entry.lastWritten;
 		// component-wise compare — NOT quaternion dot: dot(q,q) = |q|^2, and
 		// rapier's f32 components leave the norm ~1e-9 off unit, which reads as
@@ -1989,3 +2044,14 @@ export function physicsDebug() {
 		bodyRot: entry.body?.rotation?.() ?? null
 	}));
 }
+
+// 33 E4: leaving Edit (to Interact, or into Play) hands every parked body back to physics.
+// Module-level and LAST: subscribe runs synchronously at eval, so `bodies` above must exist.
+let wasEditParking = false;
+function onModeChange() {
+	const now = editParking();
+	if (wasEditParking && !now) releaseParkedBodies();
+	wasEditParking = now;
+}
+editorMode.subscribe(onModeChange);
+isLocked.subscribe(onModeChange);
diff --git a/tests/e2e/controls-roster.test.cjs b/tests/e2e/controls-roster.test.cjs
index 0c88271e..d3152902 100644
--- a/tests/e2e/controls-roster.test.cjs
+++ b/tests/e2e/controls-roster.test.cjs
@@ -702,8 +702,15 @@ h.run(async () => {
 	);
 	titles = await barTitles(A.page);
 	h.check(
-		titles.indexOf('Move (1)') === 2 && titles.indexOf('—') === 1,
-		`a second press walked it one further, across the play well (${titles.join(' | ')})`
+		titles.indexOf('Move (1)') === 2 && titles.indexOf('—') === 3,
+		`a second press walked it one further, past Interact (${titles.join(' | ')})`
+	);
+	// 33 E1: Interact sits before the well now, so the THIRD press is the one that crosses it
+	await rowArrow(A.page, 'Move Move (1) down');
+	titles = await barTitles(A.page);
+	h.check(
+		titles.indexOf('Move (1)') === 3 && titles.indexOf('—') === 2,
+		`a third press walked it across the play well (${titles.join(' | ')})`
 	);
 	// the two controls must be DISTINGUISHABLE: `Icon`'s map is `MAP[name] ?? Box`, and
 	// `chevron-left`/`chevron-right` were in no map at all, so both reorder controls had
diff --git a/tests/e2e/edit-move-games.test.cjs b/tests/e2e/edit-move-games.test.cjs
new file mode 100644
index 00000000..2f8381be
--- /dev/null
+++ b/tests/e2e/edit-move-games.test.cjs
@@ -0,0 +1,186 @@
+// 33 E4 ACCEPTANCE — "For some reason not all objects positions can be moved in edit mode when
+// in game". The SEVEN Games-tab games, loaded from their REAL .tpscene files with their REAL
+// module zips. Every top-level object and its direct children are moved with the gizmo path
+// (TControls' own dragging-changed events, a frame between press and release) and must STAY
+// where they were put 1.5 s later:
+//   §A on a fresh load (nothing running) — this was already true, kept as the baseline
+//   §B with the GAME RUNNING (Interact, state playing, the sim on when the scene asks for it)
+//      and then Edit — what the user did. MEASURED before the fix: Towers 10/44 pieces flung
+//      ~47 m, Stars Room 26/49 drifting off, the football rolling away — a game's sim keeps
+//      running in Edit and the gizmo release handed every dynamic body back to it with a
+//      throw velocity. physics.js now PARKS a body released in Edit (hold 'edit') until the
+//      editor leaves Edit.
+//   §C leaving Edit releases every parked body, and a release in Interact still throws
+//      (the counterfactual: the park is an Edit rule, not "releases never move")
+// Waves' enemies WALKING during a wave are positioned by the module as a pure function of
+// time (determinism is its netcode) — module-owned while a wave runs, listed as a NOTE (filed
+// for the modules lane), never counted as a pass.
+//
+// Scenes: SHELL_SCENES_DIR=<dir with <slug>/scene.tpscene>, else the sibling scenes checkout's
+// games/<slug>/scene.tpscene. A game whose scene or zip is missing is SKIPPED (named).
+const h = require('./helpers.cjs');
+const fs = require('fs');
+const path = require('path');
+
+const SCENES_REPO = [path.resolve(__dirname, '../../../theprototype.app-scenes'), path.resolve(__dirname, '../../../scenes')].find((p) => fs.existsSync(p));
+const sceneOf = (slug) => {
+	const dir = process.env.SHELL_SCENES_DIR;
+	const p = dir ? path.join(dir, slug, 'scene.tpscene') : SCENES_REPO && path.join(SCENES_REPO, 'games', slug, 'scene.tpscene');
+	return p && fs.existsSync(p) ? p : null;
+};
+const GAMES = [
+	{ slug: 'towers', modules: [] },
+	{ slug: 'stars-room', modules: [] },
+	{ slug: 'football', modules: ['football'] },
+	{ slug: 'jam-room', modules: ['music-lab', 'music-fx'] },
+	{ slug: 'dungeon-realms', modules: ['dungeon', 'dungeon-realms'] },
+	{ slug: 'untangle', modules: ['untangle'] },
+	{ slug: 'waves', modules: ['health', 'waves'] }
+].filter((g) => !process.env.ONLY || process.env.ONLY.split(',').includes(g.slug));
+/** objects a module positions itself while its game runs (see the header) */
+const MODULE_OWNED_RUNNING = { waves: /^Enemy / };
+
+/** drag every top-level object (and its direct children) +0.5 x / +0.25 z through the gizmo
+ * events, wait, report what stayed. Runs in the page. */
+const moveAll = (page) =>
+	page.evaluate(async () => {
+		const s = window.__stores;
+		const g = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const group = g(s.objectsGroup);
+		const targets = [];
+		for (const o of group.children) {
+			targets.push(o);
+			for (const c of o.children) if (c.isMesh || c.isGroup) targets.push(c);
+		}
+		const rows = [];
+		for (const o of targets.slice(0, 60)) {
+			s.objectActions.selectObject(o.uuid);
+			const tc = g(s.TControls);
+			const attached = tc?.object === o;
+			const before = o.position.clone();
+			if (attached) {
+				tc.dispatchEvent({ type: 'dragging-changed', value: true });
+				o.position.x += 0.5;
+				o.position.z += 0.25;
+				o.updateMatrixWorld(true);
+				tc.dispatchEvent({ type: 'objectChange' });
+				await new Promise((r) => requestAnimationFrame(() => r()));
+				tc.dispatchEvent({ type: 'dragging-changed', value: false });
+			}
+			rows.push({ o, attached, before, phys: o.userData?.physics?.mode ?? null });
+		}
+		s.objectActions.applySelectionSet([]);
+		await new Promise((r) => setTimeout(r, 1500));
+		return rows.map((r) => ({
+			uuid: r.o.uuid,
+			name: r.o.name || r.o.type,
+			attached: r.attached,
+			phys: r.phys,
+			dx: Math.round((r.o.position.x - r.before.x) * 100) / 100,
+			dy: Math.round((r.o.position.y - r.before.y) * 100) / 100,
+			dz: Math.round((r.o.position.z - r.before.z) * 100) / 100
+		}));
+	});
+const stayed = (r) => r.attached && Math.abs(r.dx - 0.5) <= 0.02 && Math.abs(r.dz - 0.25) <= 0.02 && Math.abs(r.dy) <= 0.02;
+
+h.run(async () => {
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1280, height: 720 } } });
+	const page = A.page;
+	const installed = new Set();
+	for (const id of [...new Set(GAMES.flatMap((g) => g.modules))]) if (await h.installModule(A, id)) installed.add(id);
+	await page.evaluate(() => window.__stores.modulesOpen.set(false));
+	const read = (p) =>
+		page.evaluate((p) => {
+			let o = window.__stores;
+			for (const k of p.split('.')) o = o[k];
+			let v;
+			o.subscribe((x) => (v = x))();
+			return v;
+		}, p);
+	const load = async (file) => {
+		const bytes = Array.from(fs.readFileSync(file));
+		await page.evaluate(async (arr) => {
+			const s = window.__stores;
+			s.templatesModalOpen.set(false);
+			s.objectActions.setEditorMode('edit');
+			const payload = await s.sessions.readSessionZip(new Uint8Array(arr).buffer);
+			await s.sessions.applySession(payload, { backup: false });
+		}, bytes);
+		await page.waitForTimeout(3500);
+	};
+
+	let parkedSeen = 0;
+	for (const game of GAMES) {
+		const file = sceneOf(game.slug);
+		const missing = game.modules.filter((m) => !installed.has(m));
+		if (!file || missing.length) {
+			console.log('SKIP ' + game.slug + ': ' + (file ? 'no ' + missing.join(', ') + '.zip' : 'no scene.tpscene'));
+			continue;
+		}
+		console.log('\n=== ' + game.slug + ' ===');
+
+		// ---- §A fresh load, Edit
+		await load(file);
+		let rows = await moveAll(page);
+		let bad = rows.filter((r) => !stayed(r));
+		h.check(rows.length > 0 && bad.length === 0, `${game.slug} A: fresh load, all ${rows.length} objects move and stay (${bad.map((r) => r.name).slice(0, 6).join(', ') || 'none'} failed)`);
+
+		// ---- §B the game RUNNING, then Edit
+		await load(file);
+		const run = await page.evaluate(async () => {
+			const s = window.__stores;
+			const g = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+			s.objectActions.setEditorMode('interact');
+			s.gameState.setGameState('playing');
+			if (g(s.scenePhysics.scenePlay)?.simOnPlay && !g(s.physics.simulating)) await s.physics.toggleSimulation();
+			return { sim: g(s.physics.simulating) };
+		});
+		await page.waitForTimeout(3000);
+		await page.evaluate(() => window.__stores.objectActions.setEditorMode('edit'));
+		await page.waitForTimeout(300);
+		h.check((await read('editorMode')) === 'edit' && (await read('gameState.gameState'))?.state === 'playing', `premise ${game.slug} B: Edit while the game plays (sim ${run.sim})`);
+		rows = await moveAll(page);
+		const owned = MODULE_OWNED_RUNNING[game.slug];
+		const moduleOwned = rows.filter((r) => owned && owned.test(r.name) && !stayed(r));
+		const judged = rows.filter((r) => !moduleOwned.includes(r));
+		bad = judged.filter((r) => !stayed(r));
+		h.check(
+			judged.length > 0 && bad.length === 0,
+			`${game.slug} B: game running -> Edit, all ${judged.length} objects move and stay (${bad.map((r) => `${r.name} dx${r.dx} dy${r.dy}`).slice(0, 6).join(', ') || 'none'} failed)`
+		);
+		if (moduleOwned.length) console.log(`NOTE ${game.slug}: ${moduleOwned.length} walking enemies are module-positioned during a wave (modules lane) — ${moduleOwned.map((r) => r.name).slice(0, 4).join(', ')}`);
+		const dynamicMoved = judged.filter((r) => r.phys === 'dynamic');
+		if (run.sim && dynamicMoved.length) {
+			const parked = await page.evaluate(() => window.__stores.physics.parkedBodies());
+			parkedSeen += parked.length;
+			h.check(dynamicMoved.every((r) => parked.includes(r.uuid)), `${game.slug} B: every moved dynamic body is PARKED in Edit (${parked.length}/${dynamicMoved.length})`);
+
+			// ---- §C leaving Edit hands them back to physics; Interact still throws
+			const back = await page.evaluate(async (uuid) => {
+				const s = window.__stores;
+				s.objectActions.setEditorMode('interact');
+				await new Promise((r) => setTimeout(r, 50));
+				const afterLeave = s.physics.parkedBodies().length;
+				// the counterfactual: a hold released in INTERACT is not parked
+				const held = s.physics.holdBody(uuid);
+				const released = s.physics.releaseBody(uuid, { linvel: [0, 0, 0], angvel: [0, 0, 0] });
+				const parkedInInteract = s.physics.parkedBodies().includes(uuid);
+				s.objectActions.setEditorMode('edit');
+				return { afterLeave, held, released, parkedInInteract };
+			}, dynamicMoved[0].uuid);
+			h.check(back.afterLeave === 0, `${game.slug} C: leaving Edit releases every parked body (${back.afterLeave} left)`);
+			h.check(back.held && back.released && !back.parkedInInteract, `${game.slug} C: a release in Interact is NOT parked (the rule is Edit's)`);
+		}
+		await page.evaluate(() => {
+			const s = window.__stores;
+			let sim;
+			s.physics.simulating.subscribe((v) => (sim = v))();
+			if (sim) s.physics.stopSimulation({ reset: true });
+			s.gameState.resetGame?.();
+		});
+		await page.waitForTimeout(400);
+	}
+	if (GAMES.length > 1) h.check(parkedSeen > 0, `the park was exercised (${parkedSeen} bodies parked across the games)`);
+	await h.finish(browser);
+});
diff --git a/tests/e2e/editor-ui-33.test.cjs b/tests/e2e/editor-ui-33.test.cjs
index d2a5c612..8726df46 100644
--- a/tests/e2e/editor-ui-33.test.cjs
+++ b/tests/e2e/editor-ui-33.test.cjs
@@ -132,12 +132,45 @@ h.run(async () => {
 		return { w: { x: w.x, y: w.y, width: w.width, height: w.height }, leftTitle: well.previousElementSibling.getAttribute('title'), rightTitle: well.nextElementSibling.getAttribute('title'), left: { x: left.x, y: left.y, width: left.width, height: left.height }, right: { x: right.x, y: right.y, width: right.width, height: right.height } };
 	});
 	h.check(geo.leftTitle === 'Interact mode (I)', 'premise: Interact is the well\'s left neighbour (' + geo.leftTitle + ')');
-	// the corners of the well the 50 px circle does not cover: 1.5 px in from each corner
-	const cornerTL = { x: geo.w.x + 1.5, y: geo.w.y + 1.5 };
-	const cornerBL = { x: geo.w.x + 1.5, y: geo.w.y + geo.w.height - 2.5 };
-	const covered = await page.evaluate(([a, b]) => [a, b].map((p) => document.elementFromPoint(p.x, p.y)?.closest('#play-button') ? 'fab' : 'well'), [cornerTL, cornerBL]);
-	h.check(covered.every((c) => c === 'well'), 'premise: the probed corners are well, not FAB (' + covered + ')');
+	// the corners of the well the 50 px FAB circle leaves uncovered: the integer pixel nearest
+	// each corner whose centre is >= 2 px outside the circle AND resolves to that half (not
+	// the FAB, not its anti-aliased edge)
+	const corners = await page.evaluate(() => {
+		const fab = document.getElementById('play-button');
+		const well = fab.parentElement;
+		const f = fab.getBoundingClientRect();
+		const w = well.getBoundingClientRect();
+		const cx = f.x + f.width / 2;
+		const cy = f.y + f.height / 2;
+		const r = f.width / 2;
+		const find = (half, xs, ys) => {
+			for (const y of ys)
+				for (const x of xs) {
+					if (Math.hypot(x + 0.5 - cx, y + 0.5 - cy) < r + 2) continue;
+					if (document.elementFromPoint(x + 0.5, y + 0.5) === half) return { x, y };
+				}
+			return null;
+		};
+		const x0 = Math.ceil(w.x);
+		const x1 = Math.floor(w.x + w.width) - 1;
+		const y0 = Math.ceil(w.y);
+		const y1 = Math.floor(w.y + w.height) - 1;
+		const L = well.children[0];
+		const R = well.children[1];
+		return {
+			tl: find(L, [x0, x0 + 1, x0 + 2], [y0, y0 + 1, y0 + 2]),
+			bl: find(L, [x0, x0 + 1, x0 + 2], [y1, y1 - 1, y1 - 2]),
+			tr: find(R, [x1, x1 - 1, x1 - 2], [y0, y0 + 1, y0 + 2])
+		};
+	});
+	h.check(!!(corners.tl && corners.bl && corners.tr), 'premise: corner pixels outside the FAB exist in both halves (' + JSON.stringify(corners) + ')');
+	const cornerTL = corners.tl ?? { x: geo.w.x, y: geo.w.y };
+	const cornerBL = corners.bl ?? { x: geo.w.x, y: geo.w.y + geo.w.height - 1 };
+	// nothing hovered: the mouse leaves the bar first (the E2 click left it over Interact)
+	await page.mouse.move(640, 200);
+	await page.waitForTimeout(250);
 	const pillBg = await pixelAt(page, cornerTL.x, cornerTL.y);
+	const pillBgBL = await pixelAt(page, cornerBL.x, cornerBL.y);
 	await page.mouse.move(geo.left.x + geo.left.width / 2, geo.left.y + geo.left.height / 2);
 	await page.waitForTimeout(250);
 	const hoverBg = await pixelAt(page, geo.left.x + 3, geo.left.y + geo.left.height / 2);
@@ -145,12 +178,12 @@ h.run(async () => {
 	const tl = await pixelAt(page, cornerTL.x, cornerTL.y);
 	const bl = await pixelAt(page, cornerBL.x, cornerBL.y);
 	h.check(near(tl, hoverBg, 8), 'E3.1 the top corner beside Play takes the hover colour (' + tl + ' vs ' + hoverBg + ')');
-	h.check(near(bl, hoverBg, 8), 'E3.2 and the bottom corner (' + bl + ' vs ' + hoverBg + ')');
+	h.check(near(bl, hoverBg, 8) && !near(pillBgBL, hoverBg, 10), 'E3.2 and the bottom corner (' + pillBgBL + ' -> ' + bl + ' vs ' + hoverBg + ')');
 	// the right half answers the right neighbour, the same rule (a <p> there)
 	await page.mouse.move(geo.right.x + geo.right.width / 2, geo.right.y + geo.right.height / 2);
 	await page.waitForTimeout(250);
 	const hoverR = await pixelAt(page, geo.right.x + geo.right.width - 3, geo.right.y + geo.right.height / 2);
-	const tr = await pixelAt(page, geo.w.x + geo.w.width - 2.5, geo.w.y + 1.5);
+	const tr = await pixelAt(page, (corners.tr ?? cornerTL).x, (corners.tr ?? cornerTL).y);
 	h.check(near(tr, hoverR, 8), 'E3.3 the right-hand corner follows Object list as before (' + tr + ' vs ' + hoverR + ')');
 	const tlNow = await pixelAt(page, cornerTL.x, cornerTL.y);
 	h.check(near(tlNow, pillBg, 8), 'E3.4 and the left corner is NOT painted by the right neighbour (' + tlNow + ')');
@@ -164,8 +197,9 @@ h.run(async () => {
 	});
 	const toggle = page.locator('#show-perf-stats');
 	await toggle.waitFor({ state: 'attached', timeout: 5000 });
-	await toggle.scrollIntoViewIfNeeded();
-	await toggle.click({ force: true });
+	// the Toggle's <input> is visually hidden inside its label: press it the way a click on
+	// the row's switch does (an element click), not by viewport coordinates
+	await toggle.evaluate((el) => el.click());
 	await page.waitForTimeout(400);
 	h.check((await read(page, 'gameKit.fpsMeter.perfStatsShown')) === true, 'Q1.2 the Settings toggle turns it on');
 	await page.evaluate(() => window.__stores.settingsOpen.set(false));

From 3ec55a0bb41cbe1894a8abcf64a06032405d3165 Mon Sep 17 00:00:00 2001
From: AlexZ005 <alexz005.info@gmail.com>
Date: Fri, 2 Oct 2026 02:09:56 +0300
Subject: [PATCH 3/3] [fix] perf counter separators; editor-ui-33 +
 edit-move-games judged honestly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FpsCounter: the detail parts are joined by " · " (svelte trimmed the whitespace:
  "251.2 ms·14 calls")
- editor-ui-33: E2 measures the ring where it is DRAWN (an outer box-shadow over the
  neighbour; layers parsed by colour + size); E3 corner pixels >= 1 px outside the FAB; Q1
  tier reads set+read in one page task on microtasks (the live meter republishes per rAF)
- edit-move-games: an object a flow/module effect animates (Waves' Goal core) is judged by its
  BASE pose (suspendAnimation/read/resumeAnimation), and a fresh-load failure names dx/dy

Counterfactuals (lanes-30/after-33/33-editor-ui/counterfactual*): with `p:hover` restored the
well corners stay pill-grey beside a hovered Interact (E3.1/E3.2 RED); with classActive back on
the toggle a rgb(255,213,204) 4px ring paints the neighbour (E2.1/E2.2 RED). The park: the
game-running probe before c561f24 measured Towers 10/44, Stars Room 26/49, football 1/60 moved
objects not staying (run1/run3.log).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/hud/FpsCounter.svelte | 12 ++++-----
 tests/e2e/edit-move-games.test.cjs   | 36 ++++++++++++++++++--------
 tests/e2e/editor-ui-33.test.cjs      | 38 ++++++++++++++++++----------
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/src/components/hud/FpsCounter.svelte b/src/components/hud/FpsCounter.svelte
index 0c7c0596..4c1a9eb3 100644
--- a/src/components/hud/FpsCounter.svelte
+++ b/src/components/hud/FpsCounter.svelte
@@ -20,13 +20,11 @@
 	<div id="game-fps-counter" class="fps" class:fps-play={playing} data-tier={parts.tier} aria-live="off">
 		<span class="fps-main">{parts.fps}</span>
 		{#if parts.ms || parts.calls || parts.tris}
-			<span class="fps-detail"
-				>{#if parts.ms}<span>{parts.ms}</span>{/if}{#if parts.calls}{#if parts.ms}
-						·
-					{/if}<span id="fps-calls" class="fps-calls" data-tier={parts.tier}>{parts.calls}</span>{/if}{#if parts.tris}{#if parts.ms || parts.calls}
-						·
-					{/if}<span>{parts.tris}</span>{/if}</span
-			>
+			<span class="fps-detail">
+				{#if parts.ms}<span>{parts.ms}</span>{/if}
+				{#if parts.calls}{#if parts.ms}{' · '}{/if}<span id="fps-calls" class="fps-calls" data-tier={parts.tier}>{parts.calls}</span>{/if}
+				{#if parts.tris}{#if parts.ms || parts.calls}{' · '}{/if}<span>{parts.tris}</span>{/if}
+			</span>
 		{/if}
 	</div>
 {/if}
diff --git a/tests/e2e/edit-move-games.test.cjs b/tests/e2e/edit-move-games.test.cjs
index 2f8381be..d14dd853 100644
--- a/tests/e2e/edit-move-games.test.cjs
+++ b/tests/e2e/edit-move-games.test.cjs
@@ -52,12 +52,22 @@ const moveAll = (page) =>
 			targets.push(o);
 			for (const c of o.children) if (c.isMesh || c.isGroup) targets.push(c);
 		}
+		// an object a flow/module effect animates (Waves' Goal core bobs and spins) is judged by
+		// its BASE pose — the gizmo edits the base, the effect then plays about it
+		const fr = s.flowRuntime;
+		const poseOf = (o) => {
+			if (!fr.isAnimatedTarget(o.uuid)) return o.position.clone();
+			fr.suspendAnimation(o.uuid);
+			const p = o.position.clone();
+			fr.resumeAnimation(o.uuid);
+			return p;
+		};
 		const rows = [];
 		for (const o of targets.slice(0, 60)) {
 			s.objectActions.selectObject(o.uuid);
 			const tc = g(s.TControls);
 			const attached = tc?.object === o;
-			const before = o.position.clone();
+			const before = poseOf(o);
 			if (attached) {
 				tc.dispatchEvent({ type: 'dragging-changed', value: true });
 				o.position.x += 0.5;
@@ -71,15 +81,19 @@ const moveAll = (page) =>
 		}
 		s.objectActions.applySelectionSet([]);
 		await new Promise((r) => setTimeout(r, 1500));
-		return rows.map((r) => ({
-			uuid: r.o.uuid,
-			name: r.o.name || r.o.type,
-			attached: r.attached,
-			phys: r.phys,
-			dx: Math.round((r.o.position.x - r.before.x) * 100) / 100,
-			dy: Math.round((r.o.position.y - r.before.y) * 100) / 100,
-			dz: Math.round((r.o.position.z - r.before.z) * 100) / 100
-		}));
+		return rows.map((r) => {
+			const now = poseOf(r.o);
+			return {
+				uuid: r.o.uuid,
+				name: r.o.name || r.o.type,
+				attached: r.attached,
+				phys: r.phys,
+				animated: fr.isAnimatedTarget(r.o.uuid),
+				dx: Math.round((now.x - r.before.x) * 100) / 100,
+				dy: Math.round((now.y - r.before.y) * 100) / 100,
+				dz: Math.round((now.z - r.before.z) * 100) / 100
+			};
+		});
 	});
 const stayed = (r) => r.attached && Math.abs(r.dx - 0.5) <= 0.02 && Math.abs(r.dz - 0.25) <= 0.02 && Math.abs(r.dy) <= 0.02;
 
@@ -124,7 +138,7 @@ h.run(async () => {
 		await load(file);
 		let rows = await moveAll(page);
 		let bad = rows.filter((r) => !stayed(r));
-		h.check(rows.length > 0 && bad.length === 0, `${game.slug} A: fresh load, all ${rows.length} objects move and stay (${bad.map((r) => r.name).slice(0, 6).join(', ') || 'none'} failed)`);
+		h.check(rows.length > 0 && bad.length === 0, `${game.slug} A: fresh load, all ${rows.length} objects move and stay (${bad.map((r) => `${r.name} dx${r.dx} dy${r.dy}`).slice(0, 6).join(', ') || 'none'} failed)`);
 
 		// ---- §B the game RUNNING, then Edit
 		await load(file);
diff --git a/tests/e2e/editor-ui-33.test.cjs b/tests/e2e/editor-ui-33.test.cjs
index 8726df46..346f72dc 100644
--- a/tests/e2e/editor-ui-33.test.cjs
+++ b/tests/e2e/editor-ui-33.test.cjs
@@ -102,8 +102,9 @@ h.run(async () => {
 	const box = await cell.boundingBox();
 	await page.mouse.move(box.x + box.width / 2, box.y - 120);
 	await page.waitForTimeout(200);
-	// a pixel just inside the cell's left edge, mid-height: the ring (box-shadow) would paint it
-	const edge = { x: box.x + 2, y: box.y + box.height / 2 };
+	// a pixel just OUTSIDE the cell's left edge, mid-height: the focus ring is an OUTER
+	// box-shadow, so it paints over the neighbour (Scale), not inside the cell
+	const edge = { x: box.x - 2, y: box.y + box.height / 2 };
 	const edgeBefore = await pixelAt(page, edge.x, edge.y);
 	await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
 	await page.waitForTimeout(200);
@@ -112,7 +113,14 @@ h.run(async () => {
 	await page.mouse.move(box.x + box.width / 2, box.y - 120);
 	await page.waitForTimeout(250);
 	const shadow = await page.evaluate(() => getComputedStyle(document.getElementById('editor-mode-toggle')).boxShadow);
-	h.check(!/rgb/.test(shadow) || /0px 0px 0px 0px/.test(shadow.replace(/rgba?\([^)]*\)/g, '')), 'E2.1 a clicked Interact carries no focus ring (box-shadow ' + shadow + ')');
+	// a ring is a box-shadow layer with a visible colour and a non-zero spread or blur
+	const ringLayers = shadow === 'none' ? [] : shadow.split(/,(?![^(]*\))/).filter((layer) => {
+		const color = layer.match(/rgba?\([^)]*\)/)?.[0] ?? '';
+		const alpha = /rgba/.test(color) ? Number(color.split(',')[3]) : 1;
+		const nums = layer.replace(/rgba?\([^)]*\)/, '').match(/-?[\d.]+px/g)?.map(parseFloat) ?? [];
+		return alpha > 0.05 && nums.slice(2).some((n) => n !== 0);
+	});
+	h.check(ringLayers.length === 0, 'E2.1 a clicked Interact carries no focus ring (box-shadow ' + shadow + ')');
 	const edgeAfter = await pixelAt(page, edge.x, edge.y);
 	h.check(near(edgeBefore, edgeAfter, 4), 'E2.2 and its edge pixel is unchanged by the click (' + edgeBefore + ' -> ' + edgeAfter + ')');
 	h.check((await page.evaluate(() => getComputedStyle(document.getElementById('editor-mode-toggle')).outlineStyle)) === 'none', 'E2.3 no outline either');
@@ -133,7 +141,7 @@ h.run(async () => {
 	});
 	h.check(geo.leftTitle === 'Interact mode (I)', 'premise: Interact is the well\'s left neighbour (' + geo.leftTitle + ')');
 	// the corners of the well the 50 px FAB circle leaves uncovered: the integer pixel nearest
-	// each corner whose centre is >= 2 px outside the circle AND resolves to that half (not
+	// each corner whose centre is >= 1 px outside the circle AND resolves to that half (not
 	// the FAB, not its anti-aliased edge)
 	const corners = await page.evaluate(() => {
 		const fab = document.getElementById('play-button');
@@ -146,7 +154,7 @@ h.run(async () => {
 		const find = (half, xs, ys) => {
 			for (const y of ys)
 				for (const x of xs) {
-					if (Math.hypot(x + 0.5 - cx, y + 0.5 - cy) < r + 2) continue;
+					if (Math.hypot(x + 0.5 - cx, y + 0.5 - cy) < r + 1) continue;
 					if (document.elementFromPoint(x + 0.5, y + 0.5) === half) return { x, y };
 				}
 			return null;
@@ -208,19 +216,23 @@ h.run(async () => {
 	h.check(await page.locator('#game-fps-counter').isVisible(), 'Q1.3 the counter shows in the editor (app-wide, not only in a game)');
 	const text = ((await page.locator('#game-fps-counter').textContent()) ?? '').replace(/\s+/g, ' ').trim();
 	h.check(/\d+ fps/.test(text) && /ms/.test(text) && /calls/.test(text) && /tris/.test(text), 'Q1.4 fps, frame ms, draw calls and triangles (' + text + ')');
+	h.check(/ms · \d+ calls · \d+k? tris/.test(text), 'Q1.4b the parts are separated by " · " (' + text + ')');
 	// the budget colours, through the real reading store
-	const tierAt = async (calls) => {
-		await page.evaluate((calls) => window.__stores.gameKit.fpsMeter.fpsReading.set({ fps: 72, ms: 13.9, calls, tris: 120000, source: 'desktop' }), calls);
-		await page.waitForTimeout(60);
-		return page.evaluate(() => {
+	// set and read in ONE page task: the live meter republishes its own reading every 500 ms
+	// (calls ~14 here), and a gap between a synthetic set and the read loses that race
+	const tierAt = (calls) =>
+		page.evaluate(async (calls) => {
+			window.__stores.gameKit.fpsMeter.fpsReading.set({ fps: 72, ms: 13.9, calls, tris: 120000, source: 'desktop' });
+			// MICROTASKS only: svelte flushes the DOM in a microtask queued by the set, while the
+			// live meter republishes from a rAF / timer callback, which cannot run in between
+			for (let i = 0; i < 4; i++) await Promise.resolve();
 			const el = document.getElementById('fps-calls');
-			return { tier: el?.dataset.tier, color: el ? getComputedStyle(el).color : null };
-		});
-	};
+			return { tier: el?.dataset.tier, color: el ? getComputedStyle(el).color : null, text: el?.textContent };
+		}, calls);
 	const ok = await tierAt(98);
 	const warn = await tierAt(131);
 	const over = await tierAt(163);
-	h.check(ok.tier === 'ok' && warn.tier === 'warn' && over.tier === 'over', 'Q1.5 98 / 131 / 163 calls read ok / warn / over');
+	h.check(ok.tier === 'ok' && warn.tier === 'warn' && over.tier === 'over', 'Q1.5 98 / 131 / 163 calls read ok / warn / over (' + [ok, warn, over].map((t) => t.text + '=' + t.tier).join(', ') + ')');
 	h.check(warn.color === 'rgb(251, 191, 36)', 'Q1.6 past 120 the calls are AMBER (' + warn.color + ')');
 	h.check(over.color === 'rgb(248, 113, 113)', 'Q1.7 past 150 they are RED (' + over.color + ')');
 	h.check(ok.color !== warn.color && ok.color !== over.color, 'Q1.8 and in budget they are neither (' + ok.color + ')');