mogh_ui 0.7.6 → 1.0.1

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": "0.7.6",
+  "version": "1.0.1",
   "description": "Common UI components and styling used across Mogh apps.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -29,38 +29,38 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@mantine/core": "^9.4.1",
-    "@mantine/form": "^9.4.1",
-    "@mantine/hooks": "^9.4.1",
-    "@mantine/notifications": "^9.4.1",
+    "@mantine/core": "^9.5.1",
+    "@mantine/form": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
+    "@mantine/notifications": "^9.5.1",
     "@monaco-editor/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-query": "^5.101.2",
-    "lucide-react": "^1.22.0",
-    "mogh_auth_client": "^1.7.0",
+    "@tanstack/react-table": "^9.0.0",
+    "@tanstack/react-query": "^5.101.4",
+    "lucide-react": "^1.29.0",
+    "mogh_auth_client": "^1.7.1",
     "monaco-editor": "^0.56.0",
     "monaco-yaml": "^5.5.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2"
   },
   "devDependencies": {
-    "@mantine/core": "^9.4.1",
-    "@mantine/form": "^9.4.1",
-    "@mantine/hooks": "^9.4.1",
-    "@mantine/notifications": "^9.4.1",
+    "@mantine/core": "^9.5.1",
+    "@mantine/form": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
+    "@mantine/notifications": "^9.5.1",
     "@monaco-editor/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-query": "^5.101.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "lucide-react": "^1.22.0",
-    "mogh_auth_client": "^1.7.0",
+    "@tanstack/react-table": "^9.0.0",
+    "@tanstack/react-query": "^5.101.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "lucide-react": "^1.29.0",
+    "mogh_auth_client": "^1.7.1",
     "monaco-editor": "^0.56.0",
     "monaco-yaml": "^5.5.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2"
   }