castle-web-cli 0.4.90 → 0.4.92

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) {