npm - castle-web-cli - Versions diffs - 0.4.84 → 0.4.86 - Mend

castle-web-cli 0.4.84 → 0.4.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/dist/ide.js +35 -13
package/dist/shell/assets/{index-BOgm5T3W.js → index-BJLaUTJE.js} +21 -21
package/dist/shell/index.html +1 -1
package/kits/basic-2d/CLAUDE.md +3 -3
package/kits/basic-2d/behaviors/Collider.jsx +172 -26
package/kits/basic-2d/behaviors/Layout.jsx +24 -0
package/kits/basic-2d/editors/PlayOnly.jsx +11 -9
package/kits/basic-2d/editors/SceneEditor.jsx +49 -16
package/kits/basic-2d/editors/SelectionOverlay.jsx +21 -11
package/kits/basic-2d/editors/behaviorRegistry.js +9 -3
package/kits/basic-2d/engine/behaviorExtensions.js +28 -0
package/kits/basic-2d/engine/collider.js +60 -6
package/kits/basic-2d/engine/scene.js +28 -2
package/kits/basic-2d/engine/systemRegistry.js +12 -0
package/kits/basic-2d/engine/ui.jsx +2 -0
package/kits/basic-2d/main.jsx +3 -2
package/kits/physics-2d/.prettierrc +8 -0
package/kits/physics-2d/CLAUDE.md +329 -0
package/kits/physics-2d/behaviors/Camera.jsx +43 -0
package/kits/physics-2d/behaviors/Collider.jsx +213 -0
package/kits/physics-2d/behaviors/Goal.jsx +29 -0
package/kits/physics-2d/behaviors/Layout.jsx +53 -0
package/kits/physics-2d/behaviors/Sprite.jsx +352 -0
package/kits/physics-2d/behaviors/tint.js +47 -0
package/kits/physics-2d/blueprints/ball.scene +14 -0
package/kits/physics-2d/blueprints/block.scene +12 -0
package/kits/physics-2d/blueprints/cauldron.scene +18 -0
package/kits/physics-2d/blueprints/crate.scene +14 -0
package/kits/physics-2d/blueprints/goal.scene +12 -0
package/kits/physics-2d/castle.json +13 -0
package/kits/physics-2d/docs/pxart-format.md +377 -0
package/kits/physics-2d/drawings/block.pxart +25 -0
package/kits/physics-2d/drawings/cauldron.pxart +113 -0
package/kits/physics-2d/editors/BlueprintLibrary.jsx +247 -0
package/kits/physics-2d/editors/ErrorBoundary.jsx +59 -0
package/kits/physics-2d/editors/PlayOnly.jsx +31 -0
package/kits/physics-2d/editors/PxArtEditor.jsx +954 -0
package/kits/physics-2d/editors/SceneEditor.jsx +1696 -0
package/kits/physics-2d/editors/SelectionOverlay.jsx +909 -0
package/kits/physics-2d/editors/SingleEditor.jsx +122 -0
package/kits/physics-2d/editors/behaviorRegistry.js +30 -0
package/kits/physics-2d/editors/editorHistory.js +157 -0
package/kits/physics-2d/editors/inspectorSheet.js +13 -0
package/kits/physics-2d/editors/pixelCanvas.js +11 -0
package/kits/physics-2d/editors/pixelEditorChrome.jsx +74 -0
package/kits/physics-2d/editors/pixelGeometry.js +140 -0
package/kits/physics-2d/editors/pixelInspector.jsx +633 -0
package/kits/physics-2d/editors/pxArtEditorModel.js +732 -0
package/kits/physics-2d/editors/pxArtPlayback.js +92 -0
package/kits/physics-2d/editors/pxArtTimeline.jsx +752 -0
package/kits/physics-2d/editors/pxArtTimeline.module.css +506 -0
package/kits/physics-2d/editors/pxArtTools.js +232 -0
package/kits/physics-2d/editors/useArtboardFit.js +102 -0
package/kits/physics-2d/engine/ScenePlayer.jsx +196 -0
package/kits/physics-2d/engine/SceneUI.jsx +59 -0
package/kits/physics-2d/engine/assets.js +15 -0
package/kits/physics-2d/engine/autoInspector.jsx +70 -0
package/kits/physics-2d/engine/behaviorExtensions.js +28 -0
package/kits/physics-2d/engine/blueprint.js +521 -0
package/kits/physics-2d/engine/collider.js +200 -0
package/kits/physics-2d/engine/files.js +117 -0
package/kits/physics-2d/engine/liveReload.js +88 -0
package/kits/physics-2d/engine/pxart.js +1032 -0
package/kits/physics-2d/engine/pxartSmooth.js +222 -0
package/kits/physics-2d/engine/scene.js +685 -0
package/kits/physics-2d/engine/spriteGeometry.js +32 -0
package/kits/physics-2d/engine/systemRegistry.js +12 -0
package/kits/physics-2d/engine/ui.jsx +688 -0
package/kits/physics-2d/engine/ui.module.css +2287 -0
package/kits/physics-2d/eslint.config.js +71 -0
package/kits/physics-2d/index.html +24 -0
package/kits/physics-2d/main.jsx +24 -0
package/kits/physics-2d/package-lock.json +2706 -0
package/kits/physics-2d/package.json +42 -0
package/kits/physics-2d/physics/PhysicsSystem.js +290 -0
package/kits/physics-2d/physics/behaviors/AnalogStick.jsx +101 -0
package/kits/physics-2d/physics/behaviors/Draggable.jsx +79 -0
package/kits/physics-2d/physics/behaviors/RigidBody.jsx +55 -0
package/kits/physics-2d/physics/behaviors/Slingshot.jsx +118 -0
package/kits/physics-2d/physics/controls.js +79 -0
package/kits/physics-2d/physics/extensions/collider.js +15 -0
package/kits/physics-2d/physics/index.js +26 -0
package/kits/physics-2d/physics/matterBridge.js +126 -0
package/kits/physics-2d/pnpm-lock.yaml +1761 -0
package/kits/physics-2d/scenes/main.scene +12 -0
package/kits/physics-2d/scenes/sandbox.scene +13 -0
package/kits/physics-2d/scripts/draw.mjs +121 -0
package/kits/physics-2d/systems/physics.js +8 -0
package/kits/physics-2d/vite.config.js +1 -0
package/package.json +1 -1

package/dist/shell/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Castle Editor</title>
-    <script type="module" crossorigin src="/__castle/ide/assets/index-BOgm5T3W.js"></script>
+    <script type="module" crossorigin src="/__castle/ide/assets/index-BJLaUTJE.js"></script>
     <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-DonnH--m.css">
   </head>
   <body>

package/kits/basic-2d/CLAUDE.md CHANGED Viewed

@@ -99,7 +99,7 @@ A **blueprint** is a `.scene` file under `blueprints/` whose single actor (`acto
       "components": {
         "Layout": { "width": 50, "height": 25 },
         "Sprite": { "file": "drawings/brick.pxart" },
-        "Collider": { "kind": "solid" },
+        "Collider": {},
         "Brick": {}
       }
     }
@@ -120,7 +120,7 @@ Template `components` keys are behavior names (the `static behaviorName`); add a
 - **Sprite** — `{ file: "drawings/foo.pxart", tint?: "#rrggbbaa", playing?: true, tag?: "", mode?: 'cover'|'fit'|'stretch'|'tile', tileSize?: 50 }`. Renders a `.pxart` pixel-art sprite into the Layout box: scaled up preserving the art's aspect ratio to fill the whole box, cropping whatever overflows a mismatched box (`mode: 'cover'`, the default -- CSS object-fit: cover), scaled preserving the art's aspect ratio and centered so the whole sprite stays visible, letterboxing a mismatched box instead of cropping (`mode: 'fit'` -- CSS object-fit: contain), scaled to fill the box exactly and distorting the art when the aspect ratios don't match (`mode: 'stretch'`), or repeated (`mode: 'tile'`). `tint` multiplies; use white (`#ffffffff`) or omit for the original colors. Animated sprites play automatically; set `playing: false` to hold the first frame, or `tag` to play a named animation tag. Tile mode repeats the art at a fixed cell size (`tileSize` card units tall, width scaled by the art's aspect) instead of stretching it across the Layout box.
   - **Missing sprites fall back to a placeholder.** If `file` names a sprite that doesn't exist yet, it renders the fallback `drawings/cauldron.pxart` — so you can give an actor its REAL intended sprite name (`drawings/paddle.pxart`) right away and it shows the placeholder until that file is created. Reference real names from the start; don't wait for the art.
   - **Fill the box, don't distort.** The default `mode: 'cover'` fills the Layout box with the art undistorted, cropping whatever overflows when the box aspect doesn't match the art's — so treat the Layout box like an image frame in a design tool: size it to frame what matters and keep the sprite's important content toward the center, since the edges may be cropped. Keeping an actor's Layout aspect ratio close to its sprite's native aspect ratio minimizes how much gets cropped. When the whole sprite must stay visible (nothing is safe to crop), use `mode: 'fit'`, which preserves the art and letterboxes the mismatched box instead. Avoid `mode: 'stretch'` for pixel art — filling a long/tall box by distorting wrecks the pixels (a brick sprite stretched into a wall ruins the bricks). For long surfaces (walls, floors, platforms), use `mode: 'tile'` on one actor to repeat the art at a fixed cell size instead of stretching or cropping a single sprite.
-- **Collider** — `{ kind: 'solid'|'pickup', mode?: 'auto'|'manual', width, height, offsetX?, offsetY?, debug? }`. Just a rect; `offsetX`/`offsetY` nudge the collider from its default position (so `0,0` is the default). `mode: 'auto'` (the default) fits the rect to the actor's Sprite's opaque pixels, mapped through the Sprite's draw mode (`fit`'s letterboxed dest rect, `stretch`'s full Layout box, `cover`'s filled box clipped to the Layout box; `tile` mode and a missing/unresolved Sprite use the whole Layout box instead). `width`/`height` only apply in `mode: 'manual'` (a rect of that size, centered in the Layout box); they're ignored in `auto`. The framework does NOT auto-resolve collisions for you. Use it as data:
+- **Collider** — `{ shape?: 'box'|'circle', width, height, radius, offsetX?, offsetY?, isTrigger?, debug? }`. A box (default) or circle. **Size tracks the Layout box** unless you set an explicit `width`/`height` (box) or `radius` (circle); `offsetX`/`offsetY` nudge it from center (so `0,0` is centered). In the editor, the Collider panel's **"Auto-fit to sprite"** action snaps the dimensions/offset to the sprite's opaque-pixel bounds (only shown when it isn't already fitted) — a one-time computed value, not a live mode. `isTrigger: true` marks a **sensor** (draws yellow, reads as a pass-through zone for pickup/goal logic); a plain collider reads as a solid wall. Either way the framework does NOT auto-resolve collisions — the collider is data you act on. (Legacy decks carrying `mode: 'auto'` keep their old live sprite-fit for back-compat.) Use it:
   ```jsx
   for (const other of scene.getActors()) {
@@ -189,7 +189,7 @@ For HUD text use a behavior's `ui` hook (returns React); for in-world text or sh
 - `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.
+- `Brick` behavior: typically just a marker — a plain `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

package/kits/basic-2d/behaviors/Collider.jsx CHANGED Viewed

@@ -1,58 +1,204 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
+import React, { useState } from 'react';
+import { Icon, NumberField, Panel, SelectField } from '../engine/ui';
 import { AutoFields, overrideProps } from '../engine/autoInspector';
-import { getColliderRect, intersects } from '../engine/collider';
+import { computeAutoFit, getColliderRect, getColliderShape, intersects } from '../engine/collider';
+import { extensionDefaultProps } from '../engine/behaviorExtensions';
+// Collapsible "Dimensions" section. The header row's label lines up exactly with
+// the field labels above/below (both start at the panel body's 16px left pad);
+// the open/closed caret floats in the left gutter without shifting the label.
+// `margin-bottom: 12px` matches a field row's `padding-bottom`, so the gap to
+// the next entry is the same whether the section is open or closed.
+const dimHeaderRowStyle = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  minHeight: 28,
+  margin: '0 0 12px',
+};
+const dimToggleStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  color: 'var(--castle-inspector-text)',
+  fontFamily: 'inherit',
+  fontSize: 14,
+  cursor: 'pointer',
+};
+// The caret sits in the panel's left gutter (label column starts at x=16).
+const dimCaretStyle = {
+  position: 'absolute',
+  left: -14,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontSize: 11,
+  opacity: 0.65,
+};
+const autoFitLinkStyle = {
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  color: '#4aa3ff',
+  fontFamily: 'inherit',
+  fontSize: 13,
+  cursor: 'pointer',
+};
+const dimBodyStyle = { paddingLeft: 14 };
 export class Collider {
   static behaviorName = 'Collider';
   static defaultProps = {
-    kind: 'solid',
-    mode: 'auto',
-    width: 50,
-    height: 50,
+    shape: 'box',
+    // width/height/radius are intentionally NOT defaulted: an unset size means
+    // "match the actor's Layout box" (see engine/collider.js manualRect and the
+    // effective values in the inspector). Defaulting them to a fixed number made
+    // every collider shrink to that number instead of tracking the actor.
+    radius: 0,
     offsetX: 0,
     offsetY: 0,
+    // `isTrigger` marks a sensor: it still reports overlaps (draws yellow, reads
+    // as a pass-through zone for pickup/goal logic) but does not block on its
+    // own -- collisions are data you act on. Kit modules can register MORE
+    // Collider fields from outside this file (the physics module adds
+    // bounciness/friction material); see engine/behaviorExtensions.js. That's
+    // why this file is byte-identical across kits -- the physics-only fields
+    // live in physics/extensions/, not here.
+    isTrigger: false,
     debug: false,
+    ...extensionDefaultProps('Collider'),
   };
   constructor(props) {
     this.props = props;
   }
+  // Seed props when the collider is first added to an actor: snap it to the
+  // sprite's opaque-pixel bounds (what "Auto-fit to sprite" computes) so a new
+  // collider frames the art rather than the whole Layout box. Falls back to the
+  // unset (Layout-box) size when there's nothing to fit to -- no sprite, tile
+  // mode, or transparent art. The editor's addBehavior calls this (see
+  // editors/SceneEditor.jsx initialBehaviorProps).
+  static initialProps(actor, ctx) {
+    const fit = computeAutoFit(actor, ctx?.sprites);
+    return fit ? { ...Collider.defaultProps, ...fit } : { ...Collider.defaultProps };
+  }
   draw(actor, scene, ctx, options) {
     if (!options.showDebugColliders && !this.props.debug) return;
-    const rect = getColliderRect(actor, scene.sprites);
-    if (!rect) return;
+    const geom = getColliderShape(actor, scene.sprites);
+    if (!geom) return;
+    // A sensor (isTrigger) reads as a pass-through zone; a solid as a wall.
+    const isSensor = Boolean(this.props.isTrigger) || this.props.kind === 'pickup';
     ctx.save();
-    ctx.strokeStyle = this.props.kind === 'pickup' ? '#ffe17a' : '#8db7ff';
+    ctx.strokeStyle = isSensor ? '#ffe17a' : '#8db7ff';
     ctx.lineWidth = 2;
-    ctx.strokeRect(rect.x + 1, rect.y + 1, rect.width - 2, rect.height - 2);
+    if (geom.shape === 'circle') {
+      ctx.beginPath();
+      ctx.arc(geom.cx, geom.cy, geom.radius, 0, Math.PI * 2);
+      ctx.stroke();
+    } else {
+      ctx.strokeRect(geom.x + 1, geom.y + 1, geom.width - 2, geom.height - 2);
+    }
     ctx.restore();
   }
-  static Inspector({ component, setComponent, override }) {
+  static Inspector({ actor, component, sprites, setComponent, override }) {
+    const [dimOpen, setDimOpen] = useState(true);
+    const layout = actor?.components?.Layout ?? {};
+    const shape = component.shape ?? Collider.defaultProps.shape;
+    // Unset width/height/radius track the actor's Layout box; surface that
+    // effective value so a field never reads blank while the collider is sized.
+    const width = component.width ?? layout.width ?? 50;
+    const height = component.height ?? layout.height ?? 50;
+    const effectiveRadius = component.radius > 0 ? component.radius : Math.min(width, height) / 2;
+    // "Auto-fit to sprite": the explicit dims/offset that match the sprite's
+    // opaque-pixel bounds. Only offered when the collider isn't already fitted.
+    const autoFit = computeAutoFit(actor, sprites);
+    let autoFitPatch = null;
+    if (autoFit) {
+      autoFitPatch =
+        shape === 'circle'
+          ? { radius: Math.round(Math.min(autoFit.width, autoFit.height) / 2), offsetX: autoFit.offsetX, offsetY: autoFit.offsetY }
+          : { width: autoFit.width, height: autoFit.height, offsetX: autoFit.offsetX, offsetY: autoFit.offsetY };
+    }
+    const currentValue = (key) => {
+      if (key === 'radius') return effectiveRadius;
+      if (key === 'width') return width;
+      if (key === 'height') return height;
+      return component[key] ?? 0;
+    };
+    const alreadyFitted =
+      autoFitPatch && Object.entries(autoFitPatch).every(([key, value]) => Math.abs(currentValue(key) - value) < 0.6);
     return (
       <Panel title="Collider" overridden={override?.anyOverridden()}>
         <SelectField
-          label="Kind"
-          value={component.kind}
-          onChange={(kind) => setComponent({ kind: kind })}
-          options={['solid', 'pickup']}
-          {...overrideProps(override, 'kind')}
-        />
-        <SelectField
-          label="Mode"
-          value={component.mode}
-          onChange={(mode) => setComponent({ mode: mode })}
-          options={['auto', 'manual']}
-          {...overrideProps(override, 'mode')}
+          label="Shape"
+          value={component.shape}
+          onChange={(value) => setComponent({ shape: value })}
+          options={['box', 'circle']}
+          {...overrideProps(override, 'shape')}
         />
+        <div style={dimHeaderRowStyle}>
+          <span style={dimCaretStyle}>
+            <Icon name={dimOpen ? 'chevron-down' : 'chevron-right'} />
+          </span>
+          <button type="button" onClick={() => setDimOpen((open) => !open)} style={dimToggleStyle}>
+            Dimensions
+          </button>
+          {autoFitPatch && !alreadyFitted ? (
+            <button type="button" onClick={() => setComponent(autoFitPatch)} style={autoFitLinkStyle}>
+              Auto-fit to sprite
+            </button>
+          ) : null}
+        </div>
+        {dimOpen ? (
+          <div style={dimBodyStyle}>
+            {shape === 'circle' ? (
+              <NumberField
+                label="Radius"
+                value={effectiveRadius}
+                onChange={(value) => setComponent({ radius: value })}
+                {...overrideProps(override, 'radius')}
+              />
+            ) : (
+              <>
+                <NumberField
+                  label="Width"
+                  value={width}
+                  onChange={(value) => setComponent({ width: value })}
+                  {...overrideProps(override, 'width')}
+                />
+                <NumberField
+                  label="Height"
+                  value={height}
+                  onChange={(value) => setComponent({ height: value })}
+                  {...overrideProps(override, 'height')}
+                />
+              </>
+            )}
+            <AutoFields
+              defaultProps={Collider.defaultProps}
+              component={component}
+              setComponent={setComponent}
+              only={['offsetX', 'offsetY']}
+              override={override}
+            />
+          </div>
+        ) : null}
         <AutoFields
           defaultProps={Collider.defaultProps}
           component={component}
           setComponent={setComponent}
-          exclude={['kind', 'mode']}
+          exclude={['shape', 'width', 'height', 'radius', 'offsetX', 'offsetY']}
           override={override}
         />
       </Panel>
@@ -64,4 +210,4 @@ export class Collider {
 // scene (e.g. editors/SelectionOverlay.jsx, which passes the merged preview
 // actors plus the sprites map). See engine/collider.js for the single
 // implementation.
-export { getColliderRect, intersects };
+export { getColliderRect, getColliderShape, intersects };

package/kits/basic-2d/behaviors/Layout.jsx CHANGED Viewed

@@ -8,6 +8,9 @@ export class Layout {
     rotation: 0,
     width: 50,
     height: 50,
+    // Show the Layout box (the invisible frame the sprite fills and the collider
+    // derives from) as a dashed outline, in editor and play. Per-actor toggle.
+    debug: false,
   };
   // Position/rotation/z never inherit from a blueprint: they're always written
@@ -16,6 +19,13 @@ export class Layout {
   // affects newly placed instances, never moves ones already placed. Because
   // they're always instance-local, they're also never surfaced as blueprint
   // "overrides" in the inspector. width/height default to inherited (absent).
+  //
+  // Size is width/height in card units -- the same space you compose in. A
+  // user-facing scaleX/scaleY (relative to the sprite's native pixels) was
+  // tried and reverted: it only pays off under pixel-perfect (integer scales),
+  // and in today's card-units model it just adds a conversion + couples Layout
+  // to the Sprite. Revisit scale fields when pixel-perfect mode lands. See
+  // ~/castle/cauldron-rendering-scale-model.md.
   static propertyMeta = {
     x: { inherit: false },
     y: { inherit: false },
@@ -26,4 +36,18 @@ export class Layout {
   constructor(props) {
     this.props = props;
   }
+  // Outline the Layout box when `debug` is on. Drawn in the actor's own rotated
+  // frame (so it rotates with the actor), with a distinct dashed lavender style
+  // so it reads separately from the solid collider debug and the selection box.
+  draw(actor, scene, ctx) {
+    if (!this.props.debug) return;
+    const { x, y, width, height } = this.props;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(190, 178, 255, 0.75)';
+    ctx.setLineDash([4, 3]);
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(x + 0.5, y + 0.5, width - 1, height - 1);
+    ctx.restore();
+  }
 }

package/kits/basic-2d/editors/PlayOnly.jsx CHANGED Viewed

@@ -5,20 +5,22 @@ import { useLiveDeckFiles } from '../engine/liveReload';
 import { collectAssets } from '../engine/assets';
 import { ScenePlayer } from '../engine/ScenePlayer';
 import { behaviorClasses } from './behaviorRegistry';
-// Play-mode entry point. Intentionally thin: it locates the start scene and
-// hands it to the engine's `ScenePlayer`, which owns the runtime and input.
-// Deck/game logic belongs in `scenes/` and `behaviors/`, not here.
-// Files are live: scene/drawing edits re-key the player against fresh data;
-// code changes reload this context (see engine/liveReload.js).
-export function PlayOnly() {
+// Play-mode entry point. Plays the scene named by `?scene=<path>` (the shell's
+// Play panel sets this), defaulting to `scenes/main.scene`. It renders ONLY the
+// game — the scene picker lives in the Play panel chrome (the shell), not here,
+// so nothing floats over the game surface and steals input. Files are live:
+// scene/drawing edits re-key the player against fresh data.
+const DEFAULT_SCENE = 'scenes/main.scene';
+export function PlayOnly({ initialScene } = {}) {
   const { files, dataVersion } = useLiveDeckFiles();
-  const sceneText = files['scenes/main.scene'] ?? '';
-  const { value: sceneData } = parseJsonFile('scenes/main.scene', sceneText);
+  const scenePath = initialScene && files[initialScene] !== undefined ? initialScene : DEFAULT_SCENE;
+  const { value: sceneData } = parseJsonFile(scenePath, files[scenePath] ?? '');
   if (!sceneData) return null;
   const { sprites } = collectAssets(files);
   return (
     <ScenePlayer
-      key={dataVersion}
+      key={`${scenePath}:${dataVersion}`}
       sceneData={sceneData}
       sprites={sprites}
       files={files}

package/kits/basic-2d/editors/SceneEditor.jsx CHANGED Viewed

@@ -321,7 +321,9 @@ export function SceneEditor({
       const Behavior = findBehaviorClass(behaviorName);
       if (!Behavior) return;
       updateBlueprintTemplate((components) => {
-        components[behaviorName] = { ...Behavior.defaultProps };
+        // The template's own components (Layout/Sprite) are the actor context an
+        // initialProps hook (e.g. Collider auto-fit) reads from.
+        components[behaviorName] = initialBehaviorProps(Behavior, { components }, sprites);
       });
     },
     removeBehavior: (behaviorName) =>
@@ -347,6 +349,8 @@ export function SceneEditor({
     selectedActorIds,
     onSelectActorIds,
     isBlueprintFile,
+    sprites,
+    resolvedActors: previewSceneData?.actors,
   });
   const snapSettings = getSnapSettings(sceneData);
   const stageWrapStyle = {
@@ -464,19 +468,32 @@ export function SceneEditor({
         <div className={styles.sceneWorkspace}>
           <div className={styles.sceneTools}>
             {isBlueprintFile ? null : (
-              <BlueprintLibrary
-                files={files}
-                sprites={sprites}
-                canvasRef={canvasRef}
-                editCameraRef={editCameraRef}
-                isPlaying={isPlaying}
-                selectedBlueprintPath={selectedBlueprintPath}
-                instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
-                onSelectBlueprint={onSelectBlueprint}
-                onAddActor={onAddActor}
-                dragPlace={dragPlace}
-                onDeleteBlueprint={onDeleteBlueprint}
-              />
+              <>
+                {/* Open (or focus) a Play panel in the shell for this scene.
+                    Lives here in the visible toolbar because the scene editor's
+                    header only renders in the combined editor, not the shell. */}
+                <IconButton
+                  icon="external"
+                  label="Open play preview"
+                  onClick={(event) => {
+                    event.currentTarget.blur();
+                    window.parent.postMessage({ type: 'castle-open-playtest', scene: path }, '*');
+                  }}
+                />
+                <BlueprintLibrary
+                  files={files}
+                  sprites={sprites}
+                  canvasRef={canvasRef}
+                  editCameraRef={editCameraRef}
+                  isPlaying={isPlaying}
+                  selectedBlueprintPath={selectedBlueprintPath}
+                  instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
+                  onSelectBlueprint={onSelectBlueprint}
+                  onAddActor={onAddActor}
+                  dragPlace={dragPlace}
+                  onDeleteBlueprint={onDeleteBlueprint}
+                />
+              </>
             )}
           </div>
           <div className={styles.stageWrap} style={stageWrapStyle}>
@@ -601,6 +618,10 @@ export function SceneEditor({
 }
 // Header-right playback controls, in the mockup's order: Undo, Redo, Play.
 // Play stays a play/stop toggle. Duplicate/remove live on the on-canvas toolbar.
+// "Open preview" asks the shell (parent window) to open/focus a Play panel for
+// THIS scene -- a separate, persistent preview alongside the editor (vs the
+// in-panel play toggle). Defaults to an already-open preview for this scene,
+// else opens a new one (handled shell-side, keyed by scene).
 function HeaderPlaybackButtons({ isPlaying, setIsPlaying, history }) {
   return (
     <>
@@ -638,7 +659,17 @@ function HeaderPlaybackButtons({ isPlaying, setIsPlaying, history }) {
 // remove-behavior stay whole-component operations straight against the
 // instance's own sparse `components` -- there's no per-property baseline to
 // diff when a component doesn't exist on one side at all.
-function makeSceneActions({ sceneData, files, serialize, commit, selectedActorIds, onSelectActorIds, isBlueprintFile }) {
+// Props to seed a behavior with when it's freshly added to `actor`. A behavior
+// may define `static initialProps(actor, { sprites })` to derive props from the
+// actor it lands on (e.g. Collider snaps to the sprite's opaque-pixel bounds);
+// otherwise it starts from `defaultProps`. `actor` is the resolved actor
+// (Layout/Sprite merged) or, for a blueprint template, `{ components }`.
+function initialBehaviorProps(Behavior, actor, sprites) {
+  if (Behavior.initialProps && actor) return Behavior.initialProps(actor, { sprites });
+  return { ...Behavior.defaultProps };
+}
+function makeSceneActions({ sceneData, files, serialize, commit, selectedActorIds, onSelectActorIds, isBlueprintFile, sprites, resolvedActors }) {
   function commitScene(next, options) {
     commit(serialize(next), options);
   }
@@ -650,8 +681,9 @@ function makeSceneActions({ sceneData, files, serialize, commit, selectedActorId
     addBehavior: (actorId, behaviorName) => {
       const Behavior = findBehaviorClass(behaviorName);
       if (!Behavior) return;
+      const resolved = resolvedActors?.find((actor) => actor.id === actorId);
       commitScene(
-        setActorComponent(sceneData, actorId, behaviorName, { ...Behavior.defaultProps })
+        setActorComponent(sceneData, actorId, behaviorName, initialBehaviorProps(Behavior, resolved, sprites))
       );
     },
     removeBehavior: (actorId, behaviorName) =>
@@ -1565,6 +1597,7 @@ function ActorInspector({
             actor={selectedActor}
             component={component}
             files={files}
+            sprites={sprites}
             setComponent={setComponent}
             override={override}
           />

package/kits/basic-2d/editors/SelectionOverlay.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { getColliderRect } from '../behaviors/Collider';
+import { getColliderShape } from '../behaviors/Collider';
 import { cardSize, screenToCard } from '../engine/scene';
 import { cx, Icon, styles, useElementSize } from '../engine/ui';
@@ -216,13 +216,14 @@ export function SelectionOverlay({
               key={collider.actorId}
               className={cx(
                 styles.selColliderBox,
-                collider.kind === 'pickup' && styles.selColliderPickup
+                collider.isTrigger && styles.selColliderPickup
               )}
               style={{
                 left: collider.x,
                 top: collider.y,
                 width: collider.width,
                 height: collider.height,
+                borderRadius: collider.shape === 'circle' ? '50%' : undefined,
                 transformOrigin: `${collider.originX}px ${collider.originY}px`,
                 transform: `rotate(${collider.rotation}deg)`,
               }}
@@ -463,18 +464,27 @@ function getSelectedColliderFrames(sceneData, actorIds, sprites) {
     .map((actor) => {
       const layout = actor.components.Layout;
       const collider = actor.components.Collider;
-      const rect = getColliderRect(actor, sprites);
-      if (!layout || !collider || !rect) return null;
+      const geom = getColliderShape(actor, sprites);
+      if (!layout || !collider || !geom) return null;
+      // For a circle we render a radius-sized square with border-radius; for a
+      // box, the rect itself. Both come from the shared geometry so the preview
+      // matches the physics body exactly (shape, radius, offset, auto/manual).
+      const isCircle = geom.shape === 'circle';
+      const x = isCircle ? geom.cx - geom.radius : geom.x;
+      const y = isCircle ? geom.cy - geom.radius : geom.y;
+      const width = isCircle ? geom.radius * 2 : geom.width;
+      const height = isCircle ? geom.radius * 2 : geom.height;
       return {
         actorId: actor.id,
-        kind: collider.kind,
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height,
+        shape: geom.shape,
+        isTrigger: Boolean(collider.isTrigger) || collider.kind === 'pickup',
+        x,
+        y,
+        width,
+        height,
         rotation: layout.rotation ?? 0,
-        originX: layout.x + layout.width / 2 - rect.x,
-        originY: layout.y + layout.height / 2 - rect.y,
+        originX: layout.x + layout.width / 2 - x,
+        originY: layout.y + layout.height / 2 - y,
       };
     })
     .filter(Boolean);

package/kits/basic-2d/editors/behaviorRegistry.js CHANGED Viewed

@@ -1,6 +1,12 @@
-// Discover every behavior class from `behaviors/*.tsx`. Vite HMR is off, so a
-// newly-added behavior file is picked up on the next reload/restart.
-const modules = import.meta.glob('../behaviors/*.jsx', { eager: true });
+// Discover every behavior class from `behaviors/*.jsx` and the physics module's
+// `physics/behaviors/*.jsx`. Vite HMR is off, so a newly-added behavior file is
+// picked up on the next reload/restart. The physics glob is what lets the
+// self-contained physics module ship its behaviors without polluting the core
+// `behaviors/` folder — a kit adopts physics by copying `physics/` in.
+const modules = {
+  ...import.meta.glob('../behaviors/*.jsx', { eager: true }),
+  ...import.meta.glob('../physics/behaviors/*.jsx', { eager: true }),
+};
 function isBehaviorClass(value) {
   return typeof value === 'function' && typeof value.behaviorName === 'string';
 }

package/kits/basic-2d/engine/behaviorExtensions.js ADDED Viewed

@@ -0,0 +1,28 @@
+// Behavior field extensions. A self-contained kit module (like `physics/`) can
+// add fields to a behavior defined in the shared core WITHOUT editing that
+// behavior's file -- so the core behavior stays byte-identical across kits and
+// the module owns its own additions. Each extension module under any
+// `<module>/extensions/*.js` exports:
+//
+//   export const behaviorExtension = {
+//     behaviorName: 'Collider',
+//     defaultProps: { bounciness: 0, friction: 0.1 },
+//   };
+//
+// A behavior folds its registered extensions into its own `defaultProps` (see
+// behaviors/Collider.jsx `...extensionDefaultProps('Collider')`); the inspector
+// already renders leftover defaultProps generically, so registered fields show
+// up with no inspector change. Empty in a kit with no `*/extensions/` dir (e.g.
+// basic-2d). Symmetric with engine/systemRegistry.js and editors/behaviorRegistry.js.
+const modules = import.meta.glob('../*/extensions/*.js', { eager: true });
+const extensions = Object.values(modules)
+  .map((mod) => mod.behaviorExtension)
+  .filter(Boolean);
+// Merged defaultProps that registered extensions contribute to `behaviorName`
+// (empty object when none). Later extensions win on a key collision.
+export function extensionDefaultProps(behaviorName) {
+  return extensions
+    .filter((ext) => ext.behaviorName === behaviorName)
+    .reduce((acc, ext) => ({ ...acc, ...ext.defaultProps }), {});
+}