castle-web-cli 0.4.10 → 0.4.12

package/kits/basic-3d/CLAUDE.md

@@ -0,0 +1,162 @@
+# basic-3d kit
+
+Actor / behavior / scene framework on a three.js WebGL viewport. To build a game you (a) write behaviors in `behaviors/*.jsx`, (b) place actors that use them in `scenes/*.scene` (plain JSON). Behaviors auto-register via file glob — drop a new file and it's picked up on next reload.
+
+This kit is plain JavaScript (no TypeScript). Use `.jsx` for files that contain JSX, `.js` otherwise. Don't add types or `.ts`/`.tsx` files.
+
+DO NOT READ `engine/`, `editors/`, OR the built-in `behaviors/` files (`Transform.jsx`, `Mesh.jsx`, `Model.jsx`, `Collider.jsx`, `Camera.jsx`) to build a game. Those are the framework itself; their complete public API (props, helpers, calling conventions) is documented inline below. Read framework source only if you are explicitly modifying the framework.
+
+## Scope
+
+Write the smallest game that satisfies what the user asked for. No sound, particles, menus, multi-level progression, or visual polish unless they specifically asked for it. A typical behavior is 30–80 lines — if yours is hitting 200, you're over-engineering: cut feel-good extras, fewer fields on props, fewer edge cases, fewer comments. Ship the core loop first; the user can ask for more.
+
+## Workflow
+
+The deck is already serving when you start (`castle-web init` set that up; see `.castle/serve.json` for the URL). The user is watching that page right now. Your job is to make it interesting incrementally:
+
+1. **Build incrementally.** Start with the smallest playable thing (one mechanic, one scene change), `npm run restart`, then add the next piece. Do NOT write the whole game in one shot.
+2. **After every edit:** `npm run restart` (no hot reload). The served page refreshes and the user sees the change.
+
+World coordinates: **+Y is up, the ground plane is XZ**, units are arbitrary world units (a character is ~1–2 units tall). Rotations are degrees. `x`/`y`/`z` on Transform is the actor's CENTER.
+
+## Behavior shape
+
+A behavior is a class. Minimal contract:
+
+```jsx
+// behaviors/MyThing.jsx
+export class MyThing {
+  static behaviorName = 'MyThing'; // must match the key used in .scene
+  static defaultProps = { speed: 6 };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  // Called every frame in play mode. dt is seconds.
+  update(actor, scene, dt) {
+    const transform = actor.components.Transform;
+    transform.x += this.props.speed * dt; // mutate component in place
+  }
+
+  // Optional. Custom three.js objects (you usually don't need this; use a
+  // Mesh or Model component instead). Runs every frame in BOTH edit and play
+  // mode. Attach objects under `scene.actorGroup(actor)` and cache them on
+  // `actor.runtime` so you don't rebuild every frame.
+  sync(actor, scene, dt) {}
+
+  // Optional. Return React nodes for game-time HUD. Coordinates are a fixed
+  // 500x700 design space scaled over the viewport. Read state your `update`
+  // set; do not start your own loops.
+  ui(actor, scene) {
+    return null;
+  }
+}
+```
+
+A fresh `Behavior` instance is constructed per actor per frame from the actor's component props — DO NOT store per-actor state on `this`. Persist transient state on `actor.runtime` (a free-form object the framework will not serialize) or on the component props themselves.
+
+`sync` is the retained-mode analog of a draw call: the framework keeps a `THREE.Group` per actor (`scene.actorGroup(actor)`, already positioned by Transform); your sync adds/updates children. Pattern: build once, cache on `actor.runtime._myThing`, rebuild only when a props key changes (`replaceGroupChild` from `engine/threeUtil` disposes the old object). Setting `actor.runtime.hidden = true` makes the built-in Mesh/Model behaviors skip rendering.
+
+## Scene file (`scenes/main.scene`, plain JSON)
+
+```json
+{
+  "background": "#10131c",
+  "lighting": { "sunAzimuth": 35, "sunElevation": 55, "sunIntensity": 2.4 },
+  "actors": [
+    {
+      "id": "player",
+      "components": {
+        "Transform": { "x": 0, "y": 0.5, "z": 0 },
+        "Mesh": { "geometry": "capsule", "height": 1.6, "color": "#8db7ffff" },
+        "Collider": { "width": 1, "height": 1.6, "depth": 1 },
+        "Mover": { "speed": 6 }
+      }
+    }
+  ]
+}
+```
+
+Rules: every actor needs a unique `id` (any string) and almost always a `Transform`. `components` keys are behavior names (the `static behaviorName`). Unspecified props fall back to that behavior's `defaultProps` — omit optional fields (rotations, scales, `tint: '#ffffffff'`, scene `name`) to keep scenes compact, especially when generating many actors. Add a behavior to an actor by adding its key to `components`; remove it by deleting the key.
+
+Scene-level fields: `background` (hex color), `lighting` (hemisphere + shadowed sun: `sky`, `ground`, `hemiIntensity`, `sun`, `sunIntensity`, `sunAzimuth`, `sunElevation`, `shadows`), `editor` (`snapToGrid`, `gridSize`). All optional with sensible defaults.
+
+## Built-in behaviors
+
+- **Transform** — `{ x, y, z, rotationX?, rotationY?, rotationZ?, scaleX?, scaleY?, scaleZ? }`. Every actor needs one. Position is the actor's center; rotations are degrees.
+- **Mesh** — `{ geometry: 'box'|'sphere'|'cylinder'|'cone'|'capsule'|'torus'|'plane', width, height, depth, color, roughness?, metalness?, emissive?, opacity?, castShadow?, receiveShadow? }`. One sized primitive with a PBR material. `width`/`height`/`depth` are the bounding dimensions for every geometry kind. Colors are `#rrggbbaa` (alpha multiplies opacity).
+- **Model** — `{ file: "models/foo.model", tint?: "#rrggbbaa" }`. Renders a multi-part `.model` file (see below). `tint` multiplies every part color; use white or omit for the original colors.
+- **Collider** — `{ kind: 'solid'|'pickup', width, height, depth, offsetX?, offsetY?, offsetZ?, debug? }`. An axis-aligned box centered on the Transform plus offset; the framework does NOT auto-resolve collisions for you. Use it as data:
+
+  ```jsx
+  for (const other of scene.getActors()) {
+    if (other.id === actor.id) continue;
+    if (scene.overlaps(actor, other)) {
+      /* react */
+    }
+  }
+  ```
+
+- **Camera** — `{ target: actorId, mode: 'follow'|'orbit', distance, azimuth, elevation, fov, lookHeight?, lerp?, orbitSpeed? }`. Place on a dedicated actor; sets `scene.camera` each frame. `follow` keeps fixed angles tracking the target (`lerp` > 0 smooths, e.g. 6); `orbit` spins the azimuth at `orbitSpeed` deg/s. Low `fov` (15–25) + high `elevation` (~40–55) + large `distance` reads near-isometric. Omit the behavior entirely for a fixed default view.
+
+## Model file (`models/*.model`, plain JSON)
+
+A model is a list of primitive parts in actor-local units (the 3d analog of a pixel `.drawing`):
+
+```json
+{
+  "parts": [
+    { "geometry": "cylinder", "y": 0.4, "width": 0.5, "height": 0.8, "depth": 0.5, "color": "#7a5230ff" },
+    { "geometry": "sphere", "y": 1.2, "width": 1.4, "height": 1.2, "depth": 1.4, "color": "#3e7c3aff" }
+  ]
+}
+```
+
+Part fields: `geometry`, `x/y/z` (offset), `rotationX/Y/Z` (degrees), `width/height/depth`, `color`, `roughness?`, `metalness?`. Edit visually in the model editor (click a part, gizmo moves/rotates it) or by hand. The actor's Transform scale resizes the whole model.
+
+## SceneRuntime API (what `scene` exposes to behaviors)
+
+- `scene.time` — seconds since start.
+- `scene.keys` — `Set` of currently-held keys, both `event.key` and `event.code` forms (`'ArrowLeft'`, `'a'`, `'KeyA'`, `' '`, `'Space'`). Read in `update`.
+- `scene.pointer` — `{ x, y, down, ground }`. `x`/`y` are normalized device coords (-1..1); `ground` is `{ x, z }` where the pointer ray hits the y=0 plane (or null).
+- `scene.getActor(id)` / `scene.getActors()` / `scene.getComponent(actor, name)`.
+- `scene.actorWith('GameController')` / `scene.actorsWith('Tree')` — find one / all actors carrying a given behavior. Prefer these to `getActors().find(a => a.components.X)`.
+- `scene.colliderBox(actorOrId)` — center-based box `{ x, y, z, width, height, depth }` from Transform + Collider, or null.
+- `scene.overlaps(a, b)` — true when two actors/ids with Collider overlap.
+- `scene.data` — the live scene data. Mutate `actor.components.X = {...}` to change props.
+- `scene.spawnActor({ components: { Transform: {...}, MyBehavior: {...} } })` — add a new actor at runtime. Returns the actor (with auto-minted `id` and `runtime = {}`). Use this; don't push to `scene.data.actors` by hand.
+- `scene.despawnActor(id)` — remove an actor at runtime (disposes its three objects). Use this; don't `splice` + `delete` by hand.
+- `scene.status` — string you can set/read for game-state ('playing', 'gameover', ...).
+- `scene.actorGroup(actor)` — the actor's `THREE.Group` (for custom `sync`).
+- `scene.three` — the `THREE.Scene` itself (escape hatch for scene-wide effects).
+- `actor.runtime` — per-instance scratchpad for transient state across frames (e.g. velocity). Not serialized.
+
+## Input shortcuts
+
+```jsx
+if (scene.keys.has('ArrowLeft') || scene.keys.has('KeyA')) transform.x -= speed * dt;
+if (scene.keys.has('ArrowRight') || scene.keys.has('KeyD')) transform.x += speed * dt;
+if (scene.keys.has('KeyJ')) /* jump */ ;
+```
+
+**Space is reserved** — the editor binds it to the play/stop toggle, so don't bind Space to a gameplay action (jump / shoot / launch / ...). Use arrows, WASD, letter keys, or on-screen buttons instead.
+
+For HUD text use a behavior's `ui` hook (returns React, 500x700 design space); for in-world visuals, use Mesh/Model components or a custom `sync`. The deck has TouchControls overlay support out of the box for mobile play (arrow keys d-pad); no setup needed.
+
+## Common exploration-shaped recipe (sketch)
+
+- `Mover` behavior on the player: read keys, move on XZ, set `transform.rotationY` to the facing direction.
+- `Camera` actor: `{ target: 'player', mode: 'follow', distance: 30, elevation: 45, fov: 20, lerp: 6 }` for a near-isometric follow view.
+- Ground: a large flat `Mesh` (`geometry: 'box'`, thin height, `castShadow: false`).
+- Pickups: `Collider { kind: 'pickup' }` + a marker behavior; on `scene.overlaps(player, pickup)` set `pickup.runtime.hidden = true` or `scene.despawnActor(...)`.
+- `GameController` (Transform optional): tracks score / status; expose HUD via `ui()`.
+
+## Don't
+
+- Don't `console.log` in tight loops — flood the serve log.
+- Don't keep per-actor state on the behavior class instance; it's recreated each frame. Use `actor.runtime` or component props.
+- Don't try to import from `editors/`; behaviors run in the play runtime too.
+- Don't create three.js objects every frame in `sync` — build once, cache on `actor.runtime`, rebuild on a props-key change.
+- Don't add types or `.ts`/`.tsx` files. This kit is JavaScript.
+- Don't add a build step or change `vite.config.js` for a game — it's configured for you.

package/kits/basic-3d/behaviors/Camera.jsx

@@ -0,0 +1,56 @@
+// Play-mode camera. Place on a dedicated actor (or the target itself). Two
+// modes:
+//   - 'follow': fixed azimuth/elevation/distance offset tracking the target's
+//     position (optionally smoothed with `lerp`, 0 = instant).
+//   - 'orbit': same, but the azimuth spins at `orbitSpeed` degrees/second.
+// With no `target` the camera looks at the world origin. Omit the behavior
+// entirely for a fixed default view. A low `fov` + high `elevation` reads
+// near-isometric.
+export class Camera {
+  static behaviorName = 'Camera';
+
+  static defaultProps = {
+    target: '',
+    mode: 'follow',
+    distance: 24,
+    azimuth: 45,
+    elevation: 35,
+    fov: 50,
+    lookHeight: 0,
+    lerp: 0,
+    orbitSpeed: 20,
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  update(actor, scene, dt) {
+    const target = this.props.target ? scene.getActor(this.props.target) : null;
+    const transform = target?.components.Transform;
+    const goal = {
+      x: transform?.x ?? 0,
+      y: (transform?.y ?? 0) + this.props.lookHeight,
+      z: transform?.z ?? 0,
+    };
+    const state = (actor.runtime._camera ??= { ...goal, azimuth: this.props.azimuth });
+    if (this.props.mode === 'orbit') {
+      state.azimuth += this.props.orbitSpeed * dt;
+    } else {
+      state.azimuth = this.props.azimuth;
+    }
+    const t = this.props.lerp > 0 ? Math.min(1, dt * this.props.lerp) : 1;
+    state.x += (goal.x - state.x) * t;
+    state.y += (goal.y - state.y) * t;
+    state.z += (goal.z - state.z) * t;
+    scene.camera = {
+      targetX: state.x,
+      targetY: state.y,
+      targetZ: state.z,
+      azimuth: state.azimuth,
+      elevation: this.props.elevation,
+      distance: this.props.distance,
+      fov: this.props.fov,
+    };
+  }
+}

package/kits/basic-3d/behaviors/Collider.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import * as THREE from 'three';
+import { Panel, SelectField } from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+import { replaceGroupChild } from '../engine/threeUtil';
+
+// An axis-aligned box, centered on the actor's Transform plus an offset. Pure
+// data -- the framework does NOT auto-resolve collisions; behaviors read
+// overlaps via `scene.overlaps(a, b)` / `scene.colliderBox(actor)`.
+export class Collider {
+  static behaviorName = 'Collider';
+
+  static defaultProps = {
+    kind: 'solid',
+    width: 1,
+    height: 1,
+    depth: 1,
+    offsetX: 0,
+    offsetY: 0,
+    offsetZ: 0,
+    debug: false,
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  sync(actor, scene, _dt, options) {
+    const group = scene.actorGroup(actor);
+    if (!group) return;
+    const cache = actor.runtime;
+    const show = !!(options?.showDebugColliders || this.props.debug);
+    if (!show) {
+      if (cache._colliderDebug) {
+        cache._colliderDebug = replaceGroupChild(group, cache._colliderDebug, null);
+        cache._colliderDebugKey = null;
+      }
+      return;
+    }
+    const key = JSON.stringify(this.props);
+    if (!cache._colliderDebug || cache._colliderDebugKey !== key) {
+      cache._colliderDebug = replaceGroupChild(group, cache._colliderDebug, makeDebugBox(this.props));
+      cache._colliderDebugKey = key;
+    }
+  }
+
+  static Inspector({ component, setComponent }) {
+    return (
+      <Panel title="Collider">
+        <SelectField
+          label="Kind"
+          value={component.kind}
+          onChange={(kind) => setComponent({ kind })}
+          options={['solid', 'pickup']}
+        />
+        <AutoFields
+          defaultProps={Collider.defaultProps}
+          component={component}
+          setComponent={setComponent}
+          exclude={['kind']}
+        />
+      </Panel>
+    );
+  }
+}
+
+function makeDebugBox(props) {
+  const geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);
+  const edges = new THREE.EdgesGeometry(geometry);
+  geometry.dispose();
+  const material = new THREE.LineBasicMaterial({
+    color: props.kind === 'pickup' ? 0xffe17a : 0x8db7ff,
+  });
+  const lines = new THREE.LineSegments(edges, material);
+  lines.position.set(props.offsetX, props.offsetY, props.offsetZ);
+  lines.userData.editorPlaceholder = true;
+  return lines;
+}

package/kits/basic-3d/behaviors/Mesh.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import * as THREE from 'three';
+import { Panel, SelectField } from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+import {
+  applyStandardMaterial,
+  buildGeometry,
+  buildStandardMaterial,
+  geometryKinds,
+  renderTarget,
+  replaceGroupChild,
+} from '../engine/threeUtil';
+
+// A single primitive mesh: sized geometry + a standard PBR material. For
+// multi-part shapes use a Model behavior pointing at a `.model` file instead.
+export class Mesh {
+  static behaviorName = 'Mesh';
+
+  static defaultProps = {
+    geometry: 'box',
+    width: 1,
+    height: 1,
+    depth: 1,
+    color: '#8db7ffff',
+    roughness: 0.8,
+    metalness: 0,
+    emissive: '#00000000',
+    opacity: 1,
+    castShadow: true,
+    receiveShadow: true,
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  sync(actor, scene) {
+    const target = renderTarget(actor, scene);
+    if (!target) return;
+    const { group, cache } = target;
+    const geometryKey = JSON.stringify([
+      this.props.geometry,
+      this.props.width,
+      this.props.height,
+      this.props.depth,
+    ]);
+    if (!cache._mesh || cache._meshGeometryKey !== geometryKey) {
+      const geometry = buildGeometry(
+        this.props.geometry,
+        this.props.width,
+        this.props.height,
+        this.props.depth
+      );
+      const mesh = new THREE.Mesh(geometry, buildStandardMaterial(this.props));
+      cache._mesh = replaceGroupChild(group, cache._mesh, mesh);
+      cache._meshGeometryKey = geometryKey;
+    }
+    // Material props are cheap to apply in place every frame.
+    applyStandardMaterial(cache._mesh.material, this.props);
+    cache._mesh.castShadow = !!this.props.castShadow;
+    cache._mesh.receiveShadow = !!this.props.receiveShadow;
+  }
+
+  static Inspector({ component, setComponent }) {
+    return (
+      <Panel title="Mesh">
+        <SelectField
+          label="Geometry"
+          value={component.geometry}
+          onChange={(geometry) => setComponent({ geometry })}
+          options={geometryKinds}
+        />
+        <AutoFields
+          defaultProps={Mesh.defaultProps}
+          component={component}
+          setComponent={setComponent}
+          exclude={['geometry']}
+        />
+      </Panel>
+    );
+  }
+}

package/kits/basic-3d/behaviors/Model.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Panel, SelectField } from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+import { buildModelGroup, renderTarget, replaceGroupChild } from '../engine/threeUtil';
+
+// Renders a `.model` file (a list of primitive parts -- the 3d analog of the
+// 2d kit's `.drawing`) scaled by the actor's Transform. `tint` multiplies
+// every part color; white or omitted keeps the original colors.
+export class Model {
+  static behaviorName = 'Model';
+
+  static defaultProps = {
+    file: 'models/block.model',
+    tint: '#ffffffff',
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  sync(actor, scene) {
+    const target = renderTarget(actor, scene);
+    if (!target) return;
+    const { group, cache } = target;
+    const modelData = scene.models[this.props.file];
+    if (!modelData) {
+      if (cache._model) {
+        cache._model = replaceGroupChild(group, cache._model, null);
+        cache._modelKey = null;
+      }
+      return;
+    }
+    // Model files are parsed once per text change (a fresh object identity),
+    // so identity + tint is a sufficient rebuild key.
+    if (cache._modelData !== modelData || cache._modelTint !== this.props.tint) {
+      cache._model = replaceGroupChild(group, cache._model, buildModelGroup(modelData, this.props.tint));
+      cache._modelData = modelData;
+      cache._modelTint = this.props.tint;
+    }
+  }
+
+  static Inspector({ component, setComponent, files }) {
+    const modelFiles = Object.keys(files).filter((path) => path.endsWith('.model'));
+    return (
+      <Panel title="Model">
+        <SelectField
+          label="File"
+          value={component.file}
+          onChange={(file) => setComponent({ file })}
+          options={modelFiles}
+        />
+        <AutoFields
+          defaultProps={Model.defaultProps}
+          component={component}
+          setComponent={setComponent}
+          only={['tint']}
+        />
+      </Panel>
+    );
+  }
+}

package/kits/basic-3d/behaviors/Transform.jsx

@@ -0,0 +1,35 @@
+import { degreesToRadians } from '../engine/threeUtil';
+
+// Position / rotation / scale of the actor's group in world units. `x`/`y`/`z`
+// is the actor's CENTER; rotations are degrees; the ground plane is XZ, +Y up.
+export class Transform {
+  static behaviorName = 'Transform';
+
+  static defaultProps = {
+    x: 0,
+    y: 0,
+    z: 0,
+    rotationX: 0,
+    rotationY: 0,
+    rotationZ: 0,
+    scaleX: 1,
+    scaleY: 1,
+    scaleZ: 1,
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  sync(actor, scene) {
+    const group = scene.actorGroup(actor);
+    if (!group) return;
+    group.position.set(this.props.x, this.props.y, this.props.z);
+    group.rotation.set(
+      degreesToRadians(this.props.rotationX),
+      degreesToRadians(this.props.rotationY),
+      degreesToRadians(this.props.rotationZ)
+    );
+    group.scale.set(this.props.scaleX || 1, this.props.scaleY || 1, this.props.scaleZ || 1);
+  }
+}

package/kits/basic-3d/editors/App.jsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { writeFile } from 'castle-web-sdk';
+import {
+  flatFileOrder,
+  formatJson,
+  getFileKind,
+  initialFiles,
+  parseModels,
+} from '../engine/files';
+import { AppShell, cx, MainEditor, styles } from '../engine/ui';
+import { CodeEditor } from './CodeEditor';
+import { ModelEditor } from './ModelEditor';
+import { FileBrowser } from './FileBrowser';
+import { SceneEditor } from './SceneEditor';
+export function App() {
+  const [files, setFiles] = useState(initialFiles);
+  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
+  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
+  const [selectedActorIds, setSelectedActorIds] = useState([]);
+  const [multiSelectMode, setMultiSelectMode] = useState(false);
+  const saveTimersRef = useRef({});
+  const saveVersionsRef = useRef({});
+  const models = useMemo(() => parseModels(files), [files]);
+  function updateSelectedFile(nextText) {
+    const path = selectedPath;
+    setFiles((current) => ({
+      ...current,
+      [path]: nextText,
+    }));
+    scheduleFileWrite(path, nextText);
+  }
+  function scheduleFileWrite(path, nextText) {
+    const version = (saveVersionsRef.current[path] ?? 0) + 1;
+    saveVersionsRef.current[path] = version;
+    const existingTimer = saveTimersRef.current[path];
+    if (existingTimer) window.clearTimeout(existingTimer);
+    saveTimersRef.current[path] = window.setTimeout(() => {
+      delete saveTimersRef.current[path];
+      writeFile(path, nextText).catch((error) => {
+        if (saveVersionsRef.current[path] !== version) return;
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(`Failed to save ${path}: ${message}`);
+      });
+    }, 1500);
+  }
+  const kind = getFileKind(selectedPath);
+  const text = files[selectedPath] ?? '';
+  function selectFile(path) {
+    setSelectedPath(path);
+    setFilesSheetOpen(false);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  }
+  const onToggleFiles = () => {
+    setFilesSheetOpen((previous) => !previous);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  };
+  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (!event.altKey || event.metaKey || event.ctrlKey) return;
+      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+      const active = document.activeElement;
+      if (
+        active &&
+        (active.tagName === 'INPUT' ||
+          active.tagName === 'TEXTAREA' ||
+          active.tagName === 'SELECT' ||
+          active.isContentEditable ||
+          active.closest('.cm-editor'))
+      ) {
+        return;
+      }
+      const order = flatFileOrder(Object.keys(files));
+      const index = order.indexOf(selectedPath);
+      if (index === -1) return;
+      const nextIndex = event.key === 'ArrowUp' ? index - 1 : index + 1;
+      if (nextIndex < 0 || nextIndex >= order.length) return;
+      event.preventDefault();
+      selectFile(order[nextIndex]);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [files, selectedPath]);
+  return (
+    <AppShell>
+      <FileBrowser
+        files={files}
+        selectedPath={selectedPath}
+        onSelect={selectFile}
+        sheetOpen={filesSheetOpen}
+        onSheetOpenChange={setFilesSheetOpen}
+      />
+      {filesSheetOpen ? (
+        <div
+          className={cx(styles.sheetBackdrop, styles.mobileOnly)}
+          onClick={() => setFilesSheetOpen(false)}
+        />
+      ) : null}
+      <MainEditor>
+        {kind === 'scene' ? (
+          <SceneEditor
+            path={selectedPath}
+            text={text}
+            files={files}
+            models={models}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+            selectedActorIds={selectedActorIds}
+            onSelectActorIds={setSelectedActorIds}
+            multiSelectMode={multiSelectMode}
+            onSetMultiSelectMode={setMultiSelectMode}
+          />
+        ) : null}
+        {kind === 'model' ? (
+          <ModelEditor
+            path={selectedPath}
+            text={text}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+        {kind === 'code' ? (
+          <CodeEditor
+            path={selectedPath}
+            text={text}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+        {kind === 'text' ? (
+          <CodeEditor
+            path={selectedPath}
+            text={formatJson(text)}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+      </MainEditor>
+    </AppShell>
+  );
+}