@octaviaflow/core 3.0.18-beta.0 → 3.0.18

package/dist/monaco.js

@@ -3,7 +3,19 @@ import {
 } from "./chunk-ZAUUGK2Y.js";
 
 // src/components/MonacoEditor/MonacoDiffEditor.tsx
-import { lazy, Suspense, useRef, useState } from "react";
+import {
+  forwardRef,
+  lazy,
+  Suspense,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import {
+  RenewIcon,
+  SplitIcon,
+  SquareOutlineIcon
+} from "@octaviaflow/icons";
 
 // src/components/MonacoEditor/octaviaflowTheme.ts
 var OCTAVIAFLOW_LIGHT = {
@@ -99,7 +111,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var DiffEditor = lazy(
   () => import("@monaco-editor/react").then((mod) => ({ default: mod.DiffEditor }))
 );
-function MonacoDiffEditor({
+function LoadingPlaceholder() {
+  return /* @__PURE__ */ jsxs("div", { className: "ods-monaco__loading", children: [
+    /* @__PURE__ */ jsx("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx(RenewIcon, {}) }),
+    /* @__PURE__ */ jsx("span", { children: "Loading diff\u2026" })
+  ] });
+}
+var MonacoDiffEditor = forwardRef(function MonacoDiffEditor2({
   original,
   modified,
   onModifiedChange,
@@ -114,15 +132,29 @@ function MonacoDiffEditor({
   toolbar,
   options,
   onMount,
-  style,
   className,
   theme,
-  hideToolbar = false
-}) {
+  hideToolbar = false,
+  ...rest
+}, ref) {
   const editorRef = useRef(null);
+  const monacoRef = useRef(null);
   const [sideBySide, setSideBySide] = useState(renderSideBySide);
+  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();
@@ -162,91 +194,46 @@ function MonacoDiffEditor({
     },
     ...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",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "ods-monaco-diff",
+        `ods-monaco-diff--${language}`,
+        className
+      ),
+      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",
             {
-              cx: "7",
-              cy: "7",
-              r: "5",
-              stroke: "currentColor",
-              strokeWidth: "1.4",
-              strokeDasharray: "4 18",
-              strokeLinecap: "round"
+              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__ */ jsx(SplitIcon, {}) : /* @__PURE__ */ jsx(SquareOutlineIcon, {})
             }
-          ) }) }),
-          /* @__PURE__ */ jsx("span", { children: "Loading diff\u2026" })
+          ) })
         ] }),
-        children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPlaceholder, {}), children: /* @__PURE__ */ jsx(
           DiffEditor,
           {
             original,
@@ -256,438 +243,343 @@ function MonacoDiffEditor({
             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" })
-            ] })
+            loading: /* @__PURE__ */ jsx(LoadingPlaceholder, {})
           }
-        )
-      }
-    ) })
-  ] });
-}
+        ) }) })
+      ]
+    }
+  );
+});
+MonacoDiffEditor.displayName = "MonacoDiffEditor";
 
 // src/components/MonacoEditor/MonacoEditor.tsx
 import {
+  forwardRef as forwardRef2,
   lazy as lazy2,
   Suspense as Suspense2,
   useCallback,
   useEffect,
+  useImperativeHandle as useImperativeHandle2,
   useRef as useRef2,
   useState as useState2
 } from "react";
+import {
+  CheckmarkIcon,
+  CopyIcon,
+  MagicWandIcon,
+  MinimapOffIcon,
+  MinimapOnIcon,
+  RenewIcon as RenewIcon2,
+  TextWrapIcon
+} from "@octaviaflow/icons";
 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 Editor = lazy2(
+  () => 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 = 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]);
-  useEffect(() => {
-    if (minimapProp !== void 0) setMinimap(minimapProp);
-  }, [minimapProp]);
-  useEffect(() => {
-    editorRef.current?.updateOptions({
-      wordWrap: wordWrap ? "on" : "off",
-      minimap: { enabled: minimap }
-    });
-  }, [wordWrap, minimap]);
-  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
-      }))
+function LoadingPlaceholder2({ label }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "ods-monaco__loading", children: [
+    /* @__PURE__ */ jsx2("span", { className: "ods-monaco__loading-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(RenewIcon2, {}) }),
+    /* @__PURE__ */ jsx2("span", { children: label })
+  ] });
+}
+var MonacoEditor = forwardRef2(
+  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 = 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);
+    useImperativeHandle2(
+      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()
+      }),
+      []
     );
-  }, [markers]);
-  const handleMount = 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 });
+    useEffect(() => {
+      if (wordWrapProp !== void 0) setWordWrap(wordWrapProp);
+    }, [wordWrapProp]);
+    useEffect(() => {
+      if (minimapProp !== void 0) setMinimap(minimapProp);
+    }, [minimapProp]);
+    useEffect(() => {
+      editorRef.current?.updateOptions({
+        wordWrap: wordWrap ? "on" : "off",
+        minimap: { enabled: minimap }
       });
-      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
+    }, [wordWrap, minimap]);
+    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 = 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 });
         });
-      });
-      const model = editor.getModel();
-      if (model) {
-        setLineCount(model.getLineCount());
-        model.onDidChangeContent(() => setLineCount(model.getLineCount()));
+        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 {
       }
-      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__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "ods-monaco",
-        `ods-monaco--${language}`,
-        readOnly && "ods-monaco--readonly",
-        className
-      ),
-      style,
-      children: [
-        !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__ */ jsxs2("div", { className: "ods-monaco__toolbar-right", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__lines", children: [
-              lineCount,
-              " line",
-              lineCount === 1 ? "" : "s"
+    };
+    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__ */ jsxs2(
+      "div",
+      {
+        ...rest,
+        className: cn(
+          "ods-monaco",
+          `ods-monaco--${language}`,
+          readOnly && "ods-monaco--readonly",
+          className
+        ),
+        children: [
+          !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
             ] }),
-            status && /* @__PURE__ */ jsx2("span", { className: "ods-monaco__status", children: status }),
-            showWrapBtn && /* @__PURE__ */ jsx2(
-              "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__ */ 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",
-                    stroke: "currentColor",
-                    strokeWidth: "1.2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
-              }
-            ),
-            showMinimapBtn && /* @__PURE__ */ jsx2(
-              "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__ */ 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__ */ jsx2(
-              "button",
-              {
-                type: "button",
-                className: "ods-monaco__btn",
-                onClick: handleFormat,
-                "aria-label": "Format document",
-                title: "Format (Shift+Alt+F)",
-                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__ */ jsxs2("div", { className: "ods-monaco__toolbar-right", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__lines", children: [
+                lineCount,
+                " line",
+                lineCount === 1 ? "" : "s"
+              ] }),
+              status && /* @__PURE__ */ jsx2("span", { className: "ods-monaco__status", children: status }),
+              showWrapBtn && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "ods-monaco__btn",
+                    wordWrap && "ods-monaco__btn--active"
                   ),
-                  /* @__PURE__ */ jsx2(
-                    "path",
-                    {
-                      d: "M2.5 7 3.5 6 2.5 5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  )
-                ] })
-              }
-            ),
-            showCopy && /* @__PURE__ */ jsx2(
-              "button",
-              {
-                type: "button",
-                className: cn("ods-monaco__btn", copied && "ods-monaco__btn--success"),
-                onClick: handleCopy,
-                "aria-label": "Copy",
-                title: "Copy",
-                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",
-                    stroke: "currentColor",
-                    strokeWidth: "1.6",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "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"
-                    }
+                  onClick: () => setWordWrap((w) => !w),
+                  "aria-pressed": wordWrap,
+                  "aria-label": "Toggle word wrap",
+                  title: "Word wrap",
+                  children: /* @__PURE__ */ jsx2(TextWrapIcon, {})
+                }
+              ),
+              showMinimapBtn && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "ods-monaco__btn",
+                    minimap && "ods-monaco__btn--active"
                   ),
-                  /* @__PURE__ */ jsx2(
-                    "path",
-                    {
-                      d: "M5 1.5h6V8",
-                      stroke: "currentColor",
-                      strokeWidth: "1.3",
-                      strokeLinecap: "round"
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
-        ] }),
-        /* @__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",
+                  onClick: () => setMinimap((m) => !m),
+                  "aria-pressed": minimap,
+                  "aria-label": "Toggle minimap",
+                  title: "Minimap",
+                  children: minimap ? /* @__PURE__ */ jsx2(MinimapOnIcon, {}) : /* @__PURE__ */ jsx2(MinimapOffIcon, {})
+                }
+              ),
+              showFormat && !readOnly && /* @__PURE__ */ jsx2(
+                "button",
                 {
-                  cx: "7",
-                  cy: "7",
-                  r: "5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.4",
-                  strokeDasharray: "4 18",
-                  strokeLinecap: "round"
+                  type: "button",
+                  className: "ods-monaco__btn",
+                  onClick: handleFormat,
+                  "aria-label": "Format document",
+                  title: "Format (Shift+Alt+F)",
+                  children: /* @__PURE__ */ jsx2(MagicWandIcon, {})
                 }
-              ) }) }),
-              /* @__PURE__ */ jsx2("span", { children: "Loading editor\u2026" })
-            ] }),
-            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__ */ 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__ */ jsxs2(Fragment, { children: [
-              " ",
-              "\xB7 ",
-              selection.chars,
-              " char",
-              selection.chars === 1 ? "" : "s",
-              selection.lines > 1 && ` \xB7 ${selection.lines} lines`
+              ),
+              showCopy && /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(CheckmarkIcon, {}) : /* @__PURE__ */ jsx2(CopyIcon, {})
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__shortcut-hint", children: [
-            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
-            " find",
-            /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
-            " replace",
-            /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
-            /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "F1" }),
-            " commands"
+          /* @__PURE__ */ jsx2("div", { className: "ods-monaco__body", style: { minHeight }, children: /* @__PURE__ */ jsx2(Suspense2, { fallback: /* @__PURE__ */ jsx2(LoadingPlaceholder2, { label: "Loading editor\u2026" }), children: /* @__PURE__ */ jsx2(
+            Editor,
+            {
+              value,
+              onChange: (v) => onChange?.(v ?? ""),
+              language,
+              height,
+              theme: theme ?? OCTAVIAFLOW_THEME_ID,
+              options: mergedOptions,
+              onMount: handleMount,
+              loading: /* @__PURE__ */ jsx2(LoadingPlaceholder2, { label: "Loading editor\u2026" }),
+              "aria-label": ariaLabel
+            }
+          ) }) }),
+          !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__ */ jsxs2(Fragment, { children: [
+                " ",
+                "\xB7 ",
+                selection.chars,
+                " char",
+                selection.chars === 1 ? "" : "s",
+                selection.lines > 1 && ` \xB7 ${selection.lines} lines`
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("span", { className: "ods-monaco__shortcut-hint", children: [
+              /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318F" }),
+              " find",
+              /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
+              /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "\u2318\u21E7F" }),
+              " replace",
+              /* @__PURE__ */ jsx2("span", { className: "ods-monaco__sep", children: "\xB7" }),
+              /* @__PURE__ */ jsx2("kbd", { className: "ods-monaco__kbd", children: "F1" }),
+              " commands"
+            ] })
           ] })
-        ] })
-      ]
-    }
-  );
-}
+        ]
+      }
+    );
+  }
+);
+MonacoEditor.displayName = "MonacoEditor";
 export {
   MonacoDiffEditor,
   MonacoEditor,