@octaviaflow/core 3.0.14 → 3.0.17-beta.0

package/dist/monaco.js

@@ -2,15 +2,8 @@ import {
   cn
 } from "./chunk-ZAUUGK2Y.js";
 
-// src/components/MonacoEditor/MonacoEditor.tsx
-import {
-  Suspense,
-  lazy,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
+// src/components/MonacoEditor/MonacoDiffEditor.tsx
+import { lazy, Suspense, useRef, useState } from "react";
 
 // src/components/MonacoEditor/octaviaflowTheme.ts
 var OCTAVIAFLOW_LIGHT = {
@@ -96,16 +89,206 @@ 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
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Editor = lazy(
-  () => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor }))
+// src/components/MonacoEditor/MonacoDiffEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DiffEditor = 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 = useRef(null);
+  const [sideBySide, setSideBySide] = 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__ */ jsxs("div", { className: cn("ods-monaco-diff", `ods-monaco-diff--${language}`, className), style, children: [
+    !hideToolbar && /* @__PURE__ */ jsxs("div", { className: "ods-monaco__toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ods-monaco__toolbar-left", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ods-monaco__lang", children: [
+          "DIFF \xB7 ",
+          language.toUpperCase()
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "ods-monaco-diff__labels", children: [
+          /* @__PURE__ */ jsx("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--orig", children: originalLabel }),
+          /* @__PURE__ */ jsx("span", { className: "ods-monaco-diff__arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ jsx("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--mod", children: modifiedLabel })
+        ] }),
+        toolbar
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ods-monaco__toolbar-right", children: /* @__PURE__ */ 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__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "1.5",
+                y: "2",
+                width: "5",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "7.5",
+                y: "2",
+                width: "5",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "1.5",
+                y: "2",
+                width: "11",
+                height: "10",
+                rx: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.3"
+              }
+            ),
+            /* @__PURE__ */ jsx("path", { d: "M1.5 7h11", stroke: "currentColor", strokeWidth: "1.3" })
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxs("div", { className: "ods-monaco__loading", children: [
+          /* @__PURE__ */ jsx("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "7",
+              cy: "7",
+              r: "5",
+              stroke: "currentColor",
+              strokeWidth: "1.4",
+              strokeDasharray: "4 18",
+              strokeLinecap: "round"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("span", { children: "Loading diff\u2026" })
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          DiffEditor,
+          {
+            original,
+            modified,
+            language,
+            height,
+            theme: theme ?? OCTAVIAFLOW_THEME_ID,
+            options: mergedOptions,
+            onMount: handleMount,
+            loading: /* @__PURE__ */ jsxs("div", { className: "ods-monaco__loading", children: [
+              /* @__PURE__ */ jsx("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "7",
+                  cy: "7",
+                  r: "5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeDasharray: "4 18",
+                  strokeLinecap: "round"
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("span", { children: "Loading diff\u2026" })
+            ] })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+// src/components/MonacoEditor/MonacoEditor.tsx
+import {
+  lazy as lazy2,
+  Suspense as Suspense2,
+  useCallback,
+  useEffect,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Editor = lazy2(() => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor })));
 var MARKER_SEVERITY = {
   hint: 1,
   info: 2,
@@ -138,14 +321,14 @@ function MonacoEditor({
   ariaLabel = "Code editor",
   theme
 }) {
-  const editorRef = useRef(null);
-  const monacoRef = useRef(null);
-  const [wordWrap, setWordWrap] = useState(wordWrapProp ?? false);
-  const [minimap, setMinimap] = useState(minimapProp ?? false);
-  const [copied, setCopied] = useState(false);
-  const [cursor, setCursor] = useState({ line: 1, column: 1 });
-  const [selection, setSelection] = useState({ chars: 0, lines: 0 });
-  const [lineCount, setLineCount] = useState(value.split("\n").length);
+  const editorRef = useRef2(null);
+  const monacoRef = useRef2(null);
+  const [wordWrap, setWordWrap] = useState2(wordWrapProp ?? false);
+  const [minimap, setMinimap] = useState2(minimapProp ?? false);
+  const [copied, setCopied] = useState2(false);
+  const [cursor, setCursor] = useState2({ line: 1, column: 1 });
+  const [selection, setSelection] = useState2({ chars: 0, lines: 0 });
+  const [lineCount, setLineCount] = useState2(value.split("\n").length);
   useEffect(() => {
     if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
   }, [wordWrapProp]);
@@ -262,7 +445,7 @@ function MonacoEditor({
   };
   const showWrapBtn = showWordWrapToggle && wordWrapProp === void 0;
   const showMinimapBtn = showMinimapToggle && minimapProp === void 0;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
@@ -273,19 +456,19 @@ function MonacoEditor({
       ),
       style,
       children: [
-        !hideToolbar && /* @__PURE__ */ jsxs("div", { className: "ods-monaco__toolbar", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ods-monaco__toolbar-left", children: [
-            /* @__PURE__ */ jsx("span", { className: "ods-monaco__lang", children: language.toUpperCase() }),
+        !hideToolbar && /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__toolbar", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__toolbar-left", children: [
+            /* @__PURE__ */ jsx2("span", { className: "ods-monaco__lang", children: language.toUpperCase() }),
             toolbar
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ods-monaco__toolbar-right", children: [
-            /* @__PURE__ */ jsxs("span", { className: "ods-monaco__lines", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__toolbar-right", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__lines", children: [
               lineCount,
               " line",
               lineCount === 1 ? "" : "s"
             ] }),
-            status && /* @__PURE__ */ jsx("span", { className: "ods-monaco__status", children: status }),
-            showWrapBtn && /* @__PURE__ */ jsx(
+            status && /* @__PURE__ */ jsx2("span", { className: "ods-monaco__status", children: status }),
+            showWrapBtn && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -294,7 +477,7 @@ function MonacoEditor({
                 "aria-pressed": wordWrap,
                 "aria-label": "Toggle word wrap",
                 title: "Word wrap",
-                children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
                   "path",
                   {
                     d: "M2 3.5h10M2 7h7.5a2 2 0 1 1 0 4H8m0 0 1.5-1.5M8 11l1.5 1.5M2 10.5h3",
@@ -306,7 +489,7 @@ function MonacoEditor({
                 ) })
               }
             ),
-            showMinimapBtn && /* @__PURE__ */ jsx(
+            showMinimapBtn && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -315,14 +498,44 @@ function MonacoEditor({
                 "aria-pressed": minimap,
                 "aria-label": "Toggle minimap",
                 title: "Minimap",
-                children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("rect", { x: "2", y: "2.5", width: "6", height: "9", rx: "0.5", stroke: "currentColor", strokeWidth: "1.2" }),
-                  /* @__PURE__ */ jsx("rect", { x: "9", y: "2.5", width: "3", height: "9", rx: "0.5", fill: "currentColor", opacity: "0.25" }),
-                  /* @__PURE__ */ jsx("path", { d: "M3.5 4.5h3M3.5 6.5h3M3.5 8.5h2", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })
+                children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx2(
+                    "rect",
+                    {
+                      x: "2",
+                      y: "2.5",
+                      width: "6",
+                      height: "9",
+                      rx: "0.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.2"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "rect",
+                    {
+                      x: "9",
+                      y: "2.5",
+                      width: "3",
+                      height: "9",
+                      rx: "0.5",
+                      fill: "currentColor",
+                      opacity: "0.25"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "path",
+                    {
+                      d: "M3.5 4.5h3M3.5 6.5h3M3.5 8.5h2",
+                      stroke: "currentColor",
+                      strokeWidth: "1",
+                      strokeLinecap: "round"
+                    }
+                  )
                 ] })
               }
             ),
-            showFormat && !readOnly && /* @__PURE__ */ jsx(
+            showFormat && !readOnly && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -330,13 +543,30 @@ function MonacoEditor({
                 onClick: handleFormat,
                 "aria-label": "Format document",
                 title: "Format (Shift+Alt+F)",
-                children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("path", { d: "M2.5 4h9M4 7h7.5M5.5 10H11", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }),
-                  /* @__PURE__ */ jsx("path", { d: "M2.5 7 3.5 6 2.5 5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+                children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx2(
+                    "path",
+                    {
+                      d: "M2.5 4h9M4 7h7.5M5.5 10H11",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "path",
+                    {
+                      d: "M2.5 7 3.5 6 2.5 5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
                 ] })
               }
             ),
-            showCopy && /* @__PURE__ */ jsx(
+            showCopy && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -344,7 +574,7 @@ function MonacoEditor({
                 onClick: handleCopy,
                 "aria-label": "Copy",
                 title: "Copy",
-                children: copied ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                children: copied ? /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
                   "path",
                   {
                     d: "m3 7 3 3 5-6",
@@ -353,41 +583,88 @@ function MonacoEditor({
                     strokeLinecap: "round",
                     strokeLinejoin: "round"
                   }
-                ) }) : /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", stroke: "currentColor", strokeWidth: "1.3" }),
-                  /* @__PURE__ */ jsx("path", { d: "M5 1.5h6V8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
+                ) }) : /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx2(
+                    "rect",
+                    {
+                      x: "3",
+                      y: "3",
+                      width: "8",
+                      height: "8",
+                      rx: "1",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "path",
+                    {
+                      d: "M5 1.5h6V8",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  )
                 ] })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsxs("div", { className: "ods-monaco__loading", children: [
-          /* @__PURE__ */ jsx("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-          /* @__PURE__ */ jsx("span", { children: "Loading editor\u2026" })
-        ] }), children: /* @__PURE__ */ jsx(
-          Editor,
+        /* @__PURE__ */ jsx2("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx2(
+          Suspense2,
           {
-            value,
-            onChange: (v) => onChange?.(v ?? ""),
-            language,
-            height,
-            theme: theme ?? OCTAVIAFLOW_THEME_ID,
-            options: mergedOptions,
-            onMount: handleMount,
-            loading: /* @__PURE__ */ jsxs("div", { className: "ods-monaco__loading", children: [
-              /* @__PURE__ */ jsx("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-              /* @__PURE__ */ jsx("span", { children: "Loading editor\u2026" })
+            fallback: /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__loading", children: [
+              /* @__PURE__ */ jsx2("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx2(
+                "circle",
+                {
+                  cx: "7",
+                  cy: "7",
+                  r: "5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeDasharray: "4 18",
+                  strokeLinecap: "round"
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx2("span", { children: "Loading editor\u2026" })
             ] }),
-            "aria-label": ariaLabel
+            children: /* @__PURE__ */ jsx2(
+              Editor,
+              {
+                value,
+                onChange: (v) => onChange?.(v ?? ""),
+                language,
+                height,
+                theme: theme ?? OCTAVIAFLOW_THEME_ID,
+                options: mergedOptions,
+                onMount: handleMount,
+                loading: /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__loading", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx2(
+                    "circle",
+                    {
+                      cx: "7",
+                      cy: "7",
+                      r: "5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.4",
+                      strokeDasharray: "4 18",
+                      strokeLinecap: "round"
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx2("span", { children: "Loading editor\u2026" })
+                ] }),
+                "aria-label": ariaLabel
+              }
+            )
           }
-        ) }) }),
-        !hideFooter && /* @__PURE__ */ jsxs("div", { className: "ods-monaco__footer", children: [
-          /* @__PURE__ */ jsxs("span", { className: "ods-monaco__pos", children: [
+        ) }),
+        !hideFooter && /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__footer", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__pos", children: [
             "Ln ",
             cursor.line,
             ", Col ",
             cursor.column,
-            selection.chars > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            selection.chars > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
               " ",
               "\xB7 ",
               selection.chars,
@@ -396,14 +673,14 @@ function MonacoEditor({
               selection.lines > 1 && ` \xB7 ${selection.lines} lines`
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: "ods-monaco__shortcut-hint", children: [
-            /* @__PURE__ */ jsx("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
+          /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__shortcut-hint", children: [
+            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
             " find",
-            /* @__PURE__ */ jsx("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ jsx("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
+            /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
+            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
             " replace",
-            /* @__PURE__ */ jsx("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ jsx("kbd", { className: "ods-monaco__kbd", children: "F1" }),
+            /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
+            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "F1" }),
             " commands"
           ] })
         ] })
@@ -411,140 +688,6 @@ function MonacoEditor({
     }
   );
 }
-
-// src/components/MonacoEditor/MonacoDiffEditor.tsx
-import { Suspense as Suspense2, lazy as lazy2, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var DiffEditor = lazy2(
-  () => 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 = useRef2(null);
-  const [sideBySide, setSideBySide] = useState2(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__ */ jsxs2(
-    "div",
-    {
-      className: cn("ods-monaco-diff", `ods-monaco-diff--${language}`, className),
-      style,
-      children: [
-        !hideToolbar && /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__toolbar", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__toolbar-left", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__lang", children: [
-              "DIFF \xB7 ",
-              language.toUpperCase()
-            ] }),
-            /* @__PURE__ */ jsxs2("span", { className: "ods-monaco-diff__labels", children: [
-              /* @__PURE__ */ jsx2("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--orig", children: originalLabel }),
-              /* @__PURE__ */ jsx2("span", { className: "ods-monaco-diff__arrow", "aria-hidden": "true", children: "\u2192" }),
-              /* @__PURE__ */ jsx2("span", { className: "ods-monaco-diff__label ods-monaco-diff__label--mod", children: modifiedLabel })
-            ] }),
-            toolbar
-          ] }),
-          /* @__PURE__ */ jsx2("div", { className: "ods-monaco__toolbar-right", children: /* @__PURE__ */ jsx2(
-            "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__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx2("rect", { x: "1.5", y: "2", width: "5", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" }),
-                /* @__PURE__ */ jsx2("rect", { x: "7.5", y: "2", width: "5", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" })
-              ] }) : /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx2("rect", { x: "1.5", y: "2", width: "11", height: "10", rx: "0.5", stroke: "currentColor", strokeWidth: "1.3" }),
-                /* @__PURE__ */ jsx2("path", { d: "M1.5 7h11", stroke: "currentColor", strokeWidth: "1.3" })
-              ] })
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx2("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx2(Suspense2, { fallback: /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__loading", children: [
-          /* @__PURE__ */ jsx2("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-          /* @__PURE__ */ jsx2("span", { children: "Loading diff\u2026" })
-        ] }), children: /* @__PURE__ */ jsx2(
-          DiffEditor,
-          {
-            original,
-            modified,
-            language,
-            height,
-            theme: theme ?? OCTAVIAFLOW_THEME_ID,
-            options: mergedOptions,
-            onMount: handleMount,
-            loading: /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__loading", children: [
-              /* @__PURE__ */ jsx2("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "4 18", strokeLinecap: "round" }) }) }),
-              /* @__PURE__ */ jsx2("span", { children: "Loading diff\u2026" })
-            ] })
-          }
-        ) }) })
-      ]
-    }
-  );
-}
 export {
   MonacoDiffEditor,
   MonacoEditor,