@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/editor/frame.ts

@@ -0,0 +1,98 @@
+// A frame from the frame tool: a titled box that adopts the cards it covers.
+// A group (Cmd+G) is the same box untitled.
+
+import type { CanvasOp } from "../ops/ops.js";
+
+export interface FrameRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type Boxed = {
+  id: string;
+  position: { x: number; y: number };
+  measured?: { width?: number; height?: number };
+  width?: number | null;
+  height?: number | null;
+  parentId?: string;
+  type?: string;
+};
+
+/** A drag shorter than this on both sides was a click. */
+const CLICK_DRAG = 8;
+const DEFAULT_FRAME = { width: 480, height: 300 } as const;
+const MIN_FRAME = { width: 80, height: 60 } as const;
+
+/** The box a drag from one corner to the other covers, or the default size for a click. */
+export function frameRect(from: { x: number; y: number }, to: { x: number; y: number }): FrameRect {
+  const width = Math.abs(to.x - from.x);
+  const height = Math.abs(to.y - from.y);
+  if (width < CLICK_DRAG && height < CLICK_DRAG) {
+    return { x: Math.round(from.x), y: Math.round(from.y), ...DEFAULT_FRAME };
+  }
+  return {
+    x: Math.round(Math.min(from.x, to.x)),
+    y: Math.round(Math.min(from.y, to.y)),
+    width: Math.round(Math.max(width, MIN_FRAME.width)),
+    height: Math.round(Math.max(height, MIN_FRAME.height)),
+  };
+}
+
+function sizeOf(node: Boxed): { width: number; height: number } | null {
+  const width = node.measured?.width ?? node.width;
+  const height = node.measured?.height ?? node.height;
+  return width && height ? { width, height } : null;
+}
+
+export interface FrameOptions {
+  /** The node type of the frame, the host's group type. */
+  type: string;
+  title: string;
+  /** Extra `data` on the frame beside its title. */
+  data?: Record<string, unknown>;
+}
+
+/** The op list for one frame, and the id it was given. Top-level cards wholly inside the box become its children. */
+export function frameOps(
+  rect: FrameRect,
+  nodes: readonly Boxed[],
+  { type, title, data = {} }: FrameOptions,
+): { id: string; ops: CanvasOp[] } {
+  const id = crypto.randomUUID();
+  const inside = nodes.filter((node) => {
+    const size = sizeOf(node);
+    if (!size || node.parentId || node.type === type) return false;
+    const { x, y } = node.position;
+    return (
+      x >= rect.x &&
+      y >= rect.y &&
+      x + size.width <= rect.x + rect.width &&
+      y + size.height <= rect.y + rect.height
+    );
+  });
+  const ops: CanvasOp[] = [
+    {
+      kind: "addNode",
+      node: {
+        id,
+        type,
+        position: { x: rect.x, y: rect.y },
+        data: { ...data, label: title, frame: true },
+        width: rect.width,
+        height: rect.height,
+        style: { width: rect.width, height: rect.height },
+      },
+    },
+    ...inside.flatMap((node): CanvasOp[] => [
+      { kind: "setParent", nodeId: node.id, parentId: id, extent: "parent" },
+      {
+        kind: "moveNode",
+        nodeId: node.id,
+        position: { x: node.position.x - rect.x, y: node.position.y - rect.y },
+      },
+    ]),
+  ];
+  return { id, ops };
+}

package/src/canvas/editor/hand-context.ts

@@ -0,0 +1,15 @@
+// Whether the host page is drawn by hand. The host sets it once and the pen's
+// text and shapes read it. With no host, they keep the app's look.
+
+import { getContext, setContext } from "svelte";
+
+const KEY = Symbol("canvas-hand-drawn");
+
+/** Call during component init. `read` is a getter, so a toggle reaches mounted nodes. */
+export function setHandDrawn(read: () => boolean): void {
+  setContext(KEY, read);
+}
+
+export function useHandDrawn(): () => boolean {
+  return getContext<(() => boolean) | undefined>(KEY) ?? (() => false);
+}

package/src/canvas/editor/history-core.test.ts

@@ -0,0 +1,239 @@
+import { expectDefined } from "../test-utils.js";
+import { describe, expect, it } from "vite-plus/test";
+import type { Node, Edge } from "@xyflow/svelte";
+import {
+  applyHistoryEntry,
+  diffFlowState,
+  mergeHistoryEntries,
+  type FlowState,
+} from "./history-core.js";
+
+function assertNever(): never {
+  throw new Error("an unchanged card was serialised");
+}
+
+function node(id: string, overrides: Partial<Node> = {}): Node {
+  return {
+    id,
+    type: "node",
+    position: { x: 0, y: 0 },
+    data: { label: id },
+    ...overrides,
+  } as Node;
+}
+
+function edge(id: string, source: string, target: string, overrides: Partial<Edge> = {}): Edge {
+  return { id, source, target, ...overrides } as Edge;
+}
+
+function state(nodes: Node[], edges: Edge[] = []): FlowState {
+  return { nodes, edges };
+}
+
+describe("diffFlowState", () => {
+  it("returns null when nothing changed", () => {
+    const a = state([node("a")], [edge("e", "a", "a")]);
+    const b = state([node("a")], [edge("e", "a", "a")]);
+    expect(diffFlowState(a, b)).toBeNull();
+  });
+
+  it("ignores volatile fields: selection is not an undo step", () => {
+    const a = state([node("a")]);
+    const b = state([node("a", { selected: true, dragging: true } as Partial<Node>)]);
+    expect(diffFlowState(a, b)).toBeNull();
+  });
+
+  it("captures only affected items, not the whole document", () => {
+    const untouched = node("keep");
+    const a = state([untouched, node("move")]);
+    const b = state([untouched, node("move", { position: { x: 100, y: 50 } })]);
+    const entry = expectDefined(diffFlowState(a, b), "diff entry");
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["move"]);
+    expect(entry.nodesAfter.map((n) => n.id)).toEqual(["move"]);
+  });
+
+  it("never reads a card that is the same object on both sides", () => {
+    const untouched = { ...node("big"), toJSON: () => assertNever() };
+    const base = state([untouched, node("a")]);
+    const current = state([untouched, node("a", { position: { x: 5, y: 0 } })]);
+    const entry = expectDefined(diffFlowState(base, current));
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("still sees a card that was replaced by an equal-looking copy as unchanged", () => {
+    const base = state([node("a")]);
+    const current = state([{ ...node("a"), selected: true }]);
+    expect(diffFlowState(base, current)).toBeNull();
+  });
+
+  it("captures additions and removals", () => {
+    const a = state([node("a")], [edge("e1", "a", "a")]);
+    const b = state([node("b")], []);
+    const entry = expectDefined(diffFlowState(a, b), "diff entry");
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+    expect(entry.nodesAfter.map((n) => n.id)).toEqual(["b"]);
+    expect(entry.edgesBefore.map((e) => e.id)).toEqual(["e1"]);
+    expect(entry.edgesAfter).toEqual([]);
+  });
+});
+
+describe("applyHistoryEntry", () => {
+  it("undo restores a data edit, redo reapplies it", () => {
+    const before = state([node("a", { data: { label: "old" } })]);
+    const after = state([node("a", { data: { label: "new" } })]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes[0].data.label).toBe("old");
+
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.nodes[0].data.label).toBe("new");
+  });
+
+  it("undo of a delete restores the node and its edges", () => {
+    const before = state([node("a"), node("b")], [edge("e", "a", "b")]);
+    const after = state([node("a")], []);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id).sort()).toEqual(["a", "b"]);
+    expect(undone.edges.map((e) => e.id)).toEqual(["e"]);
+  });
+
+  it("undo of an add removes the added node", () => {
+    const before = state([node("a")]);
+    const after = state([node("a"), node("b")]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("restores parents before children for SvelteFlow ordering", () => {
+    const parent = node("parent");
+    const child = node("child", { parentId: "parent" } as Partial<Node>);
+    const before = state([parent, child]);
+    const after = state([]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    const ids = undone.nodes.map((n) => n.id);
+    expect(ids.indexOf("parent")).toBeLessThan(ids.indexOf("child"));
+  });
+
+  // A mind map reads child order from edge order: on 12 Oct 2026 undoing a reparent
+  // appended the restored edge, and the next relayout swapped Alpha's children.
+  it("undo of a reparent puts the restored edge back at its index, redo too", () => {
+    const nodes = [node("alpha"), node("gamma"), node("a1"), node("a2"), node("g1")];
+    const before = state(nodes, [
+      edge("e-alpha-a1", "alpha", "a1"),
+      edge("e-alpha-a2", "alpha", "a2"),
+      edge("e-gamma-g1", "gamma", "g1"),
+    ]);
+    const after = state(nodes, [
+      edge("e-alpha-a2", "alpha", "a2"),
+      edge("e-gamma-a1", "gamma", "a1"),
+      edge("e-gamma-g1", "gamma", "g1"),
+    ]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.edges.map((e) => e.id)).toEqual(["e-alpha-a1", "e-alpha-a2", "e-gamma-g1"]);
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.edges.map((e) => e.id)).toEqual(["e-alpha-a2", "e-gamma-a1", "e-gamma-g1"]);
+  });
+
+  // A reorder under the same parent keeps the edge's id and content, so only its index moved.
+  it("undo of a sibling reorder restores the edge order", () => {
+    const before = state(
+      [node("a1"), node("a2", { position: { x: 0, y: 60 } })],
+      [edge("e-alpha-a1", "alpha", "a1"), edge("e-alpha-a2", "alpha", "a2")],
+    );
+    const after = state(
+      [node("a1", { position: { x: 0, y: 60 } }), node("a2")],
+      [edge("e-alpha-a2", "alpha", "a2"), edge("e-alpha-a1", "alpha", "a1")],
+    );
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.edges.map((e) => e.id)).toEqual(["e-alpha-a1", "e-alpha-a2"]);
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.edges.map((e) => e.id)).toEqual(["e-alpha-a2", "e-alpha-a1"]);
+  });
+
+  it("undo of a delete puts nodes back at their index, without regrouping a valid order", () => {
+    const parent = node("parent");
+    const before = state([parent, node("free"), node("child", { parentId: "parent" })]);
+    const after = state([parent]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id)).toEqual(["parent", "free", "child"]);
+  });
+
+  it("round-trips a compound change (move + edit + add + remove)", () => {
+    const before = state(
+      [node("stay"), node("move"), node("gone", { data: { label: "bye" } })],
+      [edge("e1", "stay", "move")],
+    );
+    const after = state(
+      [
+        node("stay"),
+        node("move", { position: { x: 40, y: 40 }, data: { label: "moved" } }),
+        node("fresh"),
+      ],
+      [edge("e1", "stay", "move", { label: "renamed" } as Partial<Edge>)],
+    );
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(diffFlowState(before, undone)).toBeNull();
+
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(diffFlowState(after, redone)).toBeNull();
+  });
+});
+
+describe("mergeHistoryEntries", () => {
+  it("keeps the earliest before and the latest after for a node both touched", () => {
+    const s0 = state([node("a", { data: { label: "0" } })]);
+    const s1 = state([node("a", { data: { label: "1" } })]);
+    const s2 = state([node("a", { data: { label: "2" } })]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(applyHistoryEntry(s2, merged, "undo").nodes[0].data.label).toBe("0");
+    expect(applyHistoryEntry(s0, merged, "redo").nodes[0].data.label).toBe("2");
+  });
+
+  it("merges different nodes, and a node added then edited has no before", () => {
+    const s0 = state([node("a")]);
+    const s1 = state([node("a"), node("b", { data: { label: "new" } })]);
+    const s2 = state([
+      node("a", { position: { x: 9, y: 9 } }),
+      node("b", { data: { label: "newer" } }),
+    ]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(merged.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+    expect(merged.nodesAfter.map((n) => n.id).sort()).toEqual(["a", "b"]);
+    expect(applyHistoryEntry(s2, merged, "undo").nodes.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("carries node order from the earliest before to the latest after", () => {
+    const s0 = state([node("a"), node("b"), node("c")]);
+    const s1 = state([node("b"), node("a", { position: { x: 5, y: 5 } }), node("c")]);
+    const s2 = state([node("b"), node("c"), node("a", { position: { x: 1, y: 1 } })]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(merged.nodeOrder).toEqual({ before: ["a", "b", "c"], after: ["b", "c", "a"] });
+  });
+});

package/src/canvas/editor/history-core.ts

@@ -0,0 +1,247 @@
+// Pure diff/apply core for diagram history. Each entry holds only the touched
+// nodes and edges, so ops, layouts and xyflow's own writes share one mechanism.
+
+import type { Node, Edge } from "@xyflow/svelte";
+import { sortParentsFirst } from "../headless/canvas-cleanup.js";
+
+export type FlowState = { nodes: Node[]; edges: Edge[] };
+
+/** Each side's id sequence, kept only when the step changed it. */
+export type IdOrder = { before: string[]; after: string[] };
+
+export type HistoryEntry = {
+  nodesBefore: Node[];
+  nodesAfter: Node[];
+  edgesBefore: Edge[];
+  edgesAfter: Edge[];
+  // WHY: array order is data. Node order is stacking, edge order is mind map child order.
+  nodeOrder?: IdOrder;
+  edgeOrder?: IdOrder;
+};
+
+// Fields that churn without changing the document. Stripped, so selecting isn't
+// an undo step and undo doesn't restore a stale selection.
+const VOLATILE_NODE_FIELDS = new Set(["selected", "dragging", "measured", "resizing"]);
+const VOLATILE_EDGE_FIELDS = new Set(["selected"]);
+
+function stripVolatile<T extends Record<string, unknown>>(record: T, volatile: Set<string>): T {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(record)) {
+    if (volatile.has(key) || value === undefined) continue;
+    out[key] = value;
+  }
+  return out as T;
+}
+
+function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function signature(record: Record<string, unknown>, volatile: Set<string>): string {
+  return JSON.stringify(stripVolatile(record, volatile));
+}
+
+/** True when two versions of a card differ only in fields that churn without changing the document. */
+export function isSameNode(a: Node, b: Node): boolean {
+  return (
+    a === b ||
+    signature(a as Record<string, unknown>, VOLATILE_NODE_FIELDS) ===
+      signature(b as Record<string, unknown>, VOLATILE_NODE_FIELDS)
+  );
+}
+
+export function isSameEdge(a: Edge, b: Edge): boolean {
+  return (
+    a === b ||
+    signature(a as Record<string, unknown>, VOLATILE_EDGE_FIELDS) ===
+      signature(b as Record<string, unknown>, VOLATILE_EDGE_FIELDS)
+  );
+}
+
+function diffOrder(base: { id: string }[], current: { id: string }[]): IdOrder | undefined {
+  const before = base.map((item) => item.id);
+  const after = current.map((item) => item.id);
+  const same = before.length === after.length && before.every((id, i) => id === after[i]);
+  return same ? undefined : { before, after };
+}
+
+function diffCollection<T extends { id: string }>(
+  base: T[],
+  current: T[],
+  volatile: Set<string>,
+): { before: T[]; after: T[] } {
+  const baseById = new Map(base.map((item) => [item.id, item]));
+  const currentById = new Map(current.map((item) => [item.id, item]));
+  const before: T[] = [];
+  const after: T[] = [];
+
+  for (const item of base) {
+    const counterpart = currentById.get(item.id);
+    if (!counterpart) {
+      before.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+      continue;
+    }
+    // The same object is the same card: an untouched card costs nothing, however big the board.
+    if (
+      item !== counterpart &&
+      signature(item as Record<string, unknown>, volatile) !==
+        signature(counterpart as Record<string, unknown>, volatile)
+    ) {
+      before.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+      after.push(clone(stripVolatile(counterpart as Record<string, unknown>, volatile) as T));
+    }
+  }
+  for (const item of current) {
+    if (!baseById.has(item.id)) {
+      after.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+    }
+  }
+  return { before, after };
+}
+
+/**
+ * Diff two flow states into a history entry, or null when nothing changed. An order change
+ * alone is no step, so a bare reshuffle adds no undo entry.
+ */
+export function diffFlowState(base: FlowState, current: FlowState): HistoryEntry | null {
+  const nodes = diffCollection(base.nodes, current.nodes, VOLATILE_NODE_FIELDS);
+  const edges = diffCollection(base.edges, current.edges, VOLATILE_EDGE_FIELDS);
+  if (
+    nodes.before.length === 0 &&
+    nodes.after.length === 0 &&
+    edges.before.length === 0 &&
+    edges.after.length === 0
+  ) {
+    return null;
+  }
+  const nodeOrder = diffOrder(base.nodes, current.nodes);
+  const edgeOrder = diffOrder(base.edges, current.edges);
+  return {
+    nodesBefore: nodes.before,
+    nodesAfter: nodes.after,
+    edgesBefore: edges.before,
+    edgesAfter: edges.after,
+    ...(nodeOrder && { nodeOrder }),
+    ...(edgeOrder && { edgeOrder }),
+  };
+}
+
+/** Stable sort into `order`. An id the entry never saw keeps its place after the known ones. */
+function sortByOrder<T extends { id: string }>(items: T[], order: string[] | undefined): T[] {
+  if (!order) return items;
+  const rank = new Map(order.map((id, index) => [id, index]));
+  const at = (item: T) => rank.get(item.id) ?? order.length;
+  return items.toSorted((a, b) => at(a) - at(b));
+}
+
+/** Only a child ahead of its parent breaks SvelteFlow, so a valid order is never regrouped. */
+function parentsFirst(nodes: Node[]): Node[] {
+  const seen = new Set<string>();
+  const ids = new Set(nodes.map((node) => node.id));
+  for (const node of nodes) {
+    if (node.parentId && ids.has(node.parentId) && !seen.has(node.parentId)) {
+      return sortParentsFirst(nodes);
+    }
+    seen.add(node.id);
+  }
+  return nodes;
+}
+
+function applyCollection<T extends { id: string }>(items: T[], restore: T[], discard: T[]): T[] {
+  const restoreById = new Map(restore.map((item) => [item.id, item]));
+  const discardIds = new Set(discard.map((item) => item.id));
+  // Drop pure additions of the direction being reverted.
+  let next = items.filter((item) => !(discardIds.has(item.id) && !restoreById.has(item.id)));
+  // Restore changed items in place.
+  const present = new Set(next.map((item) => item.id));
+  next = next.map((item) => {
+    const restored = restoreById.get(item.id);
+    if (!restored) return item;
+    // Selection is where you are, not what the document held, so an undo leaves it be.
+    const selected = (item as { selected?: boolean }).selected;
+    return { ...clone(restored), ...(selected !== undefined && { selected }) };
+  });
+  // Re-add items that were removed in the direction being reverted.
+  for (const item of restore) {
+    if (!present.has(item.id)) next.push(clone(item));
+  }
+  return next;
+}
+
+/** Apply a history entry to a state: "undo" restores the before side, "redo" the after side. */
+export function applyHistoryEntry(
+  state: FlowState,
+  entry: HistoryEntry,
+  direction: "undo" | "redo",
+): FlowState {
+  const [restoreNodes, discardNodes] =
+    direction === "undo"
+      ? [entry.nodesBefore, entry.nodesAfter]
+      : [entry.nodesAfter, entry.nodesBefore];
+  const [restoreEdges, discardEdges] =
+    direction === "undo"
+      ? [entry.edgesBefore, entry.edgesAfter]
+      : [entry.edgesAfter, entry.edgesBefore];
+  const side = direction === "undo" ? "before" : "after";
+
+  return {
+    // WHY parentsFirst: SvelteFlow requires parents before children; a
+    // re-added container must land ahead of the children it re-adopts.
+    nodes: parentsFirst(
+      sortByOrder(
+        applyCollection(state.nodes, restoreNodes, discardNodes),
+        entry.nodeOrder?.[side],
+      ),
+    ),
+    edges: sortByOrder(
+      applyCollection(state.edges, restoreEdges, discardEdges),
+      entry.edgeOrder?.[side],
+    ),
+  };
+}
+
+/** An id's earliest before and latest after, so a node touched by both steps keeps its outer states. */
+function mergeSides<T extends { id: string }>(
+  first: { before: T[]; after: T[] },
+  second: { before: T[]; after: T[] },
+): { before: T[]; after: T[] } {
+  const firstTouched = new Set([...first.before, ...first.after].map((item) => item.id));
+  const secondTouched = new Set([...second.before, ...second.after].map((item) => item.id));
+  const before = [...first.before, ...second.before.filter((item) => !firstTouched.has(item.id))];
+  const after = [...first.after.filter((item) => !secondTouched.has(item.id)), ...second.after];
+  return { before, after };
+}
+
+function sameIds(a: string[], b: string[]): boolean {
+  return a.length === b.length && a.every((id, i) => id === b[i]);
+}
+
+/** No order change on one side means that step left the order alone, so the other side's end stands in. */
+function mergeOrder(first: IdOrder | undefined, second: IdOrder | undefined): IdOrder | undefined {
+  const before = first?.before ?? second?.before;
+  const after = second?.after ?? first?.after;
+  if (!before || !after) return undefined;
+  return sameIds(before, after) ? undefined : { before, after };
+}
+
+/** Fold two consecutive steps into one: undoing it restores the state before `first`. */
+export function mergeHistoryEntries(first: HistoryEntry, second: HistoryEntry): HistoryEntry {
+  const nodes = mergeSides(
+    { before: first.nodesBefore, after: first.nodesAfter },
+    { before: second.nodesBefore, after: second.nodesAfter },
+  );
+  const edges = mergeSides(
+    { before: first.edgesBefore, after: first.edgesAfter },
+    { before: second.edgesBefore, after: second.edgesAfter },
+  );
+  const nodeOrder = mergeOrder(first.nodeOrder, second.nodeOrder);
+  const edgeOrder = mergeOrder(first.edgeOrder, second.edgeOrder);
+  return {
+    nodesBefore: nodes.before,
+    nodesAfter: nodes.after,
+    edgesBefore: edges.before,
+    edgesAfter: edges.after,
+    ...(nodeOrder && { nodeOrder }),
+    ...(edgeOrder && { edgeOrder }),
+  };
+}