Let the rows of a Variables node be dragged into a new order

The Variables and Properties nodes listed their picked rows in the
inspector, but unlike Start, End and struct rows they could not be
reordered. The drag dots also sat right on the edge of the row and
touched the kind mark.

- buildPickedPortSection gathers each row with its warning line as one
  block and hands the blocks to sortBlocks. A move reorders the ports
  on the node and is one undo step. Properties uses the same section
  and gains the same reordering.
- Grip draws the dots 3 px in from the left edge and moves the kind
  mark 3 px clear of them (DOTS_PAD). The column keeps its width, so
  the name fields do not shift. Rows without dots are unchanged.

Tests:
- block-drag, reorder, variable-choices: 3 files, 13 tests, all green.
  block-drag now expects the mark 11 px in with dots, 0 without.
- e2e 23 on melektaus-atx: ALL PASSED, 32 checks (+3 for dragging vy
  before vx and undoing it). It ran before the padding change, which
  touches no checks there.
- The gate did not run before this commit.

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

src/editor/inspector/portSection.ts

@@ -53,7 +53,7 @@ import {
   type Widget,
 } from '../../ui';
 import { NAME_WIDTH, removeButton } from './fieldFactory';
-import { addNote, type InspectorHost, sectionHeader } from './host';
+import { addedRows, addNote, type InspectorHost, sectionHeader } from './host';
 import { kindMenu, markLabel } from './variableRows';
 
 /** Whose declarations a Variables node picks its ports from: the asset it names, else the behavior. */
@@ -188,17 +188,15 @@ function buildPickedPortSection(
   if (!custom && choices.length === 0 && empty) addNote(host, empty);
   else if (ports.length === 0) addNote(host, `No ${plural} picked yet. Each one adds a port.`);
 
-  for (const port of ports) {
+  const pickedRow = (port: DeclaredPort): Grip => {
     // A machine a variable holds is a running value; which one its states come from is picked here.
     const carries = noun === 'Variable' && port.kind === 'statemachine';
     const toggle = [
       ...(carries ? [machinePick(host, assetId, node, port)] : []),
       ...writeToggle(host, assetId, node, port),
     ];
-    if (custom) {
-      portRow(host, assetId, node, port, portNameField(host, assetId, node, port), toggle);
-      continue;
-    }
+    if (custom)
+      return portRow(host, assetId, node, port, portNameField(host, assetId, node, port), toggle).grip;
     const def = choices.find((d) => d.key === port.key);
     const known = def !== undefined && isPortOf(port, def);
     const choose = new Dropdown(port.key, { variant: known ? 'default' : 'danger' });
@@ -208,9 +206,23 @@ function buildPickedPortSection(
       );
       new Menu(items, { searchable }).openBelow(choose);
     };
-    portRow(host, assetId, node, def && known ? { ...port, kind: portKindOf(def) } : port, choose, toggle);
+    const row = portRow(
+      host,
+      assetId,
+      node,
+      def && known ? { ...port, kind: portKindOf(def) } : port,
+      choose,
+      toggle,
+    );
     if (!known) addNote(host, `"${port.key}" is not a ${noun.toLowerCase()} of ${owner}.`, 'warning');
-  }
+    return row.grip;
+  };
+  // The order of the ports is the order on the node; a warning goes along with the row it is about.
+  const blocks = ports.map((port) => {
+    const { rows, built } = addedRows(host, () => pickedRow(port));
+    return { grip: built, rows };
+  });
+  sortBlocks(blocks, (from, to) => host.state.execute(new MovePortCommand(assetId, node.id, from, to)));
 }
 
 /**