@goplasmatic/dataflow-ui 2.0.6 → 2.0.8

package/dist/index.js

@@ -205,6 +205,17 @@ const CircleCheckBig = createLucideIcon("CircleCheckBig", [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const CircleX = createLucideIcon("CircleX", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
+  ["path", { d: "m9 9 6 6", key: "z0biqf" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -311,6 +322,15 @@ const ListTree = createLucideIcon("ListTree", [
   ["path", { d: "M3 6v4c0 1.1.9 2 2 2h3", key: "1ywdgy" }],
   ["path", { d: "M3 10v6c0 1.1.9 2 2 2h3", key: "2wc746" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const LoaderCircle = createLucideIcon("LoaderCircle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -11068,7 +11088,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
       }
     ]
   ];
-  const CircleX = createLucideIcon2("circle-x", __iconNode$l);
+  const CircleX2 = createLucideIcon2("circle-x", __iconNode$l);
   const __iconNode$k = [
     [
       "path",
@@ -11696,7 +11716,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
     "database": Database,
     "boxes": Boxes,
     "circle-help": CircleQuestionMark,
-    "circle-x": CircleX,
+    "circle-x": CircleX2,
     "git-commit-horizontal": GitCommitHorizontal,
     "search": Search2,
     "divide": Divide,
@@ -19753,7 +19773,7 @@ function WorkflowFlowView({
 }
 function DataLogicView({ value }) {
   const { resolvedTheme } = useTheme();
-  return /* @__PURE__ */ jsx("div", { className: "df-details-content", children: /* @__PURE__ */ jsx("div", { className: "df-details-logic-editor", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "df-details-content", children: /* @__PURE__ */ jsx("div", { className: "df-details-logic-editor", "data-theme": resolvedTheme, children: /* @__PURE__ */ jsx(
     DataLogicEditor,
     {
       value,
@@ -20423,1854 +20443,2124 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     }
   ) });
 }
-function SearchInput({
-  value,
-  onChange,
-  onClear,
-  placeholder = "Search...",
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `df-search-input ${className}`, children: [
-    /* @__PURE__ */ jsx(Search, { className: "df-search-icon", size: 16 }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        placeholder,
-        className: "df-search-field"
+function DebuggerControls({ compact = false, className = "" }) {
+  const {
+    state,
+    play,
+    pause,
+    stop,
+    reset,
+    stepForward,
+    stepBackward,
+    setSpeed,
+    isAtStart,
+    isAtEnd,
+    hasTrace,
+    progress,
+    totalSteps
+  } = useDebugger();
+  const { playbackState, playbackSpeed, currentStepIndex, isExecuting } = state;
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
       }
-    ),
-    value && onClear && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: onClear,
-        className: "df-search-clear",
-        "aria-label": "Clear search",
-        children: /* @__PURE__ */ jsx(X, { size: 14 })
+      switch (e.key) {
+        case " ":
+          e.preventDefault();
+          if (playbackState === "playing") {
+            pause();
+          } else if (hasTrace) {
+            play();
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (hasTrace && !isAtEnd) {
+            stepForward();
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (hasTrace && !isAtStart) {
+            stepBackward();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          stop();
+          break;
+        case "r":
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            reset();
+          }
+          break;
       }
-    )
+    },
+    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stop, stepForward, stepBackward, reset]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const handleSpeedChange = (e) => {
+    setSpeed(Number(e.target.value));
+  };
+  if (compact) {
+    return /* @__PURE__ */ jsxs("div", { className: `df-debug-controls df-debug-controls-compact ${className}`, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: stepBackward,
+          disabled: !hasTrace || isAtStart || isExecuting,
+          title: "Previous step (Left Arrow)",
+          children: /* @__PURE__ */ jsx(SkipBack, { size: 16 })
+        }
+      ),
+      playbackState === "playing" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn df-debug-btn-primary",
+          onClick: pause,
+          disabled: !hasTrace || isExecuting,
+          title: "Pause (Space)",
+          children: /* @__PURE__ */ jsx(Pause, { size: 18 })
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn df-debug-btn-primary",
+          onClick: play,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Play (Space)",
+          children: /* @__PURE__ */ jsx(Play, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: stepForward,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Next step (Right Arrow)",
+          children: /* @__PURE__ */ jsx(SkipForward, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "df-debug-step-counter", children: [
+        currentStepIndex + 1,
+        " / ",
+        totalSteps
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `df-debug-controls ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-controls-main", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: stop,
+          disabled: !hasTrace || isExecuting,
+          title: "Stop (Escape)",
+          children: /* @__PURE__ */ jsx(Square, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: stepBackward,
+          disabled: !hasTrace || isAtStart || isExecuting,
+          title: "Previous step (Left Arrow)",
+          children: /* @__PURE__ */ jsx(SkipBack, { size: 20 })
+        }
+      ),
+      playbackState === "playing" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn df-debug-btn-primary",
+          onClick: pause,
+          disabled: !hasTrace || isExecuting,
+          title: "Pause (Space)",
+          children: /* @__PURE__ */ jsx(Pause, { size: 24 })
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn df-debug-btn-primary",
+          onClick: play,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Play (Space)",
+          children: /* @__PURE__ */ jsx(Play, { size: 24 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: stepForward,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Next step (Right Arrow)",
+          children: /* @__PURE__ */ jsx(SkipForward, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-btn",
+          onClick: reset,
+          disabled: !hasTrace || isExecuting,
+          title: "Reset (Ctrl+R)",
+          children: /* @__PURE__ */ jsx(RotateCcw, { size: 20 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-progress", children: [
+      /* @__PURE__ */ jsx("div", { className: "df-debug-progress-bar", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "df-debug-progress-fill",
+          style: { width: `${progress * 100}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("span", { className: "df-debug-step-counter", children: [
+        "Step ",
+        currentStepIndex + 1,
+        " of ",
+        totalSteps
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-speed", children: [
+      /* @__PURE__ */ jsx(Gauge, { size: 14 }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: "100",
+          max: "2000",
+          step: "100",
+          value: playbackSpeed,
+          onChange: handleSpeedChange,
+          className: "df-debug-speed-slider",
+          title: `Playback speed: ${playbackSpeed}ms`
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "df-debug-speed-label", children: [
+        playbackSpeed,
+        "ms"
+      ] })
+    ] })
   ] });
 }
-function JsonViewer({
-  data,
-  initialExpanded = false,
-  maxStringLength = 50,
+function MessageInputPanel({
+  onExecute,
+  isExecuting = false,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx("div", { className: `df-json-viewer ${className}`, children: /* @__PURE__ */ jsx(
-    JsonNode,
-    {
-      data,
-      initialExpanded,
-      maxStringLength
-    }
-  ) });
-}
-function JsonNode({
-  data,
-  initialExpanded,
-  maxStringLength,
-  keyName,
-  isLast = true
-}) {
-  const [expanded, setExpanded] = useState(initialExpanded);
-  const renderValue = () => {
-    if (data === null) {
-      return /* @__PURE__ */ jsx("span", { className: "df-json-null", children: "null" });
-    }
-    if (data === void 0) {
-      return /* @__PURE__ */ jsx("span", { className: "df-json-undefined", children: "undefined" });
-    }
-    if (typeof data === "boolean") {
-      return /* @__PURE__ */ jsx("span", { className: "df-json-boolean", children: data.toString() });
-    }
-    if (typeof data === "number") {
-      return /* @__PURE__ */ jsx("span", { className: "df-json-number", children: data });
+  const { setInputPayload, state } = useDebugger();
+  const { inputPayload } = state;
+  const [expandedSections, setExpandedSections] = useState(
+    /* @__PURE__ */ new Set(["payload"])
+  );
+  const [editingSection, setEditingSection] = useState(null);
+  const [editText, setEditText] = useState("");
+  const [parseError, setParseError] = useState(null);
+  const payload = inputPayload || {};
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+  const startEditing = () => {
+    setEditingSection("payload");
+    setEditText(JSON.stringify(payload, null, 2));
+    setParseError(null);
+  };
+  const cancelEditing = () => {
+    setEditingSection(null);
+    setEditText("");
+    setParseError(null);
+  };
+  const saveEditing = useCallback(() => {
+    if (!editingSection) return;
+    try {
+      const parsed = JSON.parse(editText);
+      setInputPayload(parsed);
+      setEditingSection(null);
+      setEditText("");
+      setParseError(null);
+    } catch (err) {
+      setParseError(err instanceof Error ? err.message : "Invalid JSON");
     }
-    if (typeof data === "string") {
-      const display = data.length > maxStringLength ? `${data.slice(0, maxStringLength)}...` : data;
-      return /* @__PURE__ */ jsxs("span", { className: "df-json-string", children: [
-        '"',
-        display,
-        '"'
-      ] });
+  }, [editingSection, editText, setInputPayload]);
+  const handleLoadSample = () => {
+    setInputPayload({
+      id: "123",
+      name: "John Doe",
+      email: "john@example.com",
+      amount: 100
+    });
+  };
+  const handleClear = () => {
+    setInputPayload({});
+  };
+  const formatValue2 = (value) => {
+    if (Object.keys(value).length === 0) {
+      return "(empty)";
     }
-    if (Array.isArray(data)) {
-      if (data.length === 0) {
-        return /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "[]" });
-      }
-      return /* @__PURE__ */ jsxs("span", { className: "df-json-array", children: [
-        /* @__PURE__ */ jsx(
+    return JSON.stringify(value, null, 2);
+  };
+  const isEmptyPayload = Object.keys(payload).length === 0;
+  const isExpanded = expandedSections.has("payload");
+  const isEditing = editingSection === "payload";
+  return /* @__PURE__ */ jsxs("div", { className: `df-debug-input-panel ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-input-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "df-debug-input-title", children: "Test Payload" }),
+      /* @__PURE__ */ jsxs("div", { className: "df-debug-input-actions", children: [
+        /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: () => setExpanded(!expanded),
-            className: "df-json-toggle",
-            children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+            className: "df-debug-btn-sm",
+            onClick: handleLoadSample,
+            title: "Load sample data",
+            children: [
+              /* @__PURE__ */ jsx(FileJson, { size: 12 }),
+              "Sample"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "[" }),
-        !expanded && /* @__PURE__ */ jsxs("span", { className: "df-json-preview", children: [
-          data.length,
-          " item",
-          data.length !== 1 ? "s" : ""
-        ] }),
-        expanded && /* @__PURE__ */ jsx("div", { className: "df-json-children", children: data.map((item, index2) => /* @__PURE__ */ jsx(
-          JsonNode,
+        /* @__PURE__ */ jsxs(
+          "button",
           {
-            data: item,
-            initialExpanded: false,
-            maxStringLength,
-            isLast: index2 === data.length - 1
-          },
-          index2
-        )) }),
-        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "]" })
-      ] });
-    }
-    if (typeof data === "object") {
-      const entries = Object.entries(data);
-      if (entries.length === 0) {
-        return /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "{}" });
-      }
-      return /* @__PURE__ */ jsxs("span", { className: "df-json-object", children: [
+            className: "df-debug-btn-sm",
+            onClick: handleClear,
+            title: "Clear all data",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { size: 12 }),
+              "Clear"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "df-debug-input-sections", children: /* @__PURE__ */ jsxs("div", { className: "df-debug-input-section", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "df-debug-input-section-header",
+          onClick: () => !isEditing && toggleSection("payload"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "df-debug-section-toggle", children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) }),
+            /* @__PURE__ */ jsx("span", { className: "df-debug-section-label", children: "Payload" }),
+            isEmptyPayload && /* @__PURE__ */ jsx("span", { className: "df-debug-section-empty", children: "(empty)" }),
+            !isEditing && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "df-debug-section-edit",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  startEditing();
+                },
+                title: "Edit Payload",
+                children: "Edit"
+              }
+            )
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsx("div", { className: "df-debug-input-section-content", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "df-debug-input-editor", children: [
         /* @__PURE__ */ jsx(
-          "button",
+          "textarea",
           {
-            onClick: () => setExpanded(!expanded),
-            className: "df-json-toggle",
-            children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+            className: "df-debug-input-textarea",
+            value: editText,
+            onChange: (e) => setEditText(e.target.value),
+            placeholder: "Enter payload as JSON...",
+            spellCheck: false
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "{" }),
-        !expanded && /* @__PURE__ */ jsxs("span", { className: "df-json-preview", children: [
-          entries.length,
-          " key",
-          entries.length !== 1 ? "s" : ""
-        ] }),
-        expanded && /* @__PURE__ */ jsx("div", { className: "df-json-children", children: entries.map(([key, value], index2) => /* @__PURE__ */ jsx(
-          JsonNode,
-          {
-            keyName: key,
-            data: value,
-            initialExpanded: false,
-            maxStringLength,
-            isLast: index2 === entries.length - 1
-          },
-          key
-        )) }),
-        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "}" })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("span", { children: String(data) });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "df-json-node", children: [
-    keyName !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "df-json-key", children: [
-        '"',
-        keyName,
-        '"'
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "df-json-colon", children: ": " })
-    ] }),
-    renderValue(),
-    !isLast && /* @__PURE__ */ jsx("span", { className: "df-json-comma", children: "," })
-  ] });
-}
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
-function _defineProperty$1(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _iterableToArrayLimit(r, l2) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e, n, i, u, a = [], f = true, o = false;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l2) ;
-      else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l2); f = true) ;
-    } catch (r2) {
-      o = true, n = r2;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function ownKeys$1(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2$1(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
-      _defineProperty$1(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o, r, i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
+        parseError && /* @__PURE__ */ jsx("div", { className: "df-debug-input-error", children: parseError }),
+        /* @__PURE__ */ jsxs("div", { className: "df-debug-input-editor-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "df-debug-btn-sm df-debug-btn-cancel",
+              onClick: cancelEditing,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "df-debug-btn-sm df-debug-btn-save",
+              onClick: saveEditing,
+              children: "Save"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsx("pre", { className: "df-debug-input-preview", children: formatValue2(payload) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "df-debug-input-footer", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "df-debug-run-btn",
+        onClick: onExecute,
+        disabled: isExecuting,
+        children: isExecuting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RefreshCw, { size: 14, className: "df-debug-spin" }),
+          "Executing..."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Play, { size: 14 }),
+          "Run Debug"
+        ] })
+      }
+    ) })
+  ] });
 }
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
+function MessageStatePanel({ className = "" }) {
+  const { currentStep, currentMessage, currentChanges } = useDebugger();
+  const [activeTab, setActiveTab] = useState("message");
+  if (!currentStep || !currentMessage) {
+    return /* @__PURE__ */ jsx("div", { className: `df-debug-state-panel df-debug-state-empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "No step selected. Run debug to see message state changes." }) });
   }
-  return obj;
+  const { workflow_id, task_id, result } = currentStep;
+  const tabs = [
+    { key: "message", label: "Message" },
+    { key: "changes", label: `Changes (${currentChanges.length})` }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: `df-debug-state-panel ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "df-debug-state-header", children: /* @__PURE__ */ jsx("div", { className: "df-debug-state-tabs", children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `df-debug-state-tab ${activeTab === key ? "df-debug-state-tab-active" : ""}`,
+        onClick: () => setActiveTab(key),
+        children: label
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-state-content", children: [
+      activeTab === "message" && /* @__PURE__ */ jsx(MessageView, { message: currentMessage }),
+      activeTab === "changes" && /* @__PURE__ */ jsx(ChangesView, { changes: currentChanges })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-state-footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "df-debug-state-step-type", children: [
+        /* @__PURE__ */ jsx("span", { className: `df-debug-state-badge df-debug-state-badge-${result}`, children: result }),
+        /* @__PURE__ */ jsxs("span", { className: "df-debug-state-type-label", children: [
+          workflow_id,
+          task_id ? ` / ${task_id}` : ""
+        ] })
+      ] }),
+      currentMessage.errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "df-debug-state-error", children: [
+        "Errors: ",
+        currentMessage.errors.length
+      ] })
+    ] })
+  ] });
 }
-function ownKeys(object2, enumerableOnly) {
-  var keys = Object.keys(object2);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object2);
-    if (enumerableOnly) symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
+function MessageView({ message }) {
+  const [expandedSections, setExpandedSections] = useState(
+    /* @__PURE__ */ new Set(["context"])
+  );
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
     });
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
+  };
+  const sections = [
+    { key: "context", value: message.context },
+    { key: "payload", value: message.payload },
+    { key: "errors", value: message.errors },
+    { key: "audit_trail", value: message.audit_trail }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "df-debug-message-view", children: sections.map(({ key, value }) => {
+    const isExpanded = expandedSections.has(key);
+    const isEmpty2 = Array.isArray(value) ? value.length === 0 : typeof value === "object" && value !== null ? Object.keys(value).length === 0 : !value;
+    return /* @__PURE__ */ jsxs("div", { className: "df-debug-message-section", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "df-debug-message-section-header",
+          onClick: () => toggleSection(key),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "df-debug-section-arrow", children: isExpanded ? "▼" : "▶" }),
+            /* @__PURE__ */ jsx("span", { className: "df-debug-section-key", children: key }),
+            isEmpty2 && /* @__PURE__ */ jsx("span", { className: "df-debug-section-empty", children: "(empty)" })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsx("pre", { className: "df-debug-message-section-content", children: JSON.stringify(value, null, 2) })
+    ] }, key);
+  }) });
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function(key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+function ChangesView({ changes }) {
+  if (changes.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "df-debug-changes-empty", children: "No changes recorded in this step" });
   }
-  return target;
+  return /* @__PURE__ */ jsx("div", { className: "df-debug-changes-view", children: changes.map((change, index2) => {
+    const isModified = change.old_value !== void 0 && change.new_value !== void 0;
+    const isAdded = change.old_value === void 0 && change.new_value !== void 0;
+    const isRemoved = change.old_value !== void 0 && change.new_value === void 0;
+    const changeType = isAdded ? "added" : isRemoved ? "removed" : "modified";
+    return /* @__PURE__ */ jsxs("div", { className: `df-debug-change-item df-debug-change-${changeType}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "df-debug-change-header", children: [
+        /* @__PURE__ */ jsx("span", { className: `df-debug-change-op df-debug-change-op-${changeType}`, children: changeType }),
+        /* @__PURE__ */ jsx("span", { className: "df-debug-change-path", children: change.path })
+      ] }),
+      isModified && /* @__PURE__ */ jsxs("div", { className: "df-debug-change-values", children: [
+        /* @__PURE__ */ jsx("span", { className: "df-debug-change-old", children: formatValue(change.old_value) }),
+        /* @__PURE__ */ jsx("span", { className: "df-debug-change-arrow", children: "→" }),
+        /* @__PURE__ */ jsx("span", { className: "df-debug-change-new", children: formatValue(change.new_value) })
+      ] }),
+      isAdded && /* @__PURE__ */ jsx("div", { className: "df-debug-change-values", children: /* @__PURE__ */ jsx("span", { className: "df-debug-change-new", children: formatValue(change.new_value) }) }),
+      isRemoved && /* @__PURE__ */ jsx("div", { className: "df-debug-change-values", children: /* @__PURE__ */ jsx("span", { className: "df-debug-change-old", children: formatValue(change.old_value) }) })
+    ] }, index2);
+  }) });
 }
-function compose$1() {
-  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
-    fns[_key] = arguments[_key];
-  }
-  return function(x) {
-    return fns.reduceRight(function(y, f) {
-      return f(y);
-    }, x);
-  };
+function formatValue(value) {
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
 }
-function curry$1(fn) {
-  return function curried() {
-    var _this = this;
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    return args.length >= fn.length ? fn.apply(this, args) : function() {
-      for (var _len3 = arguments.length, nextArgs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        nextArgs[_key3] = arguments[_key3];
+function DebugInfoBubble({
+  step,
+  targetRef,
+  visible,
+  onClose
+}) {
+  var _a;
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const bubbleRef = useRef(null);
+  useEffect(() => {
+    if (!visible || !targetRef.current) return;
+    const updatePosition = () => {
+      var _a2, _b;
+      const targetRect = (_a2 = targetRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+      const bubbleRect = (_b = bubbleRef.current) == null ? void 0 : _b.getBoundingClientRect();
+      if (!targetRect) return;
+      let top = targetRect.bottom + 8;
+      let left = targetRect.left;
+      if (bubbleRect) {
+        if (left + bubbleRect.width > window.innerWidth - 16) {
+          left = window.innerWidth - bubbleRect.width - 16;
+        }
+        if (top + bubbleRect.height > window.innerHeight - 16) {
+          top = targetRect.top - bubbleRect.height - 8;
+        }
       }
-      return curried.apply(_this, [].concat(args, nextArgs));
+      setPosition({ top, left });
     };
-  };
-}
-function isObject$1(value) {
-  return {}.toString.call(value).includes("Object");
-}
-function isEmpty(obj) {
-  return !Object.keys(obj).length;
-}
-function isFunction(value) {
-  return typeof value === "function";
-}
-function hasOwnProperty(object2, property) {
-  return Object.prototype.hasOwnProperty.call(object2, property);
-}
-function validateChanges(initial, changes) {
-  if (!isObject$1(changes)) errorHandler$1("changeType");
-  if (Object.keys(changes).some(function(field) {
-    return !hasOwnProperty(initial, field);
-  })) errorHandler$1("changeField");
-  return changes;
-}
-function validateSelector(selector2) {
-  if (!isFunction(selector2)) errorHandler$1("selectorType");
-}
-function validateHandler(handler) {
-  if (!(isFunction(handler) || isObject$1(handler))) errorHandler$1("handlerType");
-  if (isObject$1(handler) && Object.values(handler).some(function(_handler) {
-    return !isFunction(_handler);
-  })) errorHandler$1("handlersType");
-}
-function validateInitial(initial) {
-  if (!initial) errorHandler$1("initialIsRequired");
-  if (!isObject$1(initial)) errorHandler$1("initialType");
-  if (isEmpty(initial)) errorHandler$1("initialContent");
-}
-function throwError$1(errorMessages2, type) {
-  throw new Error(errorMessages2[type] || errorMessages2["default"]);
-}
-var errorMessages$1 = {
-  initialIsRequired: "initial state is required",
-  initialType: "initial state should be an object",
-  initialContent: "initial state shouldn't be an empty object",
-  handlerType: "handler should be an object or a function",
-  handlersType: "all handlers should be a functions",
-  selectorType: "selector should be a function",
-  changeType: "provided value of changes should be an object",
-  changeField: 'it seams you want to change a field in the state which is not specified in the "initial" state',
-  "default": "an unknown error accured in `state-local` package"
-};
-var errorHandler$1 = curry$1(throwError$1)(errorMessages$1);
-var validators$1 = {
-  changes: validateChanges,
-  selector: validateSelector,
-  handler: validateHandler,
-  initial: validateInitial
-};
-function create(initial) {
-  var handler = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-  validators$1.initial(initial);
-  validators$1.handler(handler);
-  var state = {
-    current: initial
-  };
-  var didUpdate = curry$1(didStateUpdate)(state, handler);
-  var update = curry$1(updateState)(state);
-  var validate = curry$1(validators$1.changes)(initial);
-  var getChanges = curry$1(extractChanges)(state);
-  function getState2() {
-    var selector2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(state2) {
-      return state2;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
     };
-    validators$1.selector(selector2);
-    return selector2(state.current);
-  }
-  function setState2(causedChanges) {
-    compose$1(didUpdate, update, validate, getChanges)(causedChanges);
-  }
-  return [getState2, setState2];
-}
-function extractChanges(state, causedChanges) {
-  return isFunction(causedChanges) ? causedChanges(state.current) : causedChanges;
-}
-function updateState(state, changes) {
-  state.current = _objectSpread2(_objectSpread2({}, state.current), changes);
-  return changes;
-}
-function didStateUpdate(state, handler, changes) {
-  isFunction(handler) ? handler(state.current) : Object.keys(changes).forEach(function(field) {
-    var _handler$field;
-    return (_handler$field = handler[field]) === null || _handler$field === void 0 ? void 0 : _handler$field.call(handler, state.current[field]);
-  });
-  return changes;
-}
-var index = {
-  create
-};
-var config$1 = {
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs"
-  }
-};
-function curry(fn) {
-  return function curried() {
-    var _this = this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return args.length >= fn.length ? fn.apply(this, args) : function() {
-      for (var _len2 = arguments.length, nextArgs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        nextArgs[_key2] = arguments[_key2];
+  }, [visible, targetRef]);
+  if (!visible) return null;
+  const { workflow_id, task_id, result, message } = step;
+  const state = result === "executed" ? "executed" : "skipped";
+  const hasError = message && message.errors && message.errors.length > 0;
+  const displayState = hasError ? "error" : state;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: bubbleRef,
+        className: "df-debug-bubble",
+        style: {
+          position: "fixed",
+          top: position.top,
+          left: position.left
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-header", children: [
+            /* @__PURE__ */ jsx(StateIcon, { state: displayState }),
+            /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-title", children: task_id ? "Task Step" : "Workflow Skipped" }),
+            onClose && /* @__PURE__ */ jsx("button", { className: "df-debug-bubble-close", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-content", children: [
+            /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Workflow:" }),
+              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-value", children: workflow_id })
+            ] }),
+            task_id && /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Task:" }),
+              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-value", children: task_id })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Result:" }),
+              /* @__PURE__ */ jsx("span", { className: `df-debug-bubble-state df-debug-bubble-state-${displayState}`, children: result })
+            ] }),
+            hasError && (message == null ? void 0 : message.errors) && /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-error", children: [
+              /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: ((_a = message.errors[0]) == null ? void 0 : _a.message) || "Unknown error" })
+            ] })
+          ] })
+        ]
       }
-      return curried.apply(_this, [].concat(args, nextArgs));
-    };
-  };
-}
-function isObject(value) {
-  return {}.toString.call(value).includes("Object");
+    ),
+    document.body
+  );
 }
-function validateConfig(config2) {
-  if (!config2) errorHandler("configIsRequired");
-  if (!isObject(config2)) errorHandler("configType");
-  if (config2.urls) {
-    informAboutDeprecation();
-    return {
-      paths: {
-        vs: config2.urls.monacoBase
-      }
-    };
+function StateIcon({ state }) {
+  switch (state) {
+    case "executed":
+      return /* @__PURE__ */ jsx(Check, { size: 16, className: "df-debug-icon-executed" });
+    case "skipped":
+      return /* @__PURE__ */ jsx(SkipForward, { size: 16, className: "df-debug-icon-skipped" });
+    case "error":
+      return /* @__PURE__ */ jsx(CircleAlert, { size: 16, className: "df-debug-icon-error" });
+    case "current":
+      return /* @__PURE__ */ jsx(Clock, { size: 16, className: "df-debug-icon-current" });
+    case "pending":
+    default:
+      return /* @__PURE__ */ jsx(Clock, { size: 16, className: "df-debug-icon-pending" });
   }
-  return config2;
-}
-function informAboutDeprecation() {
-  console.warn(errorMessages.deprecation);
 }
-function throwError(errorMessages2, type) {
-  throw new Error(errorMessages2[type] || errorMessages2["default"]);
+function DebugStateBadge({
+  state,
+  conditionResult,
+  size = "sm"
+}) {
+  const iconSize = size === "sm" ? 12 : 14;
+  return /* @__PURE__ */ jsxs("span", { className: `df-debug-badge df-debug-badge-${state} df-debug-badge-${size}`, children: [
+    /* @__PURE__ */ jsx(StateIcon, { state }),
+    conditionResult !== void 0 && /* @__PURE__ */ jsx("span", { className: `df-debug-badge-condition ${conditionResult ? "df-debug-badge-condition-pass" : "df-debug-badge-condition-fail"}`, children: conditionResult ? /* @__PURE__ */ jsx(Check, { size: iconSize }) : /* @__PURE__ */ jsx(X, { size: iconSize }) })
+  ] });
 }
-var errorMessages = {
-  configIsRequired: "the configuration object is required",
-  configType: "the configuration object should be an object",
-  "default": "an unknown error accured in `@monaco-editor/loader` package",
-  deprecation: "Deprecation warning!\n    You are using deprecated way of configuration.\n\n    Instead of using\n      monaco.config({ urls: { monacoBase: '...' } })\n    use\n      monaco.config({ paths: { vs: '...' } })\n\n    For more please check the link https://github.com/suren-atoyan/monaco-loader#config\n  "
-};
-var errorHandler = curry(throwError)(errorMessages);
-var validators = {
-  config: validateConfig
-};
-var compose = function compose2() {
-  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
-    fns[_key] = arguments[_key];
-  }
-  return function(x) {
-    return fns.reduceRight(function(y, f) {
-      return f(y);
-    }, x);
-  };
-};
-function merge(target, source) {
-  Object.keys(source).forEach(function(key) {
-    if (source[key] instanceof Object) {
-      if (target[key]) {
-        Object.assign(source[key], merge(target[key], source[key]));
+function IntegratedDebugToolbar({
+  workflows,
+  payload,
+  autoExecute = false,
+  onExecutionComplete,
+  onExecutionError,
+  className = ""
+}) {
+  const {
+    state,
+    play,
+    pause,
+    stop,
+    reset,
+    stepForward,
+    stepBackward,
+    startExecution,
+    executeTrace,
+    setExecutionError,
+    runExecution,
+    isAtStart,
+    isAtEnd,
+    hasTrace,
+    totalSteps,
+    isEngineReady
+  } = useDebugger();
+  const { playbackState, currentStepIndex, isExecuting, executionError, trace } = state;
+  const lastExecutionRef = useRef(null);
+  const handleExecute = useCallback(async () => {
+    var _a, _b;
+    if (!isEngineReady || workflows.length === 0) return;
+    const workflowsJson = JSON.stringify(workflows);
+    const payloadJson = JSON.stringify(payload || {});
+    const current = { workflows: workflowsJson, payload: payloadJson };
+    if (((_a = lastExecutionRef.current) == null ? void 0 : _a.workflows) === current.workflows && ((_b = lastExecutionRef.current) == null ? void 0 : _b.payload) === current.payload) {
+      return;
+    }
+    startExecution();
+    try {
+      const result = await runExecution(workflows, payload || {});
+      if (result) {
+        executeTrace(result);
+        lastExecutionRef.current = current;
+        onExecutionComplete == null ? void 0 : onExecutionComplete(result);
       }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Execution failed";
+      setExecutionError(errorMessage);
+      onExecutionError == null ? void 0 : onExecutionError(errorMessage);
     }
-  });
-  return _objectSpread2$1(_objectSpread2$1({}, target), source);
-}
-var CANCELATION_MESSAGE = {
-  type: "cancelation",
-  msg: "operation is manually canceled"
-};
-function makeCancelable(promise) {
-  var hasCanceled_ = false;
-  var wrappedPromise = new Promise(function(resolve, reject) {
-    promise.then(function(val) {
-      return hasCanceled_ ? reject(CANCELATION_MESSAGE) : resolve(val);
-    });
-    promise["catch"](reject);
-  });
-  return wrappedPromise.cancel = function() {
-    return hasCanceled_ = true;
-  }, wrappedPromise;
-}
-var _excluded = ["monaco"];
-var _state$create = index.create({
-  config: config$1,
-  isInitialized: false,
-  resolve: null,
-  reject: null,
-  monaco: null
-}), _state$create2 = _slicedToArray(_state$create, 2), getState = _state$create2[0], setState = _state$create2[1];
-function config(globalConfig) {
-  var _validators$config = validators.config(globalConfig), monaco = _validators$config.monaco, config2 = _objectWithoutProperties(_validators$config, _excluded);
-  setState(function(state) {
-    return {
-      config: merge(state.config, config2),
-      monaco
-    };
-  });
-}
-function init() {
-  var state = getState(function(_ref) {
-    var monaco = _ref.monaco, isInitialized = _ref.isInitialized, resolve = _ref.resolve;
-    return {
-      monaco,
-      isInitialized,
-      resolve
-    };
-  });
-  if (!state.isInitialized) {
-    setState({
-      isInitialized: true
-    });
-    if (state.monaco) {
-      state.resolve(state.monaco);
-      return makeCancelable(wrapperPromise);
+  }, [
+    isEngineReady,
+    workflows,
+    payload,
+    startExecution,
+    runExecution,
+    executeTrace,
+    setExecutionError,
+    onExecutionComplete,
+    onExecutionError
+  ]);
+  const handleReset = useCallback(() => {
+    reset();
+    lastExecutionRef.current = null;
+  }, [reset]);
+  useEffect(() => {
+    if (!autoExecute || !isEngineReady || workflows.length === 0) return;
+    const timeoutId = setTimeout(() => {
+      handleExecute();
+    }, 500);
+    return () => clearTimeout(timeoutId);
+  }, [autoExecute, isEngineReady, workflows, payload]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      switch (e.key) {
+        case " ":
+          e.preventDefault();
+          if (playbackState === "playing") {
+            pause();
+          } else if (hasTrace) {
+            play();
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (hasTrace && !isAtEnd) {
+            stepForward();
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (hasTrace && !isAtStart) {
+            stepBackward();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          stop();
+          break;
+        case "r":
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            handleReset();
+          }
+          break;
+      }
+    },
+    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stop, stepForward, stepBackward, handleReset]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const getStatusIcon = () => {
+    var _a;
+    if (isExecuting) {
+      return /* @__PURE__ */ jsx(LoaderCircle, { size: 14, className: "df-debug-spin" });
     }
-    if (window.monaco && window.monaco.editor) {
-      storeMonacoInstance(window.monaco);
-      state.resolve(window.monaco);
-      return makeCancelable(wrapperPromise);
+    if (executionError) {
+      return /* @__PURE__ */ jsx(CircleX, { size: 14, className: "df-debug-toolbar-status-error" });
     }
-    compose(injectScripts, getMonacoLoaderScript)(configureLoader);
-  }
-  return makeCancelable(wrapperPromise);
+    if (hasTrace) {
+      const finalStep = trace == null ? void 0 : trace.steps[trace.steps.length - 1];
+      const hasErrors = ((_a = finalStep == null ? void 0 : finalStep.message) == null ? void 0 : _a.errors) && finalStep.message.errors.length > 0;
+      if (hasErrors) {
+        return /* @__PURE__ */ jsx(CircleAlert, { size: 14, className: "df-debug-toolbar-status-warning" });
+      }
+      return /* @__PURE__ */ jsx(CircleCheckBig, { size: 14, className: "df-debug-toolbar-status-success" });
+    }
+    return null;
+  };
+  const getStepText = () => {
+    if (isExecuting) {
+      return "Executing...";
+    }
+    if (!hasTrace) {
+      return "Ready";
+    }
+    if (currentStepIndex < 0) {
+      return "Ready";
+    }
+    return `Step ${currentStepIndex + 1} / ${totalSteps}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `df-debug-toolbar-integrated ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-toolbar-status", children: [
+      getStatusIcon(),
+      /* @__PURE__ */ jsx("span", { className: "df-debug-toolbar-step-text", children: getStepText() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "df-debug-toolbar-controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn",
+          onClick: stepBackward,
+          disabled: !hasTrace || isAtStart || isExecuting,
+          title: "Previous step (Left Arrow)",
+          children: /* @__PURE__ */ jsx(SkipBack, { size: 14 })
+        }
+      ),
+      playbackState === "playing" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn df-debug-toolbar-btn-primary",
+          onClick: pause,
+          disabled: !hasTrace || isExecuting,
+          title: "Pause (Space)",
+          children: /* @__PURE__ */ jsx(Pause, { size: 14 })
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn df-debug-toolbar-btn-primary",
+          onClick: play,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Play (Space)",
+          children: /* @__PURE__ */ jsx(Play, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn",
+          onClick: stepForward,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Next step (Right Arrow)",
+          children: /* @__PURE__ */ jsx(SkipForward, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn",
+          onClick: stop,
+          disabled: !hasTrace || isExecuting,
+          title: "Stop (Escape)",
+          children: /* @__PURE__ */ jsx(Square, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "df-debug-toolbar-actions", children: hasTrace ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "df-debug-toolbar-btn-action df-debug-toolbar-btn-reset",
+        onClick: handleReset,
+        disabled: isExecuting,
+        title: "Reset (Ctrl+R)",
+        children: [
+          /* @__PURE__ */ jsx(RotateCcw, { size: 12 }),
+          /* @__PURE__ */ jsx("span", { children: "Reset" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "df-debug-toolbar-btn-action df-debug-toolbar-btn-run",
+        onClick: handleExecute,
+        disabled: !isEngineReady || isExecuting || workflows.length === 0,
+        title: "Run workflow",
+        children: [
+          isExecuting ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "df-debug-spin" }) : /* @__PURE__ */ jsx(Play, { size: 12 }),
+          /* @__PURE__ */ jsx("span", { children: isExecuting ? "Running..." : "Run" })
+        ]
+      }
+    ) })
+  ] });
 }
-function injectScripts(script) {
-  return document.body.appendChild(script);
+function SearchInput({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search...",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `df-search-input ${className}`, children: [
+    /* @__PURE__ */ jsx(Search, { className: "df-search-icon", size: 16 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "df-search-field"
+      }
+    ),
+    value && onClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClear,
+        className: "df-search-clear",
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ jsx(X, { size: 14 })
+      }
+    )
+  ] });
 }
-function createScript(src) {
-  var script = document.createElement("script");
-  return src && (script.src = src), script;
+function JsonViewer({
+  data,
+  initialExpanded = false,
+  maxStringLength = 50,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `df-json-viewer ${className}`, children: /* @__PURE__ */ jsx(
+    JsonNode,
+    {
+      data,
+      initialExpanded,
+      maxStringLength
+    }
+  ) });
 }
-function getMonacoLoaderScript(configureLoader2) {
-  var state = getState(function(_ref2) {
-    var config2 = _ref2.config, reject = _ref2.reject;
-    return {
-      config: config2,
-      reject
-    };
-  });
-  var loaderScript = createScript("".concat(state.config.paths.vs, "/loader.js"));
-  loaderScript.onload = function() {
-    return configureLoader2();
+function JsonNode({
+  data,
+  initialExpanded,
+  maxStringLength,
+  keyName,
+  isLast = true
+}) {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const renderValue = () => {
+    if (data === null) {
+      return /* @__PURE__ */ jsx("span", { className: "df-json-null", children: "null" });
+    }
+    if (data === void 0) {
+      return /* @__PURE__ */ jsx("span", { className: "df-json-undefined", children: "undefined" });
+    }
+    if (typeof data === "boolean") {
+      return /* @__PURE__ */ jsx("span", { className: "df-json-boolean", children: data.toString() });
+    }
+    if (typeof data === "number") {
+      return /* @__PURE__ */ jsx("span", { className: "df-json-number", children: data });
+    }
+    if (typeof data === "string") {
+      const display = data.length > maxStringLength ? `${data.slice(0, maxStringLength)}...` : data;
+      return /* @__PURE__ */ jsxs("span", { className: "df-json-string", children: [
+        '"',
+        display,
+        '"'
+      ] });
+    }
+    if (Array.isArray(data)) {
+      if (data.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "[]" });
+      }
+      return /* @__PURE__ */ jsxs("span", { className: "df-json-array", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "df-json-toggle",
+            children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "[" }),
+        !expanded && /* @__PURE__ */ jsxs("span", { className: "df-json-preview", children: [
+          data.length,
+          " item",
+          data.length !== 1 ? "s" : ""
+        ] }),
+        expanded && /* @__PURE__ */ jsx("div", { className: "df-json-children", children: data.map((item, index2) => /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            data: item,
+            initialExpanded: false,
+            maxStringLength,
+            isLast: index2 === data.length - 1
+          },
+          index2
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "]" })
+      ] });
+    }
+    if (typeof data === "object") {
+      const entries = Object.entries(data);
+      if (entries.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "{}" });
+      }
+      return /* @__PURE__ */ jsxs("span", { className: "df-json-object", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "df-json-toggle",
+            children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "{" }),
+        !expanded && /* @__PURE__ */ jsxs("span", { className: "df-json-preview", children: [
+          entries.length,
+          " key",
+          entries.length !== 1 ? "s" : ""
+        ] }),
+        expanded && /* @__PURE__ */ jsx("div", { className: "df-json-children", children: entries.map(([key, value], index2) => /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            keyName: key,
+            data: value,
+            initialExpanded: false,
+            maxStringLength,
+            isLast: index2 === entries.length - 1
+          },
+          key
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "df-json-bracket", children: "}" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("span", { children: String(data) });
   };
-  loaderScript.onerror = state.reject;
-  return loaderScript;
+  return /* @__PURE__ */ jsxs("div", { className: "df-json-node", children: [
+    keyName !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "df-json-key", children: [
+        '"',
+        keyName,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "df-json-colon", children: ": " })
+    ] }),
+    renderValue(),
+    !isLast && /* @__PURE__ */ jsx("span", { className: "df-json-comma", children: "," })
+  ] });
 }
-function configureLoader() {
-  var state = getState(function(_ref3) {
-    var config2 = _ref3.config, resolve = _ref3.resolve, reject = _ref3.reject;
-    return {
-      config: config2,
-      resolve,
-      reject
-    };
-  });
-  var require2 = window.require;
-  require2.config(state.config);
-  require2(["vs/editor/editor.main"], function(loaded) {
-    var monaco = loaded.m || loaded;
-    storeMonacoInstance(monaco);
-    state.resolve(monaco);
-  }, function(error) {
-    state.reject(error);
-  });
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-function storeMonacoInstance(monaco) {
-  if (!getState().monaco) {
-    setState({
-      monaco
-    });
-  }
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
-function __getMonacoInstance() {
-  return getState(function(_ref4) {
-    var monaco = _ref4.monaco;
-    return monaco;
-  });
+function _defineProperty$1(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
 }
-var wrapperPromise = new Promise(function(resolve, reject) {
-  return setState({
-    resolve,
-    reject
-  });
-});
-var loader = {
-  config,
-  init,
-  __getMonacoInstance
-};
-var le = { wrapper: { display: "flex", position: "relative", textAlign: "initial" }, fullWidth: { width: "100%" }, hide: { display: "none" } }, v = le;
-var ae = { container: { display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" } }, Y = ae;
-function Me({ children: e }) {
-  return require$$0.createElement("div", { style: Y.container }, e);
+function _iterableToArrayLimit(r, l2) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e, n, i, u, a = [], f = true, o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l2) ;
+      else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l2); f = true) ;
+    } catch (r2) {
+      o = true, n = r2;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
 }
-var Z = Me;
-var $ = Z;
-function Ee({ width: e, height: r, isEditorReady: n, loading: t, _ref: a, className: m, wrapperProps: E }) {
-  return require$$0.createElement("section", { style: { ...v.wrapper, width: e, height: r }, ...E }, !n && require$$0.createElement($, null, t), require$$0.createElement("div", { ref: a, style: { ...v.fullWidth, ...!n && v.hide }, className: m }));
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-var ee = Ee;
-var H = memo(ee);
-function Ce(e) {
-  useEffect(e, []);
+function ownKeys$1(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
 }
-var k = Ce;
-function he(e, r, n = true) {
-  let t = useRef(true);
-  useEffect(t.current || !n ? () => {
-    t.current = false;
-  } : e, r);
+function _objectSpread2$1(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
+      _defineProperty$1(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
 }
-var l = he;
-function D() {
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o, r, i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
 }
-function h(e, r, n, t) {
-  return De(e, t) || be(e, r, n, t);
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
 }
-function De(e, r) {
-  return e.editor.getModel(te(e, r));
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
-function be(e, r, n, t) {
-  return e.editor.createModel(r, n, t ? te(e, t) : void 0);
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
 }
-function te(e, r) {
-  return e.Uri.parse(r);
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
 }
-function Oe({ original: e, modified: r, language: n, originalLanguage: t, modifiedLanguage: a, originalModelPath: m, modifiedModelPath: E, keepCurrentOriginalModel: g = false, keepCurrentModifiedModel: N = false, theme: x = "light", loading: P = "Loading...", options: y = {}, height: V = "100%", width: z = "100%", className: F, wrapperProps: j = {}, beforeMount: A = D, onMount: q = D }) {
-  let [M, O] = useState(false), [T, s] = useState(true), u = useRef(null), c = useRef(null), w = useRef(null), d = useRef(q), o = useRef(A), b = useRef(false);
-  k(() => {
-    let i = loader.init();
-    return i.then((f) => (c.current = f) && s(false)).catch((f) => (f == null ? void 0 : f.type) !== "cancelation" && console.error("Monaco initialization: error:", f)), () => u.current ? I() : i.cancel();
-  }), l(() => {
-    if (u.current && c.current) {
-      let i = u.current.getOriginalEditor(), f = h(c.current, e || "", t || n || "text", m || "");
-      f !== i.getModel() && i.setModel(f);
-    }
-  }, [m], M), l(() => {
-    if (u.current && c.current) {
-      let i = u.current.getModifiedEditor(), f = h(c.current, r || "", a || n || "text", E || "");
-      f !== i.getModel() && i.setModel(f);
-    }
-  }, [E], M), l(() => {
-    let i = u.current.getModifiedEditor();
-    i.getOption(c.current.editor.EditorOption.readOnly) ? i.setValue(r || "") : r !== i.getValue() && (i.executeEdits("", [{ range: i.getModel().getFullModelRange(), text: r || "", forceMoveMarkers: true }]), i.pushUndoStop());
-  }, [r], M), l(() => {
-    var _a, _b;
-    (_b = (_a = u.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.original.setValue(e || "");
-  }, [e], M), l(() => {
-    let { original: i, modified: f } = u.current.getModel();
-    c.current.editor.setModelLanguage(i, t || n || "text"), c.current.editor.setModelLanguage(f, a || n || "text");
-  }, [n, t, a], M), l(() => {
-    var _a;
-    (_a = c.current) == null ? void 0 : _a.editor.setTheme(x);
-  }, [x], M), l(() => {
-    var _a;
-    (_a = u.current) == null ? void 0 : _a.updateOptions(y);
-  }, [y], M);
-  let L = useCallback(() => {
-    var _a;
-    if (!c.current) return;
-    o.current(c.current);
-    let i = h(c.current, e || "", t || n || "text", m || ""), f = h(c.current, r || "", a || n || "text", E || "");
-    (_a = u.current) == null ? void 0 : _a.setModel({ original: i, modified: f });
-  }, [n, r, a, e, t, m, E]), U = useCallback(() => {
-    var _a;
-    !b.current && w.current && (u.current = c.current.editor.createDiffEditor(w.current, { automaticLayout: true, ...y }), L(), (_a = c.current) == null ? void 0 : _a.editor.setTheme(x), O(true), b.current = true);
-  }, [y, x, L]);
-  useEffect(() => {
-    M && d.current(u.current, c.current);
-  }, [M]), useEffect(() => {
-    !T && !M && U();
-  }, [T, M, U]);
-  function I() {
-    var _a, _b, _c, _d;
-    let i = (_a = u.current) == null ? void 0 : _a.getModel();
-    g || ((_b = i == null ? void 0 : i.original) == null ? void 0 : _b.dispose()), N || ((_c = i == null ? void 0 : i.modified) == null ? void 0 : _c.dispose()), (_d = u.current) == null ? void 0 : _d.dispose();
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return require$$0.createElement(H, { width: z, height: V, isEditorReady: M, loading: P, _ref: w, className: F, wrapperProps: j });
 }
-var ie = Oe;
-memo(ie);
-function He(e) {
-  let r = useRef();
-  return useEffect(() => {
-    r.current = e;
-  }, [e]), r.current;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
 }
-var se = He;
-var _ = /* @__PURE__ */ new Map();
-function Ve({ defaultValue: e, defaultLanguage: r, defaultPath: n, value: t, language: a, path: m, theme: E = "light", line: g, loading: N = "Loading...", options: x = {}, overrideServices: P = {}, saveViewState: y = true, keepCurrentModel: V = false, width: z = "100%", height: F = "100%", className: j, wrapperProps: A = {}, beforeMount: q = D, onMount: M = D, onChange: O, onValidate: T = D }) {
-  let [s, u] = useState(false), [c, w] = useState(true), d = useRef(null), o = useRef(null), b = useRef(null), L = useRef(M), U = useRef(q), I = useRef(), i = useRef(t), f = se(m), Q = useRef(false), B = useRef(false);
-  k(() => {
-    let p = loader.init();
-    return p.then((R) => (d.current = R) && w(false)).catch((R) => (R == null ? void 0 : R.type) !== "cancelation" && console.error("Monaco initialization: error:", R)), () => o.current ? pe() : p.cancel();
-  }), l(() => {
-    var _a, _b, _c, _d;
-    let p = h(d.current, e || t || "", r || a || "", m || n || "");
-    p !== ((_a = o.current) == null ? void 0 : _a.getModel()) && (y && _.set(f, (_b = o.current) == null ? void 0 : _b.saveViewState()), (_c = o.current) == null ? void 0 : _c.setModel(p), y && ((_d = o.current) == null ? void 0 : _d.restoreViewState(_.get(m))));
-  }, [m], s), l(() => {
-    var _a;
-    (_a = o.current) == null ? void 0 : _a.updateOptions(x);
-  }, [x], s), l(() => {
-    !o.current || t === void 0 || (o.current.getOption(d.current.editor.EditorOption.readOnly) ? o.current.setValue(t) : t !== o.current.getValue() && (B.current = true, o.current.executeEdits("", [{ range: o.current.getModel().getFullModelRange(), text: t, forceMoveMarkers: true }]), o.current.pushUndoStop(), B.current = false));
-  }, [t], s), l(() => {
-    var _a, _b;
-    let p = (_a = o.current) == null ? void 0 : _a.getModel();
-    p && a && ((_b = d.current) == null ? void 0 : _b.editor.setModelLanguage(p, a));
-  }, [a], s), l(() => {
-    var _a;
-    g !== void 0 && ((_a = o.current) == null ? void 0 : _a.revealLine(g));
-  }, [g], s), l(() => {
-    var _a;
-    (_a = d.current) == null ? void 0 : _a.editor.setTheme(E);
-  }, [E], s);
-  let X2 = useCallback(() => {
-    var _a;
-    if (!(!b.current || !d.current) && !Q.current) {
-      U.current(d.current);
-      let p = m || n, R = h(d.current, t || e || "", r || a || "", p || "");
-      o.current = (_a = d.current) == null ? void 0 : _a.editor.create(b.current, { model: R, automaticLayout: true, ...x }, P), y && o.current.restoreViewState(_.get(p)), d.current.editor.setTheme(E), g !== void 0 && o.current.revealLine(g), u(true), Q.current = true;
-    }
-  }, [e, r, n, t, a, m, x, P, y, E, g]);
-  useEffect(() => {
-    s && L.current(o.current, d.current);
-  }, [s]), useEffect(() => {
-    !c && !s && X2();
-  }, [c, s, X2]), i.current = t, useEffect(() => {
-    var _a, _b;
-    s && O && ((_a = I.current) == null ? void 0 : _a.dispose(), I.current = (_b = o.current) == null ? void 0 : _b.onDidChangeModelContent((p) => {
-      B.current || O(o.current.getValue(), p);
-    }));
-  }, [s, O]), useEffect(() => {
-    if (s) {
-      let p = d.current.editor.onDidChangeMarkers((R) => {
-        var _a;
-        let G = (_a = o.current.getModel()) == null ? void 0 : _a.uri;
-        if (G && R.find((J) => J.path === G.path)) {
-          let J = d.current.editor.getModelMarkers({ resource: G });
-          T == null ? void 0 : T(J);
-        }
+function ownKeys(object2, enumerableOnly) {
+  var keys = Object.keys(object2);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object2);
+    if (enumerableOnly) symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function(key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
-      return () => {
-        p == null ? void 0 : p.dispose();
-      };
     }
-    return () => {
-    };
-  }, [s, T]);
-  function pe() {
-    var _a, _b;
-    (_a = I.current) == null ? void 0 : _a.dispose(), V ? y && _.set(m, o.current.saveViewState()) : (_b = o.current.getModel()) == null ? void 0 : _b.dispose(), o.current.dispose();
   }
-  return require$$0.createElement(H, { width: z, height: F, isEditorReady: s, loading: N, _ref: b, className: j, wrapperProps: A });
+  return target;
 }
-var fe = Ve;
-var de = memo(fe);
-var Ft = de;
-function findPathLineNumbers(jsonString, paths) {
-  if (!paths || paths.length === 0) return [];
-  const lines = jsonString.split("\n");
-  const lineNumbers = [];
-  for (const path of paths) {
-    const pathParts = path.split(".");
-    const lastKey = pathParts[pathParts.length - 1];
-    const keyPattern = new RegExp(`^\\s*"${lastKey}"\\s*:`);
-    for (let i = 0; i < lines.length; i++) {
-      if (keyPattern.test(lines[i])) {
-        if (pathParts.length === 1) {
-          lineNumbers.push(i + 1);
-        } else {
-          let matchedParents = 0;
-          for (let j = i - 1; j >= 0 && matchedParents < pathParts.length - 1; j--) {
-            const parentKey = pathParts[pathParts.length - 2 - matchedParents];
-            const parentPattern = new RegExp(`^\\s*"${parentKey}"\\s*:`);
-            if (parentPattern.test(lines[j])) {
-              matchedParents++;
-            }
-          }
-          if (matchedParents >= Math.min(pathParts.length - 1, 2)) {
-            lineNumbers.push(i + 1);
-          }
-        }
-      }
-    }
+function compose$1() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
   }
-  return [...new Set(lineNumbers)];
+  return function(x) {
+    return fns.reduceRight(function(y, f) {
+      return f(y);
+    }, x);
+  };
 }
-const defineThemes = (monaco) => {
-  monaco.editor.defineTheme("vscode-dark", {
-    base: "vs-dark",
-    inherit: true,
-    rules: [
-      { token: "string.key.json", foreground: "9CDCFE" },
-      { token: "string.value.json", foreground: "CE9178" },
-      { token: "number", foreground: "B5CEA8" },
-      { token: "keyword", foreground: "569CD6" },
-      { token: "delimiter", foreground: "D4D4D4" }
-    ],
-    colors: {
-      "editor.background": "#1e1e1e",
-      "editor.foreground": "#d4d4d4",
-      "editor.lineHighlightBackground": "#2d2d2d",
-      "editor.selectionBackground": "#264f78",
-      "editorCursor.foreground": "#aeafad",
-      "editorLineNumber.foreground": "#858585",
-      "editorLineNumber.activeForeground": "#c6c6c6",
-      "editorIndentGuide.background": "#404040",
-      "editorIndentGuide.activeBackground": "#707070",
-      "editor.selectionHighlightBackground": "#3a3d41",
-      "editorBracketMatch.background": "#0064001a",
-      "editorBracketMatch.border": "#888888",
-      "editorGutter.background": "#1e1e1e",
-      "scrollbarSlider.background": "#79797966",
-      "scrollbarSlider.hoverBackground": "#646464b3",
-      "scrollbarSlider.activeBackground": "#bfbfbf66",
-      "minimap.background": "#1e1e1e"
-    }
-  });
-  monaco.editor.defineTheme("vscode-light", {
-    base: "vs",
-    inherit: true,
-    rules: [
-      { token: "string.key.json", foreground: "0451A5" },
-      { token: "string.value.json", foreground: "A31515" },
-      { token: "number", foreground: "098658" },
-      { token: "keyword", foreground: "0000FF" },
-      { token: "delimiter", foreground: "000000" }
-    ],
-    colors: {
-      "editor.background": "#ffffff",
-      "editor.foreground": "#000000",
-      "editor.lineHighlightBackground": "#f5f5f5",
-      "editor.selectionBackground": "#add6ff",
-      "editorCursor.foreground": "#000000",
-      "editorLineNumber.foreground": "#999999",
-      "editorLineNumber.activeForeground": "#000000",
-      "editorIndentGuide.background": "#d3d3d3",
-      "editorIndentGuide.activeBackground": "#939393",
-      "editor.selectionHighlightBackground": "#add6ff4d",
-      "editorBracketMatch.background": "#0064001a",
-      "editorBracketMatch.border": "#b9b9b9",
-      "editorGutter.background": "#ffffff",
-      "scrollbarSlider.background": "#64646466",
-      "scrollbarSlider.hoverBackground": "#646464b3",
-      "scrollbarSlider.activeBackground": "#00000099",
-      "minimap.background": "#ffffff"
+function curry$1(fn) {
+  return function curried() {
+    var _this = this;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
+    return args.length >= fn.length ? fn.apply(this, args) : function() {
+      for (var _len3 = arguments.length, nextArgs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        nextArgs[_key3] = arguments[_key3];
+      }
+      return curried.apply(_this, [].concat(args, nextArgs));
+    };
+  };
+}
+function isObject$1(value) {
+  return {}.toString.call(value).includes("Object");
+}
+function isEmpty(obj) {
+  return !Object.keys(obj).length;
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function hasOwnProperty(object2, property) {
+  return Object.prototype.hasOwnProperty.call(object2, property);
+}
+function validateChanges(initial, changes) {
+  if (!isObject$1(changes)) errorHandler$1("changeType");
+  if (Object.keys(changes).some(function(field) {
+    return !hasOwnProperty(initial, field);
+  })) errorHandler$1("changeField");
+  return changes;
+}
+function validateSelector(selector2) {
+  if (!isFunction(selector2)) errorHandler$1("selectorType");
+}
+function validateHandler(handler) {
+  if (!(isFunction(handler) || isObject$1(handler))) errorHandler$1("handlerType");
+  if (isObject$1(handler) && Object.values(handler).some(function(_handler) {
+    return !isFunction(_handler);
+  })) errorHandler$1("handlersType");
+}
+function validateInitial(initial) {
+  if (!initial) errorHandler$1("initialIsRequired");
+  if (!isObject$1(initial)) errorHandler$1("initialType");
+  if (isEmpty(initial)) errorHandler$1("initialContent");
+}
+function throwError$1(errorMessages2, type) {
+  throw new Error(errorMessages2[type] || errorMessages2["default"]);
+}
+var errorMessages$1 = {
+  initialIsRequired: "initial state is required",
+  initialType: "initial state should be an object",
+  initialContent: "initial state shouldn't be an empty object",
+  handlerType: "handler should be an object or a function",
+  handlersType: "all handlers should be a functions",
+  selectorType: "selector should be a function",
+  changeType: "provided value of changes should be an object",
+  changeField: 'it seams you want to change a field in the state which is not specified in the "initial" state',
+  "default": "an unknown error accured in `state-local` package"
+};
+var errorHandler$1 = curry$1(throwError$1)(errorMessages$1);
+var validators$1 = {
+  changes: validateChanges,
+  selector: validateSelector,
+  handler: validateHandler,
+  initial: validateInitial
+};
+function create(initial) {
+  var handler = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  validators$1.initial(initial);
+  validators$1.handler(handler);
+  var state = {
+    current: initial
+  };
+  var didUpdate = curry$1(didStateUpdate)(state, handler);
+  var update = curry$1(updateState)(state);
+  var validate = curry$1(validators$1.changes)(initial);
+  var getChanges = curry$1(extractChanges)(state);
+  function getState2() {
+    var selector2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(state2) {
+      return state2;
+    };
+    validators$1.selector(selector2);
+    return selector2(state.current);
+  }
+  function setState2(causedChanges) {
+    compose$1(didUpdate, update, validate, getChanges)(causedChanges);
+  }
+  return [getState2, setState2];
+}
+function extractChanges(state, causedChanges) {
+  return isFunction(causedChanges) ? causedChanges(state.current) : causedChanges;
+}
+function updateState(state, changes) {
+  state.current = _objectSpread2(_objectSpread2({}, state.current), changes);
+  return changes;
+}
+function didStateUpdate(state, handler, changes) {
+  isFunction(handler) ? handler(state.current) : Object.keys(changes).forEach(function(field) {
+    var _handler$field;
+    return (_handler$field = handler[field]) === null || _handler$field === void 0 ? void 0 : _handler$field.call(handler, state.current[field]);
   });
+  return changes;
+}
+var index = {
+  create
 };
-function JsonEditor({
-  value,
-  onChange,
-  readOnly = false,
-  className = "",
-  theme = "dark",
-  onCursorChange,
-  highlightedPaths
-}) {
-  const editorRef = useRef(null);
-  const decorationsRef = useRef([]);
-  const handleEditorMount = useCallback((editor, monaco) => {
-    editorRef.current = editor;
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-      schemas: [],
-      allowComments: false,
-      trailingCommas: "error"
-    });
-    if (onCursorChange) {
-      editor.onDidChangeCursorPosition((e) => {
-        onCursorChange(e.position.lineNumber, e.position.column);
-      });
-    }
-    if (!readOnly) {
-      editor.focus();
+var config$1 = {
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs"
+  }
+};
+function curry(fn) {
+  return function curried() {
+    var _this = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-  }, [onCursorChange, readOnly]);
-  useEffect(() => {
-    if (!editorRef.current || !highlightedPaths || highlightedPaths.length === 0) {
-      if (editorRef.current && decorationsRef.current.length > 0) {
-        decorationsRef.current = editorRef.current.deltaDecorations(decorationsRef.current, []);
+    return args.length >= fn.length ? fn.apply(this, args) : function() {
+      for (var _len2 = arguments.length, nextArgs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        nextArgs[_key2] = arguments[_key2];
+      }
+      return curried.apply(_this, [].concat(args, nextArgs));
+    };
+  };
+}
+function isObject(value) {
+  return {}.toString.call(value).includes("Object");
+}
+function validateConfig(config2) {
+  if (!config2) errorHandler("configIsRequired");
+  if (!isObject(config2)) errorHandler("configType");
+  if (config2.urls) {
+    informAboutDeprecation();
+    return {
+      paths: {
+        vs: config2.urls.monacoBase
+      }
+    };
+  }
+  return config2;
+}
+function informAboutDeprecation() {
+  console.warn(errorMessages.deprecation);
+}
+function throwError(errorMessages2, type) {
+  throw new Error(errorMessages2[type] || errorMessages2["default"]);
+}
+var errorMessages = {
+  configIsRequired: "the configuration object is required",
+  configType: "the configuration object should be an object",
+  "default": "an unknown error accured in `@monaco-editor/loader` package",
+  deprecation: "Deprecation warning!\n    You are using deprecated way of configuration.\n\n    Instead of using\n      monaco.config({ urls: { monacoBase: '...' } })\n    use\n      monaco.config({ paths: { vs: '...' } })\n\n    For more please check the link https://github.com/suren-atoyan/monaco-loader#config\n  "
+};
+var errorHandler = curry(throwError)(errorMessages);
+var validators = {
+  config: validateConfig
+};
+var compose = function compose2() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+  return function(x) {
+    return fns.reduceRight(function(y, f) {
+      return f(y);
+    }, x);
+  };
+};
+function merge(target, source) {
+  Object.keys(source).forEach(function(key) {
+    if (source[key] instanceof Object) {
+      if (target[key]) {
+        Object.assign(source[key], merge(target[key], source[key]));
       }
-      return;
-    }
-    const lineNumbers = findPathLineNumbers(value, highlightedPaths);
-    if (lineNumbers.length > 0) {
-      const decorations = lineNumbers.map((lineNumber) => ({
-        range: {
-          startLineNumber: lineNumber,
-          startColumn: 1,
-          endLineNumber: lineNumber,
-          endColumn: 1
-        },
-        options: {
-          isWholeLine: true,
-          className: "df-highlighted-line",
-          glyphMarginClassName: "df-highlighted-glyph",
-          overviewRuler: {
-            color: theme === "dark" ? "#4ec9b0" : "#388a34",
-            position: 1
-            // Left
-          }
-        }
-      }));
-      decorationsRef.current = editorRef.current.deltaDecorations(
-        decorationsRef.current,
-        decorations
-      );
-    } else {
-      decorationsRef.current = editorRef.current.deltaDecorations(decorationsRef.current, []);
     }
-  }, [value, highlightedPaths, theme]);
-  const handleChange = useCallback((newValue) => {
-    onChange(newValue || "");
-  }, [onChange]);
-  return /* @__PURE__ */ jsx("div", { className: `df-monaco-editor-wrapper ${className}`, children: /* @__PURE__ */ jsx(
-    Ft,
-    {
-      height: "100%",
-      defaultLanguage: "json",
-      value,
-      onChange: handleChange,
-      onMount: handleEditorMount,
-      beforeMount: defineThemes,
-      theme: theme === "dark" ? "vscode-dark" : "vscode-light",
-      options: {
-        readOnly,
-        minimap: { enabled: false },
-        fontSize: 13,
-        fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
-        lineHeight: 20,
-        tabSize: 2,
-        insertSpaces: true,
-        automaticLayout: true,
-        scrollBeyondLastLine: false,
-        wordWrap: "on",
-        wrappingIndent: "indent",
-        folding: true,
-        foldingStrategy: "indentation",
-        showFoldingControls: "mouseover",
-        bracketPairColorization: { enabled: true },
-        guides: {
-          bracketPairs: false,
-          indentation: false,
-          highlightActiveBracketPair: true,
-          highlightActiveIndentation: false
-        },
-        renderLineHighlight: readOnly ? "none" : "line",
-        selectOnLineNumbers: true,
-        roundedSelection: true,
-        cursorBlinking: "smooth",
-        cursorSmoothCaretAnimation: "on",
-        smoothScrolling: true,
-        padding: { top: 8, bottom: 8 },
-        scrollbar: {
-          vertical: "auto",
-          horizontal: "auto",
-          verticalScrollbarSize: 10,
-          horizontalScrollbarSize: 10
-        },
-        overviewRulerBorder: false,
-        hideCursorInOverviewRuler: true,
-        contextmenu: true,
-        quickSuggestions: false,
-        suggestOnTriggerCharacters: false,
-        acceptSuggestionOnEnter: "off",
-        formatOnPaste: true,
-        formatOnType: false,
-        glyphMargin: highlightedPaths && highlightedPaths.length > 0
-      }
-    }
-  ) });
+  });
+  return _objectSpread2$1(_objectSpread2$1({}, target), source);
 }
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
-  }
-  render() {
-    var _a;
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-      return /* @__PURE__ */ jsx("div", { className: "df-error-boundary", children: /* @__PURE__ */ jsxs("div", { className: "df-error-boundary-content", children: [
-        /* @__PURE__ */ jsx("h3", { className: "df-error-boundary-title", children: "Something went wrong" }),
-        /* @__PURE__ */ jsx("p", { className: "df-error-boundary-message", children: ((_a = this.state.error) == null ? void 0 : _a.message) || "An unexpected error occurred" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "df-error-boundary-button",
-            onClick: () => this.setState({ hasError: false, error: null }),
-            children: "Try again"
-          }
-        )
-      ] }) });
+var CANCELATION_MESSAGE = {
+  type: "cancelation",
+  msg: "operation is manually canceled"
+};
+function makeCancelable(promise) {
+  var hasCanceled_ = false;
+  var wrappedPromise = new Promise(function(resolve, reject) {
+    promise.then(function(val) {
+      return hasCanceled_ ? reject(CANCELATION_MESSAGE) : resolve(val);
+    });
+    promise["catch"](reject);
+  });
+  return wrappedPromise.cancel = function() {
+    return hasCanceled_ = true;
+  }, wrappedPromise;
+}
+var _excluded = ["monaco"];
+var _state$create = index.create({
+  config: config$1,
+  isInitialized: false,
+  resolve: null,
+  reject: null,
+  monaco: null
+}), _state$create2 = _slicedToArray(_state$create, 2), getState = _state$create2[0], setState = _state$create2[1];
+function config(globalConfig) {
+  var _validators$config = validators.config(globalConfig), monaco = _validators$config.monaco, config2 = _objectWithoutProperties(_validators$config, _excluded);
+  setState(function(state) {
+    return {
+      config: merge(state.config, config2),
+      monaco
+    };
+  });
+}
+function init() {
+  var state = getState(function(_ref) {
+    var monaco = _ref.monaco, isInitialized = _ref.isInitialized, resolve = _ref.resolve;
+    return {
+      monaco,
+      isInitialized,
+      resolve
+    };
+  });
+  if (!state.isInitialized) {
+    setState({
+      isInitialized: true
+    });
+    if (state.monaco) {
+      state.resolve(state.monaco);
+      return makeCancelable(wrapperPromise);
     }
-    return this.props.children;
+    if (window.monaco && window.monaco.editor) {
+      storeMonacoInstance(window.monaco);
+      state.resolve(window.monaco);
+      return makeCancelable(wrapperPromise);
+    }
+    compose(injectScripts, getMonacoLoaderScript)(configureLoader);
   }
+  return makeCancelable(wrapperPromise);
 }
-function getSelectionInfo(selection2) {
-  switch (selection2.type) {
-    case "workflow-condition":
-      return {
-        title: "Workflow Condition",
-        subtitle: selection2.workflow.name
-      };
-    case "task":
-      return {
-        title: selection2.task.name,
-        subtitle: `${selection2.workflow.name} / ${selection2.task.function.name}`
-      };
-    case "task-condition":
-      return {
-        title: "Task Condition",
-        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
-      };
-    case "mapping":
-      return {
-        title: selection2.mapping.path,
-        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
-      };
-    case "validation-rule":
-      return {
-        title: selection2.rule.message,
-        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
-      };
-    default:
-      return null;
+function injectScripts(script) {
+  return document.body.appendChild(script);
+}
+function createScript(src) {
+  var script = document.createElement("script");
+  return src && (script.src = src), script;
+}
+function getMonacoLoaderScript(configureLoader2) {
+  var state = getState(function(_ref2) {
+    var config2 = _ref2.config, reject = _ref2.reject;
+    return {
+      config: config2,
+      reject
+    };
+  });
+  var loaderScript = createScript("".concat(state.config.paths.vs, "/loader.js"));
+  loaderScript.onload = function() {
+    return configureLoader2();
+  };
+  loaderScript.onerror = state.reject;
+  return loaderScript;
+}
+function configureLoader() {
+  var state = getState(function(_ref3) {
+    var config2 = _ref3.config, resolve = _ref3.resolve, reject = _ref3.reject;
+    return {
+      config: config2,
+      resolve,
+      reject
+    };
+  });
+  var require2 = window.require;
+  require2.config(state.config);
+  require2(["vs/editor/editor.main"], function(loaded) {
+    var monaco = loaded.m || loaded;
+    storeMonacoInstance(monaco);
+    state.resolve(monaco);
+  }, function(error) {
+    state.reject(error);
+  });
+}
+function storeMonacoInstance(monaco) {
+  if (!getState().monaco) {
+    setState({
+      monaco
+    });
+  }
+}
+function __getMonacoInstance() {
+  return getState(function(_ref4) {
+    var monaco = _ref4.monaco;
+    return monaco;
+  });
+}
+var wrapperPromise = new Promise(function(resolve, reject) {
+  return setState({
+    resolve,
+    reject
+  });
+});
+var loader = {
+  config,
+  init,
+  __getMonacoInstance
+};
+var le = { wrapper: { display: "flex", position: "relative", textAlign: "initial" }, fullWidth: { width: "100%" }, hide: { display: "none" } }, v = le;
+var ae = { container: { display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" } }, Y = ae;
+function Me({ children: e }) {
+  return require$$0.createElement("div", { style: Y.container }, e);
+}
+var Z = Me;
+var $ = Z;
+function Ee({ width: e, height: r, isEditorReady: n, loading: t, _ref: a, className: m, wrapperProps: E }) {
+  return require$$0.createElement("section", { style: { ...v.wrapper, width: e, height: r }, ...E }, !n && require$$0.createElement($, null, t), require$$0.createElement("div", { ref: a, style: { ...v.fullWidth, ...!n && v.hide }, className: m }));
+}
+var ee = Ee;
+var H = memo(ee);
+function Ce(e) {
+  useEffect(e, []);
+}
+var k = Ce;
+function he(e, r, n = true) {
+  let t = useRef(true);
+  useEffect(t.current || !n ? () => {
+    t.current = false;
+  } : e, r);
+}
+var l = he;
+function D() {
+}
+function h(e, r, n, t) {
+  return De(e, t) || be(e, r, n, t);
+}
+function De(e, r) {
+  return e.editor.getModel(te(e, r));
+}
+function be(e, r, n, t) {
+  return e.editor.createModel(r, n, t ? te(e, t) : void 0);
+}
+function te(e, r) {
+  return e.Uri.parse(r);
+}
+function Oe({ original: e, modified: r, language: n, originalLanguage: t, modifiedLanguage: a, originalModelPath: m, modifiedModelPath: E, keepCurrentOriginalModel: g = false, keepCurrentModifiedModel: N = false, theme: x = "light", loading: P = "Loading...", options: y = {}, height: V = "100%", width: z = "100%", className: F, wrapperProps: j = {}, beforeMount: A = D, onMount: q = D }) {
+  let [M, O] = useState(false), [T, s] = useState(true), u = useRef(null), c = useRef(null), w = useRef(null), d = useRef(q), o = useRef(A), b = useRef(false);
+  k(() => {
+    let i = loader.init();
+    return i.then((f) => (c.current = f) && s(false)).catch((f) => (f == null ? void 0 : f.type) !== "cancelation" && console.error("Monaco initialization: error:", f)), () => u.current ? I() : i.cancel();
+  }), l(() => {
+    if (u.current && c.current) {
+      let i = u.current.getOriginalEditor(), f = h(c.current, e || "", t || n || "text", m || "");
+      f !== i.getModel() && i.setModel(f);
+    }
+  }, [m], M), l(() => {
+    if (u.current && c.current) {
+      let i = u.current.getModifiedEditor(), f = h(c.current, r || "", a || n || "text", E || "");
+      f !== i.getModel() && i.setModel(f);
+    }
+  }, [E], M), l(() => {
+    let i = u.current.getModifiedEditor();
+    i.getOption(c.current.editor.EditorOption.readOnly) ? i.setValue(r || "") : r !== i.getValue() && (i.executeEdits("", [{ range: i.getModel().getFullModelRange(), text: r || "", forceMoveMarkers: true }]), i.pushUndoStop());
+  }, [r], M), l(() => {
+    var _a, _b;
+    (_b = (_a = u.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.original.setValue(e || "");
+  }, [e], M), l(() => {
+    let { original: i, modified: f } = u.current.getModel();
+    c.current.editor.setModelLanguage(i, t || n || "text"), c.current.editor.setModelLanguage(f, a || n || "text");
+  }, [n, t, a], M), l(() => {
+    var _a;
+    (_a = c.current) == null ? void 0 : _a.editor.setTheme(x);
+  }, [x], M), l(() => {
+    var _a;
+    (_a = u.current) == null ? void 0 : _a.updateOptions(y);
+  }, [y], M);
+  let L = useCallback(() => {
+    var _a;
+    if (!c.current) return;
+    o.current(c.current);
+    let i = h(c.current, e || "", t || n || "text", m || ""), f = h(c.current, r || "", a || n || "text", E || "");
+    (_a = u.current) == null ? void 0 : _a.setModel({ original: i, modified: f });
+  }, [n, r, a, e, t, m, E]), U = useCallback(() => {
+    var _a;
+    !b.current && w.current && (u.current = c.current.editor.createDiffEditor(w.current, { automaticLayout: true, ...y }), L(), (_a = c.current) == null ? void 0 : _a.editor.setTheme(x), O(true), b.current = true);
+  }, [y, x, L]);
+  useEffect(() => {
+    M && d.current(u.current, c.current);
+  }, [M]), useEffect(() => {
+    !T && !M && U();
+  }, [T, M, U]);
+  function I() {
+    var _a, _b, _c, _d;
+    let i = (_a = u.current) == null ? void 0 : _a.getModel();
+    g || ((_b = i == null ? void 0 : i.original) == null ? void 0 : _b.dispose()), N || ((_c = i == null ? void 0 : i.modified) == null ? void 0 : _c.dispose()), (_d = u.current) == null ? void 0 : _d.dispose();
   }
+  return require$$0.createElement(H, { width: z, height: V, isEditorReady: M, loading: P, _ref: w, className: F, wrapperProps: j });
 }
-function VisualizerInner({
-  workflows,
-  onTaskSelect,
-  onWorkflowSelect,
-  executionResult,
-  debugMode = false
-}) {
-  const { resolvedTheme } = useTheme();
-  const debuggerContext = debugMode ? useDebugger() : null;
-  const [selection2, setSelection] = useState({ type: "none" });
-  const [leftPanelWidth, setLeftPanelWidth] = useState(280);
-  const [isDragging, setIsDragging] = useState(false);
-  const [treePanelHeight, setTreePanelHeight] = useState(50);
-  const [isVerticalDragging, setIsVerticalDragging] = useState(false);
-  const containerRef = useRef(null);
-  const leftPanelRef = useRef(null);
-  const handleSelection = (newSelection) => {
-    setSelection(newSelection);
-    if (newSelection.type === "workflow-condition") {
-      onWorkflowSelect == null ? void 0 : onWorkflowSelect(newSelection.workflow);
-    } else if (newSelection.type === "task" || newSelection.type === "task-condition" || newSelection.type === "mapping" || newSelection.type === "validation-rule") {
-      onTaskSelect == null ? void 0 : onTaskSelect(newSelection.task, newSelection.workflow);
+var ie = Oe;
+memo(ie);
+function He(e) {
+  let r = useRef();
+  return useEffect(() => {
+    r.current = e;
+  }, [e]), r.current;
+}
+var se = He;
+var _ = /* @__PURE__ */ new Map();
+function Ve({ defaultValue: e, defaultLanguage: r, defaultPath: n, value: t, language: a, path: m, theme: E = "light", line: g, loading: N = "Loading...", options: x = {}, overrideServices: P = {}, saveViewState: y = true, keepCurrentModel: V = false, width: z = "100%", height: F = "100%", className: j, wrapperProps: A = {}, beforeMount: q = D, onMount: M = D, onChange: O, onValidate: T = D }) {
+  let [s, u] = useState(false), [c, w] = useState(true), d = useRef(null), o = useRef(null), b = useRef(null), L = useRef(M), U = useRef(q), I = useRef(), i = useRef(t), f = se(m), Q = useRef(false), B = useRef(false);
+  k(() => {
+    let p = loader.init();
+    return p.then((R) => (d.current = R) && w(false)).catch((R) => (R == null ? void 0 : R.type) !== "cancelation" && console.error("Monaco initialization: error:", R)), () => o.current ? pe() : p.cancel();
+  }), l(() => {
+    var _a, _b, _c, _d;
+    let p = h(d.current, e || t || "", r || a || "", m || n || "");
+    p !== ((_a = o.current) == null ? void 0 : _a.getModel()) && (y && _.set(f, (_b = o.current) == null ? void 0 : _b.saveViewState()), (_c = o.current) == null ? void 0 : _c.setModel(p), y && ((_d = o.current) == null ? void 0 : _d.restoreViewState(_.get(m))));
+  }, [m], s), l(() => {
+    var _a;
+    (_a = o.current) == null ? void 0 : _a.updateOptions(x);
+  }, [x], s), l(() => {
+    !o.current || t === void 0 || (o.current.getOption(d.current.editor.EditorOption.readOnly) ? o.current.setValue(t) : t !== o.current.getValue() && (B.current = true, o.current.executeEdits("", [{ range: o.current.getModel().getFullModelRange(), text: t, forceMoveMarkers: true }]), o.current.pushUndoStop(), B.current = false));
+  }, [t], s), l(() => {
+    var _a, _b;
+    let p = (_a = o.current) == null ? void 0 : _a.getModel();
+    p && a && ((_b = d.current) == null ? void 0 : _b.editor.setModelLanguage(p, a));
+  }, [a], s), l(() => {
+    var _a;
+    g !== void 0 && ((_a = o.current) == null ? void 0 : _a.revealLine(g));
+  }, [g], s), l(() => {
+    var _a;
+    (_a = d.current) == null ? void 0 : _a.editor.setTheme(E);
+  }, [E], s);
+  let X2 = useCallback(() => {
+    var _a;
+    if (!(!b.current || !d.current) && !Q.current) {
+      U.current(d.current);
+      let p = m || n, R = h(d.current, t || e || "", r || a || "", p || "");
+      o.current = (_a = d.current) == null ? void 0 : _a.editor.create(b.current, { model: R, automaticLayout: true, ...x }, P), y && o.current.restoreViewState(_.get(p)), d.current.editor.setTheme(E), g !== void 0 && o.current.revealLine(g), u(true), Q.current = true;
     }
-  };
-  const handleMouseDown = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-  const handleVerticalMouseDown = useCallback((e) => {
-    e.preventDefault();
-    setIsVerticalDragging(true);
-  }, []);
-  useEffect(() => {
-    if (!isDragging) return;
-    const handleMouseMove = (e) => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const newWidth = e.clientX - rect.left;
-        setLeftPanelWidth(Math.max(200, Math.min(450, newWidth)));
-      }
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
+  }, [e, r, n, t, a, m, x, P, y, E, g]);
   useEffect(() => {
-    if (!isVerticalDragging) return;
-    const handleMouseMove = (e) => {
-      if (leftPanelRef.current) {
-        const rect = leftPanelRef.current.getBoundingClientRect();
-        const relativeY = e.clientY - rect.top;
-        const percentage = relativeY / rect.height * 100;
-        setTreePanelHeight(Math.max(20, Math.min(80, percentage)));
-      }
-    };
-    const handleMouseUp = () => {
-      setIsVerticalDragging(false);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
+    s && L.current(o.current, d.current);
+  }, [s]), useEffect(() => {
+    !c && !s && X2();
+  }, [c, s, X2]), i.current = t, useEffect(() => {
+    var _a, _b;
+    s && O && ((_a = I.current) == null ? void 0 : _a.dispose(), I.current = (_b = o.current) == null ? void 0 : _b.onDidChangeModelContent((p) => {
+      B.current || O(o.current.getValue(), p);
+    }));
+  }, [s, O]), useEffect(() => {
+    if (s) {
+      let p = d.current.editor.onDidChangeMarkers((R) => {
+        var _a;
+        let G = (_a = o.current.getModel()) == null ? void 0 : _a.uri;
+        if (G && R.find((J) => J.path === G.path)) {
+          let J = d.current.editor.getModelMarkers({ resource: G });
+          T == null ? void 0 : T(J);
+        }
+      });
+      return () => {
+        p == null ? void 0 : p.dispose();
+      };
+    }
     return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isVerticalDragging]);
-  const selectionInfo = getSelectionInfo(selection2);
-  const hasDebugTrace = debugMode && (debuggerContext == null ? void 0 : debuggerContext.hasTrace);
-  const displayMessage = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentMessage : executionResult;
-  const currentChanges = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentChanges : [];
-  const currentStepIndex = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.state.currentStepIndex : -1;
-  const highlightedPaths = useMemo(() => {
-    if (!currentChanges || currentChanges.length === 0) return void 0;
-    return currentChanges.map((change) => change.path);
-  }, [currentChanges]);
-  const isDraggingAny = isDragging || isVerticalDragging;
-  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: `df-visualizer-horizontal df-theme-${resolvedTheme} ${isDraggingAny ? "df-dragging" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: leftPanelRef,
-            className: "df-visualizer-left",
-            style: { width: leftPanelWidth },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
-                  style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-header", children: /* @__PURE__ */ jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }) }),
-                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsx(
-                      TreeView,
-                      {
-                        workflows,
-                        selection: selection2,
-                        onSelect: handleSelection,
-                        debugMode
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
-                  onMouseDown: handleVerticalMouseDown
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "df-visualizer-result-panel",
-                  style: { height: `${100 - treePanelHeight}%` },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "df-visualizer-result-header", children: [
-                      /* @__PURE__ */ jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
-                      hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxs("span", { className: "df-visualizer-result-changes", children: [
-                        currentChanges.length,
-                        " change",
-                        currentChanges.length !== 1 ? "s" : ""
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsx(
-                      JsonEditor,
-                      {
-                        value: JSON.stringify(displayMessage, null, 2),
-                        onChange: () => {
-                        },
-                        readOnly: true,
-                        theme: resolvedTheme === "dark" ? "dark" : "light",
-                        highlightedPaths
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
-            onMouseDown: handleMouseDown
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "df-visualizer-right", children: [
-          selectionInfo && /* @__PURE__ */ jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxs("div", { className: "df-details-header-info", children: [
-            /* @__PURE__ */ jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
-            /* @__PURE__ */ jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
-          ] }) }),
-          /* @__PURE__ */ jsx(DetailsPanel, { selection: selection2 })
-        ] })
-      ]
-    }
-  ) });
-}
-function WorkflowVisualizer({
-  workflows,
-  onWorkflowSelect,
-  onTaskSelect,
-  theme = "system",
-  className = "",
-  executionResult,
-  debugMode = false
-}) {
-  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsx("div", { className: `df-root ${className}`, children: /* @__PURE__ */ jsx(
-    VisualizerInner,
-    {
-      workflows,
-      onTaskSelect,
-      onWorkflowSelect,
-      executionResult,
-      debugMode
-    }
-  ) }) });
+  }, [s, T]);
+  function pe() {
+    var _a, _b;
+    (_a = I.current) == null ? void 0 : _a.dispose(), V ? y && _.set(m, o.current.saveViewState()) : (_b = o.current.getModel()) == null ? void 0 : _b.dispose(), o.current.dispose();
+  }
+  return require$$0.createElement(H, { width: z, height: F, isEditorReady: s, loading: N, _ref: b, className: j, wrapperProps: A });
 }
-function DebuggerControls({ compact = false, className = "" }) {
-  const {
-    state,
-    play,
-    pause,
-    stop,
-    reset,
-    stepForward,
-    stepBackward,
-    setSpeed,
-    isAtStart,
-    isAtEnd,
-    hasTrace,
-    progress,
-    totalSteps
-  } = useDebugger();
-  const { playbackState, playbackSpeed, currentStepIndex, isExecuting } = state;
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-        return;
-      }
-      switch (e.key) {
-        case " ":
-          e.preventDefault();
-          if (playbackState === "playing") {
-            pause();
-          } else if (hasTrace) {
-            play();
-          }
-          break;
-        case "ArrowRight":
-          e.preventDefault();
-          if (hasTrace && !isAtEnd) {
-            stepForward();
-          }
-          break;
-        case "ArrowLeft":
-          e.preventDefault();
-          if (hasTrace && !isAtStart) {
-            stepBackward();
+var fe = Ve;
+var de = memo(fe);
+var Ft = de;
+function findPathLineNumbers(jsonString, paths) {
+  if (!paths || paths.length === 0) return [];
+  const lines = jsonString.split("\n");
+  const lineNumbers = [];
+  for (const path of paths) {
+    const pathParts = path.split(".");
+    const lastKey = pathParts[pathParts.length - 1];
+    const keyPattern = new RegExp(`^\\s*"${lastKey}"\\s*:`);
+    for (let i = 0; i < lines.length; i++) {
+      if (keyPattern.test(lines[i])) {
+        if (pathParts.length === 1) {
+          lineNumbers.push(i + 1);
+        } else {
+          let matchedParents = 0;
+          for (let j = i - 1; j >= 0 && matchedParents < pathParts.length - 1; j--) {
+            const parentKey = pathParts[pathParts.length - 2 - matchedParents];
+            const parentPattern = new RegExp(`^\\s*"${parentKey}"\\s*:`);
+            if (parentPattern.test(lines[j])) {
+              matchedParents++;
+            }
           }
-          break;
-        case "Escape":
-          e.preventDefault();
-          stop();
-          break;
-        case "r":
-          if (e.metaKey || e.ctrlKey) {
-            e.preventDefault();
-            reset();
+          if (matchedParents >= Math.min(pathParts.length - 1, 2)) {
+            lineNumbers.push(i + 1);
           }
-          break;
-      }
-    },
-    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stop, stepForward, stepBackward, reset]
-  );
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-  const handleSpeedChange = (e) => {
-    setSpeed(Number(e.target.value));
-  };
-  if (compact) {
-    return /* @__PURE__ */ jsxs("div", { className: `df-debug-controls df-debug-controls-compact ${className}`, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: stepBackward,
-          disabled: !hasTrace || isAtStart || isExecuting,
-          title: "Previous step (Left Arrow)",
-          children: /* @__PURE__ */ jsx(SkipBack, { size: 16 })
-        }
-      ),
-      playbackState === "playing" ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn df-debug-btn-primary",
-          onClick: pause,
-          disabled: !hasTrace || isExecuting,
-          title: "Pause (Space)",
-          children: /* @__PURE__ */ jsx(Pause, { size: 18 })
-        }
-      ) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn df-debug-btn-primary",
-          onClick: play,
-          disabled: !hasTrace || isAtEnd || isExecuting,
-          title: "Play (Space)",
-          children: /* @__PURE__ */ jsx(Play, { size: 18 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: stepForward,
-          disabled: !hasTrace || isAtEnd || isExecuting,
-          title: "Next step (Right Arrow)",
-          children: /* @__PURE__ */ jsx(SkipForward, { size: 16 })
         }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "df-debug-step-counter", children: [
-        currentStepIndex + 1,
-        " / ",
-        totalSteps
-      ] })
-    ] });
+      }
+    }
   }
-  return /* @__PURE__ */ jsxs("div", { className: `df-debug-controls ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-controls-main", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: stop,
-          disabled: !hasTrace || isExecuting,
-          title: "Stop (Escape)",
-          children: /* @__PURE__ */ jsx(Square, { size: 20 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: stepBackward,
-          disabled: !hasTrace || isAtStart || isExecuting,
-          title: "Previous step (Left Arrow)",
-          children: /* @__PURE__ */ jsx(SkipBack, { size: 20 })
-        }
-      ),
-      playbackState === "playing" ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn df-debug-btn-primary",
-          onClick: pause,
-          disabled: !hasTrace || isExecuting,
-          title: "Pause (Space)",
-          children: /* @__PURE__ */ jsx(Pause, { size: 24 })
-        }
-      ) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn df-debug-btn-primary",
-          onClick: play,
-          disabled: !hasTrace || isAtEnd || isExecuting,
-          title: "Play (Space)",
-          children: /* @__PURE__ */ jsx(Play, { size: 24 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: stepForward,
-          disabled: !hasTrace || isAtEnd || isExecuting,
-          title: "Next step (Right Arrow)",
-          children: /* @__PURE__ */ jsx(SkipForward, { size: 20 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "df-debug-btn",
-          onClick: reset,
-          disabled: !hasTrace || isExecuting,
-          title: "Reset (Ctrl+R)",
-          children: /* @__PURE__ */ jsx(RotateCcw, { size: 20 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-progress", children: [
-      /* @__PURE__ */ jsx("div", { className: "df-debug-progress-bar", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "df-debug-progress-fill",
-          style: { width: `${progress * 100}%` }
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("span", { className: "df-debug-step-counter", children: [
-        "Step ",
-        currentStepIndex + 1,
-        " of ",
-        totalSteps
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-speed", children: [
-      /* @__PURE__ */ jsx(Gauge, { size: 14 }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: "100",
-          max: "2000",
-          step: "100",
-          value: playbackSpeed,
-          onChange: handleSpeedChange,
-          className: "df-debug-speed-slider",
-          title: `Playback speed: ${playbackSpeed}ms`
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "df-debug-speed-label", children: [
-        playbackSpeed,
-        "ms"
-      ] })
-    ] })
-  ] });
+  return [...new Set(lineNumbers)];
 }
-function MessageInputPanel({
-  onExecute,
-  isExecuting = false,
-  className = ""
+const defineThemes = (monaco) => {
+  monaco.editor.defineTheme("vscode-dark", {
+    base: "vs-dark",
+    inherit: true,
+    rules: [
+      { token: "string.key.json", foreground: "9CDCFE" },
+      { token: "string.value.json", foreground: "CE9178" },
+      { token: "number", foreground: "B5CEA8" },
+      { token: "keyword", foreground: "569CD6" },
+      { token: "delimiter", foreground: "D4D4D4" }
+    ],
+    colors: {
+      "editor.background": "#1e1e1e",
+      "editor.foreground": "#d4d4d4",
+      "editor.lineHighlightBackground": "#2d2d2d",
+      "editor.selectionBackground": "#264f78",
+      "editorCursor.foreground": "#aeafad",
+      "editorLineNumber.foreground": "#858585",
+      "editorLineNumber.activeForeground": "#c6c6c6",
+      "editorIndentGuide.background": "#404040",
+      "editorIndentGuide.activeBackground": "#707070",
+      "editor.selectionHighlightBackground": "#3a3d41",
+      "editorBracketMatch.background": "#0064001a",
+      "editorBracketMatch.border": "#888888",
+      "editorGutter.background": "#1e1e1e",
+      "scrollbarSlider.background": "#79797966",
+      "scrollbarSlider.hoverBackground": "#646464b3",
+      "scrollbarSlider.activeBackground": "#bfbfbf66",
+      "minimap.background": "#1e1e1e"
+    }
+  });
+  monaco.editor.defineTheme("vscode-light", {
+    base: "vs",
+    inherit: true,
+    rules: [
+      { token: "string.key.json", foreground: "0451A5" },
+      { token: "string.value.json", foreground: "A31515" },
+      { token: "number", foreground: "098658" },
+      { token: "keyword", foreground: "0000FF" },
+      { token: "delimiter", foreground: "000000" }
+    ],
+    colors: {
+      "editor.background": "#ffffff",
+      "editor.foreground": "#000000",
+      "editor.lineHighlightBackground": "#f5f5f5",
+      "editor.selectionBackground": "#add6ff",
+      "editorCursor.foreground": "#000000",
+      "editorLineNumber.foreground": "#999999",
+      "editorLineNumber.activeForeground": "#000000",
+      "editorIndentGuide.background": "#d3d3d3",
+      "editorIndentGuide.activeBackground": "#939393",
+      "editor.selectionHighlightBackground": "#add6ff4d",
+      "editorBracketMatch.background": "#0064001a",
+      "editorBracketMatch.border": "#b9b9b9",
+      "editorGutter.background": "#ffffff",
+      "scrollbarSlider.background": "#64646466",
+      "scrollbarSlider.hoverBackground": "#646464b3",
+      "scrollbarSlider.activeBackground": "#00000099",
+      "minimap.background": "#ffffff"
+    }
+  });
+};
+function JsonEditor({
+  value,
+  onChange,
+  readOnly = false,
+  className = "",
+  theme = "dark",
+  onCursorChange,
+  highlightedPaths
 }) {
-  const { setInputPayload, state } = useDebugger();
-  const { inputPayload } = state;
-  const [expandedSections, setExpandedSections] = useState(
-    /* @__PURE__ */ new Set(["payload"])
-  );
-  const [editingSection, setEditingSection] = useState(null);
-  const [editText, setEditText] = useState("");
-  const [parseError, setParseError] = useState(null);
-  const payload = inputPayload || {};
-  const toggleSection = (section) => {
-    setExpandedSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(section)) {
-        next.delete(section);
-      } else {
-        next.add(section);
-      }
-      return next;
+  const editorRef = useRef(null);
+  const decorationsRef = useRef([]);
+  const handleEditorMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [],
+      allowComments: false,
+      trailingCommas: "error"
     });
-  };
-  const startEditing = () => {
-    setEditingSection("payload");
-    setEditText(JSON.stringify(payload, null, 2));
-    setParseError(null);
-  };
-  const cancelEditing = () => {
-    setEditingSection(null);
-    setEditText("");
-    setParseError(null);
-  };
-  const saveEditing = useCallback(() => {
-    if (!editingSection) return;
-    try {
-      const parsed = JSON.parse(editText);
-      setInputPayload(parsed);
-      setEditingSection(null);
-      setEditText("");
-      setParseError(null);
-    } catch (err) {
-      setParseError(err instanceof Error ? err.message : "Invalid JSON");
+    if (onCursorChange) {
+      editor.onDidChangeCursorPosition((e) => {
+        onCursorChange(e.position.lineNumber, e.position.column);
+      });
     }
-  }, [editingSection, editText, setInputPayload]);
-  const handleLoadSample = () => {
-    setInputPayload({
-      id: "123",
-      name: "John Doe",
-      email: "john@example.com",
-      amount: 100
-    });
-  };
-  const handleClear = () => {
-    setInputPayload({});
-  };
-  const formatValue2 = (value) => {
-    if (Object.keys(value).length === 0) {
-      return "(empty)";
+    if (!readOnly) {
+      editor.focus();
     }
-    return JSON.stringify(value, null, 2);
-  };
-  const isEmptyPayload = Object.keys(payload).length === 0;
-  const isExpanded = expandedSections.has("payload");
-  const isEditing = editingSection === "payload";
-  return /* @__PURE__ */ jsxs("div", { className: `df-debug-input-panel ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-input-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "df-debug-input-title", children: "Test Payload" }),
-      /* @__PURE__ */ jsxs("div", { className: "df-debug-input-actions", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "df-debug-btn-sm",
-            onClick: handleLoadSample,
-            title: "Load sample data",
-            children: [
-              /* @__PURE__ */ jsx(FileJson, { size: 12 }),
-              "Sample"
-            ]
+  }, [onCursorChange, readOnly]);
+  useEffect(() => {
+    if (!editorRef.current || !highlightedPaths || highlightedPaths.length === 0) {
+      if (editorRef.current && decorationsRef.current.length > 0) {
+        decorationsRef.current = editorRef.current.deltaDecorations(decorationsRef.current, []);
+      }
+      return;
+    }
+    const lineNumbers = findPathLineNumbers(value, highlightedPaths);
+    if (lineNumbers.length > 0) {
+      const decorations = lineNumbers.map((lineNumber) => ({
+        range: {
+          startLineNumber: lineNumber,
+          startColumn: 1,
+          endLineNumber: lineNumber,
+          endColumn: 1
+        },
+        options: {
+          isWholeLine: true,
+          className: "df-highlighted-line",
+          glyphMarginClassName: "df-highlighted-glyph",
+          overviewRuler: {
+            color: theme === "dark" ? "#4ec9b0" : "#388a34",
+            position: 1
+            // Left
           }
-        ),
-        /* @__PURE__ */ jsxs(
+        }
+      }));
+      decorationsRef.current = editorRef.current.deltaDecorations(
+        decorationsRef.current,
+        decorations
+      );
+    } else {
+      decorationsRef.current = editorRef.current.deltaDecorations(decorationsRef.current, []);
+    }
+  }, [value, highlightedPaths, theme]);
+  const handleChange = useCallback((newValue) => {
+    onChange(newValue || "");
+  }, [onChange]);
+  return /* @__PURE__ */ jsx("div", { className: `df-monaco-editor-wrapper ${className}`, children: /* @__PURE__ */ jsx(
+    Ft,
+    {
+      height: "100%",
+      defaultLanguage: "json",
+      value,
+      onChange: handleChange,
+      onMount: handleEditorMount,
+      beforeMount: defineThemes,
+      theme: theme === "dark" ? "vscode-dark" : "vscode-light",
+      options: {
+        readOnly,
+        minimap: { enabled: false },
+        fontSize: 13,
+        fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
+        lineHeight: 20,
+        tabSize: 2,
+        insertSpaces: true,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        wordWrap: "on",
+        wrappingIndent: "indent",
+        folding: true,
+        foldingStrategy: "indentation",
+        showFoldingControls: "mouseover",
+        bracketPairColorization: { enabled: true },
+        guides: {
+          bracketPairs: false,
+          indentation: false,
+          highlightActiveBracketPair: true,
+          highlightActiveIndentation: false
+        },
+        renderLineHighlight: readOnly ? "none" : "line",
+        selectOnLineNumbers: true,
+        roundedSelection: true,
+        cursorBlinking: "smooth",
+        cursorSmoothCaretAnimation: "on",
+        smoothScrolling: true,
+        padding: { top: 8, bottom: 8 },
+        scrollbar: {
+          vertical: "auto",
+          horizontal: "auto",
+          verticalScrollbarSize: 10,
+          horizontalScrollbarSize: 10
+        },
+        overviewRulerBorder: false,
+        hideCursorInOverviewRuler: true,
+        contextmenu: true,
+        quickSuggestions: false,
+        suggestOnTriggerCharacters: false,
+        acceptSuggestionOnEnter: "off",
+        formatOnPaste: true,
+        formatOnType: false,
+        glyphMargin: highlightedPaths && highlightedPaths.length > 0
+      }
+    }
+  ) });
+}
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+  render() {
+    var _a;
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsx("div", { className: "df-error-boundary", children: /* @__PURE__ */ jsxs("div", { className: "df-error-boundary-content", children: [
+        /* @__PURE__ */ jsx("h3", { className: "df-error-boundary-title", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx("p", { className: "df-error-boundary-message", children: ((_a = this.state.error) == null ? void 0 : _a.message) || "An unexpected error occurred" }),
+        /* @__PURE__ */ jsx(
           "button",
           {
-            className: "df-debug-btn-sm",
-            onClick: handleClear,
-            title: "Clear all data",
-            children: [
-              /* @__PURE__ */ jsx(RefreshCw, { size: 12 }),
-              "Clear"
-            ]
+            className: "df-error-boundary-button",
+            onClick: () => this.setState({ hasError: false, error: null }),
+            children: "Try again"
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "df-debug-input-sections", children: /* @__PURE__ */ jsxs("div", { className: "df-debug-input-section", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "df-debug-input-section-header",
-          onClick: () => !isEditing && toggleSection("payload"),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "df-debug-section-toggle", children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) }),
-            /* @__PURE__ */ jsx("span", { className: "df-debug-section-label", children: "Payload" }),
-            isEmptyPayload && /* @__PURE__ */ jsx("span", { className: "df-debug-section-empty", children: "(empty)" }),
-            !isEditing && /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "df-debug-section-edit",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  startEditing();
-                },
-                title: "Edit Payload",
-                children: "Edit"
-              }
-            )
-          ]
-        }
-      ),
-      isExpanded && /* @__PURE__ */ jsx("div", { className: "df-debug-input-section-content", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "df-debug-input-editor", children: [
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            className: "df-debug-input-textarea",
-            value: editText,
-            onChange: (e) => setEditText(e.target.value),
-            placeholder: "Enter payload as JSON...",
-            spellCheck: false
-          }
-        ),
-        parseError && /* @__PURE__ */ jsx("div", { className: "df-debug-input-error", children: parseError }),
-        /* @__PURE__ */ jsxs("div", { className: "df-debug-input-editor-actions", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "df-debug-btn-sm df-debug-btn-cancel",
-              onClick: cancelEditing,
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "df-debug-btn-sm df-debug-btn-save",
-              onClick: saveEditing,
-              children: "Save"
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsx("pre", { className: "df-debug-input-preview", children: formatValue2(payload) }) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "df-debug-input-footer", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "df-debug-run-btn",
-        onClick: onExecute,
-        disabled: isExecuting,
-        children: isExecuting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(RefreshCw, { size: 14, className: "df-debug-spin" }),
-          "Executing..."
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Play, { size: 14 }),
-          "Run Debug"
-        ] })
-      }
-    ) })
-  ] });
-}
-function MessageStatePanel({ className = "" }) {
-  const { currentStep, currentMessage, currentChanges } = useDebugger();
-  const [activeTab, setActiveTab] = useState("message");
-  if (!currentStep || !currentMessage) {
-    return /* @__PURE__ */ jsx("div", { className: `df-debug-state-panel df-debug-state-empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "No step selected. Run debug to see message state changes." }) });
+      ] }) });
+    }
+    return this.props.children;
   }
-  const { workflow_id, task_id, result } = currentStep;
-  const tabs = [
-    { key: "message", label: "Message" },
-    { key: "changes", label: `Changes (${currentChanges.length})` }
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: `df-debug-state-panel ${className}`, children: [
-    /* @__PURE__ */ jsx("div", { className: "df-debug-state-header", children: /* @__PURE__ */ jsx("div", { className: "df-debug-state-tabs", children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: `df-debug-state-tab ${activeTab === key ? "df-debug-state-tab-active" : ""}`,
-        onClick: () => setActiveTab(key),
-        children: label
-      },
-      key
-    )) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-state-content", children: [
-      activeTab === "message" && /* @__PURE__ */ jsx(MessageView, { message: currentMessage }),
-      activeTab === "changes" && /* @__PURE__ */ jsx(ChangesView, { changes: currentChanges })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "df-debug-state-footer", children: [
-      /* @__PURE__ */ jsxs("div", { className: "df-debug-state-step-type", children: [
-        /* @__PURE__ */ jsx("span", { className: `df-debug-state-badge df-debug-state-badge-${result}`, children: result }),
-        /* @__PURE__ */ jsxs("span", { className: "df-debug-state-type-label", children: [
-          workflow_id,
-          task_id ? ` / ${task_id}` : ""
-        ] })
-      ] }),
-      currentMessage.errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "df-debug-state-error", children: [
-        "Errors: ",
-        currentMessage.errors.length
-      ] })
-    ] })
-  ] });
-}
-function MessageView({ message }) {
-  const [expandedSections, setExpandedSections] = useState(
-    /* @__PURE__ */ new Set(["context"])
-  );
-  const toggleSection = (section) => {
-    setExpandedSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(section)) {
-        next.delete(section);
-      } else {
-        next.add(section);
-      }
-      return next;
-    });
-  };
-  const sections = [
-    { key: "context", value: message.context },
-    { key: "payload", value: message.payload },
-    { key: "errors", value: message.errors },
-    { key: "audit_trail", value: message.audit_trail }
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "df-debug-message-view", children: sections.map(({ key, value }) => {
-    const isExpanded = expandedSections.has(key);
-    const isEmpty2 = Array.isArray(value) ? value.length === 0 : typeof value === "object" && value !== null ? Object.keys(value).length === 0 : !value;
-    return /* @__PURE__ */ jsxs("div", { className: "df-debug-message-section", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "df-debug-message-section-header",
-          onClick: () => toggleSection(key),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "df-debug-section-arrow", children: isExpanded ? "▼" : "▶" }),
-            /* @__PURE__ */ jsx("span", { className: "df-debug-section-key", children: key }),
-            isEmpty2 && /* @__PURE__ */ jsx("span", { className: "df-debug-section-empty", children: "(empty)" })
-          ]
-        }
-      ),
-      isExpanded && /* @__PURE__ */ jsx("pre", { className: "df-debug-message-section-content", children: JSON.stringify(value, null, 2) })
-    ] }, key);
-  }) });
 }
-function ChangesView({ changes }) {
-  if (changes.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "df-debug-changes-empty", children: "No changes recorded in this step" });
+function getSelectionInfo(selection2) {
+  switch (selection2.type) {
+    case "workflow-condition":
+      return {
+        title: "Workflow Condition",
+        subtitle: selection2.workflow.name
+      };
+    case "task":
+      return {
+        title: selection2.task.name,
+        subtitle: `${selection2.workflow.name} / ${selection2.task.function.name}`
+      };
+    case "task-condition":
+      return {
+        title: "Task Condition",
+        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
+      };
+    case "mapping":
+      return {
+        title: selection2.mapping.path,
+        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
+      };
+    case "validation-rule":
+      return {
+        title: selection2.rule.message,
+        subtitle: `${selection2.workflow.name} / ${selection2.task.name}`
+      };
+    default:
+      return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "df-debug-changes-view", children: changes.map((change, index2) => {
-    const isModified = change.old_value !== void 0 && change.new_value !== void 0;
-    const isAdded = change.old_value === void 0 && change.new_value !== void 0;
-    const isRemoved = change.old_value !== void 0 && change.new_value === void 0;
-    const changeType = isAdded ? "added" : isRemoved ? "removed" : "modified";
-    return /* @__PURE__ */ jsxs("div", { className: `df-debug-change-item df-debug-change-${changeType}`, children: [
-      /* @__PURE__ */ jsxs("div", { className: "df-debug-change-header", children: [
-        /* @__PURE__ */ jsx("span", { className: `df-debug-change-op df-debug-change-op-${changeType}`, children: changeType }),
-        /* @__PURE__ */ jsx("span", { className: "df-debug-change-path", children: change.path })
-      ] }),
-      isModified && /* @__PURE__ */ jsxs("div", { className: "df-debug-change-values", children: [
-        /* @__PURE__ */ jsx("span", { className: "df-debug-change-old", children: formatValue(change.old_value) }),
-        /* @__PURE__ */ jsx("span", { className: "df-debug-change-arrow", children: "→" }),
-        /* @__PURE__ */ jsx("span", { className: "df-debug-change-new", children: formatValue(change.new_value) })
-      ] }),
-      isAdded && /* @__PURE__ */ jsx("div", { className: "df-debug-change-values", children: /* @__PURE__ */ jsx("span", { className: "df-debug-change-new", children: formatValue(change.new_value) }) }),
-      isRemoved && /* @__PURE__ */ jsx("div", { className: "df-debug-change-values", children: /* @__PURE__ */ jsx("span", { className: "df-debug-change-old", children: formatValue(change.old_value) }) })
-    ] }, index2);
-  }) });
-}
-function formatValue(value) {
-  if (value === void 0) return "undefined";
-  if (value === null) return "null";
-  if (typeof value === "string") return `"${value}"`;
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
 }
-function DebugInfoBubble({
-  step,
-  targetRef,
-  visible,
-  onClose
+function VisualizerInner({
+  workflows,
+  onTaskSelect,
+  onWorkflowSelect,
+  executionResult,
+  debugMode = false,
+  showDebugToolbar = false,
+  debugConfig,
+  debugPayload
 }) {
-  var _a;
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const bubbleRef = useRef(null);
+  const { resolvedTheme } = useTheme();
+  const debuggerContext = debugMode ? useDebugger() : null;
+  const [selection2, setSelection] = useState({ type: "none" });
+  const [leftPanelWidth, setLeftPanelWidth] = useState(280);
+  const [isDragging, setIsDragging] = useState(false);
+  const [treePanelHeight, setTreePanelHeight] = useState(50);
+  const [isVerticalDragging, setIsVerticalDragging] = useState(false);
+  const containerRef = useRef(null);
+  const leftPanelRef = useRef(null);
+  const handleSelection = (newSelection) => {
+    setSelection(newSelection);
+    if (newSelection.type === "workflow-condition") {
+      onWorkflowSelect == null ? void 0 : onWorkflowSelect(newSelection.workflow);
+    } else if (newSelection.type === "task" || newSelection.type === "task-condition" || newSelection.type === "mapping" || newSelection.type === "validation-rule") {
+      onTaskSelect == null ? void 0 : onTaskSelect(newSelection.task, newSelection.workflow);
+    }
+  };
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleVerticalMouseDown = useCallback((e) => {
+    e.preventDefault();
+    setIsVerticalDragging(true);
+  }, []);
   useEffect(() => {
-    if (!visible || !targetRef.current) return;
-    const updatePosition = () => {
-      var _a2, _b;
-      const targetRect = (_a2 = targetRef.current) == null ? void 0 : _a2.getBoundingClientRect();
-      const bubbleRect = (_b = bubbleRef.current) == null ? void 0 : _b.getBoundingClientRect();
-      if (!targetRect) return;
-      let top = targetRect.bottom + 8;
-      let left = targetRect.left;
-      if (bubbleRect) {
-        if (left + bubbleRect.width > window.innerWidth - 16) {
-          left = window.innerWidth - bubbleRect.width - 16;
-        }
-        if (top + bubbleRect.height > window.innerHeight - 16) {
-          top = targetRect.top - bubbleRect.height - 8;
-        }
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const newWidth = e.clientX - rect.left;
+        setLeftPanelWidth(Math.max(200, Math.min(450, newWidth)));
       }
-      setPosition({ top, left });
     };
-    updatePosition();
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
     return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [visible, targetRef]);
-  if (!visible) return null;
-  const { workflow_id, task_id, result, message } = step;
-  const state = result === "executed" ? "executed" : "skipped";
-  const hasError = message && message.errors && message.errors.length > 0;
-  const displayState = hasError ? "error" : state;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: bubbleRef,
-        className: "df-debug-bubble",
-        style: {
-          position: "fixed",
-          top: position.top,
-          left: position.left
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-header", children: [
-            /* @__PURE__ */ jsx(StateIcon, { state: displayState }),
-            /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-title", children: task_id ? "Task Step" : "Workflow Skipped" }),
-            onClose && /* @__PURE__ */ jsx("button", { className: "df-debug-bubble-close", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-content", children: [
-            /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Workflow:" }),
-              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-value", children: workflow_id })
-            ] }),
-            task_id && /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Task:" }),
-              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-value", children: task_id })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "df-debug-bubble-label", children: "Result:" }),
-              /* @__PURE__ */ jsx("span", { className: `df-debug-bubble-state df-debug-bubble-state-${displayState}`, children: result })
-            ] }),
-            hasError && (message == null ? void 0 : message.errors) && /* @__PURE__ */ jsxs("div", { className: "df-debug-bubble-error", children: [
-              /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: ((_a = message.errors[0]) == null ? void 0 : _a.message) || "Unknown error" })
-            ] })
-          ] })
-        ]
+  }, [isDragging]);
+  useEffect(() => {
+    if (!isVerticalDragging) return;
+    const handleMouseMove = (e) => {
+      if (leftPanelRef.current) {
+        const rect = leftPanelRef.current.getBoundingClientRect();
+        const relativeY = e.clientY - rect.top;
+        const percentage = relativeY / rect.height * 100;
+        setTreePanelHeight(Math.max(20, Math.min(80, percentage)));
       }
-    ),
-    document.body
-  );
-}
-function StateIcon({ state }) {
-  switch (state) {
-    case "executed":
-      return /* @__PURE__ */ jsx(Check, { size: 16, className: "df-debug-icon-executed" });
-    case "skipped":
-      return /* @__PURE__ */ jsx(SkipForward, { size: 16, className: "df-debug-icon-skipped" });
-    case "error":
-      return /* @__PURE__ */ jsx(CircleAlert, { size: 16, className: "df-debug-icon-error" });
-    case "current":
-      return /* @__PURE__ */ jsx(Clock, { size: 16, className: "df-debug-icon-current" });
-    case "pending":
-    default:
-      return /* @__PURE__ */ jsx(Clock, { size: 16, className: "df-debug-icon-pending" });
-  }
+    };
+    const handleMouseUp = () => {
+      setIsVerticalDragging(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isVerticalDragging]);
+  const selectionInfo = getSelectionInfo(selection2);
+  const hasDebugTrace = debugMode && (debuggerContext == null ? void 0 : debuggerContext.hasTrace);
+  const displayMessage = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentMessage : executionResult;
+  const currentChanges = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentChanges : [];
+  const currentStepIndex = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.state.currentStepIndex : -1;
+  const highlightedPaths = useMemo(() => {
+    if (!currentChanges || currentChanges.length === 0) return void 0;
+    return currentChanges.map((change) => change.path);
+  }, [currentChanges]);
+  const isDraggingAny = isDragging || isVerticalDragging;
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `df-visualizer-horizontal df-theme-${resolvedTheme} ${isDraggingAny ? "df-dragging" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: leftPanelRef,
+            className: "df-visualizer-left",
+            style: { width: leftPanelWidth },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
+                  style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: `df-visualizer-left-header ${showDebugToolbar ? "df-header-with-debug" : ""}`, children: [
+                      /* @__PURE__ */ jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }),
+                      showDebugToolbar && debugConfig && /* @__PURE__ */ jsx(
+                        IntegratedDebugToolbar,
+                        {
+                          workflows,
+                          payload: debugPayload ?? debugConfig.initialPayload,
+                          autoExecute: debugConfig.autoExecute,
+                          onExecutionComplete: debugConfig.onExecutionComplete,
+                          onExecutionError: debugConfig.onExecutionError
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsx(
+                      TreeView,
+                      {
+                        workflows,
+                        selection: selection2,
+                        onSelect: handleSelection,
+                        debugMode
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              displayMessage && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
+                  onMouseDown: handleVerticalMouseDown
+                }
+              ),
+              displayMessage && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "df-visualizer-result-panel",
+                  style: { height: `${100 - treePanelHeight}%` },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "df-visualizer-result-header", children: [
+                      /* @__PURE__ */ jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
+                      hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxs("span", { className: "df-visualizer-result-changes", children: [
+                        currentChanges.length,
+                        " change",
+                        currentChanges.length !== 1 ? "s" : ""
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsx(
+                      JsonEditor,
+                      {
+                        value: JSON.stringify(displayMessage, null, 2),
+                        onChange: () => {
+                        },
+                        readOnly: true,
+                        theme: resolvedTheme === "dark" ? "dark" : "light",
+                        highlightedPaths
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
+            onMouseDown: handleMouseDown
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "df-visualizer-right", children: [
+          selectionInfo && /* @__PURE__ */ jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxs("div", { className: "df-details-header-info", children: [
+            /* @__PURE__ */ jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
+            /* @__PURE__ */ jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
+          ] }) }),
+          /* @__PURE__ */ jsx(DetailsPanel, { selection: selection2 })
+        ] })
+      ]
+    }
+  ) });
 }
-function DebugStateBadge({
-  state,
-  conditionResult,
-  size = "sm"
+function WorkflowVisualizer({
+  workflows,
+  onWorkflowSelect,
+  onTaskSelect,
+  theme = "system",
+  className = "",
+  executionResult,
+  debugMode = false,
+  debugConfig,
+  debugPayload
 }) {
-  const iconSize = size === "sm" ? 12 : 14;
-  return /* @__PURE__ */ jsxs("span", { className: `df-debug-badge df-debug-badge-${state} df-debug-badge-${size}`, children: [
-    /* @__PURE__ */ jsx(StateIcon, { state }),
-    conditionResult !== void 0 && /* @__PURE__ */ jsx("span", { className: `df-debug-badge-condition ${conditionResult ? "df-debug-badge-condition-pass" : "df-debug-badge-condition-fail"}`, children: conditionResult ? /* @__PURE__ */ jsx(Check, { size: iconSize }) : /* @__PURE__ */ jsx(X, { size: iconSize }) })
-  ] });
+  if (debugConfig == null ? void 0 : debugConfig.enabled) {
+    const showControls = debugConfig.showControls !== false;
+    return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsx(
+      DebuggerProvider,
+      {
+        engineFactory: debugConfig.engineFactory,
+        autoActivate: true,
+        initialPayload: debugPayload ?? debugConfig.initialPayload,
+        children: /* @__PURE__ */ jsx("div", { className: `df-root ${className}`, children: /* @__PURE__ */ jsx(
+          VisualizerInner,
+          {
+            workflows,
+            onTaskSelect,
+            onWorkflowSelect,
+            executionResult,
+            debugMode: true,
+            showDebugToolbar: showControls,
+            debugConfig,
+            debugPayload
+          }
+        ) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsx("div", { className: `df-root ${className}`, children: /* @__PURE__ */ jsx(
+    VisualizerInner,
+    {
+      workflows,
+      onTaskSelect,
+      onWorkflowSelect,
+      executionResult,
+      debugMode
+    }
+  ) }) });
 }
 class WasmEngine {
   __destroy_into_raw() {
@@ -22497,6 +22787,7 @@ export {
   DebuggerProvider,
   ErrorBoundary,
   FunctionTypeBadge,
+  IntegratedDebugToolbar,
   JsonViewer,
   MessageInputPanel,
   MessageStatePanel,