@octaviaflow/core 3.0.1 → 3.0.2

package/dist/monaco.cjs

@@ -0,0 +1,589 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/monaco.ts
+var monaco_exports = {};
+__export(monaco_exports, {
+  MonacoDiffEditor: () => MonacoDiffEditor,
+  MonacoEditor: () => MonacoEditor,
+  OCTAVIAFLOW_LIGHT: () => OCTAVIAFLOW_LIGHT,
+  OCTAVIAFLOW_THEME_ID: () => OCTAVIAFLOW_THEME_ID
+});
+module.exports = __toCommonJS(monaco_exports);
+
+// src/components/MonacoEditor/MonacoEditor.tsx
+var import_react = require("react");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+function cn(...inputs) {
+  return (0, import_clsx.clsx)(inputs);
+}
+
+// src/components/MonacoEditor/octaviaflowTheme.ts
+var OCTAVIAFLOW_LIGHT = {
+  base: "vs",
+  inherit: true,
+  rules: [
+    { token: "", foreground: "161616", background: "FFFFFF" },
+    { token: "comment", foreground: "6F6F6F", fontStyle: "italic" },
+    { token: "string", foreground: "198038" },
+    { token: "string.key.json", foreground: "0F62FE" },
+    { token: "string.value.json", foreground: "198038" },
+    { token: "number", foreground: "0043CE" },
+    { token: "keyword", foreground: "8A3FFC" },
+    { token: "keyword.sql", foreground: "8A3FFC" },
+    { token: "operator", foreground: "393939" },
+    { token: "delimiter", foreground: "525252" },
+    { token: "type", foreground: "0F62FE" },
+    { token: "type.identifier", foreground: "0F62FE" },
+    { token: "identifier", foreground: "161616" },
+    { token: "constant", foreground: "0043CE" },
+    { token: "boolean", foreground: "F1C21B", fontStyle: "bold" },
+    { token: "tag", foreground: "DA1E28" },
+    { token: "attribute.name", foreground: "8A3FFC" },
+    { token: "attribute.value", foreground: "198038" },
+    { token: "regexp", foreground: "DA1E28" },
+    { token: "function", foreground: "0F62FE" },
+    { token: "variable", foreground: "161616" },
+    { token: "variable.parameter", foreground: "393939", fontStyle: "italic" },
+    { token: "namespace", foreground: "0F62FE" }
+  ],
+  colors: {
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#161616",
+    "editor.lineHighlightBackground": "#F4F4F4",
+    "editor.lineHighlightBorder": "#00000000",
+    "editorLineNumber.foreground": "#A8A8A8",
+    "editorLineNumber.activeForeground": "#0F62FE",
+    "editorCursor.foreground": "#0F62FE",
+    "editor.selectionBackground": "#D0E2FF",
+    "editor.selectionHighlightBackground": "#EDF5FF",
+    "editor.wordHighlightBackground": "#EDF5FF",
+    "editor.wordHighlightStrongBackground": "#D0E2FF",
+    "editor.findMatchBackground": "#FFD7D9",
+    "editor.findMatchHighlightBackground": "#FFE9EB",
+    "editorIndentGuide.background1": "#F4F4F4",
+    "editorIndentGuide.activeBackground1": "#E0E0E0",
+    "editorWhitespace.foreground": "#E0E0E0",
+    "editorBracketMatch.background": "#D0E2FF",
+    "editorBracketMatch.border": "#0F62FE",
+    "editor.foldBackground": "#F4F4F4",
+    "editorGutter.background": "#F4F4F4",
+    "editorGutter.modifiedBackground": "#0F62FE",
+    "editorGutter.addedBackground": "#198038",
+    "editorGutter.deletedBackground": "#DA1E28",
+    "editorWidget.background": "#FFFFFF",
+    "editorWidget.foreground": "#161616",
+    "editorWidget.border": "#E0E0E0",
+    "editorSuggestWidget.background": "#FFFFFF",
+    "editorSuggestWidget.border": "#E0E0E0",
+    "editorSuggestWidget.foreground": "#161616",
+    "editorSuggestWidget.selectedBackground": "#EDF5FF",
+    "editorSuggestWidget.selectedForeground": "#161616",
+    "editorSuggestWidget.highlightForeground": "#0F62FE",
+    "editorHoverWidget.background": "#FFFFFF",
+    "editorHoverWidget.border": "#E0E0E0",
+    "editorError.foreground": "#DA1E28",
+    "editorWarning.foreground": "#F1C21B",
+    "editorInfo.foreground": "#0F62FE",
+    "diffEditor.insertedTextBackground": "#A7F0BA40",
+    "diffEditor.removedTextBackground": "#FFB3B840",
+    "diffEditor.insertedLineBackground": "#DEFBE640",
+    "diffEditor.removedLineBackground": "#FFD7D940",
+    "scrollbar.shadow": "#00000000",
+    "scrollbarSlider.background": "#0F62FE20",
+    "scrollbarSlider.hoverBackground": "#0F62FE40",
+    "scrollbarSlider.activeBackground": "#0F62FE60",
+    "minimap.background": "#FAFAFA",
+    "minimap.selectionHighlight": "#0F62FE",
+    "minimapSlider.background": "#0F62FE15",
+    "minimapSlider.hoverBackground": "#0F62FE30",
+    "minimapSlider.activeBackground": "#0F62FE50",
+    "input.background": "#FFFFFF",
+    "input.foreground": "#161616",
+    "input.border": "#C6C6C6",
+    "inputOption.activeBorder": "#0F62FE",
+    "focusBorder": "#0F62FE"
+  }
+};
+var OCTAVIAFLOW_THEME_ID = "octaviaflow-light";
+
+// src/components/MonacoEditor/MonacoEditor.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 MARKER_SEVERITY = {
+  hint: 1,
+  info: 2,
+  warning: 4,
+  error: 8
+};
+function MonacoEditor({
+  value,
+  onChange,
+  language = "plaintext",
+  readOnly = false,
+  height = 320,
+  minHeight = 120,
+  toolbar,
+  status,
+  hideToolbar = false,
+  hideFooter = false,
+  showCopy = true,
+  showFormat = true,
+  showWordWrapToggle = true,
+  showMinimapToggle = true,
+  wordWrap: wordWrapProp,
+  minimap: minimapProp,
+  showLineNumbers = true,
+  markers,
+  options,
+  onMount,
+  style,
+  className,
+  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)(() => {
+    if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
+  }, [wordWrapProp]);
+  (0, import_react.useEffect)(() => {
+    if (minimapProp !== void 0) setMinimap(minimapProp);
+  }, [minimapProp]);
+  (0, import_react.useEffect)(() => {
+    editorRef.current?.updateOptions({
+      wordWrap: wordWrap ? "on" : "off",
+      minimap: { enabled: minimap }
+    });
+  }, [wordWrap, minimap]);
+  (0, import_react.useEffect)(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco || !markers) return;
+    const model = editor.getModel();
+    if (!model) return;
+    monaco.editor.setModelMarkers(
+      model,
+      "octaviaflow",
+      markers.map((m) => ({
+        severity: MARKER_SEVERITY[m.severity ?? "error"],
+        message: m.message,
+        startLineNumber: m.line,
+        startColumn: m.column ?? 1,
+        endLineNumber: m.endLine ?? m.line,
+        endColumn: m.endColumn ?? (m.column ?? 1) + 1,
+        source: m.source
+      }))
+    );
+  }, [markers]);
+  const handleMount = (0, import_react.useCallback)(
+    (editor, monaco) => {
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+      monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
+      monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
+      editor.onDidChangeCursorPosition((e) => {
+        setCursor({ line: e.position.lineNumber, column: e.position.column });
+      });
+      editor.onDidChangeCursorSelection((e) => {
+        const sel = e.selection;
+        if (sel.isEmpty()) {
+          setSelection({ chars: 0, lines: 0 });
+          return;
+        }
+        const model2 = editor.getModel();
+        if (!model2) return;
+        const text = model2.getValueInRange(sel);
+        setSelection({
+          chars: text.length,
+          lines: text.split("\n").length
+        });
+      });
+      const model = editor.getModel();
+      if (model) {
+        setLineCount(model.getLineCount());
+        model.onDidChangeContent(() => setLineCount(model.getLineCount()));
+      }
+      onMount?.(editor, monaco);
+    },
+    [onMount, theme]
+  );
+  const handleCopy = async () => {
+    if (typeof navigator === "undefined") return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  const handleFormat = () => {
+    editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  };
+  const mergedOptions = {
+    readOnly,
+    fontFamily: "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace",
+    fontSize: 13,
+    fontLigatures: true,
+    lineHeight: 20,
+    lineNumbers: showLineNumbers ? "on" : "off",
+    lineNumbersMinChars: 3,
+    lineDecorationsWidth: 6,
+    folding: true,
+    glyphMargin: false,
+    minimap: { enabled: minimap },
+    wordWrap: wordWrap ? "on" : "off",
+    scrollBeyondLastLine: false,
+    smoothScrolling: true,
+    cursorBlinking: "smooth",
+    cursorSmoothCaretAnimation: "on",
+    renderLineHighlight: "line",
+    padding: { top: 8, bottom: 8 },
+    bracketPairColorization: { enabled: true },
+    guides: { bracketPairs: true, indentation: true },
+    automaticLayout: true,
+    tabSize: 2,
+    insertSpaces: true,
+    scrollbar: {
+      verticalScrollbarSize: 8,
+      horizontalScrollbarSize: 8,
+      useShadows: false
+    },
+    fixedOverflowWidgets: true,
+    contextmenu: true,
+    suggestOnTriggerCharacters: true,
+    quickSuggestions: { other: true, comments: false, strings: false },
+    formatOnPaste: false,
+    formatOnType: false,
+    "semanticHighlighting.enabled": true,
+    ...options
+  };
+  const showWrapBtn = showWordWrapToggle && wordWrapProp === void 0;
+  const showMinimapBtn = showMinimapToggle && minimapProp === void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "ods-monaco",
+        `ods-monaco--${language}`,
+        readOnly && "ods-monaco--readonly",
+        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.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: [
+              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)(
+              "button",
+              {
+                type: "button",
+                className: cn("ods-monaco__btn", wordWrap && "ods-monaco__btn--active"),
+                onClick: () => setWordWrap((w) => !w),
+                "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)(
+                  "path",
+                  {
+                    d: "M2 3.5h10M2 7h7.5a2 2 0 1 1 0 4H8m0 0 1.5-1.5M8 11l1.5 1.5M2 10.5h3",
+                    stroke: "currentColor",
+                    strokeWidth: "1.2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) })
+              }
+            ),
+            showMinimapBtn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: cn("ods-monaco__btn", minimap && "ods-monaco__btn--active"),
+                onClick: () => setMinimap((m) => !m),
+                "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" })
+                ] })
+              }
+            ),
+            showFormat && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "ods-monaco__btn",
+                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" })
+                ] })
+              }
+            ),
+            showCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: cn("ods-monaco__btn", copied && "ods-monaco__btn--success"),
+                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)(
+                  "path",
+                  {
+                    d: "m3 7 3 3 5-6",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    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_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,
+          {
+            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" })
+            ] }),
+            "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: [
+            "Ln ",
+            cursor.line,
+            ", Col ",
+            cursor.column,
+            selection.chars > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              " ",
+              "\xB7 ",
+              selection.chars,
+              " char",
+              selection.chars === 1 ? "" : "s",
+              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" }),
+            " 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" }),
+            " 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" }),
+            " commands"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// 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,
+  MonacoEditor,
+  OCTAVIAFLOW_LIGHT,
+  OCTAVIAFLOW_THEME_ID
+});
+//# sourceMappingURL=monaco.cjs.map