@octaviaflow/core 3.1.0-beta.114 → 3.1.0-beta.115

package/dist/monaco.cjs

@@ -38,8 +38,8 @@ __export(monaco_exports, {
 module.exports = __toCommonJS(monaco_exports);
 
 // src/components/MonacoEditor/MonacoDiffEditor.tsx
-var import_react = require("react");
 var import_icons = require("@octaviaflow/icons");
+var import_react = require("react");
 
 // src/utils/cn.ts
 var import_clsx = require("clsx");
@@ -147,451 +147,426 @@ function LoadingPlaceholder() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading diff\u2026" })
   ] });
 }
-var MonacoDiffEditor = (0, import_react.forwardRef)(function MonacoDiffEditor2({
-  original,
-  modified,
-  onModifiedChange,
+var MonacoDiffEditor = (0, import_react.forwardRef)(
+  function MonacoDiffEditor2({
+    original,
+    modified,
+    onModifiedChange,
+    language = "plaintext",
+    renderSideBySide = true,
+    readOnly = false,
+    hideUnchangedRegions = false,
+    height = 360,
+    minHeight = 200,
+    originalLabel = "Original",
+    modifiedLabel = "Modified",
+    toolbar,
+    options,
+    onMount,
+    className,
+    theme,
+    hideToolbar = false,
+    ...rest
+  }, ref) {
+    const editorRef = (0, import_react.useRef)(null);
+    const monacoRef = (0, import_react.useRef)(null);
+    const [sideBySide, setSideBySide] = (0, import_react.useState)(renderSideBySide);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        focus: () => editorRef.current?.getModifiedEditor().focus(),
+        getDiffEditor: () => editorRef.current,
+        getMonaco: () => monacoRef.current,
+        getOriginalValue: () => editorRef.current?.getOriginalEditor().getValue() ?? "",
+        getModifiedValue: () => editorRef.current?.getModifiedEditor().getValue() ?? "",
+        setModifiedValue: (v) => editorRef.current?.getModifiedEditor().setValue(v)
+      }),
+      []
+    );
+    const handleMount = (diffEditor, monaco) => {
+      editorRef.current = diffEditor;
+      monacoRef.current = monaco;
+      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", { ...rest, className: cn("ods-monaco-diff", `ods-monaco-diff--${language}`, className), 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": sideBySide ? "Switch to inline diff" : "Switch to side-by-side",
+            title: sideBySide ? "Inline" : "Side-by-side",
+            children: sideBySide ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SplitIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SquareOutlineIcon, {})
+          }
+        ) })
+      ] }),
+      /* @__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.jsx)(LoadingPlaceholder, {}), 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.jsx)(LoadingPlaceholder, {})
+        }
+      ) }) })
+    ] });
+  }
+);
+MonacoDiffEditor.displayName = "MonacoDiffEditor";
+
+// src/components/MonacoEditor/MonacoEditor.tsx
+var import_icons2 = require("@octaviaflow/icons");
+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,
+  warning: 4,
+  error: 8
+};
+function LoadingPlaceholder2({ label }) {
+  return /* @__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)(import_icons2.RenewIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label })
+  ] });
+}
+var MonacoEditor = (0, import_react2.forwardRef)(function MonacoEditor2({
+  value,
+  onChange,
   language = "plaintext",
-  renderSideBySide = true,
   readOnly = false,
-  hideUnchangedRegions = false,
-  height = 360,
-  minHeight = 200,
-  originalLabel = "Original",
-  modifiedLabel = "Modified",
+  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,
+  onCopy,
+  copySuccessTimeoutMs = 1200,
   className,
+  ariaLabel = "Code editor",
   theme,
-  hideToolbar = false,
   ...rest
 }, ref) {
-  const editorRef = (0, import_react.useRef)(null);
-  const monacoRef = (0, import_react.useRef)(null);
-  const [sideBySide, setSideBySide] = (0, import_react.useState)(renderSideBySide);
-  (0, import_react.useImperativeHandle)(
+  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.useImperativeHandle)(
     ref,
     () => ({
-      focus: () => editorRef.current?.getModifiedEditor().focus(),
-      getDiffEditor: () => editorRef.current,
+      focus: () => editorRef.current?.focus(),
+      getEditor: () => editorRef.current,
       getMonaco: () => monacoRef.current,
-      getOriginalValue: () => editorRef.current?.getOriginalEditor().getValue() ?? "",
-      getModifiedValue: () => editorRef.current?.getModifiedEditor().getValue() ?? "",
-      setModifiedValue: (v) => editorRef.current?.getModifiedEditor().setValue(v)
+      getValue: () => editorRef.current?.getValue() ?? "",
+      setValue: (v) => editorRef.current?.setValue(v),
+      format: () => editorRef.current?.getAction("editor.action.formatDocument")?.run()
     }),
     []
   );
-  const handleMount = (diffEditor, monaco) => {
-    editorRef.current = diffEditor;
-    monacoRef.current = monaco;
-    monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
-    monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
-    const modifiedEditor = diffEditor.getModifiedEditor();
-    modifiedEditor.onDidChangeModelContent(() => {
-      onModifiedChange?.(modifiedEditor.getValue());
+  (0, import_react2.useEffect)(() => {
+    if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
+  }, [wordWrapProp]);
+  (0, import_react2.useEffect)(() => {
+    if (minimapProp !== void 0) setMinimap(minimapProp);
+  }, [minimapProp]);
+  (0, import_react2.useEffect)(() => {
+    editorRef.current?.updateOptions({
+      wordWrap: wordWrap ? "on" : "off",
+      minimap: { enabled: minimap }
     });
-    onMount?.(diffEditor, monaco);
+  }, [wordWrap, minimap]);
+  (0, import_react2.useEffect)(() => {
+    const ed = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!ed || !monaco || !markers) return;
+    const model = ed.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_react2.useCallback)(
+    (ed, monaco) => {
+      editorRef.current = ed;
+      monacoRef.current = monaco;
+      monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
+      monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
+      ed.onDidChangeCursorPosition((e) => {
+        setCursor({ line: e.position.lineNumber, column: e.position.column });
+      });
+      ed.onDidChangeCursorSelection((e) => {
+        const sel = e.selection;
+        if (sel.isEmpty()) {
+          setSelection({ chars: 0, lines: 0 });
+          return;
+        }
+        const model2 = ed.getModel();
+        if (!model2) return;
+        const text = model2.getValueInRange(sel);
+        setSelection({
+          chars: text.length,
+          lines: text.split("\n").length
+        });
+      });
+      const model = ed.getModel();
+      if (model) {
+        setLineCount(model.getLineCount());
+        model.onDidChangeContent(() => setLineCount(model.getLineCount()));
+      }
+      onMount?.(ed, monaco);
+    },
+    [onMount, theme]
+  );
+  const handleCopy = async () => {
+    if (typeof navigator === "undefined") return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      onCopy?.(value);
+      setTimeout(() => setCopied(false), copySuccessTimeoutMs);
+    } catch {
+    }
+  };
+  const handleFormat = () => {
+    editorRef.current?.getAction("editor.action.formatDocument")?.run();
   };
   const mergedOptions = {
     readOnly,
-    originalEditable: false,
-    renderSideBySide: sideBySide,
     fontFamily: "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace",
     fontSize: 13,
+    fontLigatures: true,
     lineHeight: 20,
-    automaticLayout: true,
+    lineNumbers: showLineNumbers ? "on" : "off",
     lineNumbersMinChars: 3,
     lineDecorationsWidth: 6,
     folding: true,
     glyphMargin: false,
-    minimap: { enabled: false },
+    minimap: { enabled: minimap },
+    wordWrap: wordWrap ? "on" : "off",
     scrollBeyondLastLine: false,
     smoothScrolling: true,
-    renderOverviewRuler: true,
-    diffWordWrap: "off",
+    cursorBlinking: "smooth",
+    cursorSmoothCaretAnimation: "on",
+    renderLineHighlight: "line",
     padding: { top: 8, bottom: 8 },
-    hideUnchangedRegions: {
-      enabled: hideUnchangedRegions,
-      revealLineCount: 20,
-      minimumLineCount: 3,
-      contextLineCount: 3
-    },
+    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
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const showWrapBtn = showWordWrapToggle && wordWrapProp === void 0;
+  const showMinimapBtn = showMinimapToggle && minimapProp === void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...rest,
       className: cn(
-        "ods-monaco-diff",
-        `ods-monaco-diff--${language}`,
+        "ods-monaco",
+        `ods-monaco--${language}`,
+        readOnly && "ods-monaco--readonly",
         className
       ),
       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 })
-            ] }),
+        !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.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": sideBySide ? "Switch to inline diff" : "Switch to side-by-side",
-              title: sideBySide ? "Inline" : "Side-by-side",
-              children: sideBySide ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SplitIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SquareOutlineIcon, {})
-            }
-          ) })
+          /* @__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_runtime2.jsx)("span", { className: "ods-monaco__status", children: status }),
+            showWrapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(import_icons2.TextWrapIcon, {})
+              }
+            ),
+            showMinimapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.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: minimap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MinimapOnIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MinimapOffIcon, {})
+              }
+            ),
+            showFormat && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "ods-monaco__btn",
+                onClick: handleFormat,
+                "aria-label": "Format document",
+                title: "Format (Shift+Alt+F)",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MagicWandIcon, {})
+              }
+            ),
+            showCopy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                className: cn("ods-monaco__btn", copied && "ods-monaco__btn--success"),
+                onClick: handleCopy,
+                "aria-label": copied ? "Copied" : "Copy",
+                title: copied ? "Copied" : "Copy",
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CheckmarkIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CopyIcon, {})
+              }
+            )
+          ] })
         ] }),
-        /* @__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.jsx)(LoadingPlaceholder, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          DiffEditor,
+        /* @__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.jsx)(LoadingPlaceholder2, { label: "Loading editor\u2026" }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Editor,
           {
-            original,
-            modified,
+            value,
+            onChange: (v) => onChange?.(v ?? ""),
             language,
             height,
             theme: theme ?? OCTAVIAFLOW_THEME_ID,
             options: mergedOptions,
             onMount: handleMount,
-            loading: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPlaceholder, {})
+            loading: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingPlaceholder2, { label: "Loading editor\u2026" }),
+            "aria-label": ariaLabel
           }
-        ) }) })
+        ) }) }),
+        !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_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              " ",
+              "\xB7 ",
+              selection.chars,
+              " char",
+              selection.chars === 1 ? "" : "s",
+              selection.lines > 1 && ` \xB7 ${selection.lines} lines`
+            ] })
+          ] }),
+          /* @__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_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_runtime2.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "ods-monaco__kbd", children: "F1" }),
+            " commands"
+          ] })
+        ] })
       ]
     }
   );
 });
-MonacoDiffEditor.displayName = "MonacoDiffEditor";
-
-// src/components/MonacoEditor/MonacoEditor.tsx
-var import_react2 = require("react");
-var import_icons2 = require("@octaviaflow/icons");
-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,
-  warning: 4,
-  error: 8
-};
-function LoadingPlaceholder2({ label }) {
-  return /* @__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)(import_icons2.RenewIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label })
-  ] });
-}
-var MonacoEditor = (0, import_react2.forwardRef)(
-  function MonacoEditor2({
-    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,
-    onCopy,
-    copySuccessTimeoutMs = 1200,
-    className,
-    ariaLabel = "Code editor",
-    theme,
-    ...rest
-  }, ref) {
-    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.useImperativeHandle)(
-      ref,
-      () => ({
-        focus: () => editorRef.current?.focus(),
-        getEditor: () => editorRef.current,
-        getMonaco: () => monacoRef.current,
-        getValue: () => editorRef.current?.getValue() ?? "",
-        setValue: (v) => editorRef.current?.setValue(v),
-        format: () => editorRef.current?.getAction("editor.action.formatDocument")?.run()
-      }),
-      []
-    );
-    (0, import_react2.useEffect)(() => {
-      if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
-    }, [wordWrapProp]);
-    (0, import_react2.useEffect)(() => {
-      if (minimapProp !== void 0) setMinimap(minimapProp);
-    }, [minimapProp]);
-    (0, import_react2.useEffect)(() => {
-      editorRef.current?.updateOptions({
-        wordWrap: wordWrap ? "on" : "off",
-        minimap: { enabled: minimap }
-      });
-    }, [wordWrap, minimap]);
-    (0, import_react2.useEffect)(() => {
-      const ed = editorRef.current;
-      const monaco = monacoRef.current;
-      if (!ed || !monaco || !markers) return;
-      const model = ed.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_react2.useCallback)(
-      (ed, monaco) => {
-        editorRef.current = ed;
-        monacoRef.current = monaco;
-        monaco.editor.defineTheme(OCTAVIAFLOW_THEME_ID, OCTAVIAFLOW_LIGHT);
-        monaco.editor.setTheme(theme ?? OCTAVIAFLOW_THEME_ID);
-        ed.onDidChangeCursorPosition((e) => {
-          setCursor({ line: e.position.lineNumber, column: e.position.column });
-        });
-        ed.onDidChangeCursorSelection((e) => {
-          const sel = e.selection;
-          if (sel.isEmpty()) {
-            setSelection({ chars: 0, lines: 0 });
-            return;
-          }
-          const model2 = ed.getModel();
-          if (!model2) return;
-          const text = model2.getValueInRange(sel);
-          setSelection({
-            chars: text.length,
-            lines: text.split("\n").length
-          });
-        });
-        const model = ed.getModel();
-        if (model) {
-          setLineCount(model.getLineCount());
-          model.onDidChangeContent(() => setLineCount(model.getLineCount()));
-        }
-        onMount?.(ed, monaco);
-      },
-      [onMount, theme]
-    );
-    const handleCopy = async () => {
-      if (typeof navigator === "undefined") return;
-      try {
-        await navigator.clipboard.writeText(value);
-        setCopied(true);
-        onCopy?.(value);
-        setTimeout(() => setCopied(false), copySuccessTimeoutMs);
-      } 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_runtime2.jsxs)(
-      "div",
-      {
-        ...rest,
-        className: cn(
-          "ods-monaco",
-          `ods-monaco--${language}`,
-          readOnly && "ods-monaco--readonly",
-          className
-        ),
-        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.jsx)("span", { className: "ods-monaco__lang", children: language.toUpperCase() }),
-              toolbar
-            ] }),
-            /* @__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_runtime2.jsx)("span", { className: "ods-monaco__status", children: status }),
-              showWrapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(import_icons2.TextWrapIcon, {})
-                }
-              ),
-              showMinimapBtn && /* @__PURE__ */ (0, import_jsx_runtime2.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: minimap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MinimapOnIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MinimapOffIcon, {})
-                }
-              ),
-              showFormat && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "ods-monaco__btn",
-                  onClick: handleFormat,
-                  "aria-label": "Format document",
-                  title: "Format (Shift+Alt+F)",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.MagicWandIcon, {})
-                }
-              ),
-              showCopy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: cn(
-                    "ods-monaco__btn",
-                    copied && "ods-monaco__btn--success"
-                  ),
-                  onClick: handleCopy,
-                  "aria-label": copied ? "Copied" : "Copy",
-                  title: copied ? "Copied" : "Copy",
-                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CheckmarkIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CopyIcon, {})
-                }
-              )
-            ] })
-          ] }),
-          /* @__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.jsx)(LoadingPlaceholder2, { label: "Loading editor\u2026" }), 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.jsx)(LoadingPlaceholder2, { label: "Loading editor\u2026" }),
-              "aria-label": ariaLabel
-            }
-          ) }) }),
-          !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_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                " ",
-                "\xB7 ",
-                selection.chars,
-                " char",
-                selection.chars === 1 ? "" : "s",
-                selection.lines > 1 && ` \xB7 ${selection.lines} lines`
-              ] })
-            ] }),
-            /* @__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_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_runtime2.jsx)("span", { className: "ods-monaco__sep", children: "\xB7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "ods-monaco__kbd", children: "F1" }),
-              " commands"
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
 MonacoEditor.displayName = "MonacoEditor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {