State machines: asset, tab, State branch and Set state nodes (#51)

A state machine is an asset whose graph holds one `State` node per state
(no ports, name as title), edited in a new "State machine" tab that reuses
the graph canvas: right-click places "State n", snap toggle shared with the
Behavior tab via SnapToggle. `statemachine` is a value kind like texture
(port, literal node, variable, struct field, tagged list item).

Behaviors use it through `State branch` (one exec output per state) and
`Set state` (one exec input per state; the interpreter now hands `run` the
entry port). States live per behavior instance in NodeContext.states, with
no initial state. Ports derive from the inline picker or a wired
`State machine` literal; BehaviorLookup became GraphLookup with
behavior(id) and machine(id).

The Graph tab is labelled "Behavior" (key unchanged). Unit tests
(state-machine, kinds, catalog, ports), e2e step 26 and README added.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/editor/graph/GraphEditor.ts

@@ -1,29 +1,24 @@
 import type { Asset, BehaviorAsset } from '../../core/model/Asset';
 import { findAsset, findAssetOf } from '../../core/model/Project';
-import { Checkbox, Label } from '../../ui';
 import { AssetTabEditor } from '../AssetTabEditor';
 import type { EditorState } from '../state';
 import { Breadcrumb } from './Breadcrumb';
 import { GraphCanvas } from './GraphCanvas';
+import { SnapToggle } from './SnapToggle';
 import { backTo, descend, follow, type Trail } from './trail';
 
 /** Room kept for the "N nodes · M links" readout, wide enough for a three-digit graph. */
 const INFO_WIDTH = 150;
 
 export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
-  private readonly snapBox = new Checkbox();
+  private readonly snap = new SnapToggle(() => this.canvas);
   readonly breadcrumb = new Breadcrumb();
   private trail: Trail = [];
 
   constructor(state: EditorState) {
     super(state, { noun: 'Behavior', infoWidth: INFO_WIDTH });
-    this.snapBox.onChange = (on) => this.canvas.setSnapping(on);
     this.breadcrumb.onPick = (index) => this.open(this.trail[index]!, backTo(this.trail, index));
-    this.mount(
-      new GraphCanvas(state),
-      [new Label('Snap', { style: 'muted' }), this.snapBox],
-      this.breadcrumb,
-    );
+    this.mount(new GraphCanvas(state), this.snap.widgets, this.breadcrumb);
     this.canvas.onOpenBehavior = (id) => this.open(id, descend(this.trail, this.currentAssetId, id));
     // Play swaps in the runtime copy of the project, and back.
     state.on('mode', () => this.refresh());
@@ -69,6 +64,6 @@ export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
   }
 
   protected override syncExtras(asset: BehaviorAsset | null): void {
-    this.snapBox.setEnabled(Boolean(asset));
+    this.snap.setEnabled(Boolean(asset));
   }
 }