@cyoda/workflow-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2922 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ConflictBanner: () => ConflictBanner,
+  I18nContext: () => I18nContext,
+  SaveConfirmModal: () => SaveConfirmModal,
+  WorkflowEditor: () => WorkflowEditor,
+  defaultMessages: () => defaultMessages,
+  diffSummary: () => diffSummary,
+  mergeMessages: () => mergeMessages,
+  useMessages: () => useMessages,
+  useSaveFlow: () => useSaveFlow
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/WorkflowEditor.tsx
+var import_react9 = require("react");
+
+// src/i18n/context.ts
+var import_react = require("react");
+
+// src/i18n/en.ts
+var defaultMessages = {
+  toolbar: {
+    undo: "Undo",
+    redo: "Redo",
+    validate: "Validate",
+    errors: "errors",
+    warnings: "warnings",
+    infos: "infos",
+    save: "Save",
+    addWorkflow: "Add workflow"
+  },
+  inspector: {
+    empty: "Select a node or edge to edit its properties.",
+    properties: "Properties",
+    json: "JSON",
+    name: "Name",
+    description: "Description",
+    version: "Version",
+    active: "Active",
+    initialState: "Initial state",
+    manual: "Manual",
+    disabled: "Disabled",
+    processors: "Processors",
+    criterion: "Criterion",
+    executionMode: "Execution mode",
+    addProcessor: "Add processor",
+    removeProcessor: "Remove",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    issues: "Issues",
+    sourceAnchor: "Source anchor",
+    targetAnchor: "Target anchor",
+    anchorDefault: "Default",
+    anchorTop: "Top",
+    anchorRight: "Right",
+    anchorBottom: "Bottom",
+    anchorLeft: "Left"
+  },
+  confirmDelete: {
+    title: "Delete state?",
+    message: "Deleting this state will also remove transitions that reference it.",
+    transitionsAffected: "Transitions affected",
+    confirm: "Delete",
+    cancel: "Cancel"
+  },
+  dragConnect: {
+    title: "New transition",
+    transitionName: "Transition name",
+    create: "Create",
+    cancel: "Cancel",
+    invalidName: "Name must start with a letter and contain only letters, digits, underscores, or hyphens.",
+    duplicateName: "A transition with this name already exists on the source state."
+  },
+  tabs: {
+    closeTab: "Close",
+    untitled: "(unnamed)"
+  },
+  saveConfirm: {
+    title: "Save workflows?",
+    modeLabel: "Import mode",
+    ackReplace: "I understand this will REPLACE all workflows on the server for this entity.",
+    ackActivate: "I understand this will ACTIVATE these workflows and deactivate the current set.",
+    ackWarnings: "I acknowledge {count} warning(s) will be saved.",
+    confirm: "Save",
+    cancel: "Cancel"
+  },
+  conflict: {
+    message: "Server state has changed since this editor was opened. Choose Reload to discard local changes or Force overwrite to keep them.",
+    reload: "Reload",
+    forceOverwrite: "Force overwrite"
+  }
+};
+
+// src/i18n/context.ts
+var I18nContext = (0, import_react.createContext)(defaultMessages);
+function useMessages() {
+  return (0, import_react.useContext)(I18nContext);
+}
+function mergeMessages(overrides) {
+  if (!overrides) return defaultMessages;
+  const next = { ...defaultMessages };
+  for (const key of Object.keys(overrides)) {
+    const base = defaultMessages[key] ?? {};
+    const patch = overrides[key] ?? {};
+    next[key] = { ...base, ...patch };
+  }
+  return next;
+}
+
+// src/state/store.ts
+var import_react2 = require("react");
+var import_workflow_core = require("@cyoda/workflow-core");
+var MAX_UNDO = 100;
+function summarize(patch) {
+  switch (patch.op) {
+    case "addWorkflow":
+      return `Add workflow "${patch.workflow.name}"`;
+    case "removeWorkflow":
+      return `Remove workflow "${patch.workflow}"`;
+    case "updateWorkflowMeta":
+      return `Update workflow "${patch.workflow}"`;
+    case "renameWorkflow":
+      return `Rename workflow "${patch.from}" \u2192 "${patch.to}"`;
+    case "setInitialState":
+      return `Set initial state to "${patch.stateCode}"`;
+    case "setWorkflowCriterion":
+      return patch.criterion ? `Set workflow criterion` : `Clear workflow criterion`;
+    case "addState":
+      return `Add state "${patch.stateCode}"`;
+    case "renameState":
+      return `Rename state "${patch.from}" \u2192 "${patch.to}"`;
+    case "removeState":
+      return `Remove state "${patch.stateCode}"`;
+    case "addTransition":
+      return `Add transition "${patch.transition.name}"`;
+    case "updateTransition":
+      return `Update transition`;
+    case "removeTransition":
+      return `Remove transition`;
+    case "reorderTransition":
+      return `Reorder transition`;
+    case "addProcessor":
+      return `Add processor "${patch.processor.name}"`;
+    case "updateProcessor":
+      return `Update processor`;
+    case "removeProcessor":
+      return `Remove processor`;
+    case "reorderProcessor":
+      return `Reorder processor`;
+    case "setCriterion":
+      return patch.criterion ? `Set criterion` : `Clear criterion`;
+    case "setImportMode":
+      return `Set import mode to "${patch.mode}"`;
+    case "setEntity":
+      return patch.entity ? `Set entity` : `Clear entity`;
+    case "replaceSession":
+      return `Replace session`;
+    case "setEdgeAnchors":
+      return patch.anchors ? `Update edge anchors` : `Clear edge anchors`;
+  }
+}
+function pickDefaultActiveWorkflow(doc) {
+  return doc.session.workflows[0]?.name ?? null;
+}
+function useEditorStore(initialDocument, initialMode = "editor") {
+  const [state, setState] = (0, import_react2.useState)(() => ({
+    document: initialDocument,
+    selection: null,
+    activeWorkflow: pickDefaultActiveWorkflow(initialDocument),
+    mode: initialMode,
+    undoStack: [],
+    redoStack: []
+  }));
+  const stateRef = (0, import_react2.useRef)(state);
+  stateRef.current = state;
+  const dispatch = (0, import_react2.useCallback)((patch, summary) => {
+    const current = stateRef.current;
+    if (current.mode === "viewer") return;
+    const nextDoc = (0, import_workflow_core.applyPatch)(current.document, patch);
+    const inverse = (0, import_workflow_core.invertPatch)(current.document, patch);
+    const entry = {
+      forward: patch,
+      inverse,
+      summary: summary ?? summarize(patch)
+    };
+    const undoStack = [...current.undoStack, entry].slice(-MAX_UNDO);
+    setState({
+      ...current,
+      document: nextDoc,
+      undoStack,
+      redoStack: [],
+      activeWorkflow: reconcileActiveWorkflow(current.activeWorkflow, nextDoc),
+      selection: reconcileSelection(current.selection, nextDoc)
+    });
+  }, []);
+  const silentReplace = (0, import_react2.useCallback)((document2, options) => {
+    const current = stateRef.current;
+    if (options?.preserveEditorState) {
+      setState({
+        ...current,
+        document: document2,
+        activeWorkflow: reconcileActiveWorkflow(current.activeWorkflow, document2),
+        selection: reconcileSelection(current.selection, document2)
+      });
+      return;
+    }
+    setState({
+      ...current,
+      document: document2,
+      undoStack: [],
+      redoStack: [],
+      activeWorkflow: pickDefaultActiveWorkflow(document2),
+      selection: null
+    });
+  }, []);
+  const undo = (0, import_react2.useCallback)(() => {
+    const current = stateRef.current;
+    const top = current.undoStack[current.undoStack.length - 1];
+    if (!top) return;
+    const reverted = (0, import_workflow_core.applyPatch)(current.document, top.inverse);
+    setState({
+      ...current,
+      document: reverted,
+      undoStack: current.undoStack.slice(0, -1),
+      redoStack: [...current.redoStack, top],
+      activeWorkflow: reconcileActiveWorkflow(current.activeWorkflow, reverted),
+      selection: reconcileSelection(current.selection, reverted)
+    });
+  }, []);
+  const redo = (0, import_react2.useCallback)(() => {
+    const current = stateRef.current;
+    const top = current.redoStack[current.redoStack.length - 1];
+    if (!top) return;
+    const next = (0, import_workflow_core.applyPatch)(current.document, top.forward);
+    setState({
+      ...current,
+      document: next,
+      undoStack: [...current.undoStack, top],
+      redoStack: current.redoStack.slice(0, -1),
+      activeWorkflow: reconcileActiveWorkflow(current.activeWorkflow, next),
+      selection: reconcileSelection(current.selection, next)
+    });
+  }, []);
+  const setSelection = (0, import_react2.useCallback)((sel) => {
+    setState((s) => ({ ...s, selection: sel }));
+  }, []);
+  const setActiveWorkflow = (0, import_react2.useCallback)((name) => {
+    setState((s) => ({ ...s, activeWorkflow: name, selection: null }));
+  }, []);
+  const setMode = (0, import_react2.useCallback)((mode) => {
+    setState((s) => ({ ...s, mode }));
+  }, []);
+  const actions = (0, import_react2.useMemo)(
+    () => ({ dispatch, silentReplace, undo, redo, setSelection, setActiveWorkflow, setMode }),
+    [dispatch, silentReplace, undo, redo, setSelection, setActiveWorkflow, setMode]
+  );
+  return [state, actions];
+}
+function reconcileActiveWorkflow(current, doc) {
+  if (!current) return doc.session.workflows[0]?.name ?? null;
+  const hit = doc.session.workflows.find((w) => w.name === current);
+  if (hit) return current;
+  return doc.session.workflows[0]?.name ?? null;
+}
+function reconcileSelection(selection, doc) {
+  if (!selection) return null;
+  const { ids } = doc.meta;
+  switch (selection.kind) {
+    case "workflow": {
+      const hit = doc.session.workflows.find((w) => w.name === selection.workflow);
+      return hit ? selection : null;
+    }
+    case "state": {
+      const wf = doc.session.workflows.find((w) => w.name === selection.workflow);
+      if (!wf || !wf.states[selection.stateCode]) return null;
+      return selection;
+    }
+    case "transition":
+      return ids.transitions[selection.transitionUuid] ? selection : null;
+    case "processor":
+      return ids.processors[selection.processorUuid] ? selection : null;
+    case "criterion":
+      return ids.criteria[selection.hostId] || ids.workflows[selection.hostId] || ids.transitions[selection.hostId] ? selection : null;
+  }
+}
+
+// src/state/derive.ts
+var import_workflow_core2 = require("@cyoda/workflow-core");
+var import_workflow_graph = require("@cyoda/workflow-graph");
+function deriveFromDocument(doc) {
+  const issues = (0, import_workflow_core2.validateSession)(doc.session);
+  const graph = (0, import_workflow_graph.projectToGraph)(doc, { issues });
+  let errorCount = 0;
+  let warningCount = 0;
+  let infoCount = 0;
+  for (const issue of issues) {
+    if (issue.severity === "error") errorCount++;
+    else if (issue.severity === "warning") warningCount++;
+    else infoCount++;
+  }
+  return { graph, issues, errorCount, warningCount, infoCount };
+}
+
+// src/components/Canvas.tsx
+var import_react5 = require("react");
+var import_reactflow4 = require("reactflow");
+var import_style = require("reactflow/dist/style.css");
+var import_workflow_layout = require("@cyoda/workflow-layout");
+
+// src/components/ArrowMarkers.tsx
+var import_theme = require("@cyoda/workflow-viewer/theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ArrowMarkers() {
+  const size = import_theme.geometry.edge.arrowheadSize;
+  const colors = Array.from(new Set(Object.values(import_theme.workflowPalette.edge)));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: 0,
+      height: 0,
+      style: { position: "absolute", pointerEvents: "none" },
+      "aria-hidden": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "marker",
+        {
+          id: arrowMarkerId(color),
+          viewBox: `0 0 ${size * 2} ${size * 2}`,
+          refX: size * 1.85,
+          refY: size,
+          markerWidth: size,
+          markerHeight: size,
+          orient: "auto-start-reverse",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: `M 0 ${size / 2} L ${size * 2} ${size} L 0 ${size * 1.5} z`,
+              fill: color
+            }
+          )
+        },
+        color
+      )) })
+    }
+  );
+}
+function arrowMarkerId(color) {
+  return `wf-arrow-${color.replace("#", "").toLowerCase()}`;
+}
+
+// src/components/RfStateNode.tsx
+var import_react3 = require("react");
+var import_reactflow = require("reactflow");
+var import_theme2 = require("@cyoda/workflow-viewer/theme");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function RfStateNodeImpl({ data, selected }) {
+  const { node, hasError, hasWarning, size } = data;
+  const palette = (0, import_theme2.paletteFor)(node);
+  const { radius, strokeWidth } = import_theme2.geometry.node;
+  const width = size?.width ?? import_theme2.geometry.node.width;
+  const height = size?.height ?? import_theme2.geometry.node.height;
+  const category = (0, import_theme2.roleCategoryLabel)(node);
+  const isTerminal = node.role === "terminal" || node.role === "initial-terminal";
+  const borderColor = hasError ? "#DC2626" : hasWarning ? "#D97706" : selected ? import_theme2.workflowPalette.neutrals.slate900 : palette.border;
+  const borderWidth = selected ? strokeWidth + 1 : strokeWidth;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        background: palette.fill,
+        border: `${borderWidth}px solid ${borderColor}`,
+        borderRadius: radius,
+        boxShadow: selected ? "0 2px 4px rgba(15,23,42,0.14)" : "0 1px 2px rgba(15,23,42,0.08)",
+        position: "relative",
+        boxSizing: "border-box",
+        fontFamily: import_theme2.typography.fontFamily,
+        userSelect: "none"
+      },
+      "data-testid": `rf-state-${node.stateCode}`,
+      children: [
+        ANCHOR_SIDES.map(({ side, position }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          AnchorHandle,
+          {
+            side,
+            position,
+            color: palette.border
+          },
+          side
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              gap: 2,
+              padding: "0 8px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    color: palette.meta,
+                    fontSize: import_theme2.typography.stateCategory.size,
+                    fontWeight: import_theme2.typography.stateCategory.weight,
+                    letterSpacing: import_theme2.typography.stateCategory.tracking
+                  },
+                  children: category
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    color: palette.title,
+                    fontFamily: import_theme2.typography.monoFamily,
+                    fontSize: import_theme2.typography.stateTitle.size,
+                    fontWeight: import_theme2.typography.stateTitle.weight,
+                    letterSpacing: import_theme2.typography.stateTitle.tracking,
+                    textAlign: "center",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    maxWidth: "100%"
+                  },
+                  children: node.stateCode
+                }
+              )
+            ]
+          }
+        ),
+        isTerminal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 3,
+              borderRadius: 8,
+              border: `1px solid ${"innerRing" in palette ? palette.innerRing : import_theme2.workflowPalette.neutrals.white75}`,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var ANCHOR_SIDES = [
+  { side: "top", position: import_reactflow.Position.Top },
+  { side: "right", position: import_reactflow.Position.Right },
+  { side: "bottom", position: import_reactflow.Position.Bottom },
+  { side: "left", position: import_reactflow.Position.Left }
+];
+function AnchorHandle({
+  side,
+  position,
+  color
+}) {
+  const isVertical = position === import_reactflow.Position.Top || position === import_reactflow.Position.Bottom;
+  const dotStyle = {
+    position: "absolute",
+    width: 8,
+    height: 8,
+    background: color,
+    borderRadius: "50%",
+    pointerEvents: "none",
+    ...side === "top" ? { top: -4, left: "calc(50% - 4px)" } : side === "bottom" ? { bottom: -4, left: "calc(50% - 4px)" } : side === "left" ? { left: -4, top: "calc(50% - 4px)" } : { right: -4, top: "calc(50% - 4px)" }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_reactflow.Handle,
+      {
+        id: side,
+        type: "source",
+        position,
+        style: {
+          background: "transparent",
+          border: "none",
+          borderRadius: 0,
+          width: isVertical ? "80%" : 16,
+          height: isVertical ? 16 : "80%"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: dotStyle })
+  ] });
+}
+var RfStateNode = (0, import_react3.memo)(RfStateNodeImpl);
+
+// src/components/RfTransitionEdge.tsx
+var import_react4 = require("react");
+var import_reactflow3 = require("reactflow");
+var import_theme3 = require("@cyoda/workflow-viewer/theme");
+
+// src/routing/orthogonal.ts
+var import_reactflow2 = require("reactflow");
+var DEFAULT_TOLERANCE = 6;
+var DEFAULT_STUB = 16;
+function orthogonalEdgePath(input) {
+  const {
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    routePoints,
+    obstacles = [],
+    alignmentTolerance = DEFAULT_TOLERANCE,
+    stubLength = DEFAULT_STUB
+  } = input;
+  if (routePoints && routePoints.length >= 2) {
+    const mid2 = midpoint(routePoints);
+    return {
+      path: polylineToPath(routePoints),
+      labelX: mid2.x,
+      labelY: mid2.y,
+      points: routePoints
+    };
+  }
+  const sx = sourceX;
+  const sy = sourceY;
+  const tx = targetX;
+  const ty = targetY;
+  const sourceNormal = normalOf(sourcePosition);
+  const targetNormal = normalOf(targetPosition);
+  const straight = tryStraight(
+    { x: sx, y: sy },
+    sourceNormal,
+    { x: tx, y: ty },
+    targetNormal,
+    alignmentTolerance
+  );
+  if (straight) {
+    return {
+      path: polylineToPath(straight),
+      labelX: (sx + tx) / 2,
+      labelY: (sy + ty) / 2,
+      points: straight
+    };
+  }
+  const sStub = { x: sx + sourceNormal.x * stubLength, y: sy + sourceNormal.y * stubLength };
+  const tStub = { x: tx + targetNormal.x * stubLength, y: ty + targetNormal.y * stubLength };
+  const sourceAxis = sourceNormal.x !== 0 ? "horizontal" : "vertical";
+  let path;
+  if (sourceAxis === "vertical") {
+    let midY = (sStub.y + tStub.y) / 2;
+    midY = nudgeHorizontalLine(
+      sStub.x,
+      tStub.x,
+      midY,
+      obstacles
+    );
+    path = [
+      { x: sx, y: sy },
+      { x: sStub.x, y: midY },
+      { x: tStub.x, y: midY },
+      { x: tx, y: ty }
+    ];
+  } else {
+    let midX = (sStub.x + tStub.x) / 2;
+    midX = nudgeVerticalLine(
+      sStub.y,
+      tStub.y,
+      midX,
+      obstacles
+    );
+    path = [
+      { x: sx, y: sy },
+      { x: midX, y: sStub.y },
+      { x: midX, y: tStub.y },
+      { x: tx, y: ty }
+    ];
+  }
+  path = simplify(path);
+  const mid = midpoint(path);
+  return {
+    path: polylineToPath(path),
+    labelX: mid.x,
+    labelY: mid.y,
+    points: path
+  };
+}
+function polylineToPath(points) {
+  if (points.length === 0) return "";
+  const [first, ...rest] = points;
+  let d = `M ${first.x} ${first.y}`;
+  for (const p of rest) d += ` L ${p.x} ${p.y}`;
+  return d;
+}
+function normalOf(pos) {
+  switch (pos) {
+    case import_reactflow2.Position.Top:
+      return { x: 0, y: -1 };
+    case import_reactflow2.Position.Right:
+      return { x: 1, y: 0 };
+    case import_reactflow2.Position.Bottom:
+      return { x: 0, y: 1 };
+    case import_reactflow2.Position.Left:
+      return { x: -1, y: 0 };
+  }
+}
+function tryStraight(s, sn, t, tn, tolerance) {
+  if (sn.x + tn.x !== 0 || sn.y + tn.y !== 0) return null;
+  if (sn.x !== 0) {
+    if (Math.abs(s.y - t.y) > tolerance) return null;
+    if (sn.x > 0 && t.x < s.x) return null;
+    if (sn.x < 0 && t.x > s.x) return null;
+    return [
+      { x: s.x, y: s.y },
+      { x: t.x, y: s.y }
+    ];
+  }
+  if (Math.abs(s.x - t.x) > tolerance) return null;
+  if (sn.y > 0 && t.y < s.y) return null;
+  if (sn.y < 0 && t.y > s.y) return null;
+  return [
+    { x: s.x, y: s.y },
+    { x: s.x, y: t.y }
+  ];
+}
+function nudgeHorizontalLine(x1, x2, y, obstacles) {
+  const pad = 8;
+  const loX = Math.min(x1, x2);
+  const hiX = Math.max(x1, x2);
+  for (const o of obstacles) {
+    const ox1 = o.x - pad;
+    const oy1 = o.y - pad;
+    const ox2 = o.x + o.width + pad;
+    const oy2 = o.y + o.height + pad;
+    if (hiX < ox1 || loX > ox2) continue;
+    if (y < oy1 || y > oy2) continue;
+    const above = oy1 - 1;
+    const below = oy2 + 1;
+    y = Math.abs(y - above) < Math.abs(y - below) ? above : below;
+  }
+  return y;
+}
+function nudgeVerticalLine(y1, y2, x, obstacles) {
+  const pad = 8;
+  const loY = Math.min(y1, y2);
+  const hiY = Math.max(y1, y2);
+  for (const o of obstacles) {
+    const ox1 = o.x - pad;
+    const oy1 = o.y - pad;
+    const ox2 = o.x + o.width + pad;
+    const oy2 = o.y + o.height + pad;
+    if (hiY < oy1 || loY > oy2) continue;
+    if (x < ox1 || x > ox2) continue;
+    const left = ox1 - 1;
+    const right = ox2 + 1;
+    x = Math.abs(x - left) < Math.abs(x - right) ? left : right;
+  }
+  return x;
+}
+function simplify(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out[out.length - 1];
+    if (last && last.x === p.x && last.y === p.y) continue;
+    out.push(p);
+  }
+  let i = 1;
+  while (i < out.length - 1) {
+    const a = out[i - 1];
+    const b = out[i];
+    const c = out[i + 1];
+    const colinearX = a.x === b.x && b.x === c.x;
+    const colinearY = a.y === b.y && b.y === c.y;
+    if (colinearX || colinearY) {
+      out.splice(i, 1);
+    } else {
+      i++;
+    }
+  }
+  return out;
+}
+function midpoint(points) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return points[0];
+  let bestLen = -1;
+  let best = points[0];
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    if (len > bestLen) {
+      bestLen = len;
+      best = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    }
+  }
+  return best;
+}
+
+// src/components/RfTransitionEdge.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function RfTransitionEdgeImpl(props) {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data,
+    selected
+  } = props;
+  if (!data) return null;
+  const { edge, targetIsTerminal, routePoints, obstacles } = data;
+  const { path, labelX: fallbackLabelX, labelY: fallbackLabelY } = orthogonalEdgePath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    routePoints,
+    obstacles
+  });
+  const labelX = data.labelX ?? fallbackLabelX;
+  const labelY = data.labelY ?? fallbackLabelY;
+  const color = (0, import_theme3.laneColor)(edge, { targetIsTerminal });
+  const dash = (0, import_theme3.laneDashArray)(edge);
+  const strokeWidth = selected ? import_theme3.geometry.edge.strokeWidth + 1 : edge.isLoopback ? import_theme3.geometry.edge.loopStrokeWidth : import_theme3.geometry.edge.strokeWidth;
+  const isManualSolid = edge.manual && !edge.disabled && !edge.isLoopback;
+  const badges = (0, import_theme3.badgesFor)(edge.summary, {
+    manual: edge.manual,
+    disabled: edge.disabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_reactflow3.BaseEdge,
+      {
+        id,
+        path,
+        style: {
+          stroke: color,
+          strokeWidth,
+          strokeDasharray: dash
+        },
+        markerEnd: `url(#${arrowMarkerId(color)})`
+      }
+    ),
+    isManualSolid && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: import_theme3.workflowPalette.neutrals.white,
+        strokeWidth: 0.6,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactflow3.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          fontFamily: import_theme3.typography.fontFamily,
+          pointerEvents: "all",
+          background: import_theme3.workflowPalette.edgeLabel.fill,
+          border: `1px solid ${import_theme3.workflowPalette.edgeLabel.border}`,
+          borderRadius: import_theme3.geometry.labelPill.radius,
+          padding: `${import_theme3.geometry.labelPill.paddingY}px ${import_theme3.geometry.labelPill.paddingX}px`,
+          boxShadow: "0 1px 2px rgba(15,23,42,0.08)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 3,
+          minWidth: 40,
+          width: data.labelWidth
+        },
+        className: "nodrag nopan",
+        "data-testid": `rf-edge-label-${edge.id}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                color: import_theme3.workflowPalette.edgeLabel.text,
+                fontSize: import_theme3.typography.edgeLabel.size,
+                fontWeight: import_theme3.typography.edgeLabel.weight,
+                letterSpacing: import_theme3.typography.edgeLabel.tracking,
+                textTransform: "uppercase"
+              },
+              children: edge.summary.display
+            }
+          ),
+          badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: 3, flexWrap: "wrap", justifyContent: "center" }, children: badges.map((b, i) => {
+            const slot = b.key === "manual" ? import_theme3.workflowPalette.badge.manual : b.key === "processor" || b.key === "execution" ? import_theme3.workflowPalette.badge.processor : b.key === "criterion" ? import_theme3.workflowPalette.badge.criterion : import_theme3.workflowPalette.badge.disabled;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                style: {
+                  background: slot.fill,
+                  border: `1px solid ${slot.border}`,
+                  color: import_theme3.workflowPalette.badge.text,
+                  fontSize: import_theme3.typography.badge.size,
+                  fontWeight: import_theme3.typography.badge.weight,
+                  letterSpacing: import_theme3.typography.badge.tracking,
+                  padding: "1px 4px",
+                  borderRadius: 8
+                },
+                children: b.label
+              },
+              `${b.key}-${i}`
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+}
+var RfTransitionEdge = (0, import_react4.memo)(RfTransitionEdgeImpl);
+
+// src/components/Canvas.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var nodeTypes = { stateNode: RfStateNode };
+var edgeTypes = { transition: RfTransitionEdge };
+function toRfNodes(graph, layout, activeWorkflow, issuesByNode, selection) {
+  return graph.nodes.filter((n) => n.kind === "state").filter((n) => !activeWorkflow || n.workflow === activeWorkflow).map((n) => {
+    const pos = layout.positions.get(n.id);
+    const nodeIssues = issuesByNode.get(n.id) ?? [];
+    const hasError = nodeIssues.some((i) => i.severity === "error");
+    const hasWarning = nodeIssues.some((i) => i.severity === "warning");
+    const selected = selection?.kind === "state" && selection.nodeId === n.id;
+    const size = pos ? { width: pos.width, height: pos.height } : (0, import_workflow_layout.estimateNodeSize)(n.stateCode);
+    return {
+      id: n.id,
+      type: "stateNode",
+      data: { node: n, hasError, hasWarning, size },
+      position: pos ? { x: pos.x, y: pos.y } : { x: 0, y: 0 },
+      selected,
+      // width/height on the node object tells ReactFlow the dimensions
+      // before ResizeObserver fires. fitView's nodesInitialized guard
+      // (nodes.every(n => n.width && n.height)) requires these to be set
+      // or it returns false and leaves the viewport at {x:0, y:0, zoom:1}.
+      width: size.width,
+      height: size.height,
+      style: { width: size.width, height: size.height }
+    };
+  });
+}
+function toRfEdges(graph, layout, activeWorkflow, selection, orientation) {
+  const stateById = new Map(
+    graph.nodes.filter((n) => n.kind === "state").map((n) => [n.id, n])
+  );
+  const allObstacles = Array.from(layout.positions.values()).map((p) => ({
+    id: p.id,
+    x: p.x,
+    y: p.y,
+    width: p.width,
+    height: p.height
+  }));
+  return graph.edges.filter((e) => e.kind === "transition").filter((e) => !activeWorkflow || e.workflow === activeWorkflow).map((e) => {
+    const target = stateById.get(e.targetId);
+    const targetIsTerminal = target?.role === "terminal" || target?.role === "initial-terminal";
+    const selected = selection?.kind === "transition" && selection.transitionUuid === e.id;
+    const route = layout.edges.get(e.id);
+    const routePoints = route?.points;
+    const obstacles = allObstacles.filter(
+      (o) => o.id !== e.sourceId && o.id !== e.targetId
+    );
+    const isHorizontalBackEdge = !e.isSelf && orientation === "horizontal" && (layout.positions.get(e.sourceId)?.x ?? 0) > (layout.positions.get(e.targetId)?.x ?? 0);
+    return {
+      id: e.id,
+      source: e.sourceId,
+      target: e.targetId,
+      sourceHandle: anchorHandleId(e.sourceAnchor, "source", orientation, isHorizontalBackEdge),
+      targetHandle: anchorHandleId(e.targetAnchor, "target", orientation, isHorizontalBackEdge),
+      type: "transition",
+      data: {
+        edge: e,
+        targetIsTerminal: !!targetIsTerminal,
+        routePoints,
+        labelX: route?.labelX,
+        labelY: route?.labelY,
+        labelWidth: route?.labelWidth,
+        labelHeight: route?.labelHeight,
+        obstacles
+      },
+      selected
+    };
+  });
+}
+function anchorHandleId(anchor, role, orientation, isBackEdge = false) {
+  if (anchor) return anchor;
+  if (orientation === "horizontal") {
+    if (isBackEdge) return "bottom";
+    return role === "source" ? "right" : "left";
+  }
+  return role === "source" ? "bottom" : "top";
+}
+function groupIssuesByNode(graph, issues) {
+  const byNode = /* @__PURE__ */ new Map();
+  for (const ann of graph.annotations) {
+    const list = byNode.get(ann.targetId) ?? [];
+    const issue = issues.find((i) => i.code === ann.code);
+    if (issue) list.push(issue);
+    byNode.set(ann.targetId, list);
+  }
+  return byNode;
+}
+function CanvasInner({
+  graph,
+  issues,
+  activeWorkflow,
+  selection,
+  layoutOptions,
+  savedViewport,
+  onSelectionChange,
+  onViewportChange,
+  onConnect,
+  readOnly
+}) {
+  const [layout, setLayout] = (0, import_react5.useState)(null);
+  const rf = (0, import_reactflow4.useReactFlow)();
+  const preset = layoutOptions?.preset ?? "configuratorReadable";
+  const orientation = layoutOptions?.orientation ?? "vertical";
+  const elkOverrides = layoutOptions?.elk;
+  const nodeSize = layoutOptions?.nodeSize;
+  const pinned = layoutOptions?.pinned;
+  const effectiveOpts = (0, import_react5.useMemo)(
+    () => ({ preset, orientation, elk: elkOverrides, nodeSize, pinned }),
+    // elkOverrides / nodeSize / pinned are objects; they are rarely supplied
+    // in practice, so a reference change there is an intentional re-layout.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preset, orientation, elkOverrides, nodeSize, pinned]
+  );
+  const orientationAtLayoutRef = (0, import_react5.useRef)(orientation);
+  (0, import_react5.useEffect)(() => {
+    let cancelled = false;
+    orientationAtLayoutRef.current = orientation;
+    (0, import_workflow_layout.layoutGraph)(graph, effectiveOpts).then((result) => {
+      if (!cancelled) setLayout(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [graph, effectiveOpts, orientation]);
+  const lastHandledViewportKeyRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!layout) return;
+    const viewportKey = `${activeWorkflow ?? "__all__"}:${orientationAtLayoutRef.current}`;
+    if (lastHandledViewportKeyRef.current === viewportKey) return;
+    const rafId = requestAnimationFrame(() => {
+      if (savedViewport) {
+        void rf.setViewport(savedViewport, { duration: 0 });
+        lastHandledViewportKeyRef.current = viewportKey;
+      } else {
+        const stateCount = graph.nodes.filter(
+          (node) => node.kind === "state" && (!activeWorkflow || node.workflow === activeWorkflow)
+        ).length;
+        const fitOptions = stateCount <= 6 ? { padding: 0.12, maxZoom: 1 } : { padding: 0.12 };
+        const fitted = rf.fitView(fitOptions);
+        if (fitted) lastHandledViewportKeyRef.current = viewportKey;
+      }
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [activeWorkflow, graph.nodes, layout, rf, savedViewport]);
+  const issuesByNode = (0, import_react5.useMemo)(() => groupIssuesByNode(graph, issues), [graph, issues]);
+  const nodes = (0, import_react5.useMemo)(
+    () => layout ? toRfNodes(graph, layout, activeWorkflow, issuesByNode, selection) : [],
+    [graph, layout, activeWorkflow, issuesByNode, selection]
+  );
+  const edges = (0, import_react5.useMemo)(
+    () => layout ? toRfEdges(graph, layout, activeWorkflow, selection, orientation) : [],
+    [graph, layout, activeWorkflow, selection, orientation]
+  );
+  const onNodeClick = (_, node) => {
+    const data = node.data;
+    onSelectionChange({
+      kind: "state",
+      workflow: data.node.workflow,
+      stateCode: data.node.stateCode,
+      nodeId: data.node.id
+    });
+  };
+  const onEdgeClick = (_, edge) => {
+    onSelectionChange({ kind: "transition", transitionUuid: edge.id });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: "100%", height: "100%" }, "data-testid": "workflow-canvas", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowMarkers, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_reactflow4.ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes,
+        edgeTypes,
+        onNodeClick,
+        onEdgeClick,
+        onPaneClick: () => onSelectionChange(null),
+        onConnect: readOnly ? void 0 : onConnect,
+        connectionMode: import_reactflow4.ConnectionMode.Loose,
+        nodesDraggable: !readOnly,
+        nodesConnectable: !readOnly,
+        elementsSelectable: true,
+        snapToGrid: true,
+        snapGrid: [16, 16],
+        minZoom: 0.1,
+        maxZoom: 4,
+        onMoveEnd: (_, viewport) => {
+          if (layout) onViewportChange?.(viewport);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactflow4.Background, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactflow4.Controls, { showInteractive: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactflow4.MiniMap, { zoomable: true, pannable: true })
+        ]
+      }
+    )
+  ] });
+}
+function Canvas(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactflow4.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasInner, { ...props }) });
+}
+
+// src/components/resolveConnection.ts
+function resolveConnection(doc, connection) {
+  const { source, target } = connection;
+  if (!source || !target) return null;
+  const sourcePtr = doc.meta.ids.states[source];
+  const targetPtr = doc.meta.ids.states[target];
+  if (!sourcePtr || !targetPtr) return null;
+  if (sourcePtr.workflow !== targetPtr.workflow) return null;
+  return {
+    workflow: sourcePtr.workflow,
+    fromState: sourcePtr.state,
+    toState: targetPtr.state
+  };
+}
+
+// src/inspector/Inspector.tsx
+var import_react6 = require("react");
+var import_workflow_core3 = require("@cyoda/workflow-core");
+
+// src/inspector/resolve.ts
+function transitionUuidsInOrder(doc, workflow, state) {
+  const uuids = [];
+  for (const [uuid, ptr] of Object.entries(doc.meta.ids.transitions)) {
+    if (ptr.workflow === workflow && ptr.state === state) uuids.push(uuid);
+  }
+  return uuids;
+}
+function processorUuidsInOrder(doc, transitionUuid) {
+  const uuids = [];
+  for (const [uuid, ptr] of Object.entries(doc.meta.ids.processors)) {
+    if (ptr.transitionUuid === transitionUuid) uuids.push(uuid);
+  }
+  return uuids;
+}
+function resolveSelection(doc, selection) {
+  if (!selection) return null;
+  switch (selection.kind) {
+    case "workflow": {
+      const workflow = doc.session.workflows.find((w) => w.name === selection.workflow);
+      return workflow ? { kind: "workflow", workflow } : null;
+    }
+    case "state": {
+      const workflow = doc.session.workflows.find((w) => w.name === selection.workflow);
+      if (!workflow) return null;
+      const state = workflow.states[selection.stateCode];
+      if (!state) return null;
+      return { kind: "state", workflow, stateCode: selection.stateCode, state };
+    }
+    case "transition": {
+      const ptr = doc.meta.ids.transitions[selection.transitionUuid];
+      if (!ptr) return null;
+      const workflow = doc.session.workflows.find((w) => w.name === ptr.workflow);
+      if (!workflow) return null;
+      const state = workflow.states[ptr.state];
+      if (!state) return null;
+      const orderedUuids = transitionUuidsInOrder(doc, ptr.workflow, ptr.state);
+      const index = orderedUuids.indexOf(selection.transitionUuid);
+      if (index < 0) return null;
+      const transition = state.transitions[index];
+      if (!transition) return null;
+      return {
+        kind: "transition",
+        workflow,
+        stateCode: ptr.state,
+        transition,
+        transitionUuid: selection.transitionUuid,
+        transitionIndex: index
+      };
+    }
+    case "processor": {
+      const ptr = doc.meta.ids.processors[selection.processorUuid];
+      if (!ptr) return null;
+      const workflow = doc.session.workflows.find((w) => w.name === ptr.workflow);
+      if (!workflow) return null;
+      const state = workflow.states[ptr.state];
+      if (!state) return null;
+      const txUuids = transitionUuidsInOrder(doc, ptr.workflow, ptr.state);
+      const txIndex = txUuids.indexOf(ptr.transitionUuid);
+      if (txIndex < 0) return null;
+      const transition = state.transitions[txIndex];
+      if (!transition) return null;
+      const procUuids = processorUuidsInOrder(doc, ptr.transitionUuid);
+      const procIndex = procUuids.indexOf(selection.processorUuid);
+      if (procIndex < 0) return null;
+      const processor = transition.processors?.[procIndex];
+      if (!processor) return null;
+      return {
+        kind: "processor",
+        workflow,
+        stateCode: ptr.state,
+        transition,
+        transitionUuid: ptr.transitionUuid,
+        processor,
+        processorUuid: selection.processorUuid,
+        processorIndex: procIndex
+      };
+    }
+    case "criterion":
+      return null;
+  }
+}
+
+// src/inspector/fields.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TextField({
+  label,
+  value,
+  onCommit,
+  disabled,
+  placeholder,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: labelStyle, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "input",
+      {
+        type: "text",
+        defaultValue: value,
+        disabled,
+        placeholder,
+        "data-testid": testId,
+        onBlur: (e) => {
+          if (e.target.value !== value) onCommit(e.target.value);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") e.target.blur();
+        },
+        style: inputStyle
+      }
+    )
+  ] });
+}
+function CheckboxField({
+  label,
+  checked,
+  onChange,
+  disabled,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { ...rowStyle, flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        "data-testid": testId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { ...labelStyle, marginBottom: 0 }, children: label })
+  ] });
+}
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+  disabled,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: labelStyle, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "select",
+      {
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        "data-testid": testId,
+        style: inputStyle,
+        children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: o.value, children: o.label }, o.value))
+      }
+    )
+  ] });
+}
+function FieldGroup({ title, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "#475569" }, children: title }),
+    children
+  ] });
+}
+var rowStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+};
+var labelStyle = {
+  fontSize: 12,
+  color: "#475569",
+  marginBottom: 2
+};
+var inputStyle = {
+  padding: "6px 8px",
+  fontSize: 13,
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  background: "white"
+};
+
+// src/inspector/WorkflowForm.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function WorkflowForm({
+  workflow,
+  disabled,
+  onDispatch
+}) {
+  const messages = useMessages();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextField,
+      {
+        label: messages.inspector.name,
+        value: workflow.name,
+        disabled,
+        onCommit: (next) => next !== workflow.name && onDispatch({ op: "renameWorkflow", from: workflow.name, to: next }),
+        testId: "inspector-workflow-name"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextField,
+      {
+        label: messages.inspector.version,
+        value: workflow.version,
+        disabled,
+        onCommit: (next) => onDispatch({
+          op: "updateWorkflowMeta",
+          workflow: workflow.name,
+          updates: { version: next }
+        }),
+        testId: "inspector-workflow-version"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextField,
+      {
+        label: messages.inspector.description,
+        value: workflow.desc ?? "",
+        disabled,
+        onCommit: (next) => onDispatch({
+          op: "updateWorkflowMeta",
+          workflow: workflow.name,
+          updates: { desc: next === "" ? void 0 : next }
+        }),
+        testId: "inspector-workflow-desc"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CheckboxField,
+      {
+        label: messages.inspector.active,
+        checked: workflow.active,
+        disabled,
+        onChange: (next) => onDispatch({
+          op: "updateWorkflowMeta",
+          workflow: workflow.name,
+          updates: { active: next }
+        }),
+        testId: "inspector-workflow-active"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextField,
+      {
+        label: messages.inspector.initialState,
+        value: workflow.initialState,
+        disabled,
+        onCommit: (next) => onDispatch({
+          op: "setInitialState",
+          workflow: workflow.name,
+          stateCode: next
+        }),
+        testId: "inspector-workflow-initial"
+      }
+    )
+  ] });
+}
+
+// src/inspector/StateForm.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function StateForm({
+  workflow,
+  stateCode,
+  state,
+  disabled,
+  onDispatch,
+  onRequestDelete
+}) {
+  const messages = useMessages();
+  const transitionCount = state.transitions.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      TextField,
+      {
+        label: messages.inspector.name,
+        value: stateCode,
+        disabled,
+        onCommit: (next) => next !== stateCode && onDispatch({
+          op: "renameState",
+          workflow: workflow.name,
+          from: stateCode,
+          to: next
+        }),
+        testId: "inspector-state-name"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { fontSize: 12, color: "#475569" }, children: [
+      transitionCount,
+      " outgoing transition",
+      transitionCount === 1 ? "" : "s",
+      "."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onRequestDelete,
+        disabled,
+        "data-testid": "inspector-state-delete",
+        style: dangerBtn,
+        children: "Delete state\u2026"
+      }
+    )
+  ] });
+}
+var dangerBtn = {
+  alignSelf: "flex-start",
+  padding: "6px 10px",
+  background: "#FEF2F2",
+  border: "1px solid #FCA5A5",
+  color: "#B91C1C",
+  borderRadius: 4,
+  fontSize: 13,
+  cursor: "pointer"
+};
+
+// src/inspector/TransitionForm.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TransitionForm({
+  workflow,
+  stateCode,
+  transition,
+  transitionUuid,
+  transitionIndex,
+  anchors,
+  disabled,
+  onDispatch,
+  onSelectProcessor
+}) {
+  const messages = useMessages();
+  const update = (updates) => onDispatch({ op: "updateTransition", transitionUuid, updates });
+  const removeTransition = () => onDispatch({ op: "removeTransition", transitionUuid });
+  const setAnchor = (role, next) => {
+    const current = anchors ?? {};
+    const updated = { ...current };
+    if (next === "") delete updated[role];
+    else updated[role] = next;
+    const isEmpty = updated.source === void 0 && updated.target === void 0;
+    onDispatch({
+      op: "setEdgeAnchors",
+      transitionUuid,
+      anchors: isEmpty ? null : updated
+    });
+  };
+  const reorder = (direction) => {
+    const toIndex = transitionIndex + direction;
+    if (toIndex < 0) return;
+    onDispatch({
+      op: "reorderTransition",
+      workflow: workflow.name,
+      fromState: stateCode,
+      transitionUuid,
+      toIndex
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      TextField,
+      {
+        label: messages.inspector.name,
+        value: transition.name,
+        disabled,
+        onCommit: (next) => update({ name: next }),
+        testId: "inspector-transition-name"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      TextField,
+      {
+        label: "Target state",
+        value: transition.next,
+        disabled,
+        onCommit: (next) => update({ next }),
+        testId: "inspector-transition-next"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CheckboxField,
+      {
+        label: messages.inspector.manual,
+        checked: transition.manual,
+        disabled,
+        onChange: (next) => update({ manual: next }),
+        testId: "inspector-transition-manual"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CheckboxField,
+      {
+        label: messages.inspector.disabled,
+        checked: transition.disabled,
+        disabled,
+        onChange: (next) => update({ disabled: next }),
+        testId: "inspector-transition-disabled"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      AnchorSelect,
+      {
+        label: messages.inspector.sourceAnchor,
+        value: anchors?.source,
+        disabled,
+        messages,
+        onChange: (next) => setAnchor("source", next),
+        testId: "inspector-transition-source-anchor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      AnchorSelect,
+      {
+        label: messages.inspector.targetAnchor,
+        value: anchors?.target,
+        disabled,
+        messages,
+        onChange: (next) => setAnchor("target", next),
+        testId: "inspector-transition-target-anchor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", disabled, onClick: () => reorder(-1), style: ghostBtn, children: messages.inspector.moveUp }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", disabled, onClick: () => reorder(1), style: ghostBtn, children: messages.inspector.moveDown }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: removeTransition,
+          style: dangerBtn2,
+          "data-testid": "inspector-transition-delete",
+          children: "Delete"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "#475569" }, children: messages.inspector.processors }),
+      (transition.processors ?? []).map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onSelectProcessor(`__ordinal:${transitionUuid}:${i}`);
+          },
+          style: processorBtn,
+          "data-testid": `inspector-processor-${i}`,
+          children: p.name
+        },
+        `${p.name}-${i}`
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => onDispatch({
+            op: "addProcessor",
+            transitionUuid,
+            processor: {
+              type: "externalized",
+              name: "newProcessor",
+              executionMode: "ASYNC_NEW_TX",
+              config: {
+                attachEntity: false,
+                responseTimeoutMs: 5e3
+              }
+            }
+          }),
+          style: ghostBtn,
+          "data-testid": "inspector-add-processor",
+          children: messages.inspector.addProcessor
+        }
+      )
+    ] })
+  ] });
+}
+var ghostBtn = {
+  padding: "4px 8px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: "pointer"
+};
+var dangerBtn2 = {
+  ...ghostBtn,
+  background: "#FEF2F2",
+  borderColor: "#FCA5A5",
+  color: "#B91C1C"
+};
+var processorBtn = {
+  ...ghostBtn,
+  textAlign: "left",
+  background: "#F8FAFC"
+};
+function AnchorSelect({
+  label,
+  value,
+  disabled,
+  messages,
+  onChange,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "label",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        fontSize: 12,
+        color: "#334155"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontWeight: 500 }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "select",
+          {
+            value: value ?? "",
+            disabled,
+            onChange: (event) => onChange(event.target.value === "" ? "" : event.target.value),
+            "data-testid": testId,
+            style: {
+              padding: "4px 6px",
+              border: "1px solid #CBD5E1",
+              borderRadius: 4,
+              background: "white",
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: messages.inspector.anchorDefault }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "top", children: messages.inspector.anchorTop }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "right", children: messages.inspector.anchorRight }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "bottom", children: messages.inspector.anchorBottom }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "left", children: messages.inspector.anchorLeft })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/inspector/ProcessorForm.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var EXECUTION_MODES = [
+  { value: "ASYNC_NEW_TX", label: "ASYNC_NEW_TX" },
+  { value: "ASYNC_SAME_TX", label: "ASYNC_SAME_TX" },
+  { value: "SYNC", label: "SYNC" }
+];
+function ProcessorForm({
+  processor,
+  processorUuid,
+  processorIndex,
+  transitionUuid,
+  disabled,
+  onDispatch
+}) {
+  const messages = useMessages();
+  const update = (updates) => onDispatch({ op: "updateProcessor", processorUuid, updates });
+  const isExternalized = processor.type === "externalized";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      TextField,
+      {
+        label: messages.inspector.name,
+        value: processor.name,
+        disabled,
+        onCommit: (next) => update({ name: next }),
+        testId: "inspector-processor-name"
+      }
+    ),
+    isExternalized && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SelectField,
+        {
+          label: messages.inspector.executionMode,
+          value: processor.executionMode ?? "ASYNC_NEW_TX",
+          options: EXECUTION_MODES,
+          disabled,
+          onChange: (next) => update({ executionMode: next }),
+          testId: "inspector-processor-execmode"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        CheckboxField,
+        {
+          label: "Attach entity",
+          checked: processor.config?.attachEntity ?? false,
+          disabled,
+          onChange: (next) => update({
+            config: { ...processor.config ?? {}, attachEntity: next }
+          }),
+          testId: "inspector-processor-attachentity"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        TextField,
+        {
+          label: "Response timeout (ms)",
+          value: String(processor.config?.responseTimeoutMs ?? 5e3),
+          disabled,
+          onCommit: (next) => {
+            const parsed = Number.parseInt(next, 10);
+            if (!Number.isFinite(parsed)) return;
+            update({
+              config: { ...processor.config ?? {}, responseTimeoutMs: parsed }
+            });
+          },
+          testId: "inspector-processor-timeout"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || processorIndex === 0,
+          onClick: () => onDispatch({
+            op: "reorderProcessor",
+            transitionUuid,
+            processorUuid,
+            toIndex: processorIndex - 1
+          }),
+          style: ghostBtn2,
+          children: messages.inspector.moveUp
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => onDispatch({
+            op: "reorderProcessor",
+            transitionUuid,
+            processorUuid,
+            toIndex: processorIndex + 1
+          }),
+          style: ghostBtn2,
+          children: messages.inspector.moveDown
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => onDispatch({ op: "removeProcessor", processorUuid }),
+          style: dangerBtn3,
+          "data-testid": "inspector-processor-delete",
+          children: messages.inspector.removeProcessor
+        }
+      )
+    ] })
+  ] });
+}
+var ghostBtn2 = {
+  padding: "4px 8px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: "pointer"
+};
+var dangerBtn3 = {
+  ...ghostBtn2,
+  background: "#FEF2F2",
+  borderColor: "#FCA5A5",
+  color: "#B91C1C"
+};
+
+// src/inspector/Inspector.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function issueKeyForSelection(selection) {
+  if (!selection) return null;
+  switch (selection.kind) {
+    case "workflow":
+      return selection.workflow;
+    case "state":
+      return selection.nodeId;
+    case "transition":
+      return selection.transitionUuid;
+    case "processor":
+      return selection.processorUuid;
+    case "criterion":
+      return selection.hostId;
+  }
+}
+function Inspector({
+  document: doc,
+  selection,
+  issues,
+  readOnly,
+  onDispatch,
+  onSelectionChange,
+  onRequestDeleteState
+}) {
+  const messages = useMessages();
+  const [tab, setTab] = (0, import_react6.useState)("properties");
+  const resolved = (0, import_react6.useMemo)(() => resolveSelection(doc, selection), [doc, selection]);
+  const selectionIssueKey = issueKeyForSelection(selection);
+  const selectionIssues = (0, import_react6.useMemo)(() => {
+    if (!selectionIssueKey) return [];
+    return issues.filter((i) => i.targetId === selectionIssueKey);
+  }, [issues, selectionIssueKey]);
+  const breadcrumb = renderBreadcrumb(resolved);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "aside",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        background: "#F8FAFC",
+        borderLeft: "1px solid #E2E8F0",
+        minWidth: 280
+      },
+      "data-testid": "inspector",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "header",
+          {
+            style: {
+              padding: "10px 12px",
+              borderBottom: "1px solid #E2E8F0",
+              fontSize: 12,
+              color: "#475569"
+            },
+            children: breadcrumb
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", borderBottom: "1px solid #E2E8F0" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabButton, { active: tab === "properties", onClick: () => setTab("properties"), children: messages.inspector.properties }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabButton, { active: tab === "json", onClick: () => setTab("json"), children: messages.inspector.json })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { padding: 12, overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: 16 }, children: [
+          tab === "properties" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            !resolved && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EmptyState, { message: messages.inspector.empty }),
+            resolved?.kind === "workflow" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WorkflowForm, { workflow: resolved.workflow, disabled: readOnly, onDispatch }),
+            resolved?.kind === "state" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              StateForm,
+              {
+                workflow: resolved.workflow,
+                stateCode: resolved.stateCode,
+                state: resolved.state,
+                disabled: readOnly,
+                onDispatch,
+                onRequestDelete: () => onRequestDeleteState(resolved.workflow.name, resolved.stateCode)
+              }
+            ),
+            resolved?.kind === "transition" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              TransitionForm,
+              {
+                workflow: resolved.workflow,
+                stateCode: resolved.stateCode,
+                transition: resolved.transition,
+                transitionUuid: resolved.transitionUuid,
+                transitionIndex: resolved.transitionIndex,
+                anchors: doc.meta.workflowUi[resolved.workflow.name]?.edgeAnchors?.[resolved.transitionUuid],
+                disabled: readOnly,
+                onDispatch,
+                onSelectProcessor: (ordinalKey) => {
+                  const [, transitionUuid, indexStr] = ordinalKey.split(":");
+                  if (!transitionUuid || !indexStr) return;
+                  const procUuids = processorUuidsInOrder(doc, transitionUuid);
+                  const uuid = procUuids[Number.parseInt(indexStr, 10)];
+                  if (uuid) onSelectionChange({ kind: "processor", processorUuid: uuid });
+                }
+              }
+            ),
+            resolved?.kind === "processor" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ProcessorForm,
+              {
+                processor: resolved.processor,
+                processorUuid: resolved.processorUuid,
+                processorIndex: resolved.processorIndex,
+                transitionUuid: resolved.transitionUuid,
+                disabled: readOnly,
+                onDispatch
+              }
+            )
+          ] }),
+          tab === "json" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(JsonPreview, { document: doc, resolved }),
+          selectionIssues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IssuesList, { issues: selectionIssues, title: messages.inspector.issues })
+        ] })
+      ]
+    }
+  );
+}
+function renderBreadcrumb(resolved) {
+  if (!resolved) return "";
+  if (resolved.kind === "workflow") return resolved.workflow.name;
+  if (resolved.kind === "state")
+    return `${resolved.workflow.name} \u203A ${resolved.stateCode}`;
+  if (resolved.kind === "transition")
+    return `${resolved.workflow.name} \u203A ${resolved.stateCode} \u203A ${resolved.transition.name}`;
+  if (resolved.kind === "processor")
+    return `${resolved.workflow.name} \u203A ${resolved.stateCode} \u203A ${resolved.transition.name} \u203A ${resolved.processor.name}`;
+  return "";
+}
+function TabButton({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: {
+        flex: 1,
+        padding: "8px 12px",
+        background: active ? "white" : "transparent",
+        border: "none",
+        borderBottom: active ? "2px solid #0F172A" : "2px solid transparent",
+        fontSize: 13,
+        fontWeight: active ? 600 : 400,
+        cursor: "pointer"
+      },
+      children
+    }
+  );
+}
+function EmptyState({ message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { color: "#64748B", fontSize: 13 }, children: message });
+}
+function IssuesList({
+  issues,
+  title
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "#475569" }, children: title }),
+    issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        style: {
+          padding: 8,
+          border: `1px solid ${severityBorder(issue.severity)}`,
+          background: severityBackground(issue.severity),
+          borderRadius: 4,
+          fontSize: 12
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: issue.code }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: issue.message })
+        ]
+      },
+      `${issue.code}-${i}`
+    ))
+  ] });
+}
+function severityBorder(severity) {
+  if (severity === "error") return "#FCA5A5";
+  if (severity === "warning") return "#FCD34D";
+  return "#93C5FD";
+}
+function severityBackground(severity) {
+  if (severity === "error") return "#FEF2F2";
+  if (severity === "warning") return "#FFFBEB";
+  return "#EFF6FF";
+}
+function JsonPreview({
+  document: doc,
+  resolved
+}) {
+  const json = (0, import_react6.useMemo)(() => {
+    if (!resolved) return (0, import_workflow_core3.serializeEditorDocument)(doc);
+    if (resolved.kind === "workflow") return JSON.stringify(resolved.workflow, null, 2);
+    if (resolved.kind === "state") return JSON.stringify(resolved.state, null, 2);
+    if (resolved.kind === "transition") return JSON.stringify(resolved.transition, null, 2);
+    if (resolved.kind === "processor") return JSON.stringify(resolved.processor, null, 2);
+    return "";
+  }, [doc, resolved]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "pre",
+    {
+      style: {
+        fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
+        fontSize: 12,
+        margin: 0,
+        padding: 8,
+        background: "white",
+        border: "1px solid #E2E8F0",
+        borderRadius: 4,
+        maxHeight: 480,
+        overflow: "auto"
+      },
+      "data-testid": "inspector-json",
+      children: json
+    }
+  );
+}
+
+// src/toolbar/Toolbar.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Toolbar({
+  derived,
+  canUndo,
+  canRedo,
+  readOnly,
+  onUndo,
+  onRedo,
+  onSave
+}) {
+  const messages = useMessages();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "header",
+    {
+      style: {
+        padding: "8px 12px",
+        borderBottom: "1px solid #E2E8F0",
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        background: "white"
+      },
+      "data-testid": "toolbar",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onUndo,
+            disabled: !canUndo || readOnly,
+            style: btnStyle,
+            "data-testid": "toolbar-undo",
+            children: messages.toolbar.undo
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onRedo,
+            disabled: !canRedo || readOnly,
+            style: btnStyle,
+            "data-testid": "toolbar-redo",
+            children: messages.toolbar.redo
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ValidationPill,
+          {
+            count: derived.errorCount,
+            label: messages.toolbar.errors,
+            background: "#FEF2F2",
+            borderColor: "#FCA5A5",
+            color: "#B91C1C",
+            testId: "toolbar-errors"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ValidationPill,
+          {
+            count: derived.warningCount,
+            label: messages.toolbar.warnings,
+            background: "#FFFBEB",
+            borderColor: "#FCD34D",
+            color: "#B45309",
+            testId: "toolbar-warnings"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ValidationPill,
+          {
+            count: derived.infoCount,
+            label: messages.toolbar.infos,
+            background: "#EFF6FF",
+            borderColor: "#93C5FD",
+            color: "#1D4ED8",
+            testId: "toolbar-infos"
+          }
+        ),
+        onSave && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSave,
+            disabled: readOnly || derived.errorCount > 0,
+            style: { ...btnStyle, background: "#0F172A", color: "white", borderColor: "#0F172A" },
+            "data-testid": "toolbar-save",
+            children: messages.toolbar.save
+          }
+        )
+      ]
+    }
+  );
+}
+function ValidationPill({
+  count,
+  label,
+  background,
+  borderColor,
+  color,
+  testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "span",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `${count} ${label}`,
+      style: {
+        padding: "3px 8px",
+        background,
+        border: `1px solid ${borderColor}`,
+        color,
+        borderRadius: 999,
+        fontSize: 12,
+        fontWeight: 600
+      },
+      "data-testid": testId,
+      children: [
+        count,
+        " ",
+        label
+      ]
+    }
+  );
+}
+var btnStyle = {
+  padding: "4px 10px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 13,
+  cursor: "pointer"
+};
+
+// src/toolbar/WorkflowTabs.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function WorkflowTabs({
+  workflows,
+  activeWorkflow,
+  onSelect,
+  onAdd,
+  onClose,
+  readOnly
+}) {
+  const messages = useMessages();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "nav",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "6px 12px",
+        borderBottom: "1px solid #E2E8F0",
+        background: "#F8FAFC",
+        overflowX: "auto"
+      },
+      "data-testid": "workflow-tabs",
+      children: [
+        workflows.map((w) => {
+          const active = w.name === activeWorkflow;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                borderRadius: 4,
+                border: `1px solid ${active ? "#0F172A" : "#CBD5E1"}`,
+                background: active ? "white" : "transparent"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSelect(w.name),
+                    style: {
+                      padding: "4px 10px",
+                      background: "transparent",
+                      border: "none",
+                      fontSize: 13,
+                      fontWeight: active ? 600 : 400,
+                      cursor: "pointer"
+                    },
+                    "data-testid": `tab-${w.name}`,
+                    children: w.name || messages.tabs.untitled
+                  }
+                ),
+                onClose && !readOnly && workflows.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onClose(w.name),
+                    style: {
+                      padding: "0 8px",
+                      background: "transparent",
+                      border: "none",
+                      color: "#64748B",
+                      cursor: "pointer",
+                      fontSize: 14
+                    },
+                    "aria-label": messages.tabs.closeTab,
+                    "data-testid": `tab-close-${w.name}`,
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            w.name
+          );
+        }),
+        onAdd && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onAdd,
+            style: {
+              padding: "4px 8px",
+              background: "white",
+              border: "1px solid #CBD5E1",
+              borderRadius: 4,
+              fontSize: 12,
+              cursor: "pointer"
+            },
+            "data-testid": "tab-add",
+            children: [
+              "+ ",
+              messages.toolbar.addWorkflow
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/modals/DeleteStateModal.tsx
+var import_react7 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function countAffected(doc, workflow, stateCode) {
+  let outgoing = 0;
+  let incoming = 0;
+  const wf = doc.session.workflows.find((w) => w.name === workflow);
+  if (!wf) return { outgoing, incoming };
+  for (const [code, state] of Object.entries(wf.states)) {
+    for (const t of state.transitions) {
+      if (code === stateCode) outgoing++;
+      if (t.next === stateCode && code !== stateCode) incoming++;
+    }
+  }
+  return { outgoing, incoming };
+}
+function DeleteStateModal({
+  document: doc,
+  workflow,
+  stateCode,
+  onConfirm,
+  onCancel
+}) {
+  const messages = useMessages();
+  const counts = (0, import_react7.useMemo)(
+    () => countAffected(doc, workflow, stateCode),
+    [doc, workflow, stateCode]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.confirmDelete.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { margin: "12px 0", fontSize: 13, color: "#475569" }, children: messages.confirmDelete.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { padding: 8, background: "#F8FAFC", border: "1px solid #E2E8F0", borderRadius: 4, fontSize: 13 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: stateCode }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { color: "#475569" }, children: [
+        messages.confirmDelete.transitionsAffected,
+        ": ",
+        counts.outgoing + counts.incoming
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn3, "data-testid": "modal-delete-cancel", children: messages.confirmDelete.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onConfirm, style: dangerBtn4, "data-testid": "modal-delete-confirm", children: messages.confirmDelete.confirm })
+    ] })
+  ] });
+}
+function ModalFrame({
+  children,
+  onCancel,
+  labelledBy
+}) {
+  const frameRef = (0, import_react7.useRef)(null);
+  const previousFocusRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    previousFocusRef.current = document.activeElement ?? null;
+    const node = frameRef.current;
+    if (node) {
+      const focusable = node.querySelector(
+        'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
+      );
+      (focusable ?? node).focus();
+    }
+    return () => {
+      previousFocusRef.current?.focus?.();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      onClick: onCancel,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onCancel();
+        }
+      },
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(15,23,42,0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      "data-testid": "modal-backdrop",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          ref: frameRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": labelledBy,
+          tabIndex: -1,
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            background: "white",
+            borderRadius: 6,
+            padding: 20,
+            minWidth: 340,
+            boxShadow: "0 10px 30px rgba(15,23,42,0.25)",
+            outline: "none"
+          },
+          "data-testid": "modal-frame",
+          children
+        }
+      )
+    }
+  );
+}
+var ghostBtn3 = {
+  padding: "6px 12px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 13,
+  cursor: "pointer"
+};
+var dangerBtn4 = {
+  ...ghostBtn3,
+  background: "#DC2626",
+  color: "white",
+  borderColor: "#DC2626"
+};
+
+// src/modals/DragConnectModal.tsx
+var import_react8 = require("react");
+var import_workflow_core4 = require("@cyoda/workflow-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DragConnectModal({
+  source,
+  fromState,
+  toState,
+  onCreate,
+  onCancel
+}) {
+  const messages = useMessages();
+  const [name, setName] = (0, import_react8.useState)("");
+  const existing = new Set(source.transitions.map((t) => t.name));
+  const invalidFormat = !!name && !import_workflow_core4.NAME_REGEX.test(name);
+  const duplicate = existing.has(name);
+  const blocked = name.length === 0 || invalidFormat || duplicate;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.dragConnect.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { style: { margin: "6px 0 14px", fontSize: 12, color: "#475569" }, children: [
+      fromState,
+      " \u2192 ",
+      toState
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: 12, color: "#475569" }, children: messages.dragConnect.transitionName }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "input",
+        {
+          type: "text",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          style: {
+            padding: "6px 8px",
+            fontSize: 13,
+            border: "1px solid #CBD5E1",
+            borderRadius: 4
+          },
+          "data-testid": "dragconnect-name",
+          autoFocus: true
+        }
+      )
+    ] }),
+    invalidFormat && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-format", children: messages.dragConnect.invalidName }),
+    duplicate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-duplicate", children: messages.dragConnect.duplicateName }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn4, "data-testid": "dragconnect-cancel", children: messages.dragConnect.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => !blocked && onCreate(name),
+          disabled: blocked,
+          style: primaryBtn,
+          "data-testid": "dragconnect-create",
+          children: messages.dragConnect.create
+        }
+      )
+    ] })
+  ] });
+}
+var errorMsg = {
+  marginTop: 6,
+  fontSize: 12,
+  color: "#B91C1C"
+};
+var ghostBtn4 = {
+  padding: "6px 12px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 13,
+  cursor: "pointer"
+};
+var primaryBtn = {
+  ...ghostBtn4,
+  background: "#0F172A",
+  color: "white",
+  borderColor: "#0F172A"
+};
+
+// src/components/WorkflowEditor.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function defaultNewWorkflow(existing) {
+  let n = existing.length + 1;
+  while (existing.includes(`workflow${n}`)) n++;
+  return {
+    version: "1.0",
+    name: `workflow${n}`,
+    initialState: "start",
+    active: true,
+    states: { start: { transitions: [] } }
+  };
+}
+function WorkflowEditor({
+  document: initialDocument,
+  mode = "editor",
+  messages,
+  layoutOptions,
+  onChange,
+  onSave
+}) {
+  const mergedMessages = (0, import_react9.useMemo)(() => mergeMessages(messages), [messages]);
+  const [state, actions] = useEditorStore(initialDocument, mode);
+  const [pendingDelete, setPendingDelete] = (0, import_react9.useState)(null);
+  const [pendingConnect, setPendingConnect] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    onChange?.(state.document);
+  }, [state.document, onChange]);
+  const readOnly = state.mode === "viewer";
+  const derived = (0, import_react9.useMemo)(
+    () => deriveFromDocument(state.document),
+    [state.document.session, state.document.meta.ids]
+  );
+  const dispatch = (patch) => actions.dispatch(patch);
+  const requestDeleteState = (workflow, stateCode) => {
+    setPendingDelete({ workflow, stateCode });
+  };
+  const confirmDelete = () => {
+    if (!pendingDelete) return;
+    dispatch({
+      op: "removeState",
+      workflow: pendingDelete.workflow,
+      stateCode: pendingDelete.stateCode
+    });
+    setPendingDelete(null);
+  };
+  const handleConnect = (connection) => {
+    const resolved = resolveConnection(state.document, connection);
+    if (resolved) setPendingConnect(resolved);
+  };
+  const confirmConnect = (name) => {
+    if (!pendingConnect) return;
+    dispatch({
+      op: "addTransition",
+      workflow: pendingConnect.workflow,
+      fromState: pendingConnect.fromState,
+      transition: {
+        name,
+        next: pendingConnect.toState,
+        manual: false,
+        disabled: false
+      }
+    });
+    setPendingConnect(null);
+  };
+  const workflows = state.document.session.workflows;
+  const showTabs = workflows.length > 1 || state.mode !== "viewer";
+  const anyModalOpen = pendingDelete !== null || pendingConnect !== null;
+  const handleKeyDown = (0, import_react9.useCallback)(
+    (e) => {
+      if (anyModalOpen) return;
+      const mod = e.ctrlKey || e.metaKey;
+      if (mod && (e.key === "z" || e.key === "Z") && !e.shiftKey) {
+        if (!readOnly && state.undoStack.length > 0) {
+          e.preventDefault();
+          actions.undo();
+        }
+        return;
+      }
+      if (mod && (e.key === "z" && e.shiftKey || e.key === "y" || e.key === "Y")) {
+        if (!readOnly && state.redoStack.length > 0) {
+          e.preventDefault();
+          actions.redo();
+        }
+        return;
+      }
+      if (mod && (e.key === "s" || e.key === "S")) {
+        if (onSave && !readOnly && derived.errorCount === 0) {
+          e.preventDefault();
+          onSave(state.document);
+        }
+        return;
+      }
+    },
+    [
+      anyModalOpen,
+      readOnly,
+      state.undoStack.length,
+      state.redoStack.length,
+      state.document,
+      actions,
+      onSave,
+      derived.errorCount
+    ]
+  );
+  const pendingConnectState = (0, import_react9.useMemo)(() => {
+    if (!pendingConnect) return null;
+    const wf = state.document.session.workflows.find(
+      (w) => w.name === pendingConnect.workflow
+    );
+    if (!wf) return null;
+    return wf.states[pendingConnect.fromState] ?? null;
+  }, [pendingConnect, state.document]);
+  const orientation = layoutOptions?.orientation ?? "vertical";
+  const savedViewport = state.activeWorkflow ? state.document.meta.workflowUi[state.activeWorkflow]?.viewports?.[orientation] : void 0;
+  const handleViewportChange = (0, import_react9.useCallback)(
+    (viewport) => {
+      const workflow = state.activeWorkflow;
+      if (!workflow) return;
+      const current = state.document.meta.workflowUi[workflow] ?? {};
+      const existing = current.viewports?.[orientation];
+      const nextViewport = normalizeViewport(viewport);
+      if (existing && sameViewport(existing, nextViewport)) return;
+      actions.silentReplace(
+        {
+          session: state.document.session,
+          meta: {
+            ...state.document.meta,
+            workflowUi: {
+              ...state.document.meta.workflowUi,
+              [workflow]: {
+                ...current,
+                viewports: {
+                  ...current.viewports ?? {},
+                  [orientation]: nextViewport
+                }
+              }
+            }
+          }
+        },
+        { preserveEditorState: true }
+      );
+    },
+    [actions, orientation, state.activeWorkflow, state.document]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(I18nContext.Provider, { value: mergedMessages, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif',
+        outline: "none"
+      },
+      "data-testid": "workflow-editor",
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Toolbar,
+          {
+            derived,
+            canUndo: state.undoStack.length > 0,
+            canRedo: state.redoStack.length > 0,
+            readOnly,
+            onUndo: actions.undo,
+            onRedo: actions.redo,
+            onSave: onSave ? () => onSave(state.document) : void 0
+          }
+        ),
+        showTabs && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          WorkflowTabs,
+          {
+            workflows,
+            activeWorkflow: state.activeWorkflow,
+            readOnly,
+            onSelect: actions.setActiveWorkflow,
+            onAdd: () => dispatch({
+              op: "addWorkflow",
+              workflow: defaultNewWorkflow(workflows.map((w) => w.name))
+            }),
+            onClose: (name) => dispatch({ op: "removeWorkflow", workflow: name })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Canvas,
+            {
+              graph: derived.graph,
+              issues: derived.issues,
+              activeWorkflow: state.activeWorkflow,
+              selection: state.selection,
+              layoutOptions,
+              savedViewport,
+              onSelectionChange: (sel) => actions.setSelection(sel),
+              onViewportChange: handleViewportChange,
+              onConnect: handleConnect,
+              readOnly
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Inspector,
+            {
+              document: state.document,
+              selection: state.selection,
+              issues: derived.issues,
+              readOnly,
+              onDispatch: dispatch,
+              onSelectionChange: actions.setSelection,
+              onRequestDeleteState: requestDeleteState
+            }
+          )
+        ] }),
+        pendingDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          DeleteStateModal,
+          {
+            document: state.document,
+            workflow: pendingDelete.workflow,
+            stateCode: pendingDelete.stateCode,
+            onConfirm: confirmDelete,
+            onCancel: () => setPendingDelete(null)
+          }
+        ),
+        pendingConnect && pendingConnectState && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          DragConnectModal,
+          {
+            source: pendingConnectState,
+            fromState: pendingConnect.fromState,
+            toState: pendingConnect.toState,
+            onCreate: confirmConnect,
+            onCancel: () => setPendingConnect(null)
+          }
+        )
+      ]
+    }
+  ) });
+}
+function normalizeViewport(viewport) {
+  return {
+    x: Math.round(viewport.x * 100) / 100,
+    y: Math.round(viewport.y * 100) / 100,
+    zoom: Math.round(viewport.zoom * 1e3) / 1e3
+  };
+}
+function sameViewport(a, b) {
+  return a.x === b.x && a.y === b.y && a.zoom === b.zoom;
+}
+
+// src/save/useSaveFlow.ts
+var import_react10 = require("react");
+var import_workflow_core5 = require("@cyoda/workflow-core");
+function useSaveFlow(args) {
+  const { api, document: doc, concurrencyToken, onSaved, onReload } = args;
+  const [status, setStatus] = (0, import_react10.useState)({ kind: "idle" });
+  const tokenRef = (0, import_react10.useRef)(concurrencyToken);
+  tokenRef.current = concurrencyToken;
+  const entityRef = (0, import_react10.useRef)(doc.session.entity);
+  entityRef.current = doc.session.entity;
+  const payloadRef = (0, import_react10.useRef)({
+    importMode: doc.session.importMode,
+    workflows: doc.session.workflows
+  });
+  payloadRef.current = {
+    importMode: doc.session.importMode,
+    workflows: doc.session.workflows
+  };
+  const performImport = (0, import_react10.useCallback)(
+    async (token) => {
+      const entity = entityRef.current;
+      if (!entity) {
+        setStatus({
+          kind: "error",
+          message: "Cannot save: session has no entity identity."
+        });
+        return;
+      }
+      setStatus({ kind: "saving" });
+      try {
+        const result = await api.importWorkflows(entity, payloadRef.current, {
+          concurrencyToken: token
+        });
+        onSaved(result.concurrencyToken);
+        setStatus({ kind: "success", at: Date.now() });
+      } catch (err) {
+        if (err instanceof import_workflow_core5.WorkflowApiConflictError) {
+          setStatus({
+            kind: "conflict",
+            serverConcurrencyToken: err.serverConcurrencyToken
+          });
+          return;
+        }
+        setStatus({
+          kind: "error",
+          message: err instanceof Error ? err.message : "Unknown save error."
+        });
+      }
+    },
+    [api, onSaved]
+  );
+  const requestSave = (0, import_react10.useCallback)(() => {
+    const mode = payloadRef.current.importMode;
+    const requiresExplicitConfirm = mode === "REPLACE" || mode === "ACTIVATE";
+    setStatus({ kind: "confirming", mode, requiresExplicitConfirm });
+  }, []);
+  const confirmSave = (0, import_react10.useCallback)(
+    () => performImport(tokenRef.current),
+    [performImport]
+  );
+  const cancel = (0, import_react10.useCallback)(() => setStatus({ kind: "idle" }), []);
+  const forceOverwrite = (0, import_react10.useCallback)(() => performImport(null), [performImport]);
+  const reload = (0, import_react10.useCallback)(() => {
+    onReload?.();
+    setStatus({ kind: "idle" });
+  }, [onReload]);
+  const clear = (0, import_react10.useCallback)(() => setStatus({ kind: "idle" }), []);
+  return { status, requestSave, confirmSave, cancel, forceOverwrite, reload, clear };
+}
+
+// src/save/SaveConfirmModal.tsx
+var import_react11 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SaveConfirmModal({
+  mode,
+  requiresExplicitConfirm,
+  warningCount,
+  diffSummary: diffSummary2,
+  onConfirm,
+  onCancel
+}) {
+  const messages = useMessages();
+  const [ackMode, setAckMode] = (0, import_react11.useState)(!requiresExplicitConfirm);
+  const [ackWarnings, setAckWarnings] = (0, import_react11.useState)(warningCount === 0);
+  const blocked = !ackMode || !ackWarnings;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.saveConfirm.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { style: { margin: "12px 0", fontSize: 13, color: "#475569" }, children: [
+      messages.saveConfirm.modeLabel,
+      ": ",
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: mode })
+    ] }),
+    diffSummary2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "pre",
+      {
+        style: {
+          fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
+          background: "#F8FAFC",
+          border: "1px solid #E2E8F0",
+          padding: 8,
+          borderRadius: 4,
+          fontSize: 12,
+          margin: "8px 0",
+          maxHeight: 160,
+          overflow: "auto",
+          whiteSpace: "pre-wrap"
+        },
+        "data-testid": "save-diff-summary",
+        children: diffSummary2
+      }
+    ),
+    requiresExplicitConfirm && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: checkRow, "data-testid": "save-ack-mode", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: ackMode,
+          onChange: (e) => setAckMode(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: mode === "REPLACE" ? messages.saveConfirm.ackReplace : messages.saveConfirm.ackActivate })
+    ] }),
+    warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: checkRow, "data-testid": "save-ack-warnings", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: ackWarnings,
+          onChange: (e) => setAckWarnings(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: messages.saveConfirm.ackWarnings.replace("{count}", String(warningCount)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn5, "data-testid": "save-cancel", children: messages.saveConfirm.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: blocked,
+          onClick: onConfirm,
+          style: primaryBtn2,
+          "data-testid": "save-confirm",
+          children: messages.saveConfirm.confirm
+        }
+      )
+    ] })
+  ] });
+}
+var checkRow = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  fontSize: 13,
+  color: "#1E293B",
+  margin: "8px 0"
+};
+var ghostBtn5 = {
+  padding: "6px 12px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 13,
+  cursor: "pointer"
+};
+var primaryBtn2 = {
+  ...ghostBtn5,
+  background: "#0F172A",
+  color: "white",
+  borderColor: "#0F172A"
+};
+
+// src/save/ConflictBanner.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ConflictBanner({ onReload, onForceOverwrite }) {
+  const messages = useMessages();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      style: {
+        padding: "10px 14px",
+        background: "#FEF3C7",
+        borderBottom: "1px solid #F59E0B",
+        color: "#78350F",
+        fontSize: 13,
+        display: "flex",
+        alignItems: "center",
+        gap: 12
+      },
+      role: "alert",
+      "data-testid": "conflict-banner",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { flex: 1 }, children: messages.conflict.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onReload,
+            style: btn,
+            "data-testid": "conflict-reload",
+            children: messages.conflict.reload
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onForceOverwrite,
+            style: { ...btn, background: "#DC2626", color: "white", borderColor: "#DC2626" },
+            "data-testid": "conflict-force",
+            children: messages.conflict.forceOverwrite
+          }
+        )
+      ]
+    }
+  );
+}
+var btn = {
+  padding: "4px 10px",
+  background: "white",
+  border: "1px solid #CBD5E1",
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: "pointer"
+};
+
+// src/save/diff.ts
+function diffSummary(server, local) {
+  if (!server) return null;
+  const sw = new Map(server.session.workflows.map((w) => [w.name, w]));
+  const lw = new Map(local.session.workflows.map((w) => [w.name, w]));
+  const added = [];
+  const removed = [];
+  const changed = [];
+  for (const [name, localWf] of lw) {
+    const serverWf = sw.get(name);
+    if (!serverWf) {
+      added.push(name);
+      continue;
+    }
+    if (JSON.stringify(serverWf) !== JSON.stringify(localWf)) {
+      changed.push(name);
+    }
+  }
+  for (const [name] of sw) {
+    if (!lw.has(name)) removed.push(name);
+  }
+  const lines = [];
+  if (added.length) lines.push(`+ added: ${added.join(", ")}`);
+  if (removed.length) lines.push(`- removed: ${removed.join(", ")}`);
+  if (changed.length) lines.push(`~ changed: ${changed.join(", ")}`);
+  if (lines.length === 0) lines.push("(no workflow-level differences)");
+  return lines.join("\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConflictBanner,
+  I18nContext,
+  SaveConfirmModal,
+  WorkflowEditor,
+  defaultMessages,
+  diffSummary,
+  mergeMessages,
+  useMessages,
+  useSaveFlow
+});
+//# sourceMappingURL=index.cjs.map