@dxos/plugin-illustrator 0.10.0 → 0.11.1

package/src/model/builder.ts

@@ -3,39 +3,47 @@
 //
 
 //
-// Renderer-neutral builder contract: each canvas variant (tldraw, excalidraw, …) implements
-// `SketchBuilder` to compile the scene DSL onto its concrete records and derive the scene back
+// Renderer-neutral builder contract: each variant (tldraw, excalidraw, …) implements
+// `DrawingBuilder` to compile the scene DSL onto its canvas records and derive the scene back
 // from them. Implementations are contributed via `IllustratorCapabilities.VariantProvider`.
 //
 
-import { type Obj } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
 
+import * as Drawing from '../types/Drawing';
+import { type ApplyResult, type ContentHandler, type ContentMap, type ReadResult, applyCommands } from './content';
 import type * as Scene from './scene';
 
-/** A world object as derived from the canvas: placement is always resolved. */
-export type ReadWorldObject = Scene.WorldObject & { origin: Scene.Point; scale: number };
-
-export type ReadResult = {
-  scene: { objects: ReadWorldObject[] };
-  /** Shapes on the canvas not managed by the DSL (hand-drawn by users). */
-  unmanaged: number;
-};
-
-export type ApplyResult = {
-  /** Object ids created or modified. */
-  upserted: string[];
-  /** Shape records removed. */
-  removed: number;
-};
-
 /**
- * Maps the scene DSL onto a renderer-specific canvas object.
- * Geometry is derived from the live canvas records — not a stored copy — so the model stays
- * coherent after users drag or resize shapes in the renderer's UI.
+ * Maps the scene DSL onto a canvas. Geometry is derived from the live records — not a stored
+ * copy — so the model stays coherent after users drag or resize shapes in the renderer's UI.
  */
-export type SketchBuilder = {
+export type DrawingBuilder = {
+  /** Renderer dialect this builder handles; matched against `Canvas.schema`. */
+  readonly schema: string;
   /** Derive the neutral scene from the canvas. */
-  read: (canvas: Obj.Any) => ReadResult;
-  /** Apply a batch of edit commands atomically (implementations wrap their own `Obj.update`). */
-  apply: (canvas: Obj.Any, commands: readonly Scene.Command[]) => ApplyResult;
+  read: (canvas: Drawing.Canvas) => ReadResult;
+  /** Apply a batch of edit commands atomically. */
+  apply: (canvas: Drawing.Canvas, commands: readonly Scene.Command[]) => ApplyResult;
 };
+
+/**
+ * Builds a {@link DrawingBuilder} from the renderer's {@link ContentHandler}, so a variant only
+ * supplies its record encoding and inherits the ECHO write semantics and command bookkeeping.
+ */
+export const makeBuilder = ({ schema, handler }: { schema: string; handler: ContentHandler }): DrawingBuilder => ({
+  schema,
+  read: (canvas) => {
+    invariant(Obj.instanceOf(Drawing.Canvas, canvas));
+    return handler.read(canvas.content);
+  },
+  apply: (canvas, commands) => {
+    invariant(Obj.instanceOf(Drawing.Canvas, canvas));
+    let result: ApplyResult = { upserted: [], removed: 0 };
+    Obj.update(canvas, (canvas) => {
+      result = applyCommands(canvas.content as ContentMap, commands, handler);
+    });
+    return result;
+  },
+});

package/src/model/content.ts

@@ -0,0 +1,180 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+//
+// Renderer-neutral command application over a canvas content map. Every renderer stores its
+// canvas as `Record<recordId, record>` and stamps DSL identity onto each managed record, so the
+// upsert/remove/move bookkeeping is identical; only the encoding differs. Renderers supply that
+// encoding via `ContentHandler` and inherit the command semantics.
+//
+
+import { invariant } from '@dxos/invariant';
+
+import type * as Scene from './scene';
+
+/** Opaque map of record id → renderer record. */
+export type ContentMap = Record<string, any>;
+
+/** DSL identity stamped onto a managed record. */
+export type Identity = {
+  object: string;
+  element: string;
+  /** Set on companion records that belong to an element rather than being one (e.g. arrow labels). */
+  part?: string;
+};
+
+/** Where an object sits on the canvas: `canvas = origin + local * scale`. */
+export type Placement = {
+  origin: Scene.Point;
+  scale: number;
+};
+
+/** An object as accepted by the renderer's compiler; `upsert-elements` supplies only a subset. */
+export type ObjectInput = Scene.WorldObject | { id: string; elements: readonly Scene.Element[] };
+
+/** A world object as derived from the canvas: placement is always resolved. */
+export type ReadWorldObject = Scene.WorldObject & Placement;
+
+export type ReadResult = {
+  scene: { objects: ReadWorldObject[] };
+  /** Records on the canvas not managed by the DSL (drawn by hand). */
+  unmanaged: number;
+};
+
+export type ApplyResult = {
+  /** Object ids created or modified. */
+  upserted: string[];
+  /** Records removed. */
+  removed: number;
+};
+
+/**
+ * The renderer-specific half of command application: how records carry identity, how objects
+ * compile to records, and any bookkeeping the renderer's store requires.
+ */
+export type ContentHandler = {
+  /** DSL identity for a record, or undefined when the record isn't managed by the DSL. */
+  identify: (record: any) => Identity | undefined;
+  /** Compile an object's elements into records keyed by record id. */
+  render: (object: ObjectInput, placement: Placement, content: ContentMap) => ContentMap;
+  /** Derive the scene from the content map. */
+  read: (content: ContentMap) => ReadResult;
+  /** Translate an object move into a per-record mutation. */
+  translate: (record: any, delta: Scene.Point) => void;
+  /** Create any scaffolding the renderer needs before its first record (e.g. a page). */
+  scaffold?: (content: ContentMap) => void;
+  /** Merge compiled records into the content map; defaults to a plain assign. */
+  merge?: (content: ContentMap, records: ContentMap) => void;
+  /** Clean up after deletions (e.g. drop bindings left dangling). */
+  prune?: (content: ContentMap) => void;
+};
+
+/** Apply a batch of edit commands to the canvas content (mutates `content`). */
+export const applyCommands = (
+  content: ContentMap,
+  commands: readonly Scene.Command[],
+  handler: ContentHandler,
+): ApplyResult => {
+  handler.scaffold?.(content);
+  const upserted = new Set<string>();
+  let removed = 0;
+
+  const find = (objectId: string) => handler.read(content).scene.objects.find((object) => object.id === objectId);
+
+  const merge = (object: ObjectInput, placement: Placement) => {
+    const records = handler.render(object, placement, content);
+    if (handler.merge) {
+      handler.merge(content, records);
+    } else {
+      Object.assign(content, records);
+    }
+  };
+
+  // Companion records (labels) are deleted alongside their element but aren't themselves
+  // elements, so they don't count toward the reported total.
+  const remove = (predicate: (identity: Identity) => boolean): number => {
+    let count = 0;
+    for (const [key, record] of Object.entries(content)) {
+      const identity = handler.identify(record);
+      if (identity && predicate(identity)) {
+        // Read before delete: ECHO proxies dereference lazily, so fields vanish once removed.
+        const isPart = identity.part !== undefined;
+        delete content[key];
+        if (!isPart) {
+          count++;
+        }
+      }
+    }
+    handler.prune?.(content);
+    return count;
+  };
+
+  for (const command of commands) {
+    switch (command.op) {
+      case 'upsert-object': {
+        const previous = find(command.object.id);
+        removed += remove((identity) => identity.object === command.object.id);
+        merge(command.object, {
+          origin: command.object.origin ?? previous?.origin ?? { x: 0, y: 0 },
+          scale: command.object.scale ?? previous?.scale ?? 1,
+        });
+        upserted.add(command.object.id);
+        break;
+      }
+
+      case 'upsert-elements': {
+        const previous = find(command.objectId);
+        invariant(previous, `unknown object: ${command.objectId} (use upsert-object to create it)`);
+        const ids = new Set(command.elements.map((element) => element.id));
+        removed += remove((identity) => identity.object === command.objectId && ids.has(identity.element));
+        merge({ id: command.objectId, elements: command.elements }, previous);
+        upserted.add(command.objectId);
+        break;
+      }
+
+      case 'remove-elements': {
+        const ids = new Set(command.elementIds);
+        removed += remove((identity) => identity.object === command.objectId && ids.has(identity.element));
+        break;
+      }
+
+      case 'remove-object': {
+        removed += remove((identity) => identity.object === command.objectId);
+        break;
+      }
+
+      case 'move-object': {
+        const previous = find(command.objectId);
+        invariant(previous, `unknown object: ${command.objectId}`);
+        const delta = { x: command.origin.x - previous.origin.x, y: command.origin.y - previous.origin.y };
+        for (const record of Object.values(content)) {
+          if (handler.identify(record)?.object === command.objectId) {
+            handler.translate(record, delta);
+          }
+        }
+        upserted.add(command.objectId);
+        break;
+      }
+    }
+  }
+
+  return { upserted: [...upserted], removed };
+};
+
+/** Seed a fractional-index counter past any existing `a<n>` indexes. */
+export const nextIndex = (content: ContentMap, isCounted: (record: any) => boolean = () => true): number => {
+  let max = 0;
+  let count = 0;
+  for (const record of Object.values(content)) {
+    if (!record || !isCounted(record)) {
+      continue;
+    }
+    count++;
+    const match = /^a(\d+)$/.exec(record.index ?? '');
+    if (match) {
+      max = Math.max(max, Number(match[1]));
+    }
+  }
+  return Math.max(max, count);
+};

package/src/model/index.ts

@@ -3,5 +3,7 @@
 //
 
 export * from './builder';
+export * from './content';
 export * from './dialect';
+export * as Mermaid from './mermaid';
 export * as Scene from './scene';

package/src/model/mermaid.test.ts

@@ -0,0 +1,116 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { compile, parse } from './mermaid';
+import type * as Scene from './scene';
+
+/** Exercises node declarations, a labelled-blank subgraph, fan-out, and a `C <-> Y` cycle. */
+export const FLOWCHART = `
+flowchart TB
+    X[X]
+
+    subgraph CORE[" "]
+        A[A]
+        B[B]
+        C[C]
+
+        A --> B
+        A --> C
+    end
+
+    Y[Y]
+
+    X --> A
+    X --> B
+    X --> C
+    C --> Y
+    Y --> C
+`;
+
+const objectsOf = (commands: Scene.Command[]) =>
+  commands.flatMap((command) => (command.op === 'upsert-object' ? [command.object] : []));
+
+describe('mermaid', () => {
+  test('parses nodes, subgraph membership and edges', ({ expect }) => {
+    const graph = parse(FLOWCHART);
+
+    expect(graph.direction).toBe('TB');
+    expect(graph.nodes.map((node) => node.id).sort()).toEqual(['A', 'B', 'C', 'X', 'Y']);
+    expect(graph.groups.map((group) => group.id)).toEqual(['CORE']);
+    expect(graph.groups[0].children.sort()).toEqual(['A', 'B', 'C']);
+    // Nodes declared outside the subgraph carry no group.
+    expect(graph.nodes.find((node) => node.id === 'X')?.group).toBeUndefined();
+    expect(graph.nodes.find((node) => node.id === 'A')?.group).toBe('CORE');
+    expect(graph.edges.map((edge) => `${edge.from}->${edge.to}`)).toEqual([
+      'A->B',
+      'A->C',
+      'X->A',
+      'X->B',
+      'X->C',
+      'C->Y',
+      'Y->C',
+    ]);
+  });
+
+  test('compiles to one object per node plus a frame and an edge object', ({ expect }) => {
+    const objects = objectsOf(compile(FLOWCHART));
+
+    expect(objects.map((object) => object.id)).toEqual(['CORE', 'X', 'A', 'B', 'C', 'Y', 'edges']);
+    // Every node is a single labelled box; the label is the mermaid text, not the id.
+    for (const id of ['X', 'A', 'B', 'C', 'Y']) {
+      const [element] = objects.find((object) => object.id === id)!.elements;
+      expect(element).toMatchObject({ kind: 'rect', id: 'box', text: id });
+    }
+    // The blank subgraph label yields a frame with no text.
+    const frame = objects.find((object) => object.id === 'CORE')!.elements[0];
+    expect(frame).toMatchObject({ kind: 'rect', id: 'frame', stroke: 'dashed' });
+    expect(frame).not.toHaveProperty('text');
+  });
+
+  test('ranks nodes by longest path and breaks the C/Y cycle', ({ expect }) => {
+    const objects = objectsOf(compile(FLOWCHART));
+    const y = (id: string) => objects.find((object) => object.id === id)!.origin!.y;
+
+    // X feeds everything, so it leads; B and C sit past A because the longest path wins over the
+    // direct X edge. `Y --> C` is a back edge and must not push C below Y.
+    expect(y('X')).toBeLessThan(y('A'));
+    expect(y('A')).toBeLessThan(y('B'));
+    expect(y('A')).toBeLessThan(y('C'));
+    expect(y('B')).toBe(y('C'));
+    expect(y('C')).toBeLessThan(y('Y'));
+  });
+
+  test('binds arrows to node boxes, including both directions of the cycle', ({ expect }) => {
+    const edges = objectsOf(compile(FLOWCHART)).find((object) => object.id === 'edges')!;
+    const refs = edges.elements.map((element) => (element.kind === 'arrow' ? `${element.from}->${element.to}` : ''));
+
+    expect(refs).toContain('C/box->Y/box');
+    expect(refs).toContain('Y/box->C/box');
+    expect(edges.elements.every((element) => element.kind === 'arrow')).toBe(true);
+  });
+
+  test('frame encloses its members', ({ expect }) => {
+    const objects = objectsOf(compile(FLOWCHART));
+    const core = objects.find((object) => object.id === 'CORE')!;
+    const frame = core.elements[0] as Scene.Box;
+
+    for (const id of ['A', 'B', 'C']) {
+      const node = objects.find((object) => object.id === id)!;
+      expect(node.origin!.x).toBeGreaterThanOrEqual(core.origin!.x);
+      expect(node.origin!.y).toBeGreaterThanOrEqual(core.origin!.y);
+      expect(node.origin!.x).toBeLessThanOrEqual(core.origin!.x + frame.w);
+      expect(node.origin!.y).toBeLessThanOrEqual(core.origin!.y + frame.h);
+    }
+  });
+
+  test('ignores comments and tolerates unknown syntax', ({ expect }) => {
+    const graph = parse(['flowchart LR', '%% a comment', 'A[A]', 'A --> B', 'click A callback'].join('\n'));
+
+    expect(graph.direction).toBe('LR');
+    expect(graph.nodes.map((node) => node.id)).toEqual(['A', 'B']);
+    expect(graph.edges).toEqual([{ from: 'A', to: 'B' }]);
+  });
+});

package/src/model/mermaid.ts

@@ -0,0 +1,299 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+//
+// Mermaid flowchart dialect: parses the subset needed for block diagrams (node declarations,
+// subgraphs, directed edges) and compiles it to scene commands with a layered layout. Mermaid
+// carries no coordinates, so the dialect owns placement — see `dialect.ts` for the contract.
+//
+
+import type * as Scene from './scene';
+
+export type Direction = 'TB' | 'BT' | 'LR' | 'RL';
+
+export type MermaidNode = {
+  id: string;
+  label: string;
+  /** Enclosing subgraph id, when declared inside one. */
+  group?: string;
+};
+
+export type MermaidGroup = {
+  id: string;
+  label: string;
+  children: string[];
+};
+
+export type MermaidEdge = {
+  from: string;
+  to: string;
+  label?: string;
+};
+
+export type MermaidGraph = {
+  direction: Direction;
+  nodes: MermaidNode[];
+  groups: MermaidGroup[];
+  edges: MermaidEdge[];
+};
+
+const DIRECTIONS: Direction[] = ['TB', 'BT', 'LR', 'RL'];
+
+// `A[Label]`, `A(Label)`, `A{Label}` or a bare `A`.
+const NODE = /^([A-Za-z0-9_-]+)(?:\[(.*?)\]|\((.*?)\)|\{(.*?)\})?$/;
+// `A --> B`, `A-->|label|B`, `A --- B`.
+const EDGE = /^(.+?)\s*(-->|---|-\.->|==>)\s*(?:\|(.*?)\|\s*)?(.+)$/;
+const SUBGRAPH = /^subgraph\s+([A-Za-z0-9_-]+)(?:\s*\[(.*?)\])?\s*$/;
+
+const unquote = (value: string) => value.trim().replace(/^"(.*)"$/, '$1');
+
+/** Parse a mermaid flowchart into a neutral graph. Unrecognised lines are ignored. */
+export const parse = (source: string): MermaidGraph => {
+  const nodes = new Map<string, MermaidNode>();
+  const groups: MermaidGroup[] = [];
+  const edges: MermaidEdge[] = [];
+  let direction: Direction = 'TB';
+  const stack: string[] = [];
+
+  const declare = (token: string): string | undefined => {
+    const match = NODE.exec(token.trim());
+    if (!match) {
+      return undefined;
+    }
+    const [, id, square, round, curly] = match;
+    const label = unquote(square ?? round ?? curly ?? id);
+    const group = stack[stack.length - 1];
+    const existing = nodes.get(id);
+    if (existing) {
+      // A later declaration with an explicit label wins; the first mention fixes the group.
+      if (square ?? round ?? curly) {
+        existing.label = label;
+      }
+      return id;
+    }
+    nodes.set(id, { id, label, ...(group ? { group } : {}) });
+    if (group) {
+      groups.find((entry) => entry.id === group)?.children.push(id);
+    }
+    return id;
+  };
+
+  for (const raw of source.split('\n')) {
+    const line = raw.trim();
+    if (!line || line.startsWith('%%')) {
+      continue;
+    }
+
+    const header = /^(?:flowchart|graph)\s+([A-Za-z]{2})$/.exec(line);
+    if (header) {
+      const value = header[1].toUpperCase() as Direction;
+      direction = DIRECTIONS.includes(value) ? value : 'TB';
+      continue;
+    }
+
+    const subgraph = SUBGRAPH.exec(line);
+    if (subgraph) {
+      const [, id, label] = subgraph;
+      groups.push({ id, label: unquote(label ?? id), children: [] });
+      stack.push(id);
+      continue;
+    }
+
+    if (line === 'end') {
+      stack.pop();
+      continue;
+    }
+
+    const edge = EDGE.exec(line);
+    if (edge) {
+      const [, from, , label, to] = edge;
+      const fromId = declare(from);
+      const toId = declare(to);
+      if (fromId && toId) {
+        edges.push({ from: fromId, to: toId, ...(label ? { label: unquote(label) } : {}) });
+      }
+      continue;
+    }
+
+    declare(line);
+  }
+
+  return { direction, nodes: [...nodes.values()], groups, edges };
+};
+
+/** Layout constants in scene units. */
+const NODE_W = 100;
+const NODE_H = 50;
+const GAP_MAIN = 60;
+const GAP_CROSS = 40;
+const GROUP_PAD = 24;
+
+/**
+ * Edges that close a cycle, found by DFS: an edge into a node still on the stack points backwards.
+ * Ranking ignores them, so `C --> Y --> C` ranks C by its forward predecessors alone instead of
+ * chasing the loop.
+ */
+const backEdges = (graph: MermaidGraph): Set<MermaidEdge> => {
+  const outgoing = new Map<string, MermaidEdge[]>();
+  for (const edge of graph.edges) {
+    outgoing.set(edge.from, [...(outgoing.get(edge.from) ?? []), edge]);
+  }
+
+  const back = new Set<MermaidEdge>();
+  const done = new Set<string>();
+  const onStack = new Set<string>();
+
+  const visit = (id: string) => {
+    onStack.add(id);
+    for (const edge of outgoing.get(id) ?? []) {
+      if (onStack.has(edge.to)) {
+        back.add(edge);
+      } else if (!done.has(edge.to)) {
+        visit(edge.to);
+      }
+    }
+    onStack.delete(id);
+    done.add(id);
+  };
+
+  // Roots first so the DFS classifies edges along the natural reading order of the diagram.
+  const targets = new Set(graph.edges.map((edge) => edge.to));
+  for (const node of graph.nodes) {
+    if (!targets.has(node.id) && !done.has(node.id)) {
+      visit(node.id);
+    }
+  }
+  for (const node of graph.nodes) {
+    if (!done.has(node.id)) {
+      visit(node.id);
+    }
+  }
+  return back;
+};
+
+/** Assign each node a rank one past its deepest forward predecessor. */
+const rank = (graph: MermaidGraph): Map<string, number> => {
+  const back = backEdges(graph);
+  const forward = graph.edges.filter((edge) => !back.has(edge));
+  const ranks = new Map(graph.nodes.map((node) => [node.id, 0]));
+  for (let pass = 0; pass < graph.nodes.length; pass++) {
+    let changed = false;
+    for (const edge of forward) {
+      const next = (ranks.get(edge.from) ?? 0) + 1;
+      if (next > (ranks.get(edge.to) ?? 0)) {
+        ranks.set(edge.to, next);
+        changed = true;
+      }
+    }
+    if (!changed) {
+      break;
+    }
+  }
+  return ranks;
+};
+
+export type CompileOptions = {
+  /** Canvas position of the diagram's top-left, in canvas px. */
+  origin?: Scene.Point;
+  /** Canvas px per scene unit. */
+  scale?: number;
+};
+
+/**
+ * Compile a mermaid flowchart into scene commands: one world object per node (element `box`),
+ * one per subgraph frame, and an `edges` object holding the connectors as bound arrows.
+ */
+export const compile = (source: string, options: CompileOptions = {}): Scene.Command[] => {
+  const graph = parse(source);
+  const { origin = { x: 0, y: 0 }, scale = 1 } = options;
+  const ranks = rank(graph);
+  const horizontal = graph.direction === 'LR' || graph.direction === 'RL';
+
+  // Group nodes by rank, preserving declaration order within each.
+  const lanes = new Map<number, MermaidNode[]>();
+  for (const node of graph.nodes) {
+    const value = ranks.get(node.id) ?? 0;
+    lanes.set(value, [...(lanes.get(value) ?? []), node]);
+  }
+  const widest = Math.max(...[...lanes.values()].map((lane) => lane.length), 1);
+
+  const positions = new Map<string, Scene.Point>();
+  for (const [lane, members] of lanes) {
+    const span = members.length * NODE_W + (members.length - 1) * GAP_CROSS;
+    const offset = (widest * NODE_W + (widest - 1) * GAP_CROSS - span) / 2;
+    members.forEach((node, index) => {
+      const cross = offset + index * (NODE_W + GAP_CROSS);
+      const main = lane * (NODE_H + GAP_MAIN);
+      positions.set(node.id, horizontal ? { x: main, y: cross } : { x: cross, y: main });
+    });
+  }
+
+  const commands: Scene.Command[] = [];
+
+  // Frames first so nodes paint above them.
+  for (const group of graph.groups) {
+    const members = group.children.map((id) => positions.get(id)).filter((point): point is Scene.Point => !!point);
+    if (members.length === 0) {
+      continue;
+    }
+    const minX = Math.min(...members.map((point) => point.x)) - GROUP_PAD;
+    const minY = Math.min(...members.map((point) => point.y)) - GROUP_PAD;
+    const maxX = Math.max(...members.map((point) => point.x)) + NODE_W + GROUP_PAD;
+    const maxY = Math.max(...members.map((point) => point.y)) + NODE_H + GROUP_PAD;
+    commands.push({
+      op: 'upsert-object',
+      object: {
+        id: group.id,
+        origin: { x: origin.x + minX * scale, y: origin.y + minY * scale },
+        scale,
+        elements: [
+          {
+            kind: 'rect',
+            id: 'frame',
+            x: 0,
+            y: 0,
+            w: maxX - minX,
+            h: maxY - minY,
+            stroke: 'dashed',
+            color: 'grey',
+            ...(group.label.trim() ? { text: group.label } : {}),
+          },
+        ],
+      },
+    });
+  }
+
+  for (const node of graph.nodes) {
+    const point = positions.get(node.id)!;
+    commands.push({
+      op: 'upsert-object',
+      object: {
+        id: node.id,
+        origin: { x: origin.x + point.x * scale, y: origin.y + point.y * scale },
+        scale,
+        elements: [{ kind: 'rect', id: 'box', x: 0, y: 0, w: NODE_W, h: NODE_H, text: node.label }],
+      },
+    });
+  }
+
+  if (graph.edges.length > 0) {
+    commands.push({
+      op: 'upsert-object',
+      object: {
+        id: 'edges',
+        origin,
+        scale,
+        elements: graph.edges.map((edge) => ({
+          kind: 'arrow' as const,
+          id: `${edge.from}-${edge.to}`,
+          from: `${edge.from}/box`,
+          to: `${edge.to}/box`,
+          ...(edge.label ? { text: edge.label } : {}),
+        })),
+      },
+    });
+  }
+
+  return commands;
+};