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/statemachine/StateMachineEditor.ts

@@ -0,0 +1,42 @@
+import { statesOf } from '../../core/graph';
+import type { Asset, StateMachineAsset } from '../../core/model/Asset';
+import { AssetTabEditor } from '../AssetTabEditor';
+import { GraphCanvas } from '../graph/GraphCanvas';
+import { SnapToggle } from '../graph/SnapToggle';
+import type { EditorState } from '../state';
+
+/** Room kept for the "N states" readout. */
+const INFO_WIDTH = 90;
+
+/**
+ * The states of one state machine, on the graph canvas the Behavior tab uses: a state is a node,
+ * so placing (right-click), moving, snapping, renaming, deleting and undo are the graph's.
+ * Transitions are a later step.
+ */
+export class StateMachineEditor extends AssetTabEditor<StateMachineAsset, GraphCanvas> {
+  private readonly snap = new SnapToggle(() => this.canvas);
+
+  constructor(state: EditorState) {
+    super(state, { noun: 'State machine', infoWidth: INFO_WIDTH });
+    this.mount(new GraphCanvas(state, 'state machine'), this.snap.widgets);
+    // Play swaps in the runtime copy of the project, and back.
+    state.on('mode', () => this.refresh());
+  }
+
+  protected override selectedId(): string {
+    return this.state.selectedStateMachineId ?? '';
+  }
+
+  protected override isMine(asset: Asset): asset is StateMachineAsset {
+    return asset.type === 'statemachine';
+  }
+
+  protected override infoText(asset: StateMachineAsset): string {
+    const count = statesOf(asset.graph).length;
+    return `${count} ${count === 1 ? 'state' : 'states'}`;
+  }
+
+  protected override syncExtras(asset: StateMachineAsset | null): void {
+    this.snap.setEnabled(Boolean(asset));
+  }
+}