@gofreego/tsutils 0.1.10 → 0.1.12

package/dist/index.mjs

@@ -5,6 +5,9 @@ import { BrowserRouter, useLocation, Routes, Route, Outlet, NavLink } from 'reac
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import { createHighlighter } from 'shiki';
@@ -390,7 +393,7 @@ var getHighlighter = async () => {
   }
   highlighterPromise = 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;
@@ -400,8 +403,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] = useState(null);
   const [copiedBlocks, setCopiedBlocks] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
@@ -422,70 +427,85 @@ var ReadmeViewer = ({
       console.error("Failed to copy text: ", err);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: `readme-viewer markdown-body ${className}`, children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      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__ */ jsxs("div", { style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  dangerouslySetInnerHTML: {
-                    __html: highlighter.codeToHtml(
-                      codeText,
-                      {
-                        lang: match[1],
-                        theme: isDark ? "github-dark" : "github-light"
-                      }
-                    )
-                  }
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsx(CheckIcon, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsx(ContentCopyIcon, { style: { fontSize: "16px" } })
+  return /* @__PURE__ */ jsxs("div", { className: `readme-viewer markdown-body ${className}`, children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm, remarkMath],
+        rehypePlugins: [rehypeKatex],
+        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__ */ jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }),
+                /* @__PURE__ */ 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__ */ jsx(CheckIcon, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsx(ContentCopyIcon, { style: { fontSize: "16px" } })
+                  }
+                )
+              ] });
+            }
+            return /* @__PURE__ */ jsx("code", { className: className2, ...props, children });
           }
-          return /* @__PURE__ */ jsx("code", { className: className2, ...props, children });
-        }
-      },
-      children: content
-    }
-  ) });
+        },
+        children: content
+      }
+    )
+  ] });
 };
 var ReadmeViewer_default = ReadmeViewer;
 var NotificationContext = createContext(void 0);
@@ -574,13 +594,13 @@ var ConfirmDialog = ({
   onConfirm,
   onCancel
 }) => {
-  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: onCancel, maxWidth: "xs", fullWidth: true, children: [
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: onCancel, maxWidth: "xs", fullWidth: true, slotProps: { paper: { sx: { borderRadius: 4 } } }, children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
       /* @__PURE__ */ jsx(WarningAmberIcon, { color: confirmColor }),
       title
     ] }) }),
     /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: message }) }),
-    /* @__PURE__ */ jsxs(DialogActions, { children: [
+    /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
       /* @__PURE__ */ jsx(Button, { onClick: onCancel, variant: "outlined", children: cancelText }),
       /* @__PURE__ */ jsx(Button, { onClick: onConfirm, variant: "contained", color: confirmColor, autoFocus: true, children: confirmText })
     ] })