@gofreego/tsutils 0.1.10 → 0.1.12

package/dist/index.d.mts

@@ -120,6 +120,7 @@ interface ReadmeViewerProps {
     content: string;
     className?: string;
     isDark?: boolean;
+    muiTheme?: any;
 }
 declare const ReadmeViewer: React.FC<ReadmeViewerProps>;
 

package/dist/index.d.ts

@@ -120,6 +120,7 @@ interface ReadmeViewerProps {
     content: string;
     className?: string;
     isDark?: boolean;
+    muiTheme?: any;
 }
 declare const ReadmeViewer: React.FC<ReadmeViewerProps>;
 

package/dist/index.js

@@ -7,6 +7,9 @@ var reactRouterDom = require('react-router-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
+var remarkMath = require('remark-math');
+var rehypeKatex = require('rehype-katex');
+require('katex/dist/katex.min.css');
 var ContentCopyIcon = require('@mui/icons-material/ContentCopy');
 var CheckIcon = require('@mui/icons-material/Check');
 var shiki = require('shiki');
@@ -16,6 +19,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
+var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
 var ContentCopyIcon__default = /*#__PURE__*/_interopDefault(ContentCopyIcon);
 var CheckIcon__default = /*#__PURE__*/_interopDefault(CheckIcon);
 var WarningAmberIcon__default = /*#__PURE__*/_interopDefault(WarningAmberIcon);
@@ -400,7 +405,7 @@ var getHighlighter = async () => {
   }
   highlighterPromise = shiki.createHighlighter({
     themes: ["github-light", "github-dark"],
-    langs: ["js", "ts", "go", "json", "bash", "yaml", "md", "python", "java", "cpp", "c", "html", "css", "sql"]
+    langs: ["js", "ts", "go", "json", "bash", "yaml", "md", "python", "java", "cpp", "c", "html", "css", "sql", "http", "text"]
   }).then((highlighter) => {
     highlighterInstance = highlighter;
     return highlighter;
@@ -410,8 +415,10 @@ var getHighlighter = async () => {
 var ReadmeViewer = ({
   content,
   className = "",
-  isDark = false
+  isDark: propIsDark,
+  muiTheme
 }) => {
+  const isDark = propIsDark !== void 0 ? propIsDark : muiTheme?.palette?.mode === "dark";
   const [highlighter, setHighlighter] = react.useState(null);
   const [copiedBlocks, setCopiedBlocks] = react.useState(/* @__PURE__ */ new Set());
   react.useEffect(() => {
@@ -432,70 +439,85 @@ var ReadmeViewer = ({
       console.error("Failed to copy text: ", err);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `readme-viewer markdown-body ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ReactMarkdown__default.default,
-    {
-      remarkPlugins: [remarkGfm__default.default],
-      components: {
-        code({ className: className2, children, ...props }) {
-          const match = /language-(\w+)/.exec(className2 || "");
-          if (match && highlighter) {
-            const codeText = String(children).replace(/\n$/, "");
-            const blockId = `code-${Math.random().toString(36).substr(2, 9)}`;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  dangerouslySetInnerHTML: {
-                    __html: highlighter.codeToHtml(
-                      codeText,
-                      {
-                        lang: match[1],
-                        theme: isDark ? "github-dark" : "github-light"
-                      }
-                    )
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => copyToClipboard(codeText, blockId),
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px",
-                    backgroundColor: "var(--md-sys-color-surface-container-high)",
-                    border: "1px solid var(--md-sys-color-outline-variant)",
-                    borderRadius: "4px",
-                    padding: "6px",
-                    fontSize: "14px",
-                    cursor: "pointer",
-                    color: "var(--md-sys-color-on-surface-variant)",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    transition: "all 0.2s ease",
-                    width: "32px",
-                    height: "32px"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-highest)" : "var(--md-sys-color-surface-container-high)";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-high)" : "var(--md-sys-color-surface-container-highest)";
-                  },
-                  title: copiedBlocks.has(blockId) ? "Copied!" : "Copy code",
-                  children: copiedBlocks.has(blockId) ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon__default.default, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsxRuntime.jsx(ContentCopyIcon__default.default, { style: { fontSize: "16px" } })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `readme-viewer markdown-body ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        .shiki-wrapper pre.shiki {
+          padding: 16px !important;
+          border-radius: 8px !important;
+          overflow-x: auto;
+          margin-bottom: 16px;
+          border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ReactMarkdown__default.default,
+      {
+        remarkPlugins: [remarkGfm__default.default, remarkMath__default.default],
+        rehypePlugins: [rehypeKatex__default.default],
+        components: {
+          code({ className: className2, children, ...props }) {
+            const match = /language-(\w+)/.exec(className2 || "");
+            if (match && highlighter) {
+              const codeText = String(children).replace(/\n$/, "");
+              const blockId = `code-${Math.random().toString(36).substr(2, 9)}`;
+              let highlightedHtml = "";
+              try {
+                highlightedHtml = highlighter.codeToHtml(codeText, {
+                  lang: match[1],
+                  theme: isDark ? "github-dark" : "github-light"
+                });
+              } catch (e) {
+                try {
+                  highlightedHtml = highlighter.codeToHtml(codeText, {
+                    lang: "text",
+                    theme: isDark ? "github-dark" : "github-light"
+                  });
+                } catch (fallbackError) {
+                  highlightedHtml = `<pre><code>${codeText}</code></pre>`;
                 }
-              )
-            ] });
+              }
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => copyToClipboard(codeText, blockId),
+                    style: {
+                      position: "absolute",
+                      top: "8px",
+                      right: "8px",
+                      backgroundColor: "var(--md-sys-color-surface-container-high)",
+                      border: "1px solid var(--md-sys-color-outline-variant)",
+                      borderRadius: "4px",
+                      padding: "6px",
+                      fontSize: "14px",
+                      cursor: "pointer",
+                      color: "var(--md-sys-color-on-surface-variant)",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease",
+                      width: "32px",
+                      height: "32px"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-highest)" : "var(--md-sys-color-surface-container-high)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-high)" : "var(--md-sys-color-surface-container-highest)";
+                    },
+                    title: copiedBlocks.has(blockId) ? "Copied!" : "Copy code",
+                    children: copiedBlocks.has(blockId) ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon__default.default, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsxRuntime.jsx(ContentCopyIcon__default.default, { style: { fontSize: "16px" } })
+                  }
+                )
+              ] });
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx("code", { className: className2, ...props, children });
           }
-          return /* @__PURE__ */ jsxRuntime.jsx("code", { className: className2, ...props, children });
-        }
-      },
-      children: content
-    }
-  ) });
+        },
+        children: content
+      }
+    )
+  ] });
 };
 var ReadmeViewer_default = ReadmeViewer;
 var NotificationContext = react.createContext(void 0);
@@ -584,13 +606,13 @@ var ConfirmDialog = ({
   onConfirm,
   onCancel
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open, onClose: onCancel, maxWidth: "xs", fullWidth: true, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open, onClose: onCancel, maxWidth: "xs", fullWidth: true, slotProps: { paper: { sx: { borderRadius: 4 } } }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(WarningAmberIcon__default.default, { color: confirmColor }),
       title
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", children: message }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { sx: { px: 3, pb: 2 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, variant: "outlined", children: cancelText }),
       /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onConfirm, variant: "contained", color: confirmColor, autoFocus: true, children: confirmText })
     ] })