castle-web-cli 0.4.74 → 0.4.76

package/kits/basic-2d/editors/codeTheme.js

@@ -1,135 +0,0 @@
-import { HighlightStyle } from '@codemirror/language';
-import { EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
-
-// Dark theme for the in-kit CodeMirror editor. Surfaces reference the kit's
-// shared `--castle-*` tokens (defined on `.editor-root` in ui.module.css) so
-// the editor stays in sync with the rest of the dark inspector palette. Syntax
-// token colors are literal hex chosen to read well on the #0d0d0d background.
-const selectionBg = 'rgba(230, 230, 230, 0.22)';
-
-export const castleCodeTheme = EditorView.theme(
-  {
-    '&': {
-      height: '100%',
-      fontSize: '9pt',
-      color: 'var(--castle-inspector-text)',
-      backgroundColor: 'var(--castle-inspector-bg)',
-    },
-    '&.cm-editor.cm-focused': {
-      outline: 'none',
-    },
-    '.cm-scroller': {
-      overflow: 'auto',
-      fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
-    },
-    '.cm-content': {
-      minHeight: '100%',
-      caretColor: 'var(--castle-black)',
-      color: 'var(--castle-inspector-text)',
-      paddingBottom: '400px',
-      paddingRight: '80px',
-    },
-    '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: 'var(--castle-black)',
-    },
-    '&.cm-focused .cm-cursor': {
-      borderLeftColor: 'var(--castle-black)',
-    },
-    '.cm-selectionBackground, .cm-content ::selection': {
-      backgroundColor: selectionBg,
-    },
-    '&.cm-focused .cm-selectionBackground, &.cm-focused .cm-content ::selection': {
-      backgroundColor: selectionBg,
-    },
-    '.cm-gutters': {
-      // Gutters are hidden in this editor; keep them themed in case they are
-      // re-enabled so they don't flash a light surface.
-      display: 'none',
-      backgroundColor: 'var(--castle-inspector-bg)',
-      color: 'var(--castle-inspector-muted)',
-      borderRight: '1px solid var(--castle-inspector-divider)',
-    },
-    '.cm-activeLine': {
-      backgroundColor: 'var(--castle-inspector-input-bg)',
-    },
-    '.cm-activeLineGutter': {
-      color: 'var(--castle-inspector-text)',
-      backgroundColor: 'var(--castle-inspector-input-bg)',
-    },
-    '.cm-foldPlaceholder': {
-      backgroundColor: 'var(--castle-inspector-input-bg)',
-      border: '1px solid var(--castle-inspector-border)',
-      color: 'var(--castle-inspector-muted)',
-    },
-    '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': {
-      backgroundColor: 'rgba(230, 230, 230, 0.18)',
-      outline: '1px solid var(--castle-black)',
-      color: 'inherit',
-    },
-    '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-      backgroundColor: 'rgba(232, 106, 115, 0.35)',
-    },
-    '.cm-searchMatch': {
-      backgroundColor: 'rgba(255, 203, 107, 0.25)',
-      outline: '1px solid rgba(255, 203, 107, 0.5)',
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-      backgroundColor: 'rgba(255, 203, 107, 0.45)',
-    },
-    '.cm-selectionMatch': {
-      backgroundColor: 'rgba(230, 230, 230, 0.14)',
-    },
-    '.cm-panels': {
-      backgroundColor: 'var(--castle-inspector-input-bg)',
-      color: 'var(--castle-inspector-text)',
-    },
-    '.cm-panels.cm-panels-top': {
-      borderBottom: '1px solid var(--castle-inspector-divider)',
-    },
-    '.cm-panels.cm-panels-bottom': {
-      borderTop: '1px solid var(--castle-inspector-divider)',
-    },
-    '.cm-panel.cm-search input, .cm-panel.cm-search button, .cm-panel.cm-search label': {
-      color: 'var(--castle-inspector-text)',
-    },
-    '.cm-panel.cm-search input': {
-      backgroundColor: 'var(--castle-inspector-bg)',
-      border: '1px solid var(--castle-inspector-border)',
-    },
-    '.cm-tooltip': {
-      backgroundColor: 'var(--castle-inspector-input-bg)',
-      border: '1px solid var(--castle-inspector-border)',
-      color: 'var(--castle-inspector-text)',
-    },
-    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-      backgroundColor: 'var(--castle-black)',
-      color: 'var(--castle-inspector-text)',
-    },
-  },
-  { dark: true },
-);
-
-export const castleHighlightStyle = HighlightStyle.define([
-  { tag: [tags.keyword, tags.modifier, tags.operatorKeyword], color: '#b3b9d1' },
-  { tag: [tags.controlKeyword, tags.moduleKeyword], color: '#b3b9d1' },
-  { tag: [tags.definitionKeyword, tags.self], color: '#b3b9d1' },
-  { tag: [tags.string, tags.special(tags.string), tags.regexp], color: '#c3e88d' },
-  { tag: tags.escape, color: '#f78c6c' },
-  { tag: [tags.number, tags.integer, tags.float, tags.bool, tags.null], color: '#f78c6c' },
-  { tag: [tags.literal, tags.atom, tags.constant(tags.variableName)], color: '#f78c6c' },
-  { tag: [tags.comment, tags.lineComment, tags.blockComment, tags.docComment], color: '#676e95', fontStyle: 'italic' },
-  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: '#82aaff' },
-  { tag: tags.definition(tags.variableName), color: '#e6e6e6' },
-  { tag: [tags.variableName, tags.labelName], color: '#e6e6e6' },
-  { tag: tags.propertyName, color: '#b2ccd6' },
-  { tag: [tags.typeName, tags.className, tags.namespace], color: '#ffcb6b' },
-  { tag: [tags.operator, tags.punctuation, tags.bracket, tags.angleBracket, tags.brace, tags.squareBracket], color: '#89ddff' },
-  { tag: [tags.tagName], color: '#f07178' },
-  { tag: [tags.attributeName], color: '#b3b9d1' },
-  { tag: [tags.attributeValue], color: '#c3e88d' },
-  { tag: tags.link, color: '#82aaff', textDecoration: 'underline' },
-  { tag: tags.strong, fontWeight: 'bold' },
-  { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.invalid, color: '#e86a73' },
-]);

package/kits/basic-2d/engine/TouchControls.jsx

@@ -1,136 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-// On-screen movement controls: a 4-way d-pad feeds arrow keys onto
-// `scene.keys` -- the exact same keyboard keys behaviors consume, no separate
-// input path.
-const KEYS = {
-  up: 'ArrowUp',
-  down: 'ArrowDown',
-  left: 'ArrowLeft',
-  right: 'ArrowRight',
-};
-export function TouchControls({ getKeys, visible = true }) {
-  const [isTouch, setIsTouch] = useState(false);
-  const heldRef = useRef(new Set());
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const override = params.get('touch');
-    if (override === '1' || override === 'true') {
-      setIsTouch(true);
-      return undefined;
-    }
-    if (override === '0' || override === 'false') {
-      setIsTouch(false);
-      return undefined;
-    }
-    const mq = window.matchMedia('(pointer: coarse)');
-    const update = () => {
-      setIsTouch(mq.matches || 'ontouchstart' in window || navigator.maxTouchPoints > 0);
-    };
-    update();
-    mq.addEventListener?.('change', update);
-    return () => mq.removeEventListener?.('change', update);
-  }, []);
-  const release = useCallback(
-    (id) => {
-      if (!heldRef.current.has(id)) return;
-      heldRef.current.delete(id);
-      getKeys()?.delete(KEYS[id]);
-    },
-    [getKeys]
-  );
-  useEffect(() => {
-    if (!visible || !isTouch) {
-      // Drop any keys we were holding when controls hide.
-      const keys = getKeys();
-      if (keys) for (const id of heldRef.current) keys.delete(KEYS[id]);
-      heldRef.current.clear();
-    }
-  }, [visible, isTouch, getKeys]);
-  if (!visible || !isTouch) return null;
-  const press = (id) => {
-    heldRef.current.add(id);
-    getKeys()?.add(KEYS[id]);
-  };
-  const button = (id, label, extra) => (
-    <button
-      key={id}
-      type="button"
-      tabIndex={-1}
-      aria-label={id}
-      onTouchStart={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onTouchEnd={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onTouchCancel={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onMouseUp={() => release(id)}
-      onMouseLeave={() => release(id)}
-      onContextMenu={(event) => event.preventDefault()}
-      style={{ ...buttonStyle, ...extra }}>
-      {label}
-    </button>
-  );
-  return (
-    <div style={containerStyle}>
-      <div style={dpadStyle}>
-        {button('up', '▲', dpadUpStyle)}
-        {button('left', '◀', dpadLeftStyle)}
-        {button('right', '▶', dpadRightStyle)}
-        {button('down', '▼', dpadDownStyle)}
-      </div>
-    </div>
-  );
-}
-const containerStyle = {
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-end',
-  padding: '12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px)',
-  pointerEvents: 'none',
-  zIndex: 50,
-};
-// 3x3 grid -- the d-pad arms occupy the cross cells, corners stay empty.
-const dpadStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 64px)',
-  gridTemplateRows: 'repeat(3, 64px)',
-  gap: 6,
-  pointerEvents: 'auto',
-};
-const dpadUpStyle = { gridColumn: 2, gridRow: 1 };
-const dpadLeftStyle = { gridColumn: 1, gridRow: 2 };
-const dpadRightStyle = { gridColumn: 3, gridRow: 2 };
-const dpadDownStyle = { gridColumn: 2, gridRow: 3 };
-const buttonStyle = {
-  width: 64,
-  height: 64,
-  borderRadius: 12,
-  border: '1px solid rgba(255, 255, 255, 0.35)',
-  background: 'rgba(0, 0, 0, 0.35)',
-  color: 'rgba(255, 255, 255, 0.92)',
-  fontSize: 24,
-  fontWeight: 600,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  WebkitTouchCallout: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  touchAction: 'none',
-  cursor: 'pointer',
-};

package/kits/basic-2d/engine/playConsole.js

@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react';
-// Captures console output from the running deck into an in-memory ring buffer and
-// notifies subscribers, so the on-panel play console can display it.
-//
-// The SDK already wraps console (to forward logs to the dev server over its
-// websocket); this wraps ON TOP and always calls through, so that forwarding and
-// the real devtools output are preserved. Install is idempotent.
-const MAX_LINES = 500;
-let buffer = [];
-let nextId = 1;
-let installed = false;
-const subscribers = new Set();
-function formatArgs(args) {
-  return args
-    .map((arg) => {
-      if (typeof arg === 'string') return arg;
-      if (arg instanceof Error) return arg.stack || arg.message;
-      try {
-        const json = JSON.stringify(arg);
-        return json ?? String(arg);
-      } catch {
-        return String(arg);
-      }
-    })
-    .join(' ');
-}
-function emit(level, args) {
-  const entry = { id: nextId++, level, text: formatArgs(args) };
-  const next = buffer.concat(entry);
-  buffer = next.length > MAX_LINES ? next.slice(next.length - MAX_LINES) : next;
-  for (const cb of subscribers) cb(buffer);
-}
-export function installConsoleCapture() {
-  if (installed || typeof console === 'undefined') return;
-  installed = true;
-  for (const level of ['log', 'warn', 'error']) {
-    const original = typeof console[level] === 'function' ? console[level].bind(console) : null;
-    console[level] = (...args) => {
-      if (original) original(...args);
-      // Never let capture throw into the caller's logging path.
-      try {
-        emit(level, args);
-      } catch {
-        // ignore
-      }
-    };
-  }
-}
-export function subscribeLogs(callback) {
-  subscribers.add(callback);
-  callback(buffer);
-  return () => subscribers.delete(callback);
-}
-export function clearLogs() {
-  buffer = [];
-  for (const cb of subscribers) cb(buffer);
-}
-// React hook: install capture (idempotent) and track the live log buffer.
-export function usePlayLogs() {
-  const [logs, setLogs] = useState(buffer);
-  useEffect(() => {
-    installConsoleCapture();
-    return subscribeLogs(setLogs);
-  }, []);
-  return { logs, clearLogs };
-}

package/kits/basic-3d/.prettierrc

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

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

@@ -1,162 +0,0 @@
-# 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

@@ -1,56 +0,0 @@
-// 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

@@ -1,78 +0,0 @@
-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;
-}