@octaviaflow/core 3.0.14 → 3.0.18-beta.0

package/dist/monaco.cjs

@@ -37,7 +37,7 @@ __export(monaco_exports, {
 });
 module.exports = __toCommonJS(monaco_exports);
 
-// src/components/MonacoEditor/MonacoEditor.tsx
+// src/components/MonacoEditor/MonacoDiffEditor.tsx
 var import_react = require("react");
 
 // src/utils/cn.ts
@@ -130,16 +130,199 @@ var OCTAVIAFLOW_LIGHT = {
     "input.foreground": "#161616",
     "input.border": "#C6C6C6",
     "inputOption.activeBorder": "#0F62FE",
-    "focusBorder": "#0F62FE"
+    focusBorder: "#0F62FE"
   }
 };
 var OCTAVIAFLOW_THEME_ID = "octaviaflow-light";
 
-// src/components/MonacoEditor/MonacoEditor.tsx
+// src/components/MonacoEditor/MonacoDiffEditor.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Editor = (0, import_react.lazy)(
-  () => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor }))
+var DiffEditor = (0, import_react.lazy)(
+  () => import("@monaco-editor/react").then((mod) => ({ default: mod.DiffEditor }))
 );
+function MonacoDiffEditor({
+  original,
+  modified,
+  onModifiedChange,
+  language = "plaintext",
+  renderSideBySide = true,
+  readOnly = false,
+  hideUnchangedRegions = false,
+  height = 360,
+  minHeight = 200,
+  originalLabel = "Original",
+  modifiedLabel = "Modified",
+  toolbar,
+  options,
+  onMount,
+  style,
+  className,
+  theme,
+  hideToolbar = false
+}) {
+  const editorRef = (0, import_react.useRef)(null);
+  const [sideBySide, setSideBySide] = (0, import_react.useState)(renderSideBySide);
+  const handleMount = (diffEditor, monaco) => {
+    editorRef.current = diffEditor;
+    monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
+    monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
+    const modifiedEditor = diffEditor.getModifiedEditor();
+    modifiedEditor.onDidChangeModelContent(() => {
+      onModifiedChange?.(modifiedEditor.getValue());
+    });
+    onMount?.(diffEditor, monaco);
+  };
+  const mergedOptions = {
+    readOnly,
+    originalEditable: false,
+    renderSideBySide: sideBySide,
+    fontFamily: "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace",
+    fontSize: 13,
+    lineHeight: 20,
+    automaticLayout: true,
+    lineNumbersMinChars: 3,
+    lineDecorationsWidth: 6,
+    folding: true,
+    glyphMargin: false,
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    smoothScrolling: true,
+    renderOverviewRuler: true,
+    diffWordWrap: "off",
+    padding: { top: 8, bottom: 8 },
+    hideUnchangedRegions: {
+      enabled: hideUnchangedRegions,
+      revealLineCount: 20,
+      minimumLineCount: 3,
+      contextLineCount: 3
+    },
+    scrollbar: {
+      verticalScrollbarSize: 8,
+      horizontalScrollbarSize: 8,
+      useShadows: false
+    },
+    ...options
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("ods-monaco-diff", `ods-monaco-diff--${language}`, className), style, children: [
+    !hideToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ods-monaco__lang", children: [
+          "DIFF \xB7 ",
+          language.toUpperCase()
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ods-monaco-diff__labels", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--orig", children: originalLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco-diff__arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--mod", children: modifiedLabel })
+        ] }),
+        toolbar
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-monaco__toolbar-right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cn("ods-monaco__btn", sideBySide && "ods-monaco__btn--active"),
+          onClick: () => setSideBySide((s) => !s),
+          "aria-pressed": sideBySide,
+          "aria-label": "Toggle side-by-side",
+          title: sideBySide ? "Inline" : "Side-by-side",
+          children: sideBySide ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "rect",
+              {
+                x: "1.5",
+                y: "2",
+                width: "5",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "rect",
+              {
+                x: "7.5",
+                y: "2",
+                width: "5",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "rect",
+              {
+                x: "1.5",
+                y: "2",
+                width: "11",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1.5 7h11", stroke: "currentColor", strokeWidth: "1.3" })
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react.Suspense,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__loading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "circle",
+            {
+              cx: "7",
+              cy: "7",
+              r: "5",
+              stroke: "currentColor",
+              strokeWidth: "1.4",
+              strokeDasharray: "4 18",
+              strokeLinecap: "round"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading diff\u2026" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DiffEditor,
+          {
+            original,
+            modified,
+            language,
+            height,
+            theme: theme ?? OCTAVIAFLOW_THEME_ID,
+            options: mergedOptions,
+            onMount: handleMount,
+            loading: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__loading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "circle",
+                {
+                  cx: "7",
+                  cy: "7",
+                  r: "5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeDasharray: "4 18",
+                  strokeLinecap: "round"
+                }
+              ) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading diff\u2026" })
+            ] })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+// src/components/MonacoEditor/MonacoEditor.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Editor = (0, import_react2.lazy)(() => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor })));
 var MARKER_SEVERITY = {
   hint: 1,
   info: 2,
@@ -172,27 +355,27 @@ function MonacoEditor({
   ariaLabel = "Code editor",
   theme
 }) {
-  const editorRef = (0, import_react.useRef)(null);
-  const monacoRef = (0, import_react.useRef)(null);
-  const [wordWrap, setWordWrap] = (0, import_react.useState)(wordWrapProp ?? false);
-  const [minimap, setMinimap] = (0, import_react.useState)(minimapProp ?? false);
-  const [copied, setCopied] = (0, import_react.useState)(false);
-  const [cursor, setCursor] = (0, import_react.useState)({ line: 1, column: 1 });
-  const [selection, setSelection] = (0, import_react.useState)({ chars: 0, lines: 0 });
-  const [lineCount, setLineCount] = (0, import_react.useState)(value.split("\n").length);
-  (0, import_react.useEffect)(() => {
+  const editorRef = (0, import_react2.useRef)(null);
+  const monacoRef = (0, import_react2.useRef)(null);
+  const [wordWrap, setWordWrap] = (0, import_react2.useState)(wordWrapProp ?? false);
+  const [minimap, setMinimap] = (0, import_react2.useState)(minimapProp ?? false);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const [cursor, setCursor] = (0, import_react2.useState)({ line: 1, column: 1 });
+  const [selection, setSelection] = (0, import_react2.useState)({ chars: 0, lines: 0 });
+  const [lineCount, setLineCount] = (0, import_react2.useState)(value.split("\n").length);
+  (0, import_react2.useEffect)(() => {
     if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
   }, [wordWrapProp]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (minimapProp !== void 0) setMinimap(minimapProp);
   }, [minimapProp]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     editorRef.current?.updateOptions({
       wordWrap: wordWrap ? "on" : "off",
       minimap: { enabled: minimap }
     });
   }, [wordWrap, minimap]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const editor = editorRef.current;
     const monaco = monacoRef.current;
     if (!editor || !monaco || !markers) return;
@@ -212,7 +395,7 @@ function MonacoEditor({
       }))
     );
   }, [markers]);
-  const handleMount = (0, import_react.useCallback)(
+  const handleMount = (0, import_react2.useCallback)(
     (editor, monaco) => {
       editorRef.current = editor;
       monacoRef.current = monaco;
@@ -296,7 +479,7 @@ function MonacoEditor({
   };
   const showWrapBtn = showWordWrapToggle && wordWrapProp === void 0;
   const showMinimapBtn = showMinimapToggle && minimapProp === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: cn(
@@ -307,19 +490,19 @@ function MonacoEditor({
       ),
       style,
       children: [
-        !hideToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__toolbar-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__lang", children: language.toUpperCase() }),
+        !hideToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__toolbar-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__lang", children: language.toUpperCase() }),
             toolbar
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__toolbar-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ods-monaco__lines", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__toolbar-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ods-monaco__lines", children: [
               lineCount,
               " line",
               lineCount === 1 ? "" : "s"
             ] }),
-            status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__status", children: status }),
-            showWrapBtn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__status", children: status }),
+            showWrapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -328,7 +511,7 @@ function MonacoEditor({
                 "aria-pressed": wordWrap,
                 "aria-label": "Toggle word wrap",
                 title: "Word wrap",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "path",
                   {
                     d: "M2 3.5h10M2 7h7.5a2 2 0 1 1 0 4H8m0 0 1.5-1.5M8 11l1.5 1.5M2 10.5h3",
@@ -340,7 +523,7 @@ function MonacoEditor({
                 ) })
               }
             ),
-            showMinimapBtn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            showMinimapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -349,14 +532,44 @@ function MonacoEditor({
                 "aria-pressed": minimap,
                 "aria-label": "Toggle minimap",
                 title: "Minimap",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "2.5", width: "6", height: "9", rx: "0.5", stroke: "currentColor", strokeWidth: "1.2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9", y: "2.5", width: "3", height: "9", rx: "0.5", fill: "currentColor", opacity: "0.25" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3.5 4.5h3M3.5 6.5h3M3.5 8.5h2", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: "2",
+                      y: "2.5",
+                      width: "6",
+                      height: "9",
+                      rx: "0.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.2"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: "9",
+                      y: "2.5",
+                      width: "3",
+                      height: "9",
+                      rx: "0.5",
+                      fill: "currentColor",
+                      opacity: "0.25"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "path",
+                    {
+                      d: "M3.5 4.5h3M3.5 6.5h3M3.5 8.5h2",
+                      stroke: "currentColor",
+                      strokeWidth: "1",
+                      strokeLinecap: "round"
+                    }
+                  )
                 ] })
               }
             ),
-            showFormat && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            showFormat && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -364,13 +577,30 @@ function MonacoEditor({
                 onClick: handleFormat,
                 "aria-label": "Format document",
                 title: "Format (Shift+Alt+F)",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.5 4h9M4 7h7.5M5.5 10H11", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.5 7 3.5 6 2.5 5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "path",
+                    {
+                      d: "M2.5 4h9M4 7h7.5M5.5 10H11",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "path",
+                    {
+                      d: "M2.5 7 3.5 6 2.5 5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
                 ] })
               }
             ),
-            showCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            showCopy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -378,7 +608,7 @@ function MonacoEditor({
                 onClick: handleCopy,
                 "aria-label": "Copy",
                 title: "Copy",
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "path",
                   {
                     d: "m3 7 3 3 5-6",
@@ -387,41 +617,88 @@ function MonacoEditor({
                     strokeLinecap: "round",
                     strokeLinejoin: "round"
                   }
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", stroke: "currentColor", strokeWidth: "1.3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 1.5h6V8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
+                ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: "3",
+                      y: "3",
+                      width: "8",
+                      height: "8",
+                      rx: "1",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "path",
+                    {
+                      d: "M5 1.5h6V8",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  )
                 ] })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__loading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading editor\u2026" })
-        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Editor,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react2.Suspense,
           {
-            value,
-            onChange: (v) => onChange?.(v ?? ""),
-            language,
-            height,
-            theme: theme ?? OCTAVIAFLOW_THEME_ID,
-            options: mergedOptions,
-            onMount: handleMount,
-            loading: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__loading", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading editor\u2026" })
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__loading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "circle",
+                {
+                  cx: "7",
+                  cy: "7",
+                  r: "5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeDasharray: "4 18",
+                  strokeLinecap: "round"
+                }
+              ) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading editor\u2026" })
             ] }),
-            "aria-label": ariaLabel
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Editor,
+              {
+                value,
+                onChange: (v) => onChange?.(v ?? ""),
+                language,
+                height,
+                theme: theme ?? OCTAVIAFLOW_THEME_ID,
+                options: mergedOptions,
+                onMount: handleMount,
+                loading: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__loading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "circle",
+                    {
+                      cx: "7",
+                      cy: "7",
+                      r: "5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.4",
+                      strokeDasharray: "4 18",
+                      strokeLinecap: "round"
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading editor\u2026" })
+                ] }),
+                "aria-label": ariaLabel
+              }
+            )
           }
-        ) }) }),
-        !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-monaco__footer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ods-monaco__pos", children: [
+        ) }),
+        !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ods-monaco__pos", children: [
             "Ln ",
             cursor.line,
             ", Col ",
             cursor.column,
-            selection.chars > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            selection.chars > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               " ",
               "\xB7 ",
               selection.chars,
@@ -430,14 +707,14 @@ function MonacoEditor({
               selection.lines > 1 && ` \xB7 ${selection.lines} lines`
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ods-monaco__shortcut-hint", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ods-monaco__shortcut-hint", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
             " find",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
             " replace",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "ods-monaco__kbd", children: "F1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "ods-monaco__kbd", children: "F1" }),
             " commands"
           ] })
         ] })
@@ -445,140 +722,6 @@ function MonacoEditor({
     }
   );
 }
-
-// src/components/MonacoEditor/MonacoDiffEditor.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var DiffEditor = (0, import_react2.lazy)(
-  () => import("@monaco-editor/react").then((mod) => ({ default: mod.DiffEditor }))
-);
-function MonacoDiffEditor({
-  original,
-  modified,
-  onModifiedChange,
-  language = "plaintext",
-  renderSideBySide = true,
-  readOnly = false,
-  hideUnchangedRegions = false,
-  height = 360,
-  minHeight = 200,
-  originalLabel = "Original",
-  modifiedLabel = "Modified",
-  toolbar,
-  options,
-  onMount,
-  style,
-  className,
-  theme,
-  hideToolbar = false
-}) {
-  const editorRef = (0, import_react2.useRef)(null);
-  const [sideBySide, setSideBySide] = (0, import_react2.useState)(renderSideBySide);
-  const handleMount = (diffEditor, monaco) => {
-    editorRef.current = diffEditor;
-    monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
-    monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
-    const modifiedEditor = diffEditor.getModifiedEditor();
-    modifiedEditor.onDidChangeModelContent(() => {
-      onModifiedChange?.(modifiedEditor.getValue());
-    });
-    onMount?.(diffEditor, monaco);
-  };
-  const mergedOptions = {
-    readOnly,
-    originalEditable: false,
-    renderSideBySide: sideBySide,
-    fontFamily: "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace",
-    fontSize: 13,
-    lineHeight: 20,
-    automaticLayout: true,
-    lineNumbersMinChars: 3,
-    lineDecorationsWidth: 6,
-    folding: true,
-    glyphMargin: false,
-    minimap: { enabled: false },
-    scrollBeyondLastLine: false,
-    smoothScrolling: true,
-    renderOverviewRuler: true,
-    diffWordWrap: "off",
-    padding: { top: 8, bottom: 8 },
-    hideUnchangedRegions: {
-      enabled: hideUnchangedRegions,
-      revealLineCount: 20,
-      minimumLineCount: 3,
-      contextLineCount: 3
-    },
-    scrollbar: {
-      verticalScrollbarSize: 8,
-      horizontalScrollbarSize: 8,
-      useShadows: false
-    },
-    ...options
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      className: cn("ods-monaco-diff", `ods-monaco-diff--${language}`, className),
-      style,
-      children: [
-        !hideToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__toolbar-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ods-monaco__lang", children: [
-              "DIFF \xB7 ",
-              language.toUpperCase()
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ods-monaco-diff__labels", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--orig", children: originalLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco-diff__arrow", "aria-hidden": "true", children: "\u2192" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--mod", children: modifiedLabel })
-            ] }),
-            toolbar
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ods-monaco__toolbar-right", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "ods-monaco__btn",
-                sideBySide && "ods-monaco__btn--active"
-              ),
-              onClick: () => setSideBySide((s) => !s),
-              "aria-pressed": sideBySide,
-              "aria-label": "Toggle side-by-side",
-              title: sideBySide ? "Inline" : "Side-by-side",
-              children: sideBySide ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "1.5", y: "2", width: "5", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7.5", y: "2", width: "5", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "1.5", y: "2", width: "11", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1.5 7h11", stroke: "currentColor", strokeWidth: "1.3" })
-              ] })
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__loading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading diff\u2026" })
-        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          DiffEditor,
-          {
-            original,
-            modified,
-            language,
-            height,
-            theme: theme ?? OCTAVIAFLOW_THEME_ID,
-            options: mergedOptions,
-            onMount: handleMount,
-            loading: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ods-monaco__loading", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading diff\u2026" })
-            ] })
-          }
-        ) }) })
-      ]
-    }
-  );
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MonacoDiffEditor,