From 0b957c6f23d97f4c2ce33b1864ed7d794337186d Mon Sep 17 00:00:00 2001
From: AlexZ005 <alexz005.info@gmail.com>
Date: Thu, 1 Oct 2026 20:44:26 +0300
Subject: [PATCH] [feat] 33 (G2/G3): the stick reels the world;
 api.claimInput('sticks'); every level + level tabs in the VR pause menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Untangle's Quest report (roadmap 33): "I can make bigger/smaller the globe but cannot use up/down
on stick to move it further/closer ... just as in edit mode for objects", and "main menu do not
show in VR levels to choose and tab to switch between flat/globe".

G2 — the stick reels what you hold, the world included:
- vrControls: the one-hand world PAN (a right grip on scenery/air in Edit, or in Interact when
  play.locomotion.worldGrab) now reels the world on that hand's stick Y with Edit's own object
  reel (grabStickAdjust): forward pushes it away along the hand's ray, back pulls it in, from
  the distance to the gripped spot (panReach). worldReelStep is pure + exported.
- api.claimInput('sticks'): BOTH VR sticks' navigation stands down (left-stick move, right-stick
  snap/smooth turn + teleport) for a module that reads the sticks itself (Untangle's held globe:
  Y reels, X scales). claimInput now answers true for a scope this core knows (feature detect).

G3 — the pause menu's Levels page in a headset:
- shellPanelDraw drew list.slice(0, 20): Untangle's levels 21-30 were unreachable in VR. Now a
  6-column grid as tall as fits (pages with arrows beside Back beyond that); <= 20 levels and no
  tabs keep the old 5 x 4.
- addSetting({..., type: 'choice', onLevels: true}): the choice is also drawn as TABS above the
  Levels grid, desktop (GameShellMenu, role=tablist) and VR (shell:tab hits). Untangle registers
  its Board (Globe / 2D board) that way.

Tests:
- vitest shellPanelDraw (new, 6) + gameShell (+3): CF — the old slice(0, 20) restored: 2 red.
- e2e vr-world-reel (new, 21/0 on 5278): pure step, Edit pan reel push/pull exactly by the reach
  growth, no drift at rest, Interact+worldGrab reel, the 'sticks' claim silencing snap turn and
  the left stick then releasing. fakeXR controllers do not follow the reference space, so the
  suite poses a spec-accurate right hand (re-derived on every setReferenceSpace).
  CF: on the feat/1.19 base the suite is red (no worldReelStep, claimInput answers undefined).
- held: game-shell 66/0, vr-game-panel 36/0, vr-nav-suppression 5/0, vr-grips-by-mode 19/0,
  vr-laser-panels ALL PASS (SCENES_DIR = the preview-1-18 scenes).
- svelte-check 333/47 (= baseline), vitest 387/387, check:storage clean.
- modules flights on this branch: untangle-vr2 94/0 (incl. S: left X -> Levels -> Board tabs ->
  a level, through the panel's press path), untangle-vr 98/0, untangle 71/0, untangle-drag 54/0.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 MODULES.md                              |   5 +
 src/components/hud/GameShellMenu.svelte |  47 ++++++
 src/components/play/VRControls.svelte   |   3 +-
 src/lib/gameSettings.js                 |   5 +-
 src/lib/gameShell.js                    |  46 +++++-
 src/lib/inputRuntime.js                 |   6 +-
 src/lib/moduleSDK.js                    |  20 ++-
 src/lib/shellPanelDraw.js               |  72 +++++++--
 src/lib/vrControls.js                   |  50 +++++-
 src/lib/vrGamePanel.js                  |   3 +
 tests/e2e/vr-world-reel.test.cjs        | 193 ++++++++++++++++++++++++
 tests/unit/gameShell.test.js            |  34 ++++-
 tests/unit/shellPanelDraw.test.js       |  67 ++++++++
 13 files changed, 517 insertions(+), 34 deletions(-)
 create mode 100644 tests/e2e/vr-world-reel.test.cjs
 create mode 100644 tests/unit/shellPanelDraw.test.js

diff --git a/MODULES.md b/MODULES.md
index 3c527c4d..ce956897 100644
--- a/MODULES.md
+++ b/MODULES.md
@@ -430,8 +430,11 @@ api.onInput((kind, code) => {});        // 'down'/'up' events; returns unsubscri
 // pause the HOST's use of an input scope while your module drives:
 //   'keys'       — WASD camera fly + play-mode movement
 //   'locomotion' — VR left-stick locomotion
+//   'sticks'     — (1.19) BOTH VR sticks: left-stick move, right-stick snap/smooth turn + teleport
+//                  (a held thing reeled on Y and scaled on X, the way an Edit grab does)
 api.claimInput('keys');                 // ALWAYS release when your mode ends
 api.releaseInput('keys');
+const sticksOk = api.claimInput('sticks') === true; // true = this core knows the scope (older: undefined)
 
 // reading a keydown YOURSELF (a toolbox's own handler)? resolve the key the way the
 // editor does — `event.key` when it is an ASCII letter/digit, the physical
@@ -693,6 +696,8 @@ api.game.addSetting?.({
 	onChange: (v) => setBoard(v)
 });
 setBoard(api.game.setting?.('board') ?? 'globe');            // the stored choice at load
+// (1.19) a CHOICE that decides which levels you see: `onLevels: true` also draws it as tabs
+// above the Levels page's grid (desktop + headset) — Untangle's Board [Globe] [2D board]
 api.game.setSetting?.('board', '2d');                        // your in-game button writes the same row
 api.game.onSettingsChange?.((values) => console.log(values.board, values.sfx));
 ```
diff --git a/src/components/hud/GameShellMenu.svelte b/src/components/hud/GameShellMenu.svelte
index b4614ca5..609c53ac 100644
--- a/src/components/hud/GameShellMenu.svelte
+++ b/src/components/hud/GameShellMenu.svelte
@@ -21,6 +21,7 @@
 		shellMenuAvailable,
 		shellMenuItems,
 		shellSettingViews,
+		shellLevelTabs,
 		shellPageTitle,
 		shellGameName,
 		shellHelpLines,
@@ -43,6 +44,9 @@
 	const items = $derived(itemsFor($gameLevels));
 	const viewsFor = (/** @type {any[]} */ ..._deps) => shellSettingViews({ vr: false });
 	const settings = $derived(viewsFor($gameSettingValues, $gameSettingRows));
+	// 33 (G3): a game's level-picking choice (Untangle's Board) as tabs above the grid
+	const tabsFor = (/** @type {any[]} */ ..._deps) => shellLevelTabs();
+	const levelTabs = $derived(tabsFor($gameSettingValues, $gameSettingRows));
 	const vrViewsFor = (/** @type {any[]} */ ..._deps) => shellSettingViews({ vr: true }).filter((/** @type {any} */ r) => r.vrOnly);
 	const vrSettings = $derived(vrViewsFor($gameSettingValues));
 	const helpFor = (/** @type {any[]} */ ..._deps) => shellHelpLines({ vr: false });
@@ -150,6 +154,22 @@
 					{/each}
 				</div>
 			{:else if page === 'levels'}
+				{#each levelTabs as tab (tab.id)}
+					<div class="gs-tabs" role="tablist" aria-label={tab.label} data-shell-tabs={tab.id}>
+						<span class="gs-tabs-label">{tab.label}</span>
+						{#each tab.options as option (option.value)}
+							<button
+								type="button"
+								role="tab"
+								class="gs-tab"
+								class:gs-tab-on={option.value === tab.value}
+								aria-selected={option.value === tab.value}
+								data-shell-tab={tab.id + ':' + option.value}
+								onclick={() => option.value !== tab.value && setGameSetting(tab.id, option.value)}>{option.label}</button
+							>
+						{/each}
+					</div>
+				{/each}
 				<div class="gs-levels">
 					{#each $gameLevels?.list ?? [] as level (level.id)}
 						<button
@@ -340,6 +360,8 @@
 	}
 	.gs-item:hover,
 	.gs-item:focus-visible,
+	.gs-tab:hover:not(.gs-tab-on),
+	.gs-tab:focus-visible,
 	.gs-level:hover:not(:disabled),
 	.gs-level:focus-visible {
 		border-color: #5fd0ff;
@@ -362,6 +384,31 @@
 		opacity: 0.75;
 		padding: 8px;
 	}
+	.gs-tabs {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-bottom: 12px;
+	}
+	.gs-tabs-label {
+		margin-right: 6px;
+		font-size: 14px;
+		font-weight: 600;
+		opacity: 0.8;
+	}
+	.gs-tab {
+		flex: 1;
+		min-height: 40px;
+		padding: 6px 12px;
+		border-radius: 10px;
+		background: rgba(255, 255, 255, 0.07);
+		border: 1px solid transparent;
+		font-weight: 600;
+	}
+	.gs-tab-on {
+		background: var(--accent, #ef562f);
+		color: #fff;
+	}
 	.gs-levels {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
diff --git a/src/components/play/VRControls.svelte b/src/components/play/VRControls.svelte
index 4a190adb..37a07d34 100644
--- a/src/components/play/VRControls.svelte
+++ b/src/components/play/VRControls.svelte
@@ -34,7 +34,8 @@
 		const session = renderer.xr.getSession();
 		if (!session) return;
 		if ($vrMenuOpen || $vrObjectsPanelOpen) return; // menu/panel own the sticks (74/101)
-		if ($inputClaims.includes('locomotion')) return; // K-C: a module drives instead
+		// K-C: a module drives instead; 33: 'sticks' claims BOTH sticks (move, turn, teleport)
+		if ($inputClaims.includes('locomotion') || $inputClaims.includes('sticks')) return;
 		// 30b P3: INTERACT walks like a game (collision, gravity, step-up; no fly or teleport
 		// unless the play block allows them) — a held object does not stop your feet
 		if (tickVRInteractLocomotion(delta, session)) return;
diff --git a/src/lib/gameSettings.js b/src/lib/gameSettings.js
index 6fdb36f5..5c9360ab 100644
--- a/src/lib/gameSettings.js
+++ b/src/lib/gameSettings.js
@@ -28,7 +28,7 @@ import { safeStorage } from './safeStorage';
 /**
  * @typedef {{id: string, label: string, type: 'toggle' | 'choice' | 'range', options?: string[],
  *   optionLabels?: string[], min?: number, max?: number, step?: number, default: any,
- *   help?: string, vrOnly?: boolean, onChange?: (value: any) => void, owner?: string}} SettingRow
+ *   help?: string, vrOnly?: boolean, onLevels?: boolean, onChange?: (value: any) => void, owner?: string}} SettingRow
  */
 
 /** The rows every game gets, in panel order. `vrOnly` rows are drawn only in a headset
@@ -129,6 +129,9 @@ export function normalizeSettingRow(row) {
 	if (typeof row.onChange === 'function') out.onChange = row.onChange;
 	if (row.help) out.help = String(row.help).slice(0, 200);
 	if (row.vrOnly) out.vrOnly = true;
+	// 33 (G3): a game's CHOICE that picks which levels you see (Untangle's Board: Globe / 2D) is
+	// also drawn as tabs above the Levels page's grid — desktop and headset
+	if (row.onLevels && type === 'choice') out.onLevels = true;
 	return out;
 }
 
diff --git a/src/lib/gameShell.js b/src/lib/gameShell.js
index 3dd642b6..e15f9672 100644
--- a/src/lib/gameShell.js
+++ b/src/lib/gameShell.js
@@ -33,18 +33,19 @@ import { CORE_SETTINGS, gameSettingRows, gameSettingValues, setGameSetting, sett
 
 /** @typedef {'main' | 'levels' | 'settings' | 'help'} ShellPage */
 
-/** The menu: open, and which page. LOCAL. @type {import('svelte/store').Writable<{open: boolean, page: ShellPage}>} */
-export const shellMenu = writable({ open: false, page: /** @type {ShellPage} */ ('main') });
+/** The menu: open, which page, and (33) the headset's page of the level grid — null = the page
+ * holding the current level. LOCAL. @type {import('svelte/store').Writable<{open: boolean, page: ShellPage, levelPage?: number | null}>} */
+export const shellMenu = writable({ open: false, page: /** @type {ShellPage} */ ('main'), levelPage: /** @type {number | null} */ (null) });
 
 /** @param {ShellPage} [page] */
 export function openShellMenu(page = 'main') {
 	if (!shellMenuAvailable()) return false;
-	shellMenu.set({ open: true, page: normalizePage(page) });
+	shellMenu.set({ open: true, page: normalizePage(page), levelPage: null });
 	debug.opens++;
 	return true;
 }
 export function closeShellMenu() {
-	if (get(shellMenu).open) shellMenu.set({ open: false, page: 'main' });
+	if (get(shellMenu).open) shellMenu.set({ open: false, page: 'main', levelPage: null });
 }
 /** @returns {boolean} open after the toggle */
 export function toggleShellMenu() {
@@ -56,7 +57,7 @@ export function toggleShellMenu() {
 }
 /** @param {ShellPage} page */
 export function showShellPage(page) {
-	shellMenu.update((m) => ({ ...m, page: normalizePage(page) }));
+	shellMenu.update((m) => ({ ...m, page: normalizePage(page), levelPage: null }));
 }
 /** @param {any} page @returns {ShellPage} */
 function normalizePage(page) {
@@ -353,6 +354,28 @@ export function shellSettingViews(opts = {}) {
 	return out;
 }
 
+/**
+ * 33 (G3): the game's choices drawn as TABS above the Levels page (a setting registered with
+ * `onLevels: true` — Untangle's Board: Globe / 2D board), with the option on now. Both
+ * renderers read it. @returns {{id: string, label: string, options: {value: string, label: string}[], value: string}[]}
+ */
+export function shellLevelTabs() {
+	const values = get(gameSettingValues);
+	return get(gameSettingRows)
+		.filter((row) => row.onLevels && row.type === 'choice')
+		.map((row) => ({
+			id: row.id,
+			label: row.label,
+			options: (row.options ?? []).map((o, i) => ({ value: o, label: String(row.optionLabels?.[i] ?? o) })),
+			value: String(values[row.id] ?? row.default)
+		}));
+}
+
+/** 33: the headset's level grid shows page `n` (0-based; clamped where it is drawn). @param {number} n */
+export function showLevelPage(n) {
+	shellMenu.update((m) => ({ ...m, levelPage: Math.max(0, Math.floor(Number(n) || 0)) }));
+}
+
 /**
  * Step a setting the way a controller does: a toggle flips, a choice walks (dir ±1,
  * wrapping), a range moves by its step (clamped). Returns the new value.
@@ -406,6 +429,19 @@ export function pressShellHit(hitId) {
 	if (parts[1] === 'item') return runShellItem(parts.slice(2).join(':'));
 	if (parts[1] === 'back') return runShellItem('back');
 	if (parts[1] === 'level') return pickGameLevel(parts.slice(2).join(':'));
+	// 33: a tab above the grid (tab:<setting index>:<option index> of shellLevelTabs) and the
+	// headset grid's page arrows (lvpage:<page>)
+	if (parts[1] === 'tab') {
+		const tab = shellLevelTabs()[Number(parts[2])];
+		const option = tab?.options[Number(parts[3])];
+		if (!tab || !option) return false;
+		if (option.value !== tab.value) setGameSetting(tab.id, option.value);
+		return true;
+	}
+	if (parts[1] === 'lvpage') {
+		showLevelPage(Number(parts[2]));
+		return true;
+	}
 	if (parts[1] === 'set') {
 		const dir = parts[parts.length - 1] === 'prev' ? -1 : 1;
 		const id = parts.slice(2, parts.length - 1).join(':');
diff --git a/src/lib/inputRuntime.js b/src/lib/inputRuntime.js
index 48c2d5a7..d29e813b 100644
--- a/src/lib/inputRuntime.js
+++ b/src/lib/inputRuntime.js
@@ -56,12 +56,12 @@ function emit(kind, code) {
  * @type {import('svelte/store').Writable<string[]>} */
 export const inputClaims = writable([]);
 
-/** Is a scope currently claimed by any module? @param {'keys'|'locomotion'} scope */
+/** Is a scope currently claimed by any module? @param {'keys'|'locomotion'|'sticks'} scope */
 export function isClaimed(scope) {
 	return get(inputClaims).includes(scope);
 }
 
-/** @param {'keys'|'locomotion'} scope */
+/** @param {'keys'|'locomotion'|'sticks'} scope */
 // 21-E3: REFCOUNTED. The claim set used to be a plain membership list, so two
 // claimers of the same scope (a HUD menu + a module possess) dropped each other:
 // the first release removed the scope for both. editorNavigation refused to claim
@@ -78,7 +78,7 @@ export function claimInput(scope) {
 	if (next === 1) inputClaims.update((list) => (list.includes(scope) ? list : [...list, scope]));
 }
 
-/** @param {'keys'|'locomotion'} scope */
+/** @param {'keys'|'locomotion'|'sticks'} scope */
 /** @param {string} scope */
 export function releaseInput(scope) {
 	const next = Math.max(0, (claimCounts.get(scope) ?? 0) - 1);
diff --git a/src/lib/moduleSDK.js b/src/lib/moduleSDK.js
index 6dde8928..9f963c1d 100644
--- a/src/lib/moduleSDK.js
+++ b/src/lib/moduleSDK.js
@@ -64,6 +64,8 @@ import { playGameMusic, stopGameMusic, gameMusicState, MUSIC_PRESET_IDS } from '
 import { announce as announceBanner, clearAnnouncement } from './gameAnnounce';
 /** the ping chimes `api.playSound` still reaches (pingAudio's PING_SOUNDS ids) */
 const PING_NAMES = new Set(['ding', 'chime', 'pluck', 'bell']);
+/** the input scopes `api.claimInput` pauses (33: 'sticks' = both VR sticks) */
+const INPUT_SCOPES = ['keys', 'locomotion', 'sticks'];
 import { runtimeSpawn, setRuntimeSpawn } from './playSettings'; // 30b P4 (a leaf)
 import { spawnDesktopPlayer, currentSpawn, desktopSpawn, spawnEyePose } from './playSpawn'; // 30b P4 (a leaf)
 
@@ -444,7 +446,7 @@ function makeApi(moduleId, moduleName = moduleId) {
 		flowGraphsRef?.recordFlowNodesEntry({ op: 'data', graphId: items[0].graphId, items, moduleId });
 	};
 	/** input scopes this module still holds — released at teardown
-	 * @type {Set<'keys'|'locomotion'>} */
+	 * @type {Set<'keys'|'locomotion'|'sticks'>} */
 	const claimedScopes = new Set();
 	let possessing = false;
 	/** list elements this module has pushed rows into, so teardown clears exactly those and
@@ -941,15 +943,19 @@ function makeApi(moduleId, moduleName = moduleId) {
 			return off;
 		},
 		/** Pause the host's own use of an input scope while your module drives:
-		 * 'keys' (WASD camera fly / play movement) or 'locomotion' (VR left stick).
-		 * ALWAYS release (module disable/error releases everything).
-		 * @param {'keys'|'locomotion'} scope */
+		 * 'keys' (WASD camera fly / play movement), 'locomotion' (VR left stick), or
+		 * 'sticks' (33: BOTH VR sticks — left-stick move, right-stick turn and teleport — for a
+		 * module that reads `input().axes` itself, e.g. reel/scale a held thing on the sticks).
+		 * ALWAYS release (module disable/error releases everything). Returns true when this
+		 * core knows the scope (an older core answers undefined: feature-detect 'sticks' so).
+		 * @param {'keys'|'locomotion'|'sticks'} scope */
 		claimInput(scope) {
 			claimedScopes.add(scope);
 			if (inputRuntimeRef) inputRuntimeRef.claimInput(scope);
 			else import('./inputRuntime').then((m) => m.claimInput(scope));
+			return INPUT_SCOPES.includes(scope);
 		},
-		/** @param {'keys'|'locomotion'} scope */
+		/** @param {'keys'|'locomotion'|'sticks'} scope */
 		releaseInput(scope) {
 			claimedScopes.delete(scope);
 			if (inputRuntimeRef) inputRuntimeRef.releaseInput(scope);
@@ -1340,7 +1346,9 @@ function makeApi(moduleId, moduleName = moduleId) {
 			 * rows: music, sound effects, haptics, FPS, turning, vignette, quality). Persisted
 			 * per game on this device. `type` 'toggle' | 'choice' (with `options`, optional
 			 * `optionLabels`) | 'range' (`min`/`max`/`step`). `onChange(value)` hears a change.
-			 * @param {{id: string, label: string, type?: 'toggle'|'choice'|'range', options?: string[], optionLabels?: string[], min?: number, max?: number, step?: number, default: any, onChange?: (value: any) => void}} row
+			 * 33: a choice with `onLevels: true` is ALSO drawn as tabs above the Levels page's
+			 * grid (desktop + VR) — a choice that decides which levels you see (Untangle's Board).
+			 * @param {{id: string, label: string, type?: 'toggle'|'choice'|'range', options?: string[], optionLabels?: string[], min?: number, max?: number, step?: number, default: any, onLevels?: boolean, onChange?: (value: any) => void}} row
 			 * @returns {(() => void) | null} off, or null when refused (a core id, a bad row)
 			 */
 			addSetting(row) {
diff --git a/src/lib/shellPanelDraw.js b/src/lib/shellPanelDraw.js
index edc8fcce..14ddfcda 100644
--- a/src/lib/shellPanelDraw.js
+++ b/src/lib/shellPanelDraw.js
@@ -27,9 +27,39 @@ function roundRect(g, x, y, w, h, r) {
  *   items: {id: string, label: string}[],
  *   levels: {list: {id: string, label: string, locked?: boolean, stars?: number}[], current: string | null} | null,
  *   settings: {id: string, label: string, type: string, value: any, display: string, min?: number, max?: number, game?: boolean}[],
- *   help: string[], fps?: string | null}} ShellModel
+ *   help: string[], fps?: string | null,
+ *   tabs?: {id: string, label: string, options: {value: string, label: string}[], value: string}[],
+ *   levelPage?: number | null}} ShellModel
  */
 
+/** the sub-pages' content starts here, in stage px */
+const PAGE_TOP = 110;
+/** one tab row above the level grid (50 px tabs + the gap under them) */
+const TAB_ROW = 64;
+
+/**
+ * 33 (G3) — the headset's level grid. It drew `list.slice(0, 20)`: Untangle's levels 21-30 were
+ * unreachable in VR. Up to 20 levels and no tabs: the 5 x 4 of big tiles it always had. More, or
+ * tabs above the grid: 6 columns, as many rows of at least 64 px as fit; when even that is not
+ * enough, pages (the ‹ › arrows beside Back). `page` null = the page holding the current level.
+ * Pure; exported for the suites.
+ * @param {number} count @param {number} tabRows @param {number | null | undefined} page @param {number} currentIndex
+ */
+export function levelGridLayout(count, tabRows, page, currentIndex) {
+	const top = PAGE_TOP + tabRows * TAB_ROW;
+	if (!tabRows && count <= 20) return { cols: 5, rows: 4, tw: 190, th: 96, gap: 14, top, perPage: 20, pages: 1, page: 0 };
+	const cols = 6;
+	const gap = 12;
+	const bottom = SHELL_STAGE.h - 72 - 14; // above Back
+	const areaH = bottom - top;
+	const rows = Math.max(1, Math.floor((areaH + gap) / (64 + gap)));
+	const th = Math.min(96, (areaH - (rows - 1) * gap) / rows);
+	const perPage = cols * rows;
+	const pages = Math.max(1, Math.ceil(count / perPage));
+	const want = page ?? (currentIndex >= 0 ? Math.floor(currentIndex / perPage) : 0);
+	return { cols, rows, tw: 160, th, gap, top, perPage, pages, page: Math.min(Math.max(0, want), pages - 1) };
+}
+
 /**
  * Paint one shell page over the (already cleared + plated) board. `k` = canvas px per
  * stage px. Returns the hits in CANVAS pixels, `kind: 'shell'`.
@@ -76,7 +106,7 @@ export function drawShellPage(g, model, opts) {
 	g.font = `500 ${Math.round(20 * k)}px system-ui, sans-serif`;
 	g.fillText(model.subtitle + (model.fps ? '  ·  ' + model.fps : ''), W / 2, 84 * k);
 
-	const top = 110;
+	const top = PAGE_TOP;
 	if (model.page === 'main') {
 		const bw = 520;
 		const bh = 56;
@@ -93,22 +123,38 @@ export function drawShellPage(g, model, opts) {
 
 	if (model.page === 'levels') {
 		const list = model.levels?.list ?? [];
-		const cols = 5;
-		const tw = 190;
-		const th = 96;
-		const gap = 14;
-		const x0 = (SHELL_STAGE.w - (cols * tw + (cols - 1) * gap)) / 2;
-		list.slice(0, 20).forEach((level, i) => {
-			const x = x0 + (i % cols) * (tw + gap);
-			const y = top + Math.floor(i / cols) * (th + gap);
+		// 33 (G3): the game's level-picking choices as tabs (Untangle: Board  [Globe] [2D board])
+		const tabs = (model.tabs ?? []).slice(0, 2);
+		tabs.forEach((tab, t) => {
+			const y = top + t * TAB_ROW;
+			g.textAlign = 'right';
+			g.textBaseline = 'middle';
+			g.fillStyle = '#cbd5e1';
+			g.font = `600 ${Math.round(24 * k)}px system-ui, sans-serif`;
+			const tw = Math.min(260, (SHELL_STAGE.w - 400) / Math.max(1, tab.options.length));
+			const x0 = (SHELL_STAGE.w - tab.options.length * (tw + 12) + 12) / 2 + 70;
+			g.fillText(tab.label, (x0 - 20) * k, (y + 25) * k);
+			tab.options.forEach((option, o) => {
+				button('shell:tab:' + t + ':' + o, option.label, x0 + o * (tw + 12), y, tw, 50, { accent: option.value === tab.value });
+			});
+		});
+		const current = list.findIndex((level) => level.id === model.levels?.current);
+		const grid = levelGridLayout(list.length, tabs.length, model.levelPage, current);
+		const x0 = (SHELL_STAGE.w - (grid.cols * grid.tw + (grid.cols - 1) * grid.gap)) / 2;
+		list.slice(grid.page * grid.perPage, (grid.page + 1) * grid.perPage).forEach((level, i) => {
+			const x = x0 + (i % grid.cols) * (grid.tw + grid.gap);
+			const y = grid.top + Math.floor(i / grid.cols) * (grid.th + grid.gap);
 			const stars = level.stars ? '★'.repeat(level.stars) : '';
-			const current = model.levels?.current === level.id;
-			button('shell:level:' + level.id, level.label, x, y, tw, th, {
+			button('shell:level:' + level.id, level.label, x, y, grid.tw, grid.th, {
 				disabled: !!level.locked,
-				accent: current,
+				accent: model.levels?.current === level.id,
 				sub: level.locked ? 'Locked' : stars
 			});
 		});
+		// more pages: the arrows beside Back name the page they go to
+		const backX = (SHELL_STAGE.w - 300) / 2;
+		if (grid.page > 0) button('shell:lvpage:' + (grid.page - 1), '‹ Page ' + grid.page, backX - 12 - 200, backY, 200, 54);
+		if (grid.page < grid.pages - 1) button('shell:lvpage:' + (grid.page + 1), 'Page ' + (grid.page + 2) + ' ›', backX + 300 + 12, backY, 200, 54);
 		return hits;
 	}
 
diff --git a/src/lib/vrControls.js b/src/lib/vrControls.js
index ac5ae97c..f481f55b 100644
--- a/src/lib/vrControls.js
+++ b/src/lib/vrControls.js
@@ -145,7 +145,7 @@ import { vrKeyboardTarget, openVRKeyboard, pressVRKey, closeVRKeyboard } from '.
 import { sceneCommand } from './commandsHandler.svelte';
 import { sendPing, pingColor } from './ping';
 import { peerColor } from './lockControl';
-import { setVRAxes, setVRButtons } from './inputRuntime';
+import { setVRAxes, setVRButtons, isClaimed } from './inputRuntime';
 import { suspendAnimation, resumeAnimation, fireObjectGrab } from './flowRuntime';
 import { drawMode, toggleDrawMode, addStrokePoint, endStroke } from './drawMode';
 import { setPttHeld, cycleMicMode, vrMicMode, micActive, pttActive } from './voiceChat';
@@ -2182,9 +2182,38 @@ function endGrab(object, before) {
 	resumeAnimation(object.uuid); // release spot becomes the new animation base
 }
 
-/** @type {{index: number, prev: any} | null} right-grip drag-the-world pan */
+/** @type {{index: number, prev: any, reach: number} | null} right-grip drag-the-world pan
+ * (33: `reach` = how far along the hand's ray the gripped spot is — the stick reels it) */
 let worldPan = null;
 
+/** 33 (G2): a pan with nothing under the ray reels from this far (metres) */
+const WORLD_REEL_DEFAULT = 1.5;
+/**
+ * 33 (G2) — "stick up/down while holding it pushes it farther / pulls it closer, just as in
+ * edit mode for objects": one frame of the world-pan hand's stick. The SAME reel an Edit grab
+ * applies to a held object (grabStickAdjust: forward = y < 0 pushes away, back reels in, a
+ * share of the distance per frame) applied to `reach`, the distance to the gripped spot.
+ * Returns the new reach and the metres the world moves AWAY along the hand's ray (negative =
+ * toward you). Pure; exported for the suites. @param {number} reach @param {number} y stick Y
+ */
+export function worldReelStep(reach, y) {
+	const next = grabStickAdjust({ length: reach, scale: 1, x: 0, y }).length;
+	return { reach: next, push: next - reach };
+}
+/** where a pan's reel starts: the first world surface on the hand's ray, else the default
+ * @param {number} index */
+function panReach(index) {
+	try {
+		const root = get(worldRig) ?? get(objectsGroup);
+		const hit = root ? controllerRay(index).intersectObject(root, true).find((h) => h.object.visible !== false) : null;
+		return hit ? Math.min(Math.max(hit.distance, 0.3), 30) : WORLD_REEL_DEFAULT;
+	} catch {
+		return WORLD_REEL_DEFAULT;
+	}
+}
+const _reelDir = new THREE.Vector3();
+const _reelQuat = new THREE.Quaternion();
+
 /** 30b P2: test/debug view of what the grips are doing right now */
 export function vrGripDebug() {
 	return {
@@ -2192,6 +2221,7 @@ export function vrGripDebug() {
 		grabInteract: !!grab?.interact,
 		worldGrab: !!worldGrab,
 		worldPan: !!worldPan,
+		panReach: worldPan ? worldPan.reach : null, // 33: the stick reel's distance
 		emptyAir: [...emptyAirSqueeze]
 	};
 }
@@ -2857,7 +2887,7 @@ function onSqueezeStart(index) {
 		// reference space, which would silently break a colocated alignment)
 		const handedness = renderer.xr.getController(index)?.userData?.handedness ?? null;
 		if (handedness === 'right' && !worldGestureDiverted())
-			worldPan = { index, prev: renderer.xr.getController(index).getWorldPosition(new THREE.Vector3()) };
+			worldPan = { index, prev: renderer.xr.getController(index).getWorldPosition(new THREE.Vector3()), reach: panReach(index) };
 		return;
 	}
 	if (get(lockedObjects).find((lock) => lock[1] === object.uuid)) return;
@@ -3030,7 +3060,7 @@ function onSqueezeEnd(index) {
 		if (emptyAirSqueeze[other]) {
 			const handedness = renderer.xr.getController(other)?.userData?.handedness ?? null;
 			if (handedness === 'right' && !worldGestureDiverted())
-				worldPan = { index: other, prev: renderer.xr.getController(other).getWorldPosition(new THREE.Vector3()) };
+				worldPan = { index: other, prev: renderer.xr.getController(other).getWorldPosition(new THREE.Vector3()), reach: panReach(other) };
 		}
 		return;
 	}
@@ -3789,6 +3819,9 @@ export function pingPointFromRay(ray, group) {
  * @param {{grips?: boolean}=} opts */
 export function vrNavigationSuppressed(opts = {}) {
 	if (worldPan || worldGrab || scaleGrab) return true;
+	// 33 (G2): a module that reads the sticks itself claimed them (`api.claimInput('sticks')`):
+	// move, turn and teleport all stand down — Untangle's held globe reels on Y, scales on X
+	if (isClaimed('sticks')) return true;
 	if (vertexGrab || vertexTriggerGrab) return true;
 	if (faceGrabHand || faceGesturePending()) return true;
 	if (stretchSliderDrag || boxSelect) return true;
@@ -4090,6 +4123,15 @@ export function updateVRControls() {
 	// drag-the-world: the grabbed spot follows the hand (prev stays fixed at
 	// grab start — the applied offset self-corrects the measured delta)
 	if (worldPan) {
+		// 33 (G2): the pan hand's stick reels the world along its ray, as an Edit grab reels a
+		// held object — moving the fixed `prev` makes the pan below apply the push itself
+		const reel = worldReelStep(worldPan.reach, axesForSlot(worldPan.index)[3] ?? 0);
+		if (reel.push) {
+			worldPan.reach = reel.reach;
+			renderer.xr.getController(worldPan.index).getWorldQuaternion(_reelQuat);
+			_reelDir.set(0, 0, -1).applyQuaternion(_reelQuat);
+			worldPan.prev.addScaledVector(_reelDir, -reel.push);
+		}
 		const current = renderer.xr.getController(worldPan.index).getWorldPosition(new THREE.Vector3());
 		const delta = current.sub(worldPan.prev);
 		if (delta.lengthSq() > 1e-8) {
diff --git a/src/lib/vrGamePanel.js b/src/lib/vrGamePanel.js
index e6b62cc0..decf8b6c 100644
--- a/src/lib/vrGamePanel.js
+++ b/src/lib/vrGamePanel.js
@@ -51,6 +51,7 @@ import {
 	shellMenuItems,
 	gameLevels,
 	shellSettingViews,
+	shellLevelTabs,
 	shellPageTitle,
 	shellGameName,
 	shellHelpLines,
@@ -446,6 +447,8 @@ function shellModel() {
 		subtitle: shellGameName(),
 		items: shellMenuItems({ vr: true }),
 		levels: levels ? { list: levels.list, current: levels.current } : null,
+		tabs: shellLevelTabs(), // 33 (G3)
+		levelPage: menu.levelPage ?? null,
 		settings: shellSettingViews({ vr: true }),
 		help: shellHelpLines({ vr: true })
 	};
diff --git a/tests/e2e/vr-world-reel.test.cjs b/tests/e2e/vr-world-reel.test.cjs
new file mode 100644
index 00000000..2c964ade
--- /dev/null
+++ b/tests/e2e/vr-world-reel.test.cjs
@@ -0,0 +1,193 @@
+// 33 (G2): THE STICK REELS WHAT YOU HOLD, the world included. The Quest report (Untangle):
+// "I can make bigger/smaller the globe but cannot use up/down on stick to move it further/
+// closer ... just as in edit mode for objects". Two core seams:
+//
+//   1. the one-hand world PAN (a right grip on scenery/air in Edit, or in Interact when the play
+//      block says `locomotion.worldGrab`): that hand's stick Y now reels the world along the
+//      hand's ray with Edit's own object reel (grabStickAdjust) — forward pushes it away, back
+//      pulls it in — starting from the distance to the gripped spot;
+//   2. `api.claimInput('sticks')`: a module that reads the sticks itself (Untangle's held globe:
+//      Y reels, X scales) stands BOTH sticks' navigation down — left-stick move, right-stick
+//      snap turn and teleport — and the call answers true (an older core: undefined).
+//
+// Driven through the REAL per-frame path with a fake XR session (fakeXR.cjs) and a spec-accurate
+// reference space (installSpace), so the head pose is what a headset would report.
+const h = require('./helpers.cjs');
+const xr = require('./fakeXR.cjs');
+
+const grip = async (page, hand, down) => {
+	await xr.button(page, hand, 1, down);
+	await page.waitForTimeout(250);
+};
+/**
+ * A SPEC-ACCURATE right hand: a headset reports controller poses IN the current reference space,
+ * so when the world pan offsets that space the controller's world pose moves with it (that is
+ * what lets the pan self-correct). fakeXR writes controller matrices directly; this re-derives
+ * the hand from its BASE-space pose on every setReferenceSpace, synchronously, as a runtime would.
+ * @param {any} page */
+const specHands = (page) =>
+	page.evaluate(() => {
+		const r = window.__fakeXR.renderer;
+		window.__specHands = {};
+		window.__specSync = () => {
+			const space = r.xr.getReferenceSpace();
+			if (!space?.__m) return;
+			const inv = space.__m.clone().invert();
+			for (const [slot, base] of Object.entries(window.__specHands)) {
+				const c = r.xr.getController(Number(slot));
+				c.matrix.copy(inv.clone().multiply(base));
+				c.updateMatrixWorld(true);
+			}
+		};
+		const set = r.xr.setReferenceSpace.bind(r.xr);
+		r.xr.setReferenceSpace = (space) => {
+			set(space);
+			window.__specSync();
+		};
+	});
+/** pose the right hand in BASE space (yaw 0 aims -Z) @param {any} page @param {number[]} pos @param {{pitch?: number}} [aim] */
+const specRight = (page, pos, aim = {}) =>
+	page.evaluate(({ pos, aim }) => {
+		const THREE = window.__stores.THREE;
+		const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(aim.pitch ?? 0, 0, 0, 'YXZ'));
+		window.__specHands[1] = new THREE.Matrix4().compose(new THREE.Vector3(...pos), q, new THREE.Vector3(1, 1, 1));
+		window.__specSync();
+	}, { pos, aim });
+const debug = (page) => page.evaluate(() => window.__stores.vrControls.vrGripDebug());
+/** hold a stick for `ms`, then centre it */
+const hold = async (page, hand, x, y, ms) => {
+	await xr.stick(page, hand, x, y);
+	await page.waitForTimeout(ms);
+	await xr.stick(page, hand, 0, 0);
+	await page.waitForTimeout(150);
+};
+
+h.run(async () => {
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A');
+
+	// ---- 0. the pure step: Edit's object reel on the reach -----------------------------------------
+	const pure = await A.page.evaluate(() => {
+		const v = window.__stores.vrControls;
+		return { push: v.worldReelStep(2, -1), pull: v.worldReelStep(2, 1), dead: v.worldReelStep(2, 0.1), far: v.worldReelStep(60, -1), near: v.worldReelStep(0.05, 1) };
+	});
+	h.check(pure.push.push > 0.05 && Math.abs(pure.push.reach - 2.06) < 1e-9, `stick forward pushes the gripped spot away (2 m -> ${pure.push.reach.toFixed(3)} m, the grabStickAdjust share)`);
+	h.check(pure.pull.push < -0.05 && Math.abs(pure.pull.reach - 1.94) < 1e-9, `stick back pulls it in (2 m -> ${pure.pull.reach.toFixed(3)} m)`);
+	h.check(pure.dead.push === 0, 'inside the dead zone nothing moves');
+	h.check(pure.far.push === 0 && pure.near.push === 0, 'clamped like an object reel (60 m out, 5 cm in)');
+
+	// ---- the room: a floor and a wall 3 m ahead --------------------------------------------------------
+	await A.page.evaluate(async () => {
+		const s = window.__stores;
+		s.commandsHandler.sceneCommand('/create box');
+		s.commandsHandler.sceneCommand('/create box');
+		await new Promise((r) => setTimeout(r, 600));
+		let g;
+		s.objectsGroup.subscribe((v) => (g = v))();
+		const [floor, wall] = g.children.filter((c) => c.name === 'Box').slice(-2);
+		floor.scale.set(20, 0.5, 20);
+		floor.position.set(0, -0.25, 0);
+		floor.userData.physics = { mode: 'static' };
+		floor.updateMatrixWorld(true);
+		wall.scale.set(10, 4, 0.5);
+		wall.position.set(0, 2, -3);
+		wall.userData.physics = { mode: 'static' };
+		wall.updateMatrixWorld(true);
+		s.objectActions.deselectObject();
+		s.isVRMode.set(true);
+		s.vrSnapAngle.set(45);
+	});
+	await A.page.waitForTimeout(500);
+	await xr.install(A.page);
+	await xr.installSpace(A.page, { head: [0, 1.6, 0], yaw: 0 });
+	await specHands(A.page);
+	await A.page.waitForTimeout(300);
+
+	// ---- 1. EDIT: a right grip on the wall pans; its stick reels the world ---------------------------
+	await specRight(A.page, [0.3, 1.6, 0]); // aims -Z at the wall's face (z -2.75)
+	await grip(A.page, 'right', true);
+	let d = await debug(A.page);
+	h.check(d.worldPan && d.grab === null, `premise: Edit, a right grip on the wall is the world pan (${JSON.stringify(d)})`);
+	h.check(Math.abs(d.panReach - 2.75) < 0.05, `the reel starts at the gripped spot: the wall's face 2.75 m along the ray (${d.panReach})`);
+	let head0 = await xr.head(A.page);
+	await hold(A.page, 'right', 0, -1, 500);
+	let head1 = await xr.head(A.page);
+	d = await debug(A.page);
+	h.check(head1.z - head0.z > 0.3, `stick FORWARD pushes the world away: you end up farther from the wall (head z ${head0.z.toFixed(2)} -> ${head1.z.toFixed(2)})`);
+	h.check(d.panReach > 3, `...the reach grew with it (${d.panReach.toFixed(2)} m)`);
+	h.check(Math.abs(head1.z - head0.z - (d.panReach - 2.75)) < 0.05, `...by exactly the reel: the world moved what the reach grew (${(head1.z - head0.z).toFixed(3)} vs ${(d.panReach - 2.75).toFixed(3)} m)`);
+	const reach1 = d.panReach;
+	h.check(Math.abs(head1.yaw - head0.yaw) < 1e-6 && Math.abs(head1.x - head0.x) < 0.01 && Math.abs(head1.y - head0.y) < 0.01, `...straight along the hand's ray: no turn, no sideways or vertical drift (${JSON.stringify(head1)})`);
+	await hold(A.page, 'right', 0, 1, 500);
+	const head2 = await xr.head(A.page);
+	d = await debug(A.page);
+	h.check(head2.z < head1.z - 0.3 && d.panReach < reach1, `stick BACK pulls it closer (head z ${head1.z.toFixed(2)} -> ${head2.z.toFixed(2)}, reach ${reach1.toFixed(2)} -> ${d.panReach.toFixed(2)} m)`);
+	await hold(A.page, 'right', 0, 0, 300);
+	const head2b = await xr.head(A.page);
+	h.check(Math.abs(head2b.z - head2.z) < 1e-6, 'the stick at rest: the world stays where the reel left it (no drift)');
+	await grip(A.page, 'right', false);
+	d = await debug(A.page);
+	h.check(!d.worldPan && d.panReach === null, 'releasing the grip ends the pan (and its reel)');
+
+	// ---- 2. INTERACT + locomotion.worldGrab: the same reel during a game ----------------------------
+	await A.page.evaluate(() => {
+		const s = window.__stores;
+		s.scenePhysics.setScenePhysics({ play: { locomotion: { worldGrab: true } } });
+		s.objectActions.setEditorMode('interact');
+	});
+	await A.page.waitForTimeout(400);
+	await grip(A.page, 'right', true);
+	d = await debug(A.page);
+	h.check(d.worldPan, `premise: Interact with worldGrab, the right grip pans the world (${JSON.stringify(d)})`);
+	head0 = await xr.head(A.page);
+	await hold(A.page, 'right', 0, -1, 400);
+	head1 = await xr.head(A.page);
+	h.check(head1.z - head0.z > 0.2, `Interact (worldGrab): stick forward pushes the world away too (head z ${head0.z.toFixed(2)} -> ${head1.z.toFixed(2)})`);
+	await grip(A.page, 'right', false);
+	await A.page.evaluate(() => {
+		const s = window.__stores;
+		s.objectActions.setEditorMode('edit');
+		s.scenePhysics.setScenePhysics({ play: { locomotion: null } });
+	});
+	await A.page.waitForTimeout(300);
+
+	// ---- 3. api.claimInput('sticks'): both sticks' navigation stands down ----------------------------
+	const claimed = await A.page.evaluate(async () => {
+		const s = window.__stores;
+		window.__sticks = {};
+		await s.moduleSDK.initModules([
+			{
+				id: 'sticks-probe',
+				name: 'Sticks probe',
+				version: '1.0.0',
+				description: 'claims the sticks',
+				register(api) {
+					window.__sticks.api = api;
+				}
+			}
+		]);
+		const api = window.__sticks.api;
+		return { sticks: api.claimInput('sticks'), unknown: api.claimInput('nonsense'), suppressed: s.vrControls.vrNavigationSuppressed() };
+	});
+	h.check(claimed.sticks === true && claimed.unknown === false, `claimInput answers whether this core knows the scope ('sticks' ${claimed.sticks}, 'nonsense' ${claimed.unknown})`);
+	h.check(claimed.suppressed === true, 'a claimed "sticks" stands stick navigation down (vrNavigationSuppressed)');
+	await A.page.evaluate(() => window.__sticks.api.releaseInput('nonsense'));
+	head0 = await xr.head(A.page);
+	await hold(A.page, 'right', 1, 0, 300); // a snap turn, if the stick were free
+	await hold(A.page, 'left', 0, -1, 500); // a flight forward, if the stick were free
+	head1 = await xr.head(A.page);
+	h.check(Math.abs(head1.yaw - head0.yaw) < 1e-6, `claimed: the right stick does not snap-turn (yaw ${head0.yaw.toFixed(3)} -> ${head1.yaw.toFixed(3)})`);
+	h.check(Math.hypot(head1.x - head0.x, head1.z - head0.z) < 0.01, `claimed: the left stick does not move you (${JSON.stringify(head0)} -> ${JSON.stringify(head1)})`);
+	await A.page.evaluate(() => window.__sticks.api.releaseInput('sticks'));
+	await A.page.waitForTimeout(200);
+	await hold(A.page, 'right', 1, 0, 300);
+	await hold(A.page, 'left', 0, -1, 500);
+	const head3 = await xr.head(A.page);
+	h.check(Math.abs(head3.yaw - head1.yaw) > 0.5, `released: the right stick snap-turns again (yaw ${head1.yaw.toFixed(3)} -> ${head3.yaw.toFixed(3)})`);
+	h.check(Math.hypot(head3.x - head1.x, head3.z - head1.z) > 0.2, 'released: the left stick moves you again');
+
+	await A.page.evaluate(() => window.__stores.moduleSDK.deactivateModule('sticks-probe'));
+	await xr.uninstall(A.page);
+	await A.page.evaluate(() => window.__stores.isVRMode.set(false));
+	await h.finish(browser);
+});
diff --git a/tests/unit/gameShell.test.js b/tests/unit/gameShell.test.js
index a3acfb70..3c7e5460 100644
--- a/tests/unit/gameShell.test.js
+++ b/tests/unit/gameShell.test.js
@@ -13,8 +13,12 @@ import {
 	setGameHelp,
 	shellHelpLines,
 	resetGameShell,
-	gameShellDebug
+	gameShellDebug,
+	shellLevelTabs,
+	shellMenu,
+	showShellPage
 } from '../../src/lib/gameShell.js';
+import { get } from 'svelte/store';
 import { gameSettingValue, setGameSetting, debugResetGameSettings, registerGameSetting } from '../../src/lib/gameSettings.js';
 import { fpsOf } from '../../src/lib/fpsMeter.js';
 import { vignetteTarget, easeVignette } from '../../src/lib/comfortVignette.js';
@@ -112,3 +116,31 @@ describe('fps + vignette', () => {
 		expect(easeVignette(1, 0, 10)).toBe(0);
 	});
 });
+
+describe('33 (G3): level tabs + the headset grid pages', () => {
+	it('a choice registered onLevels is a tab row; others are not', () => {
+		registerGameSetting({ id: 'board', label: 'Board', type: 'choice', options: ['globe', '2d'], optionLabels: ['Globe', '2D board'], default: 'globe', onLevels: true }, 'm');
+		registerGameSetting({ id: 'hint', type: 'toggle', default: true, onLevels: true }, 'm');
+		registerGameSetting({ id: 'speed', type: 'choice', options: ['a', 'b'], default: 'a' }, 'm');
+		const tabs = shellLevelTabs();
+		expect(tabs.map((t) => t.id)).toEqual(['board']);
+		expect(tabs[0]).toEqual({ id: 'board', label: 'Board', options: [{ value: 'globe', label: 'Globe' }, { value: '2d', label: '2D board' }], value: 'globe' });
+	});
+	it('a tab press sets the choice (once), a bad index refuses', () => {
+		let heard = 0;
+		registerGameSetting({ id: 'board', type: 'choice', options: ['globe', '2d'], default: 'globe', onLevels: true, onChange: () => heard++ }, 'm');
+		expect(pressShellHit('shell:tab:0:1')).toBe(true);
+		expect(gameSettingValue('board')).toBe('2d');
+		expect(heard).toBe(1);
+		expect(pressShellHit('shell:tab:0:1')).toBe(true); // already on: nothing changes
+		expect(heard).toBe(1);
+		expect(pressShellHit('shell:tab:3:0')).toBe(false);
+		expect(pressShellHit('shell:tab:0:9')).toBe(false);
+	});
+	it('the page arrows set the grid page; a page change resets it to "where the current level is"', () => {
+		expect(pressShellHit('shell:lvpage:1')).toBe(true);
+		expect(get(shellMenu).levelPage).toBe(1);
+		showShellPage('settings');
+		expect(get(shellMenu).levelPage).toBe(null);
+	});
+});
diff --git a/tests/unit/shellPanelDraw.test.js b/tests/unit/shellPanelDraw.test.js
new file mode 100644
index 00000000..9dc548fc
--- /dev/null
+++ b/tests/unit/shellPanelDraw.test.js
@@ -0,0 +1,67 @@
+// 33 (G3): the headset's Levels page — EVERY level (it drew the first 20: Untangle's levels
+// 21-30 were unreachable in VR), the game's level tabs above the grid, pages when even a
+// 6-column grid cannot hold them. Drawn onto a stub 2D context; the hits are what the laser can press.
+import { describe, it, expect } from 'vitest';
+import { drawShellPage, levelGridLayout, SHELL_STAGE } from '../../src/lib/shellPanelDraw.js';
+
+/** a 2D context that records nothing but answers measureText */
+function stubContext() {
+	const noop = () => {};
+	return { beginPath: noop, moveTo: noop, arcTo: noop, closePath: noop, fill: noop, stroke: noop, fillText: noop, measureText: (/** @type {string} */ t) => ({ width: t.length * 10 }) };
+}
+const levels = (/** @type {number} */ n, current = '1') => ({ list: Array.from({ length: n }, (_, i) => ({ id: String(i + 1), label: 'Level ' + (i + 1), locked: i > 4 })), current });
+const BOARD = { id: 'board', label: 'Board', options: [{ value: 'globe', label: 'Globe' }, { value: '2d', label: '2D board' }], value: '2d' };
+/** @param {any} extra */
+const page = (extra) => drawShellPage(/** @type {any} */ (stubContext()), /** @type {any} */ ({ page: 'levels', title: 'Levels', subtitle: '', items: [], settings: [], help: [], levels: levels(30), ...extra }), { k: 1 });
+const ids = (/** @type {any[]} */ hits) => hits.map((h) => h.id);
+
+describe('the grid layout', () => {
+	it('up to 20 levels and no tabs: the 5 x 4 of big tiles it always had', () => {
+		expect(levelGridLayout(20, 0, null, 0)).toMatchObject({ cols: 5, rows: 4, tw: 190, th: 96, perPage: 20, pages: 1, page: 0 });
+	});
+	it('30 levels with a tab row: one page of 6 x 5, tiles at least 64 px tall', () => {
+		const g = levelGridLayout(30, 1, null, 0);
+		expect(g).toMatchObject({ cols: 6, rows: 5, perPage: 30, pages: 1 });
+		expect(g.th).toBeGreaterThanOrEqual(64);
+		expect(g.top + g.rows * g.th + (g.rows - 1) * g.gap).toBeLessThanOrEqual(SHELL_STAGE.h - 72);
+	});
+	it('60 levels: pages; null opens the page holding the current level; a page is clamped', () => {
+		const g = levelGridLayout(60, 1, null, 44);
+		expect(g.pages).toBe(2);
+		expect(g.page).toBe(1);
+		expect(levelGridLayout(60, 1, 9, 0).page).toBe(1);
+		expect(levelGridLayout(60, 1, 0, 44).page).toBe(0);
+	});
+});
+
+describe('the drawn page', () => {
+	it('every one of 30 levels is a pressable tile (unlocked ones), no page arrows', () => {
+		const hits = ids(page({}));
+		const tiles = hits.filter((id) => id.startsWith('shell:level:'));
+		// levels 1-5 open, 6-30 locked (drawn, not pressable)
+		expect(tiles).toEqual(['1', '2', '3', '4', '5'].map((n) => 'shell:level:' + n));
+		const all = ids(page({ levels: { list: levels(30).list.map((l) => ({ ...l, locked: false })), current: '30' } }));
+		expect(all.filter((id) => id.startsWith('shell:level:')).length).toBe(30);
+		expect(all).toContain('shell:level:30');
+		expect(all.some((id) => id.startsWith('shell:lvpage:'))).toBe(false);
+	});
+	it('the tab row: one tab per option, above the grid', () => {
+		const hits = page({ tabs: [BOARD] });
+		expect(ids(hits).filter((id) => id.startsWith('shell:tab:'))).toEqual(['shell:tab:0:0', 'shell:tab:0:1']);
+		const tab = hits.find((h) => h.id === 'shell:tab:0:0');
+		const tile = hits.find((h) => h.id === 'shell:level:1');
+		expect(tab && tile && tab.y + tab.h).toBeLessThan(/** @type {any} */ (tile).y);
+		// nothing overlaps (a press means one thing)
+		const overlap = hits.some((a, i) => hits.some((b, j) => j > i && a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h));
+		expect(overlap).toBe(false);
+	});
+	it('60 open levels with a tab: page 1 shows 31-60 and an arrow back to page 1', () => {
+		const list = Array.from({ length: 60 }, (_, i) => ({ id: String(i + 1), label: 'L' + (i + 1) }));
+		const hits = ids(page({ tabs: [BOARD], levels: { list, current: '1' }, levelPage: 1 }));
+		expect(hits).toContain('shell:level:31');
+		expect(hits).toContain('shell:level:60');
+		expect(hits).not.toContain('shell:level:30');
+		expect(hits).toContain('shell:lvpage:0');
+		expect(hits).not.toContain('shell:lvpage:2');
+	});
+});