castle-web-cli 0.4.91 → 0.4.92

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

@@ -797,7 +797,9 @@ function useSelectionGesture(args) {
     const point = { x: raw.x + cam.x, y: raw.y + cam.y };
     current.canvasRef.current.setPointerCapture(event.pointerId);
     const scene = makeScene(current.sceneData, behaviorClasses, current.sprites, current.files);
-    const actor = scene.actorAt(point.x, point.y);
+    const stack = scene.actorsAt(point.x, point.y);
+    const stackIds = stack.map((a) => a.id);
+    const actor = stack[0] ?? null;
     const drag = {
       pointerId: event.pointerId,
       startPoint: point,
@@ -820,7 +822,7 @@ function useSelectionGesture(args) {
     } else if (current.multiSelectMode) {
       handleModePointerDown(drag, actor, current);
     } else {
-      handleDefaultPointerDown(drag, actor, point, current);
+      handleDefaultPointerDown(drag, actor, point, current, stackIds);
     }
     drag.moveStarts = collectMoveStarts(current.sceneData, drag.movingActorIds);
     dragRef.current = drag;
@@ -891,6 +893,13 @@ function useSelectionGesture(args) {
       finalizeMarquee(drag, current);
     } else if (drag.kind === 'idle' && !drag.movedFar && !drag.longPressFired) {
       handleTap(drag, current);
+    } else if (
+      drag.kind === 'move' &&
+      !drag.movedFar &&
+      !drag.longPressFired &&
+      drag.cycleStack
+    ) {
+      cycleSelection(drag, current);
     }
     current.marqueeRef.current = null;
     dragRef.current = null;
@@ -1198,13 +1207,23 @@ function handleModePointerDown(drag, actor, current) {
     drag.pendingMarquee = true;
   }
 }
-function handleDefaultPointerDown(drag, actor, point, current) {
+function handleDefaultPointerDown(drag, actor, point, current, stackIds) {
   if (actor) {
-    if (!current.selectedActorIds.includes(actor.id)) {
+    const sel = current.selectedActorIds;
+    if (sel.length === 1 && stackIds.length > 1 && stackIds.includes(sel[0])) {
+      // Overlapping pile with a single selected actor under the cursor: keep it
+      // selected so it stays draggable, and arm click-to-cycle so a stationary
+      // click descends to the next actor beneath it (see cycleSelection).
+      drag.movingActorIds = [...sel];
+      drag.cycleStack = stackIds;
+    } else if (sel.includes(actor.id)) {
+      // Pressed an actor that's part of the current selection: keep the
+      // selection so the whole group stays draggable.
+      drag.movingActorIds = [...sel];
+    } else {
+      // Fresh pick: select the topmost actor under the cursor.
       current.onSelectActorIds([actor.id]);
       drag.movingActorIds = [actor.id];
-    } else {
-      drag.movingActorIds = [...current.selectedActorIds];
     }
     drag.kind = 'move';
     drag.longPressTimer = window.setTimeout(() => {
@@ -1235,6 +1254,20 @@ function finalizeMarquee(drag, current) {
   for (const id of hits) merged.add(id);
   current.onSelectActorIds([...merged]);
 }
+// A stationary click on a pile of overlapping actors advances the selection to
+// the next actor below the currently selected one, wrapping around at the
+// bottom. This lets repeated clicks in the same spot reach an actor buried under
+// others that would otherwise always win the topmost hit-test.
+function cycleSelection(drag, current) {
+  const stack = drag.cycleStack;
+  if (!stack || stack.length < 2) return;
+  const sel = current.selectedActorIds;
+  if (sel.length !== 1) return;
+  const idx = stack.indexOf(sel[0]);
+  if (idx === -1) return;
+  const nextId = stack[(idx + 1) % stack.length];
+  if (nextId !== sel[0]) current.onSelectActorIds([nextId]);
+}
 function handleTap(drag, current) {
   if (!drag.modeAtStart) return;
   if (drag.startedOnActorId !== null) {

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

@@ -281,7 +281,15 @@ export class SceneRuntime {
   }
 
   actorAt(x, y) {
+    return this.actorsAt(x, y)[0] ?? null;
+  }
+
+  // All actors whose Layout box contains the point, ordered topmost-first (high
+  // z -> low z). Used by the editor's click-to-cycle so repeated clicks in the
+  // same spot can walk down through overlapping actors.
+  actorsAt(x, y) {
     const actors = this.getActors().slice().reverse();
+    const hits = [];
     for (const actor of actors) {
       const layout = getLayout(actor);
       if (!layout) continue;
@@ -291,10 +299,10 @@ export class SceneRuntime {
         y >= layout.y &&
         y <= layout.y + layout.height
       ) {
-        return actor;
+        hits.push(actor);
       }
     }
-    return null;
+    return hits;
   }
 
   actorIdsInRect(rect) {

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

@@ -1,46 +1,23 @@
 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);
-// 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,
+import { NumberField, Panel, SelectField } from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+import { computeAutoFit, getColliderRect, getColliderShapes, intersects } from '../engine/collider';
+
+// --- inspector styles ------------------------------------------------------
+const rowGap = { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6, marginBottom: 10 };
+const chip = (active) => ({
+  padding: '3px 9px',
+  borderRadius: 6,
+  border: `1px solid ${active ? '#4aa3ff' : 'var(--castle-inspector-divider)'}`,
+  background: active ? 'rgba(74,163,255,0.15)' : 'transparent',
   color: 'var(--castle-inspector-text)',
   fontFamily: 'inherit',
-  fontSize: 14,
+  fontSize: 12,
   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 = {
+});
+const addBtn = { ...chip(false), fontWeight: 700, padding: '3px 8px' };
+const addMenu = { display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 };
+const linkBtn = {
   background: 'none',
   border: 'none',
   padding: 0,
@@ -49,156 +26,218 @@ const autoFitLinkStyle = {
   fontSize: 13,
   cursor: 'pointer',
 };
-const dimBodyStyle = { paddingLeft: 14 };
+const deleteBtn = { ...linkBtn, color: '#ff7a7a' };
+const actionRow = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '4px 0 12px' };
+const noteStyle = { fontSize: 12, color: 'var(--castle-inspector-muted, #888)', margin: '2px 0 10px' };
+
+// --- shape helpers ---------------------------------------------------------
+const FULL_BOX = { type: 'box', x: 0.5, y: 0.5, w: 1, h: 1 };
+// Sensible defaults (box-fractions) for each primitive the Add menu offers.
+const SHAPE_DEFAULTS = {
+  box: { type: 'box', x: 0.5, y: 0.5, w: 0.6, h: 0.6 },
+  circle: { type: 'circle', x: 0.5, y: 0.5, r: 0.3 },
+  triangle: { type: 'triangle', points: [{ x: 0.5, y: 0.15 }, { x: 0.15, y: 0.85 }, { x: 0.85, y: 0.85 }] },
+  polygon: {
+    type: 'polygon',
+    points: [{ x: 0.5, y: 0.12 }, { x: 0.14, y: 0.42 }, { x: 0.3, y: 0.85 }, { x: 0.7, y: 0.85 }, { x: 0.86, y: 0.42 }],
+  },
+};
+
+// The collider's shapes, materialized (default = one full box).
+function currentShapes(component) {
+  return Array.isArray(component.shapes) && component.shapes.length > 0 ? component.shapes : [FULL_BOX];
+}
+
+// Draw one resolved (world-space) collider shape as an outline.
+function drawShape(ctx, s) {
+  if (s.type === 'circle') {
+    ctx.beginPath();
+    ctx.arc(s.cx, s.cy, s.radius, 0, Math.PI * 2);
+    ctx.stroke();
+  } else if (s.type === 'triangle' || s.type === 'polygon') {
+    if (!s.points || s.points.length < 2) return;
+    ctx.beginPath();
+    ctx.moveTo(s.points[0].x, s.points[0].y);
+    for (let k = 1; k < s.points.length; k++) ctx.lineTo(s.points[k].x, s.points[k].y);
+    ctx.closePath();
+    ctx.stroke();
+  } else {
+    ctx.strokeRect(s.x + 1, s.y + 1, s.width - 2, s.height - 2);
+  }
+}
 
 export class Collider {
   static behaviorName = 'Collider';
 
+  // A Collider is a LIST of shapes (`shapes`), each a fraction of the Layout box
+  // -- so it keeps its relative size when the box is resized. Unset `shapes` = one
+  // full-box shape. Only material fields live here; geometry is authored into
+  // `shapes` through the inspector.
   static defaultProps = {
-    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` marks a sensor: reports overlaps (draws yellow, pass-through
+    // zone for pickup/goal logic) but doesn't block -- collisions are data.
     isTrigger: false,
     debug: false,
-    ...extensionDefaultProps('Collider'),
+    // Physics material, read by physics/matterBridge.js. `bounciness` =
+    // restitution (0 dead .. ~1 very bouncy); `friction` = surface friction;
+    // `density` sets mass (= density x total shape area); matter's default 0.001.
+    bounciness: 0,
+    friction: 0.1,
+    // `frictionStatic` is stiction -- resistance to *starting* to slide (matter
+    // default 0.5). `density` sets mass (= density x total shape area).
+    frictionStatic: 0.5,
+    density: 0.001,
   };
 
   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).
+  // Seed props when first added: fit a single box to the sprite's opaque bounds
+  // (or the full box when there's nothing to fit to).
   static initialProps(actor, ctx) {
     const fit = computeAutoFit(actor, ctx?.sprites);
-    return fit ? { ...Collider.defaultProps, ...fit } : { ...Collider.defaultProps };
+    return fit ? { ...Collider.defaultProps, shapes: [fit] } : { ...Collider.defaultProps };
   }
 
   draw(actor, scene, ctx, options) {
-    if (!options.showDebugColliders && !this.props.debug) return;
-    const geom = getColliderShape(actor, scene.sprites);
-    if (!geom) return;
-    // A sensor (isTrigger) reads as a pass-through zone; a solid as a wall.
+    // A selected instance always shows its collider -- but the editor's selection
+    // overlay draws it, so skip here to avoid a double outline.
+    if (options.colliderOverlayIds?.includes(actor.id)) return;
+    // Otherwise draw when this actor's blueprint is selected in the hotbar (so
+    // all its instances light up), or when the per-collider debug flag is on
+    // (unselected actors in the editor, and during play).
+    const blueprintSelected =
+      Boolean(options.dimBlueprintPath) && actor.blueprint === options.dimBlueprintPath;
+    if (!blueprintSelected && !options.showDebugColliders && !this.props.debug) return;
+    const shapes = getColliderShapes(actor);
+    if (!shapes) return;
     const isSensor = Boolean(this.props.isTrigger) || this.props.kind === 'pickup';
     ctx.save();
     ctx.strokeStyle = isSensor ? '#ffe17a' : '#8db7ff';
     ctx.lineWidth = 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);
-    }
+    for (const s of shapes) drawShape(ctx, s);
     ctx.restore();
   }
 
   static Inspector({ actor, component, sprites, setComponent, override }) {
-    const [dimOpen, setDimOpen] = useState(true);
+    const [sel, setSel] = useState(0);
+    const [addOpen, setAddOpen] = useState(false);
     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 bw = layout.width || 1;
+    const bh = layout.height || 1;
+
+    const shapes = currentShapes(component);
+    const i = Math.min(sel, shapes.length - 1);
+    const shape = shapes[i];
+    const isCircle = shape.type === 'circle';
+    const isPoly = shape.type === 'triangle' || shape.type === 'polygon';
+
+    const writeShapes = (next) => setComponent({ shapes: next });
+    const patchSel = (patch) => writeShapes(shapes.map((s, k) => (k === i ? { ...s, ...patch } : s)));
+    const addShape = (type) => {
+      writeShapes([...shapes, { ...SHAPE_DEFAULTS[type] }]);
+      setSel(shapes.length);
+      setAddOpen(false);
+    };
+    const removeSel = () => {
+      const next = shapes.filter((_, k) => k !== i);
+      writeShapes(next.length ? next : [FULL_BOX]);
+      setSel(Math.max(0, i - 1));
     };
-    const alreadyFitted =
-      autoFitPatch && Object.entries(autoFitPatch).every(([key, value]) => Math.abs(currentValue(key) - value) < 0.6);
+    const setType = (type) => {
+      if (type === 'circle') {
+        patchSel({ type: 'circle', x: shape.x ?? 0.5, y: shape.y ?? 0.5, r: Math.min(shape.w ?? 1, shape.h ?? 1) / 2, w: undefined, h: undefined });
+      } else {
+        const d = (shape.r ?? 0.5) * 2;
+        patchSel({ type: 'box', x: shape.x ?? 0.5, y: shape.y ?? 0.5, w: d, h: d, r: undefined });
+      }
+    };
+
+    const widthPx = Math.round((shape.w ?? 1) * bw);
+    const heightPx = Math.round((shape.h ?? 1) * bh);
+    const radiusPx = Math.round((shape.r ?? 0.5) * Math.min(bw, bh));
+    const offXPx = Math.round(((shape.x ?? 0.5) - 0.5) * bw);
+    const offYPx = Math.round(((shape.y ?? 0.5) - 0.5) * bh);
+
+    const density = component.density > 0 ? component.density : 0.001;
+
+    // Auto-fit (box/circle) for the selected shape.
+    const autoFit = isPoly ? null : computeAutoFit(actor, sprites, isCircle);
+    const near = (a, b) => Math.abs((a ?? 0) - (b ?? 0)) < 0.01;
+    const fitted =
+      autoFit &&
+      near(autoFit.x, shape.x) &&
+      near(autoFit.y, shape.y) &&
+      (isCircle ? near(autoFit.r, shape.r) : near(autoFit.w, shape.w) && near(autoFit.h, shape.h));
 
     return (
       <Panel title="Collider" overridden={override?.anyOverridden()}>
-        <SelectField
-          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
+        {/* Shape list -- one chip per shape + an Add menu (compound is manual). */}
+        <div style={rowGap}>
+          {shapes.map((s, k) => (
+            <button key={k} type="button" onClick={() => setSel(k)} style={chip(k === i)}>
+              {s.type} {k + 1}
             </button>
-          ) : null}
+          ))}
+          <button type="button" onClick={() => setAddOpen((o) => !o)} style={addBtn} title="Add a shape">
+            +
+          </button>
         </div>
-        {dimOpen ? (
-          <div style={dimBodyStyle}>
-            {shape === 'circle' ? (
-              <NumberField
-                label="Radius"
-                value={effectiveRadius}
-                onChange={(value) => setComponent({ radius: value })}
-                {...overrideProps(override, 'radius')}
-              />
+        {addOpen ? (
+          <div style={addMenu}>
+            {/* triangle/polygon are supported by the data model + runtime but not
+                offered in the UI yet (no on-canvas point editing). */}
+            {['box', 'circle'].map((t) => (
+              <button key={t} type="button" onClick={() => addShape(t)} style={chip(false)}>
+                {t}
+              </button>
+            ))}
+          </div>
+        ) : null}
+
+        {/* Selected shape */}
+        {isPoly ? (
+          <div style={noteStyle}>
+            {shape.type} · {shape.points?.length ?? 0} points (on-canvas point editing coming soon)
+          </div>
+        ) : (
+          <>
+            <SelectField label="Shape" value={shape.type} onChange={setType} options={['box', 'circle']} />
+            {isCircle ? (
+              <NumberField label="Radius" value={radiusPx} onChange={(v) => patchSel({ r: v / Math.min(bw, bh) })} />
             ) : (
               <>
-                <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')}
-                />
+                <NumberField label="Width" value={widthPx} onChange={(v) => patchSel({ w: v / bw })} />
+                <NumberField label="Height" value={heightPx} onChange={(v) => patchSel({ h: v / bh })} />
               </>
             )}
-            <AutoFields
-              defaultProps={Collider.defaultProps}
-              component={component}
-              setComponent={setComponent}
-              only={['offsetX', 'offsetY']}
-              override={override}
-            />
-          </div>
-        ) : null}
+          </>
+        )}
+        <NumberField label="Offset X" value={offXPx} onChange={(v) => patchSel({ x: 0.5 + v / bw })} />
+        <NumberField label="Offset Y" value={offYPx} onChange={(v) => patchSel({ y: 0.5 + v / bh })} />
+        <div style={actionRow}>
+          {autoFit && !fitted ? (
+            <button type="button" onClick={() => writeShapes(shapes.map((s, k) => (k === i ? autoFit : s)))} style={linkBtn}>
+              Auto-fit to sprite
+            </button>
+          ) : (
+            <span />
+          )}
+          {shapes.length > 1 ? (
+            <button type="button" onClick={removeSel} style={deleteBtn}>
+              Delete shape
+            </button>
+          ) : null}
+        </div>
+
+        {/* Material (collider-wide) */}
+        <NumberField label="Density" value={density} onChange={(v) => setComponent({ density: v })} />
         <AutoFields
           defaultProps={Collider.defaultProps}
           component={component}
           setComponent={setComponent}
-          exclude={['shape', 'width', 'height', 'radius', 'offsetX', 'offsetY']}
+          exclude={['density']}
           override={override}
         />
       </Panel>
@@ -206,8 +245,6 @@ export class Collider {
   }
 }
 
-// Re-exported for callers that need the rect / overlap test outside a running
-// 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, getColliderShape, intersects };
+// Re-exported for callers that need the rect / shapes / overlap test outside a
+// running scene (e.g. editors/SelectionOverlay.jsx). See engine/collider.js.
+export { getColliderRect, getColliderShapes, intersects };

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

@@ -797,7 +797,9 @@ function useSelectionGesture(args) {
     const point = { x: raw.x + cam.x, y: raw.y + cam.y };
     current.canvasRef.current.setPointerCapture(event.pointerId);
     const scene = makeScene(current.sceneData, behaviorClasses, current.sprites, current.files);
-    const actor = scene.actorAt(point.x, point.y);
+    const stack = scene.actorsAt(point.x, point.y);
+    const stackIds = stack.map((a) => a.id);
+    const actor = stack[0] ?? null;
     const drag = {
       pointerId: event.pointerId,
       startPoint: point,
@@ -820,7 +822,7 @@ function useSelectionGesture(args) {
     } else if (current.multiSelectMode) {
       handleModePointerDown(drag, actor, current);
     } else {
-      handleDefaultPointerDown(drag, actor, point, current);
+      handleDefaultPointerDown(drag, actor, point, current, stackIds);
     }
     drag.moveStarts = collectMoveStarts(current.sceneData, drag.movingActorIds);
     dragRef.current = drag;
@@ -891,6 +893,13 @@ function useSelectionGesture(args) {
       finalizeMarquee(drag, current);
     } else if (drag.kind === 'idle' && !drag.movedFar && !drag.longPressFired) {
       handleTap(drag, current);
+    } else if (
+      drag.kind === 'move' &&
+      !drag.movedFar &&
+      !drag.longPressFired &&
+      drag.cycleStack
+    ) {
+      cycleSelection(drag, current);
     }
     current.marqueeRef.current = null;
     dragRef.current = null;
@@ -1198,13 +1207,23 @@ function handleModePointerDown(drag, actor, current) {
     drag.pendingMarquee = true;
   }
 }
-function handleDefaultPointerDown(drag, actor, point, current) {
+function handleDefaultPointerDown(drag, actor, point, current, stackIds) {
   if (actor) {
-    if (!current.selectedActorIds.includes(actor.id)) {
+    const sel = current.selectedActorIds;
+    if (sel.length === 1 && stackIds.length > 1 && stackIds.includes(sel[0])) {
+      // Overlapping pile with a single selected actor under the cursor: keep it
+      // selected so it stays draggable, and arm click-to-cycle so a stationary
+      // click descends to the next actor beneath it (see cycleSelection).
+      drag.movingActorIds = [...sel];
+      drag.cycleStack = stackIds;
+    } else if (sel.includes(actor.id)) {
+      // Pressed an actor that's part of the current selection: keep the
+      // selection so the whole group stays draggable.
+      drag.movingActorIds = [...sel];
+    } else {
+      // Fresh pick: select the topmost actor under the cursor.
       current.onSelectActorIds([actor.id]);
       drag.movingActorIds = [actor.id];
-    } else {
-      drag.movingActorIds = [...current.selectedActorIds];
     }
     drag.kind = 'move';
     drag.longPressTimer = window.setTimeout(() => {
@@ -1235,6 +1254,20 @@ function finalizeMarquee(drag, current) {
   for (const id of hits) merged.add(id);
   current.onSelectActorIds([...merged]);
 }
+// A stationary click on a pile of overlapping actors advances the selection to
+// the next actor below the currently selected one, wrapping around at the
+// bottom. This lets repeated clicks in the same spot reach an actor buried under
+// others that would otherwise always win the topmost hit-test.
+function cycleSelection(drag, current) {
+  const stack = drag.cycleStack;
+  if (!stack || stack.length < 2) return;
+  const sel = current.selectedActorIds;
+  if (sel.length !== 1) return;
+  const idx = stack.indexOf(sel[0]);
+  if (idx === -1) return;
+  const nextId = stack[(idx + 1) % stack.length];
+  if (nextId !== sel[0]) current.onSelectActorIds([nextId]);
+}
 function handleTap(drag, current) {
   if (!drag.modeAtStart) return;
   if (drag.startedOnActorId !== null) {
@@ -1357,6 +1390,9 @@ function useScenePlayLoop({
           showGrid: !isPlaying && snap.enabled && editSelectedActorIds.length > 0,
           gridSize: snap.gridSize,
           showDebugColliders: false,
+          // Selected actors' colliders are drawn by the selection overlay; tell
+          // Collider.draw to skip them so a selected+debug collider isn't doubled.
+          colliderOverlayIds: editSelectedActorIds,
           showCropOutline: !isPlaying,
           viewport: frameViewport,
           useCamera: true,

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { getColliderShape } from '../behaviors/Collider';
+import { getColliderShapes } from '../behaviors/Collider';
 import { cardSize, screenToCard } from '../engine/scene';
 import { cx, Icon, styles, useElementSize } from '../engine/ui';
 
@@ -211,9 +211,9 @@ export function SelectionOverlay({
         <div
           className={styles.selChromeWorld}
           style={{ transform: `translate(${-geometry.camX}px, ${-geometry.camY}px)` }}>
-          {colliderFrames.map((collider) => (
+          {colliderFrames.map((collider, i) => (
             <div
-              key={collider.actorId}
+              key={`${collider.actorId}:${i}`}
               className={cx(
                 styles.selColliderBox,
                 collider.isTrigger && styles.selColliderPickup
@@ -461,33 +461,62 @@ function getSelectedColliderFrames(sceneData, actorIds, sprites) {
   const wanted = new Set(actorIds);
   return sceneData.actors
     .filter((actor) => wanted.has(actor.id))
-    .map((actor) => {
+    .flatMap((actor) => {
       const layout = actor.components.Layout;
       const collider = actor.components.Collider;
-      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,
-        shape: geom.shape,
-        isTrigger: Boolean(collider.isTrigger) || collider.kind === 'pickup',
-        x,
-        y,
-        width,
-        height,
-        rotation: layout.rotation ?? 0,
-        originX: layout.x + layout.width / 2 - x,
-        originY: layout.y + layout.height / 2 - y,
-      };
-    })
-    .filter(Boolean);
+      const shapes = getColliderShapes(actor);
+      if (!layout || !collider || !shapes) return [];
+      const isTrigger = Boolean(collider.isTrigger) || collider.kind === 'pickup';
+      // One preview box per collider shape, from the shared geometry so the
+      // preview matches the physics body. A circle renders as a radius-sized
+      // square with border-radius; a triangle/polygon as its AABB (v1).
+      return shapes.map((s) => {
+        let kind = 'box';
+        let x;
+        let y;
+        let width;
+        let height;
+        if (s.type === 'circle') {
+          kind = 'circle';
+          x = s.cx - s.radius;
+          y = s.cy - s.radius;
+          width = s.radius * 2;
+          height = s.radius * 2;
+        } else if (s.type === 'triangle' || s.type === 'polygon') {
+          let x0 = Infinity;
+          let y0 = Infinity;
+          let x1 = -Infinity;
+          let y1 = -Infinity;
+          for (const p of s.points) {
+            if (p.x < x0) x0 = p.x;
+            if (p.y < y0) y0 = p.y;
+            if (p.x > x1) x1 = p.x;
+            if (p.y > y1) y1 = p.y;
+          }
+          x = x0;
+          y = y0;
+          width = x1 - x0;
+          height = y1 - y0;
+        } else {
+          x = s.x;
+          y = s.y;
+          width = s.width;
+          height = s.height;
+        }
+        return {
+          actorId: actor.id,
+          shape: kind,
+          isTrigger,
+          x,
+          y,
+          width,
+          height,
+          rotation: layout.rotation ?? 0,
+          originX: layout.x + layout.width / 2 - x,
+          originY: layout.y + layout.height / 2 - y,
+        };
+      });
+    });
 }
 
 function getSharedRotation(layouts) {

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

@@ -1,21 +1,30 @@
-// Single source of truth for the Collider rect. Lives in engine/ (not
-// behaviors/) so SceneRuntime can use it directly, with behaviors/Collider.jsx
-// (its `draw`, and its `getColliderRect`/`intersects` re-exports) delegating
-// here instead of keeping a second, drifting copy.
+// Single source of truth for Collider geometry. Lives in engine/ so SceneRuntime
+// can use it directly; behaviors/Collider.jsx delegates here (its draw + the
+// getColliderRect/intersects re-exports).
+//
+// A Collider is a LIST of shapes (`Collider.shapes`), each stored as a FRACTION
+// of the actor's Layout box -- so a collider keeps its relative size and position
+// when the box is resized (blueprint default OR per-instance override). Shapes:
+//   box:      { type:'box',      x, y, w, h }        center + size, fractions of box
+//   circle:   { type:'circle',   x, y, r }           center frac; r = frac of min(box side)
+//   triangle: { type:'triangle', points:[{x,y}×3] }  fractions of box
+//   polygon:  { type:'polygon',  points:[{x,y}×N] }
+// (x,y) are fractions of the box where (0,0)=top-left, (1,1)=bottom-right, so the
+// box center is (0.5, 0.5); a circle radius `r` is a fraction of the box's SHORTER
+// side (keeps circles round under non-uniform box scaling). Legacy single-shape
+// colliders (shape/width/height/radius/offset[/mode]) normalize to one box shape.
+//
+// Shapes are in the UNROTATED box frame; the draw pipeline (scene.js) and the
+// matter body (matterBridge) apply Layout.rotation, so nothing here rotates.
 import { frameCount, renderSpriteFrame } from './pxart';
 import { spriteDestRect } from './spriteGeometry';
 
-// Union bounding box (fraction of native resolution, 0..1) of every opaque
-// (alpha > 0) pixel across ALL animation frames of a sprite, or null when the
-// art is fully transparent. Unioning across frames keeps an animated sprite's
-// collider from pulsing frame to frame. Cached in a WeakMap keyed by the
-// sprite object -- a sprite edit produces a fresh object (same invalidation
-// lifecycle as Sprite.jsx's rendered-canvas cache), so a stale entry never
-// outlives the art it was computed from.
+// ---------------------------------------------------------------------------
+// Sprite opaque-bounds -- only used now for the "auto-fit to sprite" action and
+// the empty-actor placeholder. Colliders no longer live-track the sprite.
+// ---------------------------------------------------------------------------
 const opaqueBoundsCache = new WeakMap();
 
-// Expand `acc` (in pixel units) to cover every opaque pixel of the canvas's
-// current contents.
 function accumulateOpaquePixels(acc, ctx, canvas) {
   if (!ctx || canvas.width === 0 || canvas.height === 0) return;
   const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -32,7 +41,6 @@ function accumulateOpaquePixels(acc, ctx, canvas) {
 
 function opaqueBoundsFraction(sprite) {
   if (opaqueBoundsCache.has(sprite)) return opaqueBoundsCache.get(sprite);
-
   const { width, height } = sprite.resolution;
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
@@ -42,7 +50,6 @@ function opaqueBoundsFraction(sprite) {
     renderSpriteFrame(sprite, frame, canvas);
     accumulateOpaquePixels(acc, ctx, canvas);
   }
-
   const bounds =
     acc.minX <= acc.maxX && acc.minY <= acc.maxY && width > 0 && height > 0
       ? {
@@ -56,21 +63,12 @@ function opaqueBoundsFraction(sprite) {
   return bounds;
 }
 
-// True when a resolved sprite has no opaque pixels across any frame -- fully
-// transparent art (e.g. a brand-new blank drawing). The editor draws an
-// empty-actor placeholder for these so a blank actor isn't invisible. Shares
-// `opaqueBoundsFraction`'s per-sprite cache (a sprite edit yields a fresh
-// object, which invalidates it).
+// True when a resolved sprite has no opaque pixels across any frame.
 export function spriteIsEmpty(sprite) {
   return !sprite || opaqueBoundsFraction(sprite) === null;
 }
 
-// The `mode: 'auto'` rect (before offsets), in world units, or null when auto
-// falls back to the full Layout box: no Sprite, an unresolved sprite file,
-// `Sprite.mode === 'tile'` (tiled art fills its cell by definition, so a
-// per-cell bbox doesn't compose), or fully transparent art. Deliberately does
-// NOT follow Sprite.jsx's FALLBACK_FILE placeholder-art fallback -- an
-// unresolvable file means the Layout box, period.
+// The sprite's opaque-pixel rect in world units through the draw mode, or null.
 function autoRect(layout, spriteProps, sprite) {
   if (!sprite || spriteProps.mode === 'tile') return null;
   const bounds = opaqueBoundsFraction(sprite);
@@ -82,14 +80,10 @@ function autoRect(layout, spriteProps, sprite) {
     width: bounds.width * dest.width,
     height: bounds.height * dest.height,
   };
-  // `cover`'s dest overflows the Layout box and the draw clips to it, so the
-  // opaque-bounds rect can spill outside the actor -- clamp to the visible box.
-  // A no-op for `stretch`/`fit`, whose dest already sits inside the box.
   if (spriteProps.mode === 'cover') return intersectRect(rect, layout);
   return rect;
 }
 
-// Rect intersection in world units; zero-size (never negative) when disjoint.
 function intersectRect(rect, box) {
   const x0 = Math.max(rect.x, box.x);
   const y0 = Math.max(rect.y, box.y);
@@ -98,101 +92,125 @@ function intersectRect(rect, box) {
   return { x: x0, y: y0, width: Math.max(0, x1 - x0), height: Math.max(0, y1 - y0) };
 }
 
-// `mode: 'manual'` rect (before offsets): `width`/`height`, centered in the
-// Layout box.
-function manualRect(layout, collider) {
-  const width = collider.width ?? layout.width;
-  const height = collider.height ?? layout.height;
-  return {
-    x: layout.x + (layout.width - width) / 2,
-    y: layout.y + (layout.height - height) / 2,
-    width,
-    height,
-  };
+// ---------------------------------------------------------------------------
+// Shape model
+// ---------------------------------------------------------------------------
+export const FULL_BOX_SHAPE = { type: 'box', x: 0.5, y: 0.5, w: 1, h: 1 };
+
+// A collider's shapes as box-fraction shapes: the stored `shapes` list, or a
+// single shape migrated from the retired single-shape fields.
+export function colliderShapeFractions(collider, layout) {
+  if (Array.isArray(collider.shapes) && collider.shapes.length > 0) return collider.shapes;
+  return [legacyShapeFraction(collider, layout)];
 }
 
-const fullLayoutRect = (layout) => ({ x: layout.x, y: layout.y, width: layout.width, height: layout.height });
+// Migrate retired single-shape fields (shape/width/height/radius/offset) to one
+// box-fraction shape. `mode: 'auto'` decks lose the live sprite-fit (a one-time
+// snapshot isn't available here) and fall back to the full box.
+function legacyShapeFraction(collider, layout) {
+  const bw = layout?.width || 1;
+  const bh = layout?.height || 1;
+  const cx = 0.5 + (collider.offsetX ?? 0) / bw;
+  const cy = 0.5 + (collider.offsetY ?? 0) / bh;
+  if (collider.shape === 'circle') {
+    const r =
+      collider.radius > 0
+        ? collider.radius / Math.min(bw, bh)
+        : Math.min((collider.width ?? bw) / bw, (collider.height ?? bh) / bh) / 2;
+    return { type: 'circle', x: cx, y: cy, r };
+  }
+  return { type: 'box', x: cx, y: cy, w: (collider.width ?? bw) / bw, h: (collider.height ?? bh) / bh };
+}
 
-// 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') {
-    const sprite = spriteProps ? sprites?.[spriteProps.file] : null;
-    return autoRect(layout, spriteProps, sprite) ?? fullLayoutRect(layout);
+// Resolve one box-fraction shape to world coordinates (unrotated box frame).
+function resolveShape(shape, layout) {
+  const bx = layout.x;
+  const by = layout.y;
+  const bw = layout.width;
+  const bh = layout.height;
+  const wx = (fx) => bx + fx * bw;
+  const wy = (fy) => by + fy * bh;
+  if (shape.type === 'circle') {
+    return { type: 'circle', cx: wx(shape.x ?? 0.5), cy: wy(shape.y ?? 0.5), radius: (shape.r ?? 0.5) * Math.min(bw, bh) };
   }
-  return manualRect(layout, collider);
+  if (shape.type === 'triangle' || shape.type === 'polygon') {
+    return { type: shape.type, points: (shape.points ?? []).map((p) => ({ x: wx(p.x), y: wy(p.y) })) };
+  }
+  const w = (shape.w ?? 1) * bw;
+  const h = (shape.h ?? 1) * bh;
+  const cx = wx(shape.x ?? 0.5);
+  const cy = wy(shape.y ?? 0.5);
+  return { type: 'box', cx, cy, width: w, height: h, x: cx - w / 2, y: cy - h / 2 };
 }
 
-// The Collider rect for an actor, from its Layout + Collider (+ Sprite, for
-// `mode: 'auto'`), or null if it lacks a Layout or Collider. `sprites` is the
-// scene's sprite map (file path -> parsed sprite); omit it (or pass a map
-// missing the actor's file) to force the Layout-box fallback, e.g. from a
-// caller that only has raw scene data and no loaded sprites.
-export function getColliderRect(actor, sprites) {
+// World-space shapes for an actor's collider (list), or null if no Layout/Collider.
+export function getColliderShapes(actor) {
   const layout = actor?.components?.Layout;
   const collider = actor?.components?.Collider;
   if (!layout || !collider) return null;
+  return colliderShapeFractions(collider, layout).map((s) => resolveShape(s, layout));
+}
 
-  const rect = modeRect(layout, collider, actor.components.Sprite, sprites);
-  return {
-    x: rect.x + (collider.offsetX ?? 0),
-    y: rect.y + (collider.offsetY ?? 0),
-    width: rect.width,
-    height: rect.height,
-  };
+// Back-compat single-shape accessor (the first shape).
+export function getColliderShape(actor) {
+  const shapes = getColliderShapes(actor);
+  return shapes && shapes.length ? shapes[0] : null;
 }
 
-// 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,
-  };
+function shapeAabb(s) {
+  if (s.type === 'circle') return [s.cx - s.radius, s.cy - s.radius, s.cx + s.radius, s.cy + s.radius];
+  if (s.type === 'triangle' || s.type === 'polygon') {
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const p of s.points) {
+      if (p.x < x0) x0 = p.x;
+      if (p.y < y0) y0 = p.y;
+      if (p.x > x1) x1 = p.x;
+      if (p.y > y1) y1 = p.y;
+    }
+    return [x0, y0, x1, y1];
+  }
+  return [s.x, s.y, s.x + s.width, s.y + s.height];
 }
 
-// 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) {
+// AABB of the whole collider (union of all shapes), world units -- for
+// scene.overlaps / camera / coarse queries. Second arg accepted for call-site
+// compat (colliders no longer read sprites at resolve time).
+export function getColliderRect(actor) {
+  const shapes = getColliderShapes(actor);
+  if (!shapes || shapes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const s of shapes) {
+    const [x0, y0, x1, y1] = shapeAabb(s);
+    if (x0 < minX) minX = x0;
+    if (y0 < minY) minY = y0;
+    if (x1 > maxX) maxX = x1;
+    if (y1 > maxY) maxY = y1;
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// A single box-fraction shape matching the sprite's opaque bounds through the
+// draw mode, or null when there's nothing to fit to. `asCircle` returns a circle
+// that encloses those bounds. Powers the inspector's "Auto-fit to sprite".
+export function computeAutoFit(actor, sprites, asCircle = false) {
   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),
-  };
+  const x = (rect.x + rect.width / 2 - layout.x) / layout.width;
+  const y = (rect.y + rect.height / 2 - layout.y) / layout.height;
+  const w = rect.width / layout.width;
+  const h = rect.height / layout.height;
+  if (asCircle) return { type: 'circle', x, y, r: Math.max(w, h) / 2 };
+  return { type: 'box', x, y, w, h };
 }
 
 export function intersects(a, b) {

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

@@ -281,7 +281,15 @@ export class SceneRuntime {
   }
 
   actorAt(x, y) {
+    return this.actorsAt(x, y)[0] ?? null;
+  }
+
+  // All actors whose Layout box contains the point, ordered topmost-first (high
+  // z -> low z). Used by the editor's click-to-cycle so repeated clicks in the
+  // same spot can walk down through overlapping actors.
+  actorsAt(x, y) {
     const actors = this.getActors().slice().reverse();
+    const hits = [];
     for (const actor of actors) {
       const layout = getLayout(actor);
       if (!layout) continue;
@@ -291,10 +299,10 @@ export class SceneRuntime {
         y >= layout.y &&
         y <= layout.y + layout.height
       ) {
-        return actor;
+        hits.push(actor);
       }
     }
-    return null;
+    return hits;
   }
 
   actorIdsInRect(rect) {

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

@@ -26,6 +26,9 @@ export class RigidBody {
     freezeRotation: false,
     velocityX: 0,
     velocityY: 0,
+    // Initial spin, degrees per fixed step (like velocityX/Y are px per step),
+    // applied once when play starts.
+    angularVelocity: 0,
   };
 
   constructor(props) {

package/kits/physics-2d/physics/matterBridge.js

@@ -16,6 +16,7 @@
 // emulated here (applyWorldGravity, and kinematic == static-moved-from-Layout).
 
 import Matter from 'matter-js';
+import { getColliderShapes } from '../engine/collider';
 
 export const DEG_TO_RAD = Math.PI / 180;
 export const RAD_TO_DEG = 180 / Math.PI;
@@ -46,39 +47,78 @@ export function rectCenter(rect) {
   return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
 }
 
-function bodyRadius(actor, rect) {
-  // `radius` of 0 (the default) means "derive from the collider size" -- note
-  // `??` won't do here since 0 is a real number; a 0 radius would be a
-  // degenerate, zero-mass body that NaNs the simulation.
-  const r = actor.components.Collider.radius;
-  return r && r > 0 ? r : Math.min(rect.width, rect.height) / 2;
+// One matter part (a body) for a resolved, world-space collider shape. Triangles
+// and convex polygons go through `fromVertices`; a concave polygon (which would
+// need the poly-decomp lib we don't ship) or a degenerate shape falls back to its
+// AABB box so it still collides.
+function shapeToPart(s) {
+  if (!s) return null;
+  if (s.type === 'circle') return Matter.Bodies.circle(s.cx, s.cy, s.radius > 0 ? s.radius : 0.5);
+  if ((s.type === 'triangle' || s.type === 'polygon') && s.points && s.points.length >= 3) {
+    let cx = 0;
+    let cy = 0;
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const p of s.points) {
+      cx += p.x;
+      cy += p.y;
+      if (p.x < x0) x0 = p.x;
+      if (p.y < y0) y0 = p.y;
+      if (p.x > x1) x1 = p.x;
+      if (p.y > y1) y1 = p.y;
+    }
+    const part = Matter.Bodies.fromVertices(cx / s.points.length, cy / s.points.length, [s.points]);
+    if (part) return part;
+    return Matter.Bodies.rectangle((x0 + x1) / 2, (y0 + y1) / 2, Math.max(1, x1 - x0), Math.max(1, y1 - y0));
+  }
+  return Matter.Bodies.rectangle(s.cx, s.cy, Math.max(1, s.width), Math.max(1, s.height));
 }
 
-// Structural signature: when this changes we rebuild the body (shape/size/type)
-// rather than live-patching material props in place.
-export function bodySignature(actor, rect) {
-  const shape = actor.components.Collider.shape ?? 'box';
-  const dims =
-    shape === 'circle'
-      ? `r${Math.round(bodyRadius(actor, rect))}`
-      : `${Math.round(rect.width)}x${Math.round(rect.height)}`;
-  return `${shape}|${dims}|${rigidBodyType(actor)}`;
+// Structural signature: when this changes we rebuild the body (shape set / sizes
+// / type) rather than live-patching material props in place. Resolved sizes are
+// included, so resizing the Layout box (which rescales every fraction shape)
+// triggers a rebuild.
+export function bodySignature(actor) {
+  const shapes = getColliderShapes(actor) ?? [];
+  const sig = shapes
+    .map((s) =>
+      s.type === 'circle'
+        ? `c${Math.round(s.radius)}`
+        : s.type === 'box'
+          ? `b${Math.round(s.width)}x${Math.round(s.height)}`
+          : `${s.type[0]}${(s.points ?? []).length}`
+    )
+    .join(',');
+  return `${sig}|${rigidBodyType(actor)}`;
 }
 
-// Build a fresh matter body at the collider rect's center, oriented by Layout.
+// Build a fresh matter body -- a single part, or a compound of all collider
+// shapes -- anchored so `body.position` is the collider's AABB center (matching
+// the center-offset PhysicsSystem caches), oriented by Layout.
 export function createBody(actor, rect) {
-  const center = rectCenter(rect);
-  const options = { angle: (actor.components.Layout.rotation ?? 0) * DEG_TO_RAD };
-  const body =
-    (actor.components.Collider.shape ?? 'box') === 'circle'
-      ? Matter.Bodies.circle(center.x, center.y, bodyRadius(actor, rect), options)
-      : Matter.Bodies.rectangle(center.x, center.y, rect.width, rect.height, options);
+  const parts = (getColliderShapes(actor) ?? []).map(shapeToPart).filter(Boolean);
+  let body;
+  if (parts.length === 0) {
+    const c = rectCenter(rect);
+    body = Matter.Bodies.rectangle(c.x, c.y, Math.max(1, rect.width), Math.max(1, rect.height));
+  } else if (parts.length === 1) {
+    body = parts[0];
+  } else {
+    body = Matter.Body.create({ parts });
+  }
+  Matter.Body.setPosition(body, rectCenter(rect));
+  Matter.Body.setAngle(body, (actor.components.Layout.rotation ?? 0) * DEG_TO_RAD);
   body.plugin.actorId = actor.id;
   Matter.Body.setStatic(body, rigidBodyType(actor) !== 'dynamic');
   patchBody(body, actor);
   const rb = actor.components.RigidBody;
-  if (rb && rigidBodyType(actor) === 'dynamic' && (rb.velocityX || rb.velocityY)) {
-    Matter.Body.setVelocity(body, { x: rb.velocityX ?? 0, y: rb.velocityY ?? 0 });
+  if (rb && rigidBodyType(actor) === 'dynamic') {
+    if (rb.velocityX || rb.velocityY) {
+      Matter.Body.setVelocity(body, { x: rb.velocityX ?? 0, y: rb.velocityY ?? 0 });
+    }
+    if (rb.angularVelocity) Matter.Body.setAngularVelocity(body, rb.angularVelocity * DEG_TO_RAD);
   }
   return body;
 }
@@ -89,12 +129,21 @@ export function patchBody(body, actor) {
   const rb = actor.components.RigidBody;
   body.restitution = collider.bounciness ?? 0;
   body.friction = collider.friction ?? 0.1;
+  body.frictionStatic = collider.frictionStatic ?? 0.5;
   // `isTrigger` is the source of truth for solid-vs-sensor; legacy decks that
   // used the retired `kind: 'pickup'` label are still honored as sensors.
   body.isSensor = Boolean(collider.isTrigger || collider.kind === 'pickup');
   body.frictionAir = rb?.drag ?? 0.01;
   body.plugin.gravityScale = rb?.gravityScale ?? 1;
   body.plugin.angularDrag = rb?.angularDrag ?? 0;
+  // Density sets mass (= density x area) -- DYNAMIC bodies only. On a static or
+  // kinematic body, setDensity would replace the infinite mass that setStatic
+  // gave it with a finite inverse mass, corrupting it as an immovable obstacle
+  // (things fall through it / the sim NaNs). It recomputes inertia, so it runs
+  // before the freezeRotation override below.
+  if (rigidBodyType(actor) === 'dynamic') {
+    Matter.Body.setDensity(body, collider.density > 0 ? collider.density : 0.001);
+  }
   if (rb?.freezeRotation) Matter.Body.setInertia(body, Infinity);
 }
 

package/package.json

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

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

@@ -1,28 +0,0 @@
-// 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/physics-2d/physics/extensions/collider.js

@@ -1,15 +0,0 @@
-// Physics contributes material fields to the shared Collider behavior WITHOUT
-// editing behaviors/Collider.jsx -- that file stays identical to basic-2d's, so
-// the drift check treats it as a converged shared file. These fields are read
-// by the physics simulation (see physics/matterBridge.js); a kit without the
-// physics module never registers them, so its Collider has no material fields.
-// See engine/behaviorExtensions.js for how this is discovered.
-export const behaviorExtension = {
-  behaviorName: 'Collider',
-  defaultProps: {
-    // `bounciness` = restitution: 0 (dead) to ~1 (very bouncy); can exceed 1.
-    bounciness: 0,
-    // `friction` = surface friction.
-    friction: 0.1,
-  },
-};