@cyoda/workflow-react 0.4.1 → 0.5.0

package/dist/index.cjs

@@ -37,6 +37,49 @@ var import_react24 = require("react");
 var import_workflow_core11 = require("@cyoda/workflow-core");
 var import_workflow_layout2 = require("@cyoda/workflow-layout");
 
+// src/components/layoutPref.ts
+var DENSITY_OPTIONS = [
+  { value: "websiteCompact", label: "Compact" },
+  { value: "opsAudit", label: "Comfortable" },
+  { value: "configuratorReadable", label: "Roomy" }
+];
+var KNOWN_PRESETS = new Set(
+  DENSITY_OPTIONS.map((d) => d.value)
+);
+function defaultLayoutPref(opts) {
+  return {
+    orientation: opts?.orientation === "horizontal" ? "horizontal" : "vertical",
+    preset: opts?.preset && KNOWN_PRESETS.has(opts.preset) ? opts.preset : "configuratorReadable"
+  };
+}
+function prefKey(base) {
+  return base === null ? null : `${base}:pref`;
+}
+function loadLayoutPref(base, opts) {
+  const fallback = defaultLayoutPref(opts);
+  const key = prefKey(base);
+  if (key === null || typeof localStorage === "undefined") return fallback;
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return fallback;
+    const parsed = JSON.parse(raw);
+    return {
+      orientation: parsed.orientation === "horizontal" ? "horizontal" : "vertical",
+      preset: typeof parsed.preset === "string" && KNOWN_PRESETS.has(parsed.preset) ? parsed.preset : fallback.preset
+    };
+  } catch {
+    return fallback;
+  }
+}
+function saveLayoutPref(base, pref) {
+  const key = prefKey(base);
+  if (key === null || typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(pref));
+  } catch {
+  }
+}
+
 // src/i18n/context.ts
 var import_react = require("react");
 
@@ -63,8 +106,6 @@ var defaultMessages = {
     statesTitle: "States",
     stateInitial: "Initial \u2014 workflow entry point",
     stateDefault: "Regular state",
-    stateProcessing: "Processing \u2014 automated work",
-    stateManualReview: "Manual review \u2014 needs a person",
     stateTerminal: "Terminal \u2014 workflow ends here",
     stateError: "Red border \u2014 validation error",
     stateWarning: "Amber border \u2014 validation warning",
@@ -208,6 +249,8 @@ var defaultMessages = {
     noneManual: "No criterion. This manual transition is available whenever the entity is in this state.",
     noneAutomated: "No criterion. This automated transition will fire as soon as the entity reaches this state.",
     noneAutomatedWarning: "Automated transitions without criteria should usually be last in the transition order.",
+    workflowCaption: "Determines whether this workflow applies to an entity of its model \u2014 set one to disambiguate when several workflows target the same model.",
+    workflowNone: "No workflow criterion set.",
     cancel: "Cancel",
     applyModal: "Apply",
     revert: "Revert",
@@ -251,8 +294,6 @@ function summarize(patch) {
       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":
@@ -277,8 +318,10 @@ function summarize(patch) {
       return `Remove processor`;
     case "reorderProcessor":
       return `Reorder processor`;
-    case "setCriterion":
-      return patch.criterion ? `Set criterion` : `Clear criterion`;
+    case "setCriterion": {
+      const scope = patch.host.kind === "workflow" ? "workflow criterion" : "criterion";
+      return patch.criterion ? `Set ${scope}` : `Clear ${scope}`;
+    }
     case "setAnnotations":
       return patch.annotations ? `Set annotations` : `Clear annotations`;
     case "setImportMode":
@@ -511,20 +554,120 @@ var import_reactflow4 = require("reactflow");
 var import_style = require("reactflow/dist/style.css");
 var import_workflow_layout = require("@cyoda/workflow-layout");
 
+// src/components/LayoutOptionsMenu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ORIENTATION_OPTIONS = [
+  { value: "vertical", label: "Vertical" },
+  { value: "horizontal", label: "Horizontal" }
+];
+function LayoutOptionsMenu({
+  orientation,
+  density,
+  onSetOrientation,
+  onSetDensity
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panelStyle, "data-testid": "layout-options-menu", role: "group", "aria-label": "Auto-layout options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: labelStyle, children: "Orientation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Segmented,
+      {
+        options: ORIENTATION_OPTIONS,
+        value: orientation,
+        onChange: onSetOrientation,
+        testIdPrefix: "layout-orientation"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: labelStyle, children: "Density" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Segmented,
+      {
+        options: DENSITY_OPTIONS,
+        value: density,
+        onChange: onSetDensity,
+        testIdPrefix: "layout-density"
+      }
+    )
+  ] });
+}
+function Segmented({
+  options,
+  value,
+  onChange,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: segmentedStyle, children: options.map((opt) => {
+    const active = opt.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(opt.value),
+        "aria-pressed": active,
+        "data-testid": `${testIdPrefix}-${opt.value}`,
+        style: active ? segActiveStyle : segStyle,
+        children: opt.label
+      },
+      opt.value
+    );
+  }) });
+}
+var panelStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  padding: 10,
+  width: 210,
+  background: "white",
+  border: "1px solid #D1D5DB",
+  borderRadius: 8,
+  boxShadow: "0 4px 16px rgba(15,23,42,0.14)"
+};
+var labelStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  color: "#64748B"
+};
+var segmentedStyle = {
+  display: "flex",
+  gap: 3,
+  padding: 3,
+  background: "#F1F5F9",
+  border: "1px solid #E2E8F0",
+  borderRadius: 7
+};
+var segStyle = {
+  flex: 1,
+  border: "none",
+  background: "transparent",
+  color: "#475569",
+  fontSize: 12,
+  fontWeight: 550,
+  padding: "5px 4px",
+  borderRadius: 5,
+  cursor: "pointer"
+};
+var segActiveStyle = {
+  ...segStyle,
+  background: "#2E63D6",
+  color: "white",
+  boxShadow: "0 1px 2px rgba(15,23,42,0.18)"
+};
+
 // src/components/ArrowMarkers.tsx
 var import_theme = require("@cyoda/workflow-viewer/theme");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function ArrowMarkers() {
   const size = import_theme.geometry.edge.arrowheadSize;
   const colors2 = Array.from(new Set(Object.values(import_theme.workflowPalette.edge)));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       width: 0,
       height: 0,
       style: { position: "absolute", pointerEvents: "none" },
       "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: colors2.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: colors2.map((color) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "marker",
         {
           id: arrowMarkerId(color),
@@ -534,7 +677,7 @@ function ArrowMarkers() {
           markerWidth: size,
           markerHeight: size,
           orient: "auto-start-reverse",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "path",
             {
               d: `M 0 ${size / 2} L ${size * 2} ${size} L 0 ${size * 1.5} z`,
@@ -584,7 +727,7 @@ function computeHighlightSet(focusedId, nodes, edges) {
 
 // src/components/RfStateNode.tsx
 var import_theme2 = require("@cyoda/workflow-viewer/theme");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function StateRoleIcon({ label, color }) {
   const common = {
     width: 10,
@@ -597,24 +740,12 @@ function StateRoleIcon({ label, color }) {
     "aria-hidden": true
   };
   if (label === "INITIAL") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...common, viewBox: "0 0 10 10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "2.5,1.5 8.5,5 2.5,8.5", fill: color, stroke: "none" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...common, viewBox: "0 0 10 10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "2.5,1.5 8.5,5 2.5,8.5", fill: color, stroke: "none" }) });
   }
   if (label === "TERMINAL") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...common, viewBox: "0 0 10 10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "1.8", y: "1.8", width: "6.4", height: "6.4", rx: "1", fill: color, stroke: "none" }) });
-  }
-  if (label === "MANUAL REVIEW") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...common, viewBox: "0 0 10 10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 2.2 L7 5 L5 7.8 L3 5 Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "5", r: "0.8", fill: color, stroke: "none" })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...common, viewBox: "0 0 10 10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "1.8", y: "1.8", width: "6.4", height: "6.4", rx: "1", fill: color, stroke: "none" }) });
   }
-  if (label === "PROCESSING" || label === "PROCESSING STATE") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...common, viewBox: "0 0 10 10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "5", r: "2.6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 1.4 V2.7 M5 7.3 V8.6 M1.4 5 H2.7 M7.3 5 H8.6" })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...common, viewBox: "0 0 10 10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "5", r: "2.2", fill: color, stroke: "none" }) });
+  return null;
 }
 function RfStateNodeImpl({ data, selected, id }) {
   const { node, hasError, hasWarning, size } = data;
@@ -628,7 +759,7 @@ function RfStateNodeImpl({ data, selected, id }) {
   const [showAnchors, setShowAnchors] = (0, import_react4.useState)(false);
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       style: {
@@ -642,11 +773,11 @@ function RfStateNodeImpl({ data, selected, id }) {
         transition: "opacity 0.15s ease"
       },
       "data-testid": `rf-state-${node.stateCode}`,
-      "aria-label": `${category} state: ${node.stateCode}`,
+      "aria-label": category ? `${category} state: ${node.stateCode}` : `state: ${node.stateCode}`,
       onMouseEnter: () => setShowAnchors(true),
       onMouseLeave: () => setShowAnchors(false),
       children: [
-        ALL_ANCHORS.map(({ side, position, inset }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ALL_ANCHORS.map(({ side, position, inset }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           AnchorHandle,
           {
             side,
@@ -657,7 +788,7 @@ function RfStateNodeImpl({ data, selected, id }) {
           },
           side
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             style: {
@@ -677,7 +808,7 @@ function RfStateNodeImpl({ data, selected, id }) {
               padding: "0 8px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              category && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   style: {
@@ -694,12 +825,12 @@ function RfStateNodeImpl({ data, selected, id }) {
                   },
                   "data-testid": `rf-state-${node.stateCode}-category`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StateRoleIcon, { label: category, color: palette.meta }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StateRoleIcon, { label: category, color: palette.meta }),
                     category
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "div",
                 {
                   style: {
@@ -798,8 +929,8 @@ function AnchorHandle({
     transition: "opacity 120ms ease",
     ...geo.dotOffset
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_reactflow.Handle,
       {
         id: side,
@@ -808,7 +939,7 @@ function AnchorHandle({
         style: handleStyle
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_reactflow.Handle,
       {
         id: side,
@@ -817,7 +948,7 @@ function AnchorHandle({
         style: handleStyle
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: dotStyle })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: dotStyle })
   ] });
 }
 function visibleHandleStyle(position, offset, isSplit, active) {
@@ -1212,10 +1343,11 @@ function midpoint(points) {
 }
 
 // src/components/TransitionTooltip.tsx
+var import_workflow_viewer = require("@cyoda/workflow-viewer");
 var import_theme3 = require("@cyoda/workflow-viewer/theme");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function TransitionTooltip({ transition, x, y }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       style: {
@@ -1236,61 +1368,66 @@ function TransitionTooltip({ transition, x, y }) {
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 700, fontSize: 11, letterSpacing: "0.06em", marginBottom: 8, color: import_theme3.workflowPalette.neutrals.slate500, textTransform: "uppercase" }, children: transition.name }),
-        transition.criterion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: transition.processors?.length ? 8 : 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { children: "Criterion" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CriterionView, { criterion: transition.criterion })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 700, fontSize: 11, letterSpacing: "0.06em", marginBottom: 8, color: import_theme3.workflowPalette.neutrals.slate500, textTransform: "uppercase" }, children: transition.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_workflow_viewer.AnnotationLines, { annotations: transition.annotations }),
+        (transition.criterion || transition.criterionAnnotations) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: transition.processors?.length ? 8 : 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { children: "Criterion" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_workflow_viewer.AnnotationLines, { annotations: transition.criterionAnnotations }),
+          transition.criterion && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CriterionView, { criterion: transition.criterion })
         ] }),
-        !!transition.processors?.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { children: "Processors" }),
-          transition.processors.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessorView, { processor: p }, i))
+        !!transition.processors?.length && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { children: "Processors" }),
+          transition.processors.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessorView, { processor: p }, i))
         ] }),
-        !transition.criterion && !transition.processors?.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: import_theme3.workflowPalette.neutrals.slate500, fontStyle: "italic" }, children: "No criterion or processors" })
+        !transition.criterion && !transition.criterionAnnotations && !transition.processors?.length && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: import_theme3.workflowPalette.neutrals.slate500, fontStyle: "italic" }, children: "No criterion or processors" })
       ]
     }
   );
 }
 function Label({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, fontSize: 10, letterSpacing: "0.05em", color: import_theme3.workflowPalette.neutrals.slate500, textTransform: "uppercase", marginBottom: 4 }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, fontSize: 10, letterSpacing: "0.05em", color: import_theme3.workflowPalette.neutrals.slate500, textTransform: "uppercase", marginBottom: 4 }, children });
 }
 function CriterionView({ criterion, depth = 0 }) {
   const indent = depth * 12;
   const s = { paddingLeft: indent, marginBottom: 3 };
-  if (criterion.type === "simple") return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...s, overflowWrap: "break-word" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "blue", children: criterion.operation }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.jsonPath }),
-    criterion.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { marginLeft: 4, color: import_theme3.workflowPalette.neutrals.slate500 }, children: [
+  if (criterion.type === "simple") return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...s, overflowWrap: "break-word" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "blue", children: criterion.operation }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.jsonPath }),
+    criterion.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { marginLeft: 4, color: import_theme3.workflowPalette.neutrals.slate500 }, children: [
       "= ",
       JSON.stringify(criterion.value)
     ] })
   ] });
-  if (criterion.type === "lifecycle") return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "purple", children: criterion.field }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "blue", style: { marginLeft: 4 }, children: criterion.operation }),
-    criterion.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { marginLeft: 4, color: import_theme3.workflowPalette.neutrals.slate500 }, children: JSON.stringify(criterion.value) })
+  if (criterion.type === "lifecycle") return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: s, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "purple", children: criterion.field }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "blue", style: { marginLeft: 4 }, children: criterion.operation }),
+    criterion.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { marginLeft: 4, color: import_theme3.workflowPalette.neutrals.slate500 }, children: JSON.stringify(criterion.value) })
   ] });
-  if (criterion.type === "function") return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "green", children: "fn" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.function.name }),
-    criterion.function.criterion && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CriterionView, { criterion: criterion.function.criterion, depth: depth + 1 })
+  if (criterion.type === "function") return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: s, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "green", children: "fn" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.function.name }),
+    criterion.function.criterion && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CriterionView, { criterion: criterion.function.criterion, depth: depth + 1 })
   ] });
-  if (criterion.type === "array") return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...s, overflowWrap: "break-word" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "orange", children: "array" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "blue", style: { marginLeft: 4 }, children: criterion.operation }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.jsonPath })
+  if (criterion.type === "array") return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...s, overflowWrap: "break-word" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "orange", children: "array" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "blue", style: { marginLeft: 4 }, children: criterion.operation }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: 11, marginLeft: 4 }, children: criterion.jsonPath })
   ] });
-  if (criterion.type === "group") return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "slate", children: criterion.operator }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: 3 }, children: criterion.conditions.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CriterionView, { criterion: c, depth: depth + 1 }, i)) })
+  if (criterion.type === "group") return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: s, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "slate", children: criterion.operator }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: 3 }, children: criterion.conditions.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CriterionView, { criterion: c, depth: depth + 1 }, i)) })
   ] });
   return null;
 }
 function ProcessorView({ processor }) {
   const mode = processor.executionMode ?? "ASYNC_NEW_TX";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 4, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: 11, fontWeight: 600 }, children: processor.name }),
-    mode !== "ASYNC_NEW_TX" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "blue", children: mode.replace(/_/g, " ") }),
-    processor.config?.calculationNodesTags && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "slate", children: processor.config.calculationNodesTags })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: 11, fontWeight: 600 }, children: processor.name }),
+      mode !== "ASYNC_NEW_TX" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "blue", children: mode.replace(/_/g, " ") }),
+      processor.config?.calculationNodesTags && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { color: "slate", children: processor.config.calculationNodesTags })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_workflow_viewer.AnnotationLines, { annotations: processor.annotations })
   ] });
 }
 function Chip({ children, color, style }) {
@@ -1302,11 +1439,11 @@ function Chip({ children, color, style }) {
     slate: { bg: "#F1F5F9", text: "#475569" }
   };
   const { bg, text } = palette[color] ?? palette["slate"];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { background: bg, color: text, borderRadius: 3, padding: "1px 5px", fontSize: 10, fontWeight: 600, letterSpacing: "0.03em", ...style }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { background: bg, color: text, borderRadius: 3, padding: "1px 5px", fontSize: 10, fontWeight: 600, letterSpacing: "0.03em", ...style }, children });
 }
 
 // src/components/RfTransitionEdge.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function RfTransitionEdgeImpl(props) {
   const {
     id,
@@ -1355,8 +1492,8 @@ function RfTransitionEdgeImpl(props) {
     manual: edge.manual,
     disabled: edge.disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_reactflow3.BaseEdge,
       {
         id,
@@ -1371,7 +1508,7 @@ function RfTransitionEdgeImpl(props) {
         markerEnd: `url(#${arrowMarkerId(color)})`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactflow3.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactflow3.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         style: {
@@ -1454,7 +1591,7 @@ function RfTransitionEdgeImpl(props) {
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               style: {
@@ -1467,9 +1604,9 @@ function RfTransitionEdgeImpl(props) {
               children: edge.summary.display
             }
           ),
-          badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 3, flexWrap: "wrap", justifyContent: "center" }, children: badges.map((b, i) => {
+          badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", gap: 3, flexWrap: "wrap", justifyContent: "center" }, children: badges.map((b, i) => {
             const slot = b.key === "manual" ? import_theme4.workflowPalette.badge.manual : b.key === "processor" || b.key === "execution" ? import_theme4.workflowPalette.badge.processor : b.key === "criterion" ? import_theme4.workflowPalette.badge.criterion : import_theme4.workflowPalette.badge.disabled;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 style: {
@@ -1491,7 +1628,7 @@ function RfTransitionEdgeImpl(props) {
       }
     ) }),
     tooltipPos && data.transition && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TransitionTooltip, { transition: data.transition, x: tooltipPos.x, y: tooltipPos.y }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TransitionTooltip, { transition: data.transition, x: tooltipPos.x, y: tooltipPos.y }),
       document.body
     )
   ] });
@@ -1531,7 +1668,7 @@ function findNonOverlappingCenter(desiredCenter, size, obstacles, options = {})
 
 // src/components/Canvas.tsx
 var import_theme5 = require("@cyoda/workflow-viewer/theme");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var nodeTypes = { stateNode: RfStateNode };
 var edgeTypes = { transition: RfTransitionEdge };
 function toRfNodes(graph, layout, activeWorkflow, issuesByNode, selection) {
@@ -2400,6 +2537,7 @@ function CanvasInner({
   issues,
   activeWorkflow,
   selection,
+  onToggleWorkflowSettings,
   layoutOptions,
   savedViewport,
   onSelectionChange,
@@ -2411,6 +2549,8 @@ function CanvasInner({
   onNodeDragStop,
   onPaneDoubleClick,
   newStatePositionRef,
+  onSetLayoutOrientation,
+  onSetLayoutDensity,
   layoutKey = 0,
   readOnly,
   showMinimap = true,
@@ -2429,6 +2569,7 @@ function CanvasInner({
   onTransitionLabelDragEnd
 }) {
   const [layout, setLayout] = (0, import_react6.useState)(null);
+  const [layoutMenuOpen, setLayoutMenuOpen] = (0, import_react6.useState)(false);
   const [nodes, setNodes] = (0, import_react6.useState)([]);
   const [hoveredId, setHoveredId] = (0, import_react6.useState)(null);
   const previousBasePositionsRef = (0, import_react6.useRef)(null);
@@ -2605,6 +2746,7 @@ function CanvasInner({
   const onEdgeMouseEnter = (0, import_react6.useCallback)((_, edge) => setHoveredId(edge.id), []);
   const onEdgeMouseLeave = (0, import_react6.useCallback)(() => setHoveredId(null), []);
   const onNodeClick = (_, node) => {
+    if (isReconnectingRef.current) return;
     const data = node.data;
     onSelectionChange({
       kind: "state",
@@ -2681,7 +2823,7 @@ function CanvasInner({
       newStatePositionRef.current = null;
     };
   }, [newStatePositionRef, computeNewStatePosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HoverContext.Provider, { value: { highlightSet }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HoverContext.Provider, { value: { highlightSet }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: wrapperRef,
@@ -2689,8 +2831,8 @@ function CanvasInner({
       "data-testid": "workflow-canvas",
       onDoubleClick: readOnly ? void 0 : handleCanvasDoubleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArrowMarkers, {}),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowMarkers, {}),
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             className: "nodrag nopan",
@@ -2708,12 +2850,12 @@ function CanvasInner({
               overflow: "hidden"
             },
             children: [
-              !readOnly && onUndo && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CtrlBtn, { onClick: onUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", testId: "canvas-undo", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UndoIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CtrlBtn, { onClick: onRedo, disabled: !canRedo, title: "Redo (Ctrl+Shift+Z)", testId: "canvas-redo", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RedoIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 1, background: "#E2E8F0" } })
+              !readOnly && onUndo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CtrlBtn, { onClick: onUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", testId: "canvas-undo", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UndoIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CtrlBtn, { onClick: onRedo, disabled: !canRedo, title: "Redo (Ctrl+Shift+Z)", testId: "canvas-redo", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RedoIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 1, background: "#E2E8F0" } })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 CtrlBtn,
                 {
                   onClick: () => {
@@ -2723,32 +2865,60 @@ function CanvasInner({
                     });
                   },
                   title: "Fit view",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FitViewIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitViewIcon, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CtrlBtn, { onClick: onToggleFullscreen, title: isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EnterFullscreenIcon, {}) }),
-              !readOnly && onAutoLayout && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CtrlBtn, { onClick: onAutoLayout, title: "Auto-arrange (L)", testId: "canvas-auto-layout", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutoArrangeIcon, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CtrlBtn, { onClick: onToggleFullscreen, title: isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExitFullscreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EnterFullscreenIcon, {}) }),
+              !readOnly && onAutoLayout && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CtrlBtn, { onClick: onAutoLayout, title: "Auto-arrange (L)", testId: "canvas-auto-layout", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutoArrangeIcon, {}) }),
+                onSetLayoutOrientation && onSetLayoutDensity && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  CtrlBtn,
+                  {
+                    onClick: () => setLayoutMenuOpen((v) => !v),
+                    title: "Layout options",
+                    testId: "canvas-layout-options",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutOptionsIcon, {})
+                  }
+                )
               ] }),
-              onHelp && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CtrlBtn, { onClick: onHelp, title: helpLabel ?? "Help", testId: "canvas-help", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpIcon, {}) })
+              onHelp && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CtrlBtn, { onClick: onHelp, title: helpLabel ?? "Help", testId: "canvas-help", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HelpIcon, {}) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 1, background: "#E2E8F0" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 CtrlBtn,
                 {
-                  onClick: () => onSelectionChange(activeWorkflow ? { kind: "workflow", workflow: activeWorkflow } : null),
+                  onClick: onToggleWorkflowSettings ?? (() => onSelectionChange(activeWorkflow ? { kind: "workflow", workflow: activeWorkflow } : null)),
                   title: "Workflow settings",
                   testId: "canvas-workflow-settings",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WorkflowSettingsIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WorkflowSettingsIcon, {})
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        layoutMenuOpen && onSetLayoutOrientation && onSetLayoutDensity && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              onClick: () => setLayoutMenuOpen(false),
+              style: { position: "absolute", inset: 0, zIndex: 6 },
+              "data-testid": "layout-options-backdrop"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "nodrag nopan", style: { position: "absolute", bottom: 16, left: 64, zIndex: 7 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            LayoutOptionsMenu,
+            {
+              orientation,
+              density: preset,
+              onSetOrientation: onSetLayoutOrientation,
+              onSetDensity: onSetLayoutDensity
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           import_reactflow4.ReactFlow,
           {
             nodes,
@@ -2758,14 +2928,19 @@ function CanvasInner({
             onNodesChange: readOnly ? void 0 : handleNodesChange,
             onNodeClick,
             onEdgeClick,
-            onPaneClick: () => onSelectionChange(activeWorkflow ? { kind: "workflow", workflow: activeWorkflow } : null),
+            onPaneClick: () => {
+              if (isReconnectingRef.current) return;
+              onSelectionChange(activeWorkflow ? { kind: "workflow", workflow: activeWorkflow } : null);
+            },
             onConnect: readOnly ? void 0 : onConnect,
             onReconnect: readOnly ? void 0 : onReconnect,
             onReconnectStart: readOnly ? void 0 : () => {
               isReconnectingRef.current = true;
             },
             onReconnectEnd: readOnly ? void 0 : () => {
-              isReconnectingRef.current = false;
+              setTimeout(() => {
+                isReconnectingRef.current = false;
+              }, 0);
             },
             onNodesDelete: readOnly ? void 0 : onNodesDelete,
             onEdgesDelete: readOnly ? void 0 : onEdgesDelete,
@@ -2791,8 +2966,8 @@ function CanvasInner({
               if (layout) onViewportChange?.(viewport);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactflow4.Background, {}),
-              showMinimap && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactflow4.MiniMap, { zoomable: true, pannable: true })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactflow4.Background, {}),
+              showMinimap && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactflow4.MiniMap, { zoomable: true, pannable: true })
             ]
           }
         )
@@ -2807,7 +2982,7 @@ function CtrlBtn({
   testId,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       type: "button",
@@ -2832,50 +3007,58 @@ function CtrlBtn({
   );
 }
 function FitViewIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 7V4h3M18 4h3v3M21 17v3h-3M6 20H3v-3" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 7V4h3M18 4h3v3M21 17v3h-3M6 20H3v-3" }) });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" }) });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 15l6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 15l6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" }) });
 }
 function EnterFullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) });
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) });
 }
 function AutoArrangeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 22 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "6", y: "0", width: "10", height: "5", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "11", y1: "5", x2: "11", y2: "9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", y1: "9", x2: "18", y2: "9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", y1: "9", x2: "4", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "9", x2: "18", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "0", y: "12", width: "8", height: "5", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "14", y: "12", width: "8", height: "5", rx: "1.5" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 22 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "6", y: "0", width: "10", height: "5", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "11", y1: "5", x2: "11", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "4", y1: "9", x2: "18", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "4", y1: "9", x2: "4", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "9", x2: "18", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "0", y: "12", width: "8", height: "5", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "14", y: "12", width: "8", height: "5", rx: "1.5" })
   ] });
 }
 function HelpIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] });
+}
+function LayoutOptionsIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 22 22", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "7", x2: "19", y2: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "15", x2: "19", y2: "15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "7", r: "2.4", fill: "white" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "14", cy: "15", r: "2.4", fill: "white" })
   ] });
 }
 function WorkflowSettingsIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "9", cy: "6", r: "2", fill: "white" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "15", cy: "12", r: "2", fill: "white" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "8", cy: "18", r: "2", fill: "white" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "9", cy: "6", r: "2", fill: "white" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "15", cy: "12", r: "2", fill: "white" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "18", r: "2", fill: "white" })
   ] });
 }
 function Canvas(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactflow4.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasInner, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactflow4.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasInner, { ...props }) });
 }
 
 // src/components/resolveConnection.ts
@@ -3054,7 +3237,7 @@ function resolveSelection(doc, selection) {
 
 // src/inspector/fields.tsx
 var import_react7 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function TextField({
   label,
   value,
@@ -3072,9 +3255,9 @@ function TextField({
     syncedKeyRef.current = syncKey;
     setDraft(value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: rowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: labelStyle, children: label }),
-    multiline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: labelStyle2, children: label }),
+    multiline ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "textarea",
       {
         value: draft,
@@ -3088,7 +3271,7 @@ function TextField({
         },
         style: { ...inputStyle, resize: "vertical", lineHeight: 1.5 }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type: "text",
@@ -3115,8 +3298,8 @@ function CheckboxField({
   disabled,
   testId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { ...rowStyle, flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { style: { ...rowStyle, flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type: "checkbox",
@@ -3126,7 +3309,7 @@ function CheckboxField({
         "data-testid": testId
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { ...labelStyle, marginBottom: 0 }, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { ...labelStyle2, marginBottom: 0 }, children: label })
   ] });
 }
 function SelectField({
@@ -3137,9 +3320,9 @@ function SelectField({
   disabled,
   testId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: rowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: labelStyle, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: labelStyle2, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CustomSelectInput,
       {
         value,
@@ -3217,8 +3400,8 @@ function CustomSelectInput({
       setHighlightedIndex((i) => Math.max(i - 1, 0));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "select",
       {
         value,
@@ -3229,12 +3412,12 @@ function CustomSelectInput({
         "aria-hidden": "true",
         tabIndex: -1,
         children: [
-          disabledOption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: disabledOption.value, disabled: true, children: disabledOption.label }),
-          groups ? groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("optgroup", { label: g.groupLabel, children: g.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: o.value, children: o.label }, o.value)) }, g.groupLabel)) : flatOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: o.value, children: o.label }, o.value))
+          disabledOption && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: disabledOption.value, disabled: true, children: disabledOption.label }),
+          groups ? groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("optgroup", { label: g.groupLabel, children: g.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: o.value, children: o.label }, o.value)) }, g.groupLabel)) : flatOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: o.value, children: o.label }, o.value))
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         role: "combobox",
@@ -3251,7 +3434,7 @@ function CustomSelectInput({
         children: selectedLabel
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         role: "listbox",
@@ -3271,7 +3454,7 @@ function CustomSelectInput({
           overflowY: "auto"
         },
         children: renderItems.map(
-          (item, i) => item.kind === "header" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          (item, i) => item.kind === "header" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "div",
             {
               style: {
@@ -3287,7 +3470,7 @@ function CustomSelectInput({
               children: item.label
             },
             `header-${item.label}`
-          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "div",
             {
               role: "option",
@@ -3316,8 +3499,8 @@ function CustomSelectInput({
   ] });
 }
 function FieldGroup({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: title }),
     children
   ] });
 }
@@ -3326,7 +3509,7 @@ var rowStyle = {
   flexDirection: "column",
   gap: 4
 };
-var labelStyle = {
+var labelStyle2 = {
   fontSize: 12,
   color: colors.textSecondary,
   marginBottom: 2
@@ -3389,7 +3572,7 @@ function installMonacoCancellationFilter() {
 installMonacoCancellationFilter();
 
 // src/inspector/JsonMonacoField.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function reformat(text) {
   try {
     return JSON.stringify(JSON.parse(text), null, 2);
@@ -3404,8 +3587,8 @@ function JsonMonacoField(props) {
     const next = reformat(props.buffer);
     if (next !== null && next !== props.buffer) props.onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -3416,7 +3599,7 @@ function JsonMonacoField(props) {
         children: messages.inspector.format
       }
     ) }),
-    monaco ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MonacoPane, { ...props, monaco }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    monaco ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MonacoPane, { ...props, monaco }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       {
         value: props.buffer,
@@ -3499,7 +3682,7 @@ function MonacoPane({
   (0, import_react9.useEffect)(() => {
     editorRef.current?.updateOptions?.({ readOnly: disabled });
   }, [disabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ref: containerRef,
@@ -3541,14 +3724,14 @@ function parseAnnotationsJson(text) {
 }
 
 // src/inspector/AnnotationsField.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var pretty = (v) => JSON.stringify(v, null, 2);
 function AnnotationsField(props) {
   const messages = useMessages();
   if (props.value === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: sectionStyle, children: [
-      props.showLabel !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SectionLabel, {}),
-      !props.disabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: sectionStyle, children: [
+      props.showLabel !== false && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, {}),
+      !props.disabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
@@ -3560,7 +3743,7 @@ function AnnotationsField(props) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AnnotationsEditor, { ...props, value: props.value }, props.modelKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AnnotationsEditor, { ...props, value: props.value }, props.modelKey);
 }
 function AnnotationsEditor({
   value,
@@ -3600,9 +3783,9 @@ function AnnotationsEditor({
     setBuffer(pretty(value));
     setDocChanged(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: sectionStyle, children: [
-    showLabel !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SectionLabel, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: sectionStyle, children: [
+    showLabel !== false && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       JsonMonacoField,
       {
         buffer,
@@ -3613,10 +3796,10 @@ function AnnotationsEditor({
         testId: "annotations-json-editor"
       }
     ),
-    result.error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "annotations-error", style: errorStyle, children: result.error }),
-    docChanged && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "annotations-doc-changed", style: warnStyle, children: messages.inspector.annotationsDocChanged }),
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    result.error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "alert", "data-testid": "annotations-error", style: errorStyle, children: result.error }),
+    docChanged && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "alert", "data-testid": "annotations-doc-changed", style: warnStyle, children: messages.inspector.annotationsDocChanged }),
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
@@ -3627,14 +3810,14 @@ function AnnotationsEditor({
           children: messages.inspector.annotationsApply
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtn, "data-testid": "inspector-annotations-revert", children: messages.inspector.annotationsRevert }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: onRemove, style: dangerBtn, "data-testid": "inspector-annotations-remove", children: messages.inspector.annotationsRemove })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtn, "data-testid": "inspector-annotations-revert", children: messages.inspector.annotationsRevert }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: onRemove, style: dangerBtn, "data-testid": "inspector-annotations-remove", children: messages.inspector.annotationsRemove })
     ] })
   ] });
 }
 function SectionLabel() {
   const messages = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: messages.inspector.annotations });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: messages.inspector.annotations });
 }
 var sectionStyle = { display: "flex", flexDirection: "column", gap: 8 };
 var ghostBtn = { padding: "6px 10px", background: "white", border: `1px solid ${colors.border}`, borderRadius: radii.sm, fontSize: 12, cursor: "pointer" };
@@ -3644,16 +3827,232 @@ var dangerBtn = { ...ghostBtn, background: colors.dangerBg, borderColor: colors.
 var errorStyle = { color: colors.danger, fontSize: 11 };
 var warnStyle = { color: colors.warning, fontSize: 11 };
 
+// src/inspector/CriterionField.tsx
+var import_react11 = require("react");
+var import_workflow_monaco = require("@cyoda/workflow-monaco");
+
+// src/inspector/criterionJson.ts
+var import_workflow_core4 = require("@cyoda/workflow-core");
+function criterionModelUri(key) {
+  return `cyoda://criterion/${key}.json`;
+}
+function zodMessage(error) {
+  const first = error.issues[0];
+  if (!first) return "Invalid criterion.";
+  const path = first.path.length ? ` at ${first.path.join(".")}` : "";
+  return `${first.message}${path}`;
+}
+function parseCriterionJson(text) {
+  let raw;
+  try {
+    raw = JSON.parse(text);
+  } catch {
+    return { criterion: null, error: "Invalid JSON." };
+  }
+  const res = import_workflow_core4.CriterionSchema.safeParse(raw);
+  if (res.success) {
+    const blocking = (0, import_workflow_core4.criterionBlockingError)(res.data);
+    if (blocking) return { criterion: null, error: blocking };
+    return { criterion: res.data, error: null };
+  }
+  let friendly = null;
+  if (typeof raw === "object" && raw !== null && typeof raw.type === "string") {
+    try {
+      friendly = (0, import_workflow_core4.criterionBlockingError)(raw);
+    } catch {
+      friendly = null;
+    }
+  }
+  return { criterion: null, error: friendly ?? zodMessage(res.error) };
+}
+
+// src/inspector/CriterionField.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function defaultSimpleCriterion() {
+  return { type: "simple", jsonPath: "", operation: "EQUALS" };
+}
+var pretty2 = (c) => JSON.stringify(c, null, 2);
+function CriterionField(props) {
+  const m = useMessages().criterion;
+  if (props.value === void 0) {
+    const emptyText = props.emptyText ?? (props.manual ? m.noneManual : m.noneAutomated);
+    const showWarning = props.emptyText === void 0 && !props.manual;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: summaryTextStyle, children: emptyText }),
+      showWarning && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: warnStyle2, "data-testid": "criterion-automated-warning", children: m.noneAutomatedWarning }),
+      !props.disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", style: primaryBtnStyle, "data-testid": "inspector-criterion-add", onClick: () => props.onCommit(defaultSimpleCriterion()), children: m.add })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CriterionEditor, { ...props, value: props.value }, props.modelKey);
+}
+function CriterionEditor({ value, disabled, modelKey, onCommit, onRemove }) {
+  const messages = useMessages();
+  const m = messages.criterion;
+  const [expanded, setExpanded] = (0, import_react11.useState)(false);
+  const [buffer, setBuffer] = (0, import_react11.useState)(() => pretty2(value));
+  const [docChanged, setDocChanged] = (0, import_react11.useState)(false);
+  const prevValueRef = (0, import_react11.useRef)(value);
+  (0, import_react11.useEffect)(() => {
+    if (sameJson(prevValueRef.current, value)) return;
+    const parsed = parseCriterionJson(buffer).criterion;
+    if (parsed !== null && sameJson(parsed, value)) {
+      setDocChanged(false);
+    } else if (parsed !== null && sameJson(parsed, prevValueRef.current)) {
+      setBuffer(pretty2(value));
+      setDocChanged(false);
+    } else {
+      setDocChanged(true);
+    }
+    prevValueRef.current = value;
+  }, [value, buffer]);
+  const result = parseCriterionJson(buffer);
+  const dirty = result.criterion !== null && !sameJson(result.criterion, value);
+  const applyEnabled = !disabled && result.criterion !== null && dirty;
+  const canRevert = buffer !== pretty2(value);
+  const apply = () => {
+    if (!applyEnabled || result.criterion === null) return;
+    onCommit(result.criterion);
+    setDocChanged(false);
+    setExpanded(false);
+  };
+  const revert = () => {
+    setBuffer(pretty2(value));
+    setDocChanged(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: metaChipStyle, children: value.type }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { flex: 1 } }),
+      !disabled && !expanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", style: ghostBtnStyle, "data-testid": "inspector-criterion-edit", onClick: () => setExpanded(true), children: m.edit }),
+      !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", style: destructiveBtnStyle, "data-testid": "inspector-criterion-remove", onClick: onRemove, children: m.remove })
+    ] }),
+    !expanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CompactJson, { criterion: value }),
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        JsonMonacoField,
+        {
+          buffer,
+          disabled,
+          modelUri: criterionModelUri(modelKey),
+          onChange: setBuffer,
+          seed: buffer,
+          registerSchema: import_workflow_monaco.registerCriterionSchema,
+          testId: "criterion-json-editor"
+        }
+      ),
+      result.error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "alert", "data-testid": "criterion-error", style: errorStyle2, children: result.error }),
+      docChanged && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "alert", "data-testid": "criterion-doc-changed", style: warnLineStyle, children: messages.inspector.annotationsDocChanged }),
+      !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: apply, disabled: !applyEnabled, style: applyEnabled ? primaryBtnStyle : { ...primaryBtnStyle, opacity: 0.5, cursor: "not-allowed" }, "data-testid": "inspector-criterion-apply", children: m.applyModal }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtnStyle, "data-testid": "inspector-criterion-revert", children: m.revert }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => setExpanded(false), style: ghostBtnStyle, "data-testid": "inspector-criterion-collapse", children: m.collapse })
+      ] })
+    ] })
+  ] });
+}
+function CompactJson({ criterion }) {
+  const text = JSON.stringify(criterion);
+  const display = text.length > 140 ? `${text.slice(0, 137)}\u2026` : text;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { "data-testid": "criterion-compact-json", style: { display: "block", fontFamily: fonts.mono, fontSize: 11, color: colors.textSecondary, background: colors.surfaceMuted, padding: "6px 8px", borderRadius: radii.sm, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: display });
+}
+var cardStyle = { display: "flex", flexDirection: "column", gap: 8, padding: 10, border: `1px solid ${colors.border}`, borderRadius: radii.md, background: colors.surface };
+var summaryTextStyle = { margin: 0, fontSize: 12, color: colors.textSecondary, lineHeight: 1.45 };
+var warnStyle2 = { margin: 0, padding: "6px 8px", background: colors.warningBg, border: `1px solid ${colors.warningBorder}`, borderRadius: radii.sm, color: colors.warning, fontSize: 11 };
+var errorStyle2 = { color: colors.danger, fontSize: 11 };
+var warnLineStyle = { color: colors.warning, fontSize: 11 };
+
+// src/inspector/CriterionForm.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function criterionModelKey(host) {
+  if (host.kind === "transition") return `transition-${host.transitionUuid}`;
+  if (host.kind === "processorConfig") return `processor-${host.processorUuid}`;
+  return `host-${host.workflow}`;
+}
+function criterionAnnotationsTarget(host) {
+  if (host.kind === "workflow") return { kind: "workflowCriterion", workflow: host.workflow };
+  if (host.kind === "transition") return { kind: "transitionCriterion", transitionUuid: host.transitionUuid };
+  return void 0;
+}
+function CriterionSection({
+  host,
+  manual,
+  criterion,
+  criterionAnnotations,
+  disabled,
+  onDispatch,
+  onSelectionChange: _onSelectionChange
+}) {
+  const m = useMessages().criterion;
+  const isWorkflow = host.kind === "workflow";
+  const path = ["criterion"];
+  const annotationsTarget = criterionAnnotationsTarget(host);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    isWorkflow && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "p",
+      {
+        "data-testid": "workflow-criterion-caption",
+        style: { margin: "0 0 6px", fontSize: 12, lineHeight: 1.4, color: colors.textSecondary },
+        children: m.workflowCaption
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      CriterionField,
+      {
+        value: criterion,
+        manual,
+        disabled,
+        modelKey: criterionModelKey(host),
+        emptyText: isWorkflow ? m.workflowNone : void 0,
+        onCommit: (next) => onDispatch({ op: "setCriterion", host, path, criterion: next }),
+        onRemove: () => onDispatch({ op: "setCriterion", host, path, criterion: void 0 })
+      }
+    ),
+    annotationsTarget && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        "data-testid": "inspector-criterion-annotations",
+        style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 4 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: 11,
+                fontWeight: 600,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                color: colors.textSecondary
+              },
+              children: "Criterion annotations"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            AnnotationsField,
+            {
+              value: criterionAnnotations,
+              disabled,
+              showLabel: false,
+              modelKey: `criterion-annotations-${criterionModelKey(host)}`,
+              onCommit: (annotations) => onDispatch({ op: "setAnnotations", target: annotationsTarget, annotations }),
+              onRemove: () => onDispatch({ op: "setAnnotations", target: annotationsTarget })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
 // src/inspector/WorkflowForm.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function WorkflowForm({
   workflow,
   disabled,
   onDispatch
 }) {
   const messages = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TextField,
       {
         label: messages.inspector.name,
@@ -3663,7 +4062,7 @@ function WorkflowForm({
         testId: "inspector-workflow-name"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TextField,
       {
         label: messages.inspector.version,
@@ -3678,7 +4077,7 @@ function WorkflowForm({
         testId: "inspector-workflow-version"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TextField,
       {
         label: messages.inspector.description,
@@ -3694,7 +4093,7 @@ function WorkflowForm({
         testId: "inspector-workflow-desc"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       CheckboxField,
       {
         label: messages.inspector.active,
@@ -3708,7 +4107,7 @@ function WorkflowForm({
         testId: "inspector-workflow-active"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TextField,
       {
         label: messages.inspector.initialState,
@@ -3723,7 +4122,7 @@ function WorkflowForm({
         testId: "inspector-workflow-initial"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       AnnotationsField,
       {
         value: workflow.annotations,
@@ -3732,14 +4131,24 @@ function WorkflowForm({
         onCommit: (annotations) => onDispatch({ op: "setAnnotations", target: { kind: "workflow", workflow: workflow.name }, annotations }),
         onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "workflow", workflow: workflow.name } })
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      CriterionSection,
+      {
+        host: { kind: "workflow", workflow: workflow.name },
+        criterion: workflow.criterion,
+        criterionAnnotations: workflow.criterionAnnotations,
+        disabled,
+        onDispatch
+      }
     )
   ] });
 }
 
 // src/inspector/StateForm.tsx
-var import_react11 = require("react");
-var import_workflow_core4 = require("@cyoda/workflow-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_workflow_core5 = require("@cyoda/workflow-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function StateForm({
   workflow,
   stateCode,
@@ -3750,7 +4159,7 @@ function StateForm({
   onRequestDelete
 }) {
   const messages = useMessages();
-  const [renameError, setRenameError] = (0, import_react11.useState)(null);
+  const [renameError, setRenameError] = (0, import_react12.useState)(null);
   const outgoing = state.transitions.length;
   const incoming = Object.values(workflow.states).reduce(
     (n, s) => n + s.transitions.filter((t) => t.next === stateCode).length,
@@ -3763,7 +4172,7 @@ function StateForm({
   const handleRename = (next) => {
     if (next === stateCode) return;
     setRenameError(null);
-    if (!import_workflow_core4.NAME_REGEX.test(next)) {
+    if (!import_workflow_core5.NAME_REGEX.test(next)) {
       setRenameError(`"${next}" is not a valid state name`);
       return;
     }
@@ -3773,8 +4182,8 @@ function StateForm({
     }
     onDispatch({ op: "renameState", workflow: workflow.name, from: stateCode, to: next });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TextField,
       {
         label: messages.inspector.name,
@@ -3785,19 +4194,19 @@ function StateForm({
         testId: "inspector-state-name"
       }
     ),
-    renameError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
-    (isInitial || isTerminal || isUnreachable) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-      isInitial && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StateBadge, { color: "#15803d", bg: "#f0fdf4", label: "Initial" }),
-      isTerminal && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StateBadge, { color: "#0369a1", bg: "#eff6ff", label: "Terminal" }),
-      isUnreachable && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StateBadge, { color: colors.warning, bg: colors.warningBg, label: "Unreachable" })
+    renameError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
+    (isInitial || isTerminal || isUnreachable) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      isInitial && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StateBadge, { color: "#15803d", bg: "#f0fdf4", label: "Initial" }),
+      isTerminal && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StateBadge, { color: "#0369a1", bg: "#eff6ff", label: "Terminal" }),
+      isUnreachable && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StateBadge, { color: colors.warning, bg: colors.warningBg, label: "Unreachable" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 12, color: colors.textSecondary }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { fontSize: 12, color: colors.textSecondary }, children: [
       outgoing,
       " outgoing \xB7 ",
       incoming,
       " incoming"
     ] }),
-    !isInitial && !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    !isInitial && !disabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -3807,7 +4216,7 @@ function StateForm({
         children: "Set as Initial State"
       }
     ),
-    issues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    issues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         role: "alert",
@@ -3823,7 +4232,7 @@ function StateForm({
       },
       `${issue.code}-${i}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       AnnotationsField,
       {
         value: state.annotations,
@@ -3833,236 +4242,75 @@ function StateForm({
         onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "state", workflow: workflow.name, stateCode } })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
-        onClick: onRequestDelete,
-        disabled,
-        "data-testid": "inspector-state-delete",
-        style: dangerBtn2,
-        children: "Delete state\u2026"
-      }
-    )
-  ] });
-}
-function StateBadge({ color, bg, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "span",
-    {
-      style: {
-        padding: "2px 8px",
-        background: bg,
-        color,
-        border: `1px solid ${color}`,
-        borderRadius: 999,
-        fontSize: 11,
-        fontWeight: 600
-      },
-      children: label
-    }
-  );
-}
-function reachableStates(wf) {
-  const visited = /* @__PURE__ */ new Set();
-  if (!(wf.initialState in wf.states)) return visited;
-  const queue = [wf.initialState];
-  visited.add(wf.initialState);
-  while (queue.length) {
-    const cur = queue.shift();
-    for (const t of wf.states[cur]?.transitions ?? []) {
-      if (!visited.has(t.next) && t.next in wf.states) {
-        visited.add(t.next);
-        queue.push(t.next);
-      }
-    }
-  }
-  return visited;
-}
-var ghostBtn2 = {
-  alignSelf: "flex-start",
-  padding: "5px 10px",
-  background: "white",
-  border: `1px solid ${colors.border}`,
-  borderRadius: radii.sm,
-  fontSize: 13,
-  cursor: "pointer"
-};
-var dangerBtn2 = {
-  alignSelf: "flex-start",
-  padding: "6px 10px",
-  background: colors.dangerBg,
-  border: `1px solid ${colors.dangerBorder}`,
-  color: colors.danger,
-  borderRadius: radii.sm,
-  fontSize: 13,
-  cursor: "pointer"
-};
-
-// src/inspector/TransitionForm.tsx
-var import_react15 = require("react");
-var import_workflow_core7 = require("@cyoda/workflow-core");
-
-// src/inspector/CriterionField.tsx
-var import_react12 = require("react");
-var import_workflow_monaco = require("@cyoda/workflow-monaco");
-
-// src/inspector/criterionJson.ts
-var import_workflow_core5 = require("@cyoda/workflow-core");
-function criterionModelUri(key) {
-  return `cyoda://criterion/${key}.json`;
-}
-function zodMessage(error) {
-  const first = error.issues[0];
-  if (!first) return "Invalid criterion.";
-  const path = first.path.length ? ` at ${first.path.join(".")}` : "";
-  return `${first.message}${path}`;
-}
-function parseCriterionJson(text) {
-  let raw;
-  try {
-    raw = JSON.parse(text);
-  } catch {
-    return { criterion: null, error: "Invalid JSON." };
-  }
-  const res = import_workflow_core5.CriterionSchema.safeParse(raw);
-  if (res.success) {
-    const blocking = (0, import_workflow_core5.criterionBlockingError)(res.data);
-    if (blocking) return { criterion: null, error: blocking };
-    return { criterion: res.data, error: null };
-  }
-  let friendly = null;
-  if (typeof raw === "object" && raw !== null && typeof raw.type === "string") {
-    try {
-      friendly = (0, import_workflow_core5.criterionBlockingError)(raw);
-    } catch {
-      friendly = null;
-    }
-  }
-  return { criterion: null, error: friendly ?? zodMessage(res.error) };
-}
-
-// src/inspector/CriterionField.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function defaultSimpleCriterion() {
-  return { type: "simple", jsonPath: "", operation: "EQUALS" };
-}
-var pretty2 = (c) => JSON.stringify(c, null, 2);
-function CriterionField(props) {
-  const m = useMessages().criterion;
-  if (props.value === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: summaryTextStyle, children: props.manual ? m.noneManual : m.noneAutomated }),
-      !props.manual && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: warnStyle2, "data-testid": "criterion-automated-warning", children: m.noneAutomatedWarning }),
-      !props.disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: primaryBtnStyle, "data-testid": "inspector-criterion-add", onClick: () => props.onCommit(defaultSimpleCriterion()), children: m.add })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CriterionEditor, { ...props, value: props.value }, props.modelKey);
-}
-function CriterionEditor({ value, disabled, modelKey, onCommit, onRemove }) {
-  const messages = useMessages();
-  const m = messages.criterion;
-  const [expanded, setExpanded] = (0, import_react12.useState)(false);
-  const [buffer, setBuffer] = (0, import_react12.useState)(() => pretty2(value));
-  const [docChanged, setDocChanged] = (0, import_react12.useState)(false);
-  const prevValueRef = (0, import_react12.useRef)(value);
-  (0, import_react12.useEffect)(() => {
-    if (sameJson(prevValueRef.current, value)) return;
-    const parsed = parseCriterionJson(buffer).criterion;
-    if (parsed !== null && sameJson(parsed, value)) {
-      setDocChanged(false);
-    } else if (parsed !== null && sameJson(parsed, prevValueRef.current)) {
-      setBuffer(pretty2(value));
-      setDocChanged(false);
-    } else {
-      setDocChanged(true);
-    }
-    prevValueRef.current = value;
-  }, [value, buffer]);
-  const result = parseCriterionJson(buffer);
-  const dirty = result.criterion !== null && !sameJson(result.criterion, value);
-  const applyEnabled = !disabled && result.criterion !== null && dirty;
-  const canRevert = buffer !== pretty2(value);
-  const apply = () => {
-    if (!applyEnabled || result.criterion === null) return;
-    onCommit(result.criterion);
-    setDocChanged(false);
-    setExpanded(false);
-  };
-  const revert = () => {
-    setBuffer(pretty2(value));
-    setDocChanged(false);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: metaChipStyle, children: value.type }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { flex: 1 } }),
-      !disabled && !expanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: ghostBtnStyle, "data-testid": "inspector-criterion-edit", onClick: () => setExpanded(true), children: m.edit }),
-      !disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: destructiveBtnStyle, "data-testid": "inspector-criterion-remove", onClick: onRemove, children: m.remove })
-    ] }),
-    !expanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CompactJson, { criterion: value }),
-    expanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        JsonMonacoField,
-        {
-          buffer,
-          disabled,
-          modelUri: criterionModelUri(modelKey),
-          onChange: setBuffer,
-          seed: buffer,
-          registerSchema: import_workflow_monaco.registerCriterionSchema,
-          testId: "criterion-json-editor"
-        }
-      ),
-      result.error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "alert", "data-testid": "criterion-error", style: errorStyle2, children: result.error }),
-      docChanged && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "alert", "data-testid": "criterion-doc-changed", style: warnLineStyle, children: messages.inspector.annotationsDocChanged }),
-      !disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: apply, disabled: !applyEnabled, style: applyEnabled ? primaryBtnStyle : { ...primaryBtnStyle, opacity: 0.5, cursor: "not-allowed" }, "data-testid": "inspector-criterion-apply", children: m.applyModal }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtnStyle, "data-testid": "inspector-criterion-revert", children: m.revert }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: () => setExpanded(false), style: ghostBtnStyle, "data-testid": "inspector-criterion-collapse", children: m.collapse })
-      ] })
-    ] })
-  ] });
-}
-function CompactJson({ criterion }) {
-  const text = JSON.stringify(criterion);
-  const display = text.length > 140 ? `${text.slice(0, 137)}\u2026` : text;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { "data-testid": "criterion-compact-json", style: { display: "block", fontFamily: fonts.mono, fontSize: 11, color: colors.textSecondary, background: colors.surfaceMuted, padding: "6px 8px", borderRadius: radii.sm, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: display });
-}
-var cardStyle = { display: "flex", flexDirection: "column", gap: 8, padding: 10, border: `1px solid ${colors.border}`, borderRadius: radii.md, background: colors.surface };
-var summaryTextStyle = { margin: 0, fontSize: 12, color: colors.textSecondary, lineHeight: 1.45 };
-var warnStyle2 = { margin: 0, padding: "6px 8px", background: colors.warningBg, border: `1px solid ${colors.warningBorder}`, borderRadius: radii.sm, color: colors.warning, fontSize: 11 };
-var errorStyle2 = { color: colors.danger, fontSize: 11 };
-var warnLineStyle = { color: colors.warning, fontSize: 11 };
-
-// src/inspector/CriterionForm.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function criterionModelKey(host) {
-  if (host.kind === "transition") return `transition-${host.transitionUuid}`;
-  if (host.kind === "processorConfig") return `processor-${host.processorUuid}`;
-  return `host-${host.workflow}`;
+        onClick: onRequestDelete,
+        disabled,
+        "data-testid": "inspector-state-delete",
+        style: dangerBtn2,
+        children: "Delete state\u2026"
+      }
+    )
+  ] });
 }
-function CriterionSection({
-  host,
-  manual,
-  criterion,
-  disabled,
-  onDispatch,
-  onSelectionChange: _onSelectionChange
-}) {
-  const path = ["criterion"];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    CriterionField,
+function StateBadge({ color, bg, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "span",
     {
-      value: criterion,
-      manual,
-      disabled,
-      modelKey: criterionModelKey(host),
-      onCommit: (next) => onDispatch({ op: "setCriterion", host, path, criterion: next }),
-      onRemove: () => onDispatch({ op: "setCriterion", host, path, criterion: void 0 })
+      style: {
+        padding: "2px 8px",
+        background: bg,
+        color,
+        border: `1px solid ${color}`,
+        borderRadius: 999,
+        fontSize: 11,
+        fontWeight: 600
+      },
+      children: label
     }
   );
 }
+function reachableStates(wf) {
+  const visited = /* @__PURE__ */ new Set();
+  if (!(wf.initialState in wf.states)) return visited;
+  const queue = [wf.initialState];
+  visited.add(wf.initialState);
+  while (queue.length) {
+    const cur = queue.shift();
+    for (const t of wf.states[cur]?.transitions ?? []) {
+      if (!visited.has(t.next) && t.next in wf.states) {
+        visited.add(t.next);
+        queue.push(t.next);
+      }
+    }
+  }
+  return visited;
+}
+var ghostBtn2 = {
+  alignSelf: "flex-start",
+  padding: "5px 10px",
+  background: "white",
+  border: `1px solid ${colors.border}`,
+  borderRadius: radii.sm,
+  fontSize: 13,
+  cursor: "pointer"
+};
+var dangerBtn2 = {
+  alignSelf: "flex-start",
+  padding: "6px 10px",
+  background: colors.dangerBg,
+  border: `1px solid ${colors.dangerBorder}`,
+  color: colors.danger,
+  borderRadius: radii.sm,
+  fontSize: 13,
+  cursor: "pointer"
+};
+
+// src/inspector/TransitionForm.tsx
+var import_react15 = require("react");
+var import_workflow_core7 = require("@cyoda/workflow-core");
 
 // src/inspector/ProcessorForm.tsx
 var import_react14 = require("react");
@@ -4070,7 +4318,7 @@ var import_workflow_core6 = require("@cyoda/workflow-core");
 
 // src/modals/DeleteStateModal.tsx
 var import_react13 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function countAffected(doc, workflow, stateCode) {
   let outgoing = 0;
   let incoming = 0;
@@ -4096,20 +4344,20 @@ function DeleteStateModal({
     () => 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: colors.textSecondary }, children: messages.confirmDelete.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { padding: 8, background: colors.surfaceMuted, border: `1px solid ${colors.borderSubtle}`, borderRadius: radii.sm, fontSize: 13 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: stateCode }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { color: colors.textSecondary }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.confirmDelete.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: messages.confirmDelete.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { padding: 8, background: colors.surfaceMuted, border: `1px solid ${colors.borderSubtle}`, borderRadius: radii.sm, fontSize: 13 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: stateCode }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { color: colors.textSecondary }, 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: dangerBtn3, "data-testid": "modal-delete-confirm", children: messages.confirmDelete.confirm })
+    /* @__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: ghostBtn3, "data-testid": "modal-delete-cancel", children: messages.confirmDelete.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onConfirm, style: dangerBtn3, "data-testid": "modal-delete-confirm", children: messages.confirmDelete.confirm })
     ] })
   ] });
 }
@@ -4133,7 +4381,7 @@ function ModalFrame({
       previousFocusRef.current?.focus?.();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       onClick: onCancel,
@@ -4153,7 +4401,7 @@ function ModalFrame({
         zIndex: 1e3
       },
       "data-testid": "modal-backdrop",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
           ref: frameRef,
@@ -4195,7 +4443,7 @@ var dangerBtn3 = {
 };
 
 // src/inspector/ProcessorForm.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var EXECUTION_MODES = [
   "ASYNC_NEW_TX",
   "ASYNC_SAME_TX",
@@ -4227,7 +4475,8 @@ function toDraft(processor) {
     retryPolicy: externalized?.config?.retryPolicy ?? "",
     context: externalized?.config?.context ?? "",
     asyncResult: externalized?.config?.asyncResult ?? false,
-    crossoverToAsyncMs: externalized?.config?.crossoverToAsyncMs !== void 0 ? String(externalized.config.crossoverToAsyncMs) : ""
+    crossoverToAsyncMs: externalized?.config?.crossoverToAsyncMs !== void 0 ? String(externalized.config.crossoverToAsyncMs) : "",
+    annotations: externalized?.annotations
   };
 }
 function toProcessor(draft) {
@@ -4249,7 +4498,8 @@ function toProcessor(draft) {
     name: draft.name.trim(),
     executionMode: draft.executionMode,
     ...draft.executionMode === "COMMIT_BEFORE_DISPATCH" && draft.startNewTxOnDispatch ? { startNewTxOnDispatch: true } : {},
-    ...Object.keys(config).length > 0 ? { config } : {}
+    ...Object.keys(config).length > 0 ? { config } : {},
+    ...draft.annotations !== void 0 ? { annotations: draft.annotations } : {}
   };
 }
 function validateDraft(draft, existingNames, originalName) {
@@ -4301,13 +4551,13 @@ function ProcessorEditorModal({
     if (disabled || error) return;
     onApply(toProcessor(draft));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalFrame, { onCancel, labelledBy: "processor-modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: modalStyle, "data-testid": "processor-editor-modal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { id: "processor-modal-title", style: { margin: 0, fontSize: 18 }, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { margin: 0, fontSize: 12, color: colors.textTertiary }, children: "Processor changes stay local until Apply." })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalFrame, { onCancel, labelledBy: "processor-modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: modalStyle, "data-testid": "processor-editor-modal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { id: "processor-modal-title", style: { margin: 0, fontSize: 18 }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { margin: 0, fontSize: 12, color: colors.textTertiary }, children: "Processor changes stay local until Apply." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: modalBodyStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: modalBodyStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "text",
@@ -4317,17 +4567,42 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Execution mode", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Execution mode", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         CustomSelectInput,
         {
           value: draft.executionMode,
           options: EXECUTION_MODES.map((mode) => ({ value: mode, label: mode })),
-          onChange: (next) => setDraft((current) => ({ ...current, executionMode: next })),
+          onChange: (next) => setDraft((current) => ({
+            ...current,
+            executionMode: next,
+            // startNewTxOnDispatch is only valid for COMMIT_BEFORE_DISPATCH.
+            startNewTxOnDispatch: next === "COMMIT_BEFORE_DISPATCH" ? current.startNewTxOnDispatch : false
+          })),
           testId: "processor-execution-mode"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { style: checkboxRowStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        "label",
+        {
+          style: draft.executionMode === "COMMIT_BEFORE_DISPATCH" ? checkboxRowStyle : { ...checkboxRowStyle, opacity: 0.5 },
+          title: "Only for COMMIT_BEFORE_DISPATCH: open a fresh transaction context for the dispatched call.",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: draft.startNewTxOnDispatch,
+                disabled: disabled || draft.executionMode !== "COMMIT_BEFORE_DISPATCH",
+                onChange: (event) => setDraft((current) => ({ ...current, startNewTxOnDispatch: event.target.checked })),
+                "data-testid": "processor-start-new-tx"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Start new transaction on dispatch" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: checkboxRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4335,9 +4610,9 @@ function ProcessorEditorModal({
             onChange: (event) => setDraft((current) => ({ ...current, attachEntity: event.target.checked }))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Attach entity" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Attach entity" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Calculation node tags", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Calculation node tags", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "text",
@@ -4350,7 +4625,7 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Response timeout ms", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Response timeout ms", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "text",
@@ -4362,17 +4637,33 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Retry policy", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Retry policy", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        CustomSelectInput,
+        {
+          value: draft.retryPolicy,
+          options: [
+            { value: "", label: "Default (FIXED)" },
+            { value: "NONE", label: "NONE" },
+            { value: "FIXED", label: "FIXED" }
+          ],
+          onChange: (next) => setDraft((current) => ({ ...current, retryPolicy: next })),
+          testId: "processor-retry-policy"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Context", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "text",
-          value: draft.retryPolicy,
-          onChange: (event) => setDraft((current) => ({ ...current, retryPolicy: event.target.value })),
-          style: inputStyle2
+          value: draft.context,
+          placeholder: "passed verbatim as request parameters",
+          disabled,
+          onChange: (event) => setDraft((current) => ({ ...current, context: event.target.value })),
+          "data-testid": "processor-context-input",
+          style: disabled ? disabledInputStyle : inputStyle2
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { style: checkboxRowStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: checkboxRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4385,9 +4676,9 @@ function ProcessorEditorModal({
             "data-testid": "processor-async-result"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Async result" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Async result" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { label: "Crossover to async ms", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Crossover to async ms", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "text",
@@ -4402,10 +4693,27 @@ function ProcessorEditorModal({
         }
       ) })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "alert", style: errorStyle3, "data-testid": "processor-modal-error", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("footer", { style: modalFooterStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn4, "data-testid": "processor-modal-cancel", children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      {
+        "data-testid": "processor-annotations",
+        style: { display: "flex", flexDirection: "column", gap: 8, gridColumn: "1 / -1" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          AnnotationsField,
+          {
+            value: draft.annotations,
+            disabled,
+            modelKey: `processor-${initialProcessor?.name ?? "new"}`,
+            onCommit: (a) => setDraft((c) => ({ ...c, annotations: a })),
+            onRemove: () => setDraft((c) => ({ ...c, annotations: void 0 }))
+          }
+        )
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "alert", style: errorStyle3, "data-testid": "processor-modal-error", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("footer", { style: modalFooterStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn4, "data-testid": "processor-modal-cancel", children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -4423,8 +4731,8 @@ function FormField({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: labelStyle2, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: labelStyle3, children: label }),
     children
   ] });
 }
@@ -4439,17 +4747,17 @@ function ProcessorForm({
 }) {
   const messages = useMessages();
   const [modalOpen, setModalOpen] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: summaryCardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { fontSize: 13 }, children: processor.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: 12, color: colors.textSecondary }, children: summarizeProcessor(processor) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: summaryCardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { style: { fontSize: 13 }, children: processor.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: 12, color: colors.textSecondary }, children: summarizeProcessor(processor) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: chipStyle, children: processor.type })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: chipStyle, children: processor.type })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: () => setModalOpen(true), style: ghostBtn4, children: "Edit" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => setModalOpen(true), style: ghostBtn4, children: "Edit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -4464,7 +4772,7 @@ function ProcessorForm({
           children: messages.inspector.moveUp
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -4479,7 +4787,7 @@ function ProcessorForm({
           children: messages.inspector.moveDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -4491,7 +4799,7 @@ function ProcessorForm({
         }
       )
     ] }),
-    modalOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    modalOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ProcessorEditorModal,
       {
         title: `Edit ${processor.name}`,
@@ -4511,7 +4819,7 @@ function ProcessorForm({
     )
   ] });
 }
-var labelStyle2 = {
+var labelStyle3 = {
   fontSize: 12,
   color: colors.textSecondary,
   marginBottom: 2
@@ -4605,7 +4913,7 @@ var summaryCardStyle = {
 };
 
 // src/inspector/TransitionForm.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TransitionForm({
   workflow,
   stateCode,
@@ -4726,9 +5034,9 @@ function TransitionForm({
       index: index + 1
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: transitionFormStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: transitionFormStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(FieldGroup, { title: messages.inspector.properties, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         TextField,
         {
           label: messages.inspector.name,
@@ -4739,90 +5047,96 @@ function TransitionForm({
           testId: "inspector-transition-name"
         }
       ),
-      renameError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
-      !disabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        SelectField,
-        {
-          label: "Source state",
-          value: stateCode,
-          options: stateOptions,
-          disabled,
-          onChange: (toState) => {
-            if (toState === stateCode) return;
-            onDispatch({
-              op: "moveTransitionSource",
-              workflow: workflow.name,
-              fromState: stateCode,
-              toState,
-              transitionName: transition.name
-            });
-          },
-          testId: "inspector-transition-source-state"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        SelectField,
-        {
-          label: "Target state",
-          value: transition.next,
-          options: stateOptions,
-          disabled,
-          onChange: (next) => update({ next }),
-          testId: "inspector-transition-next"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        SelectField,
-        {
-          label: messages.inspector.transitionType,
-          value: transition.manual ? "manual" : "automated",
-          options: [
-            { value: "automated", label: messages.inspector.automated },
-            { value: "manual", label: messages.inspector.manual }
-          ],
-          disabled,
-          onChange: (next) => update({ manual: next === "manual" }),
-          testId: "inspector-transition-manual"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        CheckboxField,
-        {
-          label: messages.inspector.disabled,
-          checked: transition.disabled,
-          disabled,
-          onChange: (next) => update({ disabled: next }),
-          testId: "inspector-transition-disabled"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", disabled, onClick: () => reorder(-1), style: ghostBtn5, children: messages.inspector.moveUp }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", disabled, onClick: () => reorder(1), style: ghostBtn5, children: messages.inspector.moveDown })
+      renameError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: twoColStyle, children: [
+        !disabled && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          SelectField,
+          {
+            label: "Source state",
+            value: stateCode,
+            options: stateOptions,
+            disabled,
+            onChange: (toState) => {
+              if (toState === stateCode) return;
+              onDispatch({
+                op: "moveTransitionSource",
+                workflow: workflow.name,
+                fromState: stateCode,
+                toState,
+                transitionName: transition.name
+              });
+            },
+            testId: "inspector-transition-source-state"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          SelectField,
+          {
+            label: "Target state",
+            value: transition.next,
+            options: stateOptions,
+            disabled,
+            onChange: (next) => update({ next }),
+            testId: "inspector-transition-next"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: twoColStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          SelectField,
+          {
+            label: messages.inspector.transitionType,
+            value: transition.manual ? "manual" : "automated",
+            options: [
+              { value: "automated", label: messages.inspector.automated },
+              { value: "manual", label: messages.inspector.manual }
+            ],
+            disabled,
+            onChange: (next) => update({ manual: next === "manual" }),
+            testId: "inspector-transition-manual"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          CheckboxField,
+          {
+            label: messages.inspector.disabled,
+            checked: transition.disabled,
+            disabled,
+            onChange: (next) => update({ disabled: next }),
+            testId: "inspector-transition-disabled"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: twoColStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.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_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", disabled, onClick: () => reorder(-1), style: ghostBtn5, children: messages.inspector.moveUp }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", disabled, onClick: () => reorder(1), style: ghostBtn5, children: messages.inspector.moveDown })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "p",
           {
             style: {
@@ -4836,8 +5150,8 @@ function TransitionForm({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
@@ -4848,8 +5162,8 @@ function TransitionForm({
           children: "Delete transition"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
-      issues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
+      issues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           role: "alert",
@@ -4866,12 +5180,12 @@ function TransitionForm({
         `${issue.code}-${i}`
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TransitionSection,
       {
         title: messages.inspector.criteria,
         testId: "inspector-transition-criteria-section",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           CriterionSection,
           {
             host,
@@ -4880,6 +5194,7 @@ function TransitionForm({
             targetState: transition.next,
             manual: transition.manual,
             criterion: transition.criterion,
+            criterionAnnotations: transition.criterionAnnotations,
             disabled,
             onDispatch,
             onSelectionChange
@@ -4887,18 +5202,18 @@ function TransitionForm({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       TransitionSection,
       {
         title: "Scheduled transition",
         testId: "inspector-transition-schedule-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "label",
             {
               style: { display: "flex", flexDirection: "row", alignItems: "center", gap: 8, fontSize: 12, color: colors.textSecondary, cursor: "pointer" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -4918,14 +5233,14 @@ function TransitionForm({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Enable schedule" })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Enable schedule" })
               ]
             }
           ),
-          transition.schedule !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 500 }, children: "Delay (ms)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          transition.schedule !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: twoColStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 500 }, children: "Delay (ms)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "input",
                 {
                   type: "text",
@@ -4941,9 +5256,9 @@ function TransitionForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 500 }, children: "Timeout (ms)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 500 }, children: "Timeout (ms)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "input",
                 {
                   type: "text",
@@ -4960,7 +5275,7 @@ function TransitionForm({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "p",
             {
               style: {
@@ -4980,28 +5295,28 @@ function TransitionForm({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       TransitionSection,
       {
         title: messages.inspector.processors,
         testId: "inspector-transition-processes-section",
         children: [
-          processorCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: emptyProcessorStateStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: summaryTextStyle2, children: "No processors run on this transition." }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: processorHelperStyle, children: "Processors run sequentially in the order shown." }),
-            processors.map((processor, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: processorRowStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { style: processorOrderStyle, children: [
+          processorCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: emptyProcessorStateStyle, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: summaryTextStyle2, children: "No processors run on this transition." }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: processorHelperStyle, children: "Processors run sequentially in the order shown." }),
+            processors.map((processor, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: processorRowStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: processorOrderStyle, children: [
                   index + 1,
                   "."
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: processorTypeChipStyle, children: processor.type }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { style: { fontSize: 13 }, children: processor.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: summaryTextStyle2, children: summarizeProcessor(processor) })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: processorTypeChipStyle, children: processor.type }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { style: { fontSize: 13 }, children: processor.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: summaryTextStyle2, children: summarizeProcessor(processor) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5016,7 +5331,7 @@ function TransitionForm({
                     children: "Edit"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5027,7 +5342,7 @@ function TransitionForm({
                     children: "Duplicate"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5043,7 +5358,7 @@ function TransitionForm({
                     children: "Move up"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5059,7 +5374,7 @@ function TransitionForm({
                     children: "Move down"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5073,7 +5388,7 @@ function TransitionForm({
               ] })
             ] }, processorUuids[index] ?? `${processor.name}-${index}`))
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -5087,7 +5402,7 @@ function TransitionForm({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TransitionSection, { title: "Annotations", testId: "inspector-transition-annotations-section", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TransitionSection, { title: "Annotations", testId: "inspector-transition-annotations-section", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       AnnotationsField,
       {
         value: transition.annotations,
@@ -5098,7 +5413,7 @@ function TransitionForm({
         onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "transition", transitionUuid } })
       }
     ) }),
-    processorModal && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    processorModal && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ProcessorEditorModal,
       {
         title: processorModal.mode === "add" ? "Add processor" : "Edit processor",
@@ -5118,8 +5433,8 @@ function TransitionSection({
   testId,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: transitionSectionStyle, "data-testid": testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("header", { style: sectionHeaderStyle, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: transitionSectionStyle, "data-testid": testId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("header", { style: sectionHeaderStyle, children: title }),
     children
   ] });
 }
@@ -5128,6 +5443,12 @@ var transitionFormStyle = {
   flexDirection: "column",
   gap: 16
 };
+var twoColStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+  gap: 8,
+  alignItems: "end"
+};
 var transitionSectionStyle = {
   display: "flex",
   flexDirection: "column",
@@ -5226,9 +5547,9 @@ function AnchorSelect({
     { value: "left", label: messages.inspector.anchorLeft },
     { value: "left-bottom", label: messages.inspector.anchorLeftBottom }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 500 }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       CustomSelectInput,
       {
         value: value ?? "",
@@ -5243,7 +5564,7 @@ function AnchorSelect({
 }
 
 // src/inspector/Inspector.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function issueKeyForSelection(selection) {
   if (!selection) return null;
   switch (selection.kind) {
@@ -5283,7 +5604,7 @@ function Inspector({
     return issues.filter((i) => i.targetId === selectionIssueKey);
   }, [issues, selectionIssueKey]);
   const breadcrumb = renderBreadcrumb(resolved);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "aside",
     {
       style: {
@@ -5299,7 +5620,7 @@ function Inspector({
       },
       "data-testid": "inspector",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "header",
           {
             "data-inspector-drag-handle": true,
@@ -5313,8 +5634,8 @@ function Inspector({
               gap: 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: breadcrumb }),
-              onToggleDock && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: breadcrumb }),
+              onToggleDock && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5339,7 +5660,7 @@ function Inspector({
                   children: docked ? "\u2922" : "\u2921"
                 }
               ),
-              onMinimize && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              onMinimize && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5365,7 +5686,7 @@ function Inspector({
                   children: "\u2013"
                 }
               ),
-              onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              onClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5393,8 +5714,8 @@ function Inspector({
             ]
           }
         ),
-        developerMode && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", borderBottom: `1px solid ${colors.borderSubtle}` }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        developerMode && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", borderBottom: `1px solid ${colors.borderSubtle}` }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             TabButton,
             {
               active: effectiveTab === "properties",
@@ -5403,7 +5724,7 @@ function Inspector({
               children: messages.inspector.properties
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             TabButton,
             {
               active: effectiveTab === "json",
@@ -5413,11 +5734,11 @@ function Inspector({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: 12, overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: 16 }, children: [
-          effectiveTab === "properties" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-            !resolved && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EmptyState, { message: messages.inspector.empty }),
-            resolved?.kind === "workflow" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WorkflowForm, { workflow: resolved.workflow, disabled: readOnly, onDispatch }, resolved.workflow.name),
-            resolved?.kind === "state" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: 12, overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: 16 }, children: [
+          effectiveTab === "properties" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+            !resolved && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyState, { message: messages.inspector.empty }),
+            resolved?.kind === "workflow" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(WorkflowForm, { workflow: resolved.workflow, disabled: readOnly, onDispatch }, resolved.workflow.name),
+            resolved?.kind === "state" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               StateForm,
               {
                 workflow: resolved.workflow,
@@ -5430,7 +5751,7 @@ function Inspector({
               },
               `${resolved.workflow.name}:${resolved.stateCode}`
             ),
-            resolved?.kind === "transition" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            resolved?.kind === "transition" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               TransitionForm,
               {
                 workflow: resolved.workflow,
@@ -5447,7 +5768,7 @@ function Inspector({
               },
               resolved.transitionUuid
             ),
-            resolved?.kind === "processor" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            resolved?.kind === "processor" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               ProcessorForm,
               {
                 processor: resolved.processor,
@@ -5461,8 +5782,8 @@ function Inspector({
               resolved.processorUuid
             )
           ] }),
-          developerMode && effectiveTab === "json" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(JsonPreview, { document: doc, resolved }),
-          selectionIssues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IssuesList, { issues: selectionIssues, title: messages.inspector.issues })
+          developerMode && effectiveTab === "json" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(JsonPreview, { document: doc, resolved }),
+          selectionIssues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IssuesList, { issues: selectionIssues, title: messages.inspector.issues })
         ] })
       ]
     }
@@ -5485,7 +5806,7 @@ function TabButton({
   children,
   testId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -5506,17 +5827,17 @@ function TabButton({
   );
 }
 function EmptyState({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { color: colors.textTertiary, fontSize: 13 }, children: message });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { color: colors.textTertiary, fontSize: 13 }, children: message });
 }
 function IssuesList({
   issues,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: title }),
     issues.map((issue, i) => {
       const tone = severityTone(issue.severity);
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           style: {
@@ -5527,8 +5848,8 @@ function IssuesList({
             fontSize: 12
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: issue.code }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: issue.message })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: issue.code }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: issue.message })
           ]
         },
         `${issue.code}-${i}`
@@ -5548,7 +5869,7 @@ function JsonPreview({
     if (resolved.kind === "processor") return JSON.stringify(resolved.processor, null, 2);
     return "";
   }, [doc, resolved]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "pre",
     {
       style: {
@@ -5606,7 +5927,7 @@ function savePlacement(base, p) {
 }
 
 // src/inspector/InspectorFrame.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var FLOATING_Z = 40;
 var MIN_BAR_Z = 50;
 function InspectorFrame({
@@ -5674,8 +5995,8 @@ function InspectorFrame({
     overflow: "hidden",
     display: minimized ? "none" : "flex"
   } : { position: "relative", flex: `0 0 ${dockedWidth}px`, width: dockedWidth, height: "100%", display: "flex" };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    mode === "docked" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    mode === "docked" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         "data-testid": "inspector-resize-handle",
@@ -5685,7 +6006,7 @@ function InspectorFrame({
         onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         "data-testid": "inspector-frame",
@@ -5693,7 +6014,7 @@ function InspectorFrame({
         style,
         children: [
           children,
-          floating && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          floating && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               "data-testid": "inspector-resize-grip",
@@ -5704,7 +6025,7 @@ function InspectorFrame({
         ]
       }
     ),
-    minimized && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    minimized && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         "data-testid": "inspector-min-bar",
@@ -5712,9 +6033,9 @@ function InspectorFrame({
         title: messages.inspector.restore,
         style: minBarStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { width: 8, height: 8, borderRadius: "50%", background: colors.primary, flex: "0 0 auto" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 12, color: colors.textSecondary }, children: messages.inspector.minimizedTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { width: 8, height: 8, borderRadius: "50%", background: colors.primary, flex: "0 0 auto" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 12, color: colors.textSecondary }, children: messages.inspector.minimizedTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               type: "button",
@@ -5729,7 +6050,7 @@ function InspectorFrame({
               children: "\u2922"
             }
           ),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               type: "button",
@@ -5784,7 +6105,7 @@ var barBtnStyle = {
 };
 
 // src/toolbar/Toolbar.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Toolbar({
   derived,
   readOnly,
@@ -5798,7 +6119,7 @@ function Toolbar({
   toolbarEnd
 }) {
   const messages = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "footer",
     {
       style: {
@@ -5813,11 +6134,11 @@ function Toolbar({
       },
       "data-testid": "toolbar",
       children: [
-        toolbarStart && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: slotStyle, "data-testid": "toolbar-start", children: toolbarStart }),
-        toolbarCenter && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...slotStyle, flex: 1, justifyContent: "center" }, "data-testid": "toolbar-center", children: toolbarCenter }),
-        !toolbarCenter && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { role: "status", "aria-live": "polite", style: { display: "inline-flex", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        toolbarStart && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: slotStyle, "data-testid": "toolbar-start", children: toolbarStart }),
+        toolbarCenter && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { ...slotStyle, flex: 1, justifyContent: "center" }, "data-testid": "toolbar-center", children: toolbarCenter }),
+        !toolbarCenter && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { role: "status", "aria-live": "polite", style: { display: "inline-flex", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ValidationPill,
             {
               severity: "error",
@@ -5829,7 +6150,7 @@ function Toolbar({
               testId: "toolbar-errors"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ValidationPill,
             {
               severity: "warning",
@@ -5841,7 +6162,7 @@ function Toolbar({
               testId: "toolbar-warnings"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ValidationPill,
             {
               severity: "info",
@@ -5854,7 +6175,7 @@ function Toolbar({
             }
           )
         ] }),
-        onSave && showSaveButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        onSave && showSaveButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -5865,7 +6186,7 @@ function Toolbar({
             children: messages.toolbar.save
           }
         ),
-        toolbarEnd && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: slotStyle, "data-testid": "toolbar-end", children: toolbarEnd })
+        toolbarEnd && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: slotStyle, "data-testid": "toolbar-end", children: toolbarEnd })
       ]
     }
   );
@@ -5887,7 +6208,7 @@ function ValidationPill({
   const tone = severityTone(severity);
   const interactive = count > 0 && !!onClick;
   const hasIssues = count > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       type: "button",
@@ -5914,7 +6235,7 @@ function ValidationPill({
         height: 20
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: severity === "info" ? 14 : 10, lineHeight: 1 }, children: SEVERITY_ICON[severity] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { fontSize: severity === "info" ? 14 : 10, lineHeight: 1 }, children: SEVERITY_ICON[severity] }),
         count
       ]
     }
@@ -5939,7 +6260,7 @@ var slotStyle = {
 
 // src/toolbar/IssuesDrawer.tsx
 var import_react17 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function resolveTarget(doc, targetId) {
   if (!targetId) return null;
   const ids = doc.meta.ids;
@@ -6028,7 +6349,7 @@ function IssuesDrawer({
   }, [severity, messages]);
   const tone = severityTone(severity);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       ref,
@@ -6052,7 +6373,7 @@ function IssuesDrawer({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "header",
           {
             style: {
@@ -6063,7 +6384,7 @@ function IssuesDrawer({
               gap: 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: {
@@ -6076,12 +6397,12 @@ function IssuesDrawer({
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("strong", { style: { flex: 1, fontSize: 13, color: colors.textPrimary }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("strong", { style: { flex: 1, fontSize: 13, color: colors.textPrimary }, children: [
                 title,
                 " \xB7 ",
                 filtered.length
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   type: "button",
@@ -6104,14 +6425,14 @@ function IssuesDrawer({
             ]
           }
         ),
-        filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "p",
           {
             style: { padding: 12, color: colors.textTertiary, fontSize: 12, margin: 0 },
             "data-testid": "issues-drawer-empty",
             children: messages.issues.none
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "ul",
           {
             style: {
@@ -6125,7 +6446,7 @@ function IssuesDrawer({
             children: filtered.map((issue, idx) => {
               const target = resolveTarget(doc, issue.targetId);
               const targetLabel = target ? target.kind === "transition" ? `${messages.issues.relatedTransition}: ${target.label}` : target.kind === "state" ? `${messages.issues.relatedState}: ${target.label}` : target.label : null;
-              return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "li",
                 {
                   style: {
@@ -6139,10 +6460,10 @@ function IssuesDrawer({
                   },
                   "data-testid": `issues-drawer-item-${idx}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: tone.fg }, children: issue.code }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: 12, color: colors.textPrimary }, children: issue.message }),
-                    targetLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: 11, color: colors.textSecondary }, children: targetLabel }),
-                    target && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: tone.fg }, children: issue.code }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 12, color: colors.textPrimary }, children: issue.message }),
+                    targetLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 11, color: colors.textSecondary }, children: targetLabel }),
+                    target && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "button",
                       {
                         type: "button",
@@ -6182,7 +6503,7 @@ var import_react19 = require("react");
 // src/toolbar/VersionBadge.tsx
 var import_react18 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function VersionBadge({
   version,
   supportedVersions,
@@ -6215,7 +6536,7 @@ function VersionBadge({
     setOpen((o) => !o);
   };
   if (readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         "data-testid": "version-badge",
@@ -6234,7 +6555,7 @@ function VersionBadge({
     );
   }
   const dropdown = open && dropdownPos ? (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         ref: dropdownRef,
@@ -6253,7 +6574,7 @@ function VersionBadge({
           zIndex: 9999
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               style: {
@@ -6270,7 +6591,7 @@ function VersionBadge({
           ),
           [...supportedVersions].reverse().map((v) => {
             const isCurrent = v === version.replace(/^v/, "");
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "button",
               {
                 type: "button",
@@ -6293,16 +6614,16 @@ function VersionBadge({
                   textAlign: "left"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
                     v,
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 11, color: isCurrent ? "#93C5FD" : "#94A3B8" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 11, color: isCurrent ? "#93C5FD" : "#94A3B8" }, children: [
                       "cyoda-go ",
                       v,
                       ".x"
                     ] })
                   ] }),
-                  isCurrent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  isCurrent && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "span",
                     {
                       style: {
@@ -6326,8 +6647,8 @@ function VersionBadge({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "button",
       {
         ref: buttonRef,
@@ -6350,7 +6671,7 @@ function VersionBadge({
         },
         children: [
           version,
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 10, opacity: 0.7 }, children: open ? "\u25B4" : "\u25BE" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 10, opacity: 0.7 }, children: open ? "\u25B4" : "\u25BE" })
         ]
       }
     ),
@@ -6359,7 +6680,7 @@ function VersionBadge({
 }
 
 // src/toolbar/WorkflowTabs.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function WorkflowTabs({
   workflows,
   activeWorkflow,
@@ -6396,7 +6717,7 @@ function WorkflowTabs({
     setEditingTab(null);
   };
   const cancelEdit = () => setEditingTab(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "nav",
     {
       style: {
@@ -6414,7 +6735,7 @@ function WorkflowTabs({
         workflows.map((w) => {
           const active = w.name === activeWorkflow;
           const isEditing = editingTab === w.name;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               style: {
@@ -6425,7 +6746,7 @@ function WorkflowTabs({
                 background: active ? "white" : "transparent"
               },
               children: [
-                isEditing ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                isEditing ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -6456,7 +6777,7 @@ function WorkflowTabs({
                       width: Math.max(60, draftName.length * 8)
                     }
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6475,7 +6796,7 @@ function WorkflowTabs({
                     children: w.name || messages.tabs.untitled
                   }
                 ),
-                onClose && !readOnly && workflows.length > 1 && !isEditing && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                onClose && !readOnly && workflows.length > 1 && !isEditing && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -6498,7 +6819,7 @@ function WorkflowTabs({
             w.name
           );
         }),
-        onAdd && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        onAdd && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "button",
           {
             type: "button",
@@ -6523,9 +6844,9 @@ function WorkflowTabs({
             ]
           }
         ),
-        dialectVersion && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        dialectVersion && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             VersionBadge,
             {
               version: dialectVersion,
@@ -6543,7 +6864,7 @@ function WorkflowTabs({
 // src/modals/DragConnectModal.tsx
 var import_react20 = require("react");
 var import_workflow_core9 = require("@cyoda/workflow-core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function generateDefault(toState, existing) {
   const base = `to_${toState}`;
   if (!existing.has(base)) return base;
@@ -6564,16 +6885,16 @@ function DragConnectModal({
   const invalidFormat = !!name && !import_workflow_core9.NAME_REGEX.test(name);
   const duplicate = existing.has(name);
   const blocked = name.length === 0 || invalidFormat || duplicate;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ModalFrame, { onCancel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.dragConnect.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { style: { margin: "6px 0 14px", fontSize: 12, color: colors.textSecondary }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.dragConnect.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { style: { margin: "6px 0 14px", fontSize: 12, color: colors.textSecondary }, children: [
       fromState,
       " \u2192 ",
       toState
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 12, color: colors.textSecondary }, children: messages.dragConnect.transitionName }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 12, color: colors.textSecondary }, children: messages.dragConnect.transitionName }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "input",
         {
           type: "text",
@@ -6593,11 +6914,11 @@ function DragConnectModal({
         }
       )
     ] }),
-    invalidFormat && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-format", children: messages.dragConnect.invalidName }),
-    duplicate && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-duplicate", children: messages.dragConnect.duplicateName }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn6, "data-testid": "dragconnect-cancel", children: messages.dragConnect.cancel }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    invalidFormat && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-format", children: messages.dragConnect.invalidName }),
+    duplicate && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: errorMsg, "data-testid": "dragconnect-error-duplicate", children: messages.dragConnect.duplicateName }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn6, "data-testid": "dragconnect-cancel", children: messages.dragConnect.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           type: "button",
@@ -6634,7 +6955,7 @@ var primaryBtn3 = {
 // src/modals/AddStateModal.tsx
 var import_react21 = require("react");
 var import_workflow_core10 = require("@cyoda/workflow-core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function generateName(existing) {
   let n = 1;
   while (existing.includes(`state${n}`)) n++;
@@ -6662,11 +6983,11 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
     }
     onCreate(name.trim());
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ModalFrame, { onCancel, labelledBy: "add-state-title", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { id: "add-state-title", style: { margin: 0, fontSize: 16 }, children: "Add State" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { htmlFor: "add-state-name-input", style: { fontSize: 12, color: colors.textSecondary }, children: "State name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ModalFrame, { onCancel, labelledBy: "add-state-title", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: "add-state-title", style: { margin: 0, fontSize: 16 }, children: "Add State" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "add-state-name-input", style: { fontSize: 12, color: colors.textSecondary }, children: "State name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           ref: inputRef,
@@ -6692,7 +7013,7 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
           }
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           id: "add-state-error",
@@ -6702,8 +7023,8 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           type: "button",
@@ -6713,7 +7034,7 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           type: "button",
@@ -6743,15 +7064,15 @@ var primaryBtn4 = {
 
 // src/modals/HelpModal.tsx
 var import_theme6 = require("@cyoda/workflow-viewer/theme");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function HelpModal({ onCancel }) {
   const messages = useMessages();
   const h = messages.help;
   const node = import_theme6.workflowPalette.node;
   const edge = import_theme6.workflowPalette.edge;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalFrame, { onCancel, labelledBy: "workflow-help-title", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { width: 480, maxWidth: "85vw" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: "workflow-help-title", style: { margin: 0, fontSize: 16 }, children: h.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ModalFrame, { onCancel, labelledBy: "workflow-help-title", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { width: 480, maxWidth: "85vw" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { id: "workflow-help-title", style: { margin: 0, fontSize: 16 }, children: h.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         style: {
@@ -6764,48 +7085,46 @@ function HelpModal({ onCancel }) {
           gap: 16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Section, { title: h.statesTitle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: node.initial.fill, border: node.initial.border, label: h.stateInitial }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: node.default.fill, border: node.default.border, label: h.stateDefault }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: node.processing.fill, border: node.processing.border, label: h.stateProcessing }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: node.manualReview.fill, border: node.manualReview.border, label: h.stateManualReview }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: node.terminal.fill, border: node.terminal.border, label: h.stateTerminal }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: "#FFFFFF", border: colors.danger, label: h.stateError }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorRow, { fill: "#FFFFFF", border: colors.warning, label: h.stateWarning })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: h.statesTitle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorRow, { fill: node.initial.fill, border: node.initial.border, label: h.stateInitial }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorRow, { fill: node.default.fill, border: node.default.border, label: h.stateDefault }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorRow, { fill: node.terminal.fill, border: node.terminal.border, label: h.stateTerminal }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorRow, { fill: "#FFFFFF", border: colors.danger, label: h.stateError }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorRow, { fill: "#FFFFFF", border: colors.warning, label: h.stateWarning })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Section, { title: h.transitionsTitle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.automated, label: h.transitionAutomated }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.manual, dashed: true, label: h.transitionManual }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.conditional, label: h.transitionConditional }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.processing, label: h.transitionProcessing }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.terminal, label: h.transitionTerminal }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.loop, label: h.transitionLoop }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LineRow, { color: edge.disabled, label: h.transitionDisabled })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: h.transitionsTitle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.automated, label: h.transitionAutomated }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.manual, dashed: true, label: h.transitionManual }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.conditional, label: h.transitionConditional }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.processing, label: h.transitionProcessing }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.terminal, label: h.transitionTerminal }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.loop, label: h.transitionLoop }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineRow, { color: edge.disabled, label: h.transitionDisabled })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Section, { title: h.controlsTitle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "A", label: h.shortcutAddState }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "L", label: h.shortcutAutoLayout }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 Z", label: h.shortcutUndo }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 \u21E7 Z", label: h.shortcutRedo }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 S", label: h.shortcutSave }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "Delete", label: h.shortcutDelete }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ShortcutRow, { keys: "Esc", label: h.shortcutEscape })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: h.controlsTitle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "A", label: h.shortcutAddState }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "L", label: h.shortcutAutoLayout }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 Z", label: h.shortcutUndo }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 \u21E7 Z", label: h.shortcutRedo }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "Ctrl/\u2318 S", label: h.shortcutSave }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "Delete", label: h.shortcutDelete }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ShortcutRow, { keys: "Esc", label: h.shortcutEscape })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Section, { title: h.tipsTitle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { style: { margin: 0, paddingLeft: 18, fontSize: 13, color: colors.textSecondary, display: "flex", flexDirection: "column", gap: 6 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: h.tipDoubleClick }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: h.tipConnect }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: h.tipSelect }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: h.tipMove })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Section, { title: h.tipsTitle, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { style: { margin: 0, paddingLeft: 18, fontSize: 13, color: colors.textSecondary, display: "flex", flexDirection: "column", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: h.tipDoubleClick }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: h.tipConnect }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: h.tipSelect }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: h.tipMove })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtnStyle, "data-testid": "help-modal-close", children: h.close }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtnStyle, "data-testid": "help-modal-close", children: h.close }) })
   ] }) });
 }
 function Section({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "h3",
       {
         style: {
@@ -6819,12 +7138,12 @@ function Section({ title, children }) {
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children })
   ] });
 }
 function ColorRow({ fill, border, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "span",
       {
         style: {
@@ -6837,12 +7156,12 @@ function ColorRow({ fill, border, label }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label })
   ] });
 }
 function LineRow({ color, label, dashed }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "28", height: "14", style: { flexShrink: 0 }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "28", height: "14", style: { flexShrink: 0 }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "line",
       {
         x1: "2",
@@ -6855,12 +7174,12 @@ function LineRow({ color, label, dashed }) {
         ...dashed ? { strokeDasharray: "3 3" } : {}
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label })
   ] });
 }
 function ShortcutRow({ keys, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "kbd",
       {
         style: {
@@ -6880,12 +7199,12 @@ function ShortcutRow({ keys, label }) {
         children: keys
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label })
   ] });
 }
 
 // src/modals/VersionSwitchModal.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function VersionSwitchModal({
   fromVersion,
   toVersion,
@@ -6893,7 +7212,7 @@ function VersionSwitchModal({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -6905,7 +7224,7 @@ function VersionSwitchModal({
         justifyContent: "center",
         zIndex: 1e3
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           "data-testid": "version-switch-modal",
@@ -6919,8 +7238,8 @@ function VersionSwitchModal({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: "16px 20px 0", display: "flex", alignItems: "flex-start", gap: 12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "16px 20px 0", display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "div",
                 {
                   style: {
@@ -6937,20 +7256,20 @@ function VersionSwitchModal({
                   children: "\u26A0\uFE0F"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { fontWeight: 600, fontSize: 14, color: "#0F172A", marginBottom: 4 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { fontWeight: 600, fontSize: 14, color: "#0F172A", marginBottom: 4 }, children: [
                   "Switch to ",
                   toVersion,
                   "?"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { color: "#475569", lineHeight: 1.5, fontSize: 13 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { color: "#475569", lineHeight: 1.5, fontSize: 13 }, children: [
                   "Switching to ",
                   toVersion,
                   " will remove data not supported in that dialect:"
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "div",
               {
                 style: {
@@ -6963,17 +7282,17 @@ function VersionSwitchModal({
                   fontSize: 12
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Will be removed:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { style: { margin: 0, paddingLeft: 16, lineHeight: 1.8 }, children: warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: w }, i)) })
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Will be removed:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { style: { margin: 0, paddingLeft: 16, lineHeight: 1.8 }, children: warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children: w }, i)) })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: "10px 20px 0 64px", color: "#64748B", fontSize: 12, lineHeight: 1.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "10px 20px 0 64px", color: "#64748B", fontSize: 12, lineHeight: 1.5 }, children: [
               "This cannot be undone. You can switch back to ",
               fromVersion,
               " any time, but the removed data will not be restored."
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "div",
               {
                 style: {
@@ -6985,7 +7304,7 @@ function VersionSwitchModal({
                   marginTop: 16
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "button",
                     {
                       type: "button",
@@ -7003,7 +7322,7 @@ function VersionSwitchModal({
                       children: "Cancel"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -7038,7 +7357,7 @@ function VersionSwitchModal({
 
 // src/components/CommentNode.tsx
 var import_react22 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CommentNode({ comment, disabled, onUpdate, onRemove }) {
   const [editing, setEditing] = (0, import_react22.useState)(false);
   const [draft, setDraft] = (0, import_react22.useState)(comment.text);
@@ -7047,7 +7366,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
     setEditing(false);
     if (draft !== comment.text) onUpdate({ text: draft });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       "data-testid": `comment-${comment.id}`,
@@ -7068,8 +7387,8 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
         userSelect: "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 4, marginBottom: 4 }, children: [
-          !disabled && !editing && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 4, marginBottom: 4 }, children: [
+          !disabled && !editing && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               type: "button",
@@ -7084,7 +7403,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
               children: "\u270F\uFE0F"
             }
           ),
-          !disabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          !disabled && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               type: "button",
@@ -7096,7 +7415,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
             }
           )
         ] }),
-        editing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "textarea",
           {
             ref: textareaRef,
@@ -7122,7 +7441,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
             },
             "data-testid": `comment-textarea-${comment.id}`
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             onDoubleClick: () => {
@@ -7132,7 +7451,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
               }
             },
             style: { whiteSpace: "pre-wrap", wordBreak: "break-word", minHeight: 20 },
-            children: comment.text || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("em", { style: { color: "#94a3b8" }, children: "empty note" })
+            children: comment.text || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("em", { style: { color: "#94a3b8" }, children: "empty note" })
           }
         )
       ]
@@ -7152,7 +7471,7 @@ var iconBtn = {
 // src/components/WorkflowJsonEditor.tsx
 var import_react23 = require("react");
 var import_workflow_monaco2 = require("@cyoda/workflow-monaco");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function WorkflowJsonEditor({
   document: document2,
   issues,
@@ -7277,7 +7596,7 @@ function WorkflowJsonEditor({
     return () => window.clearTimeout(timeout);
   }, [document2, selectedId, visible]);
   if (!config) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         "data-testid": "workflow-json-unavailable",
@@ -7292,11 +7611,11 @@ function WorkflowJsonEditor({
           textAlign: "center",
           background: "#F8FAFC"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnavailableMessage, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UnavailableMessage, {})
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       "data-testid": "workflow-json-editor",
@@ -7308,8 +7627,8 @@ function WorkflowJsonEditor({
         minHeight: 0
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(JsonStatusBanner, { status }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(JsonStatusBanner, { status }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             ref: containerRef,
@@ -7322,7 +7641,7 @@ function WorkflowJsonEditor({
 }
 function UnavailableMessage() {
   const messages = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: messages.editorView.unavailable });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: messages.editorView.unavailable });
 }
 function JsonStatusBanner({ status }) {
   const messages = useMessages();
@@ -7331,7 +7650,7 @@ function JsonStatusBanner({ status }) {
   }
   const tone = status.status === "semantic-errors" ? { border: "#FCD34D", bg: "#FFFBEB", text: "#92400E" } : { border: "#FCA5A5", bg: "#FEF2F2", text: "#991B1B" };
   const body = status.status === "semantic-errors" ? messages.editorView.semanticErrors : status.status === "invalid-schema" ? messages.editorView.invalidSchema : `${messages.editorView.invalidJson}${status.message ? ` ${status.message}` : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       role: "status",
@@ -7375,7 +7694,7 @@ function selectionFromJsonId(doc, id) {
 }
 
 // src/components/WorkflowEditor.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function hasPersistedWorkflowUi(meta) {
   return !!meta && Object.values(meta).some((value) => value !== void 0);
 }
@@ -7451,6 +7770,9 @@ function WorkflowEditor({
   const [helpOpen, setHelpOpen] = (0, import_react24.useState)(false);
   const [reconnectError, setReconnectError] = (0, import_react24.useState)(null);
   const [layoutKey, setLayoutKey] = (0, import_react24.useState)(0);
+  const [layoutPref, setLayoutPref] = (0, import_react24.useState)(
+    () => loadLayoutPref(localStorageKey, layoutOptions)
+  );
   const [activeSurface, setActiveSurface] = (0, import_react24.useState)("graph");
   const [jsonStatus, setJsonStatus] = (0, import_react24.useState)({ status: "idle" });
   const [openIssueSeverity, setOpenIssueSeverity] = (0, import_react24.useState)(null);
@@ -7634,6 +7956,30 @@ function WorkflowEditor({
     );
     setLayoutKey((k) => k + 1);
   }, [state.activeWorkflow, state.document, actions]);
+  (0, import_react24.useEffect)(() => {
+    saveLayoutPref(localStorageKey, layoutPref);
+  }, [layoutPref, localStorageKey]);
+  const propLayoutRef = (0, import_react24.useRef)({
+    orientation: layoutOptions?.orientation,
+    preset: layoutOptions?.preset
+  });
+  (0, import_react24.useEffect)(() => {
+    const nextO = layoutOptions?.orientation;
+    const nextP = layoutOptions?.preset;
+    if (nextO === propLayoutRef.current.orientation && nextP === propLayoutRef.current.preset) return;
+    propLayoutRef.current = { orientation: nextO, preset: nextP };
+    setLayoutPref((prev) => ({
+      orientation: nextO ?? prev.orientation,
+      preset: nextP ?? prev.preset
+    }));
+  }, [layoutOptions?.orientation, layoutOptions?.preset]);
+  const applyLayoutPref = (0, import_react24.useCallback)(
+    (update) => {
+      setLayoutPref((prev) => ({ ...prev, ...update }));
+      handleAutoLayout();
+    },
+    [handleAutoLayout]
+  );
   const openAddStateModal = (0, import_react24.useCallback)((position) => {
     const resolved = position ?? newStatePositionRef.current?.() ?? void 0;
     setPendingAddState(resolved ? { position: resolved } : {});
@@ -7775,6 +8121,15 @@ function WorkflowEditor({
     },
     [actions]
   );
+  const toggleWorkflowSettings = (0, import_react24.useCallback)(() => {
+    if (inspectorOpen && selectionRef.current?.kind === "workflow") {
+      handleSelectionChange(null);
+    } else {
+      handleSelectionChange(
+        activeWorkflowRef.current ? { kind: "workflow", workflow: activeWorkflowRef.current } : null
+      );
+    }
+  }, [inspectorOpen, handleSelectionChange]);
   const confirmAddState = (0, import_react24.useCallback)(
     (name) => {
       const workflow = state.activeWorkflow;
@@ -7914,10 +8269,15 @@ function WorkflowEditor({
     if (!wf) return null;
     return wf.states[pendingConnect.fromState] ?? null;
   }, [pendingConnect, state.document]);
-  const orientation = layoutOptions?.orientation ?? "vertical";
+  const orientation = layoutPref.orientation;
   const effectiveLayoutOptions = (0, import_react24.useMemo)(
-    () => ({ ...layoutOptions, pinned: pinnedNodes }),
-    [layoutOptions, pinnedNodes]
+    () => ({
+      ...layoutOptions,
+      orientation: layoutPref.orientation,
+      preset: layoutPref.preset,
+      pinned: pinnedNodes
+    }),
+    [layoutOptions, layoutPref, pinnedNodes]
   );
   const savedViewport = state.activeWorkflow ? state.document.meta.workflowUi[state.activeWorkflow]?.viewports?.[orientation] : void 0;
   (0, import_react24.useEffect)(() => {
@@ -7959,13 +8319,13 @@ function WorkflowEditor({
     if (readOnly || anyModalOpen) return;
     openAddStateModal({ x, y });
   }, [anyModalOpen, openAddStateModal, readOnly]);
-  const graphPane = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const graphPane = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       "data-testid": "workflow-editor-graph-pane",
       style: { flex: 1, minWidth: 0, minHeight: 0, height: "100%", position: "relative" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Canvas,
           {
             graph: derived.graph,
@@ -7978,6 +8338,7 @@ function WorkflowEditor({
             transitionPositions,
             onTransitionLabelDragEnd: handleTransitionLabelDragEnd,
             onSelectionChange: handleSelectionChange,
+            onToggleWorkflowSettings: toggleWorkflowSettings,
             onViewportChange: handleViewportChange,
             onConnect: handleConnect,
             onReconnect: handleReconnect,
@@ -8003,6 +8364,8 @@ function WorkflowEditor({
             onUndo: !readOnly ? actions.undo : void 0,
             onRedo: !readOnly ? actions.redo : void 0,
             onAutoLayout: !readOnly ? handleAutoLayout : void 0,
+            onSetLayoutOrientation: !readOnly ? (o) => applyLayoutPref({ orientation: o }) : void 0,
+            onSetLayoutDensity: !readOnly ? (p) => applyLayoutPref({ preset: p }) : void 0,
             isFullscreen,
             onToggleFullscreen: handleToggleFullscreen,
             resizeKey: inspectorVisible ? 1 : 0,
@@ -8010,7 +8373,7 @@ function WorkflowEditor({
             helpLabel: mergedMessages.toolbar.help
           }
         ),
-        reconnectError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        reconnectError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             role: "alert",
@@ -8035,7 +8398,7 @@ function WorkflowEditor({
         state.activeWorkflow && (() => {
           const comments = state.document.meta.workflowUi[state.activeWorkflow]?.comments;
           if (!comments) return null;
-          return Object.values(comments).map((c) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          return Object.values(comments).map((c) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             CommentNode,
             {
               comment: c,
@@ -8058,12 +8421,12 @@ function WorkflowEditor({
       ]
     }
   );
-  const jsonPane = enableJsonEditor ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const jsonPane = enableJsonEditor ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       "data-testid": "workflow-editor-json-pane",
       style: { flex: 1, minWidth: 0, minHeight: 0, height: "100%" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         WorkflowJsonEditor,
         {
           document: state.document,
@@ -8079,7 +8442,7 @@ function WorkflowEditor({
       )
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CriterionMonacoProvider, { value: jsonEditor?.monaco ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(I18nContext.Provider, { value: mergedMessages, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorConfigContext.Provider, { value: editorConfig, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CriterionMonacoProvider, { value: jsonEditor?.monaco ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(I18nContext.Provider, { value: mergedMessages, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EditorConfigContext.Provider, { value: editorConfig, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       ref: editorContainerRef,
@@ -8100,7 +8463,7 @@ function WorkflowEditor({
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       children: [
-        chrome?.tabs !== false && showTabs && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        chrome?.tabs !== false && showTabs && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           WorkflowTabs,
           {
             workflows,
@@ -8127,9 +8490,9 @@ function WorkflowEditor({
             onVersionChange: handleVersionChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-            (enableJsonEditor && jsonEditorPlacement === "tab" || !readOnly && graphVisible) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+            (enableJsonEditor && jsonEditorPlacement === "tab" || !readOnly && graphVisible) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "div",
               {
                 style: {
@@ -8143,8 +8506,8 @@ function WorkflowEditor({
                 },
                 "data-testid": "workflow-editor-surface-tabs",
                 children: [
-                  enableJsonEditor && jsonEditorPlacement === "tab" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  enableJsonEditor && jsonEditorPlacement === "tab" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       SurfaceTab,
                       {
                         active: activeSurface === "graph",
@@ -8152,7 +8515,7 @@ function WorkflowEditor({
                         children: mergedMessages.editorView.graph
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       SurfaceTab,
                       {
                         active: activeSurface === "json",
@@ -8161,8 +8524,8 @@ function WorkflowEditor({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { flex: 1 } }),
-                  !readOnly && activeSurface === "graph" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { flex: 1 } }),
+                  !readOnly && activeSurface === "graph" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -8183,7 +8546,7 @@ function WorkflowEditor({
                         cursor: "pointer"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 5v14M5 12h14" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M12 5v14M5 12h14" }) }),
                         mergedMessages.toolbar.addStateButton
                       ]
                     }
@@ -8191,7 +8554,7 @@ function WorkflowEditor({
                 ]
               }
             ),
-            enableJsonEditor && jsonEditorPlacement === "split" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            enableJsonEditor && jsonEditorPlacement === "split" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "div",
               {
                 style: {
@@ -8204,10 +8567,10 @@ function WorkflowEditor({
                 "data-testid": "workflow-editor-split-view",
                 children: [
                   graphPane,
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { borderLeft: "1px solid #E2E8F0", minWidth: 0 }, children: jsonPane })
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { borderLeft: "1px solid #E2E8F0", minWidth: 0 }, children: jsonPane })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "div",
               {
                 style: {
@@ -8219,8 +8582,8 @@ function WorkflowEditor({
                   flexDirection: "column"
                 },
                 children: [
-                  graphVisible ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { flex: 1, minHeight: 0, minWidth: 0 }, children: graphPane }) : null,
-                  enableJsonEditor ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  graphVisible ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { flex: 1, minHeight: 0, minWidth: 0 }, children: graphPane }) : null,
+                  enableJsonEditor ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       style: {
@@ -8237,7 +8600,7 @@ function WorkflowEditor({
               }
             )
           ] }),
-          inspectorVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          inspectorVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             InspectorFrame,
             {
               mode: placement.mode,
@@ -8247,7 +8610,7 @@ function WorkflowEditor({
               onDockedWidthChange: setInspectorWidth,
               onRestore: restoreInspector,
               onClose: () => handleSelectionChange(null),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 Inspector,
                 {
                   document: state.document,
@@ -8266,7 +8629,7 @@ function WorkflowEditor({
             }
           )
         ] }),
-        pendingAddState !== null && state.activeWorkflow && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        pendingAddState !== null && state.activeWorkflow && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           AddStateModal,
           {
             existingNames: Object.keys(
@@ -8278,7 +8641,7 @@ function WorkflowEditor({
             onCancel: () => setPendingAddState(null)
           }
         ),
-        pendingDelete && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        pendingDelete && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           DeleteStateModal,
           {
             document: state.document,
@@ -8288,7 +8651,7 @@ function WorkflowEditor({
             onCancel: () => setPendingDelete(null)
           }
         ),
-        pendingConnect && pendingConnectState && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        pendingConnect && pendingConnectState && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           DragConnectModal,
           {
             source: pendingConnectState,
@@ -8298,8 +8661,8 @@ function WorkflowEditor({
             onCancel: () => setPendingConnect(null)
           }
         ),
-        helpOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HelpModal, { onCancel: () => setHelpOpen(false) }),
-        pendingVersionSwitch && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        helpOpen && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HelpModal, { onCancel: () => setHelpOpen(false) }),
+        pendingVersionSwitch && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           VersionSwitchModal,
           {
             fromVersion: `v${state.document.meta.cyodaVersion ?? import_workflow_core11.LATEST_CYODA_VERSION}`,
@@ -8312,8 +8675,8 @@ function WorkflowEditor({
             onCancel: () => setPendingVersionSwitch(null)
           }
         ),
-        chrome?.toolbar !== false && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        chrome?.toolbar !== false && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Toolbar,
             {
               derived,
@@ -8328,7 +8691,7 @@ function WorkflowEditor({
               toolbarEnd
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             IssuesDrawer,
             {
               open: openIssueSeverity !== null,
@@ -8400,7 +8763,10 @@ function buildReconnectTransaction(doc, edge, connection) {
         summary: `Reconnect transition "${transition.name}"`,
         patches: patches2,
         inverses: inverses2,
-        selectionAfter: { kind: "transition", transitionUuid: edge.id }
+        // A pure re-anchor is a layout tweak — preserve the current selection
+        // (omitting selectionAfter). Changing the target state is a structural
+        // edit, so select the transition.
+        ...targetChanged ? { selectionAfter: { kind: "transition", transitionUuid: edge.id } } : {}
       }
     };
   }
@@ -8508,7 +8874,7 @@ function SurfaceTab({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
     {
       type: "button",
@@ -8639,7 +9005,7 @@ function useSaveFlow(args) {
 
 // src/save/SaveConfirmModal.tsx
 var import_react26 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function SaveConfirmModal({
   mode,
   requiresExplicitConfirm,
@@ -8652,14 +9018,14 @@ function SaveConfirmModal({
   const [ackMode, setAckMode] = (0, import_react26.useState)(!requiresExplicitConfirm);
   const [ackWarnings, setAckWarnings] = (0, import_react26.useState)(warningCount === 0);
   const blocked = !ackMode || !ackWarnings;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ModalFrame, { onCancel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.saveConfirm.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { style: { margin: 0, fontSize: 16 }, children: messages.saveConfirm.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: [
       messages.saveConfirm.modeLabel,
       ": ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("strong", { children: mode })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("strong", { children: mode })
     ] }),
-    diffSummary2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    diffSummary2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "pre",
       {
         style: {
@@ -8678,8 +9044,8 @@ function SaveConfirmModal({
         children: diffSummary2
       }
     ),
-    requiresExplicitConfirm && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { style: checkRow, "data-testid": "save-ack-mode", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    requiresExplicitConfirm && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { style: checkRow, "data-testid": "save-ack-mode", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "input",
         {
           type: "checkbox",
@@ -8687,10 +9053,10 @@ function SaveConfirmModal({
           onChange: (e) => setAckMode(e.target.checked)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: mode === "REPLACE" ? messages.saveConfirm.ackReplace : messages.saveConfirm.ackActivate })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: mode === "REPLACE" ? messages.saveConfirm.ackReplace : messages.saveConfirm.ackActivate })
     ] }),
-    warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { style: checkRow, "data-testid": "save-ack-warnings", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { style: checkRow, "data-testid": "save-ack-warnings", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "input",
         {
           type: "checkbox",
@@ -8698,11 +9064,11 @@ function SaveConfirmModal({
           onChange: (e) => setAckWarnings(e.target.checked)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: messages.saveConfirm.ackWarnings.replace("{count}", String(warningCount)) })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: messages.saveConfirm.ackWarnings.replace("{count}", String(warningCount)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn8, "data-testid": "save-cancel", children: messages.saveConfirm.cancel }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", onClick: onCancel, style: ghostBtn8, "data-testid": "save-cancel", children: messages.saveConfirm.cancel }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
@@ -8740,10 +9106,10 @@ var primaryBtn5 = {
 };
 
 // src/save/ConflictBanner.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ConflictBanner({ onReload, onForceOverwrite }) {
   const messages = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       style: {
@@ -8759,8 +9125,8 @@ function ConflictBanner({ onReload, onForceOverwrite }) {
       role: "alert",
       "data-testid": "conflict-banner",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { flex: 1 }, children: messages.conflict.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { flex: 1 }, children: messages.conflict.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           {
             type: "button",
@@ -8770,7 +9136,7 @@ function ConflictBanner({ onReload, onForceOverwrite }) {
             children: messages.conflict.reload
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           {
             type: "button",