mogh_ui 1.0.0 → 1.0.1

package/dist/components/monaco/common.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var common_exports = {};
+__export(common_exports, {
+  languageFromPath: () => languageFromPath
+});
+module.exports = __toCommonJS(common_exports);
+const LANGUAGE_EXTENSIONS = {
+  yaml: [".yaml", ".yml"],
+  toml: [".toml"],
+  fancy_toml: [],
+  json: [".json"],
+  key_value: [".env", ".conf"],
+  ini: [".ini"],
+  string_list: [],
+  shell: [".sh", ".bash", ".zsh"],
+  dockerfile: ["Dockerfile"],
+  rust: [".rs"],
+  javascript: [".js", ".jsx", ".mjs", ".cjs"],
+  typescript: [".ts", ".tsx"]
+};
+function languageFromPath(path) {
+  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
+    for (const extension of extensions) {
+      if (path.endsWith(extension)) {
+        return lang;
+      }
+    }
+  }
+  return void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  languageFromPath
+});
+//# sourceMappingURL=common.cjs.map

package/dist/components/monaco/common.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/monaco/common.ts"],"sourcesContent":["import { BoxProps } from \"@mantine/core\";\n\nexport type MonacoLanguage =\n  | \"yaml\"\n  | \"toml\"\n  | \"fancy_toml\"\n  | \"json\"\n  | \"key_value\"\n  | \"ini\"\n  | \"string_list\"\n  | \"shell\"\n  | \"dockerfile\"\n  | \"rust\"\n  | \"javascript\"\n  | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n  yaml: [\".yaml\", \".yml\"],\n  toml: [\".toml\"],\n  fancy_toml: [],\n  json: [\".json\"],\n  key_value: [\".env\", \".conf\"],\n  ini: [\".ini\"],\n  string_list: [],\n  shell: [\".sh\", \".bash\", \".zsh\"],\n  dockerfile: [\"Dockerfile\"],\n  rust: [\".rs\"],\n  javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n  typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n    for (const extension of extensions) {\n      if (path.endsWith(extension)) {\n        return lang as MonacoLanguage;\n      }\n    }\n  }\n  return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n  value: string | undefined;\n  onValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  filename?: string;\n  readOnly?: boolean;\n  minHeight?: number;\n  /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n  maxHeightProportion?: number;\n  maxHeight?: number;\n  id?: string;\n}\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n  original: string | undefined;\n  modified: string | undefined;\n  onModifiedValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  readOnly?: boolean;\n  id?: string;\n  hideUnchangedRegions?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA,MAAM,sBAAwD;AAAA,EAC5D,MAAM,CAAC,SAAS,MAAM;AAAA,EACtB,MAAM,CAAC,OAAO;AAAA,EACd,YAAY,CAAC;AAAA,EACb,MAAM,CAAC,OAAO;AAAA,EACd,WAAW,CAAC,QAAQ,OAAO;AAAA,EAC3B,KAAK,CAAC,MAAM;AAAA,EACZ,aAAa,CAAC;AAAA,EACd,OAAO,CAAC,OAAO,SAAS,MAAM;AAAA,EAC9B,YAAY,CAAC,YAAY;AAAA,EACzB,MAAM,CAAC,KAAK;AAAA,EACZ,YAAY,CAAC,OAAO,QAAQ,QAAQ,MAAM;AAAA,EAC1C,YAAY,CAAC,OAAO,MAAM;AAC5B;AAEO,SAAS,iBAAiB,MAAc;AAC7C,aAAW,CAAC,MAAM,UAAU,KAAK,OAAO,QAAQ,mBAAmB,GAAG;AACpE,eAAW,aAAa,YAAY;AAClC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/dist/components/monaco/common.d.ts

@@ -0,0 +1,27 @@
+import { BoxProps } from "@mantine/core";
+export type MonacoLanguage = "yaml" | "toml" | "fancy_toml" | "json" | "key_value" | "ini" | "string_list" | "shell" | "dockerfile" | "rust" | "javascript" | "typescript";
+export declare function languageFromPath(path: string): MonacoLanguage | undefined;
+export interface MonacoEditorProps extends BoxProps {
+    value: string | undefined;
+    onValueChange?: (value: string) => void;
+    language: MonacoLanguage | undefined;
+    enableFancyToml?: boolean;
+    filename?: string;
+    readOnly?: boolean;
+    minHeight?: number;
+    /** Define max height as proportion of dimension height. Should be between 0 and 1. */
+    maxHeightProportion?: number;
+    maxHeight?: number;
+    id?: string;
+}
+export interface MonacoDiffEditorProps extends BoxProps {
+    original: string | undefined;
+    modified: string | undefined;
+    onModifiedValueChange?: (value: string) => void;
+    language: MonacoLanguage | undefined;
+    enableFancyToml?: boolean;
+    readOnly?: boolean;
+    id?: string;
+    hideUnchangedRegions?: boolean;
+}
+//# sourceMappingURL=common.d.ts.map

package/dist/components/monaco/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,GACZ,MAAM,GACN,WAAW,GACX,KAAK,GACL,aAAa,GACb,OAAO,GACP,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;AAiBjB,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,8BAS5C;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}

package/dist/components/monaco/common.js

@@ -0,0 +1,28 @@
+const LANGUAGE_EXTENSIONS = {
+  yaml: [".yaml", ".yml"],
+  toml: [".toml"],
+  fancy_toml: [],
+  json: [".json"],
+  key_value: [".env", ".conf"],
+  ini: [".ini"],
+  string_list: [],
+  shell: [".sh", ".bash", ".zsh"],
+  dockerfile: ["Dockerfile"],
+  rust: [".rs"],
+  javascript: [".js", ".jsx", ".mjs", ".cjs"],
+  typescript: [".ts", ".tsx"]
+};
+function languageFromPath(path) {
+  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
+    for (const extension of extensions) {
+      if (path.endsWith(extension)) {
+        return lang;
+      }
+    }
+  }
+  return void 0;
+}
+export {
+  languageFromPath
+};
+//# sourceMappingURL=common.js.map

package/dist/components/monaco/common.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/monaco/common.ts"],"sourcesContent":["import { BoxProps } from \"@mantine/core\";\n\nexport type MonacoLanguage =\n  | \"yaml\"\n  | \"toml\"\n  | \"fancy_toml\"\n  | \"json\"\n  | \"key_value\"\n  | \"ini\"\n  | \"string_list\"\n  | \"shell\"\n  | \"dockerfile\"\n  | \"rust\"\n  | \"javascript\"\n  | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n  yaml: [\".yaml\", \".yml\"],\n  toml: [\".toml\"],\n  fancy_toml: [],\n  json: [\".json\"],\n  key_value: [\".env\", \".conf\"],\n  ini: [\".ini\"],\n  string_list: [],\n  shell: [\".sh\", \".bash\", \".zsh\"],\n  dockerfile: [\"Dockerfile\"],\n  rust: [\".rs\"],\n  javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n  typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n    for (const extension of extensions) {\n      if (path.endsWith(extension)) {\n        return lang as MonacoLanguage;\n      }\n    }\n  }\n  return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n  value: string | undefined;\n  onValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  filename?: string;\n  readOnly?: boolean;\n  minHeight?: number;\n  /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n  maxHeightProportion?: number;\n  maxHeight?: number;\n  id?: string;\n}\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n  original: string | undefined;\n  modified: string | undefined;\n  onModifiedValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  readOnly?: boolean;\n  id?: string;\n  hideUnchangedRegions?: boolean;\n}\n"],"mappings":"AAgBA,MAAM,sBAAwD;AAAA,EAC5D,MAAM,CAAC,SAAS,MAAM;AAAA,EACtB,MAAM,CAAC,OAAO;AAAA,EACd,YAAY,CAAC;AAAA,EACb,MAAM,CAAC,OAAO;AAAA,EACd,WAAW,CAAC,QAAQ,OAAO;AAAA,EAC3B,KAAK,CAAC,MAAM;AAAA,EACZ,aAAa,CAAC;AAAA,EACd,OAAO,CAAC,OAAO,SAAS,MAAM;AAAA,EAC9B,YAAY,CAAC,YAAY;AAAA,EACzB,MAAM,CAAC,KAAK;AAAA,EACZ,YAAY,CAAC,OAAO,QAAQ,QAAQ,MAAM;AAAA,EAC1C,YAAY,CAAC,OAAO,MAAM;AAC5B;AAEO,SAAS,iBAAiB,MAAc;AAC7C,aAAW,CAAC,MAAM,UAAU,KAAK,OAAO,QAAQ,mBAAmB,GAAG;AACpE,eAAW,aAAa,YAAY;AAClC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/dist/components/monaco/editor.cjs

@@ -0,0 +1,236 @@
+"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);
+var editor_exports = {};
+__export(editor_exports, {
+  MonacoDiffEditorImpl: () => MonacoDiffEditorImpl,
+  MonacoEditorImpl: () => MonacoEditorImpl
+});
+module.exports = __toCommonJS(editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_init = require("./init");
+var import_react = require("react");
+var import_react2 = require("@monaco-editor/react");
+var monaco = __toESM(require("monaco-editor"), 1);
+var import_hooks = require("@mantine/hooks");
+var import_core = require("@mantine/core");
+const MIN_EDITOR_HEIGHT = 56;
+async function formatWithCursor(language, source, cursorOffset) {
+  if (language === "yaml") {
+    const [prettier2, pluginYaml] = await Promise.all([
+      import("prettier/standalone"),
+      import("prettier/plugins/yaml")
+    ]);
+    return await prettier2.formatWithCursor(source, {
+      cursorOffset,
+      parser: "yaml",
+      plugins: [pluginYaml],
+      printWidth: 80
+      // Set the desired max line length
+    });
+  }
+  const [prettier, pluginTypescript, pluginEsTree] = await Promise.all([
+    import("prettier/standalone"),
+    import("prettier/plugins/typescript"),
+    import("prettier/plugins/estree")
+  ]);
+  return await prettier.formatWithCursor(source, {
+    cursorOffset,
+    parser: "typescript",
+    plugins: [pluginTypescript, pluginEsTree],
+    printWidth: 80
+    // Set the desired max line length
+  });
+}
+function MonacoEditorImpl({
+  value,
+  onValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  filename,
+  minHeight,
+  maxHeightProportion,
+  maxHeight,
+  id,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const dimensions = (0, import_hooks.useViewportSize)();
+  const [editor, setEditor] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    let node = editor.getDomNode();
+    if (!node) return;
+    const callback = (e) => {
+      if (e.key === "Escape") {
+        document.activeElement?.blur?.();
+      }
+    };
+    node.addEventListener("keydown", callback);
+    return () => node.removeEventListener("keydown", callback);
+  }, [editor]);
+  (0, import_react.useEffect)(() => {
+    if (language !== "typescript" && language !== "javascript" && language !== "yaml")
+      return;
+    if (!editor) return;
+    editor.addCommand(
+      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
+      async () => {
+        if (!editor) return;
+        const model = editor.getModel();
+        if (!model) return;
+        const position = editor.getPosition();
+        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
+        const curr = editor.getValue();
+        const { formatted, cursorOffset } = await formatWithCursor(
+          language,
+          curr,
+          beforeOffset
+        );
+        editor.setValue(formatted);
+        editor.setPosition(model.getPositionAt(cursorOffset));
+      }
+    );
+  }, [editor]);
+  const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const containerNode = editor.getContainerDomNode();
+    containerNode.style.height = `${Math.max(
+      Math.min(
+        contentHeight,
+        Math.floor(dimensions.height * 0.75),
+        maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
+        maxHeight ?? 1e4
+      ),
+      minHeight ?? MIN_EDITOR_HEIGHT
+    )}px`;
+  }, [dimensions.height, editor, line_count]);
+  const currentTheme = (0, import_core.useComputedColorScheme)();
+  const options = {
+    minimap: { enabled: false },
+    // scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    tabSize: 2,
+    detectIndentation: true,
+    quickSuggestions: true,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.Editor,
+    {
+      language,
+      value,
+      theme: currentTheme,
+      defaultPath: defaultPath(filename),
+      options,
+      onChange: (v) => onValueChange?.(v ?? ""),
+      onMount: (editor2) => setEditor(editor2)
+    }
+  ) });
+}
+function defaultPath(filename) {
+  if (!filename) return void 0;
+  const split = filename.split("/");
+  return split[split.length - 1];
+}
+const MIN_DIFF_HEIGHT = 100;
+const MAX_DIFF_HEIGHT = 600;
+function MonacoDiffEditorImpl({
+  original,
+  modified,
+  onModifiedValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  id,
+  hideUnchangedRegions = true,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const [editor, setEditor] = (0, import_react.useState)(null);
+  const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
+  const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
+  const line_count = Math.max(original_line_count, modified_line_count);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const node = editor.getContainerDomNode();
+    node.style.height = `${Math.max(
+      Math.min(contentHeight, MAX_DIFF_HEIGHT),
+      MIN_DIFF_HEIGHT
+    )}px`;
+  }, [editor, line_count]);
+  const currentTheme = (0, import_core.useComputedColorScheme)();
+  const options = {
+    minimap: { enabled: true },
+    scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    hideUnchangedRegions: { enabled: hideUnchangedRegions },
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.DiffEditor,
+    {
+      language,
+      original,
+      modified,
+      theme: currentTheme,
+      options,
+      onMount: (editor2) => {
+        const modifiedEditor = editor2.getModifiedEditor();
+        modifiedEditor.onDidChangeModelContent((_) => {
+          onModifiedValueChange?.(modifiedEditor.getValue());
+        });
+        setEditor(editor2);
+      }
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MonacoDiffEditorImpl,
+  MonacoEditorImpl
+});
+//# sourceMappingURL=editor.cjs.map

package/dist/components/monaco/editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/monaco/editor.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, useComputedColorScheme } from \"@mantine/core\";\nimport {\n  MonacoDiffEditorProps,\n  MonacoEditorProps,\n  MonacoLanguage,\n} from \"./common\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\n/** Prettier embeds the full typescript parser - only load it on demand. */\nasync function formatWithCursor(\n  language: \"yaml\" | \"typescript\" | \"javascript\",\n  source: string,\n  cursorOffset: number,\n) {\n  if (language === \"yaml\") {\n    const [prettier, pluginYaml] = await Promise.all([\n      import(\"prettier/standalone\"),\n      import(\"prettier/plugins/yaml\"),\n    ]);\n    return await prettier.formatWithCursor(source, {\n      cursorOffset,\n      parser: \"yaml\",\n      plugins: [pluginYaml],\n      printWidth: 80, // Set the desired max line length\n    });\n  }\n  const [prettier, pluginTypescript, pluginEsTree] = await Promise.all([\n    import(\"prettier/standalone\"),\n    import(\"prettier/plugins/typescript\"),\n    import(\"prettier/plugins/estree\"),\n  ]);\n  return await prettier.formatWithCursor(source, {\n    cursorOffset,\n    parser: \"typescript\",\n    plugins: [pluginTypescript, pluginEsTree as any],\n    printWidth: 80, // Set the desired max line length\n  });\n}\n\nexport function MonacoEditorImpl({\n  value,\n  onValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  filename,\n  minHeight,\n  maxHeightProportion,\n  maxHeight,\n  id,\n  ...boxProps\n}: MonacoEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const dimensions = useViewportSize();\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    let node = editor.getDomNode();\n    if (!node) return;\n\n    const callback = (e: any) => {\n      if (e.key === \"Escape\") {\n        (document.activeElement as any)?.blur?.();\n      }\n    };\n\n    node.addEventListener(\"keydown\", callback);\n    return () => node.removeEventListener(\"keydown\", callback);\n  }, [editor]);\n\n  useEffect(() => {\n    if (\n      language !== \"typescript\" &&\n      language !== \"javascript\" &&\n      language !== \"yaml\"\n    )\n      return;\n    if (!editor) return;\n    editor.addCommand(\n      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n      async () => {\n        if (!editor) return;\n        const model = editor.getModel();\n        if (!model) return;\n        const position = editor.getPosition();\n        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n        const curr = editor.getValue();\n        const { formatted, cursorOffset } = await formatWithCursor(\n          language,\n          curr,\n          beforeOffset,\n        );\n        editor.setValue(formatted);\n        editor.setPosition(model.getPositionAt(cursorOffset));\n      },\n    );\n  }, [editor]);\n\n  const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const containerNode = editor.getContainerDomNode();\n\n    containerNode.style.height = `${Math.max(\n      Math.min(\n        contentHeight,\n        Math.floor(dimensions.height * 0.75),\n        maxHeightProportion\n          ? Math.floor(maxHeightProportion * dimensions.height)\n          : 10_000,\n        maxHeight ?? 10_000,\n      ),\n      minHeight ?? MIN_EDITOR_HEIGHT,\n    )}px`;\n  }, [dimensions.height, editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n    minimap: { enabled: false },\n    // scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    tabSize: 2,\n    detectIndentation: true,\n    quickSuggestions: true,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <Editor\n        language={language}\n        value={value}\n        theme={currentTheme}\n        defaultPath={defaultPath(filename)}\n        options={options}\n        onChange={(v) => onValueChange?.(v ?? \"\")}\n        onMount={(editor) => setEditor(editor)}\n      />\n    </Box>\n  );\n}\n\nfunction defaultPath(filename?: string) {\n  if (!filename) return undefined;\n  // Extract only the filename part of path,\n  // avoiding critical issue when path starts with '/'\n  const split = filename.split(\"/\");\n  return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport function MonacoDiffEditorImpl({\n  original,\n  modified,\n  onModifiedValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  id,\n  hideUnchangedRegions = true,\n  ...boxProps\n}: MonacoDiffEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n  const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const line_count = Math.max(original_line_count, modified_line_count);\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const node = editor.getContainerDomNode();\n\n    node.style.height = `${Math.max(\n      Math.min(contentHeight, MAX_DIFF_HEIGHT),\n      MIN_DIFF_HEIGHT,\n    )}px`;\n  }, [editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n    minimap: { enabled: true },\n    scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    hideUnchangedRegions: { enabled: hideUnchangedRegions },\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <DiffEditor\n        language={language}\n        original={original}\n        modified={modified}\n        theme={currentTheme}\n        options={options}\n        onMount={(editor) => {\n          const modifiedEditor = editor.getModifiedEditor();\n          modifiedEditor.onDidChangeModelContent((_) => {\n            onModifiedValueChange?.(modifiedEditor.getValue());\n          });\n          setEditor(editor);\n        }}\n      />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwJM;AAxJN,kBAAO;AAEP,mBAAoC;AACpC,IAAAA,gBAAmC;AACnC,aAAwB;AACxB,mBAAgC;AAChC,kBAA4C;AAO5C,MAAM,oBAAoB;AAG1B,eAAe,iBACb,UACA,QACA,cACA;AACA,MAAI,aAAa,QAAQ;AACvB,UAAM,CAACC,WAAU,UAAU,IAAI,MAAM,QAAQ,IAAI;AAAA,MAC/C,OAAO,qBAAqB;AAAA,MAC5B,OAAO,uBAAuB;AAAA,IAChC,CAAC;AACD,WAAO,MAAMA,UAAS,iBAAiB,QAAQ;AAAA,MAC7C;AAAA,MACA,QAAQ;AAAA,MACR,SAAS,CAAC,UAAU;AAAA,MACpB,YAAY;AAAA;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,CAAC,UAAU,kBAAkB,YAAY,IAAI,MAAM,QAAQ,IAAI;AAAA,IACnE,OAAO,qBAAqB;AAAA,IAC5B,OAAO,6BAA6B;AAAA,IACpC,OAAO,yBAAyB;AAAA,EAClC,CAAC;AACD,SAAO,MAAM,SAAS,iBAAiB,QAAQ;AAAA,IAC7C;AAAA,IACA,QAAQ;AAAA,IACR,SAAS,CAAC,kBAAkB,YAAmB;AAAA,IAC/C,YAAY;AAAA;AAAA,EACd,CAAC;AACH;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,WACJ,cAAc,gBAAgB,CAAC,kBAAkB,SAAS;AAG5D,QAAM,iBAAa,8BAAgB;AACnC,QAAM,CAAC,QAAQ,SAAS,QACtB,uBAAqD,IAAI;AAE3D,8BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,QAAI,OAAO,OAAO,WAAW;AAC7B,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,CAAC,MAAW;AAC3B,UAAI,EAAE,QAAQ,UAAU;AACtB,QAAC,SAAS,eAAuB,OAAO;AAAA,MAC1C;AAAA,IACF;AAEA,SAAK,iBAAiB,WAAW,QAAQ;AACzC,WAAO,MAAM,KAAK,oBAAoB,WAAW,QAAQ;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,8BAAU,MAAM;AACd,QACE,aAAa,gBACb,aAAa,gBACb,aAAa;AAEb;AACF,QAAI,CAAC,OAAQ;AACb,WAAO;AAAA,MACL,OAAO,OAAO,MAAM,OAAO,OAAO,QAAQ,OAAO,QAAQ;AAAA,MACzD,YAAY;AACV,YAAI,CAAC,OAAQ;AACb,cAAM,QAAQ,OAAO,SAAS;AAC9B,YAAI,CAAC,MAAO;AACZ,cAAM,WAAW,OAAO,YAAY;AACpC,YAAI,gBAAgB,YAAY,MAAM,YAAY,QAAQ,MAAM;AAChE,cAAM,OAAO,OAAO,SAAS;AAC7B,cAAM,EAAE,WAAW,aAAa,IAAI,MAAM;AAAA,UACxC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AACA,eAAO,SAAS,SAAS;AACzB,eAAO,YAAY,MAAM,cAAc,YAAY,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,aAAa,OAAO,MAAM,YAAY,EAAE,UAAU;AAExD,8BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,gBAAgB,aAAa,KAAK;AACxC,UAAM,gBAAgB,OAAO,oBAAoB;AAEjD,kBAAc,MAAM,SAAS,GAAG,KAAK;AAAA,MACnC,KAAK;AAAA,QACH;AAAA,QACA,KAAK,MAAM,WAAW,SAAS,IAAI;AAAA,QACnC,sBACI,KAAK,MAAM,sBAAsB,WAAW,MAAM,IAClD;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,QAAQ,QAAQ,UAAU,CAAC;AAE1C,QAAM,mBAAe,oCAAuB;AAE5C,QAAM,UAA8D;AAAA,IAClE,SAAS,EAAE,SAAS,MAAM;AAAA;AAAA,IAE1B,sBAAsB;AAAA,IACtB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,6BAA6B;AAAA,IAC7B,kCAAkC;AAAA,IAClC;AAAA,IACA,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,SAAS;AAAA,MACP,KAAK;AAAA,IACP;AAAA,EACF;AAEA,SACE,4CAAC,mBAAI,IAAQ,WAAW,CAAC,MAAM,EAAE,gBAAgB,GAAI,GAAG,UACtD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,aAAa,YAAY,QAAQ;AAAA,MACjC;AAAA,MACA,UAAU,CAAC,MAAM,gBAAgB,KAAK,EAAE;AAAA,MACxC,SAAS,CAACC,YAAW,UAAUA,OAAM;AAAA;AAAA,EACvC,GACF;AAEJ;AAEA,SAAS,YAAY,UAAmB;AACtC,MAAI,CAAC,SAAU,QAAO;AAGtB,QAAM,QAAQ,SAAS,MAAM,GAAG;AAChC,SAAO,MAAM,MAAM,SAAS,CAAC;AAC/B;AAEA,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAEjB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA0B;AACxB,QAAM,WACJ,cAAc,gBAAgB,CAAC,kBAAkB,SAAS;AAG5D,QAAM,CAAC,QAAQ,SAAS,QACtB,uBAAqD,IAAI;AAE3D,QAAM,sBAAsB,UAAU,MAAM,YAAY,EAAE,UAAU;AACpE,QAAM,sBAAsB,UAAU,MAAM,YAAY,EAAE,UAAU;AACpE,QAAM,aAAa,KAAK,IAAI,qBAAqB,mBAAmB;AAEpE,8BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,gBAAgB,aAAa,KAAK;AACxC,UAAM,OAAO,OAAO,oBAAoB;AAExC,SAAK,MAAM,SAAS,GAAG,KAAK;AAAA,MAC1B,KAAK,IAAI,eAAe,eAAe;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,QAAM,mBAAe,oCAAuB;AAE5C,QAAM,UAAkE;AAAA,IACtE,SAAS,EAAE,SAAS,KAAK;AAAA,IACzB,WAAW,EAAE,yBAAyB,MAAM;AAAA,IAC5C,sBAAsB;AAAA,IACtB,sBAAsB,EAAE,SAAS,qBAAqB;AAAA,IACtD,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,6BAA6B;AAAA,IAC7B,kCAAkC;AAAA,IAClC;AAAA,IACA,SAAS;AAAA,MACP,KAAK;AAAA,IACP;AAAA,EACF;AAEA,SACE,4CAAC,mBAAI,IAAQ,WAAW,CAAC,MAAM,EAAE,gBAAgB,GAAI,GAAG,UACtD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS,CAACA,YAAW;AACnB,cAAM,iBAAiBA,QAAO,kBAAkB;AAChD,uBAAe,wBAAwB,CAAC,MAAM;AAC5C,kCAAwB,eAAe,SAAS,CAAC;AAAA,QACnD,CAAC;AACD,kBAAUA,OAAM;AAAA,MAClB;AAAA;AAAA,EACF,GACF;AAEJ;","names":["import_react","prettier","editor"]}

package/dist/components/monaco/editor.d.ts

@@ -0,0 +1,5 @@
+import "./init";
+import { MonacoDiffEditorProps, MonacoEditorProps } from "./common";
+export declare function MonacoEditorImpl({ value, onValueChange, language: _language, enableFancyToml, readOnly, filename, minHeight, maxHeightProportion, maxHeight, id, ...boxProps }: MonacoEditorProps): import("react").JSX.Element;
+export declare function MonacoDiffEditorImpl({ original, modified, onModifiedValueChange, language: _language, enableFancyToml, readOnly, id, hideUnchangedRegions, ...boxProps }: MonacoDiffEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

package/dist/components/monaco/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAOhB,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EAElB,MAAM,UAAU,CAAC;AAmClB,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,iBAAiB,+BAyGnB;AAaD,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,EAAE,EACF,oBAA2B,EAC3B,GAAG,QAAQ,EACZ,EAAE,qBAAqB,+BA0DvB"}

package/dist/components/monaco/editor.js

@@ -0,0 +1,201 @@
+import { jsx } from "react/jsx-runtime";
+import "./init";
+import { useEffect, useState } from "react";
+import { DiffEditor, Editor } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import { useViewportSize } from "@mantine/hooks";
+import { Box, useComputedColorScheme } from "@mantine/core";
+const MIN_EDITOR_HEIGHT = 56;
+async function formatWithCursor(language, source, cursorOffset) {
+  if (language === "yaml") {
+    const [prettier2, pluginYaml] = await Promise.all([
+      import("prettier/standalone"),
+      import("prettier/plugins/yaml")
+    ]);
+    return await prettier2.formatWithCursor(source, {
+      cursorOffset,
+      parser: "yaml",
+      plugins: [pluginYaml],
+      printWidth: 80
+      // Set the desired max line length
+    });
+  }
+  const [prettier, pluginTypescript, pluginEsTree] = await Promise.all([
+    import("prettier/standalone"),
+    import("prettier/plugins/typescript"),
+    import("prettier/plugins/estree")
+  ]);
+  return await prettier.formatWithCursor(source, {
+    cursorOffset,
+    parser: "typescript",
+    plugins: [pluginTypescript, pluginEsTree],
+    printWidth: 80
+    // Set the desired max line length
+  });
+}
+function MonacoEditorImpl({
+  value,
+  onValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  filename,
+  minHeight,
+  maxHeightProportion,
+  maxHeight,
+  id,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const dimensions = useViewportSize();
+  const [editor, setEditor] = useState(null);
+  useEffect(() => {
+    if (!editor) return;
+    let node = editor.getDomNode();
+    if (!node) return;
+    const callback = (e) => {
+      if (e.key === "Escape") {
+        document.activeElement?.blur?.();
+      }
+    };
+    node.addEventListener("keydown", callback);
+    return () => node.removeEventListener("keydown", callback);
+  }, [editor]);
+  useEffect(() => {
+    if (language !== "typescript" && language !== "javascript" && language !== "yaml")
+      return;
+    if (!editor) return;
+    editor.addCommand(
+      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
+      async () => {
+        if (!editor) return;
+        const model = editor.getModel();
+        if (!model) return;
+        const position = editor.getPosition();
+        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
+        const curr = editor.getValue();
+        const { formatted, cursorOffset } = await formatWithCursor(
+          language,
+          curr,
+          beforeOffset
+        );
+        editor.setValue(formatted);
+        editor.setPosition(model.getPositionAt(cursorOffset));
+      }
+    );
+  }, [editor]);
+  const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
+  useEffect(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const containerNode = editor.getContainerDomNode();
+    containerNode.style.height = `${Math.max(
+      Math.min(
+        contentHeight,
+        Math.floor(dimensions.height * 0.75),
+        maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
+        maxHeight ?? 1e4
+      ),
+      minHeight ?? MIN_EDITOR_HEIGHT
+    )}px`;
+  }, [dimensions.height, editor, line_count]);
+  const currentTheme = useComputedColorScheme();
+  const options = {
+    minimap: { enabled: false },
+    // scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    tabSize: 2,
+    detectIndentation: true,
+    quickSuggestions: true,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
+    Editor,
+    {
+      language,
+      value,
+      theme: currentTheme,
+      defaultPath: defaultPath(filename),
+      options,
+      onChange: (v) => onValueChange?.(v ?? ""),
+      onMount: (editor2) => setEditor(editor2)
+    }
+  ) });
+}
+function defaultPath(filename) {
+  if (!filename) return void 0;
+  const split = filename.split("/");
+  return split[split.length - 1];
+}
+const MIN_DIFF_HEIGHT = 100;
+const MAX_DIFF_HEIGHT = 600;
+function MonacoDiffEditorImpl({
+  original,
+  modified,
+  onModifiedValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  id,
+  hideUnchangedRegions = true,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const [editor, setEditor] = useState(null);
+  const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
+  const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
+  const line_count = Math.max(original_line_count, modified_line_count);
+  useEffect(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const node = editor.getContainerDomNode();
+    node.style.height = `${Math.max(
+      Math.min(contentHeight, MAX_DIFF_HEIGHT),
+      MIN_DIFF_HEIGHT
+    )}px`;
+  }, [editor, line_count]);
+  const currentTheme = useComputedColorScheme();
+  const options = {
+    minimap: { enabled: true },
+    scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    hideUnchangedRegions: { enabled: hideUnchangedRegions },
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
+    DiffEditor,
+    {
+      language,
+      original,
+      modified,
+      theme: currentTheme,
+      options,
+      onMount: (editor2) => {
+        const modifiedEditor = editor2.getModifiedEditor();
+        modifiedEditor.onDidChangeModelContent((_) => {
+          onModifiedValueChange?.(modifiedEditor.getValue());
+        });
+        setEditor(editor2);
+      }
+    }
+  ) });
+}
+export {
+  MonacoDiffEditorImpl,
+  MonacoEditorImpl
+};
+//# sourceMappingURL=editor.js.map

package/dist/components/monaco/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/monaco/editor.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, useComputedColorScheme } from \"@mantine/core\";\nimport {\n  MonacoDiffEditorProps,\n  MonacoEditorProps,\n  MonacoLanguage,\n} from \"./common\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\n/** Prettier embeds the full typescript parser - only load it on demand. */\nasync function formatWithCursor(\n  language: \"yaml\" | \"typescript\" | \"javascript\",\n  source: string,\n  cursorOffset: number,\n) {\n  if (language === \"yaml\") {\n    const [prettier, pluginYaml] = await Promise.all([\n      import(\"prettier/standalone\"),\n      import(\"prettier/plugins/yaml\"),\n    ]);\n    return await prettier.formatWithCursor(source, {\n      cursorOffset,\n      parser: \"yaml\",\n      plugins: [pluginYaml],\n      printWidth: 80, // Set the desired max line length\n    });\n  }\n  const [prettier, pluginTypescript, pluginEsTree] = await Promise.all([\n    import(\"prettier/standalone\"),\n    import(\"prettier/plugins/typescript\"),\n    import(\"prettier/plugins/estree\"),\n  ]);\n  return await prettier.formatWithCursor(source, {\n    cursorOffset,\n    parser: \"typescript\",\n    plugins: [pluginTypescript, pluginEsTree as any],\n    printWidth: 80, // Set the desired max line length\n  });\n}\n\nexport function MonacoEditorImpl({\n  value,\n  onValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  filename,\n  minHeight,\n  maxHeightProportion,\n  maxHeight,\n  id,\n  ...boxProps\n}: MonacoEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const dimensions = useViewportSize();\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    let node = editor.getDomNode();\n    if (!node) return;\n\n    const callback = (e: any) => {\n      if (e.key === \"Escape\") {\n        (document.activeElement as any)?.blur?.();\n      }\n    };\n\n    node.addEventListener(\"keydown\", callback);\n    return () => node.removeEventListener(\"keydown\", callback);\n  }, [editor]);\n\n  useEffect(() => {\n    if (\n      language !== \"typescript\" &&\n      language !== \"javascript\" &&\n      language !== \"yaml\"\n    )\n      return;\n    if (!editor) return;\n    editor.addCommand(\n      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n      async () => {\n        if (!editor) return;\n        const model = editor.getModel();\n        if (!model) return;\n        const position = editor.getPosition();\n        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n        const curr = editor.getValue();\n        const { formatted, cursorOffset } = await formatWithCursor(\n          language,\n          curr,\n          beforeOffset,\n        );\n        editor.setValue(formatted);\n        editor.setPosition(model.getPositionAt(cursorOffset));\n      },\n    );\n  }, [editor]);\n\n  const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const containerNode = editor.getContainerDomNode();\n\n    containerNode.style.height = `${Math.max(\n      Math.min(\n        contentHeight,\n        Math.floor(dimensions.height * 0.75),\n        maxHeightProportion\n          ? Math.floor(maxHeightProportion * dimensions.height)\n          : 10_000,\n        maxHeight ?? 10_000,\n      ),\n      minHeight ?? MIN_EDITOR_HEIGHT,\n    )}px`;\n  }, [dimensions.height, editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n    minimap: { enabled: false },\n    // scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    tabSize: 2,\n    detectIndentation: true,\n    quickSuggestions: true,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <Editor\n        language={language}\n        value={value}\n        theme={currentTheme}\n        defaultPath={defaultPath(filename)}\n        options={options}\n        onChange={(v) => onValueChange?.(v ?? \"\")}\n        onMount={(editor) => setEditor(editor)}\n      />\n    </Box>\n  );\n}\n\nfunction defaultPath(filename?: string) {\n  if (!filename) return undefined;\n  // Extract only the filename part of path,\n  // avoiding critical issue when path starts with '/'\n  const split = filename.split(\"/\");\n  return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport function MonacoDiffEditorImpl({\n  original,\n  modified,\n  onModifiedValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  id,\n  hideUnchangedRegions = true,\n  ...boxProps\n}: MonacoDiffEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n  const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const line_count = Math.max(original_line_count, modified_line_count);\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const node = editor.getContainerDomNode();\n\n    node.style.height = `${Math.max(\n      Math.min(contentHeight, MAX_DIFF_HEIGHT),\n      MIN_DIFF_HEIGHT,\n    )}px`;\n  }, [editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n    minimap: { enabled: true },\n    scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    hideUnchangedRegions: { enabled: hideUnchangedRegions },\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <DiffEditor\n        language={language}\n        original={original}\n        modified={modified}\n        theme={currentTheme}\n        options={options}\n        onMount={(editor) => {\n          const modifiedEditor = editor.getModifiedEditor();\n          modifiedEditor.onDidChangeModelContent((_) => {\n            onModifiedValueChange?.(modifiedEditor.getValue());\n          });\n          setEditor(editor);\n        }}\n      />\n    </Box>\n  );\n}\n"],"mappings":"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","names":["prettier","editor"]}

package/dist/components/monaco/index.cjs

@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -29,216 +30,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var monaco_exports = {};
 __export(monaco_exports, {
   MonacoDiffEditor: () => MonacoDiffEditor,
-  MonacoEditor: () => MonacoEditor,
-  languageFromPath: () => languageFromPath
+  MonacoEditor: () => MonacoEditor
 });
 module.exports = __toCommonJS(monaco_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_init = require("./init");
 var import_react = require("react");
-var import_react2 = require("@monaco-editor/react");
-var monaco = __toESM(require("monaco-editor"), 1);
-var prettier = __toESM(require("prettier/standalone"), 1);
-var pluginTypescript = __toESM(require("prettier/plugins/typescript"), 1);
-var pluginEsTree = __toESM(require("prettier/plugins/estree"), 1);
-var pluginYaml = __toESM(require("prettier/plugins/yaml"), 1);
-var import_hooks = require("@mantine/hooks");
-var import_core = require("@mantine/core");
-const MIN_EDITOR_HEIGHT = 56;
-const LANGUAGE_EXTENSIONS = {
-  yaml: [".yaml", ".yml"],
-  toml: [".toml"],
-  fancy_toml: [],
-  json: [".json"],
-  key_value: [".env", ".conf"],
-  ini: [".ini"],
-  string_list: [],
-  shell: [".sh", ".bash", ".zsh"],
-  dockerfile: ["Dockerfile"],
-  rust: [".rs"],
-  javascript: [".js", ".jsx", ".mjs", ".cjs"],
-  typescript: [".ts", ".tsx"]
-};
-function languageFromPath(path) {
-  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
-    for (const extension of extensions) {
-      if (path.endsWith(extension)) {
-        return lang;
-      }
-    }
-  }
-  return void 0;
-}
-function MonacoEditor({
-  value,
-  onValueChange,
-  language: _language,
-  enableFancyToml,
-  readOnly,
-  filename,
-  minHeight,
-  maxHeightProportion,
-  maxHeight,
-  id,
-  ...boxProps
-}) {
-  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
-  const dimensions = (0, import_hooks.useViewportSize)();
-  const [editor, setEditor] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    if (!editor) return;
-    let node = editor.getDomNode();
-    if (!node) return;
-    const callback = (e) => {
-      if (e.key === "Escape") {
-        document.activeElement?.blur?.();
-      }
-    };
-    node.addEventListener("keydown", callback);
-    return () => node.removeEventListener("keydown", callback);
-  }, [editor]);
-  (0, import_react.useEffect)(() => {
-    if (language !== "typescript" && language !== "javascript" && language !== "yaml")
-      return;
-    if (!editor) return;
-    editor.addCommand(
-      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
-      async () => {
-        if (!editor) return;
-        const model = editor.getModel();
-        if (!model) return;
-        const position = editor.getPosition();
-        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
-        const curr = editor.getValue();
-        const { formatted, cursorOffset } = await prettier.formatWithCursor(
-          curr,
-          {
-            cursorOffset: beforeOffset,
-            parser: language === "yaml" ? "yaml" : "typescript",
-            plugins: language === "yaml" ? [pluginYaml] : [pluginTypescript, pluginEsTree],
-            printWidth: 80
-            // Set the desired max line length
-          }
-        );
-        editor.setValue(formatted);
-        editor.setPosition(model.getPositionAt(cursorOffset));
-      }
-    );
-  }, [editor]);
-  const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
-  (0, import_react.useEffect)(() => {
-    if (!editor) return;
-    const contentHeight = line_count * 18 + 30;
-    const containerNode = editor.getContainerDomNode();
-    containerNode.style.height = `${Math.max(
-      Math.min(
-        contentHeight,
-        Math.floor(dimensions.height * 0.75),
-        maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
-        maxHeight ?? 1e4
-      ),
-      minHeight ?? MIN_EDITOR_HEIGHT
-    )}px`;
-  }, [dimensions.height, editor, line_count]);
-  const currentTheme = (0, import_core.useComputedColorScheme)();
-  const options = {
-    minimap: { enabled: false },
-    // scrollbar: { alwaysConsumeMouseWheel: false },
-    scrollBeyondLastLine: false,
-    folding: false,
-    automaticLayout: true,
-    renderValidationDecorations: "on",
-    renderLineHighlightOnlyWhenFocus: true,
-    readOnly,
-    tabSize: 2,
-    detectIndentation: true,
-    quickSuggestions: true,
-    padding: {
-      top: 15
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react2.Editor,
-    {
-      language,
-      value,
-      theme: currentTheme,
-      defaultPath: defaultPath(filename),
-      options,
-      onChange: (v) => onValueChange?.(v ?? ""),
-      onMount: (editor2) => setEditor(editor2)
-    }
-  ) });
-}
-function defaultPath(filename) {
-  if (!filename) return void 0;
-  const split = filename.split("/");
-  return split[split.length - 1];
+__reExport(monaco_exports, require("./common"), module.exports);
+const MonacoEditorInner = (0, import_react.lazy)(
+  () => import("./editor").then((m) => ({ default: m.MonacoEditorImpl }))
+);
+const MonacoDiffEditorInner = (0, import_react.lazy)(
+  () => import("./editor").then((m) => ({ default: m.MonacoDiffEditorImpl }))
+);
+function MonacoEditor(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonacoEditorInner, { ...props }) });
 }
-const MIN_DIFF_HEIGHT = 100;
-const MAX_DIFF_HEIGHT = 600;
-function MonacoDiffEditor({
-  original,
-  modified,
-  onModifiedValueChange,
-  language: _language,
-  enableFancyToml,
-  readOnly,
-  id,
-  hideUnchangedRegions = true,
-  ...boxProps
-}) {
-  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
-  const [editor, setEditor] = (0, import_react.useState)(null);
-  const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
-  const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
-  const line_count = Math.max(original_line_count, modified_line_count);
-  (0, import_react.useEffect)(() => {
-    if (!editor) return;
-    const contentHeight = line_count * 18 + 30;
-    const node = editor.getContainerDomNode();
-    node.style.height = `${Math.max(
-      Math.min(contentHeight, MAX_DIFF_HEIGHT),
-      MIN_DIFF_HEIGHT
-    )}px`;
-  }, [editor, line_count]);
-  const currentTheme = (0, import_core.useComputedColorScheme)();
-  const options = {
-    minimap: { enabled: true },
-    scrollbar: { alwaysConsumeMouseWheel: false },
-    scrollBeyondLastLine: false,
-    hideUnchangedRegions: { enabled: hideUnchangedRegions },
-    folding: false,
-    automaticLayout: true,
-    renderValidationDecorations: "on",
-    renderLineHighlightOnlyWhenFocus: true,
-    readOnly,
-    padding: {
-      top: 15
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react2.DiffEditor,
-    {
-      language,
-      original,
-      modified,
-      theme: currentTheme,
-      options,
-      onMount: (editor2) => {
-        const modifiedEditor = editor2.getModifiedEditor();
-        modifiedEditor.onDidChangeModelContent((_) => {
-          onModifiedValueChange?.(modifiedEditor.getValue());
-        });
-        setEditor(editor2);
-      }
-    }
-  ) });
+function MonacoDiffEditor(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonacoDiffEditorInner, { ...props }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MonacoDiffEditor,
   MonacoEditor,
-  languageFromPath
+  ...require("./common")
 });
 //# sourceMappingURL=index.cjs.map

package/dist/components/monaco/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport * as prettier from \"prettier/standalone\";\nimport * as pluginTypescript from \"prettier/plugins/typescript\";\nimport * as pluginEsTree from \"prettier/plugins/estree\";\nimport * as pluginYaml from \"prettier/plugins/yaml\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, BoxProps, useComputedColorScheme } from \"@mantine/core\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\nexport type MonacoLanguage =\n  | \"yaml\"\n  | \"toml\"\n  | \"fancy_toml\"\n  | \"json\"\n  | \"key_value\"\n  | \"ini\"\n  | \"string_list\"\n  | \"shell\"\n  | \"dockerfile\"\n  | \"rust\"\n  | \"javascript\"\n  | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n  yaml: [\".yaml\", \".yml\"],\n  toml: [\".toml\"],\n  fancy_toml: [],\n  json: [\".json\"],\n  key_value: [\".env\", \".conf\"],\n  ini: [\".ini\"],\n  string_list: [],\n  shell: [\".sh\", \".bash\", \".zsh\"],\n  dockerfile: [\"Dockerfile\"],\n  rust: [\".rs\"],\n  javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n  typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n    for (const extension of extensions) {\n      if (path.endsWith(extension)) {\n        return lang as MonacoLanguage;\n      }\n    }\n  }\n  return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n  value: string | undefined;\n  onValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  filename?: string;\n  readOnly?: boolean;\n  minHeight?: number;\n  /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n  maxHeightProportion?: number;\n  maxHeight?: number;\n  id?: string;\n}\n\nexport function MonacoEditor({\n  value,\n  onValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  filename,\n  minHeight,\n  maxHeightProportion,\n  maxHeight,\n  id,\n  ...boxProps\n}: MonacoEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const dimensions = useViewportSize();\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    let node = editor.getDomNode();\n    if (!node) return;\n\n    const callback = (e: any) => {\n      if (e.key === \"Escape\") {\n        (document.activeElement as any)?.blur?.();\n      }\n    };\n\n    node.addEventListener(\"keydown\", callback);\n    return () => node.removeEventListener(\"keydown\", callback);\n  }, [editor]);\n\n  useEffect(() => {\n    if (\n      language !== \"typescript\" &&\n      language !== \"javascript\" &&\n      language !== \"yaml\"\n    )\n      return;\n    if (!editor) return;\n    editor.addCommand(\n      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n      async () => {\n        if (!editor) return;\n        const model = editor.getModel();\n        if (!model) return;\n        const position = editor.getPosition();\n        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n        const curr = editor.getValue();\n        const { formatted, cursorOffset } = await prettier.formatWithCursor(\n          curr,\n          {\n            cursorOffset: beforeOffset,\n            parser: language === \"yaml\" ? \"yaml\" : \"typescript\",\n            plugins:\n              language === \"yaml\"\n                ? [pluginYaml]\n                : [pluginTypescript, pluginEsTree as any],\n            printWidth: 80, // Set the desired max line length\n          },\n        );\n        editor.setValue(formatted);\n        editor.setPosition(model.getPositionAt(cursorOffset));\n      },\n    );\n  }, [editor]);\n\n  const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const containerNode = editor.getContainerDomNode();\n\n    containerNode.style.height = `${Math.max(\n      Math.min(\n        contentHeight,\n        Math.floor(dimensions.height * 0.75),\n        maxHeightProportion\n          ? Math.floor(maxHeightProportion * dimensions.height)\n          : 10_000,\n        maxHeight ?? 10_000,\n      ),\n      minHeight ?? MIN_EDITOR_HEIGHT,\n    )}px`;\n  }, [dimensions.height, editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n    minimap: { enabled: false },\n    // scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    tabSize: 2,\n    detectIndentation: true,\n    quickSuggestions: true,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <Editor\n        language={language}\n        value={value}\n        theme={currentTheme}\n        defaultPath={defaultPath(filename)}\n        options={options}\n        onChange={(v) => onValueChange?.(v ?? \"\")}\n        onMount={(editor) => setEditor(editor)}\n      />\n    </Box>\n  );\n}\n\nfunction defaultPath(filename?: string) {\n  if (!filename) return undefined;\n  // Extract only the filename part of path,\n  // avoiding critical issue when path starts with '/'\n  const split = filename.split(\"/\");\n  return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n  original: string | undefined;\n  modified: string | undefined;\n  onModifiedValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  readOnly?: boolean;\n  id?: string;\n  hideUnchangedRegions?: boolean;\n}\n\nexport function MonacoDiffEditor({\n  original,\n  modified,\n  onModifiedValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  id,\n  hideUnchangedRegions = true,\n  ...boxProps\n}: MonacoDiffEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n  const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const line_count = Math.max(original_line_count, modified_line_count);\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const node = editor.getContainerDomNode();\n\n    node.style.height = `${Math.max(\n      Math.min(contentHeight, MAX_DIFF_HEIGHT),\n      MIN_DIFF_HEIGHT,\n    )}px`;\n  }, [editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n    minimap: { enabled: true },\n    scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    hideUnchangedRegions: { enabled: hideUnchangedRegions },\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <DiffEditor\n        language={language}\n        original={original}\n        modified={modified}\n        theme={currentTheme}\n        options={options}\n        onMount={(editor) => {\n          const modifiedEditor = editor.getModifiedEditor();\n          modifiedEditor.onDidChangeModelContent((_) => {\n            onModifiedValueChange?.(modifiedEditor.getValue());\n          });\n          setEditor(editor);\n        }}\n      />\n    </Box>\n  );\n}\n"],"mappings":"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","names":["import_react","editor"]}
+{"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport { MonacoDiffEditorProps, MonacoEditorProps } from \"./common\";\n\nexport * from \"./common\";\n\n// The editor implementation pulls in monaco-editor / @monaco-editor/react,\n// so it is loaded lazily to keep it out of consumers' entry chunks.\nconst MonacoEditorInner = lazy(() =>\n  import(\"./editor\").then((m) => ({ default: m.MonacoEditorImpl })),\n);\nconst MonacoDiffEditorInner = lazy(() =>\n  import(\"./editor\").then((m) => ({ default: m.MonacoDiffEditorImpl })),\n);\n\nexport function MonacoEditor(props: MonacoEditorProps) {\n  return (\n    <Suspense fallback={null}>\n      <MonacoEditorInner {...props} />\n    </Suspense>\n  );\n}\n\nexport function MonacoDiffEditor(props: MonacoDiffEditorProps) {\n  return (\n    <Suspense fallback={null}>\n      <MonacoDiffEditorInner {...props} />\n    </Suspense>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBM;AAjBN,mBAA+B;AAG/B,2BAAc,qBAHd;AAOA,MAAM,wBAAoB;AAAA,EAAK,MAC7B,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAClE;AACA,MAAM,4BAAwB;AAAA,EAAK,MACjC,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;AACtE;AAEO,SAAS,aAAa,OAA0B;AACrD,SACE,4CAAC,yBAAS,UAAU,MAClB,sDAAC,qBAAmB,GAAG,OAAO,GAChC;AAEJ;AAEO,SAAS,iBAAiB,OAA8B;AAC7D,SACE,4CAAC,yBAAS,UAAU,MAClB,sDAAC,yBAAuB,GAAG,OAAO,GACpC;AAEJ;","names":[]}

package/dist/components/monaco/index.d.ts

@@ -1,30 +1,5 @@
-import "./init";
-import { BoxProps } from "@mantine/core";
-export type MonacoLanguage = "yaml" | "toml" | "fancy_toml" | "json" | "key_value" | "ini" | "string_list" | "shell" | "dockerfile" | "rust" | "javascript" | "typescript";
-export declare function languageFromPath(path: string): MonacoLanguage | undefined;
-export interface MonacoEditorProps extends BoxProps {
-    value: string | undefined;
-    onValueChange?: (value: string) => void;
-    language: MonacoLanguage | undefined;
-    enableFancyToml?: boolean;
-    filename?: string;
-    readOnly?: boolean;
-    minHeight?: number;
-    /** Define max height as proportion of dimension height. Should be between 0 and 1. */
-    maxHeightProportion?: number;
-    maxHeight?: number;
-    id?: string;
-}
-export declare function MonacoEditor({ value, onValueChange, language: _language, enableFancyToml, readOnly, filename, minHeight, maxHeightProportion, maxHeight, id, ...boxProps }: MonacoEditorProps): import("react").JSX.Element;
-export interface MonacoDiffEditorProps extends BoxProps {
-    original: string | undefined;
-    modified: string | undefined;
-    onModifiedValueChange?: (value: string) => void;
-    language: MonacoLanguage | undefined;
-    enableFancyToml?: boolean;
-    readOnly?: boolean;
-    id?: string;
-    hideUnchangedRegions?: boolean;
-}
-export declare function MonacoDiffEditor({ original, modified, onModifiedValueChange, language: _language, enableFancyToml, readOnly, id, hideUnchangedRegions, ...boxProps }: MonacoDiffEditorProps): import("react").JSX.Element;
+import { MonacoDiffEditorProps, MonacoEditorProps } from "./common";
+export * from "./common";
+export declare function MonacoEditor(props: MonacoEditorProps): import("react").JSX.Element;
+export declare function MonacoDiffEditor(props: MonacoDiffEditorProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/monaco/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAUhB,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAItE,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,GACZ,MAAM,GACN,WAAW,GACX,KAAK,GACL,aAAa,GACb,OAAO,GACP,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;AAiBjB,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,8BAS5C;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,iBAAiB,+BAgHnB;AAaD,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,EAAE,EACF,oBAA2B,EAC3B,GAAG,QAAQ,EACZ,EAAE,qBAAqB,+BA0DvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEpE,cAAc,UAAU,CAAC;AAWzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAM5D"}

package/dist/components/monaco/index.js

@@ -1,208 +1,20 @@
 import { jsx } from "react/jsx-runtime";
-import "./init";
-import { useEffect, useState } from "react";
-import { DiffEditor, Editor } from "@monaco-editor/react";
-import * as monaco from "monaco-editor";
-import * as prettier from "prettier/standalone";
-import * as pluginTypescript from "prettier/plugins/typescript";
-import * as pluginEsTree from "prettier/plugins/estree";
-import * as pluginYaml from "prettier/plugins/yaml";
-import { useViewportSize } from "@mantine/hooks";
-import { Box, useComputedColorScheme } from "@mantine/core";
-const MIN_EDITOR_HEIGHT = 56;
-const LANGUAGE_EXTENSIONS = {
-  yaml: [".yaml", ".yml"],
-  toml: [".toml"],
-  fancy_toml: [],
-  json: [".json"],
-  key_value: [".env", ".conf"],
-  ini: [".ini"],
-  string_list: [],
-  shell: [".sh", ".bash", ".zsh"],
-  dockerfile: ["Dockerfile"],
-  rust: [".rs"],
-  javascript: [".js", ".jsx", ".mjs", ".cjs"],
-  typescript: [".ts", ".tsx"]
-};
-function languageFromPath(path) {
-  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
-    for (const extension of extensions) {
-      if (path.endsWith(extension)) {
-        return lang;
-      }
-    }
-  }
-  return void 0;
-}
-function MonacoEditor({
-  value,
-  onValueChange,
-  language: _language,
-  enableFancyToml,
-  readOnly,
-  filename,
-  minHeight,
-  maxHeightProportion,
-  maxHeight,
-  id,
-  ...boxProps
-}) {
-  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
-  const dimensions = useViewportSize();
-  const [editor, setEditor] = useState(null);
-  useEffect(() => {
-    if (!editor) return;
-    let node = editor.getDomNode();
-    if (!node) return;
-    const callback = (e) => {
-      if (e.key === "Escape") {
-        document.activeElement?.blur?.();
-      }
-    };
-    node.addEventListener("keydown", callback);
-    return () => node.removeEventListener("keydown", callback);
-  }, [editor]);
-  useEffect(() => {
-    if (language !== "typescript" && language !== "javascript" && language !== "yaml")
-      return;
-    if (!editor) return;
-    editor.addCommand(
-      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
-      async () => {
-        if (!editor) return;
-        const model = editor.getModel();
-        if (!model) return;
-        const position = editor.getPosition();
-        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
-        const curr = editor.getValue();
-        const { formatted, cursorOffset } = await prettier.formatWithCursor(
-          curr,
-          {
-            cursorOffset: beforeOffset,
-            parser: language === "yaml" ? "yaml" : "typescript",
-            plugins: language === "yaml" ? [pluginYaml] : [pluginTypescript, pluginEsTree],
-            printWidth: 80
-            // Set the desired max line length
-          }
-        );
-        editor.setValue(formatted);
-        editor.setPosition(model.getPositionAt(cursorOffset));
-      }
-    );
-  }, [editor]);
-  const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
-  useEffect(() => {
-    if (!editor) return;
-    const contentHeight = line_count * 18 + 30;
-    const containerNode = editor.getContainerDomNode();
-    containerNode.style.height = `${Math.max(
-      Math.min(
-        contentHeight,
-        Math.floor(dimensions.height * 0.75),
-        maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
-        maxHeight ?? 1e4
-      ),
-      minHeight ?? MIN_EDITOR_HEIGHT
-    )}px`;
-  }, [dimensions.height, editor, line_count]);
-  const currentTheme = useComputedColorScheme();
-  const options = {
-    minimap: { enabled: false },
-    // scrollbar: { alwaysConsumeMouseWheel: false },
-    scrollBeyondLastLine: false,
-    folding: false,
-    automaticLayout: true,
-    renderValidationDecorations: "on",
-    renderLineHighlightOnlyWhenFocus: true,
-    readOnly,
-    tabSize: 2,
-    detectIndentation: true,
-    quickSuggestions: true,
-    padding: {
-      top: 15
-    }
-  };
-  return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
-    Editor,
-    {
-      language,
-      value,
-      theme: currentTheme,
-      defaultPath: defaultPath(filename),
-      options,
-      onChange: (v) => onValueChange?.(v ?? ""),
-      onMount: (editor2) => setEditor(editor2)
-    }
-  ) });
-}
-function defaultPath(filename) {
-  if (!filename) return void 0;
-  const split = filename.split("/");
-  return split[split.length - 1];
+import { lazy, Suspense } from "react";
+export * from "./common";
+const MonacoEditorInner = lazy(
+  () => import("./editor").then((m) => ({ default: m.MonacoEditorImpl }))
+);
+const MonacoDiffEditorInner = lazy(
+  () => import("./editor").then((m) => ({ default: m.MonacoDiffEditorImpl }))
+);
+function MonacoEditor(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MonacoEditorInner, { ...props }) });
 }
-const MIN_DIFF_HEIGHT = 100;
-const MAX_DIFF_HEIGHT = 600;
-function MonacoDiffEditor({
-  original,
-  modified,
-  onModifiedValueChange,
-  language: _language,
-  enableFancyToml,
-  readOnly,
-  id,
-  hideUnchangedRegions = true,
-  ...boxProps
-}) {
-  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
-  const [editor, setEditor] = useState(null);
-  const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
-  const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
-  const line_count = Math.max(original_line_count, modified_line_count);
-  useEffect(() => {
-    if (!editor) return;
-    const contentHeight = line_count * 18 + 30;
-    const node = editor.getContainerDomNode();
-    node.style.height = `${Math.max(
-      Math.min(contentHeight, MAX_DIFF_HEIGHT),
-      MIN_DIFF_HEIGHT
-    )}px`;
-  }, [editor, line_count]);
-  const currentTheme = useComputedColorScheme();
-  const options = {
-    minimap: { enabled: true },
-    scrollbar: { alwaysConsumeMouseWheel: false },
-    scrollBeyondLastLine: false,
-    hideUnchangedRegions: { enabled: hideUnchangedRegions },
-    folding: false,
-    automaticLayout: true,
-    renderValidationDecorations: "on",
-    renderLineHighlightOnlyWhenFocus: true,
-    readOnly,
-    padding: {
-      top: 15
-    }
-  };
-  return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
-    DiffEditor,
-    {
-      language,
-      original,
-      modified,
-      theme: currentTheme,
-      options,
-      onMount: (editor2) => {
-        const modifiedEditor = editor2.getModifiedEditor();
-        modifiedEditor.onDidChangeModelContent((_) => {
-          onModifiedValueChange?.(modifiedEditor.getValue());
-        });
-        setEditor(editor2);
-      }
-    }
-  ) });
+function MonacoDiffEditor(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MonacoDiffEditorInner, { ...props }) });
 }
 export {
   MonacoDiffEditor,
-  MonacoEditor,
-  languageFromPath
+  MonacoEditor
 };
 //# sourceMappingURL=index.js.map

package/dist/components/monaco/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport * as prettier from \"prettier/standalone\";\nimport * as pluginTypescript from \"prettier/plugins/typescript\";\nimport * as pluginEsTree from \"prettier/plugins/estree\";\nimport * as pluginYaml from \"prettier/plugins/yaml\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, BoxProps, useComputedColorScheme } from \"@mantine/core\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\nexport type MonacoLanguage =\n  | \"yaml\"\n  | \"toml\"\n  | \"fancy_toml\"\n  | \"json\"\n  | \"key_value\"\n  | \"ini\"\n  | \"string_list\"\n  | \"shell\"\n  | \"dockerfile\"\n  | \"rust\"\n  | \"javascript\"\n  | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n  yaml: [\".yaml\", \".yml\"],\n  toml: [\".toml\"],\n  fancy_toml: [],\n  json: [\".json\"],\n  key_value: [\".env\", \".conf\"],\n  ini: [\".ini\"],\n  string_list: [],\n  shell: [\".sh\", \".bash\", \".zsh\"],\n  dockerfile: [\"Dockerfile\"],\n  rust: [\".rs\"],\n  javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n  typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n    for (const extension of extensions) {\n      if (path.endsWith(extension)) {\n        return lang as MonacoLanguage;\n      }\n    }\n  }\n  return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n  value: string | undefined;\n  onValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  filename?: string;\n  readOnly?: boolean;\n  minHeight?: number;\n  /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n  maxHeightProportion?: number;\n  maxHeight?: number;\n  id?: string;\n}\n\nexport function MonacoEditor({\n  value,\n  onValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  filename,\n  minHeight,\n  maxHeightProportion,\n  maxHeight,\n  id,\n  ...boxProps\n}: MonacoEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const dimensions = useViewportSize();\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    let node = editor.getDomNode();\n    if (!node) return;\n\n    const callback = (e: any) => {\n      if (e.key === \"Escape\") {\n        (document.activeElement as any)?.blur?.();\n      }\n    };\n\n    node.addEventListener(\"keydown\", callback);\n    return () => node.removeEventListener(\"keydown\", callback);\n  }, [editor]);\n\n  useEffect(() => {\n    if (\n      language !== \"typescript\" &&\n      language !== \"javascript\" &&\n      language !== \"yaml\"\n    )\n      return;\n    if (!editor) return;\n    editor.addCommand(\n      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n      async () => {\n        if (!editor) return;\n        const model = editor.getModel();\n        if (!model) return;\n        const position = editor.getPosition();\n        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n        const curr = editor.getValue();\n        const { formatted, cursorOffset } = await prettier.formatWithCursor(\n          curr,\n          {\n            cursorOffset: beforeOffset,\n            parser: language === \"yaml\" ? \"yaml\" : \"typescript\",\n            plugins:\n              language === \"yaml\"\n                ? [pluginYaml]\n                : [pluginTypescript, pluginEsTree as any],\n            printWidth: 80, // Set the desired max line length\n          },\n        );\n        editor.setValue(formatted);\n        editor.setPosition(model.getPositionAt(cursorOffset));\n      },\n    );\n  }, [editor]);\n\n  const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const containerNode = editor.getContainerDomNode();\n\n    containerNode.style.height = `${Math.max(\n      Math.min(\n        contentHeight,\n        Math.floor(dimensions.height * 0.75),\n        maxHeightProportion\n          ? Math.floor(maxHeightProportion * dimensions.height)\n          : 10_000,\n        maxHeight ?? 10_000,\n      ),\n      minHeight ?? MIN_EDITOR_HEIGHT,\n    )}px`;\n  }, [dimensions.height, editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n    minimap: { enabled: false },\n    // scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    tabSize: 2,\n    detectIndentation: true,\n    quickSuggestions: true,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <Editor\n        language={language}\n        value={value}\n        theme={currentTheme}\n        defaultPath={defaultPath(filename)}\n        options={options}\n        onChange={(v) => onValueChange?.(v ?? \"\")}\n        onMount={(editor) => setEditor(editor)}\n      />\n    </Box>\n  );\n}\n\nfunction defaultPath(filename?: string) {\n  if (!filename) return undefined;\n  // Extract only the filename part of path,\n  // avoiding critical issue when path starts with '/'\n  const split = filename.split(\"/\");\n  return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n  original: string | undefined;\n  modified: string | undefined;\n  onModifiedValueChange?: (value: string) => void;\n  language: MonacoLanguage | undefined;\n  enableFancyToml?: boolean;\n  readOnly?: boolean;\n  id?: string;\n  hideUnchangedRegions?: boolean;\n}\n\nexport function MonacoDiffEditor({\n  original,\n  modified,\n  onModifiedValueChange,\n  language: _language,\n  enableFancyToml,\n  readOnly,\n  id,\n  hideUnchangedRegions = true,\n  ...boxProps\n}: MonacoDiffEditorProps) {\n  const language = (\n    _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n  ) as MonacoLanguage;\n\n  const [editor, setEditor] =\n    useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n  const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n  const line_count = Math.max(original_line_count, modified_line_count);\n\n  useEffect(() => {\n    if (!editor) return;\n    const contentHeight = line_count * 18 + 30;\n    const node = editor.getContainerDomNode();\n\n    node.style.height = `${Math.max(\n      Math.min(contentHeight, MAX_DIFF_HEIGHT),\n      MIN_DIFF_HEIGHT,\n    )}px`;\n  }, [editor, line_count]);\n\n  const currentTheme = useComputedColorScheme();\n\n  const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n    minimap: { enabled: true },\n    scrollbar: { alwaysConsumeMouseWheel: false },\n    scrollBeyondLastLine: false,\n    hideUnchangedRegions: { enabled: hideUnchangedRegions },\n    folding: false,\n    automaticLayout: true,\n    renderValidationDecorations: \"on\",\n    renderLineHighlightOnlyWhenFocus: true,\n    readOnly,\n    padding: {\n      top: 15,\n    },\n  };\n\n  return (\n    <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n      <DiffEditor\n        language={language}\n        original={original}\n        modified={modified}\n        theme={currentTheme}\n        options={options}\n        onMount={(editor) => {\n          const modifiedEditor = editor.getModifiedEditor();\n          modifiedEditor.onDidChangeModelContent((_) => {\n            onModifiedValueChange?.(modifiedEditor.getValue());\n          });\n          setEditor(editor);\n        }}\n      />\n    </Box>\n  );\n}\n"],"mappings":"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","names":["editor"]}
+{"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport { MonacoDiffEditorProps, MonacoEditorProps } from \"./common\";\n\nexport * from \"./common\";\n\n// The editor implementation pulls in monaco-editor / @monaco-editor/react,\n// so it is loaded lazily to keep it out of consumers' entry chunks.\nconst MonacoEditorInner = lazy(() =>\n  import(\"./editor\").then((m) => ({ default: m.MonacoEditorImpl })),\n);\nconst MonacoDiffEditorInner = lazy(() =>\n  import(\"./editor\").then((m) => ({ default: m.MonacoDiffEditorImpl })),\n);\n\nexport function MonacoEditor(props: MonacoEditorProps) {\n  return (\n    <Suspense fallback={null}>\n      <MonacoEditorInner {...props} />\n    </Suspense>\n  );\n}\n\nexport function MonacoDiffEditor(props: MonacoDiffEditorProps) {\n  return (\n    <Suspense fallback={null}>\n      <MonacoDiffEditorInner {...props} />\n    </Suspense>\n  );\n}\n"],"mappings":"AAiBM;AAjBN,SAAS,MAAM,gBAAgB;AAG/B,cAAc;AAId,MAAM,oBAAoB;AAAA,EAAK,MAC7B,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAClE;AACA,MAAM,wBAAwB;AAAA,EAAK,MACjC,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;AACtE;AAEO,SAAS,aAAa,OAA0B;AACrD,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,qBAAmB,GAAG,OAAO,GAChC;AAEJ;AAEO,SAAS,iBAAiB,OAA8B;AAC7D,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,yBAAuB,GAAG,OAAO,GACpC;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mogh_ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Common UI components and styling used across Mogh apps.",
   "type": "module",
   "main": "./dist/index.cjs",