A transition carries a name, so a state needs no visible port (#52)

A state keeps its `in`/`out` exec pins in the model and the editor never draws
them. That is the whole trick: connecting, undo, deleting a state and saving all
keep working untouched, because `normalizeGraph` filters nodes and never edges,
and no edge ever checks its port key against a NodeDef. Only two places change --
`NodeView.redraw` stops drawing the row, and `portAt` refuses to hand one out, so
an invisible pin cannot be grabbed either.

Transitions are drawn by right-clicking a state, `Make transition`, then clicking
the target. The armed mode takes the same shape as a live drag, so the existing
preview draws it with no second code path, and it dies with Escape, a click on
empty canvas or a switch to another asset.

Removing the pins removed the only handle a transition had: edges have no
hit-test anywhere, and the pin right-click was the sole route to Disconnect.
The inspector's TRANSITIONS OUT / TRANSITIONS IN lists are therefore not a
convenience, they are the delete path.

`GraphEdge` gained an optional `label`, which `normalizeGraph` has to pass
through explicitly or a saved name is dropped on load. `State transition`
replaces `Next state`: it takes the machine on an input port and the name from a
picker, and resolves against the *current* state. Names are deliberately not
unique across a machine -- two states may both have an `alarm` -- so a node named
`alarm` moves whichever state has one, and an empty name follows the single
unnamed edge.

The geometry moved to a Pixi-free `transitions.ts`: a gap to the box border, and
a fan that puts a pair of opposite edges beside each other instead of on top of
each other. Keeping it as plain maths is what let a screenshot bug become a unit
test -- an earlier pin-to-pin line ran under the target node and took its
arrowhead with it, because `nodeLayer` sits above `edgeLayer`.

One limit stands and is not fixed here: `ConnectCommand` rejects a second edge
between the same two states ("Already connected"), because every transition
hangs off the same two ports. With names, `A --alarm--> B` beside
`A --seen--> B` is a sensible pair, so this is worth its own issue.

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

src/editor/inspector/nodeSection.ts

@@ -3,13 +3,22 @@ import {
   declaresPropertyPorts,
   declaresVariablePorts,
   edgesInto,
+  edgesOfNode,
+  findNode,
+  type Graph,
+  type GraphEdge,
   type GraphNode,
   inlineInputDef,
   inlineInputs,
+  isStateNode,
+  MACHINE_PORT,
   OBJECT_BEHAVIOR_PARAM,
   OBJECT_TYPE_PARAM,
   portSignature,
   resolveDef,
+  STATE_TRANSITION,
+  stateName,
+  TRANSITION_PARAM,
 } from '../../core/graph';
 import type { GraphAsset } from '../../core/model/Asset';
 import { graphLookup } from '../../core/model/graphLookup';
@@ -21,6 +30,7 @@ import { createFieldRow, type FieldHandlers } from './fieldFactory';
 import { addNote, addTitle, type InspectorHost } from './host';
 import { buildPortSection, buildPropertyPortSection, buildVariablePortSection } from './portSection';
 import { listOpener, previewingHandlers } from './previewHandlers';
+import { buildTransitionPicker, buildTransitionSection } from './transitionSection';
 import { currentNode, nodeParamValue } from './valueSpecs';
 
 /** Structure-defining facts of a node selection: ports, connected inputs, declared variables. */
@@ -39,11 +49,24 @@ export function nodeSignature(project: Project, assetId: string, nodeId: string)
   const declared = (node.ports ?? []).map((p) => `${p.key}:${p.kind}${p.write ? ':set' : ''}`).join(',');
   // They decide which rows the inspector builds, and two behaviors may share a name in the title.
   const target = `${textOf(node.params[OBJECT_TYPE_PARAM] ?? '')}:${textOf(node.params[OBJECT_BEHAVIOR_PARAM] ?? '')}`;
+  // The transition rows and the picked name are drawn, not filled in by `refreshNodeSection`, so
+  // every part of them a command can change has to force a rebuild.
+  const transitions = isStateNode(node)
+    ? edgesOfNode(asset.graph, node.id)
+        .map((e) => `${e.id}:${e.label ?? ''}:${farStateName(asset.graph, e, node.id)}`)
+        .join(',')
+    : `${textOf(node.params[TRANSITION_PARAM] ?? '')}:${textOf(node.params[MACHINE_PORT] ?? '')}`;
   return `${portSignature(node, asset.graph, lookup, assetId)}|${declared}|${connected.join(',')}|${variablesOf(
     asset,
   )
     .map((v) => v.key)
-    .join(',')}|${target}`;
+    .join(',')}|${target}|${transitions}`;
+}
+
+/** The name of the state at the other end of an edge – what a transition row is labelled with. */
+function farStateName(graph: Graph, edge: GraphEdge, nodeId: string): string {
+  const far = findNode(graph, edge.from.node === nodeId ? edge.to.node : edge.from.node);
+  return far && isStateNode(far) ? stateName(far) : '';
 }
 
 /** A state machine declares no variables; its one node type has none to name. */
@@ -79,8 +102,13 @@ export function buildNodeSection(host: InspectorHost, assetId: string, nodeId: s
 
   if (!ownSettings && def.params.length > 0) {
     addTitle(host, 'SETTINGS');
-    for (const param of def.params) addSetting(param);
+    for (const param of def.params) {
+      if (param.key === TRANSITION_PARAM && node.type === STATE_TRANSITION)
+        buildTransitionPicker(host, assetId, node, asset.graph);
+      else addSetting(param);
+    }
   }
+  if (isStateNode(node)) buildTransitionSection(host, assetId, node, asset.graph);
 
   const free = inlineInputs(def).filter((p) => edgesInto(asset.graph, node.id, p.key).length === 0);
   if (free.length > 0) addTitle(host, 'INPUTS (unconnected)');