@volter/editor-game 0.5.65

package/src/design-system-stories/InspectorNarrowBodies.stories.tsx

@@ -0,0 +1,406 @@
+/**
+ * NARROW-COLUMN coverage over the REAL content-heavy section bodies, at rail
+ * width. The projection is subject-agnostic, so what these prove is not the
+ * projection but whether the bodies BUILT FOR THE OLD WIDER COLUMN survive the
+ * slim rail. Each story renders a real body (or a real composed subject) inside
+ * a ~300px `RailColumn`, which is the narrow column's target width, with
+ * `overflow: hidden` so anything that spills is VISIBLE rather than scrolled
+ * away.
+ *
+ * Which bodies are REAL vs stand-in (stated honestly, per the review ask):
+ *  - CSS editors — the REAL `inspector-widgets` components (BorderEditor,
+ *    AlignmentGrid, Gradient/Shadow/Filter composers, ScrubbableInput),
+ *    assembled into a fixture subject. The BODY COMPONENTS are production; the
+ *    subject wrapping them is synthetic (a live react/DOM subject needs a
+ *    running document session + OID index, not constructible in a bounded
+ *    story).
+ *  - State machine — the REAL `XStateMachineInspector` over the REAL
+ *    `characterAnimationMachine` fixture. Fully real; no live actor is needed
+ *    (the static graph view is the design-time state).
+ *  - Ingest coverage — the REAL `ingestCoverageSection(deriveCapabilityCoverage(…))`
+ *    section, the exact one the Game Inspector composes.
+ *  - Typed-three groups — a REAL composed subject: `AuthoringInspectorSurface`
+ *    over the shared `createAuthoringFixture` adapter, selected to the mesh, so
+ *    its grouped descriptor bodies (Material, Gameplay, loose) render exactly as
+ *    the composer builds them.
+ *  - Model asset — a REAL composed subject: `AuthoringInspectorSurface` over a
+ *    `SourceObject3DAuthoringAdapter` built from a hand-authored THREE scene
+ *    (the same fixture the model-asset workflow exercises), so the Geometry /
+ *    Animation / Materials / Source sections are the real contributions.
+ */
+
+import { UNCAPTURED_REACH } from '../host/adapter-reach';
+import { SourceObject3DAuthoringAdapter } from '@volter/editor-core/authoring/source-object3d-authoring-adapter';
+import { faBrain, faPalette } from '@fortawesome/free-solid-svg-icons';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ReactNode, useState } from 'react';
+import * as THREE from 'three';
+// Side-effect: registers the model-asset section contributions (Geometry,
+// Animation, Materials, Source) into the inspector-section registry.
+import '@volter/editor-core/authoring/model-asset-inspector-section';
+import { ingestCoverageSection } from '@volter/editor-core/components/CapabilityCoverageSection';
+import { InspectionProjectionView } from '@volter/editor-core/components/InspectionProjection';
+import { AuthoringInspectorSurface } from '@volter/editor-core/components/Inspector';
+import { deriveCapabilityCoverage } from '../host/coverage/capability-coverage';
+import { createAuthoringFixture } from '../host/design-system-stories/fixtures/authoring';
+import { StoryEditorRuntime } from '../host/design-system-stories/fixtures/editor-runtime';
+import type { InspectionSection, InspectionSubject } from '@volter/editor-core/inspection/model';
+import {
+  AlignmentGrid,
+  type AlignmentValue,
+  AnchorPresets,
+  BorderEditor,
+  BorderRadiusEditor,
+  type BorderRadiusValue,
+  type BorderValue,
+  ColorPicker,
+  DEFAULT_SHADOW,
+  FilterEditor,
+  GradientEditor,
+  type GradientValue,
+  parseFilterFunctions,
+  ScrubbableInput,
+  ShadowEditor,
+  type ShadowValue,
+  uniformBorder,
+  uniformRadius,
+} from '@volter/editor-sdk/widgets';
+import { characterAnimationMachine } from '../xstate/character-animation-machine.fixture';
+import { XStateMachineInspector } from '../xstate/XStateMachineInspector';
+
+/** The narrow column's target width. `overflow: hidden` so a body that was
+ *  built wider than the rail SPILLS visibly instead of scrolling. */
+const RAIL_WIDTH = 300;
+function RailColumn({ children }: { readonly children: ReactNode }) {
+  return (
+    <div
+      style={{
+        width: RAIL_WIDTH,
+        height: 600,
+        display: 'flex',
+        border: '1px solid var(--vgai-border-2)',
+        borderRadius: 8,
+        overflow: 'hidden',
+        background: 'var(--vgai-bg-1)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function customSection(
+  id: string,
+  title: string,
+  icon: InspectionSection['icon'],
+  order: number,
+  body: ReactNode,
+): InspectionSection {
+  return { id, title, icon, order, body: { kind: 'custom', render: () => body } };
+}
+
+function columnSubject(input: {
+  readonly id: string;
+  readonly title: string;
+  readonly kindLabel: string;
+  readonly sections: readonly InspectionSection[];
+}): InspectionSubject {
+  return {
+    id: input.id,
+    title: input.title,
+    identity: { rename: { readOnly: false, set: () => undefined }, kindLabel: input.kindLabel },
+    presentation: { preferred: 'column' },
+    quickActions: [],
+    related: [],
+    sections: input.sections,
+  };
+}
+
+// ---- CSS editors (real widget bodies) ------------------------------------
+
+function StyleBody() {
+  const [color, setColor] = useState('#12203a');
+  const [border, setBorder] = useState<BorderValue>(
+    uniformBorder({ width: 1, style: 'solid', color: '#4f8cff' }),
+  );
+  const [radius, setRadius] = useState<BorderRadiusValue>(uniformRadius(8));
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <ColorPicker value={color} onChange={setColor} onChangeEnd={setColor} />
+      <BorderEditor value={border} onChange={setBorder} onChangeEnd={setBorder} />
+      <BorderRadiusEditor value={radius} onChange={setRadius} onChangeEnd={setRadius} />
+    </div>
+  );
+}
+
+function FillBody() {
+  const [gradient, setGradient] = useState<GradientValue>({
+    type: 'linear',
+    angle: 180,
+    stops: [
+      { color: '#ff7f50', position: 0 },
+      { color: '#4f8cff', position: 1 },
+    ],
+  });
+  return (
+    <div style={{ padding: 8 }}>
+      <GradientEditor value={gradient} onChange={setGradient} onChangeEnd={setGradient} />
+    </div>
+  );
+}
+
+function EffectsBody() {
+  const [shadows, setShadows] = useState<ShadowValue[]>([DEFAULT_SHADOW]);
+  const [filter, setFilter] = useState(parseFilterFunctions('blur(4px) saturate(120%)'));
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <ShadowEditor value={shadows} onChange={setShadows} onChangeEnd={setShadows} />
+      <FilterEditor value={filter} onChange={setFilter} onChangeEnd={setFilter} />
+    </div>
+  );
+}
+
+function LayoutBody() {
+  const [alignment, setAlignment] = useState<AlignmentValue>({
+    justify: 'center',
+    align: 'center',
+  });
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <AlignmentGrid value={alignment} onChange={setAlignment} />
+      <AnchorPresets onSelect={() => undefined} />
+    </div>
+  );
+}
+
+function PositionBody() {
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [w, setW] = useState(240);
+  const [h, setH] = useState(64);
+  return (
+    <div
+      style={{
+        padding: 8,
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: 6,
+      }}
+    >
+      <ScrubbableInput label="X" value={x} unit="px" onChange={setX} onChangeEnd={setX} />
+      <ScrubbableInput label="Y" value={y} unit="px" onChange={setY} onChangeEnd={setY} />
+      <ScrubbableInput label="W" value={w} unit="px" onChange={setW} onChangeEnd={setW} />
+      <ScrubbableInput label="H" value={h} unit="px" onChange={setH} onChangeEnd={setH} />
+    </div>
+  );
+}
+
+const cssSubject = columnSubject({
+  id: 'dom:header-bar',
+  title: 'HeaderBar',
+  kindLabel: 'div · react',
+  sections: [
+    customSection('group:style', 'Style', faPalette, 2000, <StyleBody />),
+    customSection('group:fill', 'Fill', faPalette, 2100, <FillBody />),
+    customSection('group:effects', 'Effects', faPalette, 2200, <EffectsBody />),
+    customSection('group:layout', 'Layout', faPalette, 2300, <LayoutBody />),
+    customSection('group:position', 'Position', faPalette, 2400, <PositionBody />),
+  ],
+});
+
+// ---- State machine (real inspector + real fixture machine) ---------------
+
+const stateMachineSubject = columnSubject({
+  id: 'asset:character-animation',
+  title: 'Character Animation',
+  kindLabel: 'State machine',
+  sections: [
+    customSection(
+      'state-machine',
+      'State machine',
+      faBrain,
+      4000,
+      <div style={{ height: 300, minHeight: 0 }}>
+        <XStateMachineInspector
+          machine={characterAnimationMachine}
+          currentStateId="character-animation.idle"
+        />
+      </div>,
+    ),
+  ],
+});
+
+// ---- Ingest coverage (the real composed section) -------------------------
+
+const coverageReport = deriveCapabilityCoverage({
+  worldId: 'wild-three-game',
+  reach: UNCAPTURED_REACH,
+  surface: 'three',
+  reachMechanism:
+    "the game's own three was unreachable or version-mismatched at mount, so nothing was captured",
+  loop: {
+    verdict: 'gated',
+    evidence: {
+      pendingWhileHeld: 1,
+      firedWhileHeld: 0,
+      progressBefore: 412,
+      progressAfter: 412,
+      windowMs: 1500,
+    },
+  },
+  loopReason: 'verified: one scheduled callback withheld and no draw advanced',
+  contract: {
+    declared: true,
+    root: true,
+    start: false,
+    pause: true,
+    resume: true,
+    systems: { commands: ['level.quickStart', 'hud.message'], state: ['player', 'runtime'] },
+  },
+  ownership: { writable: false, reason: 'vendored upstream bytes are locked' },
+  dataWriter: null,
+  writeReach: null,
+  systemAdapters: [
+    { slot: 'physics', state: 'unanswered' },
+    {
+      slot: 'networking',
+      state: 'empty',
+      evidence: 'no socket, peer or state-fetch call anywhere in the game source',
+    },
+    { slot: 'navigation', state: 'bound' },
+    { slot: 'audio', state: 'bound' },
+    { slot: 'camera', state: 'bound' },
+    { slot: 'debug', state: 'bound' },
+    { slot: 'renderDebug', state: 'bound' },
+  ],
+  projectVerbs: [
+    {
+      slot: 'export',
+      state: 'absent',
+      evidence: 'every root this project declares is an ingest root',
+      missing: 'this game can never leave the editor',
+      fix: 'there is no mechanism today — the export path supports only built-in three roots',
+    },
+  ],
+});
+
+const coverageSubject = columnSubject({
+  id: 'game:wild-three-game',
+  title: 'wild-three-game',
+  kindLabel: 'Ingested game',
+  sections: [ingestCoverageSection(coverageReport)],
+});
+
+// ---- Composed-subject fixtures (real adapters) ---------------------------
+
+/** A real THREE model scene → the source-object3d model adapter, the same
+ *  fixture the model-asset workflow exercises. */
+function buildModelAdapter(store: Parameters<typeof AuthoringInspectorSurface>[0]['store']) {
+  const scene = new THREE.Scene();
+  const root = new THREE.Group();
+  root.name = 'Ship';
+  const material = new THREE.MeshStandardMaterial({ color: 0x884422 });
+  material.name = 'Hull';
+  const mesh = new THREE.Mesh(new THREE.BoxGeometry(), material);
+  mesh.name = 'Hull mesh';
+  root.add(mesh);
+  root.animations = [
+    new THREE.AnimationClip('Hover', 2, [
+      new THREE.VectorKeyframeTrack('Ship.position', [0, 2], [0, 0, 0, 0, 1, 0]),
+    ]),
+  ];
+  scene.add(root);
+  return new SourceObject3DAuthoringAdapter(store, scene, {
+    documentId: 'ship.glb',
+    title: 'ship.glb',
+    sourcePath: '/models/ship.glb',
+    documentKind: 'asset',
+    modelSource: { kind: 'project-file', path: '/models/ship.glb' },
+  });
+}
+
+const meta = {
+  title: 'Design System/Product Systems/Inspector Narrow Bodies',
+  parameters: { controls: { disable: true }, layout: 'centered' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** (1) react/DOM CSS editors — the real border/gradient/shadow/filter/alignment
+ *  widgets, at rail width. */
+export const CssEditorsColumn: Story = {
+  render: () => (
+    <RailColumn>
+      <InspectionProjectionView subject={cssSubject} presentation="column" surface="dom" />
+    </RailColumn>
+  ),
+};
+
+/** (2) The real xstate machine inspector (static graph view). */
+export const StateMachineColumn: Story = {
+  render: () => (
+    <RailColumn>
+      <InspectionProjectionView
+        subject={stateMachineSubject}
+        presentation="column"
+        surface="asset-lab"
+      />
+    </RailColumn>
+  ),
+};
+
+/** (3) The real ingest coverage section. */
+export const IngestCoverageColumn: Story = {
+  render: () => (
+    <RailColumn>
+      <InspectionProjectionView subject={coverageSubject} presentation="column" surface="three" />
+    </RailColumn>
+  ),
+};
+
+/** (4) Typed-three grouped descriptor bodies — a real composed mesh subject
+ *  (Material / Gameplay groups + loose fields). */
+export const TypedThreeGroupsColumn: Story = {
+  render: () => {
+    const adapter = createAuthoringFixture();
+    return (
+      <StoryEditorRuntime>
+        {(runtime) => (
+          <RailColumn>
+            <AuthoringInspectorSurface
+              store={runtime.store}
+              adapter={adapter}
+              documentSelection={{ adapter, nodeId: 'player' }}
+              presentation="column"
+              surface="three"
+            />
+          </RailColumn>
+        )}
+      </StoryEditorRuntime>
+    );
+  },
+};
+
+/** (5) Model-asset sections — a real composed subject (Geometry / Animation /
+ *  Materials / Source) from a hand-authored THREE scene. */
+export const ModelAssetColumn: Story = {
+  render: () => (
+    <StoryEditorRuntime>
+      {(runtime) => {
+        const adapter = buildModelAdapter(runtime.store);
+        return (
+          <RailColumn>
+            <AuthoringInspectorSurface
+              store={runtime.store}
+              adapter={adapter}
+              documentSelection={{ adapter, nodeId: adapter.documentId }}
+              presentation="column"
+              surface="asset-lab"
+            />
+          </RailColumn>
+        );
+      }}
+    </StoryEditorRuntime>
+  ),
+};

package/src/edit-mode/edit-mode-audio.ts

@@ -0,0 +1,56 @@
+/**
+ * Project-lifetime audio for the editor authoring session.
+ *
+ * Edit mode uses the same first-party Three/Web Audio graph and AudioAdapter
+ * implementation as play mode. The mounted game's adapter temporarily wins
+ * while Play is active; on Stop, `getActiveAudio()` falls back to this graph.
+ *
+ * It lives in `@volter/editor-game` because it IS the engine's audio runtime — the
+ * mixer, the bus graph and the pose guard behind `@volter/game-runtime/setup/setup-audio` —
+ * and the host was installing all of it at boot for every project, including a
+ * models project that plays nothing and has no sound (WORK.md §The open-source
+ * launch, phase 1 unit 7). The one host surface that reads it, the header
+ * meter, already answers "Audio unavailable" when no adapter is installed, and
+ * the panel that inspects it (`audio.utility`) has been this package's since
+ * unit 2. Same shape as `edit-mode-networking.ts` beside it.
+ */
+
+import { setEditModeAudio } from '@volter/editor-core/authoring/active-systems';
+import {
+  createAudioSystemAdapter,
+  releaseAudioMeters,
+} from '@volter/game-runtime/adapter/first-party-audio-system';
+import { setupAudio } from '@volter/game-runtime/setup/setup-audio';
+import * as THREE from 'three';
+
+export function installEditModeAudio(camera: THREE.Camera = new THREE.Camera()): () => void {
+  const audio = setupAudio(camera);
+  const adapter = createAudioSystemAdapter(audio);
+  let disposed = false;
+
+  setEditModeAudio(adapter);
+
+  // No Tone here, deliberately. This used to `import('@volter/game-runtime/audio/audio-
+  // introspection')` unconditionally, which loaded the whole `tone` package on
+  // EVERY editor boot to draw a meter — and the editor has no score of its
+  // own to report a transport for. The graph and meters the Audio panel
+  // actually shows in edit mode are the base adapter's (535d248dc), and the
+  // Tone half now lives in the `music` capability, attached by a game that
+  // uses it.
+
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    releaseAudioMeters(adapter);
+    setEditModeAudio(null);
+
+    // Do not suspend the shared native AudioContext: a concurrently starting
+    // play session can own it. Disconnect only this authoring graph — the
+    // mixer's own teardown covers every bus it minted (master, music, sfx,
+    // voice, and anything a project asked it for by name), so this cannot go
+    // stale the way four hardcoded bus names would.
+    audio.listener.gain.disconnect();
+    audio.mixer.disconnect();
+    camera.remove(audio.listener);
+  };
+}

package/src/edit-mode/edit-mode-networking.ts

@@ -0,0 +1,112 @@
+/**
+ * Project-lifetime networking config for the editor authoring session.
+ *
+ * The engine ships the `NetworkingAdapter` seam and the editor's Network
+ * inspector reads it; at RUNTIME a game produces one over a live room (the
+ * `colyseus` capability). This is the EDIT-TIME half: with no game running, a
+ * multiplayer project still has a DECLARED server. This installs a networking
+ * adapter that answers the ONE edit-time question it honestly can —
+ * `getServerConfig()`, read straight from the manifest (`server.room` and
+ * `server.endpoint`, the latter absent = the scaffold default below) — plus
+ * "not connected" stubs for the live members it cannot answer offline. It
+ * never fabricates a connection.
+ *
+ * It also never fabricates a PLAYER IDENTITY, and that is the load-bearing part
+ * of this file. An adapter is an INTERFACE the game implements, not a place the
+ * editor imposes a way of doing things: WHO a player is — and whether a name is
+ * even author-settable — is the game's own multiplayer to define. Many games
+ * (the obby's Roblox-idiom `Player${joinCount}` server naming, for one) assign
+ * names server-side and honour no client name at all. So this edit-time adapter
+ * exposes NO `getPlayerIdentity`/`setPlayerIdentity`: the editor renders
+ * identity UI only when a REAL runtime implementer provides those members
+ * (consume-by-presence), and shows nothing otherwise — never a settable field
+ * wired to a sidecar the game ignores.
+ *
+ * Unlike edit-mode AUDIO (always installed — every project has an audio graph),
+ * this installs ONLY when the open project declares a `server`: networking
+ * PRESENCE is meaningful in the editor (it gates the Network debugger tab and
+ * the network utility), so a single-player project must keep `getActive
+ * Networking()` null. The mounted game's adapter temporarily wins while Play is
+ * active; on Stop, `getActiveNetworking()` falls back to this one.
+ */
+
+import { setEditModeNetworking } from '@volter/editor-core/authoring/active-systems';
+import { getCurrentProject } from '@volter/editor-core/project-manager';
+import type {
+  ConnectionState,
+  NetPeer,
+  NetServerConfig,
+  NetworkingAdapter,
+  ReplicationStats,
+} from '@volter/editor-project/adapter';
+
+/**
+ * The endpoint a project gets when its manifest declares none — the SCAFFOLD
+ * DEFAULT, stated in `server.endpoint`'s own schema description and spelled
+ * here: the port `server/colyseus-setup.ts` listens on, against the host the
+ * editor page is served from.
+ *
+ * This is a declaration read, not a guess: a project whose room lives anywhere
+ * else says so in `server.endpoint` (ARCHITECTURE-CORE §The editor protocol,
+ * "Zero inference" — the fix for a guessed fact is a declaration slot). The
+ * host still comes from `location`, because "the machine this editor is served
+ * from" is an environment fact the game cannot state.
+ */
+
+/** Read the declared server from the open project's manifest, or `null` when
+ *  the project declares none (single-player). Defensive: an unreadable or
+ *  malformed manifest is treated as "no server", never a throw. */
+function readServerConfig(): NetServerConfig | null {
+  // The declared `process` with a port is the edit-time server: its endpoint
+  // is what the game will reach; the room is the game's own networking
+  // adapter's to report once it runs (ARCHITECTURE-CORE §The project model).
+  const declared = (getCurrentProject()?.config.configurations ?? []).find(
+    (configuration) =>
+      configuration.kind === 'process' && typeof configuration['port'] === 'number',
+  );
+  if (!declared) return null;
+  const host = globalThis.location?.hostname || 'localhost';
+  return { endpoint: `ws://${host}:${declared['port'] as number}` };
+}
+
+const NO_PEERS: NetPeer[] = [];
+const DISCONNECTED_STATS: ReplicationStats = {
+  entities: 0,
+  msgsInPerSec: 0,
+  msgsOutPerSec: 0,
+};
+
+/** Build the edit-time adapter over the declared server. The live members
+ *  answer "not connected" honestly; `getServerConfig` reports the declared
+ *  room. There are deliberately NO identity members — see the file header. */
+function createEditModeNetworkingAdapter(serverConfig: NetServerConfig): NetworkingAdapter {
+  return {
+    // Live members: no connection at edit time — honest stubs, never fabricated.
+    peers: () => NO_PEERS,
+    networkId: () => null,
+    authority: () => 'local',
+    editable: () => true,
+    getConnectionState: (): ConnectionState => 'disconnected',
+    getRoomInfo: () => null,
+    getReplicationStats: () => DISCONNECTED_STATS,
+    // Edit-time state is static (nothing connects offline), so there is nothing
+    // to notify — an honest no-op subscription rather than a live one.
+    subscribe: () => () => {},
+    // The one honest edit-time capability: the room the manifest declares.
+    getServerConfig: () => serverConfig,
+  };
+}
+
+/**
+ * Install the edit-mode networking adapter for the open project, if it declares
+ * a server. Returns a dispose that clears it. A single-player project (no
+ * declared server) never installs one, so `getActiveNetworking()` stays null
+ * and no networking UI appears. Synchronous: the only input is the
+ * already-parsed manifest.
+ */
+export function installEditModeNetworking(): () => void {
+  const serverConfig = readServerConfig();
+  if (!serverConfig) return () => {};
+  setEditModeNetworking(createEditModeNetworkingAdapter(serverConfig));
+  return () => setEditModeNetworking(null);
+}

package/src/game-document/DevicePresetPicker.tsx

@@ -0,0 +1,84 @@
+/**
+ * W2c (F13) — Game-tab device preset dropdown. Chrome-device-mode-style:
+ * picking a preset constrains the game mount to that device's CSS resolution
+ * + DPR (letterboxed/scaled by `GamePanel`), phone/tablet presets add the
+ * safe-area overlay + `--vgai-safe-area-inset-*` CSS vars and auto-enable
+ * pointer-as-touch. State lives in `../device-preview.ts`; this component is
+ * pure UI over it.
+ */
+
+import { faMobileScreenButton } from '@fortawesome/free-solid-svg-icons';
+import { AnchoredMenu, Button, EditorIcon, MenuItem, Text } from '@volter/editor-sdk/widgets';
+import { useRef, useState } from 'react';
+import {
+  DEVICE_PRESETS,
+  type DevicePreset,
+  devicePreset,
+  setTouchEmulationOverride,
+  touchEmulationActive,
+} from './device-preview';
+
+export function DevicePresetPicker({
+  onPresetChange,
+}: {
+  /** Owner applies the preset (device-preview store + game resolution). */
+  onPresetChange: (preset: DevicePreset) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  const active = devicePreset();
+  const isFit = active.kind === 'fit';
+
+  return (
+    <div className="vgai-playbar-popover-anchor">
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="comfortable"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? 'vgai-device-preset-menu' : undefined}
+        data-testid="device-preset-picker"
+        onClick={() => setOpen((value) => !value)}
+        title={
+          'Device preview — constrain the game to a device resolution + DPR. Phone/tablet presets show the safe area, set --vgai-safe-area-inset-top/right/bottom/left CSS vars on the game mount, and send mouse input as touch.'
+        }
+      >
+        <EditorIcon icon={faMobileScreenButton} size="md" />
+        <Text variant="code">{isFit ? 'Device' : `${active.width}×${active.height}`}</Text>
+      </Button>
+      {open && (
+        <AnchoredMenu
+          id="vgai-device-preset-menu"
+          anchorRef={ref}
+          className="vgai-resolution-menu"
+          gap={4}
+          onDismiss={() => setOpen(false)}
+        >
+          {DEVICE_PRESETS.map((candidate) => (
+            <MenuItem
+              key={candidate.id}
+              role="menuitemradio"
+              aria-checked={candidate.id === active.id}
+              data-testid={`device-preset-${candidate.id}`}
+              onSelect={() => {
+                onPresetChange(candidate);
+                setOpen(false);
+              }}
+            >
+              {candidate.label}
+            </MenuItem>
+          ))}
+          <MenuItem
+            role="menuitemcheckbox"
+            aria-checked={touchEmulationActive()}
+            data-testid="device-touch-toggle"
+            onSelect={() => setTouchEmulationOverride(!touchEmulationActive())}
+          >
+            {touchEmulationActive() ? '✓ ' : '  '}Pointer as touch
+          </MenuItem>
+        </AnchoredMenu>
+      )}
+    </div>
+  );
+}