@mindlogic-ai/logician-ui 3.1.0-alpha.9 → 3.2.0-alpha.0

package/src/components/Workflow/graphReducer.ts

@@ -0,0 +1,196 @@
+import type { Graph, GraphEdge, GraphNode, Position } from './Workflow.types';
+
+export type GraphAction =
+  | { type: 'addNode'; node: GraphNode }
+  | {
+      /**
+       * Adds a node and, when `autoConnectFrom` is supplied, an edge from that
+       * source node into the new node — both in a single reducer transition so
+       * one undo step reverts the node and the auto-edge together.
+       */
+      type: 'addNodeWithEdge';
+      node: GraphNode;
+      autoConnectFrom: { edge: GraphEdge } | null;
+    }
+  | { type: 'updateNodePosition'; id: string; position: Position }
+  | {
+      /**
+       * Repositions many nodes in one transition — the one-click auto-arrange.
+       * Positions are precomputed by `autoLayout`; a node absent from the map
+       * keeps its current position. Unlike `replace` this is an in-place user
+       * edit, so it pushes a SINGLE undo step (and leaves the rest of the undo
+       * stack intact) rather than resetting history.
+       */
+      type: 'arrangeNodes';
+      positions: Record<string, Position>;
+    }
+  | {
+      type: 'updateNodeConfig';
+      id: string;
+      config: unknown;
+      /**
+       * Renames an output handle id on the node's outbound edges in the SAME
+       * transition. Some handle ids derive from mutable config (Classify:
+       * `cat_<name>`); moving the edge atomically keeps React Flow from pruning
+       * it as an orphan when the id changes.
+       */
+      remapEdgeHandle?: { from: string; to: string };
+    }
+  | { type: 'deleteNode'; id: string }
+  | { type: 'addEdge'; edge: GraphEdge }
+  | {
+      type: 'reconnectEdge';
+      id: string;
+      source: string;
+      target: string;
+      sourceHandle?: string;
+      targetHandle?: string;
+    }
+  | { type: 'deleteEdge'; id: string }
+  | {
+      /**
+       * Merges a partial patch into an edge by id (e.g. its `label`). Endpoint
+       * moves go through `reconnectEdge`; this is for non-structural fields so
+       * label edits stay undoable through `graphHistory`.
+       */
+      type: 'updateEdge';
+      id: string;
+      patch: Partial<Omit<GraphEdge, 'id'>>;
+    }
+  | { type: 'replace'; graph: Graph };
+
+/** Normalize null-vs-undefined for optional handle ids so dedupe works. */
+function normEdge(edge: GraphEdge): GraphEdge {
+  return {
+    ...edge,
+    sourceHandle: edge.sourceHandle ?? undefined,
+    targetHandle: edge.targetHandle ?? undefined,
+  };
+}
+
+function normGraph(graph: Graph): Graph {
+  return { ...graph, edges: graph.edges.map(normEdge) };
+}
+
+export function graphReducer(state: Graph, action: GraphAction): Graph {
+  switch (action.type) {
+    case 'addNode':
+      if (state.nodes.some((n) => n.id === action.node.id)) return state;
+      return { ...state, nodes: [...state.nodes, action.node] };
+
+    case 'addNodeWithEdge': {
+      if (state.nodes.some((n) => n.id === action.node.id)) return state;
+      const nodes = [...state.nodes, action.node];
+      if (!action.autoConnectFrom) return { ...state, nodes };
+      const edge = normEdge(action.autoConnectFrom.edge);
+      // The auto-edge is freshly generated and references a brand-new node id,
+      // so it can't collide; append it alongside the node.
+      return { nodes, edges: [...state.edges, edge] };
+    }
+
+    case 'updateNodePosition':
+      return {
+        ...state,
+        nodes: state.nodes.map((n) =>
+          n.id === action.id ? { ...n, position: action.position } : n
+        ),
+      };
+
+    case 'arrangeNodes': {
+      // Skip nodes that don't move so an arrange producing the current layout
+      // collapses to the same reference — `historyReducer` then treats it as a
+      // no-op and records no undo step.
+      let moved = false;
+      const nodes = state.nodes.map((n) => {
+        const next = action.positions[n.id];
+        if (!next || (next.x === n.position.x && next.y === n.position.y)) {
+          return n;
+        }
+        moved = true;
+        return { ...n, position: next };
+      });
+      return moved ? { ...state, nodes } : state;
+    }
+
+    case 'updateNodeConfig': {
+      const nodes = state.nodes.map((n) =>
+        n.id === action.id ? { ...n, config: action.config } : n
+      );
+      const remap = action.remapEdgeHandle;
+      if (!remap) return { ...state, nodes };
+      const edges = state.edges.map((e) =>
+        e.source === action.id && (e.sourceHandle ?? undefined) === remap.from
+          ? { ...e, sourceHandle: remap.to }
+          : e
+      );
+      return { ...state, nodes, edges };
+    }
+
+    case 'deleteNode':
+      return {
+        nodes: state.nodes.filter((n) => n.id !== action.id),
+        edges: state.edges.filter(
+          (e) => e.source !== action.id && e.target !== action.id
+        ),
+      };
+
+    case 'addEdge': {
+      const edge = normEdge(action.edge);
+      if (state.edges.some((e) => e.id === edge.id)) return state;
+      const dup = state.edges.some(
+        (e) =>
+          e.source === edge.source &&
+          (e.sourceHandle ?? undefined) === edge.sourceHandle &&
+          e.target === edge.target &&
+          (e.targetHandle ?? undefined) === edge.targetHandle
+      );
+      if (dup) return state;
+      return { ...state, edges: [...state.edges, edge] };
+    }
+
+    case 'reconnectEdge': {
+      const existing = state.edges.find((e) => e.id === action.id);
+      if (!existing) return state;
+      const next = normEdge({
+        ...existing,
+        source: action.source,
+        target: action.target,
+        sourceHandle: action.sourceHandle,
+        targetHandle: action.targetHandle,
+      });
+      // A reconnect can land on endpoints that already have an identical edge;
+      // isValidConnection doesn't dedupe, so guard here and no-op the move.
+      const dup = state.edges.some(
+        (e) =>
+          e.id !== next.id &&
+          e.source === next.source &&
+          (e.sourceHandle ?? undefined) === next.sourceHandle &&
+          e.target === next.target &&
+          (e.targetHandle ?? undefined) === next.targetHandle
+      );
+      if (dup) return state;
+      return {
+        ...state,
+        edges: state.edges.map((e) => (e.id === next.id ? next : e)),
+      };
+    }
+
+    case 'deleteEdge':
+      return { ...state, edges: state.edges.filter((e) => e.id !== action.id) };
+
+    case 'updateEdge': {
+      if (!state.edges.some((e) => e.id === action.id)) return state;
+      return {
+        ...state,
+        edges: state.edges.map((e) =>
+          e.id === action.id ? normEdge({ ...e, ...action.patch }) : e
+        ),
+      };
+    }
+
+    case 'replace':
+      return normGraph(action.graph);
+  }
+}
+
+export const emptyGraph: Graph = { nodes: [], edges: [] };

package/src/components/Workflow/index.ts

@@ -0,0 +1,74 @@
+export type { CollapsibleSectionProps } from './canvas/CollapsibleSection';
+export { CollapsibleSection } from './canvas/CollapsibleSection';
+export type { NodeInspectorProps } from './canvas/DrawerShell';
+export { NodeInspector } from './canvas/DrawerShell';
+export type {
+  FieldTone,
+  FieldToneState,
+  FieldWrapperProps,
+} from './canvas/FieldWrapper';
+export { FieldWrapper } from './canvas/FieldWrapper';
+export { FLOATING_CARD_WIDTH, FloatingCard } from './canvas/FloatingCard';
+export type {
+  CategoryTokenMap,
+  CategoryTokens,
+  IconTileProps,
+} from './canvas/IconTile';
+export {
+  DEFAULT_CATEGORY_TOKENS,
+  getCategoryTokens,
+  IconTile,
+} from './canvas/IconTile';
+export type { NodeShellProps, PortStyle, RingChrome } from './canvas/NodeShell';
+export {
+  CARD_WIDTH,
+  MAX_META_CHIPS,
+  metaChipStyles,
+  NodeShell,
+  PORT_STYLE,
+} from './canvas/NodeShell';
+export { workflowLabelProps } from './canvas/workflowLabelProps';
+export type { WorkflowGraphObserver } from './graphObserver';
+export {
+  useWorkflowGraphObserver,
+  WorkflowGraphObserverContext,
+} from './graphObserver';
+export type { GraphAction } from './graphReducer';
+export { emptyGraph, graphReducer } from './graphReducer';
+export { Workflow } from './Workflow';
+export type {
+  ConnectionCtx,
+  DockSide,
+  DrawerRenderProps,
+  EdgeDrawerRenderProps,
+  Graph,
+  GraphEdge,
+  GraphNode,
+  HandleDef,
+  Issue,
+  IssueSeverity,
+  JSONSchema,
+  MetaChipSpec,
+  MetaChipTone,
+  NodeCategory,
+  NodeRenderProps,
+  NodeTypeDef,
+  NodeTypeRegistry,
+  PlacementRule,
+  Position,
+  RunState,
+  WorkflowProps,
+  WorkflowSelection,
+  WorkflowTranslate,
+} from './Workflow.types';
+export { defineNodeType, resolveDefaultConfig } from './Workflow.types';
+export type {
+  EditorState,
+  WorkflowContextValue,
+  WorkflowProviderProps,
+} from './WorkflowContext';
+export {
+  useWorkflow,
+  useWorkflowTranslate,
+  WorkflowProvider,
+} from './WorkflowContext';

package/src/components/Workflow/layout/autoLayout.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it } from 'vitest';
+
+import type { Graph, GraphNode } from '../Workflow.types';
+import { autoLayout, estimateLabelOverhang } from './autoLayout';
+
+const node = (id: string): GraphNode => ({
+  id,
+  kind: 'x',
+  position: { x: 0, y: 0 },
+  config: {},
+});
+
+describe('autoLayout', () => {
+  it('lays a linear chain out left-to-right by rank', () => {
+    const graph: Graph = {
+      nodes: [node('a'), node('b'), node('c')],
+      edges: [
+        { id: 'e1', source: 'a', target: 'b' },
+        { id: 'e2', source: 'b', target: 'c' },
+      ],
+    };
+    const out = autoLayout(graph);
+    const x = (id: string) => out.nodes.find((n) => n.id === id)!.position.x;
+    // LR direction: each downstream node sits in a later (greater-x) rank.
+    expect(x('a')).toBeLessThan(x('b'));
+    expect(x('b')).toBeLessThan(x('c'));
+  });
+
+  it('places top-down when direction is TB', () => {
+    const graph: Graph = {
+      nodes: [node('a'), node('b')],
+      edges: [{ id: 'e1', source: 'a', target: 'b' }],
+    };
+    const out = autoLayout(graph, {}, { direction: 'TB' });
+    const y = (id: string) => out.nodes.find((n) => n.id === id)!.position.y;
+    expect(y('a')).toBeLessThan(y('b'));
+  });
+
+  it('is pure and deterministic — leaves the input graph untouched', () => {
+    const graph: Graph = {
+      nodes: [node('a'), node('b')],
+      edges: [{ id: 'e1', source: 'a', target: 'b' }],
+    };
+    const snapshot = JSON.stringify(graph);
+    const first = autoLayout(graph);
+    const second = autoLayout(graph);
+    expect(JSON.stringify(graph)).toBe(snapshot); // input not mutated
+    expect(first.nodes).toEqual(second.nodes); // same in → same out
+    expect(first).not.toBe(graph); // returns a fresh graph
+    expect(first.edges).toBe(graph.edges); // edges passed through untouched
+  });
+
+  it('positions disconnected nodes without overlapping them', () => {
+    const graph: Graph = {
+      nodes: [node('a'), node('b')],
+      edges: [],
+    };
+    const out = autoLayout(graph, {
+      a: { width: 100, height: 50 },
+      b: { width: 100, height: 50 },
+    });
+    const a = out.nodes.find((n) => n.id === 'a')!.position;
+    const b = out.nodes.find((n) => n.id === 'b')!.position;
+    expect(a).not.toEqual(b);
+  });
+
+  it('reserves trailing room so a downstream rank clears overflowing exit labels', () => {
+    const graph: Graph = {
+      nodes: [node('a'), node('b')],
+      edges: [{ id: 'e1', source: 'a', target: 'b' }],
+    };
+    const x = (g: Graph, id: string) =>
+      g.nodes.find((n) => n.id === id)!.position.x;
+
+    const tight = autoLayout(graph, { a: { width: 100, height: 50 } });
+    const padded = autoLayout(graph, {
+      a: { width: 100, height: 50, trailing: 120 },
+    });
+
+    // The reserved label room sits on a's trailing edge, so its left edge is
+    // unchanged but the next rank is pushed right to clear the labels.
+    expect(x(padded, 'a')).toBe(x(tight, 'a'));
+    expect(x(padded, 'b')).toBeGreaterThan(x(tight, 'b'));
+  });
+
+  describe('estimateLabelOverhang', () => {
+    it('reserves nothing when there are no labels', () => {
+      expect(estimateLabelOverhang([])).toBe(0);
+      expect(estimateLabelOverhang(['', ''])).toBe(0);
+    });
+
+    it('grows with the longest label', () => {
+      expect(estimateLabelOverhang(['refund'])).toBeLessThan(
+        estimateLabelOverhang(['refund', 'a much longer category name'])
+      );
+    });
+  });
+
+  it('lays a fan-out node out in exit order — first exit on top, last on the bottom', () => {
+    // `outputOrder` says A paints exits h0, h1, h2 top-to-bottom. The edges are
+    // wired in a different order (the author connected the last exit first) to
+    // prove the layout follows exit order, not wiring order.
+    const graph: Graph = {
+      nodes: [node('a'), node('c1'), node('c2'), node('c3')],
+      edges: [
+        { id: 'e3', source: 'a', target: 'c3', sourceHandle: 'h2' },
+        { id: 'e1', source: 'a', target: 'c1', sourceHandle: 'h0' },
+        { id: 'e2', source: 'a', target: 'c2', sourceHandle: 'h1' },
+      ],
+    };
+    const out = autoLayout(
+      graph,
+      {},
+      { outputOrder: { a: ['h0', 'h1', 'h2'] } }
+    );
+    const y = (id: string) => out.nodes.find((n) => n.id === id)!.position.y;
+    // First exit's child sits above the second's, which sits above the third's.
+    expect(y('c1')).toBeLessThan(y('c2'));
+    expect(y('c2')).toBeLessThan(y('c3'));
+  });
+
+  it('sorts only the source it knows the exit order of, leaving other edges in place', () => {
+    // `a` is a fan-out we know the exit order of; `b`'s edges are interleaved
+    // among `a`'s and have no exit order. Only `a`'s children should be
+    // reordered — `b`'s must keep the slots they held in `graph.edges`, so the
+    // fallback path isn't perturbed by `a`'s reordering.
+    const graph: Graph = {
+      nodes: [node('a'), node('b'), node('a1'), node('a2'), node('b1')],
+      edges: [
+        { id: 'ea2', source: 'a', target: 'a2', sourceHandle: 'h1' },
+        { id: 'eb1', source: 'b', target: 'b1' },
+        { id: 'ea1', source: 'a', target: 'a1', sourceHandle: 'h0' },
+      ],
+    };
+    const out = autoLayout(graph, {}, { outputOrder: { a: ['h0', 'h1'] } });
+    const y = (id: string) => out.nodes.find((n) => n.id === id)!.position.y;
+    // a's first exit sits above its second despite being wired second.
+    expect(y('a1')).toBeLessThan(y('a2'));
+    // Every node still gets a distinct slot.
+    expect(new Set(['a1', 'a2', 'b1'].map(y)).size).toBe(3);
+  });
+
+  it('falls back to edge order when no exit order is given for the source', () => {
+    // Without `outputOrder` the layout can only honor wiring order, but it must
+    // still place every child and never collapse them onto one another.
+    const graph: Graph = {
+      nodes: [node('a'), node('c1'), node('c2'), node('c3')],
+      edges: [
+        { id: 'e1', source: 'a', target: 'c1', sourceHandle: 'h0' },
+        { id: 'e2', source: 'a', target: 'c2', sourceHandle: 'h1' },
+        { id: 'e3', source: 'a', target: 'c3', sourceHandle: 'h2' },
+      ],
+    };
+    const out = autoLayout(graph);
+    const ys = ['c1', 'c2', 'c3'].map(
+      (id) => out.nodes.find((n) => n.id === id)!.position.y
+    );
+    expect(new Set(ys).size).toBe(3);
+  });
+
+  it('ignores edges that reference an unknown node', () => {
+    const graph: Graph = {
+      nodes: [node('a')],
+      edges: [{ id: 'e1', source: 'a', target: 'ghost' }],
+    };
+    const out = autoLayout(graph);
+    expect(out.nodes).toHaveLength(1);
+    expect(out.nodes[0].id).toBe('a');
+  });
+});

package/src/components/Workflow/layout/autoLayout.ts

@@ -0,0 +1,200 @@
+import { graphlib, layout } from '@dagrejs/dagre';
+
+import { CARD_WIDTH } from '../canvas/NodeShell/NodeShell.styles';
+import type { Graph, Position } from '../Workflow.types';
+
+/**
+ * Flow axis of the laid-out graph. `LR` (the default) lays ranks out
+ * left-to-right, matching the way a workflow reads: trigger → steps → output.
+ */
+export type LayoutDirection = 'LR' | 'TB';
+
+/** Rendered footprint of a node, used so ranks don't overlap. */
+export type NodeDimensions = {
+  width: number;
+  height: number;
+  /**
+   * Extra room (px) to reserve on the node's trailing (downstream) edge for
+   * content that overflows the card — specifically the exit labels a Classify /
+   * If-Else node paints to the right of its handles. These are absolutely
+   * positioned, so React Flow's measured `width` excludes them; without this
+   * the next rank packs right up against the node and the edges leaving those
+   * exits get tucked under the label text. See `estimateLabelOverhang`.
+   */
+  trailing?: number;
+};
+
+/**
+ * Roughly how wide (px) the longest of a node's exit labels renders, so the
+ * layout can reserve trailing room for it. The label is absolutely positioned
+ * and not in the layout pass, so we approximate from text length rather than
+ * measure: a per-glyph width plus the label's inset from the node edge. Korean
+ * glyphs are near full-width, so we size for the wider case to stay safe.
+ */
+const LABEL_GLYPH_PX = 8;
+const LABEL_INSET_PX = 18;
+
+export function estimateLabelOverhang(labels: string[]): number {
+  const longest = labels.reduce((max, label) => Math.max(max, label.length), 0);
+  return longest === 0 ? 0 : LABEL_INSET_PX + longest * LABEL_GLYPH_PX;
+}
+
+export type AutoLayoutOptions = {
+  direction?: LayoutDirection;
+  /** Gap between adjacent ranks (along the flow axis). */
+  rankGap?: number;
+  /** Gap between sibling nodes within a rank (the cross axis). */
+  nodeGap?: number;
+  /**
+   * Per-node order of output handles, keyed by node id — the ordered list of
+   * `HandleDef.id`s a node paints top-to-bottom (e.g. a Classify node's
+   * categories). Used to lay a node's downstream children out in the same order
+   * its exits read, so the child wired to the first exit sits above the one
+   * wired to the last (see `orderEdgesForDagre`). Nodes absent from the map (or
+   * edges with no `sourceHandle`) keep their order in `graph.edges`.
+   */
+  outputOrder?: Record<string, readonly string[]>;
+};
+
+/**
+ * Order `edges` for insertion into dagre so a fan-out node's children come out
+ * in exit order — first exit on top, last on the bottom.
+ *
+ * dagre derives a rank's initial vertical order from a DFS that pushes each
+ * node's successors in *edge-insertion order*, and the first-pushed sibling
+ * lands at the BOTTOM (largest cross-axis coordinate). Left to the raw
+ * `graph.edges` order — which is just whenever the author happened to wire each
+ * exit — that yields criss-crossed edges: the first exit's child gets sent to
+ * the bottom and the last exit's to the top.
+ *
+ * So for each source we know the exit order of, we reorder ITS edges in REVERSE
+ * exit order to cancel dagre's reversal. Every other edge — a source with no
+ * known exit order, or fewer than two edges — keeps its exact slot in
+ * `graph.edges`, so the documented fallback path doesn't perturb the layout.
+ * Stable: ties (e.g. two edges off one exit) preserve input order.
+ */
+function orderEdgesForDagre(
+  edges: Graph['edges'],
+  outputOrder: Record<string, readonly string[]>
+): Graph['edges'] {
+  // Collect, per source we can sort, that source's edges in REVERSE exit order.
+  const sortedBySource = new Map<string, Graph['edges']>();
+  for (const edge of edges) {
+    if (!outputOrder[edge.source]) continue;
+    const group = sortedBySource.get(edge.source);
+    if (group) group.push(edge);
+    else sortedBySource.set(edge.source, [edge]);
+  }
+  for (const [source, group] of sortedBySource) {
+    const order = outputOrder[source];
+    if (group.length < 2) {
+      sortedBySource.delete(source);
+      continue;
+    }
+    const exitIndex = (handle: string | undefined): number => {
+      // An undefined handle denotes the first output (matches the
+      // `resolveHandle` convention in connectionRules), so it ranks as exit 0.
+      const i = order.indexOf(handle ?? order[0]);
+      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+    };
+    // Stable sort keeps ties (e.g. two edges off one exit) in input order.
+    group.sort((a, b) => exitIndex(b.sourceHandle) - exitIndex(a.sourceHandle));
+  }
+
+  // Nothing to reorder — hand back the original array untouched.
+  if (sortedBySource.size === 0) return edges;
+
+  // Replay `graph.edges` in place, drawing each sortable source's edges from
+  // its reordered queue so only those slots change and all others stay put.
+  const cursor = new Map<string, number>();
+  return edges.map((edge) => {
+    const group = sortedBySource.get(edge.source);
+    if (!group) return edge;
+    const i = cursor.get(edge.source) ?? 0;
+    cursor.set(edge.source, i + 1);
+    return group[i];
+  });
+}
+
+/**
+ * Footprint assumed for a node we have no measured size for — e.g. one added
+ * but not yet rendered. Width tracks the fixed node-card width (`CARD_WIDTH`);
+ * height is a typical two-row card. Callers should pass real measured sizes
+ * when available so ranks pack tightly.
+ */
+const FALLBACK_WIDTH = parseInt(CARD_WIDTH, 10);
+const FALLBACK_HEIGHT = 76;
+
+const DEFAULT_RANK_GAP = 80;
+const DEFAULT_NODE_GAP = 40;
+
+/**
+ * Compute a tidy, hierarchical layout for a workflow graph and return a new
+ * `Graph` with every node's `position` recomputed (edges untouched). Pure and
+ * deterministic — same graph + dimensions in, same positions out — so it's
+ * safe to dispatch through the reducer and to snapshot in tests.
+ *
+ * `dimensions` maps node id → measured size; missing entries fall back to the
+ * node-card defaults. Disconnected nodes are placed by dagre in the first rank
+ * (never overlapping, thanks to `nodesep`).
+ */
+export function autoLayout(
+  graph: Graph,
+  dimensions: Record<string, NodeDimensions> = {},
+  options: AutoLayoutOptions = {}
+): Graph {
+  const {
+    direction = 'LR',
+    rankGap = DEFAULT_RANK_GAP,
+    nodeGap = DEFAULT_NODE_GAP,
+    outputOrder = {},
+  } = options;
+
+  // Footprint dagre lays out with: the real card height, and a width padded by
+  // any trailing exit-label overhang so the next rank clears it. We keep the
+  // node left-aligned within that padded box (see the offset below) so the
+  // reserved space lands on the trailing edge, where the labels actually are.
+  const footprintOf = (id: string): NodeDimensions => {
+    const d = dimensions[id];
+    return {
+      width: (d?.width ?? FALLBACK_WIDTH) + (d?.trailing ?? 0),
+      height: d?.height ?? FALLBACK_HEIGHT,
+    };
+  };
+
+  const g = new graphlib.Graph();
+  g.setGraph({ rankdir: direction, ranksep: rankGap, nodesep: nodeGap });
+  // dagre requires an edge-label factory even when we attach no labels.
+  g.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of graph.nodes) {
+    g.setNode(node.id, footprintOf(node.id));
+  }
+  for (const edge of orderEdgesForDagre(graph.edges, outputOrder)) {
+    // Guard against edges that reference a pruned node so dagre doesn't
+    // implicitly create a zero-size node for the dangling endpoint.
+    if (g.hasNode(edge.source) && g.hasNode(edge.target)) {
+      g.setEdge(edge.source, edge.target);
+    }
+  }
+
+  layout(g);
+
+  return {
+    ...graph,
+    nodes: graph.nodes.map((node) => {
+      const laidOut = g.node(node.id);
+      if (!laidOut) return node;
+      const { width, height } = footprintOf(node.id);
+      // dagre reports the node CENTER; React Flow positions are top-left. The
+      // footprint width includes the trailing label pad, so subtracting half of
+      // it puts the card's real left edge at the box's left — leaving the pad on
+      // the trailing side, under the overflowing exit labels.
+      const position: Position = {
+        x: laidOut.x - width / 2,
+        y: laidOut.y - height / 2,
+      };
+      return { ...node, position };
+    }),
+  };
+}