castle-web-cli 0.4.84 → 0.4.85

package/kits/physics-2d/editors/pxArtTools.js

@@ -0,0 +1,232 @@
+import { EDG64, KEY_ALPHABET, normalizeHex, TRANSPARENT } from '../engine/pxart';
+import {
+  forEachDab,
+  forEachEllipseCells,
+  forEachLinePoint,
+  forEachRectCells,
+  forEachTriangleCells,
+} from './pixelGeometry';
+
+// The PxArt editor paints over the FIXED full Endesga-64 palette (no free color
+// picking). Each palette color gets a stable single-char key (KEY_ALPHABET, 64
+// distinct keys); the transparent cell is the reserved "." (TRANSPARENT).
+export const EDITOR_KEYS = EDG64.map((_, index) => KEY_ALPHABET[index]);
+
+// key -> "#rrggbb" record, in palette order. Passed to the SDK's fromCells so
+// serialized files carry only the palette entries actually used.
+export const EDITOR_PALETTE = Object.fromEntries(
+  EDG64.map((hex, index) => [EDITOR_KEYS[index], hex])
+);
+
+// hex -> palette key, for mapping a loaded sprite's colors onto the swatch.
+const KEY_BY_HEX = new Map(EDG64.map((hex, index) => [hex, EDITOR_KEYS[index]]));
+
+// Build a `height x width` matrix of "." (transparent) cells.
+export function blankCells(width, height) {
+  return Array.from({ length: height }, () => Array.from({ length: width }, () => TRANSPARENT));
+}
+
+// Snap an arbitrary hex color to the nearest palette key by RGB distance, so a
+// loaded sprite whose palette isn't exactly the Endesga-64 set still maps onto
+// the fixed swatch. Returns "." for invalid/transparent input.
+export function editorKeyForHex(hex) {
+  const norm = typeof hex === 'string' ? normalizeHex(hex) : null;
+  if (!norm) return TRANSPARENT;
+  const exact = KEY_BY_HEX.get('#' + norm.slice(1, 7));
+  if (exact) return exact;
+  const r = parseInt(norm.slice(1, 3), 16);
+  const g = parseInt(norm.slice(3, 5), 16);
+  const b = parseInt(norm.slice(5, 7), 16);
+  let bestKey = EDITOR_KEYS[0];
+  let bestDist = Infinity;
+  EDG64.forEach((swatch, index) => {
+    const dist =
+      (r - parseInt(swatch.slice(1, 3), 16)) ** 2 +
+      (g - parseInt(swatch.slice(3, 5), 16)) ** 2 +
+      (b - parseInt(swatch.slice(5, 7), 16)) ** 2;
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestKey = EDITOR_KEYS[index];
+    }
+  });
+  return bestKey;
+}
+
+// The swatch the editor opens on: Endesga-64's lead bright red (#ff0040).
+export const DEFAULT_KEY = editorKeyForHex('#ff0040');
+
+function isInside(cells, x, y) {
+  return y >= 0 && y < cells.length && x >= 0 && x < (cells[0]?.length ?? 0);
+}
+
+function copyCells(cells) {
+  return cells.map((row) => row.slice());
+}
+
+// Paint a single cell in a working matrix; returns true when it changed.
+function writeCell(cells, x, y, key) {
+  if (!isInside(cells, x, y) || cells[y][x] === key) return false;
+  cells[y][x] = key;
+  return true;
+}
+
+// Paint `key` along the segment from `from` to `to` with a brush of `size`
+// cells (1 = single cell). Returns a new matrix when anything changed, else the
+// original (so callers can skip no-op commits).
+export function paintLine(cells, from, to, key, size = 1) {
+  const next = copyCells(cells);
+  let changed = false;
+  forEachLinePoint(from, to, (cx, cy) => {
+    forEachDab(size, (dx, dy) => {
+      changed = writeCell(next, cx + dx, cy + dy, key) || changed;
+    });
+  });
+  return changed ? next : cells;
+}
+
+// Draw a shape with `key` into a copy of `cells`, defined by the drag from
+// `from` to `to`. `mode` selects line / square / circle / triangle; `filled`
+// applies to the closed shapes (the line ignores it). Returns a new matrix when
+// anything changed, else the original (so callers can skip no-op commits).
+export function paintShape(cells, from, to, key, mode, filled = false) {
+  const next = copyCells(cells);
+  let changed = false;
+  const write = (x, y) => {
+    changed = writeCell(next, x, y, key) || changed;
+  };
+  if (mode === 'line') {
+    forEachLinePoint(from, to, write);
+  } else if (mode === 'square') {
+    forEachRectCells(from, to, filled, write);
+  } else if (mode === 'circle') {
+    forEachEllipseCells(from, to, filled, write);
+  } else if (mode === 'triangle') {
+    forEachTriangleCells(from, to, filled, write);
+  }
+  return changed ? next : cells;
+}
+
+// Both region tools share the same guard: bail when the start is out of bounds
+// or already the target key, else return a working copy plus the key to replace.
+function beginKeyReplace(cells, start, key) {
+  if (!isInside(cells, start.x, start.y)) return null;
+  const target = cells[start.y][start.x];
+  if (target === key) return null;
+  return { next: copyCells(cells), target };
+}
+
+// Flood-fill the contiguous region matching the start cell's key with `key`.
+// Passing TRANSPARENT erases the contiguous region (the "fill mode" eraser).
+export function fillRegion(cells, start, key) {
+  const begin = beginKeyReplace(cells, start, key);
+  if (!begin) return cells;
+  const { next, target } = begin;
+  const queue = [start];
+  while (queue.length) {
+    const { x, y } = queue.pop();
+    if (!isInside(next, x, y) || next[y][x] !== target) continue;
+    next[y][x] = key;
+    queue.push({ x: x + 1, y }, { x: x - 1, y }, { x, y: y + 1 }, { x, y: y - 1 });
+  }
+  return next;
+}
+
+// Recolor EVERY cell matching the start cell's key to `key` (global swap): a
+// fixed-palette palette-swap fill mode.
+export function swapKey(cells, start, key) {
+  const begin = beginKeyReplace(cells, start, key);
+  if (!begin) return cells;
+  const { next, target } = begin;
+  let changed = false;
+  for (let y = 0; y < next.length; y++) {
+    const row = next[y];
+    for (let x = 0; x < row.length; x++) {
+      if (row[x] !== target) continue;
+      row[x] = key;
+      changed = true;
+    }
+  }
+  return changed ? next : cells;
+}
+
+// The palette key under a cell (for the eyedropper), or "." when transparent.
+export function sampleKey(cells, point) {
+  return isInside(cells, point.x, point.y) ? cells[point.y][point.x] : TRANSPARENT;
+}
+
+// Mirror the canvas-window matrix left-to-right (dimensions unchanged).
+export function flipCellsH(cells) {
+  return cells.map((row) => row.slice().reverse());
+}
+
+// Mirror the canvas-window matrix top-to-bottom (dimensions unchanged).
+export function flipCellsV(cells) {
+  return cells.slice().reverse().map((row) => row.slice());
+}
+
+// Clear a rectangular region of the canvas-window matrix to transparent (the
+// marquee delete). `rect` is { x, y, w, h } in canvas cells. Returns a new
+// matrix when anything changed, else the original.
+export function clearRegion(cells, rect) {
+  const next = copyCells(cells);
+  let changed = false;
+  for (let y = rect.y; y < rect.y + rect.h; y++) {
+    for (let x = rect.x; x < rect.x + rect.w; x++) {
+      changed = writeCell(next, x, y, TRANSPARENT) || changed;
+    }
+  }
+  return changed ? next : cells;
+}
+
+// Lift the pixels in `rect`, clear that source region to transparent, then stamp
+// the lifted OPAQUE pixels back at (dx, dy) offset — the marquee move's lift &
+// float, applied as one combined result. Transparent cells in the lifted region
+// don't erase the destination (they let underlying art show through). Pixels
+// pushed outside the canvas window are clipped. Returns the original matrix on a
+// zero delta (so a click-without-drag records no history); otherwise a new copy.
+export function moveRegion(cells, rect, dx, dy) {
+  if (dx === 0 && dy === 0) return cells;
+  const buffer = [];
+  for (let y = 0; y < rect.h; y++) {
+    const row = [];
+    for (let x = 0; x < rect.w; x++) {
+      const sx = rect.x + x;
+      const sy = rect.y + y;
+      row.push(isInside(cells, sx, sy) ? cells[sy][sx] : TRANSPARENT);
+    }
+    buffer.push(row);
+  }
+  const next = copyCells(cells);
+  for (let y = 0; y < rect.h; y++) {
+    for (let x = 0; x < rect.w; x++) writeCell(next, rect.x + x, rect.y + y, TRANSPARENT);
+  }
+  for (let y = 0; y < rect.h; y++) {
+    for (let x = 0; x < rect.w; x++) {
+      const key = buffer[y][x];
+      if (key !== TRANSPARENT) writeCell(next, rect.x + x + dx, rect.y + y + dy, key);
+    }
+  }
+  return next;
+}
+
+// Rotate the canvas-window matrix 90° clockwise about the canvas center, keeping
+// the same width × height window (so it merges back through withCellsAt). For a
+// square canvas this is the exact lossless rotation; on a non-square canvas the
+// rotated corners that fall outside the window are clipped (filled transparent).
+export function rotateCellsCW(cells) {
+  const height = cells.length;
+  const width = height ? cells[0].length : 0;
+  const cx = (width - 1) / 2;
+  const cy = (height - 1) / 2;
+  const out = [];
+  for (let oy = 0; oy < height; oy++) {
+    const row = [];
+    for (let ox = 0; ox < width; ox++) {
+      const sx = Math.round(cx + (oy - cy));
+      const sy = Math.round(cy - (ox - cx));
+      row.push(sy >= 0 && sy < height && sx >= 0 && sx < width ? cells[sy][sx] : TRANSPARENT);
+    }
+    out.push(row);
+  }
+  return out;
+}

package/kits/physics-2d/editors/useArtboardFit.js

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+const MAX_ART = 460;
+const STACK_GAP = 10;
+
+// Matches @container editor (max-width) in ui.module.css.
+export const PXART_COMPACT_MAX_WIDTH = 620;
+
+// True when .editorBody is at or below the compact-layout container threshold.
+export function useEditorCompactLayout(bodyRef, maxWidth = PXART_COMPACT_MAX_WIDTH) {
+  const [compact, setCompact] = useState(false);
+
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (!body || typeof ResizeObserver === 'undefined') return undefined;
+
+    const update = () => setCompact(body.clientWidth <= maxWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(body);
+    return () => observer.disconnect();
+  }, [bodyRef, maxWidth]);
+
+  return compact;
+}
+
+// Fit the artboard canvas inside its wrap region, accounting for padding, the
+// canvas-size bar above the art, and the sprite's aspect ratio. Re-runs when the
+// wrap resizes (timeline drag, window resize, compact layout flip).
+export function useArtboardFit({ wrapRef, sizeBarRef, resolution }) {
+  const { width, height } = resolution;
+  const isWide = width >= height;
+  const [displaySize, setDisplaySize] = useState(null);
+
+  const fit = useCallback(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const wrapStyle = getComputedStyle(wrap);
+    const padX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight);
+    const padY = parseFloat(wrapStyle.paddingTop) + parseFloat(wrapStyle.paddingBottom);
+    const barHeight = sizeBarRef.current?.offsetHeight ?? 0;
+    const maxW = wrap.clientWidth - padX;
+    const maxH = wrap.clientHeight - padY - barHeight - (barHeight ? STACK_GAP : 0);
+    if (maxW <= 0 || maxH <= 0) {
+      setDisplaySize(null);
+      return;
+    }
+
+    let displayW;
+    let displayH;
+    if (width === height) {
+      const size = Math.floor(Math.min(maxW, maxH, MAX_ART));
+      displayW = size;
+      displayH = size;
+    } else if (isWide) {
+      displayW = Math.floor(Math.min(maxW, MAX_ART));
+      displayH = Math.floor((displayW * height) / width);
+      if (displayH > maxH) {
+        displayH = Math.floor(maxH);
+        displayW = Math.floor((displayH * width) / height);
+      }
+    } else {
+      displayH = Math.floor(Math.min(maxH, MAX_ART));
+      displayW = Math.floor((displayH * width) / height);
+      if (displayW > maxW) {
+        displayW = Math.floor(maxW);
+        displayH = Math.floor((displayW * height) / width);
+      }
+    }
+
+    if (!Number.isFinite(displayW) || !Number.isFinite(displayH) || displayW <= 0 || displayH <= 0) {
+      setDisplaySize(null);
+      return;
+    }
+    setDisplaySize({ width: displayW, height: displayH });
+  }, [width, height, isWide, wrapRef, sizeBarRef]);
+
+  useLayoutEffect(() => {
+    fit();
+  }, [fit]);
+
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return undefined;
+    window.addEventListener('resize', fit);
+    if (typeof ResizeObserver === 'undefined') {
+      return () => window.removeEventListener('resize', fit);
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(wrap);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', fit);
+    };
+  }, [fit, wrapRef]);
+
+  const canvasStyle = displaySize
+    ? { width: `${displaySize.width}px`, height: `${displaySize.height}px` }
+    : undefined;
+
+  return { canvasStyle, refit: fit };
+}

package/kits/physics-2d/engine/ScenePlayer.jsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { configureSceneCanvas, makeScene } from './scene';
+import { SceneUI } from './SceneUI';
+// Engine-level scene player: mount a `SceneRuntime` against a canvas, wire
+// keyboard / pointer input, run the update+draw loop, and render the
+// behavior-driven UI overlay. No game logic lives here -- behaviors and
+// scenes are the place for that. The dev logs drawer is a builtin shell panel
+// now (cli/src/shell), not rendered here.
+export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirstFrame }) {
+  const canvasRef = useRef(null);
+  const runtimeRef = useRef(null);
+  // An error thrown from a behavior's update/draw kills the raf loop (it can't
+  // schedule the next frame), which otherwise just black-screens the preview
+  // with the throw buried in the console. Capture it here and show a redbox
+  // overlay instead. `runId` bumps to remount the loop on Restart.
+  const [error, setError] = useState(null);
+  const [runId, setRunId] = useState(0);
+  const getRuntime = useCallback(() => runtimeRef.current, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return undefined;
+    configureSceneCanvas(canvas, ctx);
+    const runtime = makeScene(sceneData, behaviorClasses, sprites, files).clone();
+    runtimeRef.current = runtime;
+    // Store BOTH the physical code ('KeyX', 'ArrowLeft', 'Space') and the
+    // logical key ('x', 'ArrowLeft', ' ') so behaviors can match either. Codes
+    // are what the kit docs/examples use; keeping key too is forgiving.
+    const onKeyDown = (event) => {
+      runtime.keys.add(event.code);
+      runtime.keys.add(event.key);
+    };
+    const onKeyUp = (event) => {
+      runtime.keys.delete(event.code);
+      runtime.keys.delete(event.key);
+    };
+    const onPointerDown = (event) => {
+      // The play surface listens on window keydown, so it only gets keys when
+      // its document/iframe holds focus. Grab focus on any click into the game
+      // (and on mount below) so the keyboard works inside the launcher embed.
+      canvas.focus();
+      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY, true);
+      canvas.setPointerCapture(event.pointerId);
+    };
+    const onPointerMove = (event) => {
+      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY);
+    };
+    const onPointerUp = (event) => {
+      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY, false);
+      try {
+        canvas.releasePointerCapture(event.pointerId);
+      } catch {
+        // Pointer capture may already be gone after cancel/blur.
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    canvas.addEventListener('pointerdown', onPointerDown);
+    canvas.addEventListener('pointermove', onPointerMove);
+    canvas.addEventListener('pointerup', onPointerUp);
+    canvas.addEventListener('pointercancel', onPointerUp);
+    // Don't steal focus from the embedding shell (e.g. the chat composer) on
+    // reload/remount. A real standalone/play, or an iframe that's
+    // already focused, still auto-focuses; a click into the game always
+    // focuses via onPointerDown above.
+    if (document.hasFocus() || window.parent === window) canvas.focus();
+    const onLoopError = (err) => {
+      // Forward to the console (the serve log picks it up) and surface it.
+      // eslint-disable-next-line no-console
+      console.error(err);
+      setError(err);
+    };
+    const stopLoop = startPlayerLoop(canvas, ctx, runtime, onFirstFrame, onLoopError);
+    return () => {
+      stopLoop();
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      canvas.removeEventListener('pointerdown', onPointerDown);
+      canvas.removeEventListener('pointermove', onPointerMove);
+      canvas.removeEventListener('pointerup', onPointerUp);
+      canvas.removeEventListener('pointercancel', onPointerUp);
+      runtimeRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runId]);
+  const onRestart = useCallback(() => {
+    setError(null);
+    setRunId((n) => n + 1);
+  }, []);
+  return (
+    <div style={{ position: 'fixed', inset: 0, background: '#000' }}>
+      <canvas
+        ref={canvasRef}
+        tabIndex={0}
+        style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
+      />
+      <SceneUI getRuntime={getRuntime} />
+      {error ? <PlayErrorOverlay error={error} onRestart={onRestart} /> : null}
+    </div>
+  );
+}
+function startPlayerLoop(canvas, ctx, runtime, onFirstFrame, onError) {
+  let raf = 0;
+  let previousTime = performance.now();
+  let firstFrameSignaled = false;
+  const tick = (now) => {
+    const dt = Math.min(0.033, (now - previousTime) / 1000);
+    previousTime = now;
+    // A throw in a behavior's update/draw must not abort the loop silently:
+    // catch it, surface it via onError, and stop scheduling frames (so it
+    // doesn't rethrow 60x/second). Restart remounts a fresh loop.
+    try {
+      runtime.update(dt);
+      configureSceneCanvas(canvas, ctx);
+      runtime.draw(ctx, { useCamera: true });
+    } catch (err) {
+      onError?.(err);
+      return;
+    }
+    if (!firstFrameSignaled) {
+      firstFrameSignaled = true;
+      // Wait one frame so the draw composites before reveal, avoiding a blank flash.
+      requestAnimationFrame(() => onFirstFrame?.());
+    }
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+// Redbox overlay shown when the play loop throws. Covers the canvas with the
+// error name/message and stack so a broken behavior is legible instead of a
+// black screen. Restart remounts the loop; fixing the code and restarting the
+// serve reloads the whole preview fresh.
+function PlayErrorOverlay({ error, onRestart }) {
+  const name = error?.name ?? 'Error';
+  const message = error?.message ?? String(error);
+  const stack = typeof error?.stack === 'string' ? error.stack : '';
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 2147483000,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        padding: '20px 22px',
+        background: 'rgba(20, 8, 8, 0.94)',
+        color: '#ffd9dc',
+        font: "13px/1.5 'SFMono-Regular', Consolas, 'Liberation Mono', monospace",
+        overflow: 'auto',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span style={{ fontSize: 15, fontWeight: 700, color: '#ff6b74' }}>Play error</span>
+        <button
+          type="button"
+          onClick={onRestart}
+          style={{
+            marginLeft: 'auto',
+            padding: '4px 12px',
+            border: '1px solid #a02828',
+            borderRadius: 4,
+            background: '#a02828',
+            color: '#fff',
+            font: 'inherit',
+            cursor: 'pointer',
+          }}
+        >
+          Restart
+        </button>
+      </div>
+      <div style={{ color: '#fff', fontWeight: 600, wordBreak: 'break-word' }}>
+        {name}: {message}
+      </div>
+      {stack ? (
+        <pre
+          style={{
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            color: '#e79aa0',
+            fontSize: 12,
+          }}
+        >
+          {stack}
+        </pre>
+      ) : null}
+      <div style={{ color: '#c98a8f', fontSize: 12 }}>
+        The preview stopped. Fix the code and restart the serve to reload, or press Restart to retry.
+      </div>
+    </div>
+  );
+}

package/kits/physics-2d/engine/SceneUI.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './ui.module.css';
+import { useElementSize } from './ui';
+import { cardSize } from './scene';
+// Game-time UI overlay.
+//
+// Behaviors expose a `ui(actor, scene)` handler -- the React counterpart of
+// `draw`. `SceneUI` collects every behavior's UI output each frame and renders
+// it into a deck-sized layer that sits exactly over the canvas. The layer is
+// `cardSize` units wide/tall and scaled onto the canvas box, so behaviors lay
+// out in the same card units as `Layout`. The root clips with `overflow:
+// hidden`, so deck UI can never render outside the card.
+export function SceneUI({ getRuntime }) {
+  const rootRef = useRef(null);
+  // Track the canvas-sized overlay box so the card-unit layer scales onto it.
+  const box = useElementSize(rootRef);
+  const [, forceRender] = useState(0);
+  // Re-render every frame so behavior UI reflects live runtime state.
+  useEffect(() => {
+    let raf = 0;
+    const frame = () => {
+      forceRender((tick) => tick + 1);
+      raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  return (
+    <div ref={rootRef} className={styles.sceneUiRoot}>
+      <div
+        className={styles.sceneUiLayer}
+        style={{
+          width: cardSize.width,
+          height: cardSize.height,
+          transform: `scale(${box.width / cardSize.width}, ${box.height / cardSize.height})`,
+        }}>
+        {collectUiNodes(getRuntime())}
+      </div>
+    </div>
+  );
+}
+// Build one keyed React node per behavior that defines a `ui` handler.
+function collectUiNodes(runtime) {
+  if (!runtime) return [];
+  const nodes = [];
+  for (const actor of runtime.getActors()) {
+    for (const [behaviorName, props] of Object.entries(actor.components)) {
+      if (!props) continue;
+      const Behavior = runtime.behaviors.get(behaviorName);
+      if (!Behavior) continue;
+      const instance = new Behavior(props);
+      if (!instance.ui) continue;
+      const node = instance.ui(actor, runtime);
+      if (node == null) continue;
+      nodes.push(<React.Fragment key={`${actor.id}:${behaviorName}`}>{node}</React.Fragment>);
+    }
+  }
+  return nodes;
+}

package/kits/physics-2d/engine/assets.js

@@ -0,0 +1,15 @@
+import { parseFull } from './pxart';
+
+// Build the runtime asset map from a path->text file map: parsed `.pxart`
+// Sprites keyed by file path (nulls skipped). Shared by the editor App and the
+// play-only entry point so both hand the SceneRuntime the same map.
+export function collectAssets(files) {
+  const sprites = {};
+  for (const [path, text] of Object.entries(files)) {
+    if (path.endsWith('.pxart')) {
+      const sprite = parseFull(text);
+      if (sprite) sprites[path] = sprite;
+    }
+  }
+  return { sprites };
+}

package/kits/physics-2d/engine/autoInspector.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { CheckboxField, ColorField, NumberField, Panel, TextField, isHexColor } from './ui';
+// Build the override-indicator field props (purple tint + "Default: X [Reset]")
+// for a single property from a behavior panel's override context. Returns an
+// empty object when there's no context (blueprint template editing) or the
+// property isn't overridden on this instance, so fields render normally.
+export function overrideProps(override, prop) {
+  if (!override || !override.isOverridden(prop)) return {};
+  return {
+    overridden: true,
+    defaultValue: override.baseline(prop),
+    onReset: () => override.reset(prop),
+  };
+}
+export function AutoFields({ defaultProps, component, setComponent, only, exclude, override }) {
+  const keys = Object.keys(defaultProps).filter((key) => {
+    if (only) return only.includes(key);
+    if (exclude) return !exclude.includes(key);
+    return true;
+  });
+  return (
+    <>
+      {keys.map((key) => {
+        const fallback = defaultProps[key];
+        const current = key in component ? component[key] : fallback;
+        const set = (value) => setComponent({ [key]: value });
+        const label = humanizeKey(key);
+        const sample = fallback ?? current;
+        const ov = overrideProps(override, key);
+        if (typeof sample === 'number') {
+          return <NumberField key={key} label={label} value={current} onChange={set} {...ov} />;
+        }
+        if (typeof sample === 'boolean') {
+          return <CheckboxField key={key} label={label} checked={current} onChange={set} {...ov} />;
+        }
+        if (isHexColor(sample)) {
+          return <ColorField key={key} label={label} value={current} onChange={set} {...ov} />;
+        }
+        return (
+          <TextField
+            key={key}
+            label={label}
+            value={current == null ? '' : String(current)}
+            onChange={set}
+            {...ov}
+          />
+        );
+      })}
+    </>
+  );
+}
+export function AutoInspector({ behaviorName, defaultProps, component, setComponent, override }) {
+  return (
+    <Panel title={humanizeKey(behaviorName)} overridden={override?.anyOverridden()}>
+      <AutoFields
+        defaultProps={defaultProps}
+        component={component}
+        setComponent={setComponent}
+        override={override}
+      />
+    </Panel>
+  );
+}
+// `deadZoneY` -> `Dead Zone Y`, `PlatformerCharacter` -> `Platformer Character`.
+export function humanizeKey(key) {
+  return key
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/^./, (c) => c.toUpperCase())
+    .trim();
+}