@burdenoff/fluidgrids-fe-sdk 2026.1101.4 → 2026.1102.2

package/dist/chunk-PBCBDSVA.js

@@ -0,0 +1,1480 @@
+import { mergeStickyNotes, describeOperationError, throwIfResultError } from './chunk-23LYGZ27.js';
+import { WorkflowDefinitionDocument, WorkflowVersionDiffDocument } from './chunk-JTQFBZTV.js';
+import { useTr } from './chunk-UULVIT25.js';
+import { getFluidGridsClient } from './chunk-NTWG3CJX.js';
+import { memo, useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { ArrowLeftRight, Eye, RotateCcw, Loader2 } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button, Badge, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Tabs, TabsList, TabsTrigger, TabsContent } from '@burdenoff/fe-libs/ui';
+import { cn } from '@burdenoff/fe-libs/utils';
+import { Handle, Position, ReactFlowProvider, ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/modules/history/utils/version-lifecycle.ts
+var LIFECYCLE_STAGES = [
+  "DRAFT",
+  "ACTIVE",
+  "DEPRECATED",
+  "ARCHIVED"
+];
+function lifecycleStageOf(status) {
+  const upper = (status ?? "").toUpperCase();
+  return LIFECYCLE_STAGES.includes(upper) ? upper : "DRAFT";
+}
+function lifecycleIndex(status) {
+  return LIFECYCLE_STAGES.indexOf(lifecycleStageOf(status));
+}
+function countLifecycle(versions) {
+  const counts = {
+    DRAFT: 0,
+    ACTIVE: 0,
+    DEPRECATED: 0,
+    ARCHIVED: 0
+  };
+  for (const version of versions) counts[lifecycleStageOf(version.status)] += 1;
+  return counts;
+}
+function lifecycleSteps(status) {
+  const current = lifecycleIndex(status);
+  return LIFECYCLE_STAGES.map((stage, index) => ({
+    stage,
+    state: index < current ? "done" : index === current ? "current" : "upcoming"
+  }));
+}
+function versionsOfWorkflow(rows, workflowKey) {
+  const time = (value) => {
+    const parsed = value ? new Date(value).getTime() : Number.NaN;
+    return Number.isNaN(parsed) ? 0 : parsed;
+  };
+  return rows.filter((row) => row.workflowKey === workflowKey).sort((a, b) => time(b.createdAt) - time(a.createdAt));
+}
+
+// src/builder/live/definition-canvas.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasId(item) {
+  return isRecord(item) && typeof item.id === "string" && item.id.length > 0;
+}
+function canvasFromDefinition(definitionJson) {
+  let definition = definitionJson;
+  if (typeof definition === "string") {
+    try {
+      definition = JSON.parse(definition);
+    } catch {
+      return null;
+    }
+  }
+  if (!isRecord(definition)) return null;
+  const data = isRecord(definition.data) ? definition.data : definition;
+  if (!Array.isArray(data.nodes)) return null;
+  const nodes = mergeStickyNotes({
+    nodes: data.nodes,
+    stickyNotes: Array.isArray(data.stickyNotes) ? data.stickyNotes : []
+  }).filter(hasId);
+  const edges = (Array.isArray(data.edges) ? data.edges : []).filter(
+    hasId
+  );
+  return { nodes, edges };
+}
+
+// src/modules/history/utils/version-graph-diff.ts
+var LAYOUT_NODE_KEYS = /* @__PURE__ */ new Set([
+  "position",
+  "positionAbsolute",
+  "selected",
+  "dragging",
+  "measured",
+  "width",
+  "height",
+  "zIndex",
+  "resizing",
+  "style",
+  "className"
+]);
+var LAYOUT_EDGE_KEYS = /* @__PURE__ */ new Set([
+  "id",
+  "selected",
+  "animated",
+  "style",
+  "className",
+  "zIndex",
+  "interactionWidth",
+  "markerEnd",
+  "markerStart"
+]);
+var DIFF_CARD_FOOTPRINT = { width: 220, height: 90 };
+var MAX_CHANGED_FIELDS = 20;
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function equalJson(left, right) {
+  if (Object.is(left, right)) return true;
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((value, index) => equalJson(value, right[index]));
+  }
+  if (isRecord2(left) && isRecord2(right)) {
+    const leftKeys = Object.keys(left).filter((k) => left[k] !== void 0);
+    const rightKeys = Object.keys(right).filter((k) => right[k] !== void 0);
+    if (leftKeys.length !== rightKeys.length) return false;
+    return leftKeys.every(
+      (key) => key in right && equalJson(left[key], right[key])
+    );
+  }
+  return false;
+}
+function changedPaths(before, after, prefix = "", limit = MAX_CHANGED_FIELDS) {
+  const paths = [];
+  const visit = (left, right, path) => {
+    if (paths.length >= limit || equalJson(left, right)) return;
+    if (isRecord2(left) && isRecord2(right)) {
+      const keys = [
+        .../* @__PURE__ */ new Set([...Object.keys(left), ...Object.keys(right)])
+      ].sort((a, b) => a.localeCompare(b));
+      for (const key of keys) {
+        visit(left[key], right[key], path ? `${path}.${key}` : key);
+        if (paths.length >= limit) return;
+      }
+      return;
+    }
+    paths.push(path || "(value)");
+  };
+  visit(before, after, prefix);
+  return paths;
+}
+function withoutKeys(value, keys) {
+  const out = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (!keys.has(key)) out[key] = entry;
+  }
+  return out;
+}
+function text(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function nodeLabel(node) {
+  const data = isRecord2(node.data) ? node.data : {};
+  return text(data.label) ?? text(data.name) ?? text(data.title) ?? String(node.id);
+}
+function nodeTypeOf(node) {
+  const data = isRecord2(node.data) ? node.data : {};
+  return text(data.nodeType) ?? text(data.type) ?? text(node.type) ?? "node";
+}
+function positionOf(node) {
+  const position = node?.position;
+  if (position && typeof position.x === "number" && Number.isFinite(position.x) && typeof position.y === "number" && Number.isFinite(position.y)) {
+    return { x: position.x, y: position.y };
+  }
+  return { x: 0, y: 0 };
+}
+function overlaps(a, b) {
+  return Math.abs(a.x - b.x) < DIFF_CARD_FOOTPRINT.width && Math.abs(a.y - b.y) < DIFF_CARD_FOOTPRINT.height;
+}
+function clearOf(position, taken) {
+  let candidate = position;
+  for (let attempt = 0; attempt <= taken.length; attempt += 1) {
+    const blocker = taken.find((spot) => overlaps(candidate, spot));
+    if (!blocker) return candidate;
+    candidate = {
+      x: candidate.x,
+      y: blocker.y + DIFF_CARD_FOOTPRINT.height
+    };
+  }
+  return candidate;
+}
+function handle(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
+function edgeSignature(edge) {
+  return [
+    edge.source,
+    handle(edge.sourceHandle) ?? "",
+    edge.target,
+    handle(edge.targetHandle) ?? ""
+  ].join("|");
+}
+function edgeLabel(edge) {
+  if (typeof edge.label === "string" && edge.label.trim())
+    return edge.label.trim();
+  const data = isRecord2(edge.data) ? edge.data : {};
+  return text(data.label);
+}
+function emptyCounts() {
+  return { added: 0, removed: 0, modified: 0, unchanged: 0 };
+}
+function diffWorkflowGraphs(from, to) {
+  const fromNodes = new Map((from?.nodes ?? []).map((n) => [String(n.id), n]));
+  const toNodes = new Map((to?.nodes ?? []).map((n) => [String(n.id), n]));
+  const nodes = [];
+  const nodeCounts = emptyCounts();
+  for (const [id, after] of toNodes) {
+    const before = fromNodes.get(id);
+    const afterPosition = positionOf(after);
+    if (!before) {
+      nodes.push({
+        id,
+        status: "added",
+        label: nodeLabel(after),
+        nodeType: nodeTypeOf(after),
+        position: afterPosition,
+        changedFields: [],
+        moved: false
+      });
+      nodeCounts.added += 1;
+      continue;
+    }
+    const fields = changedPaths(
+      withoutKeys(
+        before,
+        LAYOUT_NODE_KEYS
+      ),
+      withoutKeys(
+        after,
+        LAYOUT_NODE_KEYS
+      )
+    );
+    const beforePosition = positionOf(before);
+    const status = fields.length ? "modified" : "unchanged";
+    nodes.push({
+      id,
+      status,
+      label: nodeLabel(after),
+      nodeType: nodeTypeOf(after),
+      position: afterPosition,
+      changedFields: fields,
+      moved: beforePosition.x !== afterPosition.x || beforePosition.y !== afterPosition.y
+    });
+    nodeCounts[status] += 1;
+  }
+  const placed = nodes.map((node) => node.position);
+  for (const [id, before] of fromNodes) {
+    if (toNodes.has(id)) continue;
+    const position = clearOf(positionOf(before), placed);
+    placed.push(position);
+    nodes.push({
+      id,
+      status: "removed",
+      label: nodeLabel(before),
+      nodeType: nodeTypeOf(before),
+      position,
+      changedFields: [],
+      moved: false
+    });
+    nodeCounts.removed += 1;
+  }
+  const firstBySignature = (list) => {
+    const bySignature = /* @__PURE__ */ new Map();
+    for (const edge of list) {
+      const signature = edgeSignature(edge);
+      if (!bySignature.has(signature)) bySignature.set(signature, edge);
+    }
+    return bySignature;
+  };
+  const fromEdges = firstBySignature(from?.edges ?? []);
+  const toEdges = firstBySignature(to?.edges ?? []);
+  const edges = [];
+  const edgeCounts = emptyCounts();
+  const pushEdge = (edge, status) => {
+    edges.push({
+      id: edgeSignature(edge),
+      status,
+      source: String(edge.source),
+      target: String(edge.target),
+      sourceHandle: handle(edge.sourceHandle),
+      targetHandle: handle(edge.targetHandle),
+      label: edgeLabel(edge)
+    });
+    edgeCounts[status] += 1;
+  };
+  for (const [signature, after] of toEdges) {
+    const before = fromEdges.get(signature);
+    if (!before) {
+      pushEdge(after, "added");
+      continue;
+    }
+    const same = equalJson(
+      withoutKeys(
+        before,
+        LAYOUT_EDGE_KEYS
+      ),
+      withoutKeys(
+        after,
+        LAYOUT_EDGE_KEYS
+      )
+    );
+    pushEdge(after, same ? "unchanged" : "modified");
+  }
+  for (const [signature, before] of fromEdges) {
+    if (!toEdges.has(signature)) pushEdge(before, "removed");
+  }
+  const identical = nodeCounts.added + nodeCounts.removed + nodeCounts.modified + edgeCounts.added + edgeCounts.removed + edgeCounts.modified === 0;
+  return { nodes, edges, nodeCounts, edgeCounts, identical };
+}
+
+// src/modules/history/hooks/useVersionComparison.ts
+async function fetchDefinition(client, workflowKey, version) {
+  const result = throwIfResultError(
+    await client.query({
+      query: WorkflowDefinitionDocument,
+      variables: { workflowKey, version },
+      fetchPolicy: "network-only"
+    })
+  );
+  const definition = result.data?.workflowDefinition;
+  if (!definition) throw new Error(`Version ${version} was not found`);
+  return definition;
+}
+async function fetchServerDiff(client, workflowKey, fromVersion, toVersion) {
+  const result = throwIfResultError(
+    await client.query({
+      query: WorkflowVersionDiffDocument,
+      variables: { workflowKey, fromVersion, toVersion },
+      fetchPolicy: "network-only"
+    })
+  );
+  const diff = result.data?.workflowVersionDiff;
+  if (!diff) throw new Error("The service returned no diff");
+  return diff;
+}
+async function loadVersionComparison(client, workflowKey, fromVersion, toVersion) {
+  const [from, to, diff] = await Promise.all([
+    fetchDefinition(client, workflowKey, fromVersion),
+    fetchDefinition(client, workflowKey, toVersion),
+    fetchServerDiff(client, workflowKey, fromVersion, toVersion).then(
+      (value) => ({ value, error: null }),
+      (error) => ({
+        value: null,
+        error: describeOperationError(error, "Failed to load the change list")
+      })
+    )
+  ]);
+  const fromCanvas = canvasFromDefinition(from.definitionJson);
+  const toCanvas = canvasFromDefinition(to.definitionJson);
+  return {
+    workflowKey,
+    fromVersion,
+    toVersion,
+    from,
+    to,
+    fromCanvas,
+    toCanvas,
+    graph: diffWorkflowGraphs(fromCanvas, toCanvas),
+    serverDiff: diff.value,
+    serverDiffError: diff.error
+  };
+}
+function useVersionComparison(workflowKey, fromVersion, toVersion) {
+  const [comparison, setComparison] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [nonce, setNonce] = useState(0);
+  const requestId = useRef(0);
+  useEffect(() => {
+    if (!workflowKey || !fromVersion || !toVersion || fromVersion === toVersion) {
+      setComparison(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    const id = ++requestId.current;
+    setLoading(true);
+    setError(null);
+    loadVersionComparison(
+      getFluidGridsClient(),
+      workflowKey,
+      fromVersion,
+      toVersion
+    ).then((result) => {
+      if (id === requestId.current) setComparison(result);
+    }).catch((err) => {
+      if (id !== requestId.current) return;
+      setComparison(null);
+      setError(describeOperationError(err, "Failed to compare versions"));
+    }).finally(() => {
+      if (id === requestId.current) setLoading(false);
+    });
+  }, [workflowKey, fromVersion, toVersion, nonce]);
+  const reload = useCallback(() => setNonce((n) => n + 1), []);
+  const current = comparison && comparison.workflowKey === workflowKey && comparison.fromVersion === fromVersion && comparison.toVersion === toVersion ? comparison : null;
+  return { comparison: current, loading, error, reload };
+}
+
+// src/modules/history/components/diff-styles.ts
+var DIFF_STATUS_CLASSES = {
+  added: {
+    card: "border-[var(--color-status-success-border)] bg-[var(--color-status-success-bg)]",
+    chip: "border-[var(--color-status-success-border)] bg-[var(--color-status-success-bg)] text-[var(--color-status-success-text)]",
+    text: "text-[var(--color-status-success-text)]"
+  },
+  removed: {
+    card: "border-dashed border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg)] opacity-80",
+    chip: "border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg)] text-[var(--color-status-error-text)]",
+    text: "text-[var(--color-status-error-text)]"
+  },
+  modified: {
+    card: "border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg)]",
+    chip: "border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg)] text-[var(--color-status-warning-text)]",
+    text: "text-[var(--color-status-warning-text)]"
+  },
+  unchanged: {
+    card: "border-border bg-card",
+    chip: "border-border bg-muted text-muted-foreground",
+    text: "text-muted-foreground"
+  }
+};
+var DIFF_EDGE_STROKE = {
+  added: "var(--color-status-success-text)",
+  removed: "var(--color-status-error-text)",
+  modified: "var(--color-status-warning-text)",
+  unchanged: "var(--color-border-strong)"
+};
+function diffStatusLabel(tr, status) {
+  switch (status) {
+    case "added":
+      return tr("fluidgrids.history.versionDiff.statusAdded", "Added");
+    case "removed":
+      return tr("fluidgrids.history.versionDiff.statusRemoved", "Removed");
+    case "modified":
+      return tr("fluidgrids.history.versionDiff.statusModified", "Modified");
+    default:
+      return tr("fluidgrids.history.versionDiff.statusUnchanged", "Unchanged");
+  }
+}
+function lifecycleStageLabel(tr, stage) {
+  switch (stage) {
+    case "ACTIVE":
+      return tr("fluidgrids.history.lifecycle.active", "Active");
+    case "DEPRECATED":
+      return tr("fluidgrids.history.lifecycle.deprecated", "Deprecated");
+    case "ARCHIVED":
+      return tr("fluidgrids.history.lifecycle.archived", "Archived");
+    default:
+      return tr("fluidgrids.history.lifecycle.draft", "Draft");
+  }
+}
+
+// src/modules/history/components/diff-flow.ts
+var DEFAULT_HANDLES = /* @__PURE__ */ new Set(["source", "target"]);
+function namedHandle(value) {
+  return value && !DEFAULT_HANDLES.has(value) ? value : null;
+}
+function handleCaption(edge) {
+  const source = namedHandle(edge.sourceHandle);
+  const target = namedHandle(edge.targetHandle);
+  if (source && target) return `${source} \u2192 ${target}`;
+  return source ?? (target ? `\u2192 ${target}` : null);
+}
+function edgeCaption(edge) {
+  const handles = handleCaption(edge);
+  if (edge.label && handles) return `${edge.label} (${handles})`;
+  return edge.label ?? handles ?? void 0;
+}
+function toFlowElements(graph) {
+  const known = new Set(graph.nodes.map((node) => node.id));
+  return {
+    nodes: graph.nodes.map((node) => ({
+      id: node.id,
+      type: "diff",
+      position: node.position,
+      data: { diff: node },
+      draggable: false,
+      connectable: false
+    })),
+    // Handle ids are not passed to React Flow: the diff cards have one handle
+    // per side, and an edge naming a handle the card does not have would not
+    // be drawn. The handles still identify the connection (a branch rerouted
+    // from one output of an If node to another is a removed edge plus an added
+    // edge between the same two nodes), so they are named in the label, and
+    // removed edges take a different path so the pair does not draw as one.
+    edges: graph.edges.filter((edge) => known.has(edge.source) && known.has(edge.target)).map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: edge.status === "removed" ? "smoothstep" : void 0,
+      label: edgeCaption(edge),
+      animated: edge.status === "added",
+      focusable: false,
+      data: { status: edge.status },
+      style: {
+        stroke: DIFF_EDGE_STROKE[edge.status],
+        strokeWidth: edge.status === "unchanged" ? 1.5 : 2.5,
+        strokeDasharray: edge.status === "removed" ? "6 4" : void 0
+      }
+    }))
+  };
+}
+var DiffNodeCard = memo(function DiffNodeCard2({
+  data,
+  selected
+}) {
+  const tr = useTr();
+  const { diff } = data;
+  const styles = DIFF_STATUS_CLASSES[diff.status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[200px] rounded-lg border-2 px-3 py-2 text-left shadow-sm",
+        styles.card,
+        selected && "ring-2 ring-primary"
+      ),
+      "data-testid": "fluidgrids-version-diff-node",
+      "data-diff-status": diff.status,
+      "data-node-id": diff.id,
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            isConnectable: false,
+            className: "!size-2 !border-0 !bg-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate text-sm font-medium text-foreground",
+                diff.status === "removed" && "line-through"
+              ),
+              title: diff.label,
+              children: diff.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "shrink-0 text-[10px] font-semibold uppercase",
+                styles.text
+              ),
+              children: diffStatusLabel(tr, diff.status)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground",
+            title: diff.nodeType,
+            children: diff.nodeType
+          }
+        ),
+        diff.status === "modified" && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-muted-foreground", children: tr(
+          "fluidgrids.history.versionDiff.changedFieldCount",
+          "{{count}} field(s) changed",
+          { count: diff.changedFields.length }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            isConnectable: false,
+            className: "!size-2 !border-0 !bg-muted-foreground"
+          }
+        )
+      ]
+    }
+  );
+});
+var NODE_TYPES = { diff: DiffNodeCard };
+var LEGEND_ORDER = [
+  "added",
+  "modified",
+  "removed",
+  "unchanged"
+];
+function VersionDiffLegend({
+  nodeCounts,
+  edgeCounts
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "flex flex-wrap items-center gap-2 text-xs",
+      "aria-label": tr("fluidgrids.history.versionDiff.legend", "Legend"),
+      "data-testid": "fluidgrids-version-diff-legend",
+      children: LEGEND_ORDER.map((status) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-diff-status": status,
+          className: cn(
+            "flex items-center gap-1.5 rounded-full border px-2 py-0.5",
+            DIFF_STATUS_CLASSES[status].chip
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: diffStatusLabel(tr, status) }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: tr(
+              "fluidgrids.history.versionDiff.legendCounts",
+              "{{nodes}} nodes \xB7 {{edges}} connections",
+              { nodes: nodeCounts[status], edges: edgeCounts[status] }
+            ) })
+          ]
+        },
+        status
+      ))
+    }
+  );
+}
+function VersionDiffGraphInner({ graph, className }) {
+  const tr = useTr();
+  const { nodes, edges } = useMemo(() => toFlowElements(graph), [graph]);
+  const [selectedId, setSelectedId] = useState(null);
+  const selected = graph.nodes.find((node) => node.id === selectedId) ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx(
+      VersionDiffLegend,
+      {
+        nodeCounts: graph.nodeCounts,
+        edgeCounts: graph.edgeCounts
+      }
+    ),
+    graph.nodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: tr(
+      "fluidgrids.history.versionDiff.noCanvas",
+      "Neither version has a canvas to draw. Use the JSON view to compare them."
+    ) }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-[420px] w-full overflow-hidden rounded-lg border border-border bg-background",
+        "data-testid": "fluidgrids-version-diff-canvas",
+        children: /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: NODE_TYPES,
+            nodesDraggable: false,
+            nodesConnectable: false,
+            edgesFocusable: false,
+            elementsSelectable: true,
+            onNodeClick: (_, node) => setSelectedId(node.id),
+            onPaneClick: () => setSelectedId(null),
+            fitView: true,
+            fitViewOptions: { padding: 0.2 },
+            minZoom: 0.2,
+            maxZoom: 1.5,
+            proOptions: { hideAttribution: true },
+            children: [
+              /* @__PURE__ */ jsx(Background, { gap: 16, size: 1 }),
+              /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
+              /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true })
+            ]
+          }
+        )
+      }
+    ),
+    selected && /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "rounded-md border border-border bg-card p-3 text-xs",
+        "aria-label": tr(
+          "fluidgrids.history.versionDiff.nodeDetails",
+          "Node details"
+        ),
+        "data-testid": "fluidgrids-version-diff-node-details",
+        children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
+            selected.label,
+            " ",
+            /* @__PURE__ */ jsxs("span", { className: DIFF_STATUS_CLASSES[selected.status].text, children: [
+              "\xB7 ",
+              diffStatusLabel(tr, selected.status)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "font-mono text-muted-foreground", children: selected.id }),
+          selected.moved && /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: tr(
+            "fluidgrids.history.versionDiff.moved",
+            "Moved on the canvas (layout only)."
+          ) }),
+          selected.changedFields.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-0.5", children: selected.changedFields.map((field) => /* @__PURE__ */ jsx("li", { className: "font-mono text-foreground", children: field }, field)) })
+        ]
+      }
+    )
+  ] });
+}
+function VersionDiffGraph(props) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VersionDiffGraphInner, { ...props }) });
+}
+
+// src/modules/history/utils/json-line-diff.ts
+var DEFAULT_MAX_CELLS = 4e6;
+function sortKeys(value) {
+  if (Array.isArray(value)) return value.map(sortKeys);
+  if (typeof value === "object" && value !== null) {
+    const out = {};
+    for (const key of Object.keys(value).sort((a, b) => a.localeCompare(b))) {
+      out[key] = sortKeys(value[key]);
+    }
+    return out;
+  }
+  return value;
+}
+function canonicalJson(value) {
+  let parsed = value;
+  if (typeof parsed === "string") {
+    try {
+      parsed = JSON.parse(parsed);
+    } catch {
+      return parsed;
+    }
+  }
+  if (parsed === void 0) return "";
+  return JSON.stringify(sortKeys(parsed), null, 2) ?? "";
+}
+function splitLines(text2) {
+  return text2 === "" ? [] : text2.split("\n");
+}
+function diffJsonLines(before, after, maxCells = DEFAULT_MAX_CELLS) {
+  const a = splitLines(canonicalJson(before));
+  const b = splitLines(canonicalJson(after));
+  let head = 0;
+  while (head < a.length && head < b.length && a[head] === b[head]) head += 1;
+  let tail = 0;
+  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail])
+    tail += 1;
+  const lines = [];
+  for (let i = 0; i < head; i += 1) {
+    lines.push({ kind: "same", text: a[i], fromLine: i + 1, toLine: i + 1 });
+  }
+  const midA = a.slice(head, a.length - tail);
+  const midB = b.slice(head, b.length - tail);
+  let approximate = false;
+  let added = 0;
+  let removed = 0;
+  const pushRemoved = (index) => {
+    lines.push({
+      kind: "removed",
+      text: midA[index],
+      fromLine: head + index + 1,
+      toLine: null
+    });
+    removed += 1;
+  };
+  const pushAdded = (index) => {
+    lines.push({
+      kind: "added",
+      text: midB[index],
+      fromLine: null,
+      toLine: head + index + 1
+    });
+    added += 1;
+  };
+  if ((midA.length + 1) * (midB.length + 1) > maxCells) {
+    approximate = true;
+    for (let i = 0; i < midA.length; i += 1) pushRemoved(i);
+    for (let j = 0; j < midB.length; j += 1) pushAdded(j);
+  } else {
+    const width = midB.length + 1;
+    const lcs = new Uint32Array((midA.length + 1) * width);
+    for (let i2 = midA.length - 1; i2 >= 0; i2 -= 1) {
+      for (let j2 = midB.length - 1; j2 >= 0; j2 -= 1) {
+        lcs[i2 * width + j2] = midA[i2] === midB[j2] ? lcs[(i2 + 1) * width + j2 + 1] + 1 : Math.max(lcs[(i2 + 1) * width + j2], lcs[i2 * width + j2 + 1]);
+      }
+    }
+    let i = 0;
+    let j = 0;
+    while (i < midA.length && j < midB.length) {
+      if (midA[i] === midB[j]) {
+        lines.push({
+          kind: "same",
+          text: midA[i],
+          fromLine: head + i + 1,
+          toLine: head + j + 1
+        });
+        i += 1;
+        j += 1;
+      } else if (lcs[(i + 1) * width + j] >= lcs[i * width + j + 1]) {
+        pushRemoved(i);
+        i += 1;
+      } else {
+        pushAdded(j);
+        j += 1;
+      }
+    }
+    while (i < midA.length) pushRemoved(i++);
+    while (j < midB.length) pushAdded(j++);
+  }
+  for (let k = 0; k < tail; k += 1) {
+    const fromIndex = a.length - tail + k;
+    const toIndex = b.length - tail + k;
+    lines.push({
+      kind: "same",
+      text: a[fromIndex],
+      fromLine: fromIndex + 1,
+      toLine: toIndex + 1
+    });
+  }
+  return { lines, added, removed, approximate };
+}
+function toHunks(lines, context = 3) {
+  const keep = new Array(lines.length).fill(false);
+  lines.forEach((line, index) => {
+    if (line.kind === "same") return;
+    const start = Math.max(0, index - context);
+    const end = Math.min(lines.length - 1, index + context);
+    for (let k = start; k <= end; k += 1) keep[k] = true;
+  });
+  const hunks = [];
+  let skipped = 0;
+  let current = null;
+  lines.forEach((line, index) => {
+    if (!keep[index]) {
+      skipped += 1;
+      current = null;
+      return;
+    }
+    if (!current) {
+      current = { skippedBefore: skipped, lines: [] };
+      hunks.push(current);
+      skipped = 0;
+    }
+    current.lines.push(line);
+  });
+  return { hunks, skippedAfter: skipped };
+}
+
+// src/modules/history/components/diff-format.ts
+var VERSION_TIME_FORMAT = new Intl.DateTimeFormat(void 0, {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+});
+function formatVersionTime(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return VERSION_TIME_FORMAT.format(date);
+}
+function formatDiffValue(value) {
+  if (value === void 0 || value === null) return "\u2014";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function lineKey(line) {
+  return `${line.fromLine ?? "-"}:${line.toLine ?? "-"}`;
+}
+function hunkKey(hunk) {
+  const first = hunk.lines[0];
+  return first ? lineKey(first) : `skip-${hunk.skippedBefore}`;
+}
+function kindStatus(kind) {
+  if (kind === "ADDED") return "added";
+  if (kind === "REMOVED") return "removed";
+  return "modified";
+}
+function VersionChangeList({
+  diff,
+  error
+}) {
+  const tr = useTr();
+  if (!diff) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        role: "alert",
+        className: "rounded-md border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg)] p-3 text-xs text-[var(--color-status-error-text)]",
+        children: tr(
+          "fluidgrids.history.versionDiff.changeListError",
+          "The change list could not be loaded: {{error}}",
+          { error: error ?? "" }
+        )
+      }
+    );
+  }
+  if (diff.entries.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tr(
+      "fluidgrids.history.versionDiff.identical",
+      "The definitions are identical."
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      tr(
+        "fluidgrids.history.versionDiff.changeCount",
+        "{{count}} change(s)",
+        { count: diff.entries.length }
+      ),
+      diff.truncated && ` \xB7 ${tr(
+        "fluidgrids.history.versionDiff.truncated",
+        "the list is truncated; the raw JSON view shows everything"
+      )}`
+    ] }),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "max-h-[420px] space-y-1 overflow-y-auto",
+        "data-testid": "fluidgrids-version-diff-changes",
+        children: diff.entries.map((entry) => {
+          const status = kindStatus(entry.kind);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "rounded border border-border p-2 text-xs",
+              "data-diff-kind": entry.kind,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "outline",
+                      className: cn(
+                        "shrink-0 text-[10px]",
+                        DIFF_STATUS_CLASSES[status].chip
+                      ),
+                      children: entry.kind
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("code", { className: "min-w-0 break-all font-mono", children: entry.path })
+                ] }),
+                entry.kind !== "ADDED" && /* @__PURE__ */ jsxs("p", { className: "mt-1 break-all font-mono text-[11px] text-[var(--color-status-error-text)]", children: [
+                  "\u2212 ",
+                  formatDiffValue(entry.before)
+                ] }),
+                entry.kind !== "REMOVED" && /* @__PURE__ */ jsxs("p", { className: "mt-1 break-all font-mono text-[11px] text-[var(--color-status-success-text)]", children: [
+                  "+ ",
+                  formatDiffValue(entry.after)
+                ] })
+              ]
+            },
+            `${entry.kind}-${entry.path}`
+          );
+        })
+      }
+    )
+  ] });
+}
+function lineClass(line) {
+  if (line.kind === "added")
+    return "bg-[var(--color-status-success-bg)] text-[var(--color-status-success-text)]";
+  if (line.kind === "removed")
+    return "bg-[var(--color-status-error-bg)] text-[var(--color-status-error-text)]";
+  return "text-foreground";
+}
+function JsonLineDiffView({
+  before,
+  after,
+  fromVersion,
+  toVersion
+}) {
+  const tr = useTr();
+  const diff = useMemo(() => diffJsonLines(before, after), [before, after]);
+  const [full, setFull] = useState(false);
+  const { hunks, skippedAfter } = useMemo(
+    () => full ? { hunks: [{ skippedBefore: 0, lines: diff.lines }], skippedAfter: 0 } : toHunks(diff.lines),
+    [diff, full]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-status-error-text)]", children: [
+          "\u2212 ",
+          fromVersion
+        ] }),
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-status-success-text)]", children: [
+          "+ ",
+          toVersion
+        ] }),
+        " ",
+        "\xB7",
+        " ",
+        tr(
+          "fluidgrids.history.versionDiff.lineCounts",
+          "{{added}} line(s) added, {{removed}} removed",
+          { added: diff.added, removed: diff.removed }
+        ),
+        diff.approximate && ` \xB7 ${tr(
+          "fluidgrids.history.versionDiff.approximate",
+          "too large for a line-by-line match; the changed block is shown whole"
+        )}`
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setFull((v) => !v), children: full ? tr(
+        "fluidgrids.history.versionDiff.showChangesOnly",
+        "Changes only"
+      ) : tr("fluidgrids.history.versionDiff.showFullJson", "Full JSON") })
+    ] }),
+    diff.added + diff.removed === 0 && !full ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tr(
+      "fluidgrids.history.versionDiff.identical",
+      "The definitions are identical."
+    ) }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "max-h-[480px] overflow-auto rounded-md border border-border bg-background font-mono text-[11px] leading-5",
+        "data-testid": "fluidgrids-version-diff-json",
+        children: [
+          hunks.map((hunk) => /* @__PURE__ */ jsxs("div", { children: [
+            hunk.skippedBefore > 0 && /* @__PURE__ */ jsx("div", { className: "border-y border-border bg-muted px-2 text-muted-foreground", children: tr(
+              "fluidgrids.history.versionDiff.unchangedLines",
+              "\u2026 {{count}} unchanged line(s)",
+              { count: hunk.skippedBefore }
+            ) }),
+            hunk.lines.map((line) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex whitespace-pre", lineClass(line)),
+                "data-line-kind": line.kind,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 select-none pr-1 text-right text-muted-foreground", children: line.fromLine ?? "" }),
+                  /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 select-none pr-1 text-right text-muted-foreground", children: line.toLine ?? "" }),
+                  /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0 select-none text-center", children: line.kind === "added" ? "+" : line.kind === "removed" ? "\u2212" : " " }),
+                  /* @__PURE__ */ jsx("span", { className: "pr-2", children: line.text })
+                ]
+              },
+              lineKey(line)
+            ))
+          ] }, hunkKey(hunk))),
+          skippedAfter > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-muted px-2 text-muted-foreground", children: tr(
+            "fluidgrids.history.versionDiff.unchangedLines",
+            "\u2026 {{count}} unchanged line(s)",
+            { count: skippedAfter }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function VersionLifecycleBar({
+  status,
+  counts,
+  className
+}) {
+  const tr = useTr();
+  const steps = lifecycleSteps(status);
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn("flex w-full items-stretch gap-1", className),
+      "aria-label": tr(
+        "fluidgrids.history.lifecycle.ariaLabel",
+        "Version lifecycle"
+      ),
+      "data-testid": "fluidgrids-version-lifecycle",
+      children: steps.map(({ stage, state }) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "aria-current": state === "current" ? "step" : void 0,
+          "data-stage": stage,
+          "data-state": state,
+          className: cn(
+            "flex min-w-0 flex-1 flex-col items-center rounded-md border px-1.5 py-1 text-center text-[11px] leading-tight",
+            state === "current" && "border-primary bg-primary/10 font-semibold text-primary",
+            state === "done" && "border-border bg-muted text-muted-foreground",
+            state === "upcoming" && "border-dashed border-border text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: lifecycleStageLabel(tr, stage) }),
+            counts && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal tabular-nums", children: counts[stage] })
+          ]
+        },
+        stage
+      ))
+    }
+  );
+}
+function statusVariant(status) {
+  switch (lifecycleStageOf(status)) {
+    case "ACTIVE":
+      return "default";
+    case "DEPRECATED":
+      return "destructive";
+    case "ARCHIVED":
+      return "outline";
+    default:
+      return "secondary";
+  }
+}
+function VersionSide({
+  tr,
+  side,
+  version,
+  counts,
+  authorName,
+  currentVersion,
+  busy,
+  onRestore,
+  onOpenVersion
+}) {
+  if (!version) return null;
+  const author = authorName?.(version.createdById) ?? null;
+  const when = formatVersionTime(version.updatedAt ?? version.createdAt);
+  const isCurrent = currentVersion === version.version;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "flex min-w-0 flex-col gap-2 rounded-lg border border-border bg-card p-3",
+      "data-testid": `fluidgrids-version-diff-${side}`,
+      "aria-label": (
+        // The pair can be swapped, so "from" is not always the older one:
+        // name the side by its role in the comparison, not by its age.
+        side === "from" ? tr("fluidgrids.history.versionDiff.fromSideAria", "Compared from") : tr("fluidgrids.history.versionDiff.toSideAria", "Compared to")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-xs text-foreground", children: version.version }),
+          /* @__PURE__ */ jsx(Badge, { variant: statusVariant(version.status), className: "text-[10px]", children: lifecycleStageLabel(tr, lifecycleStageOf(version.status)) }),
+          isCurrent && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px]", children: tr(
+            "fluidgrids.history.versionDiff.currentlyOpen",
+            "Currently open"
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          author ? `${author} \xB7 ` : "",
+          when
+        ] }),
+        /* @__PURE__ */ jsx(VersionLifecycleBar, { status: version.status, counts }),
+        (onRestore || onOpenVersion && !isCurrent) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          onOpenVersion && !isCurrent && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              disabled: busy,
+              onClick: () => onOpenVersion(version.version),
+              children: [
+                /* @__PURE__ */ jsx(Eye, { className: "mr-1.5 size-3.5" }),
+                tr("fluidgrids.history.versionDiff.view", "View in builder")
+              ]
+            }
+          ),
+          onRestore && !isCurrent && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: "secondary",
+              disabled: busy,
+              onClick: () => onRestore(version.version),
+              "data-testid": `fluidgrids-version-diff-restore-${side}`,
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1.5 size-3.5" }),
+                tr(
+                  "fluidgrids.history.versionDiff.restore",
+                  "Restore as new draft"
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function VersionSelect({
+  versions,
+  value,
+  onChange,
+  label
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value,
+      onChange: (event) => onChange(event.target.value),
+      "aria-label": label,
+      className: "h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-xs text-foreground",
+      children: versions.map((v) => /* @__PURE__ */ jsxs("option", { value: v.version, children: [
+        v.version,
+        " \xB7 ",
+        lifecycleStageLabel(tr, lifecycleStageOf(v.status))
+      ] }, v.id))
+    }
+  );
+}
+function ComparisonTabs({
+  comparison,
+  tab,
+  onTabChange
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: tab,
+      onValueChange: (value) => onTabChange(value === "json" ? "json" : "graph"),
+      children: [
+        /* @__PURE__ */ jsxs(TabsList, { children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "graph", children: tr("fluidgrids.history.versionDiff.graphTab", "Graph") }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "json", children: tr("fluidgrids.history.versionDiff.jsonTab", "JSON") })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "graph", className: "mt-3", children: [
+          comparison.graph.identical && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: tr(
+            "fluidgrids.history.versionDiff.graphIdentical",
+            "No node or connection changed between these versions."
+          ) }),
+          /* @__PURE__ */ jsx(VersionDiffGraph, { graph: comparison.graph })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "json", className: "mt-3 space-y-4", children: [
+          /* @__PURE__ */ jsxs("section", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: tr("fluidgrids.history.versionDiff.changesHeading", "Changes") }),
+            /* @__PURE__ */ jsx(
+              VersionChangeList,
+              {
+                diff: comparison.serverDiff,
+                error: comparison.serverDiffError
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("section", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: tr("fluidgrids.history.versionDiff.rawHeading", "Definition JSON") }),
+            /* @__PURE__ */ jsx(
+              JsonLineDiffView,
+              {
+                before: comparison.from.definitionJson,
+                after: comparison.to.definitionJson,
+                fromVersion: comparison.fromVersion,
+                toVersion: comparison.toVersion
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ComparisonBody({
+  samePair,
+  loading,
+  error,
+  comparison,
+  onRetry,
+  tab,
+  onTabChange
+}) {
+  const tr = useTr();
+  if (samePair) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tr(
+      "fluidgrids.history.versionDiff.sameVersion",
+      "Pick two different versions to compare."
+    ) });
+  }
+  if (loading && !comparison) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+      tr("fluidgrids.history.versionDiff.loading", "Comparing versions\u2026")
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "flex flex-wrap items-center justify-between gap-2 rounded-md border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg)] p-3 text-sm text-[var(--color-status-error-text)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: error }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, children: tr("fluidgrids.history.versionDiff.retry", "Retry") })
+        ]
+      }
+    );
+  }
+  return comparison ? /* @__PURE__ */ jsx(
+    ComparisonTabs,
+    {
+      comparison,
+      tab,
+      onTabChange
+    }
+  ) : null;
+}
+function RestoreConfirmDialog({
+  target,
+  restoring,
+  className,
+  onCancel,
+  onConfirm
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      open: target !== null,
+      onOpenChange: (next) => !next && !restoring && onCancel(),
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { className, children: [
+        /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx(AlertDialogTitle, { children: tr(
+            "fluidgrids.history.versionDiff.restoreTitle",
+            "Restore version {{version}}?",
+            { version: target ?? "" }
+          ) }),
+          /* @__PURE__ */ jsx(AlertDialogDescription, { children: tr(
+            "fluidgrids.history.versionDiff.restoreBody",
+            "This creates a new draft version from it. Existing versions, including the active one, are not changed."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: restoring, children: tr("fluidgrids.history.versionDiff.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxs(
+            AlertDialogAction,
+            {
+              disabled: restoring,
+              onClick: (event) => {
+                event.preventDefault();
+                onConfirm();
+              },
+              children: [
+                restoring && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-3.5 animate-spin" }),
+                tr("fluidgrids.history.versionDiff.restoreConfirm", "Restore")
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function VersionDiffDialog({
+  open,
+  onOpenChange,
+  workflowKey,
+  workflowName,
+  versions,
+  initialFrom,
+  initialTo,
+  currentVersion,
+  authorName,
+  onRestore,
+  onOpenVersion,
+  className
+}) {
+  const tr = useTr();
+  const [from, setFrom] = useState(initialFrom);
+  const [to, setTo] = useState(initialTo);
+  const [tab, setTab] = useState("graph");
+  const [restoreTarget, setRestoreTarget] = useState(null);
+  const [restoring, setRestoring] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    setFrom(initialFrom);
+    setTo(initialTo);
+  }, [open, initialFrom, initialTo]);
+  const { comparison, loading, error, reload } = useVersionComparison(
+    workflowKey,
+    open ? from : null,
+    open ? to : null
+  );
+  const counts = useMemo(() => countLifecycle(versions), [versions]);
+  const byVersion = useMemo(
+    () => new Map(versions.map((v) => [v.version, v])),
+    [versions]
+  );
+  const confirmRestore = async () => {
+    if (!restoreTarget || !onRestore) return;
+    setRestoring(true);
+    try {
+      await onRestore(restoreTarget);
+      setRestoreTarget(null);
+    } finally {
+      setRestoring(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: cn(
+          "max-h-[92vh] w-[calc(100vw-2rem)] overflow-y-auto sm:max-w-5xl",
+          className
+        ),
+        "data-testid": "fluidgrids-version-diff-dialog",
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { children: [
+              tr("fluidgrids.history.versionDiff.title", "Version diff"),
+              workflowName ? ` \xB7 ${workflowName}` : ""
+            ] }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: tr(
+              "fluidgrids.history.versionDiff.description",
+              "Compare two versions on the canvas or as JSON. The graph ignores layout-only moves; the JSON view lists every difference."
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              VersionSelect,
+              {
+                versions,
+                value: from,
+                onChange: setFrom,
+                label: tr(
+                  "fluidgrids.history.versionDiff.fromLabel",
+                  "From version"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: "ghost",
+                "aria-label": tr(
+                  "fluidgrids.history.versionDiff.swap",
+                  "Swap versions"
+                ),
+                onClick: () => {
+                  setFrom(to);
+                  setTo(from);
+                },
+                children: /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              VersionSelect,
+              {
+                versions,
+                value: to,
+                onChange: setTo,
+                label: tr("fluidgrids.history.versionDiff.toLabel", "To version")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: ["from", "to"].map((side) => /* @__PURE__ */ jsx(
+            VersionSide,
+            {
+              tr,
+              side,
+              version: byVersion.get(side === "from" ? from : to),
+              counts,
+              authorName,
+              currentVersion,
+              busy: restoring,
+              onRestore: onRestore ? setRestoreTarget : void 0,
+              onOpenVersion
+            },
+            side
+          )) }),
+          /* @__PURE__ */ jsx(
+            ComparisonBody,
+            {
+              samePair: from === to,
+              loading,
+              error,
+              comparison,
+              onRetry: reload,
+              tab,
+              onTabChange: setTab
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RestoreConfirmDialog,
+      {
+        target: restoreTarget,
+        restoring,
+        className,
+        onCancel: () => setRestoreTarget(null),
+        onConfirm: () => void confirmRestore()
+      }
+    )
+  ] });
+}
+
+export { VersionDiffDialog, VersionLifecycleBar, canvasFromDefinition, countLifecycle, versionsOfWorkflow };