castle-web-cli 0.4.3 → 0.4.4

package/dist/index.js

@@ -45,14 +45,20 @@ function getWsPort(dir) {
 }
 function usage() {
     console.log(`Usage:
-  castle-web init <dir> [--kit NAME]   (kits: basic-2d (default), rpg-2d, none)
+  castle-web init <dir> [--kit NAME]   (kits: basic-2d (default), none)
   castle-web serve [dir] [--port PORT] [--host HOST] [--open] [--detach]
   castle-web restart [--port PORT]
   castle-web screenshot [--out FILE] [--port PORT]
   castle-web save-preview-image [dir] [--port PORT] [--no-restart]
   castle-web save-deck [dir]
   castle-web get-deck <dir> [--deck-id ID]
-  castle-web login`);
+  castle-web login
+
+Kits:
+  basic-2d  Actor / behavior / scene framework for 2D games. Includes an editor and Layout / Drawing / Collider / Camera built-ins. Default if --kit is omitted.
+  none      Minimal vite + canvas setup with the castle-web SDK and no kit.
+
+After init, read the scaffolded deck's CLAUDE.md (also AGENTS.md) for the kit's full author guide.`);
     process.exit(1);
 }
 async function main() {

package/dist/init.js

@@ -162,7 +162,7 @@ function scaffoldFromKit(kit, projectDir) {
                     if (cliDistAbs) {
                         pkg.scripts[k] = pkg.scripts[k]
                             .replace(/\.\.\/\.\.\/cli\/dist/g, cliDistAbs)
-                            .replace(/\.\.\/\.\.\/sdk/g, sdkIsLocal ? toPosixPath(sdkPath) : '');
+                            .replace(/\.\.\/\.\.\/sdk/g, toPosixPath(sdkPath));
                     }
                     else {
                         // Globally-installed: route through the `castle-web` binary on PATH.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"

package/kits/basic-2d-frozen/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "bracketSameLine": true,
-  "trailingComma": "es5",
-  "arrowParens": "always"
-}

package/kits/basic-2d-frozen/CLAUDE.md

@@ -1,131 +0,0 @@
-# basic-2d kit
-
-Actor / behavior / scene framework on a 500×700 canvas ("card"). 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 (`Layout.jsx`, `Drawing.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
-
-1. Edit `behaviors/*.jsx` and `scenes/main.scene`.
-2. `castle-web serve . --detach` (returns the URL, default port 5757). Curl once to confirm.
-3. After every edit: `npm run restart` (no hot reload). Then re-check.
-
-Card size is **500 wide × 700 tall** (origin top-left, +y is down).
-
-## 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: 200 };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  // Called every frame in play mode. dt is seconds.
-  update(actor, scene, dt) {
-    const layout = actor.components.Layout;
-    layout.x += this.props.speed * dt; // mutate component in place
-  }
-
-  // Optional. Custom drawing (you usually don't need this; use a Drawing
-  // component instead). ctx is in card units already.
-  draw(actor, scene, ctx) {}
-
-  // Optional. Return React nodes for game-time HUD. Coordinates are card
-  // units. 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.
-
-## Scene file (`scenes/main.scene`, plain JSON)
-
-```json
-{
-  "background": "#1b2030",
-  "actors": [
-    {
-      "id": "paddle",
-      "components": {
-        "Layout": { "x": 210, "y": 640, "width": 80, "height": 12 },
-        "Drawing": { "file": "drawings/floor.drawing" },
-        "Collider": { "kind": "solid", "width": 80, "height": 12 },
-        "Paddle": { "speed": 360 }
-      }
-    }
-  ]
-}
-```
-
-Rules: every actor needs a unique `id` (any string) and almost always a `Layout`. `components` keys are behavior names (the `static behaviorName`). Unspecified props fall back to that behavior's `defaultProps` — omit optional fields (`z`, `rotation`, actor `name`, `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.
-
-## Built-in behaviors
-
-- **Layout** — `{ x, y, width, height, z?, rotation? }`. Every actor needs one. `z` orders draw (low first). `rotation` is degrees about the center.
-- **Drawing** — `{ file: "drawings/foo.drawing", tint?: "#rrggbbaa" }`. Renders the pixel-art file scaled into the Layout box. `tint` multiplies; use white (`#ffffffff`) or omit for the original colors. For a solid-color rectangle, point `file` at `drawings/floor.drawing` (an 8×8 white pixel sprite) and set `tint` to your color.
-- **Collider** — `{ kind: 'solid'|'pickup', width, height, offsetX?, offsetY?, debug? }`. Just a rect; 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, followX, followY, roomWidth, roomHeight }`. Place on a dedicated actor; sets `scene.camera` clamped to the room. Omit entirely for a fixed view (no camera = no translation).
-
-## SceneRuntime API (what `scene` exposes to behaviors)
-
-- `scene.time` — seconds since start.
-- `scene.keys` — `Set` of currently-held KeyboardEvent codes (e.g. `'ArrowLeft'`, `'KeyA'`, `'Space'`). Read in `update`.
-- `scene.pointer` — `{ x, y, down }` in world (card) coordinates, camera-adjusted.
-- `scene.getActor(id)` / `scene.getActors()` (sorted by Layout.z) / `scene.getComponent(actor, name)`.
-- `scene.actorWith('GameController')` / `scene.actorsWith('Brick')` — find one / all actors carrying a given behavior. Prefer these to `getActors().find(a => a.components.X)`.
-- `scene.colliderRect(actorOrId)` — rect from Layout + 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: { Layout: {...}, 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. Use this; don't `splice` + `delete` by hand.
-- `scene.status` — string you can set/read for game-state ('playing', 'gameover', ...).
-- `actor.runtime` — per-instance scratchpad for transient state across frames (e.g. velocity, trail history). Not serialized.
-
-## Input shortcuts
-
-```jsx
-if (scene.keys.has('ArrowLeft')) layout.x -= speed * dt;
-if (scene.keys.has('ArrowRight')) layout.x += speed * dt;
-if (scene.keys.has('Space')) /* launch ball */ ;
-```
-
-For HUD text use a behavior's `ui` hook (returns React); for in-world text or shapes, draw with `ctx` from `draw`. The deck has TouchControls overlay support out of the box for mobile play (arrow keys + a button); no setup needed.
-
-## Common breakout-shaped recipe (sketch)
-
-- `Paddle` behavior: read keys, clamp x to `[0, 500 - layout.width]`.
-- `Ball` behavior: store `vx, vy` on `actor.runtime`; integrate; bounce off wall edges (`x<0`, `x+w>500`, `y<0`); on `scene.overlaps(actor, paddle)`, flip `vy`; for each `brick` in `scene.actorsWith('Brick')` check `scene.overlaps(actor, brick)` → flip `vy` and `scene.despawnActor(brick.id)`; if `y > 700` lose a life.
-- `Brick` behavior: typically just a marker — `kind: 'solid'` collider is enough. State (hit count) goes on `actor.runtime` or the brick's own props.
-- `GameController` (no Layout needed if you don't draw it): tracks score / lives / 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 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-2d-frozen/behaviors/Camera.jsx

@@ -1,43 +0,0 @@
-import { cardSize } from '../engine/scene';
-
-// Follow camera: keeps the target actor centered in the viewport, clamped to
-// the room bounds so the empty area past the room edges never scrolls in.
-export class Camera {
-  static behaviorName = 'Camera';
-
-  static defaultProps = {
-    target: '',
-    followX: true,
-    followY: true,
-    roomWidth: 900,
-    roomHeight: 1100,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  update(_actor, scene) {
-    const target = this.props.target ? scene.getActor(this.props.target) : undefined;
-    const targetLayout = target?.components.Layout;
-    if (!targetLayout) return;
-
-    const centerX = targetLayout.x + targetLayout.width / 2;
-    const centerY = targetLayout.y + targetLayout.height / 2;
-    const desiredX = centerX - cardSize.width / 2;
-    const desiredY = centerY - cardSize.height / 2;
-
-    scene.camera = {
-      x: this.props.followX
-        ? clamp(desiredX, 0, this.props.roomWidth - cardSize.width)
-        : 0,
-      y: this.props.followY
-        ? clamp(desiredY, 0, this.props.roomHeight - cardSize.height)
-        : 0,
-    };
-  }
-}
-
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(Math.max(min, max), value));
-}

package/kits/basic-2d-frozen/behaviors/Collider.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-
-export class Collider {
-  static behaviorName = 'Collider';
-
-  static defaultProps = {
-    kind: 'solid',
-    width: 32,
-    height: 32,
-    offsetX: 0,
-    offsetY: 0,
-    debug: false,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  draw(actor, _scene, ctx, options) {
-    if (!options.showDebugColliders && !this.props.debug) return;
-    const rect = getColliderRect(actor);
-    if (!rect) return;
-    ctx.save();
-    ctx.strokeStyle = this.props.kind === 'pickup' ? '#ffe17a' : '#8db7ff';
-    ctx.lineWidth = 2;
-    ctx.strokeRect(rect.x + 1, rect.y + 1, rect.width - 2, rect.height - 2);
-    ctx.restore();
-  }
-
-  static Inspector({ component, setComponent }) {
-    return (
-      <Panel title="Collider">
-        <SelectField
-          label="Kind"
-          value={component.kind}
-          onChange={(kind) => setComponent({ kind: kind })}
-          options={['solid', 'pickup']}
-        />
-        <AutoFields
-          defaultProps={Collider.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          exclude={['kind']}
-        />
-      </Panel>
-    );
-  }
-}
-
-export function getColliderRect(actor) {
-  const layout = actor.components.Layout;
-  const collider = actor.components.Collider;
-  if (!layout || !collider) return null;
-  return {
-    x: layout.x + (collider.offsetX ?? 0),
-    y: layout.y + (collider.offsetY ?? 0),
-    width: collider.width ?? layout.width,
-    height: collider.height ?? layout.height,
-  };
-}
-
-export function intersects(a, b) {
-  return (
-    a.x < b.x + b.width &&
-    a.x + a.width > b.x &&
-    a.y < b.y + b.height &&
-    a.y + a.height > b.y
-  );
-}

package/kits/basic-2d-frozen/behaviors/Drawing.jsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-
-export class Drawing {
-  static behaviorName = 'Drawing';
-
-  static defaultProps = {
-    file: 'drawings/floor.drawing',
-    tint: '#ffffffff',
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  draw(actor, scene, ctx) {
-    if (actor.runtime?.collected) return;
-    const layout = actor.components.Layout;
-    if (!layout) return;
-    const drawing = scene.drawings[this.props.file];
-    if (!drawing) return;
-    drawPixelDrawing(
-      ctx,
-      drawing,
-      layout.x,
-      layout.y,
-      layout.width,
-      layout.height,
-      this.props.tint
-    );
-  }
-
-  static Inspector({ component, setComponent, files }) {
-    const drawingFiles = getDrawingFiles(files);
-    return (
-      <Panel title="Drawing">
-        <SelectField
-          label="File"
-          value={component.file}
-          onChange={(file) => setComponent({ file })}
-          options={drawingFiles}
-        />
-        <AutoFields
-          defaultProps={Drawing.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          only={['tint']}
-        />
-      </Panel>
-    );
-  }
-}
-
-export function drawPixelDrawing(ctx, drawing, x, y, width, height, tint) {
-  if (drawing.width <= 0 || drawing.height <= 0) return;
-  // Blit the cached native-resolution canvas as a single image. Painting each
-  // pixel as its own `fillRect` left hairline anti-aliased seams under a
-  // rotation transform; one `drawImage` has no inter-pixel edges.
-  const canvas = getDrawingCanvas(drawing, tint);
-  const prevSmoothing = ctx.imageSmoothingEnabled;
-  ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(canvas, x, y, width, height);
-  ctx.imageSmoothingEnabled = prevSmoothing;
-}
-
-// Cache of native-resolution offscreen canvases keyed by drawing data and
-// tint. A drawing edit produces a fresh `DrawingData` object (see
-// DrawingEditor's `structuredClone`), so a new object naturally misses the
-// WeakMap and rebuilds.
-const drawingCanvasCache = new WeakMap();
-
-// Render the pixel art once, unrotated, at 1px per pixel into an offscreen
-// canvas, applying the tint. Cached so the per-frame draw is a single blit.
-function getDrawingCanvas(drawing, tint) {
-  const tintKey = tint ?? '';
-  let byTint = drawingCanvasCache.get(drawing);
-  if (!byTint) {
-    byTint = new Map();
-    drawingCanvasCache.set(drawing, byTint);
-  }
-  const cached = byTint.get(tintKey);
-  if (cached) return cached;
-
-  const canvas = document.createElement('canvas');
-  canvas.width = drawing.width;
-  canvas.height = drawing.height;
-  const octx = canvas.getContext('2d');
-  if (octx) {
-    const tintRgba = parseTint(tint);
-    for (let py = 0; py < drawing.height; py++) {
-      for (let px = 0; px < drawing.width; px++) {
-        const color = drawing.pixels[py * drawing.width + px];
-        if (!color || color === 'transparent' || color.endsWith('00')) continue;
-        octx.fillStyle = tintRgba ? applyTint(color, tintRgba) : color;
-        octx.fillRect(px, py, 1, 1);
-      }
-    }
-  }
-  byTint.set(tintKey, canvas);
-  return canvas;
-}
-
-// Parse a hex color into [r, g, b, a] channels (0-255). Returns null when the
-// string is not a hex color so callers can fall back to the raw color.
-function parseHexColor(color) {
-  const hex = color.trim().replace(/^#/, '');
-  if (hex.length !== 6 && hex.length !== 8) return null;
-  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
-  return [r, g, b, a];
-}
-
-// Returns the tint as [r, g, b, a] channels, or null when there is no tint or
-// the tint is white (#ffffffff) -- both meaning "no change".
-function parseTint(tint) {
-  if (!tint) return null;
-  const rgba = parseHexColor(tint);
-  if (!rgba) return null;
-  if (rgba[0] === 255 && rgba[1] === 255 && rgba[2] === 255 && rgba[3] === 255) {
-    return null;
-  }
-  return rgba;
-}
-
-// Multiply each channel of a pixel color by the tint color (both 0-255).
-function applyTint(color, tint) {
-  const rgba = parseHexColor(color);
-  if (!rgba) return color;
-  const out = rgba.map((channel, i) => Math.round((channel * tint[i]) / 255));
-  return '#' + out.map((channel) => channel.toString(16).padStart(2, '0')).join('');
-}
-
-function getDrawingFiles(files) {
-  return Object.keys(files).filter((path) => path.endsWith('.drawing'));
-}

package/kits/basic-2d-frozen/behaviors/Layout.jsx

@@ -1,16 +0,0 @@
-export class Layout {
-  static behaviorName = 'Layout';
-
-  static defaultProps = {
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32,
-    z: 0,
-    rotation: 0,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-}

package/kits/basic-2d-frozen/drawings/floor.drawing

@@ -1,70 +0,0 @@
-{
-  "width": 8,
-  "height": 8,
-  "pixels": [
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff"
-  ]
-}

package/kits/basic-2d-frozen/editors/App.jsx

@@ -1,152 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { writeFile } from 'castle-web-sdk';
-import {
-  flatFileOrder,
-  formatJson,
-  getFileKind,
-  initialFiles,
-  parseJsonFile,
-} from '../engine/files';
-import { AppShell, cx, MainEditor, styles } from '../engine/ui';
-import { CodeEditor } from './CodeEditor';
-import { DrawingEditor } from './DrawingEditor';
-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 drawings = {};
-  for (const [path, text] of Object.entries(files)) {
-    if (!path.endsWith('.drawing')) continue;
-    const parsed = parseJsonFile(path, text);
-    if (parsed.value) drawings[path] = parsed.value;
-  }
-  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}
-            drawings={drawings}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-            selectedActorIds={selectedActorIds}
-            onSelectActorIds={setSelectedActorIds}
-            multiSelectMode={multiSelectMode}
-            onSetMultiSelectMode={setMultiSelectMode}
-          />
-        ) : null}
-        {kind === 'drawing' ? (
-          <DrawingEditor
-            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>
-  );
-}