castle-web-cli 0.4.85 → 0.4.87

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

@@ -58,6 +58,17 @@ const BLUEPRINT_TEMPLATE_ACTOR_ID = '__template__';
 const LONG_PRESS_MS = 500;
 const DRAG_THRESHOLD = 4;
 const DEFAULT_GRID_SIZE = 25;
+// Floating zoom/pan control cluster, tucked into the bottom-right corner of the
+// stage workspace (matches the art editor's placement).
+const ZOOM_CONTROLS_STYLE = {
+  position: 'absolute',
+  right: 8,
+  bottom: 8,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  zIndex: 5,
+};
 const EDIT_VIEWPORT = {
   width: cardSize.width * 3,
   height: cardSize.height * 3,
@@ -321,7 +332,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 +360,8 @@ export function SceneEditor({
     selectedActorIds,
     onSelectActorIds,
     isBlueprintFile,
+    sprites,
+    resolvedActors: previewSceneData?.actors,
   });
   const snapSettings = getSnapSettings(sceneData);
   const stageWrapStyle = {
@@ -479,7 +494,7 @@ export function SceneEditor({
               />
             )}
           </div>
-          <div className={styles.stageWrap} style={stageWrapStyle}>
+          <div className={styles.stageWrap} style={{ ...stageWrapStyle, position: 'relative' }}>
             <div className={styles.stageCard} data-castle-card>
               <div className={cx(styles.stageCardClip, !isPlaying && styles.stageCardEditSurface)}>
                 <canvas
@@ -494,7 +509,12 @@ export function SceneEditor({
                   onPointerDown={(event) => {
                     event.currentTarget.focus({ preventScroll: true });
                     if (isPlaying) return playPointer.onPointerDown(event);
-                    if (panGesture.isSpacePanning()) return panGesture.onPointerDown(event);
+                    if (
+                      panGesture.isSpacePanning() ||
+                      event.button === 1 ||
+                      (event.button === 0 && event.metaKey)
+                    )
+                      return panGesture.onPointerDown(event);
                     return gesture.onPointerDown(event);
                   }}
                   onPointerMove={(event) =>
@@ -538,6 +558,25 @@ export function SceneEditor({
                 />
               )}
             </div>
+            {!isPlaying && (
+              <div style={ZOOM_CONTROLS_STYLE}>
+                <IconButton
+                  icon="zoom-in"
+                  label="Zoom in"
+                  onClick={() => panGesture.zoomAtCenter(1.25)}
+                />
+                <IconButton
+                  icon="zoom-out"
+                  label="Zoom out"
+                  onClick={() => panGesture.zoomAtCenter(0.8)}
+                />
+                <IconButton
+                  icon="fit"
+                  label="Reset view"
+                  onClick={() => panGesture.resetView()}
+                />
+              </div>
+            )}
           </div>
           <aside {...inspectorSheet.rootProps}>
             <div {...inspectorSheet.grabProps}>
@@ -601,6 +640,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 +681,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 +703,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) =>
@@ -1004,18 +1058,19 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
     const onWheel = (event) => {
       if (isPlayingRef.current) return;
       event.preventDefault();
-      // Trackpad pinch (and Ctrl+wheel) surface as wheel events with ctrlKey set
-      // in Chromium; route those to zoom and leave plain scroll as pan.
-      if (event.ctrlKey) {
-        if (gestureActive) return;
-        zoomByFactorAtPointer(
-          event.clientX,
-          event.clientY,
-          Math.exp(-event.deltaY * ZOOM_WHEEL_SPEED)
-        );
-      } else {
-        panByScreenDelta(event.deltaX, event.deltaY);
-      }
+      // Safari fires ctrl+wheel alongside its own gesture* pinch events; skip the
+      // wheel while a pinch is mid-flight so zoom isn't applied twice.
+      if (gestureActive) return;
+      // The wheel zooms at the cursor (standard editor affordance). Trackpad
+      // pinch and Ctrl+wheel arrive here too (Chromium sets ctrlKey) and map to
+      // the same zoom. Clamp per-event delta so a chunky mouse-wheel notch
+      // (deltaY ~100) is a sane step (≤1.65x) while trackpad deltas stay smooth.
+      const clampedDeltaY = Math.max(-50, Math.min(50, event.deltaY));
+      zoomByFactorAtPointer(
+        event.clientX,
+        event.clientY,
+        Math.exp(-clampedDeltaY * ZOOM_WHEEL_SPEED)
+      );
     };
     const onGestureStart = (event) => {
       if (isPlayingRef.current) return;
@@ -1056,7 +1111,13 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
     };
   }, [canvasRef, panByScreenDelta, zoomByFactorAtPointer]);
   const onPointerDown = useCallback((event) => {
-    if (isPlaying || !spaceDownRef.current) return;
+    if (isPlaying) return;
+    // Pan when Space is held (existing modifier), on a middle-button drag, or on
+    // a ⌘+left-drag (metaKey) — matching the art editor. preventDefault also
+    // suppresses the browser's middle-click autoscroll.
+    const middle = event.button === 1;
+    const cmdDrag = event.button === 0 && event.metaKey;
+    if (!spaceDownRef.current && !middle && !cmdDrag) return;
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
     dragRef.current = { id: event.pointerId, lastX: event.clientX, lastY: event.clientY };
@@ -1085,7 +1146,29 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
   }, []);
   const isSpacePanning = useCallback(() => spaceDownRef.current, []);
   const isActive = useCallback(() => Boolean(dragRef.current), []);
-  return { onPointerDown, onPointerMove, onPointerUp, isSpacePanning, isActive };
+  // Button-driven zoom about the canvas center, and a reset-to-fit that restores
+  // the initial camera (zoom 1 = the card exactly fills the viewport).
+  const zoomAtCenter = useCallback(
+    (factor) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      zoomByFactorAtPointer(rect.left + rect.width / 2, rect.top + rect.height / 2, factor);
+    },
+    [canvasRef, zoomByFactorAtPointer]
+  );
+  const resetView = useCallback(() => {
+    editCameraRef.current = { x: 0, y: 0, zoom: 1 };
+  }, [editCameraRef]);
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    isSpacePanning,
+    isActive,
+    zoomAtCenter,
+    resetView,
+  };
 }
 function handleShiftPointerDown(drag, actor, current) {
   if (actor) {
@@ -1565,6 +1648,7 @@ function ActorInspector({
             actor={selectedActor}
             component={component}
             files={files}
+            sprites={sprites}
             setComponent={setComponent}
             override={override}
           />

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

@@ -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

@@ -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/editors/useArtboardFit.js

@@ -98,5 +98,8 @@ export function useArtboardFit({ wrapRef, sizeBarRef, resolution }) {
     ? { width: `${displaySize.width}px`, height: `${displaySize.height}px` }
     : undefined;
 
-  return { canvasStyle, refit: fit };
+  // `displaySize` (numeric px, or null) is the fit baseline the zoom/pan layer
+  // multiplies against; `canvasStyle` is the same value pre-formatted for the
+  // unzoomed render path.
+  return { canvasStyle, displaySize, refit: fit };
 }

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

@@ -93,7 +93,20 @@ export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirs
       <canvas
         ref={canvasRef}
         tabIndex={0}
-        style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          outline: 'none',
+          // Claim touches for the game: without this, a mobile WebView
+          // (castle-client) treats a drag as a scroll/pan gesture and fires
+          // `pointercancel` mid-drag, so a held Draggable/Slingshot loses its
+          // grip. Also suppress long-press text selection / callout.
+          touchAction: 'none',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          WebkitTouchCallout: 'none',
+        }}
       />
       <SceneUI getRuntime={getRuntime} />
       {error ? <PlayErrorOverlay error={error} onRestart={onRestart} /> : null}

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

@@ -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 }), {});
+}

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

@@ -113,13 +113,16 @@ function manualRect(layout, collider) {
 
 const fullLayoutRect = (layout) => ({ x: layout.x, y: layout.y, width: layout.width, height: layout.height });
 
-// The un-offset rect for whichever mode is active: `manualRect` for
-// `mode: 'manual'`, otherwise the auto sprite-bbox rect (or its Layout-box
-// fallback).
+// The un-offset rect. Colliders are sized by their explicit `width`/`height`
+// (the "auto vs manual" mode is gone -- use the inspector's "Auto-fit to sprite"
+// action to snap those to the sprite). Legacy decks that still carry
+// `mode: 'auto'` keep their dynamic sprite fit for back-compat.
 function modeRect(layout, collider, spriteProps, sprites) {
-  if ((collider.mode ?? 'auto') === 'manual') return manualRect(layout, collider);
-  const sprite = spriteProps ? sprites?.[spriteProps.file] : null;
-  return autoRect(layout, spriteProps, sprite) ?? fullLayoutRect(layout);
+  if (collider.mode === 'auto') {
+    const sprite = spriteProps ? sprites?.[spriteProps.file] : null;
+    return autoRect(layout, spriteProps, sprite) ?? fullLayoutRect(layout);
+  }
+  return manualRect(layout, collider);
 }
 
 // The Collider rect for an actor, from its Layout + Collider (+ Sprite, for
@@ -141,6 +144,57 @@ export function getColliderRect(actor, sprites) {
   };
 }
 
+// Full collider geometry: the AABB rect (`x/y/width/height`, offset-applied)
+// PLUS the shape and, for circles, the center + radius. This is the SINGLE
+// SOURCE OF TRUTH for collider shape -- the physics body (matterBridge), the
+// play-mode debug draw (Collider.draw), and the editor selection overlay all
+// derive their geometry from here, so the visual preview always matches the
+// simulated collider. `radius` of 0 means "derive from the rect" (min side / 2),
+// so a circle shows a real size even before you set an explicit radius.
+export function getColliderShape(actor, sprites) {
+  const rect = getColliderRect(actor, sprites);
+  if (!rect) return null;
+  const collider = actor.components.Collider;
+  const shape = collider.shape === 'circle' ? 'circle' : 'box';
+  const radius = collider.radius > 0 ? collider.radius : Math.min(rect.width, rect.height) / 2;
+  return {
+    shape,
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    cx: rect.x + rect.width / 2,
+    cy: rect.y + rect.height / 2,
+    radius,
+  };
+}
+
+// The explicit `width`/`height`/`offsetX`/`offsetY` a collider would need to
+// exactly match its sprite's opaque-pixel fit -- what "auto" used to compute
+// dynamically. Returns null when there's nothing to fit to (no Sprite, tile
+// mode, or fully transparent art). Powers the inspector's "Auto-fit to sprite".
+export function computeAutoFit(actor, sprites) {
+  const rawLayout = actor?.components?.Layout;
+  const spriteProps = actor?.components?.Sprite;
+  if (!rawLayout || !spriteProps) return null;
+  // Blueprint templates omit x/y (position is instance-local). x/y cancel out of
+  // the offset delta below, so default them to 0 -- otherwise an undefined x/y
+  // (auto-fitting a template, e.g. on add) turns the offsets into NaN.
+  const layout = { ...rawLayout, x: rawLayout.x ?? 0, y: rawLayout.y ?? 0 };
+  const rect = autoRect(layout, spriteProps, sprites?.[spriteProps.file]);
+  if (!rect || rect.width <= 0 || rect.height <= 0) return null;
+  // manualRect centers a width x height box in the Layout box; the offset is the
+  // delta from that centered position to the sprite-fit rect.
+  const centeredX = layout.x + (layout.width - rect.width) / 2;
+  const centeredY = layout.y + (layout.height - rect.height) / 2;
+  return {
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+    offsetX: Math.round(rect.x - centeredX),
+    offsetY: Math.round(rect.y - centeredY),
+  };
+}
+
 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/engine/scene.js

@@ -1,6 +1,7 @@
 import { initialFiles, parseJsonFile } from './files';
 import { getBlueprintTemplate, mergeComponents } from './blueprint';
 import { getColliderRect, intersects, spriteIsEmpty } from './collider';
+import { systemInstallers } from './systemRegistry';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
@@ -42,9 +43,21 @@ export class SceneRuntime {
     this.actors = new Map();
     this.camera = undefined;
     this.status = undefined;
+    // Registered systems run once per frame after all behavior `update`s (see
+    // `update`). A system is a plain object with an optional
+    // `afterBehaviors(scene, dt)` hook; kits register systems from `systems/*.js`
+    // (see makeScene), so the engine core stays decoupled from any specific one.
+    this.systems = [];
     this.load(sceneData);
   }
 
+  // Register a per-frame system (e.g. a physics simulation). Systems step in
+  // registration order, after behaviors, every `update`. Returns the system.
+  registerSystem(system) {
+    this.systems.push(system);
+    return system;
+  }
+
   load(sceneData) {
     this.data = structuredClone(sceneData);
     this.actors = new Map();
@@ -88,7 +101,9 @@ export class SceneRuntime {
   }
 
   clone() {
-    return new SceneRuntime(this.serialize(), [...this.behaviors.values()], this.sprites, this.files);
+    // Route through makeScene so the clone gets the same registered systems as a
+    // freshly-made runtime.
+    return makeScene(this.serialize(), [...this.behaviors.values()], this.sprites, this.files);
   }
 
   serialize() {
@@ -190,6 +205,12 @@ export class SceneRuntime {
     for (const actor of this.getActors()) {
       this.forEachBehavior(actor, (instance) => instance.update?.(actor, this, dt));
     }
+    // Behaviors have expressed their intent (velocities, forces) for this frame;
+    // now let registered systems advance (e.g. physics integrates, writes results
+    // back to Layout, and dispatches collision callbacks).
+    for (const system of this.systems) {
+      system.afterBehaviors?.(this, dt);
+    }
   }
 
   forEachBehavior(actor, callback) {
@@ -299,7 +320,12 @@ export class SceneRuntime {
 }
 
 export function makeScene(sceneData, behaviors, sprites, files) {
-  return new SceneRuntime(sceneData, behaviors, sprites, files);
+  const runtime = new SceneRuntime(sceneData, behaviors, sprites, files);
+  // Install any runtime systems the kit provides (systems/*.js) -- no-op in a kit
+  // with none. A system's engine is created lazily on first use, so draw-only
+  // editor previews (which never call update) stay free.
+  for (const install of systemInstallers) install(runtime);
+  return runtime;
 }
 
 export function setActorComponent(sceneData, actorId, behaviorName, nextProps) {

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

@@ -0,0 +1,12 @@
+// Discover per-frame runtime systems from `systems/*.js`. Each such module
+// exports `installSystem(runtime)`, which is called once for every created
+// SceneRuntime (see engine/scene.js `makeScene`) to register itself via
+// `runtime.registerSystem(...)`. A system is a plain object with an optional
+// `afterBehaviors(scene, dt)` hook, run once per frame after all behavior
+// updates. Empty in a kit with no `systems/` dir (e.g. basic-2d); a kit adds a
+// system by dropping a file here -- no edits to the engine required. Symmetric
+// with editors/behaviorRegistry.js.
+const modules = import.meta.glob('../systems/*.js', { eager: true });
+export const systemInstallers = Object.values(modules)
+  .map((mod) => mod.installSystem)
+  .filter((fn) => typeof fn === 'function');

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

@@ -13,6 +13,8 @@ import {
   faCode,
   faCodeBranch,
   faEraser,
+  faExpand,
+  faExternalLinkAlt,
   faEyeDropper,
   faFile,
   faFilm,
@@ -26,6 +28,8 @@ import {
   faPlay,
   faPlus,
   faRedo,
+  faSearchMinus,
+  faSearchPlus,
   faShapes,
   faSlash,
   faVectorSquare,
@@ -179,6 +183,8 @@ const icons = {
   // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
   'code-fork': faCodeBranch,
   eraser: faEraser,
+  expand: faExpand,
+  external: faExternalLinkAlt,
   eyedropper: faEyeDropper,
   fill: faFillDrip,
   'flip-h': faArrowsAltH,
@@ -197,6 +203,9 @@ const icons = {
   plus: faPlus,
   redo: faRedo,
   rotate: faSyncAlt,
+  'zoom-in': faSearchPlus,
+  'zoom-out': faSearchMinus,
+  fit: faExpand,
   shapes: faShapes,
   slash: faSlash,
   square: faSquare,

package/kits/basic-2d/main.jsx

@@ -15,9 +15,10 @@ if (!root) throw new Error('Missing root element');
 //   ?file=<path>[&editor=<id>] -> a single rich editor for that file
 const params = new URLSearchParams(window.location.search);
 function pick() {
-  if (!isEdit()) return <PlayOnly />;
+  const initialScene = params.get('scene') ?? undefined;
+  if (!isEdit()) return <PlayOnly initialScene={initialScene} />;
   const file = params.get('file');
   if (file) return <SingleEditor path={file} editor={params.get('editor') ?? undefined} />;
-  return <PlayOnly />;
+  return <PlayOnly initialScene={initialScene} />;
 }
 createRoot(root).render(<ErrorBoundary>{pick()}</ErrorBoundary>);

package/kits/physics-2d/behaviors/Collider.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Icon, NumberField, Panel, SelectField } from '../engine/ui';
 import { AutoFields, overrideProps } from '../engine/autoInspector';
 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);
@@ -62,20 +63,33 @@ export class Collider {
     radius: 0,
     offsetX: 0,
     offsetY: 0,
-    // Physics material (used by the physics simulation; ignored by plain
-    // scene.overlaps checks). `isTrigger` = a sensor: detects overlaps but
-    // doesn't block. `bounciness` = restitution (0..1+). `friction` = surface
-    // friction.
+    // `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,
-    bounciness: 0,
-    friction: 0.1,
     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 geom = getColliderShape(actor, scene.sprites);