@cyoda/workflow-react 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/WorkflowEditor.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef14, useState as useState17 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo7, useRef as useRef16, useState as useState18 } from "react";
 import {
   applyPatch as applyPatch2,
   invertPatch as invertPatch2,
@@ -96,6 +96,13 @@ var defaultMessages = {
     processes: "Processes",
     criterion: "Criterion",
     criteria: "Criteria",
+    annotations: "Annotations",
+    annotationsAdd: "Add annotations",
+    annotationsApply: "Apply",
+    annotationsRevert: "Revert",
+    annotationsRemove: "Remove",
+    annotationsDocChanged: "Document changed underneath \u2014 Revert to reload.",
+    format: "Format",
     executionMode: "Execution mode",
     addProcessor: "Add processor",
     removeProcessor: "Remove",
@@ -117,7 +124,12 @@ var defaultMessages = {
     anchorBottomRight: "Bottom right",
     anchorLeftTop: "Left top",
     anchorLeft: "Left",
-    anchorLeftBottom: "Left bottom"
+    anchorLeftBottom: "Left bottom",
+    detachPanel: "Detach panel",
+    dockPanel: "Dock panel",
+    minimize: "Minimize",
+    restore: "Restore",
+    minimizedTitle: "Inspector"
   },
   confirmDelete: {
     title: "Delete state?",
@@ -171,7 +183,9 @@ var defaultMessages = {
     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.",
     cancel: "Cancel",
-    applyModal: "Apply"
+    applyModal: "Apply",
+    revert: "Revert",
+    collapse: "Collapse"
   }
 };
 
@@ -243,6 +257,8 @@ function summarize(patch) {
       return `Reorder processor`;
     case "setCriterion":
       return patch.criterion ? `Set criterion` : `Clear criterion`;
+    case "setAnnotations":
+      return patch.annotations ? `Set annotations` : `Clear annotations`;
     case "setImportMode":
       return `Set import mode to "${patch.mode}"`;
     case "setEntity":
@@ -2726,7 +2742,17 @@ function CanvasInner({
               onHelp && /* @__PURE__ */ jsxs4(Fragment3, { children: [
                 /* @__PURE__ */ jsx5("div", { style: { height: 1, background: "#E2E8F0" } }),
                 /* @__PURE__ */ jsx5(CtrlBtn, { onClick: onHelp, title: helpLabel ?? "Help", testId: "canvas-help", children: /* @__PURE__ */ jsx5(HelpIcon, {}) })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx5("div", { style: { height: 1, background: "#E2E8F0" } }),
+              /* @__PURE__ */ jsx5(
+                CtrlBtn,
+                {
+                  onClick: () => onSelectionChange(activeWorkflow ? { kind: "workflow", workflow: activeWorkflow } : null),
+                  title: "Workflow settings",
+                  testId: "canvas-workflow-settings",
+                  children: /* @__PURE__ */ jsx5(WorkflowSettingsIcon, {})
+                }
+              )
             ]
           }
         ),
@@ -2846,6 +2872,16 @@ function HelpIcon() {
     /* @__PURE__ */ jsx5("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
   ] });
 }
+function WorkflowSettingsIcon() {
+  return /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx5("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+    /* @__PURE__ */ jsx5("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+    /* @__PURE__ */ jsx5("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "6", r: "2", fill: "white" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "15", cy: "12", r: "2", fill: "white" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "8", cy: "18", r: "2", fill: "white" })
+  ] });
+}
 function Canvas(props) {
   return /* @__PURE__ */ jsx5(ReactFlowProvider, { children: /* @__PURE__ */ jsx5(CanvasInner, { ...props }) });
 }
@@ -2866,7 +2902,7 @@ function resolveConnection(doc, connection) {
 }
 
 // src/inspector/Inspector.tsx
-import { useMemo as useMemo4, useState as useState10 } from "react";
+import { useMemo as useMemo4, useState as useState11 } from "react";
 import { serializeEditorDocument } from "@cyoda/workflow-core";
 
 // src/style/tokens.ts
@@ -3331,16 +3367,301 @@ var smallSelectStyle = {
   userSelect: "none"
 };
 
-// src/inspector/WorkflowForm.tsx
+// src/inspector/AnnotationsField.tsx
+import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
+
+// src/inspector/JsonMonacoField.tsx
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
+
+// src/inspector/CriterionMonacoContext.tsx
+import { createContext as createContext3, useContext as useContext4 } from "react";
+var CriterionMonacoContext = createContext3(null);
+var CriterionMonacoProvider = CriterionMonacoContext.Provider;
+function useCriterionMonaco() {
+  return useContext4(CriterionMonacoContext);
+}
+
+// src/components/monacoDisposal.ts
+var installed = false;
+function isMonacoCanceled(reason) {
+  if (reason == null || typeof reason !== "object") return false;
+  return reason.name === "Canceled";
+}
+function installMonacoCancellationFilter() {
+  if (installed || typeof window === "undefined") return;
+  installed = true;
+  window.addEventListener("unhandledrejection", (e) => {
+    if (isMonacoCanceled(e.reason)) e.preventDefault();
+  });
+}
+installMonacoCancellationFilter();
+
+// src/inspector/JsonMonacoField.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function reformat(text) {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return null;
+  }
+}
+function JsonMonacoField(props) {
+  const monaco = useCriterionMonaco();
+  const messages = useMessages();
+  const onFormat = () => {
+    const next = reformat(props.buffer);
+    if (next !== null && next !== props.buffer) props.onChange(next);
+  };
+  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx7("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        onClick: onFormat,
+        disabled: props.disabled,
+        "data-testid": `${props.testId}-format`,
+        style: { ...ghostBtnStyle, fontSize: 11, padding: "2px 8px" },
+        children: messages.inspector.format
+      }
+    ) }),
+    monaco ? /* @__PURE__ */ jsx7(MonacoPane, { ...props, monaco }) : /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        value: props.buffer,
+        disabled: props.disabled,
+        rows: 12,
+        "data-testid": props.testId,
+        onChange: (e) => props.onChange(e.target.value),
+        style: {
+          fontFamily: fonts.mono,
+          fontSize: 12,
+          padding: 8,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          border: `1px solid ${colors.border}`,
+          borderRadius: radii.sm,
+          background: colors.surface,
+          resize: "vertical",
+          minHeight: props.minHeightPx ?? 120
+        }
+      }
+    )
+  ] });
+}
+function MonacoPane({
+  monaco,
+  buffer,
+  disabled,
+  modelUri,
+  onChange,
+  seed,
+  registerSchema,
+  minHeightPx = 120,
+  maxHeightPx = 480,
+  testId
+}) {
+  const containerRef = useRef5(null);
+  const editorRef = useRef5(null);
+  const modelRef = useRef5(null);
+  useEffect3(() => {
+    if (!containerRef.current || editorRef.current) return;
+    const model = monaco.editor.createModel(buffer, "json", monaco.Uri.parse(modelUri));
+    modelRef.current = model;
+    const editor = monaco.editor.create(containerRef.current, {
+      model,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      wordWrap: "on",
+      fontSize: 13,
+      tabSize: 2,
+      scrollBeyondLastLine: false,
+      theme: "vs",
+      readOnly: disabled
+    });
+    editorRef.current = editor;
+    installMonacoCancellationFilter();
+    const schemaHandle = registerSchema?.(monaco) ?? null;
+    const applyHeight = () => {
+      const h = Math.min(Math.max(editor.getContentHeight?.() ?? minHeightPx, minHeightPx), maxHeightPx);
+      if (containerRef.current) containerRef.current.style.height = `${h}px`;
+      editor.layout?.();
+    };
+    applyHeight();
+    const sizeSub = editor.onDidContentSizeChange?.(applyHeight) ?? { dispose() {
+    } };
+    const sub = model.onDidChangeContent(() => onChange(model.getValue()));
+    return () => {
+      sub.dispose();
+      sizeSub.dispose();
+      schemaHandle?.dispose();
+      editor.dispose();
+      editorRef.current = null;
+      model.dispose();
+      modelRef.current = null;
+    };
+  }, [monaco, modelUri]);
+  useEffect3(() => {
+    const model = modelRef.current;
+    if (model && seed !== void 0 && model.getValue() !== seed) model.setValue(seed);
+  }, [seed]);
+  useEffect3(() => {
+    editorRef.current?.updateOptions?.({ readOnly: disabled });
+  }, [disabled]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: containerRef,
+      "data-testid": testId,
+      style: { height: minHeightPx, border: `1px solid ${colors.border}`, borderRadius: radii.sm }
+    }
+  );
+}
+
+// src/inspector/annotationsJson.ts
+import { ANNOTATIONS_MAX_BYTES } from "@cyoda/workflow-core";
+function annotationsModelUri(key) {
+  return `cyoda://annotations/${key}.json`;
+}
+function annotationBytes(value) {
+  return new TextEncoder().encode(JSON.stringify(value)).length;
+}
+function sameJson(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+function parseAnnotationsJson(text) {
+  let raw;
+  try {
+    raw = JSON.parse(text);
+  } catch {
+    return { annotations: null, error: "Invalid JSON." };
+  }
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    return { annotations: null, error: "Annotations must be a JSON object." };
+  }
+  const bytes = annotationBytes(raw);
+  if (bytes > ANNOTATIONS_MAX_BYTES) {
+    return {
+      annotations: null,
+      error: `Annotations are ${bytes} bytes, over the ${ANNOTATIONS_MAX_BYTES}-byte limit.`
+    };
+  }
+  return { annotations: raw, error: null };
+}
+
+// src/inspector/AnnotationsField.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var pretty = (v) => JSON.stringify(v, null, 2);
+function AnnotationsField(props) {
+  const messages = useMessages();
+  if (props.value === void 0) {
+    return /* @__PURE__ */ jsxs7("div", { style: sectionStyle, children: [
+      props.showLabel !== false && /* @__PURE__ */ jsx8(SectionLabel, {}),
+      !props.disabled && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          style: primaryBtn,
+          "data-testid": "inspector-annotations-add",
+          onClick: () => props.onCommit({}),
+          children: messages.inspector.annotationsAdd
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx8(AnnotationsEditor, { ...props, value: props.value }, props.modelKey);
+}
+function AnnotationsEditor({
+  value,
+  disabled,
+  modelKey,
+  onCommit,
+  onRemove,
+  showLabel
+}) {
+  const messages = useMessages();
+  const [buffer, setBuffer] = useState6(() => pretty(value));
+  const [docChanged, setDocChanged] = useState6(false);
+  const prevValueRef = useRef6(value);
+  useEffect4(() => {
+    if (sameJson(prevValueRef.current, value)) return;
+    const parsed = parseAnnotationsJson(buffer).annotations;
+    if (parsed !== null && sameJson(parsed, value)) {
+      setDocChanged(false);
+    } else if (parsed !== null && sameJson(parsed, prevValueRef.current)) {
+      setBuffer(pretty(value));
+      setDocChanged(false);
+    } else {
+      setDocChanged(true);
+    }
+    prevValueRef.current = value;
+  }, [value, buffer]);
+  const result = parseAnnotationsJson(buffer);
+  const dirty = result.annotations !== null && !sameJson(result.annotations, value);
+  const applyEnabled = !disabled && result.annotations !== null && dirty;
+  const canRevert = buffer !== pretty(value);
+  const apply = () => {
+    if (!applyEnabled || result.annotations === null) return;
+    onCommit(result.annotations);
+    setDocChanged(false);
+  };
+  const revert = () => {
+    setBuffer(pretty(value));
+    setDocChanged(false);
+  };
+  return /* @__PURE__ */ jsxs7("div", { style: sectionStyle, children: [
+    showLabel !== false && /* @__PURE__ */ jsx8(SectionLabel, {}),
+    /* @__PURE__ */ jsx8(
+      JsonMonacoField,
+      {
+        buffer,
+        disabled,
+        modelUri: annotationsModelUri(modelKey),
+        onChange: setBuffer,
+        seed: buffer,
+        testId: "annotations-json-editor"
+      }
+    ),
+    result.error && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "annotations-error", style: errorStyle, children: result.error }),
+    docChanged && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "annotations-doc-changed", style: warnStyle, children: messages.inspector.annotationsDocChanged }),
+    !disabled && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: apply,
+          disabled: !applyEnabled,
+          style: applyEnabled ? primaryBtn : disabledBtn,
+          "data-testid": "inspector-annotations-apply",
+          children: messages.inspector.annotationsApply
+        }
+      ),
+      /* @__PURE__ */ jsx8("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtn, "data-testid": "inspector-annotations-revert", children: messages.inspector.annotationsRevert }),
+      /* @__PURE__ */ jsx8("button", { type: "button", onClick: onRemove, style: dangerBtn, "data-testid": "inspector-annotations-remove", children: messages.inspector.annotationsRemove })
+    ] })
+  ] });
+}
+function SectionLabel() {
+  const messages = useMessages();
+  return /* @__PURE__ */ jsx8("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" };
+var primaryBtn = { ...ghostBtn, background: colors.primary, color: "white", borderColor: colors.primary };
+var disabledBtn = { ...primaryBtn, opacity: 0.5, cursor: "not-allowed" };
+var dangerBtn = { ...ghostBtn, background: colors.dangerBg, borderColor: colors.dangerBorder, color: colors.danger };
+var errorStyle = { color: colors.danger, fontSize: 11 };
+var warnStyle = { color: colors.warning, fontSize: 11 };
+
+// src/inspector/WorkflowForm.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function WorkflowForm({
   workflow,
   disabled,
   onDispatch
 }) {
   const messages = useMessages();
-  return /* @__PURE__ */ jsxs6(FieldGroup, { title: messages.inspector.properties, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ jsx9(
       TextField,
       {
         label: messages.inspector.name,
@@ -3350,7 +3671,7 @@ function WorkflowForm({
         testId: "inspector-workflow-name"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       TextField,
       {
         label: messages.inspector.version,
@@ -3365,7 +3686,7 @@ function WorkflowForm({
         testId: "inspector-workflow-version"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       TextField,
       {
         label: messages.inspector.description,
@@ -3381,7 +3702,7 @@ function WorkflowForm({
         testId: "inspector-workflow-desc"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       CheckboxField,
       {
         label: messages.inspector.active,
@@ -3395,7 +3716,7 @@ function WorkflowForm({
         testId: "inspector-workflow-active"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       TextField,
       {
         label: messages.inspector.initialState,
@@ -3409,14 +3730,24 @@ function WorkflowForm({
         }),
         testId: "inspector-workflow-initial"
       }
+    ),
+    /* @__PURE__ */ jsx9(
+      AnnotationsField,
+      {
+        value: workflow.annotations,
+        disabled,
+        modelKey: `workflow-${workflow.name}`,
+        onCommit: (annotations) => onDispatch({ op: "setAnnotations", target: { kind: "workflow", workflow: workflow.name }, annotations }),
+        onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "workflow", workflow: workflow.name } })
+      }
     )
   ] });
 }
 
 // src/inspector/StateForm.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { NAME_REGEX } from "@cyoda/workflow-core";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function StateForm({
   workflow,
   stateCode,
@@ -3427,7 +3758,7 @@ function StateForm({
   onRequestDelete
 }) {
   const messages = useMessages();
-  const [renameError, setRenameError] = useState6(null);
+  const [renameError, setRenameError] = useState7(null);
   const outgoing = state.transitions.length;
   const incoming = Object.values(workflow.states).reduce(
     (n, s) => n + s.transitions.filter((t) => t.next === stateCode).length,
@@ -3450,8 +3781,8 @@ function StateForm({
     }
     onDispatch({ op: "renameState", workflow: workflow.name, from: stateCode, to: next });
   };
-  return /* @__PURE__ */ jsxs7(FieldGroup, { title: messages.inspector.properties, children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9(FieldGroup, { title: messages.inspector.properties, children: [
+    /* @__PURE__ */ jsx10(
       TextField,
       {
         label: messages.inspector.name,
@@ -3462,29 +3793,29 @@ function StateForm({
         testId: "inspector-state-name"
       }
     ),
-    renameError && /* @__PURE__ */ jsx8("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
-    (isInitial || isTerminal || isUnreachable) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-      isInitial && /* @__PURE__ */ jsx8(StateBadge, { color: "#15803d", bg: "#f0fdf4", label: "Initial" }),
-      isTerminal && /* @__PURE__ */ jsx8(StateBadge, { color: "#0369a1", bg: "#eff6ff", label: "Terminal" }),
-      isUnreachable && /* @__PURE__ */ jsx8(StateBadge, { color: colors.warning, bg: colors.warningBg, label: "Unreachable" })
+    renameError && /* @__PURE__ */ jsx10("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
+    (isInitial || isTerminal || isUnreachable) && /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      isInitial && /* @__PURE__ */ jsx10(StateBadge, { color: "#15803d", bg: "#f0fdf4", label: "Initial" }),
+      isTerminal && /* @__PURE__ */ jsx10(StateBadge, { color: "#0369a1", bg: "#eff6ff", label: "Terminal" }),
+      isUnreachable && /* @__PURE__ */ jsx10(StateBadge, { color: colors.warning, bg: colors.warningBg, label: "Unreachable" })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { style: { fontSize: 12, color: colors.textSecondary }, children: [
+    /* @__PURE__ */ jsxs9("div", { style: { fontSize: 12, color: colors.textSecondary }, children: [
       outgoing,
       " outgoing \xB7 ",
       incoming,
       " incoming"
     ] }),
-    !isInitial && !disabled && /* @__PURE__ */ jsx8(
+    !isInitial && !disabled && /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
         onClick: () => onDispatch({ op: "setInitialState", workflow: workflow.name, stateCode }),
-        style: ghostBtn,
+        style: ghostBtn2,
         "data-testid": "inspector-state-set-initial",
         children: "Set as Initial State"
       }
     ),
-    issues && issues.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ jsx8(
+    issues && issues.length > 0 && /* @__PURE__ */ jsx10("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ jsx10(
       "div",
       {
         role: "alert",
@@ -3500,21 +3831,31 @@ function StateForm({
       },
       `${issue.code}-${i}`
     )) }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
+      AnnotationsField,
+      {
+        value: state.annotations,
+        disabled,
+        modelKey: `state-${workflow.name}-${stateCode}`,
+        onCommit: (annotations) => onDispatch({ op: "setAnnotations", target: { kind: "state", workflow: workflow.name, stateCode }, annotations }),
+        onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "state", workflow: workflow.name, stateCode } })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
         onClick: onRequestDelete,
         disabled,
         "data-testid": "inspector-state-delete",
-        style: dangerBtn,
+        style: dangerBtn2,
         children: "Delete state\u2026"
       }
     )
   ] });
 }
 function StateBadge({ color, bg, label }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       style: {
@@ -3546,7 +3887,7 @@ function reachableStates(wf) {
   }
   return visited;
 }
-var ghostBtn = {
+var ghostBtn2 = {
   alignSelf: "flex-start",
   padding: "5px 10px",
   background: "white",
@@ -3555,7 +3896,7 @@ var ghostBtn = {
   fontSize: 13,
   cursor: "pointer"
 };
-var dangerBtn = {
+var dangerBtn2 = {
   alignSelf: "flex-start",
   padding: "6px 10px",
   background: colors.dangerBg,
@@ -3567,65 +3908,229 @@ var dangerBtn = {
 };
 
 // src/inspector/TransitionForm.tsx
-import { useRef as useRef7, useState as useState9 } from "react";
+import { useRef as useRef9, useState as useState10 } from "react";
 import { NAME_REGEX as NAME_REGEX3 } from "@cyoda/workflow-core";
 
-// src/inspector/CriterionForm.tsx
-import { useState as useState7 } from "react";
+// src/inspector/CriterionField.tsx
+import { useEffect as useEffect5, useRef as useRef7, useState as useState8 } from "react";
+import { registerCriterionSchema } from "@cyoda/workflow-monaco";
 
-// src/modals/DeleteStateModal.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef5 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function countAffected(doc, workflow, stateCode) {
-  let outgoing = 0;
-  let incoming = 0;
-  const wf = doc.session.workflows.find((w) => w.name === workflow);
-  if (!wf) return { outgoing, incoming };
-  for (const [code, state] of Object.entries(wf.states)) {
-    for (const t of state.transitions) {
-      if (code === stateCode) outgoing++;
-      if (t.next === stateCode && code !== stateCode) incoming++;
+// src/inspector/criterionJson.ts
+import { CriterionSchema, criterionBlockingError } from "@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 = CriterionSchema.safeParse(raw);
+  if (res.success) {
+    const blocking = 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 = criterionBlockingError(raw);
+    } catch {
+      friendly = null;
     }
   }
-  return { outgoing, incoming };
+  return { criterion: null, error: friendly ?? zodMessage(res.error) };
 }
-function DeleteStateModal({
-  document: doc,
-  workflow,
-  stateCode,
-  onConfirm,
-  onCancel
-}) {
+
+// src/inspector/CriterionField.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "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__ */ jsxs10("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
+      /* @__PURE__ */ jsx11("p", { style: summaryTextStyle, children: props.manual ? m.noneManual : m.noneAutomated }),
+      !props.manual && /* @__PURE__ */ jsx11("p", { style: warnStyle2, "data-testid": "criterion-automated-warning", children: m.noneAutomatedWarning }),
+      !props.disabled && /* @__PURE__ */ jsx11("button", { type: "button", style: primaryBtnStyle, "data-testid": "inspector-criterion-add", onClick: () => props.onCommit(defaultSimpleCriterion()), children: m.add })
+    ] });
+  }
+  return /* @__PURE__ */ jsx11(CriterionEditor, { ...props, value: props.value }, props.modelKey);
+}
+function CriterionEditor({ value, disabled, modelKey, onCommit, onRemove }) {
   const messages = useMessages();
-  const counts = useMemo3(
-    () => countAffected(doc, workflow, stateCode),
-    [doc, workflow, stateCode]
-  );
-  return /* @__PURE__ */ jsxs8(ModalFrame, { onCancel, children: [
-    /* @__PURE__ */ jsx9("h2", { style: { margin: 0, fontSize: 16 }, children: messages.confirmDelete.title }),
-    /* @__PURE__ */ jsx9("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: messages.confirmDelete.message }),
-    /* @__PURE__ */ jsxs8("div", { style: { padding: 8, background: colors.surfaceMuted, border: `1px solid ${colors.borderSubtle}`, borderRadius: radii.sm, fontSize: 13 }, children: [
-      /* @__PURE__ */ jsx9("strong", { children: stateCode }),
-      /* @__PURE__ */ jsxs8("div", { style: { color: colors.textSecondary }, children: [
-        messages.confirmDelete.transitionsAffected,
-        ": ",
-        counts.outgoing + counts.incoming
-      ] })
+  const m = messages.criterion;
+  const [expanded, setExpanded] = useState8(false);
+  const [buffer, setBuffer] = useState8(() => pretty2(value));
+  const [docChanged, setDocChanged] = useState8(false);
+  const prevValueRef = useRef7(value);
+  useEffect5(() => {
+    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__ */ jsxs10("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
+    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx11("span", { style: metaChipStyle, children: value.type }),
+      /* @__PURE__ */ jsx11("span", { style: { flex: 1 } }),
+      !disabled && !expanded && /* @__PURE__ */ jsx11("button", { type: "button", style: ghostBtnStyle, "data-testid": "inspector-criterion-edit", onClick: () => setExpanded(true), children: m.edit }),
+      !disabled && /* @__PURE__ */ jsx11("button", { type: "button", style: destructiveBtnStyle, "data-testid": "inspector-criterion-remove", onClick: onRemove, children: m.remove })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx9("button", { type: "button", onClick: onCancel, style: ghostBtn2, "data-testid": "modal-delete-cancel", children: messages.confirmDelete.cancel }),
-      /* @__PURE__ */ jsx9("button", { type: "button", onClick: onConfirm, style: dangerBtn2, "data-testid": "modal-delete-confirm", children: messages.confirmDelete.confirm })
+    !expanded && /* @__PURE__ */ jsx11(CompactJson, { criterion: value }),
+    expanded && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx11(
+        JsonMonacoField,
+        {
+          buffer,
+          disabled,
+          modelUri: criterionModelUri(modelKey),
+          onChange: setBuffer,
+          seed: buffer,
+          registerSchema: registerCriterionSchema,
+          testId: "criterion-json-editor"
+        }
+      ),
+      result.error && /* @__PURE__ */ jsx11("div", { role: "alert", "data-testid": "criterion-error", style: errorStyle2, children: result.error }),
+      docChanged && /* @__PURE__ */ jsx11("div", { role: "alert", "data-testid": "criterion-doc-changed", style: warnLineStyle, children: messages.inspector.annotationsDocChanged }),
+      !disabled && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx11("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__ */ jsx11("button", { type: "button", onClick: revert, disabled: !canRevert, style: ghostBtnStyle, "data-testid": "inspector-criterion-revert", children: m.revert }),
+        /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => setExpanded(false), style: ghostBtnStyle, "data-testid": "inspector-criterion-collapse", children: m.collapse })
+      ] })
     ] })
   ] });
 }
-function ModalFrame({
-  children,
-  onCancel,
-  labelledBy
-}) {
-  const frameRef = useRef5(null);
-  const previousFocusRef = useRef5(null);
-  useEffect3(() => {
+function CompactJson({ criterion }) {
+  const text = JSON.stringify(criterion);
+  const display = text.length > 140 ? `${text.slice(0, 137)}\u2026` : text;
+  return /* @__PURE__ */ jsx11("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
+import { jsx as jsx12 } from "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 CriterionSection({
+  host,
+  manual,
+  criterion,
+  disabled,
+  onDispatch,
+  onSelectionChange: _onSelectionChange
+}) {
+  const path = ["criterion"];
+  return /* @__PURE__ */ jsx12(
+    CriterionField,
+    {
+      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 })
+    }
+  );
+}
+
+// src/inspector/ProcessorForm.tsx
+import { useEffect as useEffect7, useState as useState9 } from "react";
+import {
+  NAME_REGEX as NAME_REGEX2
+} from "@cyoda/workflow-core";
+
+// src/modals/DeleteStateModal.tsx
+import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef8 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function countAffected(doc, workflow, stateCode) {
+  let outgoing = 0;
+  let incoming = 0;
+  const wf = doc.session.workflows.find((w) => w.name === workflow);
+  if (!wf) return { outgoing, incoming };
+  for (const [code, state] of Object.entries(wf.states)) {
+    for (const t of state.transitions) {
+      if (code === stateCode) outgoing++;
+      if (t.next === stateCode && code !== stateCode) incoming++;
+    }
+  }
+  return { outgoing, incoming };
+}
+function DeleteStateModal({
+  document: doc,
+  workflow,
+  stateCode,
+  onConfirm,
+  onCancel
+}) {
+  const messages = useMessages();
+  const counts = useMemo3(
+    () => countAffected(doc, workflow, stateCode),
+    [doc, workflow, stateCode]
+  );
+  return /* @__PURE__ */ jsxs11(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ jsx13("h2", { style: { margin: 0, fontSize: 16 }, children: messages.confirmDelete.title }),
+    /* @__PURE__ */ jsx13("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: messages.confirmDelete.message }),
+    /* @__PURE__ */ jsxs11("div", { style: { padding: 8, background: colors.surfaceMuted, border: `1px solid ${colors.borderSubtle}`, borderRadius: radii.sm, fontSize: 13 }, children: [
+      /* @__PURE__ */ jsx13("strong", { children: stateCode }),
+      /* @__PURE__ */ jsxs11("div", { style: { color: colors.textSecondary }, children: [
+        messages.confirmDelete.transitionsAffected,
+        ": ",
+        counts.outgoing + counts.incoming
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ jsx13("button", { type: "button", onClick: onCancel, style: ghostBtn3, "data-testid": "modal-delete-cancel", children: messages.confirmDelete.cancel }),
+      /* @__PURE__ */ jsx13("button", { type: "button", onClick: onConfirm, style: dangerBtn3, "data-testid": "modal-delete-confirm", children: messages.confirmDelete.confirm })
+    ] })
+  ] });
+}
+function ModalFrame({
+  children,
+  onCancel,
+  labelledBy
+}) {
+  const frameRef = useRef8(null);
+  const previousFocusRef = useRef8(null);
+  useEffect6(() => {
     previousFocusRef.current = document.activeElement ?? null;
     const node = frameRef.current;
     if (node) {
@@ -3638,7 +4143,7 @@ function ModalFrame({
       previousFocusRef.current?.focus?.();
     };
   }, []);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       onClick: onCancel,
@@ -3658,7 +4163,7 @@ function ModalFrame({
         zIndex: 1e3
       },
       "data-testid": "modal-backdrop",
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx13(
         "div",
         {
           ref: frameRef,
@@ -3684,7 +4189,7 @@ function ModalFrame({
     }
   );
 }
-var ghostBtn2 = {
+var ghostBtn3 = {
   padding: "6px 12px",
   background: "white",
   border: `1px solid ${colors.border}`,
@@ -3692,460 +4197,15 @@ var ghostBtn2 = {
   fontSize: 13,
   cursor: "pointer"
 };
-var dangerBtn2 = {
-  ...ghostBtn2,
-  background: colors.danger,
-  color: "white",
-  borderColor: colors.danger
-};
-
-// src/inspector/CriterionJsonEditor.tsx
-import { useEffect as useEffect4, useRef as useRef6 } from "react";
-import {
-  registerCriterionSchema
-} from "@cyoda/workflow-monaco";
-
-// src/inspector/CriterionMonacoContext.tsx
-import { createContext as createContext3, useContext as useContext4 } from "react";
-var CriterionMonacoContext = createContext3(null);
-var CriterionMonacoProvider = CriterionMonacoContext.Provider;
-function useCriterionMonaco() {
-  return useContext4(CriterionMonacoContext);
-}
-
-// src/components/monacoDisposal.ts
-var installed = false;
-function isMonacoCanceled(reason) {
-  if (reason == null || typeof reason !== "object") return false;
-  return reason.name === "Canceled";
-}
-function installMonacoCancellationFilter() {
-  if (installed || typeof window === "undefined") return;
-  installed = true;
-  window.addEventListener("unhandledrejection", (e) => {
-    if (isMonacoCanceled(e.reason)) e.preventDefault();
-  });
-}
-installMonacoCancellationFilter();
-
-// src/inspector/criterionJson.ts
-import { CriterionSchema, criterionBlockingError } from "@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 = CriterionSchema.safeParse(raw);
-  if (res.success) {
-    const blocking = 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 = criterionBlockingError(raw);
-    } catch {
-      friendly = null;
-    }
-  }
-  return { criterion: null, error: friendly ?? zodMessage(res.error) };
-}
-
-// src/inspector/CriterionJsonEditor.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function CriterionJsonEditor({ value, disabled, modelKey, onChange }) {
-  const monaco = useCriterionMonaco();
-  const onChangeRef = useRef6(onChange);
-  onChangeRef.current = onChange;
-  const initialText = useRef6(JSON.stringify(value, null, 2)).current;
-  if (monaco) {
-    return /* @__PURE__ */ jsx10(
-      MonacoCriterionEditor,
-      {
-        monaco,
-        initialText,
-        disabled,
-        modelKey,
-        onChangeRef
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx10(
-    TextareaCriterionEditor,
-    {
-      initialText,
-      disabled,
-      onChangeRef
-    }
-  );
-}
-function TextareaCriterionEditor({
-  initialText,
-  disabled,
-  onChangeRef
-}) {
-  useEffect4(() => {
-    onChangeRef.current(parseCriterionJson(initialText));
-  }, [initialText, onChangeRef]);
-  return /* @__PURE__ */ jsx10(
-    "textarea",
-    {
-      defaultValue: initialText,
-      disabled,
-      rows: 16,
-      "data-testid": "criterion-json-editor",
-      style: jsonTextAreaStyle,
-      onChange: (e) => onChangeRef.current(parseCriterionJson(e.target.value))
-    }
-  );
-}
-function MonacoCriterionEditor({
-  monaco,
-  initialText,
-  disabled,
-  modelKey,
-  onChangeRef
-}) {
-  const containerRef = useRef6(null);
-  const editorRef = useRef6(null);
-  useEffect4(() => {
-    if (!containerRef.current || editorRef.current) return;
-    const model = monaco.editor.createModel(
-      initialText,
-      "json",
-      monaco.Uri.parse(criterionModelUri(modelKey))
-    );
-    const editor = monaco.editor.create(containerRef.current, {
-      model,
-      automaticLayout: true,
-      minimap: { enabled: false },
-      fontSize: 13,
-      tabSize: 2,
-      scrollBeyondLastLine: false,
-      theme: "vs",
-      readOnly: disabled
-    });
-    editorRef.current = editor;
-    installMonacoCancellationFilter();
-    const schemaHandle = registerCriterionSchema(monaco);
-    const report = () => onChangeRef.current(parseCriterionJson(model.getValue()));
-    report();
-    const sub = model.onDidChangeContent(report);
-    return () => {
-      sub.dispose();
-      schemaHandle.dispose();
-      editor.dispose();
-      editorRef.current = null;
-      model.dispose();
-    };
-  }, [monaco, modelKey]);
-  useEffect4(() => {
-    editorRef.current?.updateOptions?.({ readOnly: disabled });
-  }, [disabled]);
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      ref: containerRef,
-      "data-testid": "criterion-json-editor",
-      style: { height: 320, border: `1px solid ${colors.border}`, borderRadius: radii.sm }
-    }
-  );
-}
-var jsonTextAreaStyle = {
-  fontFamily: fonts.mono,
-  fontSize: 12,
-  padding: 8,
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: colors.border,
-  borderRadius: radii.sm,
-  background: "white",
-  resize: "vertical"
-};
-
-// src/inspector/CriterionForm.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-function defaultCriterion(type) {
-  switch (type) {
-    case "simple":
-      return { type: "simple", jsonPath: "", operation: "EQUALS" };
-    case "group":
-      return { type: "group", operator: "AND", conditions: [] };
-    case "function":
-      return { type: "function", function: { name: "" } };
-    case "lifecycle":
-      return { type: "lifecycle", field: "state", operation: "EQUALS" };
-    case "array":
-      return { type: "array", jsonPath: "", operation: "EQUALS", value: [] };
-  }
-}
-function CriterionSection({
-  host,
-  stateCode,
-  transitionName,
-  targetState,
-  manual,
-  criterion,
-  disabled,
-  onDispatch,
-  onSelectionChange
-}) {
-  const messages = useMessages();
-  const [modalOpen, setModalOpen] = useState7(false);
-  const path = ["criterion"];
-  const removeCriterion = () => {
-    onDispatch({ op: "setCriterion", host, path, criterion: void 0 });
-    if (host.kind === "transition") {
-      onSelectionChange?.({ kind: "transition", transitionUuid: host.transitionUuid });
-    }
-  };
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsx11(
-      CriterionSummaryCard,
-      {
-        criterion,
-        disabled,
-        manual,
-        onAdd: () => setModalOpen(true),
-        onEdit: () => setModalOpen(true),
-        onRemove: removeCriterion
-      }
-    ),
-    modalOpen && /* @__PURE__ */ jsx11(
-      CriterionEditorModal,
-      {
-        title: criterion ? messages.criterion.editTitle : messages.criterion.addTitle,
-        context: `${stateCode ?? host.workflow} \u2192 ${transitionName ?? "transition"} \u2192 ${targetState ?? ""}`,
-        host,
-        path,
-        initialCriterion: criterion,
-        disabled,
-        onDispatch,
-        onCancel: () => setModalOpen(false),
-        onApplied: () => {
-          setModalOpen(false);
-          if (host.kind === "transition") {
-            const selection = {
-              kind: "transition",
-              transitionUuid: host.transitionUuid
-            };
-            onSelectionChange?.(selection);
-            window.setTimeout(() => onSelectionChange?.(selection), 100);
-          }
-        }
-      }
-    )
-  ] });
-}
-function CriterionSummaryCard({
-  criterion,
-  disabled,
-  manual,
-  onAdd,
-  onEdit,
-  onRemove
-}) {
-  const messages = useMessages();
-  const m = messages.criterion;
-  if (!criterion) {
-    return /* @__PURE__ */ jsxs9("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
-      /* @__PURE__ */ jsx11(SectionHeader, { label: m.heading, badge: "none" }),
-      /* @__PURE__ */ jsx11("p", { style: summaryTextStyle, children: manual ? m.noneManual : m.noneAutomated }),
-      !manual && /* @__PURE__ */ jsx11("p", { style: warningCardStyle, "data-testid": "criterion-automated-warning", children: m.noneAutomatedWarning }),
-      !disabled && /* @__PURE__ */ jsx11(
-        "button",
-        {
-          type: "button",
-          onClick: onAdd,
-          style: primaryBtn,
-          "data-testid": "inspector-criterion-add",
-          children: m.add
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs9("div", { style: cardStyle, "data-testid": "criterion-summary-card", children: [
-    /* @__PURE__ */ jsx11(SectionHeader, { label: m.heading, badge: criterion.type }),
-    /* @__PURE__ */ jsx11(CriterionCompactJson, { criterion }),
-    !disabled && /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
-      /* @__PURE__ */ jsx11(
-        "button",
-        {
-          type: "button",
-          onClick: onEdit,
-          style: ghostBtn3,
-          "data-testid": "inspector-criterion-edit",
-          children: m.edit
-        }
-      ),
-      /* @__PURE__ */ jsx11(
-        "button",
-        {
-          type: "button",
-          onClick: onRemove,
-          style: dangerBtn3,
-          "data-testid": "inspector-criterion-remove",
-          children: m.remove
-        }
-      )
-    ] })
-  ] });
-}
-function CriterionCompactJson({ criterion }) {
-  const text = JSON.stringify(criterion);
-  const display = text.length > 140 ? `${text.slice(0, 137)}\u2026` : text;
-  return /* @__PURE__ */ jsx11(
-    "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
-    }
-  );
-}
-function criterionModelKey(host) {
-  if (host.kind === "transition") return `transition-${host.transitionUuid}`;
-  if (host.kind === "processorConfig") return `processor-${host.processorUuid}`;
-  return `host-${host.workflow}`;
-}
-function CriterionEditorModal({
-  title,
-  context,
-  host,
-  path,
-  initialCriterion,
-  disabled,
-  onDispatch,
-  onCancel,
-  onApplied
-}) {
-  const messages = useMessages();
-  const seed = initialCriterion ?? defaultCriterion("simple");
-  const [result, setResult] = useState7(
-    () => parseCriterionJson(JSON.stringify(seed))
-  );
-  const modelKey = criterionModelKey(host);
-  const applyDisabled = disabled || result.criterion === null;
-  const apply = () => {
-    if (applyDisabled || !result.criterion) return;
-    onDispatch({ op: "setCriterion", host, path, criterion: result.criterion });
-    onApplied();
-  };
-  return /* @__PURE__ */ jsx11(ModalFrame, { onCancel, labelledBy: "criterion-modal-title", children: /* @__PURE__ */ jsxs9("div", { style: modalStyle, "data-testid": "criterion-editor-modal", children: [
-    /* @__PURE__ */ jsxs9("header", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ jsx11("h2", { id: "criterion-modal-title", style: { margin: 0, fontSize: 18 }, children: title }),
-      /* @__PURE__ */ jsx11("p", { style: { margin: 0, fontSize: 12, color: colors.textTertiary }, children: context })
-    ] }),
-    /* @__PURE__ */ jsx11("div", { style: modalBodyStyle, children: /* @__PURE__ */ jsx11(
-      CriterionJsonEditor,
-      {
-        value: seed,
-        disabled,
-        modelKey,
-        onChange: setResult
-      }
-    ) }),
-    result.error && /* @__PURE__ */ jsx11("div", { role: "alert", style: errorStyle, "data-testid": "criterion-modal-blocking-error", children: result.error }),
-    /* @__PURE__ */ jsxs9("footer", { style: modalFooterStyle, children: [
-      /* @__PURE__ */ jsx11("div", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsx11("button", { type: "button", onClick: onCancel, style: ghostBtn3, "data-testid": "criterion-modal-cancel", children: messages.criterion.cancel }),
-      /* @__PURE__ */ jsx11(
-        "button",
-        {
-          type: "button",
-          onClick: apply,
-          disabled: applyDisabled,
-          style: applyDisabled ? disabledPrimaryBtn : primaryBtn,
-          "data-testid": "criterion-modal-apply",
-          children: messages.criterion.applyModal
-        }
-      )
-    ] })
-  ] }) });
-}
-function SectionHeader({ label, badge }) {
-  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-    /* @__PURE__ */ jsx11("span", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: label }),
-    /* @__PURE__ */ jsx11("span", { style: { fontSize: 11, padding: "1px 6px", background: colors.surfaceMuted, borderRadius: radii.pill, color: colors.textTertiary }, children: badge })
-  ] });
-}
-var cardStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  padding: 10,
-  border: `1px solid ${colors.border}`,
-  borderRadius: radii.md,
-  background: "white"
-};
-var summaryTextStyle = { margin: 0, fontSize: 12, color: colors.textSecondary, lineHeight: 1.45 };
-var warningCardStyle = {
-  margin: 0,
-  padding: "6px 8px",
-  background: colors.warningBg,
-  border: `1px solid ${colors.warningBorder}`,
-  borderRadius: radii.sm,
-  color: colors.warning,
-  fontSize: 11
-};
-var modalStyle = {
-  width: "min(760px, calc(100vw - 48px))",
-  maxHeight: "min(760px, calc(100vh - 72px))",
-  display: "flex",
-  flexDirection: "column",
-  gap: 14
-};
-var modalBodyStyle = {
-  overflow: "auto",
-  padding: 12,
-  border: `1px solid ${colors.borderSubtle}`,
-  borderRadius: radii.md,
-  background: colors.surfaceMuted
-};
-var modalFooterStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  position: "sticky",
-  bottom: 0,
-  paddingTop: 10,
-  borderTop: `1px solid ${colors.borderSubtle}`,
-  background: "white"
+var dangerBtn3 = {
+  ...ghostBtn3,
+  background: colors.danger,
+  color: "white",
+  borderColor: colors.danger
 };
-var ghostBtn3 = { padding: "6px 10px", background: "white", border: `1px solid ${colors.border}`, borderRadius: radii.sm, fontSize: 12, cursor: "pointer" };
-var primaryBtn = { ...ghostBtn3, background: colors.primary, color: "white", borderColor: colors.primary };
-var disabledPrimaryBtn = { ...primaryBtn, opacity: 0.5, cursor: "not-allowed" };
-var dangerBtn3 = { ...ghostBtn3, background: colors.dangerBg, borderColor: colors.dangerBorder, color: colors.danger };
-var errorStyle = { color: colors.danger, fontSize: 11 };
 
 // src/inspector/ProcessorForm.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
-import {
-  NAME_REGEX as NAME_REGEX2
-} from "@cyoda/workflow-core";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var EXECUTION_MODES = [
   "ASYNC_NEW_TX",
   "ASYNC_SAME_TX",
@@ -4242,8 +4302,8 @@ function ProcessorEditorModal({
   onCancel,
   onApply
 }) {
-  const [draft, setDraft] = useState8(() => toDraft(initialProcessor));
-  useEffect5(() => {
+  const [draft, setDraft] = useState9(() => toDraft(initialProcessor));
+  useEffect7(() => {
     setDraft(toDraft(initialProcessor));
   }, [initialProcessor]);
   const error = validateDraft(draft, existingNames, initialProcessor?.name);
@@ -4251,13 +4311,13 @@ function ProcessorEditorModal({
     if (disabled || error) return;
     onApply(toProcessor(draft));
   };
-  return /* @__PURE__ */ jsx12(ModalFrame, { onCancel, labelledBy: "processor-modal-title", children: /* @__PURE__ */ jsxs10("div", { style: modalStyle2, "data-testid": "processor-editor-modal", children: [
-    /* @__PURE__ */ jsxs10("header", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ jsx12("h2", { id: "processor-modal-title", style: { margin: 0, fontSize: 18 }, children: title }),
-      /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 12, color: colors.textTertiary }, children: "Processor changes stay local until Apply." })
+  return /* @__PURE__ */ jsx14(ModalFrame, { onCancel, labelledBy: "processor-modal-title", children: /* @__PURE__ */ jsxs12("div", { style: modalStyle, "data-testid": "processor-editor-modal", children: [
+    /* @__PURE__ */ jsxs12("header", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx14("h2", { id: "processor-modal-title", style: { margin: 0, fontSize: 18 }, children: title }),
+      /* @__PURE__ */ jsx14("p", { style: { margin: 0, fontSize: 12, color: colors.textTertiary }, children: "Processor changes stay local until Apply." })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { style: modalBodyStyle2, children: [
-      /* @__PURE__ */ jsx12(FormField, { label: "Name", children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs12("div", { style: modalBodyStyle, children: [
+      /* @__PURE__ */ jsx14(FormField, { label: "Name", children: /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -4267,7 +4327,7 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Execution mode", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(FormField, { label: "Execution mode", children: /* @__PURE__ */ jsx14(
         CustomSelectInput,
         {
           value: draft.executionMode,
@@ -4276,8 +4336,8 @@ function ProcessorEditorModal({
           testId: "processor-execution-mode"
         }
       ) }),
-      /* @__PURE__ */ jsxs10("label", { style: checkboxRowStyle, children: [
-        /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsxs12("label", { style: checkboxRowStyle, children: [
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "checkbox",
@@ -4285,9 +4345,9 @@ function ProcessorEditorModal({
             onChange: (event) => setDraft((current) => ({ ...current, attachEntity: event.target.checked }))
           }
         ),
-        /* @__PURE__ */ jsx12("span", { children: "Attach entity" })
+        /* @__PURE__ */ jsx14("span", { children: "Attach entity" })
       ] }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Calculation node tags", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(FormField, { label: "Calculation node tags", children: /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -4300,7 +4360,7 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Response timeout ms", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(FormField, { label: "Response timeout ms", children: /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -4312,7 +4372,7 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Retry policy", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(FormField, { label: "Retry policy", children: /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -4321,8 +4381,8 @@ function ProcessorEditorModal({
           style: inputStyle2
         }
       ) }),
-      /* @__PURE__ */ jsxs10("label", { style: checkboxRowStyle, children: [
-        /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsxs12("label", { style: checkboxRowStyle, children: [
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "checkbox",
@@ -4335,9 +4395,9 @@ function ProcessorEditorModal({
             "data-testid": "processor-async-result"
           }
         ),
-        /* @__PURE__ */ jsx12("span", { children: "Async result" })
+        /* @__PURE__ */ jsx14("span", { children: "Async result" })
       ] }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Crossover to async ms", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(FormField, { label: "Crossover to async ms", children: /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -4352,16 +4412,16 @@ function ProcessorEditorModal({
         }
       ) })
     ] }),
-    error && /* @__PURE__ */ jsx12("div", { role: "alert", style: errorStyle2, "data-testid": "processor-modal-error", children: error }),
-    /* @__PURE__ */ jsxs10("footer", { style: modalFooterStyle2, children: [
-      /* @__PURE__ */ jsx12("button", { type: "button", onClick: onCancel, style: ghostBtn4, "data-testid": "processor-modal-cancel", children: "Cancel" }),
-      /* @__PURE__ */ jsx12(
+    error && /* @__PURE__ */ jsx14("div", { role: "alert", style: errorStyle3, "data-testid": "processor-modal-error", children: error }),
+    /* @__PURE__ */ jsxs12("footer", { style: modalFooterStyle, children: [
+      /* @__PURE__ */ jsx14("button", { type: "button", onClick: onCancel, style: ghostBtn4, "data-testid": "processor-modal-cancel", children: "Cancel" }),
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
           onClick: apply,
           disabled: disabled || !!error,
-          style: disabled || error ? disabledPrimaryBtn2 : primaryBtn2,
+          style: disabled || error ? disabledPrimaryBtn : primaryBtn2,
           "data-testid": "processor-modal-apply",
           children: "Apply processor"
         }
@@ -4373,8 +4433,8 @@ function FormField({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs10("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-    /* @__PURE__ */ jsx12("span", { style: labelStyle2, children: label }),
+  return /* @__PURE__ */ jsxs12("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx14("span", { style: labelStyle2, children: label }),
     children
   ] });
 }
@@ -4388,18 +4448,18 @@ function ProcessorForm({
   onDispatch
 }) {
   const messages = useMessages();
-  const [modalOpen, setModalOpen] = useState8(false);
-  return /* @__PURE__ */ jsxs10("div", { style: summaryCardStyle, children: [
-    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
-      /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ jsx12("strong", { style: { fontSize: 13 }, children: processor.name }),
-        /* @__PURE__ */ jsx12("span", { style: { fontSize: 12, color: colors.textSecondary }, children: summarizeProcessor(processor) })
+  const [modalOpen, setModalOpen] = useState9(false);
+  return /* @__PURE__ */ jsxs12("div", { style: summaryCardStyle, children: [
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ jsx14("strong", { style: { fontSize: 13 }, children: processor.name }),
+        /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: colors.textSecondary }, children: summarizeProcessor(processor) })
       ] }),
-      /* @__PURE__ */ jsx12("span", { style: chipStyle, children: processor.type })
+      /* @__PURE__ */ jsx14("span", { style: chipStyle, children: processor.type })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setModalOpen(true), style: ghostBtn4, children: "Edit" }),
-      /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setModalOpen(true), style: ghostBtn4, children: "Edit" }),
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -4414,7 +4474,7 @@ function ProcessorForm({
           children: messages.inspector.moveUp
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -4429,7 +4489,7 @@ function ProcessorForm({
           children: messages.inspector.moveDown
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -4441,7 +4501,7 @@ function ProcessorForm({
         }
       )
     ] }),
-    modalOpen && /* @__PURE__ */ jsx12(
+    modalOpen && /* @__PURE__ */ jsx14(
       ProcessorEditorModal,
       {
         title: `Edit ${processor.name}`,
@@ -4478,18 +4538,18 @@ var disabledInputStyle = {
   background: colors.surfaceMuted,
   color: colors.textTertiary
 };
-var modalStyle2 = {
+var modalStyle = {
   width: "min(760px, calc(100vw - 48px))",
   display: "flex",
   flexDirection: "column",
   gap: 16
 };
-var modalBodyStyle2 = {
+var modalBodyStyle = {
   display: "grid",
   gridTemplateColumns: "1fr 1fr",
   gap: 12
 };
-var modalFooterStyle2 = {
+var modalFooterStyle = {
   display: "flex",
   justifyContent: "flex-end",
   gap: 8
@@ -4503,7 +4563,7 @@ var checkboxRowStyle = {
   color: colors.textSecondary,
   cursor: "pointer"
 };
-var errorStyle2 = {
+var errorStyle3 = {
   padding: "8px 10px",
   border: `1px solid ${colors.dangerBorder}`,
   background: colors.dangerBg,
@@ -4525,7 +4585,7 @@ var primaryBtn2 = {
   color: "white",
   borderColor: colors.primary
 };
-var disabledPrimaryBtn2 = {
+var disabledPrimaryBtn = {
   ...primaryBtn2,
   opacity: 0.5,
   cursor: "not-allowed"
@@ -4555,7 +4615,7 @@ var summaryCardStyle = {
 };
 
 // src/inspector/TransitionForm.tsx
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function TransitionForm({
   workflow,
   stateCode,
@@ -4570,15 +4630,15 @@ function TransitionForm({
   onSelectionChange
 }) {
   const messages = useMessages();
-  const [renameError, setRenameError] = useState9(null);
-  const [processorModal, setProcessorModal] = useState9(null);
-  const [scheduleDelayDraft, setScheduleDelayDraft] = useState9(
+  const [renameError, setRenameError] = useState10(null);
+  const [processorModal, setProcessorModal] = useState10(null);
+  const [scheduleDelayDraft, setScheduleDelayDraft] = useState10(
     transition.schedule?.delayMs !== void 0 ? String(transition.schedule.delayMs) : ""
   );
-  const [scheduleTimeoutDraft, setScheduleTimeoutDraft] = useState9(
+  const [scheduleTimeoutDraft, setScheduleTimeoutDraft] = useState10(
     transition.schedule?.timeoutMs !== void 0 ? String(transition.schedule.timeoutMs) : ""
   );
-  const prevTransitionUuidRef = useRef7(transitionUuid);
+  const prevTransitionUuidRef = useRef9(transitionUuid);
   if (prevTransitionUuidRef.current !== transitionUuid) {
     prevTransitionUuidRef.current = transitionUuid;
     setScheduleDelayDraft(
@@ -4676,9 +4736,9 @@ function TransitionForm({
       index: index + 1
     });
   };
-  return /* @__PURE__ */ jsxs11("div", { style: transitionFormStyle, children: [
-    /* @__PURE__ */ jsxs11(FieldGroup, { title: messages.inspector.properties, children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { style: transitionFormStyle, children: [
+    /* @__PURE__ */ jsxs13(FieldGroup, { title: messages.inspector.properties, children: [
+      /* @__PURE__ */ jsx15(
         TextField,
         {
           label: messages.inspector.name,
@@ -4689,8 +4749,8 @@ function TransitionForm({
           testId: "inspector-transition-name"
         }
       ),
-      renameError && /* @__PURE__ */ jsx13("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
-      !disabled && /* @__PURE__ */ jsx13(
+      renameError && /* @__PURE__ */ jsx15("div", { role: "alert", style: { color: colors.danger, fontSize: 12 }, children: renameError }),
+      !disabled && /* @__PURE__ */ jsx15(
         SelectField,
         {
           label: "Source state",
@@ -4710,7 +4770,7 @@ function TransitionForm({
           testId: "inspector-transition-source-state"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         SelectField,
         {
           label: "Target state",
@@ -4721,7 +4781,7 @@ function TransitionForm({
           testId: "inspector-transition-next"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         SelectField,
         {
           label: messages.inspector.transitionType,
@@ -4735,7 +4795,7 @@ function TransitionForm({
           testId: "inspector-transition-manual"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         CheckboxField,
         {
           label: messages.inspector.disabled,
@@ -4745,7 +4805,7 @@ function TransitionForm({
           testId: "inspector-transition-disabled"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         AnchorSelect,
         {
           label: messages.inspector.sourceAnchor,
@@ -4756,7 +4816,7 @@ function TransitionForm({
           testId: "inspector-transition-source-anchor"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         AnchorSelect,
         {
           label: messages.inspector.targetAnchor,
@@ -4767,12 +4827,12 @@ function TransitionForm({
           testId: "inspector-transition-target-anchor"
         }
       ),
-      /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx13("button", { type: "button", disabled, onClick: () => reorder(-1), style: ghostBtn5, children: messages.inspector.moveUp }),
-          /* @__PURE__ */ jsx13("button", { type: "button", disabled, onClick: () => reorder(1), style: ghostBtn5, children: messages.inspector.moveDown })
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ jsx15("button", { type: "button", disabled, onClick: () => reorder(-1), style: ghostBtn5, children: messages.inspector.moveUp }),
+          /* @__PURE__ */ jsx15("button", { type: "button", disabled, onClick: () => reorder(1), style: ghostBtn5, children: messages.inspector.moveDown })
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(
           "p",
           {
             style: {
@@ -4786,8 +4846,8 @@ function TransitionForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -4798,8 +4858,8 @@ function TransitionForm({
           children: "Delete transition"
         }
       ),
-      /* @__PURE__ */ jsx13("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
-      issues && issues.length > 0 && /* @__PURE__ */ jsx13("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15("hr", { style: { border: "none", borderTop: `1px solid ${colors.borderSubtle}`, margin: 0 } }),
+      issues && issues.length > 0 && /* @__PURE__ */ jsx15("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: issues.map((issue, i) => /* @__PURE__ */ jsx15(
         "div",
         {
           role: "alert",
@@ -4816,12 +4876,12 @@ function TransitionForm({
         `${issue.code}-${i}`
       )) })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(
       TransitionSection,
       {
         title: messages.inspector.criteria,
         testId: "inspector-transition-criteria-section",
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx15(
           CriterionSection,
           {
             host,
@@ -4837,18 +4897,18 @@ function TransitionForm({
         )
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs13(
       TransitionSection,
       {
         title: "Scheduled transition",
         testId: "inspector-transition-schedule-section",
         children: [
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs13(
             "label",
             {
               style: { display: "flex", flexDirection: "row", alignItems: "center", gap: 8, fontSize: 12, color: colors.textSecondary, cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "checkbox",
@@ -4868,14 +4928,14 @@ function TransitionForm({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx13("span", { children: "Enable schedule" })
+                /* @__PURE__ */ jsx15("span", { children: "Enable schedule" })
               ]
             }
           ),
-          transition.schedule !== void 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
-            /* @__PURE__ */ jsxs11("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-              /* @__PURE__ */ jsx13("span", { style: { fontWeight: 500 }, children: "Delay (ms)" }),
-              /* @__PURE__ */ jsx13(
+          transition.schedule !== void 0 && /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsxs13("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+              /* @__PURE__ */ jsx15("span", { style: { fontWeight: 500 }, children: "Delay (ms)" }),
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "text",
@@ -4891,9 +4951,9 @@ function TransitionForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs11("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-              /* @__PURE__ */ jsx13("span", { style: { fontWeight: 500 }, children: "Timeout (ms)" }),
-              /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsxs13("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+              /* @__PURE__ */ jsx15("span", { style: { fontWeight: 500 }, children: "Timeout (ms)" }),
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "text",
@@ -4910,7 +4970,7 @@ function TransitionForm({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "p",
             {
               style: {
@@ -4930,28 +4990,28 @@ function TransitionForm({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs13(
       TransitionSection,
       {
         title: messages.inspector.processors,
         testId: "inspector-transition-processes-section",
         children: [
-          processorCount === 0 ? /* @__PURE__ */ jsx13("div", { style: emptyProcessorStateStyle, children: /* @__PURE__ */ jsx13("p", { style: summaryTextStyle2, children: "No processors run on this transition." }) }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
-            /* @__PURE__ */ jsx13("p", { style: processorHelperStyle, children: "Processors run sequentially in the order shown." }),
-            processors.map((processor, index) => /* @__PURE__ */ jsxs11("div", { style: processorRowStyle, children: [
-              /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-                /* @__PURE__ */ jsxs11("span", { style: processorOrderStyle, children: [
+          processorCount === 0 ? /* @__PURE__ */ jsx15("div", { style: emptyProcessorStateStyle, children: /* @__PURE__ */ jsx15("p", { style: summaryTextStyle2, children: "No processors run on this transition." }) }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsx15("p", { style: processorHelperStyle, children: "Processors run sequentially in the order shown." }),
+            processors.map((processor, index) => /* @__PURE__ */ jsxs13("div", { style: processorRowStyle, children: [
+              /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs13("span", { style: processorOrderStyle, children: [
                   index + 1,
                   "."
                 ] }),
-                /* @__PURE__ */ jsx13("span", { style: processorTypeChipStyle, children: processor.type }),
-                /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsx13("strong", { style: { fontSize: 13 }, children: processor.name }),
-                  /* @__PURE__ */ jsx13("span", { style: summaryTextStyle2, children: summarizeProcessor(processor) })
+                /* @__PURE__ */ jsx15("span", { style: processorTypeChipStyle, children: processor.type }),
+                /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx15("strong", { style: { fontSize: 13 }, children: processor.name }),
+                  /* @__PURE__ */ jsx15("span", { style: summaryTextStyle2, children: summarizeProcessor(processor) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -4966,7 +5026,7 @@ function TransitionForm({
                     children: "Edit"
                   }
                 ),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -4977,7 +5037,7 @@ function TransitionForm({
                     children: "Duplicate"
                   }
                 ),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -4993,7 +5053,7 @@ function TransitionForm({
                     children: "Move up"
                   }
                 ),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -5009,7 +5069,7 @@ function TransitionForm({
                     children: "Move down"
                   }
                 ),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -5023,7 +5083,7 @@ function TransitionForm({
               ] })
             ] }, processorUuids[index] ?? `${processor.name}-${index}`))
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5037,7 +5097,18 @@ function TransitionForm({
         ]
       }
     ),
-    processorModal && /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(TransitionSection, { title: "Annotations", testId: "inspector-transition-annotations-section", children: /* @__PURE__ */ jsx15(
+      AnnotationsField,
+      {
+        value: transition.annotations,
+        disabled,
+        showLabel: false,
+        modelKey: `transition-${transitionUuid}`,
+        onCommit: (annotations) => onDispatch({ op: "setAnnotations", target: { kind: "transition", transitionUuid }, annotations }),
+        onRemove: () => onDispatch({ op: "setAnnotations", target: { kind: "transition", transitionUuid } })
+      }
+    ) }),
+    processorModal && /* @__PURE__ */ jsx15(
       ProcessorEditorModal,
       {
         title: processorModal.mode === "add" ? "Add processor" : "Edit processor",
@@ -5057,8 +5128,8 @@ function TransitionSection({
   testId,
   children
 }) {
-  return /* @__PURE__ */ jsxs11("section", { style: transitionSectionStyle, "data-testid": testId, children: [
-    /* @__PURE__ */ jsx13("header", { style: sectionHeaderStyle, children: title }),
+  return /* @__PURE__ */ jsxs13("section", { style: transitionSectionStyle, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx15("header", { style: sectionHeaderStyle, children: title }),
     children
   ] });
 }
@@ -5165,9 +5236,9 @@ function AnchorSelect({
     { value: "left", label: messages.inspector.anchorLeft },
     { value: "left-bottom", label: messages.inspector.anchorLeftBottom }
   ];
-  return /* @__PURE__ */ jsxs11("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
-    /* @__PURE__ */ jsx13("span", { style: { fontWeight: 500 }, children: label }),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("label", { style: { display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: colors.textSecondary }, children: [
+    /* @__PURE__ */ jsx15("span", { style: { fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ jsx15(
       CustomSelectInput,
       {
         value: value ?? "",
@@ -5182,7 +5253,7 @@ function AnchorSelect({
 }
 
 // src/inspector/Inspector.tsx
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function issueKeyForSelection(selection) {
   if (!selection) return null;
   switch (selection.kind) {
@@ -5207,11 +5278,13 @@ function Inspector({
   onSelectionChange,
   onClose,
   onRequestDeleteState,
-  width = 384
+  docked,
+  onToggleDock,
+  onMinimize
 }) {
   const messages = useMessages();
   const { developerMode } = useEditorConfig();
-  const [tab, setTab] = useState10("properties");
+  const [tab, setTab] = useState11("properties");
   const effectiveTab = developerMode ? tab : "properties";
   const resolved = useMemo4(() => resolveSelection(doc, selection), [doc, selection]);
   const selectionIssueKey = issueKeyForSelection(selection);
@@ -5220,7 +5293,7 @@ function Inspector({
     return issues.filter((i) => i.targetId === selectionIssueKey);
   }, [issues, selectionIssueKey]);
   const breadcrumb = renderBreadcrumb(resolved);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "aside",
     {
       style: {
@@ -5229,16 +5302,17 @@ function Inspector({
         flexDirection: "column",
         background: colors.surfaceMuted,
         borderLeft: `1px solid ${colors.borderSubtle}`,
-        flex: `0 0 ${width}px`,
-        width,
-        minWidth: 360,
+        flex: "1 1 auto",
+        width: "100%",
+        minWidth: 0,
         fontFamily: fonts.sans
       },
       "data-testid": "inspector",
       children: [
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs14(
           "header",
           {
+            "data-inspector-drag-handle": true,
             style: {
               padding: "10px 12px",
               borderBottom: `1px solid ${colors.borderSubtle}`,
@@ -5249,8 +5323,59 @@ function Inspector({
               gap: 8
             },
             children: [
-              /* @__PURE__ */ jsx14("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: breadcrumb }),
-              onClose && /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx16("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: breadcrumb }),
+              onToggleDock && /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": docked ? messages.inspector.detachPanel : messages.inspector.dockPanel,
+                  title: docked ? messages.inspector.detachPanel : messages.inspector.dockPanel,
+                  "data-testid": "inspector-dock-toggle",
+                  onClick: onToggleDock,
+                  style: {
+                    width: 24,
+                    height: 24,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: radii.sm,
+                    background: "white",
+                    color: colors.textSecondary,
+                    cursor: "pointer",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 0,
+                    fontSize: 13
+                  },
+                  children: docked ? "\u2922" : "\u2921"
+                }
+              ),
+              onMinimize && /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": messages.inspector.minimize,
+                  title: messages.inspector.minimize,
+                  "data-testid": "inspector-minimize",
+                  onClick: onMinimize,
+                  style: {
+                    width: 24,
+                    height: 24,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: radii.sm,
+                    background: "white",
+                    color: colors.textSecondary,
+                    cursor: "pointer",
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    justifyContent: "center",
+                    padding: "0 0 5px",
+                    fontSize: 18,
+                    lineHeight: "10px"
+                  },
+                  children: "\u2013"
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -5278,8 +5403,8 @@ function Inspector({
             ]
           }
         ),
-        developerMode && /* @__PURE__ */ jsxs12("div", { style: { display: "flex", borderBottom: `1px solid ${colors.borderSubtle}` }, children: [
-          /* @__PURE__ */ jsx14(
+        developerMode && /* @__PURE__ */ jsxs14("div", { style: { display: "flex", borderBottom: `1px solid ${colors.borderSubtle}` }, children: [
+          /* @__PURE__ */ jsx16(
             TabButton,
             {
               active: effectiveTab === "properties",
@@ -5288,7 +5413,7 @@ function Inspector({
               children: messages.inspector.properties
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             TabButton,
             {
               active: effectiveTab === "json",
@@ -5298,11 +5423,11 @@ function Inspector({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs12("div", { style: { padding: 12, overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: 16 }, children: [
-          effectiveTab === "properties" && /* @__PURE__ */ jsxs12(Fragment6, { children: [
-            !resolved && /* @__PURE__ */ jsx14(EmptyState, { message: messages.inspector.empty }),
-            resolved?.kind === "workflow" && /* @__PURE__ */ jsx14(WorkflowForm, { workflow: resolved.workflow, disabled: readOnly, onDispatch }, resolved.workflow.name),
-            resolved?.kind === "state" && /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs14("div", { style: { padding: 12, overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: 16 }, children: [
+          effectiveTab === "properties" && /* @__PURE__ */ jsxs14(Fragment6, { children: [
+            !resolved && /* @__PURE__ */ jsx16(EmptyState, { message: messages.inspector.empty }),
+            resolved?.kind === "workflow" && /* @__PURE__ */ jsx16(WorkflowForm, { workflow: resolved.workflow, disabled: readOnly, onDispatch }, resolved.workflow.name),
+            resolved?.kind === "state" && /* @__PURE__ */ jsx16(
               StateForm,
               {
                 workflow: resolved.workflow,
@@ -5315,7 +5440,7 @@ function Inspector({
               },
               `${resolved.workflow.name}:${resolved.stateCode}`
             ),
-            resolved?.kind === "transition" && /* @__PURE__ */ jsx14(
+            resolved?.kind === "transition" && /* @__PURE__ */ jsx16(
               TransitionForm,
               {
                 workflow: resolved.workflow,
@@ -5332,7 +5457,7 @@ function Inspector({
               },
               resolved.transitionUuid
             ),
-            resolved?.kind === "processor" && /* @__PURE__ */ jsx14(
+            resolved?.kind === "processor" && /* @__PURE__ */ jsx16(
               ProcessorForm,
               {
                 processor: resolved.processor,
@@ -5346,8 +5471,8 @@ function Inspector({
               resolved.processorUuid
             )
           ] }),
-          developerMode && effectiveTab === "json" && /* @__PURE__ */ jsx14(JsonPreview, { document: doc, resolved }),
-          selectionIssues.length > 0 && /* @__PURE__ */ jsx14(IssuesList, { issues: selectionIssues, title: messages.inspector.issues })
+          developerMode && effectiveTab === "json" && /* @__PURE__ */ jsx16(JsonPreview, { document: doc, resolved }),
+          selectionIssues.length > 0 && /* @__PURE__ */ jsx16(IssuesList, { issues: selectionIssues, title: messages.inspector.issues })
         ] })
       ]
     }
@@ -5370,7 +5495,7 @@ function TabButton({
   children,
   testId
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -5391,17 +5516,17 @@ function TabButton({
   );
 }
 function EmptyState({ message }) {
-  return /* @__PURE__ */ jsx14("p", { style: { color: colors.textTertiary, fontSize: 13 }, children: message });
+  return /* @__PURE__ */ jsx16("p", { style: { color: colors.textTertiary, fontSize: 13 }, children: message });
 }
 function IssuesList({
   issues,
   title
 }) {
-  return /* @__PURE__ */ jsxs12("section", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-    /* @__PURE__ */ jsx14("header", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: colors.textSecondary }, children: title }),
+  return /* @__PURE__ */ jsxs14("section", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx16("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__ */ jsxs12(
+      return /* @__PURE__ */ jsxs14(
         "div",
         {
           style: {
@@ -5412,8 +5537,8 @@ function IssuesList({
             fontSize: 12
           },
           children: [
-            /* @__PURE__ */ jsx14("strong", { children: issue.code }),
-            /* @__PURE__ */ jsx14("div", { children: issue.message })
+            /* @__PURE__ */ jsx16("strong", { children: issue.code }),
+            /* @__PURE__ */ jsx16("div", { children: issue.message })
           ]
         },
         `${issue.code}-${i}`
@@ -5433,7 +5558,7 @@ function JsonPreview({
     if (resolved.kind === "processor") return JSON.stringify(resolved.processor, null, 2);
     return "";
   }, [doc, resolved]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     "pre",
     {
       style: {
@@ -5455,8 +5580,221 @@ function JsonPreview({
   );
 }
 
+// src/inspector/inspectorPlacement.ts
+var MIN_FLOAT_W = 340;
+var MIN_FLOAT_H = 260;
+function clampRect(rect, viewport) {
+  const width = Math.min(Math.max(rect.width, MIN_FLOAT_W), viewport.w);
+  const height = Math.min(Math.max(rect.height, MIN_FLOAT_H), viewport.h);
+  const left = Math.min(Math.max(rect.left, 0), Math.max(0, viewport.w - width));
+  const top = Math.min(Math.max(rect.top, 0), Math.max(0, viewport.h - height));
+  return { left, top, width, height };
+}
+function placementStorageKey(base) {
+  return `${base}:inspector`;
+}
+function loadPlacement(base) {
+  if (base === null) return null;
+  try {
+    const raw = localStorage.getItem(placementStorageKey(base));
+    if (!raw) return null;
+    const p = JSON.parse(raw);
+    if (p && (p.mode === "docked" || p.mode === "floating" || p.mode === "minimized") && p.rect && typeof p.rect.left === "number" && typeof p.rect.top === "number" && typeof p.rect.width === "number" && typeof p.rect.height === "number") {
+      return p;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function savePlacement(base, p) {
+  if (base === null) return;
+  try {
+    localStorage.setItem(placementStorageKey(base), JSON.stringify(p));
+  } catch {
+  }
+}
+
+// src/inspector/InspectorFrame.tsx
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var FLOATING_Z = 40;
+var MIN_BAR_Z = 50;
+function InspectorFrame({
+  mode,
+  rect,
+  dockedWidth,
+  onRectChange,
+  onDockedWidthChange,
+  onRestore,
+  onClose,
+  children
+}) {
+  const messages = useMessages();
+  const startWidthDrag = (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startW = dockedWidth;
+    const onMove = (ev) => onDockedWidthChange(Math.max(360, startW + (startX - ev.clientX)));
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  const viewport = () => ({ w: window.innerWidth, h: window.innerHeight });
+  const startMove = (e) => {
+    const target = e.target;
+    if (target.closest("button")) return;
+    if (!target.closest("[data-inspector-drag-handle]")) return;
+    e.preventDefault();
+    const dx = e.clientX - rect.left;
+    const dy = e.clientY - rect.top;
+    const onMove = (ev) => onRectChange(clampRect({ ...rect, left: ev.clientX - dx, top: ev.clientY - dy }, viewport()));
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  const startResize = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const sx = e.clientX, sy = e.clientY, sw = rect.width, sh = rect.height;
+    const onMove = (ev) => onRectChange(clampRect({ ...rect, width: Math.max(MIN_FLOAT_W, sw + (ev.clientX - sx)), height: Math.max(MIN_FLOAT_H, sh + (ev.clientY - sy)) }, viewport()));
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  const floating = mode === "floating";
+  const minimized = mode === "minimized";
+  const style = floating || minimized ? {
+    position: "fixed",
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    zIndex: FLOATING_Z,
+    boxShadow: "0 24px 50px -12px rgba(15,23,42,0.45)",
+    borderRadius: 12,
+    overflow: "hidden",
+    display: minimized ? "none" : "flex"
+  } : { position: "relative", flex: `0 0 ${dockedWidth}px`, width: dockedWidth, height: "100%", display: "flex" };
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    mode === "docked" && /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "data-testid": "inspector-resize-handle",
+        onMouseDown: startWidthDrag,
+        style: { width: 3, flexShrink: 0, cursor: "col-resize", background: "transparent", borderLeft: `1px solid ${colors.borderSubtle}`, zIndex: 10 },
+        onMouseEnter: (e) => e.currentTarget.style.background = colors.border,
+        onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+      }
+    ),
+    /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        "data-testid": "inspector-frame",
+        onMouseDownCapture: floating ? startMove : void 0,
+        style,
+        children: [
+          children,
+          floating && /* @__PURE__ */ jsx17(
+            "div",
+            {
+              "data-testid": "inspector-resize-grip",
+              onMouseDown: startResize,
+              style: { position: "absolute", right: 2, bottom: 2, width: 16, height: 16, cursor: "nwse-resize", zIndex: 5 }
+            }
+          )
+        ]
+      }
+    ),
+    minimized && /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        "data-testid": "inspector-min-bar",
+        onClick: onRestore,
+        title: messages.inspector.restore,
+        style: minBarStyle,
+        children: [
+          /* @__PURE__ */ jsx17("span", { style: { width: 8, height: 8, borderRadius: "50%", background: colors.primary, flex: "0 0 auto" } }),
+          /* @__PURE__ */ jsx17("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 12, color: colors.textSecondary }, children: messages.inspector.minimizedTitle }),
+          /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              "data-testid": "inspector-restore",
+              "aria-label": messages.inspector.restore,
+              title: messages.inspector.restore,
+              onClick: (e) => {
+                e.stopPropagation();
+                onRestore();
+              },
+              style: barBtnStyle,
+              children: "\u2922"
+            }
+          ),
+          onClose && /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              "data-testid": "inspector-min-close",
+              "aria-label": "Close inspector",
+              title: "Close inspector",
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose();
+              },
+              style: { ...barBtnStyle, fontSize: 16 },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var minBarStyle = {
+  position: "fixed",
+  right: 16,
+  bottom: 16,
+  zIndex: MIN_BAR_Z,
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: 260,
+  height: 40,
+  padding: "0 6px 0 12px",
+  borderRadius: 10,
+  background: "white",
+  border: `1px solid ${colors.border}`,
+  boxShadow: "0 12px 28px -10px rgba(15,23,42,0.4)",
+  cursor: "pointer",
+  userSelect: "none"
+};
+var barBtnStyle = {
+  width: 24,
+  height: 24,
+  flex: "0 0 auto",
+  border: `1px solid ${colors.border}`,
+  borderRadius: radii.sm,
+  background: "white",
+  color: colors.textSecondary,
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  fontSize: 13
+};
+
 // src/toolbar/Toolbar.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function Toolbar({
   derived,
   readOnly,
@@ -5470,7 +5808,7 @@ function Toolbar({
   toolbarEnd
 }) {
   const messages = useMessages();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     "footer",
     {
       style: {
@@ -5485,11 +5823,11 @@ function Toolbar({
       },
       "data-testid": "toolbar",
       children: [
-        toolbarStart && /* @__PURE__ */ jsx15("div", { style: slotStyle, "data-testid": "toolbar-start", children: toolbarStart }),
-        toolbarCenter && /* @__PURE__ */ jsx15("div", { style: { ...slotStyle, flex: 1, justifyContent: "center" }, "data-testid": "toolbar-center", children: toolbarCenter }),
-        !toolbarCenter && /* @__PURE__ */ jsx15("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ jsxs13("span", { role: "status", "aria-live": "polite", style: { display: "inline-flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx15(
+        toolbarStart && /* @__PURE__ */ jsx18("div", { style: slotStyle, "data-testid": "toolbar-start", children: toolbarStart }),
+        toolbarCenter && /* @__PURE__ */ jsx18("div", { style: { ...slotStyle, flex: 1, justifyContent: "center" }, "data-testid": "toolbar-center", children: toolbarCenter }),
+        !toolbarCenter && /* @__PURE__ */ jsx18("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsxs16("span", { role: "status", "aria-live": "polite", style: { display: "inline-flex", gap: 6 }, children: [
+          /* @__PURE__ */ jsx18(
             ValidationPill,
             {
               severity: "error",
@@ -5501,7 +5839,7 @@ function Toolbar({
               testId: "toolbar-errors"
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx18(
             ValidationPill,
             {
               severity: "warning",
@@ -5513,7 +5851,7 @@ function Toolbar({
               testId: "toolbar-warnings"
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx18(
             ValidationPill,
             {
               severity: "info",
@@ -5526,7 +5864,7 @@ function Toolbar({
             }
           )
         ] }),
-        onSave && showSaveButton && /* @__PURE__ */ jsx15(
+        onSave && showSaveButton && /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -5537,7 +5875,7 @@ function Toolbar({
             children: messages.toolbar.save
           }
         ),
-        toolbarEnd && /* @__PURE__ */ jsx15("div", { style: slotStyle, "data-testid": "toolbar-end", children: toolbarEnd })
+        toolbarEnd && /* @__PURE__ */ jsx18("div", { style: slotStyle, "data-testid": "toolbar-end", children: toolbarEnd })
       ]
     }
   );
@@ -5559,7 +5897,7 @@ function ValidationPill({
   const tone = severityTone(severity);
   const interactive = count > 0 && !!onClick;
   const hasIssues = count > 0;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     "button",
     {
       type: "button",
@@ -5586,7 +5924,7 @@ function ValidationPill({
         height: 20
       },
       children: [
-        /* @__PURE__ */ jsx15("span", { style: { fontSize: severity === "info" ? 14 : 10, lineHeight: 1 }, children: SEVERITY_ICON[severity] }),
+        /* @__PURE__ */ jsx18("span", { style: { fontSize: severity === "info" ? 14 : 10, lineHeight: 1 }, children: SEVERITY_ICON[severity] }),
         count
       ]
     }
@@ -5610,8 +5948,8 @@ var slotStyle = {
 };
 
 // src/toolbar/IssuesDrawer.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef8 } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useMemo as useMemo5, useRef as useRef10 } from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function resolveTarget(doc, targetId) {
   if (!targetId) return null;
   const ids = doc.meta.ids;
@@ -5664,8 +6002,8 @@ function IssuesDrawer({
   onJumpTo
 }) {
   const messages = useMessages();
-  const ref = useRef8(null);
-  useEffect6(() => {
+  const ref = useRef10(null);
+  useEffect8(() => {
     if (!open) return;
     function onKey(e) {
       if (e.key === "Escape") {
@@ -5700,7 +6038,7 @@ function IssuesDrawer({
   }, [severity, messages]);
   const tone = severityTone(severity);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref,
@@ -5724,7 +6062,7 @@ function IssuesDrawer({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs17(
           "header",
           {
             style: {
@@ -5735,7 +6073,7 @@ function IssuesDrawer({
               gap: 8
             },
             children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx19(
                 "span",
                 {
                   style: {
@@ -5748,12 +6086,12 @@ function IssuesDrawer({
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxs14("strong", { style: { flex: 1, fontSize: 13, color: colors.textPrimary }, children: [
+              /* @__PURE__ */ jsxs17("strong", { style: { flex: 1, fontSize: 13, color: colors.textPrimary }, children: [
                 title,
                 " \xB7 ",
                 filtered.length
               ] }),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx19(
                 "button",
                 {
                   type: "button",
@@ -5776,14 +6114,14 @@ function IssuesDrawer({
             ]
           }
         ),
-        filtered.length === 0 ? /* @__PURE__ */ jsx16(
+        filtered.length === 0 ? /* @__PURE__ */ jsx19(
           "p",
           {
             style: { padding: 12, color: colors.textTertiary, fontSize: 12, margin: 0 },
             "data-testid": "issues-drawer-empty",
             children: messages.issues.none
           }
-        ) : /* @__PURE__ */ jsx16(
+        ) : /* @__PURE__ */ jsx19(
           "ul",
           {
             style: {
@@ -5797,7 +6135,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__ */ jsxs14(
+              return /* @__PURE__ */ jsxs17(
                 "li",
                 {
                   style: {
@@ -5811,10 +6149,10 @@ function IssuesDrawer({
                   },
                   "data-testid": `issues-drawer-item-${idx}`,
                   children: [
-                    /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, fontWeight: 700, color: tone.fg }, children: issue.code }),
-                    /* @__PURE__ */ jsx16("div", { style: { fontSize: 12, color: colors.textPrimary }, children: issue.message }),
-                    targetLabel && /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, color: colors.textSecondary }, children: targetLabel }),
-                    target && /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx19("div", { style: { fontSize: 11, fontWeight: 700, color: tone.fg }, children: issue.code }),
+                    /* @__PURE__ */ jsx19("div", { style: { fontSize: 12, color: colors.textPrimary }, children: issue.message }),
+                    targetLabel && /* @__PURE__ */ jsx19("div", { style: { fontSize: 11, color: colors.textSecondary }, children: targetLabel }),
+                    target && /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(
                       "button",
                       {
                         type: "button",
@@ -5849,23 +6187,23 @@ function IssuesDrawer({
 }
 
 // src/toolbar/WorkflowTabs.tsx
-import { useEffect as useEffect8, useRef as useRef10, useState as useState12 } from "react";
+import { useEffect as useEffect10, useRef as useRef12, useState as useState13 } from "react";
 
 // src/toolbar/VersionBadge.tsx
-import { useEffect as useEffect7, useRef as useRef9, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef11, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function VersionBadge({
   version,
   supportedVersions,
   readOnly = false,
   onVersionChange
 }) {
-  const [open, setOpen] = useState11(false);
-  const [dropdownPos, setDropdownPos] = useState11(null);
-  const buttonRef = useRef9(null);
-  const dropdownRef = useRef9(null);
-  useEffect7(() => {
+  const [open, setOpen] = useState12(false);
+  const [dropdownPos, setDropdownPos] = useState12(null);
+  const buttonRef = useRef11(null);
+  const dropdownRef = useRef11(null);
+  useEffect9(() => {
     if (!open) return;
     const handler = (e) => {
       const target = e.target;
@@ -5887,7 +6225,7 @@ function VersionBadge({
     setOpen((o) => !o);
   };
   if (readOnly) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         "data-testid": "version-badge",
@@ -5906,7 +6244,7 @@ function VersionBadge({
     );
   }
   const dropdown = open && dropdownPos ? createPortal2(
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: dropdownRef,
@@ -5925,7 +6263,7 @@ function VersionBadge({
           zIndex: 9999
         },
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             "div",
             {
               style: {
@@ -5942,7 +6280,7 @@ function VersionBadge({
           ),
           [...supportedVersions].reverse().map((v) => {
             const isCurrent = v === version.replace(/^v/, "");
-            return /* @__PURE__ */ jsxs15(
+            return /* @__PURE__ */ jsxs18(
               "button",
               {
                 type: "button",
@@ -5965,16 +6303,16 @@ function VersionBadge({
                   textAlign: "left"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs15("span", { children: [
+                  /* @__PURE__ */ jsxs18("span", { children: [
                     v,
                     " ",
-                    /* @__PURE__ */ jsxs15("span", { style: { fontSize: 11, color: isCurrent ? "#93C5FD" : "#94A3B8" }, children: [
+                    /* @__PURE__ */ jsxs18("span", { style: { fontSize: 11, color: isCurrent ? "#93C5FD" : "#94A3B8" }, children: [
                       "cyoda-go ",
                       v,
                       ".x"
                     ] })
                   ] }),
-                  isCurrent && /* @__PURE__ */ jsx17(
+                  isCurrent && /* @__PURE__ */ jsx20(
                     "span",
                     {
                       style: {
@@ -5998,8 +6336,8 @@ function VersionBadge({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    /* @__PURE__ */ jsxs18(
       "button",
       {
         ref: buttonRef,
@@ -6022,7 +6360,7 @@ function VersionBadge({
         },
         children: [
           version,
-          /* @__PURE__ */ jsx17("span", { style: { fontSize: 10, opacity: 0.7 }, children: open ? "\u25B4" : "\u25BE" })
+          /* @__PURE__ */ jsx20("span", { style: { fontSize: 10, opacity: 0.7 }, children: open ? "\u25B4" : "\u25BE" })
         ]
       }
     ),
@@ -6031,7 +6369,7 @@ function VersionBadge({
 }
 
 // src/toolbar/WorkflowTabs.tsx
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function WorkflowTabs({
   workflows,
   activeWorkflow,
@@ -6045,10 +6383,10 @@ function WorkflowTabs({
   onVersionChange
 }) {
   const messages = useMessages();
-  const [editingTab, setEditingTab] = useState12(null);
-  const [draftName, setDraftName] = useState12("");
-  const inputRef = useRef10(null);
-  useEffect8(() => {
+  const [editingTab, setEditingTab] = useState13(null);
+  const [draftName, setDraftName] = useState13("");
+  const inputRef = useRef12(null);
+  useEffect10(() => {
     if (editingTab !== null) inputRef.current?.select();
   }, [editingTab]);
   const startEditing = (name) => {
@@ -6068,7 +6406,7 @@ function WorkflowTabs({
     setEditingTab(null);
   };
   const cancelEdit = () => setEditingTab(null);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs19(
     "nav",
     {
       style: {
@@ -6086,7 +6424,7 @@ function WorkflowTabs({
         workflows.map((w) => {
           const active = w.name === activeWorkflow;
           const isEditing = editingTab === w.name;
-          return /* @__PURE__ */ jsxs16(
+          return /* @__PURE__ */ jsxs19(
             "div",
             {
               style: {
@@ -6097,7 +6435,7 @@ function WorkflowTabs({
                 background: active ? "white" : "transparent"
               },
               children: [
-                isEditing ? /* @__PURE__ */ jsx18(
+                isEditing ? /* @__PURE__ */ jsx21(
                   "input",
                   {
                     ref: inputRef,
@@ -6128,7 +6466,7 @@ function WorkflowTabs({
                       width: Math.max(60, draftName.length * 8)
                     }
                   }
-                ) : /* @__PURE__ */ jsx18(
+                ) : /* @__PURE__ */ jsx21(
                   "button",
                   {
                     type: "button",
@@ -6147,7 +6485,7 @@ function WorkflowTabs({
                     children: w.name || messages.tabs.untitled
                   }
                 ),
-                onClose && !readOnly && workflows.length > 1 && !isEditing && /* @__PURE__ */ jsx18(
+                onClose && !readOnly && workflows.length > 1 && !isEditing && /* @__PURE__ */ jsx21(
                   "button",
                   {
                     type: "button",
@@ -6170,7 +6508,7 @@ function WorkflowTabs({
             w.name
           );
         }),
-        onAdd && !readOnly && /* @__PURE__ */ jsxs16(
+        onAdd && !readOnly && /* @__PURE__ */ jsxs19(
           "button",
           {
             type: "button",
@@ -6195,9 +6533,9 @@ function WorkflowTabs({
             ]
           }
         ),
-        dialectVersion && /* @__PURE__ */ jsxs16(Fragment8, { children: [
-          /* @__PURE__ */ jsx18("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ jsx18(
+        dialectVersion && /* @__PURE__ */ jsxs19(Fragment9, { children: [
+          /* @__PURE__ */ jsx21("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx21(
             VersionBadge,
             {
               version: dialectVersion,
@@ -6213,9 +6551,9 @@ function WorkflowTabs({
 }
 
 // src/modals/DragConnectModal.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { NAME_REGEX as NAME_REGEX4 } from "@cyoda/workflow-core";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function generateDefault(toState, existing) {
   const base = `to_${toState}`;
   if (!existing.has(base)) return base;
@@ -6232,20 +6570,20 @@ function DragConnectModal({
 }) {
   const messages = useMessages();
   const existing = new Set(source.transitions.map((t) => t.name));
-  const [name, setName] = useState13(() => generateDefault(toState, existing));
+  const [name, setName] = useState14(() => generateDefault(toState, existing));
   const invalidFormat = !!name && !NAME_REGEX4.test(name);
   const duplicate = existing.has(name);
   const blocked = name.length === 0 || invalidFormat || duplicate;
-  return /* @__PURE__ */ jsxs17(ModalFrame, { onCancel, children: [
-    /* @__PURE__ */ jsx19("h2", { style: { margin: 0, fontSize: 16 }, children: messages.dragConnect.title }),
-    /* @__PURE__ */ jsxs17("p", { style: { margin: "6px 0 14px", fontSize: 12, color: colors.textSecondary }, children: [
+  return /* @__PURE__ */ jsxs20(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ jsx22("h2", { style: { margin: 0, fontSize: 16 }, children: messages.dragConnect.title }),
+    /* @__PURE__ */ jsxs20("p", { style: { margin: "6px 0 14px", fontSize: 12, color: colors.textSecondary }, children: [
       fromState,
       " \u2192 ",
       toState
     ] }),
-    /* @__PURE__ */ jsxs17("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ jsx19("span", { style: { fontSize: 12, color: colors.textSecondary }, children: messages.dragConnect.transitionName }),
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs20("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx22("span", { style: { fontSize: 12, color: colors.textSecondary }, children: messages.dragConnect.transitionName }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           type: "text",
@@ -6265,11 +6603,11 @@ function DragConnectModal({
         }
       )
     ] }),
-    invalidFormat && /* @__PURE__ */ jsx19("div", { style: errorMsg, "data-testid": "dragconnect-error-format", children: messages.dragConnect.invalidName }),
-    duplicate && /* @__PURE__ */ jsx19("div", { style: errorMsg, "data-testid": "dragconnect-error-duplicate", children: messages.dragConnect.duplicateName }),
-    /* @__PURE__ */ jsxs17("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx19("button", { type: "button", onClick: onCancel, style: ghostBtn6, "data-testid": "dragconnect-cancel", children: messages.dragConnect.cancel }),
-      /* @__PURE__ */ jsx19(
+    invalidFormat && /* @__PURE__ */ jsx22("div", { style: errorMsg, "data-testid": "dragconnect-error-format", children: messages.dragConnect.invalidName }),
+    duplicate && /* @__PURE__ */ jsx22("div", { style: errorMsg, "data-testid": "dragconnect-error-duplicate", children: messages.dragConnect.duplicateName }),
+    /* @__PURE__ */ jsxs20("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ jsx22("button", { type: "button", onClick: onCancel, style: ghostBtn6, "data-testid": "dragconnect-cancel", children: messages.dragConnect.cancel }),
+      /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -6304,19 +6642,19 @@ var primaryBtn3 = {
 };
 
 // src/modals/AddStateModal.tsx
-import { useEffect as useEffect9, useRef as useRef11, useState as useState14 } from "react";
+import { useEffect as useEffect11, useRef as useRef13, useState as useState15 } from "react";
 import { NAME_REGEX as NAME_REGEX5 } from "@cyoda/workflow-core";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function generateName(existing) {
   let n = 1;
   while (existing.includes(`state${n}`)) n++;
   return `state${n}`;
 }
 function AddStateModal({ existingNames, onCreate, onCancel }) {
-  const [name, setName] = useState14(() => generateName(existingNames));
-  const [error, setError] = useState14(null);
-  const inputRef = useRef11(null);
-  useEffect9(() => {
+  const [name, setName] = useState15(() => generateName(existingNames));
+  const [error, setError] = useState15(null);
+  const inputRef = useRef13(null);
+  useEffect11(() => {
     inputRef.current?.select();
   }, []);
   const validate = (v) => {
@@ -6334,11 +6672,11 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
     }
     onCreate(name.trim());
   };
-  return /* @__PURE__ */ jsxs18(ModalFrame, { onCancel, labelledBy: "add-state-title", children: [
-    /* @__PURE__ */ jsx20("h2", { id: "add-state-title", style: { margin: 0, fontSize: 16 }, children: "Add State" }),
-    /* @__PURE__ */ jsxs18("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }, children: [
-      /* @__PURE__ */ jsx20("label", { htmlFor: "add-state-name-input", style: { fontSize: 12, color: colors.textSecondary }, children: "State name" }),
-      /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs21(ModalFrame, { onCancel, labelledBy: "add-state-title", children: [
+    /* @__PURE__ */ jsx23("h2", { id: "add-state-title", style: { margin: 0, fontSize: 16 }, children: "Add State" }),
+    /* @__PURE__ */ jsxs21("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }, children: [
+      /* @__PURE__ */ jsx23("label", { htmlFor: "add-state-name-input", style: { fontSize: 12, color: colors.textSecondary }, children: "State name" }),
+      /* @__PURE__ */ jsx23(
         "input",
         {
           ref: inputRef,
@@ -6364,7 +6702,7 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
           }
         }
       ),
-      error && /* @__PURE__ */ jsx20(
+      error && /* @__PURE__ */ jsx23(
         "div",
         {
           id: "add-state-error",
@@ -6374,8 +6712,8 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs18("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }, children: [
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsxs21("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }, children: [
+      /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -6385,7 +6723,7 @@ function AddStateModal({ existingNames, onCreate, onCancel }) {
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -6415,15 +6753,15 @@ var primaryBtn4 = {
 
 // src/modals/HelpModal.tsx
 import { workflowPalette as workflowPalette5 } from "@cyoda/workflow-viewer/theme";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function HelpModal({ onCancel }) {
   const messages = useMessages();
   const h = messages.help;
   const node = workflowPalette5.node;
   const edge = workflowPalette5.edge;
-  return /* @__PURE__ */ jsx21(ModalFrame, { onCancel, labelledBy: "workflow-help-title", children: /* @__PURE__ */ jsxs19("div", { style: { width: 480, maxWidth: "85vw" }, children: [
-    /* @__PURE__ */ jsx21("h2", { id: "workflow-help-title", style: { margin: 0, fontSize: 16 }, children: h.title }),
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx24(ModalFrame, { onCancel, labelledBy: "workflow-help-title", children: /* @__PURE__ */ jsxs22("div", { style: { width: 480, maxWidth: "85vw" }, children: [
+    /* @__PURE__ */ jsx24("h2", { id: "workflow-help-title", style: { margin: 0, fontSize: 16 }, children: h.title }),
+    /* @__PURE__ */ jsxs22(
       "div",
       {
         style: {
@@ -6436,48 +6774,48 @@ function HelpModal({ onCancel }) {
           gap: 16
         },
         children: [
-          /* @__PURE__ */ jsxs19(Section, { title: h.statesTitle, children: [
-            /* @__PURE__ */ jsx21(ColorRow, { fill: node.initial.fill, border: node.initial.border, label: h.stateInitial }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: node.default.fill, border: node.default.border, label: h.stateDefault }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: node.processing.fill, border: node.processing.border, label: h.stateProcessing }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: node.manualReview.fill, border: node.manualReview.border, label: h.stateManualReview }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: node.terminal.fill, border: node.terminal.border, label: h.stateTerminal }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: "#FFFFFF", border: colors.danger, label: h.stateError }),
-            /* @__PURE__ */ jsx21(ColorRow, { fill: "#FFFFFF", border: colors.warning, label: h.stateWarning })
+          /* @__PURE__ */ jsxs22(Section, { title: h.statesTitle, children: [
+            /* @__PURE__ */ jsx24(ColorRow, { fill: node.initial.fill, border: node.initial.border, label: h.stateInitial }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: node.default.fill, border: node.default.border, label: h.stateDefault }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: node.processing.fill, border: node.processing.border, label: h.stateProcessing }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: node.manualReview.fill, border: node.manualReview.border, label: h.stateManualReview }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: node.terminal.fill, border: node.terminal.border, label: h.stateTerminal }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: "#FFFFFF", border: colors.danger, label: h.stateError }),
+            /* @__PURE__ */ jsx24(ColorRow, { fill: "#FFFFFF", border: colors.warning, label: h.stateWarning })
           ] }),
-          /* @__PURE__ */ jsxs19(Section, { title: h.transitionsTitle, children: [
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.automated, label: h.transitionAutomated }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.manual, dashed: true, label: h.transitionManual }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.conditional, label: h.transitionConditional }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.processing, label: h.transitionProcessing }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.terminal, label: h.transitionTerminal }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.loop, label: h.transitionLoop }),
-            /* @__PURE__ */ jsx21(LineRow, { color: edge.disabled, label: h.transitionDisabled })
+          /* @__PURE__ */ jsxs22(Section, { title: h.transitionsTitle, children: [
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.automated, label: h.transitionAutomated }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.manual, dashed: true, label: h.transitionManual }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.conditional, label: h.transitionConditional }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.processing, label: h.transitionProcessing }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.terminal, label: h.transitionTerminal }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.loop, label: h.transitionLoop }),
+            /* @__PURE__ */ jsx24(LineRow, { color: edge.disabled, label: h.transitionDisabled })
           ] }),
-          /* @__PURE__ */ jsxs19(Section, { title: h.controlsTitle, children: [
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "A", label: h.shortcutAddState }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "L", label: h.shortcutAutoLayout }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "Ctrl/\u2318 Z", label: h.shortcutUndo }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "Ctrl/\u2318 \u21E7 Z", label: h.shortcutRedo }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "Ctrl/\u2318 S", label: h.shortcutSave }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "Delete", label: h.shortcutDelete }),
-            /* @__PURE__ */ jsx21(ShortcutRow, { keys: "Esc", label: h.shortcutEscape })
+          /* @__PURE__ */ jsxs22(Section, { title: h.controlsTitle, children: [
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "A", label: h.shortcutAddState }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "L", label: h.shortcutAutoLayout }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "Ctrl/\u2318 Z", label: h.shortcutUndo }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "Ctrl/\u2318 \u21E7 Z", label: h.shortcutRedo }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "Ctrl/\u2318 S", label: h.shortcutSave }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "Delete", label: h.shortcutDelete }),
+            /* @__PURE__ */ jsx24(ShortcutRow, { keys: "Esc", label: h.shortcutEscape })
           ] }),
-          /* @__PURE__ */ jsx21(Section, { title: h.tipsTitle, children: /* @__PURE__ */ jsxs19("ul", { style: { margin: 0, paddingLeft: 18, fontSize: 13, color: colors.textSecondary, display: "flex", flexDirection: "column", gap: 6 }, children: [
-            /* @__PURE__ */ jsx21("li", { children: h.tipDoubleClick }),
-            /* @__PURE__ */ jsx21("li", { children: h.tipConnect }),
-            /* @__PURE__ */ jsx21("li", { children: h.tipSelect }),
-            /* @__PURE__ */ jsx21("li", { children: h.tipMove })
+          /* @__PURE__ */ jsx24(Section, { title: h.tipsTitle, children: /* @__PURE__ */ jsxs22("ul", { style: { margin: 0, paddingLeft: 18, fontSize: 13, color: colors.textSecondary, display: "flex", flexDirection: "column", gap: 6 }, children: [
+            /* @__PURE__ */ jsx24("li", { children: h.tipDoubleClick }),
+            /* @__PURE__ */ jsx24("li", { children: h.tipConnect }),
+            /* @__PURE__ */ jsx24("li", { children: h.tipSelect }),
+            /* @__PURE__ */ jsx24("li", { children: h.tipMove })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx21("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: /* @__PURE__ */ jsx21("button", { type: "button", onClick: onCancel, style: ghostBtnStyle, "data-testid": "help-modal-close", children: h.close }) })
+    /* @__PURE__ */ jsx24("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: /* @__PURE__ */ jsx24("button", { type: "button", onClick: onCancel, style: ghostBtnStyle, "data-testid": "help-modal-close", children: h.close }) })
   ] }) });
 }
 function Section({ title, children }) {
-  return /* @__PURE__ */ jsxs19("div", { children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs22("div", { children: [
+    /* @__PURE__ */ jsx24(
       "h3",
       {
         style: {
@@ -6491,12 +6829,12 @@ function Section({ title, children }) {
         children: title
       }
     ),
-    /* @__PURE__ */ jsx21("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children })
+    /* @__PURE__ */ jsx24("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children })
   ] });
 }
 function ColorRow({ fill, border, label }) {
-  return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ jsx24(
       "span",
       {
         style: {
@@ -6509,12 +6847,12 @@ function ColorRow({ fill, border, label }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx21("span", { children: label })
+    /* @__PURE__ */ jsx24("span", { children: label })
   ] });
 }
 function LineRow({ color, label, dashed }) {
-  return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ jsx21("svg", { width: "28", height: "14", style: { flexShrink: 0 }, "aria-hidden": "true", children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ jsx24("svg", { width: "28", height: "14", style: { flexShrink: 0 }, "aria-hidden": "true", children: /* @__PURE__ */ jsx24(
       "line",
       {
         x1: "2",
@@ -6527,12 +6865,12 @@ function LineRow({ color, label, dashed }) {
         ...dashed ? { strokeDasharray: "3 3" } : {}
       }
     ) }),
-    /* @__PURE__ */ jsx21("span", { children: label })
+    /* @__PURE__ */ jsx24("span", { children: label })
   ] });
 }
 function ShortcutRow({ keys, label }) {
-  return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: colors.textPrimary }, children: [
+    /* @__PURE__ */ jsx24(
       "kbd",
       {
         style: {
@@ -6552,12 +6890,12 @@ function ShortcutRow({ keys, label }) {
         children: keys
       }
     ),
-    /* @__PURE__ */ jsx21("span", { children: label })
+    /* @__PURE__ */ jsx24("span", { children: label })
   ] });
 }
 
 // src/modals/VersionSwitchModal.tsx
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function VersionSwitchModal({
   fromVersion,
   toVersion,
@@ -6565,7 +6903,7 @@ function VersionSwitchModal({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       style: {
@@ -6577,7 +6915,7 @@ function VersionSwitchModal({
         justifyContent: "center",
         zIndex: 1e3
       },
-      children: /* @__PURE__ */ jsxs20(
+      children: /* @__PURE__ */ jsxs23(
         "div",
         {
           "data-testid": "version-switch-modal",
@@ -6591,8 +6929,8 @@ function VersionSwitchModal({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsxs20("div", { style: { padding: "16px 20px 0", display: "flex", alignItems: "flex-start", gap: 12 }, children: [
-              /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs23("div", { style: { padding: "16px 20px 0", display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+              /* @__PURE__ */ jsx25(
                 "div",
                 {
                   style: {
@@ -6609,20 +6947,20 @@ function VersionSwitchModal({
                   children: "\u26A0\uFE0F"
                 }
               ),
-              /* @__PURE__ */ jsxs20("div", { children: [
-                /* @__PURE__ */ jsxs20("div", { style: { fontWeight: 600, fontSize: 14, color: "#0F172A", marginBottom: 4 }, children: [
+              /* @__PURE__ */ jsxs23("div", { children: [
+                /* @__PURE__ */ jsxs23("div", { style: { fontWeight: 600, fontSize: 14, color: "#0F172A", marginBottom: 4 }, children: [
                   "Switch to ",
                   toVersion,
                   "?"
                 ] }),
-                /* @__PURE__ */ jsxs20("div", { style: { color: "#475569", lineHeight: 1.5, fontSize: 13 }, children: [
+                /* @__PURE__ */ jsxs23("div", { style: { color: "#475569", lineHeight: 1.5, fontSize: 13 }, children: [
                   "Switching to ",
                   toVersion,
                   " will remove data not supported in that dialect:"
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs20(
+            /* @__PURE__ */ jsxs23(
               "div",
               {
                 style: {
@@ -6635,17 +6973,17 @@ function VersionSwitchModal({
                   fontSize: 12
                 },
                 children: [
-                  /* @__PURE__ */ jsx22("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Will be removed:" }),
-                  /* @__PURE__ */ jsx22("ul", { style: { margin: 0, paddingLeft: 16, lineHeight: 1.8 }, children: warnings.map((w, i) => /* @__PURE__ */ jsx22("li", { children: w }, i)) })
+                  /* @__PURE__ */ jsx25("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Will be removed:" }),
+                  /* @__PURE__ */ jsx25("ul", { style: { margin: 0, paddingLeft: 16, lineHeight: 1.8 }, children: warnings.map((w, i) => /* @__PURE__ */ jsx25("li", { children: w }, i)) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs20("div", { style: { padding: "10px 20px 0 64px", color: "#64748B", fontSize: 12, lineHeight: 1.5 }, children: [
+            /* @__PURE__ */ jsxs23("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__ */ jsxs20(
+            /* @__PURE__ */ jsxs23(
               "div",
               {
                 style: {
@@ -6657,7 +6995,7 @@ function VersionSwitchModal({
                   marginTop: 16
                 },
                 children: [
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx25(
                     "button",
                     {
                       type: "button",
@@ -6675,7 +7013,7 @@ function VersionSwitchModal({
                       children: "Cancel"
                     }
                   ),
-                  /* @__PURE__ */ jsxs20(
+                  /* @__PURE__ */ jsxs23(
                     "button",
                     {
                       type: "button",
@@ -6709,17 +7047,17 @@ function VersionSwitchModal({
 }
 
 // src/components/CommentNode.tsx
-import { useRef as useRef12, useState as useState15 } from "react";
-import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useRef as useRef14, useState as useState16 } from "react";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function CommentNode({ comment, disabled, onUpdate, onRemove }) {
-  const [editing, setEditing] = useState15(false);
-  const [draft, setDraft] = useState15(comment.text);
-  const textareaRef = useRef12(null);
+  const [editing, setEditing] = useState16(false);
+  const [draft, setDraft] = useState16(comment.text);
+  const textareaRef = useRef14(null);
   const commitEdit = () => {
     setEditing(false);
     if (draft !== comment.text) onUpdate({ text: draft });
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       "data-testid": `comment-${comment.id}`,
@@ -6740,8 +7078,8 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
         userSelect: "none"
       },
       children: [
-        /* @__PURE__ */ jsxs21("div", { style: { display: "flex", justifyContent: "flex-end", gap: 4, marginBottom: 4 }, children: [
-          !disabled && !editing && /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs24("div", { style: { display: "flex", justifyContent: "flex-end", gap: 4, marginBottom: 4 }, children: [
+          !disabled && !editing && /* @__PURE__ */ jsx26(
             "button",
             {
               type: "button",
@@ -6756,7 +7094,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
               children: "\u270F\uFE0F"
             }
           ),
-          !disabled && /* @__PURE__ */ jsx23(
+          !disabled && /* @__PURE__ */ jsx26(
             "button",
             {
               type: "button",
@@ -6768,7 +7106,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
             }
           )
         ] }),
-        editing ? /* @__PURE__ */ jsx23(
+        editing ? /* @__PURE__ */ jsx26(
           "textarea",
           {
             ref: textareaRef,
@@ -6794,7 +7132,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
             },
             "data-testid": `comment-textarea-${comment.id}`
           }
-        ) : /* @__PURE__ */ jsx23(
+        ) : /* @__PURE__ */ jsx26(
           "div",
           {
             onDoubleClick: () => {
@@ -6804,7 +7142,7 @@ function CommentNode({ comment, disabled, onUpdate, onRemove }) {
               }
             },
             style: { whiteSpace: "pre-wrap", wordBreak: "break-word", minHeight: 20 },
-            children: comment.text || /* @__PURE__ */ jsx23("em", { style: { color: "#94a3b8" }, children: "empty note" })
+            children: comment.text || /* @__PURE__ */ jsx26("em", { style: { color: "#94a3b8" }, children: "empty note" })
           }
         )
       ]
@@ -6822,14 +7160,14 @@ var iconBtn = {
 };
 
 // src/components/WorkflowJsonEditor.tsx
-import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef13, useState as useState16 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef15, useState as useState17 } from "react";
 import {
   attachCursorSelectionBridge,
   attachWorkflowJsonController,
   registerWorkflowSchema,
   revealIdInEditor
 } from "@cyoda/workflow-monaco";
-import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function WorkflowJsonEditor({
   document: document2,
   issues,
@@ -6841,20 +7179,20 @@ function WorkflowJsonEditor({
   onSelectionChange,
   onStatusChange
 }) {
-  const containerRef = useRef13(null);
-  const documentRef = useRef13(document2);
-  const issuesRef = useRef13(issues);
-  const readOnlyRef = useRef13(readOnly);
-  const onPatchRef = useRef13(onPatch);
-  const onSelectionChangeRef = useRef13(onSelectionChange);
-  const onStatusChangeRef = useRef13(onStatusChange);
-  const editorRef = useRef13(null);
-  const controllerRef = useRef13(null);
-  const schemaHandleRef = useRef13(null);
-  const cursorBridgeRef = useRef13(null);
-  const applyingGraphSelectionRef = useRef13(false);
-  const visibleRef = useRef13(visible);
-  const [status, setStatus] = useState16({ status: "idle" });
+  const containerRef = useRef15(null);
+  const documentRef = useRef15(document2);
+  const issuesRef = useRef15(issues);
+  const readOnlyRef = useRef15(readOnly);
+  const onPatchRef = useRef15(onPatch);
+  const onSelectionChangeRef = useRef15(onSelectionChange);
+  const onStatusChangeRef = useRef15(onStatusChange);
+  const editorRef = useRef15(null);
+  const controllerRef = useRef15(null);
+  const schemaHandleRef = useRef15(null);
+  const cursorBridgeRef = useRef15(null);
+  const applyingGraphSelectionRef = useRef15(false);
+  const visibleRef = useRef15(visible);
+  const [status, setStatus] = useState17({ status: "idle" });
   documentRef.current = document2;
   issuesRef.current = issues;
   readOnlyRef.current = readOnly;
@@ -6870,7 +7208,7 @@ function WorkflowJsonEditor({
   const modelUri = config?.modelUri;
   const editorOptions = config?.editorOptions;
   const debounceMs = config?.debounceMs;
-  useEffect10(() => {
+  useEffect12(() => {
     if (!monaco || !containerRef.current || editorRef.current) return;
     const model = monaco.editor.createModel(
       "",
@@ -6925,7 +7263,7 @@ function WorkflowJsonEditor({
       model.dispose();
     };
   }, [monaco, modelUri]);
-  useEffect10(() => {
+  useEffect12(() => {
     const editor = editorRef.current;
     const controller = controllerRef.current;
     if (!editor || !controller || !config) return;
@@ -6933,17 +7271,17 @@ function WorkflowJsonEditor({
     controller.syncFromDocument(document2);
     controller.renderIssues(issues, document2);
   }, [config, document2, issues, readOnly]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!visible) return;
     editorRef.current?.layout?.();
   }, [visible]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!config) {
       setStatus({ status: "idle" });
       onStatusChangeRef.current?.({ status: "idle" });
     }
   }, [config]);
-  useEffect10(() => {
+  useEffect12(() => {
     const editor = editorRef.current;
     if (!editor || !visible || !selectedId) return;
     applyingGraphSelectionRef.current = true;
@@ -6954,7 +7292,7 @@ function WorkflowJsonEditor({
     return () => window.clearTimeout(timeout);
   }, [document2, selectedId, visible]);
   if (!config) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         "data-testid": "workflow-json-unavailable",
@@ -6969,11 +7307,11 @@ function WorkflowJsonEditor({
           textAlign: "center",
           background: "#F8FAFC"
         },
-        children: /* @__PURE__ */ jsx24(UnavailableMessage, {})
+        children: /* @__PURE__ */ jsx27(UnavailableMessage, {})
       }
     );
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       "data-testid": "workflow-json-editor",
@@ -6985,8 +7323,8 @@ function WorkflowJsonEditor({
         minHeight: 0
       },
       children: [
-        /* @__PURE__ */ jsx24(JsonStatusBanner, { status }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx27(JsonStatusBanner, { status }),
+        /* @__PURE__ */ jsx27(
           "div",
           {
             ref: containerRef,
@@ -6999,7 +7337,7 @@ function WorkflowJsonEditor({
 }
 function UnavailableMessage() {
   const messages = useMessages();
-  return /* @__PURE__ */ jsx24(Fragment9, { children: messages.editorView.unavailable });
+  return /* @__PURE__ */ jsx27(Fragment10, { children: messages.editorView.unavailable });
 }
 function JsonStatusBanner({ status }) {
   const messages = useMessages();
@@ -7008,7 +7346,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__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       role: "status",
@@ -7052,7 +7390,7 @@ function selectionFromJsonId(doc, id) {
 }
 
 // src/components/WorkflowEditor.tsx
-import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function hasPersistedWorkflowUi(meta) {
   return !!meta && Object.values(meta).some((value) => value !== void 0);
 }
@@ -7119,36 +7457,46 @@ function WorkflowEditor({
     }
   }, []);
   const [state, actions] = useEditorStore(initialDocumentWithLayout, mode);
-  const [isFullscreen, setIsFullscreen] = useState17(false);
-  const [inspectorWidth, setInspectorWidth] = useState17(384);
-  const editorContainerRef = useRef14(null);
-  const [pendingDelete, setPendingDelete] = useState17(null);
-  const [pendingConnect, setPendingConnect] = useState17(null);
-  const [pendingAddState, setPendingAddState] = useState17(null);
-  const [helpOpen, setHelpOpen] = useState17(false);
-  const [reconnectError, setReconnectError] = useState17(null);
-  const [layoutKey, setLayoutKey] = useState17(0);
-  const [activeSurface, setActiveSurface] = useState17("graph");
-  const [jsonStatus, setJsonStatus] = useState17({ status: "idle" });
-  const [openIssueSeverity, setOpenIssueSeverity] = useState17(null);
-  const [inspectorOpen, setInspectorOpen] = useState17(false);
-  const [pendingVersionSwitch, setPendingVersionSwitch] = useState17(null);
-  const selectionRef = useRef14(state.selection);
-  const documentStateRef = useRef14(state.document);
-  const activeWorkflowRef = useRef14(state.activeWorkflow);
-  const pendingSelectionRestoreRef = useRef14(null);
-  const newStatePositionRef = useRef14(null);
-  useEffect11(() => {
+  const [isFullscreen, setIsFullscreen] = useState18(false);
+  const [inspectorWidth, setInspectorWidth] = useState18(384);
+  const editorContainerRef = useRef16(null);
+  const [pendingDelete, setPendingDelete] = useState18(null);
+  const [pendingConnect, setPendingConnect] = useState18(null);
+  const [pendingAddState, setPendingAddState] = useState18(null);
+  const [helpOpen, setHelpOpen] = useState18(false);
+  const [reconnectError, setReconnectError] = useState18(null);
+  const [layoutKey, setLayoutKey] = useState18(0);
+  const [activeSurface, setActiveSurface] = useState18("graph");
+  const [jsonStatus, setJsonStatus] = useState18({ status: "idle" });
+  const [openIssueSeverity, setOpenIssueSeverity] = useState18(null);
+  const [inspectorOpen, setInspectorOpen] = useState18(false);
+  const [placement, setPlacement] = useState18(() => {
+    const loaded = loadPlacement(localStorageKey);
+    if (loaded) {
+      return {
+        ...loaded,
+        rect: clampRect(loaded.rect, { w: window.innerWidth, h: window.innerHeight })
+      };
+    }
+    return { mode: "docked", rect: { left: 120, top: 96, width: 460, height: 560 } };
+  });
+  const [pendingVersionSwitch, setPendingVersionSwitch] = useState18(null);
+  const selectionRef = useRef16(state.selection);
+  const documentStateRef = useRef16(state.document);
+  const activeWorkflowRef = useRef16(state.activeWorkflow);
+  const pendingSelectionRestoreRef = useRef16(null);
+  const newStatePositionRef = useRef16(null);
+  useEffect13(() => {
     selectionRef.current = state.selection;
   }, [state.selection]);
-  useEffect11(() => {
+  useEffect13(() => {
     documentStateRef.current = state.document;
     activeWorkflowRef.current = state.activeWorkflow;
   }, [state.document, state.activeWorkflow]);
-  useEffect11(() => {
+  useEffect13(() => {
     onChange?.(state.document);
   }, [state.document, onChange]);
-  useEffect11(() => {
+  useEffect13(() => {
     try {
       const toStore = {};
       for (const [wfName, ui] of Object.entries(state.document.meta.workflowUi)) {
@@ -7167,26 +7515,38 @@ function WorkflowEditor({
     } catch {
     }
   }, [state.document.meta.workflowUi, localStorageKey, onWorkflowUiChange]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!onLayoutMetadataChange || !state.activeWorkflow) return;
     const ui = state.document.meta.workflowUi[state.activeWorkflow];
     if (ui) onLayoutMetadataChange(ui);
   }, [state.document.meta.workflowUi, state.activeWorkflow, onLayoutMetadataChange]);
-  const handleInspectorResizeStart = useCallback3((e) => {
-    e.preventDefault();
-    const startX = e.clientX;
-    const startWidth = inspectorWidth;
-    const onMove = (ev) => {
-      const delta = startX - ev.clientX;
-      setInspectorWidth(Math.max(360, startWidth + delta));
-    };
-    const onUp = () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-  }, [inspectorWidth]);
+  useEffect13(() => {
+    savePlacement(localStorageKey, placement);
+  }, [placement, localStorageKey]);
+  const toggleDock = useCallback3(() => {
+    setPlacement((p) => {
+      const viewport = { w: window.innerWidth, h: window.innerHeight };
+      if (p.mode === "docked") {
+        return { mode: "floating", rect: clampRect(p.rect, viewport) };
+      }
+      return { ...p, mode: "docked" };
+    });
+  }, []);
+  const minimizeInspector = useCallback3(() => {
+    setPlacement(
+      (p) => p.mode === "minimized" ? p : { mode: "minimized", rect: p.rect, restoreMode: p.mode }
+    );
+  }, []);
+  const restoreInspector = useCallback3(() => {
+    setPlacement((p) => {
+      if (p.mode !== "minimized") return p;
+      const back = p.restoreMode ?? "docked";
+      if (back === "floating") {
+        return { mode: "floating", rect: clampRect(p.rect, { w: window.innerWidth, h: window.innerHeight }) };
+      }
+      return { mode: "docked", rect: p.rect };
+    });
+  }, []);
   const handleToggleFullscreen = useCallback3(() => {
     setIsFullscreen((v) => !v);
   }, []);
@@ -7202,13 +7562,6 @@ function WorkflowEditor({
           kind: "transition",
           transitionUuid: patch.host.transitionUuid
         };
-        pendingSelectionRestoreRef.current = restoreSelection;
-        window.setTimeout(() => {
-          if (sameSelection(pendingSelectionRestoreRef.current, restoreSelection)) {
-            actions.setSelection(restoreSelection);
-            pendingSelectionRestoreRef.current = null;
-          }
-        }, 50);
         actions.dispatchTransaction({
           summary: patch.criterion ? "Set criterion" : "Clear criterion",
           patches: [patch],
@@ -7545,7 +7898,7 @@ function WorkflowEditor({
     },
     [anyModalOpen, readOnly, state.selection]
   );
-  useEffect11(() => {
+  useEffect13(() => {
     const handleDocumentDeleteKeyDown = (event) => {
       if (anyModalOpen || readOnly || isTypingTarget(event.target)) return;
       if (event.ctrlKey || event.metaKey || event.altKey) return;
@@ -7582,7 +7935,7 @@ function WorkflowEditor({
     [layoutOptions, pinnedNodes]
   );
   const savedViewport = state.activeWorkflow ? state.document.meta.workflowUi[state.activeWorkflow]?.viewports?.[orientation] : void 0;
-  useEffect11(() => {
+  useEffect13(() => {
     if (enableJsonEditor) return;
     setJsonStatus({ status: "idle" });
     onJsonStatusChange?.({ status: "idle" });
@@ -7621,13 +7974,13 @@ function WorkflowEditor({
     if (readOnly || anyModalOpen) return;
     openAddStateModal({ x, y });
   }, [anyModalOpen, openAddStateModal, readOnly]);
-  const graphPane = /* @__PURE__ */ jsxs23(
+  const graphPane = /* @__PURE__ */ jsxs26(
     "div",
     {
       "data-testid": "workflow-editor-graph-pane",
       style: { flex: 1, minWidth: 0, minHeight: 0, height: "100%", position: "relative" },
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           Canvas,
           {
             graph: derived.graph,
@@ -7672,7 +8025,7 @@ function WorkflowEditor({
             helpLabel: mergedMessages.toolbar.help
           }
         ),
-        reconnectError && /* @__PURE__ */ jsx25(
+        reconnectError && /* @__PURE__ */ jsx28(
           "div",
           {
             role: "alert",
@@ -7697,7 +8050,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__ */ jsx25(
+          return Object.values(comments).map((c) => /* @__PURE__ */ jsx28(
             CommentNode,
             {
               comment: c,
@@ -7720,12 +8073,12 @@ function WorkflowEditor({
       ]
     }
   );
-  const jsonPane = enableJsonEditor ? /* @__PURE__ */ jsx25(
+  const jsonPane = enableJsonEditor ? /* @__PURE__ */ jsx28(
     "div",
     {
       "data-testid": "workflow-editor-json-pane",
       style: { flex: 1, minWidth: 0, minHeight: 0, height: "100%" },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx28(
         WorkflowJsonEditor,
         {
           document: state.document,
@@ -7741,7 +8094,7 @@ function WorkflowEditor({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsx25(CriterionMonacoProvider, { value: jsonEditor?.monaco ?? null, children: /* @__PURE__ */ jsx25(I18nContext.Provider, { value: mergedMessages, children: /* @__PURE__ */ jsx25(EditorConfigContext.Provider, { value: editorConfig, children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx28(CriterionMonacoProvider, { value: jsonEditor?.monaco ?? null, children: /* @__PURE__ */ jsx28(I18nContext.Provider, { value: mergedMessages, children: /* @__PURE__ */ jsx28(EditorConfigContext.Provider, { value: editorConfig, children: /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: editorContainerRef,
@@ -7762,7 +8115,7 @@ function WorkflowEditor({
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       children: [
-        chrome?.tabs !== false && showTabs && /* @__PURE__ */ jsx25(
+        chrome?.tabs !== false && showTabs && /* @__PURE__ */ jsx28(
           WorkflowTabs,
           {
             workflows,
@@ -7789,9 +8142,9 @@ function WorkflowEditor({
             onVersionChange: handleVersionChange
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
-          /* @__PURE__ */ jsxs23("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-            (enableJsonEditor && jsonEditorPlacement === "tab" || !readOnly && graphVisible) && /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs26("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: [
+          /* @__PURE__ */ jsxs26("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+            (enableJsonEditor && jsonEditorPlacement === "tab" || !readOnly && graphVisible) && /* @__PURE__ */ jsxs26(
               "div",
               {
                 style: {
@@ -7805,8 +8158,8 @@ function WorkflowEditor({
                 },
                 "data-testid": "workflow-editor-surface-tabs",
                 children: [
-                  enableJsonEditor && jsonEditorPlacement === "tab" && /* @__PURE__ */ jsxs23(Fragment10, { children: [
-                    /* @__PURE__ */ jsx25(
+                  enableJsonEditor && jsonEditorPlacement === "tab" && /* @__PURE__ */ jsxs26(Fragment11, { children: [
+                    /* @__PURE__ */ jsx28(
                       SurfaceTab,
                       {
                         active: activeSurface === "graph",
@@ -7814,7 +8167,7 @@ function WorkflowEditor({
                         children: mergedMessages.editorView.graph
                       }
                     ),
-                    /* @__PURE__ */ jsx25(
+                    /* @__PURE__ */ jsx28(
                       SurfaceTab,
                       {
                         active: activeSurface === "json",
@@ -7823,8 +8176,8 @@ function WorkflowEditor({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx25("div", { style: { flex: 1 } }),
-                  !readOnly && activeSurface === "graph" && /* @__PURE__ */ jsxs23(
+                  /* @__PURE__ */ jsx28("div", { style: { flex: 1 } }),
+                  !readOnly && activeSurface === "graph" && /* @__PURE__ */ jsxs26(
                     "button",
                     {
                       type: "button",
@@ -7845,7 +8198,7 @@ function WorkflowEditor({
                         cursor: "pointer"
                       },
                       children: [
-                        /* @__PURE__ */ jsx25("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx25("path", { d: "M12 5v14M5 12h14" }) }),
+                        /* @__PURE__ */ jsx28("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx28("path", { d: "M12 5v14M5 12h14" }) }),
                         mergedMessages.toolbar.addStateButton
                       ]
                     }
@@ -7853,7 +8206,7 @@ function WorkflowEditor({
                 ]
               }
             ),
-            enableJsonEditor && jsonEditorPlacement === "split" ? /* @__PURE__ */ jsxs23(
+            enableJsonEditor && jsonEditorPlacement === "split" ? /* @__PURE__ */ jsxs26(
               "div",
               {
                 style: {
@@ -7866,10 +8219,10 @@ function WorkflowEditor({
                 "data-testid": "workflow-editor-split-view",
                 children: [
                   graphPane,
-                  /* @__PURE__ */ jsx25("div", { style: { borderLeft: "1px solid #E2E8F0", minWidth: 0 }, children: jsonPane })
+                  /* @__PURE__ */ jsx28("div", { style: { borderLeft: "1px solid #E2E8F0", minWidth: 0 }, children: jsonPane })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs23(
+            ) : /* @__PURE__ */ jsxs26(
               "div",
               {
                 style: {
@@ -7881,8 +8234,8 @@ function WorkflowEditor({
                   flexDirection: "column"
                 },
                 children: [
-                  graphVisible ? /* @__PURE__ */ jsx25("div", { style: { flex: 1, minHeight: 0, minWidth: 0 }, children: graphPane }) : null,
-                  enableJsonEditor ? /* @__PURE__ */ jsx25(
+                  graphVisible ? /* @__PURE__ */ jsx28("div", { style: { flex: 1, minHeight: 0, minWidth: 0 }, children: graphPane }) : null,
+                  enableJsonEditor ? /* @__PURE__ */ jsx28(
                     "div",
                     {
                       style: {
@@ -7899,41 +8252,36 @@ function WorkflowEditor({
               }
             )
           ] }),
-          inspectorVisible && /* @__PURE__ */ jsxs23(Fragment10, { children: [
-            /* @__PURE__ */ jsx25(
-              "div",
-              {
-                onMouseDown: handleInspectorResizeStart,
-                style: {
-                  width: 3,
-                  flexShrink: 0,
-                  cursor: "col-resize",
-                  background: "transparent",
-                  borderLeft: "1px solid #E2E8F0",
-                  transition: "background 0.15s",
-                  zIndex: 10
-                },
-                onMouseEnter: (e) => e.currentTarget.style.background = "#CBD5E1",
-                onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
-              }
-            ),
-            /* @__PURE__ */ jsx25(
-              Inspector,
-              {
-                document: state.document,
-                selection: state.selection,
-                issues: derived.issues,
-                readOnly,
-                onDispatch: dispatch,
-                onSelectionChange: handleSelectionChange,
-                onClose: () => handleSelectionChange(null),
-                onRequestDeleteState: requestDeleteState,
-                width: inspectorWidth
-              }
-            )
-          ] })
+          inspectorVisible && /* @__PURE__ */ jsx28(
+            InspectorFrame,
+            {
+              mode: placement.mode,
+              rect: placement.rect,
+              dockedWidth: inspectorWidth,
+              onRectChange: (rect) => setPlacement((p) => ({ ...p, rect })),
+              onDockedWidthChange: setInspectorWidth,
+              onRestore: restoreInspector,
+              onClose: () => handleSelectionChange(null),
+              children: /* @__PURE__ */ jsx28(
+                Inspector,
+                {
+                  document: state.document,
+                  selection: state.selection,
+                  issues: derived.issues,
+                  readOnly,
+                  onDispatch: dispatch,
+                  onSelectionChange: handleSelectionChange,
+                  onClose: () => handleSelectionChange(null),
+                  onRequestDeleteState: requestDeleteState,
+                  docked: placement.mode === "docked",
+                  onToggleDock: toggleDock,
+                  onMinimize: minimizeInspector
+                }
+              )
+            }
+          )
         ] }),
-        pendingAddState !== null && state.activeWorkflow && /* @__PURE__ */ jsx25(
+        pendingAddState !== null && state.activeWorkflow && /* @__PURE__ */ jsx28(
           AddStateModal,
           {
             existingNames: Object.keys(
@@ -7945,7 +8293,7 @@ function WorkflowEditor({
             onCancel: () => setPendingAddState(null)
           }
         ),
-        pendingDelete && /* @__PURE__ */ jsx25(
+        pendingDelete && /* @__PURE__ */ jsx28(
           DeleteStateModal,
           {
             document: state.document,
@@ -7955,7 +8303,7 @@ function WorkflowEditor({
             onCancel: () => setPendingDelete(null)
           }
         ),
-        pendingConnect && pendingConnectState && /* @__PURE__ */ jsx25(
+        pendingConnect && pendingConnectState && /* @__PURE__ */ jsx28(
           DragConnectModal,
           {
             source: pendingConnectState,
@@ -7965,8 +8313,8 @@ function WorkflowEditor({
             onCancel: () => setPendingConnect(null)
           }
         ),
-        helpOpen && /* @__PURE__ */ jsx25(HelpModal, { onCancel: () => setHelpOpen(false) }),
-        pendingVersionSwitch && /* @__PURE__ */ jsx25(
+        helpOpen && /* @__PURE__ */ jsx28(HelpModal, { onCancel: () => setHelpOpen(false) }),
+        pendingVersionSwitch && /* @__PURE__ */ jsx28(
           VersionSwitchModal,
           {
             fromVersion: `v${state.document.meta.cyodaVersion ?? LATEST_CYODA_VERSION}`,
@@ -7979,8 +8327,8 @@ function WorkflowEditor({
             onCancel: () => setPendingVersionSwitch(null)
           }
         ),
-        chrome?.toolbar !== false && /* @__PURE__ */ jsxs23("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx25(
+        chrome?.toolbar !== false && /* @__PURE__ */ jsxs26("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx28(
             Toolbar,
             {
               derived,
@@ -7995,7 +8343,7 @@ function WorkflowEditor({
               toolbarEnd
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx28(
             IssuesDrawer,
             {
               open: openIssueSeverity !== null,
@@ -8153,22 +8501,6 @@ function normalizeAnchorPair(anchors) {
 function sameAnchors(a, b) {
   return a?.source === b?.source && a?.target === b?.target;
 }
-function sameSelection(a, b) {
-  if (a === b) return true;
-  if (!a || !b || a.kind !== b.kind) return false;
-  switch (a.kind) {
-    case "workflow":
-      return b.kind === "workflow" && a.workflow === b.workflow;
-    case "state":
-      return b.kind === "state" && a.workflow === b.workflow && a.stateCode === b.stateCode && a.nodeId === b.nodeId;
-    case "transition":
-      return b.kind === "transition" && a.transitionUuid === b.transitionUuid;
-    case "processor":
-      return b.kind === "processor" && a.processorUuid === b.processorUuid;
-    case "criterion":
-      return b.kind === "criterion" && a.hostKind === b.hostKind && a.hostId === b.hostId && a.path.length === b.path.length && a.path.every((part, index) => part === b.path[index]);
-  }
-}
 function workflowForSelection(doc, selection) {
   if (!selection) return null;
   if (selection.kind === "workflow" || selection.kind === "state") return selection.workflow;
@@ -8191,7 +8523,7 @@ function SurfaceTab({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     "button",
     {
       type: "button",
@@ -8246,18 +8578,18 @@ function snapToGrid(value, grid = 16) {
 }
 
 // src/save/useSaveFlow.ts
-import { useCallback as useCallback4, useRef as useRef15, useState as useState18 } from "react";
+import { useCallback as useCallback4, useRef as useRef17, useState as useState19 } from "react";
 import {
   WorkflowApiConflictError
 } from "@cyoda/workflow-core";
 function useSaveFlow(args) {
   const { api, document: doc, concurrencyToken, onSaved, onReload } = args;
-  const [status, setStatus] = useState18({ kind: "idle" });
-  const tokenRef = useRef15(concurrencyToken);
+  const [status, setStatus] = useState19({ kind: "idle" });
+  const tokenRef = useRef17(concurrencyToken);
   tokenRef.current = concurrencyToken;
-  const entityRef = useRef15(doc.session.entity);
+  const entityRef = useRef17(doc.session.entity);
   entityRef.current = doc.session.entity;
-  const payloadRef = useRef15({
+  const payloadRef = useRef17({
     importMode: doc.session.importMode,
     workflows: doc.session.workflows
   });
@@ -8265,7 +8597,7 @@ function useSaveFlow(args) {
     importMode: doc.session.importMode,
     workflows: doc.session.workflows
   };
-  const savingRef = useRef15(false);
+  const savingRef = useRef17(false);
   const performImport = useCallback4(
     async (token) => {
       if (savingRef.current) return;
@@ -8323,8 +8655,8 @@ function useSaveFlow(args) {
 }
 
 // src/save/SaveConfirmModal.tsx
-import { useState as useState19 } from "react";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function SaveConfirmModal({
   mode,
   requiresExplicitConfirm,
@@ -8334,17 +8666,17 @@ function SaveConfirmModal({
   onCancel
 }) {
   const messages = useMessages();
-  const [ackMode, setAckMode] = useState19(!requiresExplicitConfirm);
-  const [ackWarnings, setAckWarnings] = useState19(warningCount === 0);
+  const [ackMode, setAckMode] = useState20(!requiresExplicitConfirm);
+  const [ackWarnings, setAckWarnings] = useState20(warningCount === 0);
   const blocked = !ackMode || !ackWarnings;
-  return /* @__PURE__ */ jsxs24(ModalFrame, { onCancel, children: [
-    /* @__PURE__ */ jsx26("h2", { style: { margin: 0, fontSize: 16 }, children: messages.saveConfirm.title }),
-    /* @__PURE__ */ jsxs24("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: [
+  return /* @__PURE__ */ jsxs27(ModalFrame, { onCancel, children: [
+    /* @__PURE__ */ jsx29("h2", { style: { margin: 0, fontSize: 16 }, children: messages.saveConfirm.title }),
+    /* @__PURE__ */ jsxs27("p", { style: { margin: "12px 0", fontSize: 13, color: colors.textSecondary }, children: [
       messages.saveConfirm.modeLabel,
       ": ",
-      /* @__PURE__ */ jsx26("strong", { children: mode })
+      /* @__PURE__ */ jsx29("strong", { children: mode })
     ] }),
-    diffSummary2 && /* @__PURE__ */ jsx26(
+    diffSummary2 && /* @__PURE__ */ jsx29(
       "pre",
       {
         style: {
@@ -8363,8 +8695,8 @@ function SaveConfirmModal({
         children: diffSummary2
       }
     ),
-    requiresExplicitConfirm && /* @__PURE__ */ jsxs24("label", { style: checkRow, "data-testid": "save-ack-mode", children: [
-      /* @__PURE__ */ jsx26(
+    requiresExplicitConfirm && /* @__PURE__ */ jsxs27("label", { style: checkRow, "data-testid": "save-ack-mode", children: [
+      /* @__PURE__ */ jsx29(
         "input",
         {
           type: "checkbox",
@@ -8372,10 +8704,10 @@ function SaveConfirmModal({
           onChange: (e) => setAckMode(e.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx26("span", { children: mode === "REPLACE" ? messages.saveConfirm.ackReplace : messages.saveConfirm.ackActivate })
+      /* @__PURE__ */ jsx29("span", { children: mode === "REPLACE" ? messages.saveConfirm.ackReplace : messages.saveConfirm.ackActivate })
     ] }),
-    warningCount > 0 && /* @__PURE__ */ jsxs24("label", { style: checkRow, "data-testid": "save-ack-warnings", children: [
-      /* @__PURE__ */ jsx26(
+    warningCount > 0 && /* @__PURE__ */ jsxs27("label", { style: checkRow, "data-testid": "save-ack-warnings", children: [
+      /* @__PURE__ */ jsx29(
         "input",
         {
           type: "checkbox",
@@ -8383,11 +8715,11 @@ function SaveConfirmModal({
           onChange: (e) => setAckWarnings(e.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx26("span", { children: messages.saveConfirm.ackWarnings.replace("{count}", String(warningCount)) })
+      /* @__PURE__ */ jsx29("span", { children: messages.saveConfirm.ackWarnings.replace("{count}", String(warningCount)) })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx26("button", { type: "button", onClick: onCancel, style: ghostBtn8, "data-testid": "save-cancel", children: messages.saveConfirm.cancel }),
-      /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs27("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: [
+      /* @__PURE__ */ jsx29("button", { type: "button", onClick: onCancel, style: ghostBtn8, "data-testid": "save-cancel", children: messages.saveConfirm.cancel }),
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -8425,10 +8757,10 @@ var primaryBtn5 = {
 };
 
 // src/save/ConflictBanner.tsx
-import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function ConflictBanner({ onReload, onForceOverwrite }) {
   const messages = useMessages();
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       style: {
@@ -8444,8 +8776,8 @@ function ConflictBanner({ onReload, onForceOverwrite }) {
       role: "alert",
       "data-testid": "conflict-banner",
       children: [
-        /* @__PURE__ */ jsx27("span", { style: { flex: 1 }, children: messages.conflict.message }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30("span", { style: { flex: 1 }, children: messages.conflict.message }),
+        /* @__PURE__ */ jsx30(
           "button",
           {
             type: "button",
@@ -8455,7 +8787,7 @@ function ConflictBanner({ onReload, onForceOverwrite }) {
             children: messages.conflict.reload
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "button",
           {
             type: "button",