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/viewport/icons/collider.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-13 -13 26 26" width="26" height="26">
+  <!-- A bounding box with its corner handles, as in the asset panel. -->
+  <rect x="-9" y="-9" width="18" height="18" fill="currentColor" fill-opacity="0.25" stroke="currentColor" stroke-width="2" />
+  <rect x="-12" y="-12" width="6" height="6" fill="currentColor" />
+  <rect x="6" y="-12" width="6" height="6" fill="currentColor" />
+  <rect x="-12" y="6" width="6" height="6" fill="currentColor" />
+  <rect x="6" y="6" width="6" height="6" fill="currentColor" />
+</svg>

src/viewport/symbolIcons.ts

@@ -3,23 +3,32 @@ import type { Graphics } from 'pixi.js';
 import { drawSvg, Theme } from '../ui';
 import behavior from './icons/behavior.svg?raw';
 import camera from './icons/camera.svg?raw';
+import collider from './icons/collider.svg?raw';
 import container from './icons/container.svg?raw';
 import particles from './icons/particles.svg?raw';
 import rigidbody from './icons/rigidbody.svg?raw';
 
-export type SymbolIcon = 'behavior' | 'camera' | 'container' | 'particles' | 'rigidbody';
+export type SymbolIcon = 'behavior' | 'camera' | 'collider' | 'container' | 'particles' | 'rigidbody';
 
-export const SYMBOL_SVG: Record<SymbolIcon, string> = { behavior, camera, container, particles, rigidbody };
+export const SYMBOL_SVG: Record<SymbolIcon, string> = {
+  behavior,
+  camera,
+  collider,
+  container,
+  particles,
+  rigidbody,
+};
 
 const SYMBOL_COLOR: Record<SymbolIcon, number> = {
   behavior: Theme.colors.behavior,
   camera: Theme.colors.textMuted,
+  collider: Theme.colors.collider,
   container: Theme.colors.container,
   particles: Theme.colors.particles,
   rigidbody: Theme.colors.collider,
 };
 
-/** Adds the icon to what `node` already draws. */
-export function drawSymbolIcon(node: Graphics, icon: SymbolIcon): void {
-  drawSvg(node, SYMBOL_SVG[icon], SYMBOL_COLOR[icon]);
+/** Adds the icon to what `node` already draws; `color` for one that changes, like a trigger's. */
+export function drawSymbolIcon(node: Graphics, icon: SymbolIcon, color = SYMBOL_COLOR[icon]): void {
+  drawSvg(node, SYMBOL_SVG[icon], color);
 }

src/viewport/symbols.ts

@@ -12,7 +12,7 @@ import {
 } from '../core/properties/collider';
 import { SHEET_EDGE } from '../core/shader/nodes';
 import type { NineSlice } from '../core/model/texture';
-import type { Vec2 } from '../core/model/Properties';
+import type { PropertyBag, Vec2 } from '../core/model/Properties';
 import { closestOnSegment } from '../core/util/vec';
 import { Theme } from '../ui';
 import type { DrawItem } from './items';
@@ -153,14 +153,7 @@ export function drawItem(
       // collider sits on.
       const shape = colliderShape(item.props, IDENTITY, item.frame);
       traceShape(node, shape);
-      // A polygon that crosses itself collides with nothing, and says so in red – as does a frame
-      // outline without a frame or without a drawn outline (#193).
-      const color =
-        shape.kind === 'polygon' && shape.pieces.length === 0
-          ? Theme.colors.danger
-          : isTrigger(item.props)
-            ? Theme.colors.trigger
-            : Theme.colors.collider;
+      const color = colliderColor(shape, item.props);
       node.fill({ color, alpha: 0.12 }).stroke({ width: 2 / scale, color });
       const facing = oneWayFacing(item.props, IDENTITY);
       if (facing)
@@ -176,6 +169,15 @@ export function drawItem(
   }
 }
 
+/**
+ * The colour of a collider's outline and icon. A polygon that crosses itself collides with nothing,
+ * and says so in red – as does a frame outline without a frame or without a drawn outline (#193).
+ */
+export function colliderColor(shape: ColliderShape, props: PropertyBag): number {
+  if (shape.kind === 'polygon' && shape.pieces.length === 0) return Theme.colors.danger;
+  return isTrigger(props) ? Theme.colors.trigger : Theme.colors.collider;
+}
+
 /** How far the landing cone of a one-way side reaches, in screen pixels (#159). */
 export const CONE_LENGTH = 24;