Show a clickable symbol for colliders in the scene view

Colliders were the only placed part without a symbol in the scene
view. A collider that sits exactly on its sprite was hard to find and
could only be picked by its outline.

- The symbol is the box with four corner handles from the asset
  panel. It stays upright and has a fixed size in world units.
- colliderColor() holds the colour rule of the outline (green,
  trigger colour, red for a shape that collides with nothing). The
  outline and the symbol share it.
- The symbol sits 28 units left of the collider centre. The sprite
  centre stays free for grabbing the sprite, and a rigidbody symbol
  on the same spot is not covered.
- The symbol has its own 26x26 hit area and the outline's handler.
  A click selects the collider and a drag moves it. sceneStack counts
  it as a hit under the pointer.
- The hook __gm.sceneIcon(id) also returns x, y, color, screen and
  clickable.

Findings:
- With the clickable symbol on the sprite centre, four checks in 01
  and 09 dragged the collider instead of the crate. That is why the
  symbol moved beside the centre.

Tests:
- ./check.sh: 153 files, 2237 tests, CHECK EXIT 0 (was 152 / 2234).
- New unit test for colliderColor. svg-icons.test.ts lists the
  collider symbol.
- e2e 41b: 3 new checks (beside the centre without and with a
  rigidbody, click selects the collider).
- e2e 1-16,39-43: ALL PASSED, 635 checks. e2e 41 alone: 20 checks.
- Counter-probes: no symbol fails both placement checks. A symbol
  without hit area fails only the click check.
- Check total 1348 + 3 = 1351, computed, not yet measured by CI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/viewport/SceneViewport.ts

@@ -3,7 +3,7 @@
  * copy, so live positions are visible and stay editable. A container's template is the same
  * work on the same shape of data, so the Container tab subclasses this and swaps `holder()`.
  */
-import { type FederatedPointerEvent, Graphics, Text } from 'pixi.js';
+import { type FederatedPointerEvent, Graphics, Rectangle, Text } from 'pixi.js';
 import { oneStep } from '../../core/commands/CompoundCommand';
 import { MoveSceneObjectCommand, PlaceAssetCommand } from '../../core/commands/sceneObjectCommands';
 import { hasSceneIcon } from '../../core/model/AssetTypes';
@@ -13,6 +13,7 @@ import {
   apply as applyPoint,
   applyVector,
   type Extent,
+  IDENTITY,
   invert,
   linearOf,
   type Mat,
@@ -31,7 +32,8 @@ import { collectHolderItems, type DrawItem } from '../../viewport/items';
 import { menuTargetOf, type PointerHit, pressOn, stackAt } from '../../viewport/pick';
 import { openObjectMenu } from '../objectMenu';
 import { type LayerFocus, layerAlpha } from '../../viewport/tilemap';
-import { dashedLine } from '../../viewport/symbols';
+import { colliderShape } from '../../core/properties/collider';
+import { colliderColor, dashedLine } from '../../viewport/symbols';
 import { drawSymbolIcon } from '../../viewport/symbolIcons';
 import { screenToWorld, type View, worldToScreen } from '../../viewport/view';
 import { type CastRay, RAY_SHOWN, type World } from '../../runtime/World';
@@ -80,6 +82,11 @@ export interface GizmoInfo {
 
 const OFF_GIZMO_ALPHA = 0.45;
 
+/** World units a collider's icon stands left of the collider's centre. */
+const ICON_CLEARANCE = 28;
+/** Half the side of a collider icon's clickable square, in world units – the SVG's view box. */
+const ICON_HALF = 13;
+
 /** Owner links in the colour of the icon they leave; anything else in the muted default. */
 const LINK_COLORS: Partial<Record<DrawItem['type'], number>> = {
   behavior: Theme.colors.behavior,
@@ -93,6 +100,7 @@ export class SceneViewport extends FreeViewport {
   private readonly gizmos = new Graphics();
   private readonly labels = new Map<string, Text>();
   private readonly icons = new Map<string, Graphics>();
+  private readonly iconColors = new Map<string, number>();
   private readonly solids = new TilemapSolidOutlines(this.overlay);
   private readonly host: SceneViewHost = {
     state: this.state,
@@ -407,7 +415,11 @@ export class SceneViewport extends FreeViewport {
       const node = this.nodes.get(item.id);
       if (!node?.visible || node.eventMode === 'none') continue;
       const p = node.toLocal(global);
-      if (!(node.hitArea ? node.hitArea.contains(p.x, p.y) : node.containsPoint(p))) continue;
+      if (
+        !this.onIcon(item.id, global) &&
+        !(node.hitArea ? node.hitArea.contains(p.x, p.y) : node.containsPoint(p))
+      )
+        continue;
       if (item.type !== 'tilemap') {
         hits.push({ id: item.id, layers: null });
         continue;
@@ -424,6 +436,14 @@ export class SceneViewport extends FreeViewport {
     return hits;
   }
 
+  /** Whether the pointer is on the clickable icon of this object – a collider's. */
+  private onIcon(id: string, global: Vec2): boolean {
+    const icon = this.icons.get(id);
+    if (!icon?.visible || icon.eventMode === 'none' || !icon.hitArea) return false;
+    const p = icon.toLocal(global);
+    return icon.hitArea.contains(p.x, p.y);
+  }
+
   /** What is under the pointer, front to back as drawn (#203). */
   private stackUnder(e: FederatedPointerEvent): string[] {
     return stackAt(this.lastItems, this.hitsUnder(e.global));
@@ -512,6 +532,7 @@ export class SceneViewport extends FreeViewport {
     this.labels.delete(id);
     this.icons.get(id)?.destroy();
     this.icons.delete(id);
+    this.iconColors.delete(id);
     this.solids.dispose(id);
   }
 
@@ -520,39 +541,82 @@ export class SceneViewport extends FreeViewport {
     return this.solids.info(this.lastItems.find((i) => i.id === id));
   }
 
-  /** The icon of a particle source, the name beside it and whether it hangs off its owner (test hook). */
-  iconInfo(id: string): { layer: string; visible: boolean; label: string; link: boolean } | null {
+  /**
+   * The icon of a particle source or collider, in world units, the name beside it and whether it
+   * hangs off its owner (test hook).
+   */
+  iconInfo(id: string): {
+    layer: string;
+    visible: boolean;
+    label: string;
+    link: boolean;
+    x: number;
+    y: number;
+    color: number | null;
+    screen: Vec2;
+    clickable: boolean;
+  } | null {
     const icon = this.icons.get(id);
     if (!icon) return null;
     const label = this.labels.get(id);
+    const screen = icon.getGlobalPosition();
     return {
       layer: icon.parent === this.overlay ? 'overlay' : 'objects',
       visible: icon.visible,
       label: label?.visible ? label.text : '',
       link: this.lastLinks.includes(id),
+      x: icon.position.x,
+      y: icon.position.y,
+      color: this.iconColors.get(id) ?? null,
+      screen: { x: screen.x, y: screen.y },
+      clickable: icon.eventMode !== 'none',
     };
   }
 
   /**
    * A source draws only its particles, so without a mark of its own an empty one is invisible and
    * cannot be found (#89). The mark is a decoration rather than a symbol: `GameViewport` never syncs
-   * decorations, so it is editor-only without the source leaving the running game.
+   * decorations, so it is editor-only without the source leaving the running game. A collider gets
+   * one too, like every other symbol: a thin outline around a sprite is easily missed. Its icon is
+   * clicked like the outline – a source's square already covers its own – and stands left of the
+   * collider's centre: the middle of the sprite it sits on stays free for grabbing the sprite, and
+   * a rigidbody's icon on the same centre stays uncovered (its name stands to its right).
    */
   private syncIcon(item: DrawItem, show: boolean): void {
     let icon = this.icons.get(item.id);
-    if (!show || item.type !== 'particles') {
-      if (icon) icon.visible = false;
+    const type = item.type === 'particles' || item.type === 'collider' ? item.type : null;
+    if (!show || !type) {
+      if (icon) {
+        icon.visible = false;
+        icon.eventMode = 'none';
+      }
       return;
     }
     if (!icon) {
       icon = new Graphics();
       icon.eventMode = 'none';
-      drawSymbolIcon(icon, 'particles');
+      if (type === 'collider') {
+        icon.hitArea = new Rectangle(-ICON_HALF, -ICON_HALF, ICON_HALF * 2, ICON_HALF * 2);
+        icon.cursor = 'move';
+        icon.on('pointerdown', (e: FederatedPointerEvent) => this.onItemPointerDown(item.id, e));
+      }
       this.icons.set(item.id, icon);
       this.overlay.addChild(icon);
     }
+    if (type === 'collider') icon.eventMode = 'static';
+    // A collider's icon takes the colour of its outline: a trigger's, or red for a shape that
+    // collides with nothing.
+    const color =
+      type === 'collider'
+        ? colliderColor(colliderShape(item.props, IDENTITY, item.frame), item.props)
+        : Theme.colors.particles;
+    if (this.iconColors.get(item.id) !== color) {
+      icon.clear();
+      drawSymbolIcon(icon, type, color);
+      this.iconColors.set(item.id, color);
+    }
     icon.visible = true;
-    icon.position.set(item.x, item.y);
+    icon.position.set(type === 'collider' ? item.x - ICON_CLEARANCE : item.x, item.y);
   }
 
   private syncGrid(): void {