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)');

src/editor/inspector/transitionSection.ts

@@ -0,0 +1,131 @@
+import {
+  DisconnectCommand,
+  NameTransitionCommand,
+  SetNodeParamCommand,
+} from '../../core/commands/graphCommands';
+import {
+  findNode,
+  type Graph,
+  type GraphEdge,
+  type GraphNode,
+  isStateNode,
+  machineOf,
+  stateName,
+  TRANSITION_PARAM,
+  transitionNames,
+} from '../../core/graph';
+import { graphLookup } from '../../core/model/graphLookup';
+import { textOf } from '../../core/model/Properties';
+import { Dropdown, HStack, Label, Menu, Spacer, TextField, Theme } from '../../ui';
+import { NAME_WIDTH, removeButton } from './fieldFactory';
+import { addNote, addTitle, type InspectorHost } from './host';
+
+/** The name `State transition` asks for, picked from the machine on its `machine` input – the
+ *  options depend on another field, which no field kind can express. */
+export function buildTransitionPicker(
+  host: InspectorHost,
+  assetId: string,
+  node: GraphNode,
+  graph: Graph,
+): void {
+  const lookup = graphLookup(host.state.project);
+  const machine = machineOf({ node, graph, lookup });
+  const names = transitionNames(machine);
+  const chosen = textOf(node.params[TRANSITION_PARAM] ?? '');
+  const known = chosen === '' || names.includes(chosen);
+  const row = new HStack({ gap: Theme.gap, align: 'center' });
+  row.minHeight = Theme.rowHeight;
+  row.add(new Label('Transition', { style: 'muted' }));
+  row.add(new Spacer());
+  const choose = new Dropdown(chosen || UNNAMED, { variant: known ? 'default' : 'danger' });
+  choose.onClick = () => {
+    const items = [UNNAMED, ...names].map((name) => ({
+      label: name,
+      onSelect: () =>
+        host.state.execute(
+          new SetNodeParamCommand(assetId, node.id, TRANSITION_PARAM, name === UNNAMED ? '' : name),
+        ),
+    }));
+    new Menu(items, { searchable: names.length > 8 }).openBelow(choose);
+  };
+  row.add(choose);
+  host.body.add(row);
+  if (!machine) addNote(host, 'Pick a machine first.');
+  else if (!known) addNote(host, `"${chosen}" is not a transition of ${machine.name}.`, 'warning');
+}
+
+/** How the transition nobody named reads in a picker, where an empty row would look like a bug. */
+const UNNAMED = '(unnamed)';
+
+/** The transitions at a state, both ways round – the only handle they have, since a transition
+ *  hangs on ports the canvas never draws and so cannot be clicked out there. */
+export function buildTransitionSection(
+  host: InspectorHost,
+  assetId: string,
+  node: GraphNode,
+  graph: Graph,
+): void {
+  const out = transitionsAt(graph, node.id, true);
+  const into = transitionsAt(graph, node.id, false);
+  group(host, assetId, graph, 'TRANSITIONS OUT', out, true);
+  group(host, assetId, graph, 'TRANSITIONS IN', into, false);
+  const duplicate = firstDuplicate(out.map((e) => e.label ?? ''));
+  if (duplicate !== null)
+    addNote(
+      host,
+      duplicate
+        ? `Two transitions out of here are called "${duplicate}" – neither will be taken.`
+        : 'Two transitions out of here are unnamed – neither will be taken.',
+      'warning',
+    );
+}
+
+/** Edges joining this state to another one, on the given side. */
+function transitionsAt(graph: Graph, nodeId: string, outgoing: boolean): GraphEdge[] {
+  return graph.edges.filter((e) => {
+    const [mine, other] = outgoing ? [e.from.node, e.to.node] : [e.to.node, e.from.node];
+    const far = findNode(graph, other);
+    return mine === nodeId && far !== undefined && isStateNode(far);
+  });
+}
+
+/** The first name that appears twice, or null. An empty name counts: it is the unnamed transition. */
+function firstDuplicate(names: readonly string[]): string | null {
+  const seen = new Set<string>();
+  for (const name of names) {
+    if (seen.has(name)) return name;
+    seen.add(name);
+  }
+  return null;
+}
+
+function group(
+  host: InspectorHost,
+  assetId: string,
+  graph: Graph,
+  title: string,
+  edges: readonly GraphEdge[],
+  outgoing: boolean,
+): void {
+  addTitle(host, title);
+  if (edges.length === 0) {
+    addNote(host, outgoing ? 'Nothing leads out of this state yet.' : 'Nothing leads here yet.');
+    return;
+  }
+  for (const edge of edges) {
+    const far = findNode(graph, outgoing ? edge.to.node : edge.from.node);
+    const row = new HStack({ gap: Theme.gap, align: 'center' });
+    row.minHeight = Theme.rowHeight;
+    row.add(new Label(outgoing ? '→' : '←', { style: 'muted' }));
+    row.add(new Label(far ? stateName(far) : '?', { style: 'muted' }));
+    row.add(new Spacer());
+    row.add(
+      new TextField(edge.label ?? '', {
+        width: NAME_WIDTH,
+        onChange: (next) => host.state.execute(new NameTransitionCommand(assetId, edge.id, next)),
+      }),
+    );
+    row.add(removeButton(() => host.state.execute(new DisconnectCommand(assetId, edge.id))));
+    host.body.add(row);
+  }
+}