@hanzo/ui 4.8.5 → 5.0.0

package/dist/markdown/index.mjs

@@ -0,0 +1,635 @@
+import { CopyToClipboardIcon } from '../chunk-KJXSLTG7.mjs';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../chunk-VZVOB5MG.mjs';
+import { Button } from '../chunk-QFA6U75G.mjs';
+import { cn } from '../chunk-TH2UKMCO.mjs';
+import { createContext, memo, useContext, useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import github from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RotateCcw, Download } from 'lucide-react';
+import mermaid from 'mermaid';
+import { toast } from 'sonner';
+import svgPanZoom from 'svg-pan-zoom';
+
+var areChildrenEqual = (prev, next) => {
+  if (typeof prev === "string") return prev === next;
+  return JSON.stringify(prev) === JSON.stringify(next);
+};
+var areNodesEqual = (prev, next) => {
+  if (!prev || !next) return false;
+  const isEqual = JSON.stringify(prev?.properties) === JSON.stringify(next?.properties) && areChildrenEqual(prev?.children, next?.children);
+  return isEqual;
+};
+var memoCompareNodes = (prev, next) => {
+  return areNodesEqual(prev.node, next.node);
+};
+var memoizeMarkdownComponents = (components = {}) => {
+  return Object.fromEntries(
+    Object.entries(components ?? {}).map(([key, value]) => {
+      if (!value) return [key, value];
+      const Component = value;
+      const WithoutNode = ({ node, ...props }) => {
+        return /* @__PURE__ */ jsx(Component, { ...props });
+      };
+      return [key, memo(WithoutNode, memoCompareNodes)];
+    })
+  );
+};
+mermaid.initialize({
+  startOnLoad: true,
+  mindmap: {
+    useWidth: 800
+  },
+  theme: "dark",
+  fontSize: 18,
+  darkMode: true,
+  fontFamily: "Inter"
+});
+var generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
+var downloadBlob = async (blob, filename) => {
+  try {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    toast.success("Mermaid diagram saved successfully");
+  } catch (error) {
+    toast.error("Failed to save diagram");
+    console.error("Download error:", error);
+  }
+};
+var MermaidDiagram = ({
+  code,
+  className,
+  isRunning
+}) => {
+  const ref = useRef(null);
+  const lastCode = useRef(null);
+  const [instance, setInstance] = useState(null);
+  const isComplete = !isRunning;
+  const resetZoom = useCallback(() => {
+    instance?.fit();
+    instance?.center();
+  }, [instance]);
+  const downloadSVG = useCallback(() => {
+    if (ref.current) {
+      const svg = ref.current.innerHTML;
+      const blob = new Blob([svg], { type: "image/svg+xml" });
+      void downloadBlob(blob, "mermaid-diagram.svg");
+    }
+  }, []);
+  const enableZoom = useCallback(() => {
+    instance?.enablePan();
+    instance?.enableZoom();
+  }, [instance]);
+  const disableZoom = useCallback(() => {
+    instance?.disablePan();
+    instance?.disableZoom();
+  }, [instance]);
+  const handleFocus = useCallback(() => {
+    enableZoom();
+  }, [enableZoom]);
+  const handleBlur = useCallback(() => {
+    disableZoom();
+  }, [disableZoom]);
+  const handleClick = useCallback(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+  useEffect(() => {
+    if (!isComplete || !ref.current || !code) return;
+    if (lastCode.current === code) return;
+    void (async () => {
+      try {
+        const id = generateId();
+        const { svg } = await mermaid.render(id, code);
+        if (ref.current) {
+          ref.current.innerHTML = svg;
+          const svgElement = ref.current.querySelector("svg");
+          if (svgElement) {
+            svgElement.setAttribute("height", "100%");
+            svgElement.setAttribute("width", "100%");
+            svgElement.style.height = "100%";
+            svgElement.style.width = "100%";
+            svgElement.style.position = "absolute";
+            svgElement.style.top = "0";
+            svgElement.style.left = "0";
+            const panZoomInstance = svgPanZoom(svgElement);
+            panZoomInstance.fit();
+            panZoomInstance.center();
+            panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
+            panZoomInstance.disablePan();
+            panZoomInstance.disableZoom();
+            setInstance(panZoomInstance);
+          }
+        }
+        lastCode.current = code;
+      } catch (e) {
+      }
+    })();
+  }, [code, isComplete]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "icon",
+            onClick: resetZoom,
+            className: "text-text-secondary",
+            children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Reset Zoom" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "icon",
+            onClick: downloadSVG,
+            className: "text-text-secondary",
+            children: /* @__PURE__ */ jsx(Download, { size: 14 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Download SVG" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: handleClick,
+        className: "text-text-secondary bg-bg-quaternary absolute right-2 bottom-2 z-10 rounded px-2 py-1 text-xs",
+        children: "Click to focus, then scroll to zoom & drag to pan"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        tabIndex: 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        className: cn(
+          "text-text-secondary bg-bg-quaternary focus:ring-opacity-50 relative w-full cursor-grab overflow-hidden rounded-b-lg p-4 py-10 text-center text-sm focus:cursor-grabbing focus:ring-2 focus:ring-blue-500 focus:outline-none",
+          className
+        ),
+        style: { width: "100%", minHeight: "400px" },
+        children: "Drawing diagram..."
+      }
+    )
+  ] });
+};
+function useCallbackRef(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args) => callbackRef.current?.(...args), []);
+}
+var CodeHeader = ({ language, code }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "code-header-root bg-bg-darker text-text-default flex items-center justify-between gap-4 rounded-t-lg px-4 py-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "code-header-language text-text-secondary text-xs font-medium lowercase", children: language }),
+    /* @__PURE__ */ jsx(
+      CopyToClipboardIcon,
+      {
+        className: cn(
+          "text-text-secondary h-7 w-7 bg-transparent hover:bg-gray-900 [&>svg]:h-3 [&>svg]:w-3"
+        ),
+        string: code
+      }
+    )
+  ] });
+};
+var makeMakeSyntaxHighlighter = (SyntaxHighlighter) => (config) => {
+  const PrismSyntaxHighlighter = ({
+    components: { Pre, Code: Code2 },
+    language,
+    code
+  }) => {
+    return /* @__PURE__ */ jsx(
+      SyntaxHighlighter,
+      {
+        CodeTag: Code2,
+        PreTag: Pre,
+        ...config,
+        language,
+        children: code
+      }
+    );
+  };
+  PrismSyntaxHighlighter.displayName = "PrismSyntaxHighlighter";
+  return PrismSyntaxHighlighter;
+};
+PrismAsyncLight.registerLanguage("js", tsx);
+PrismAsyncLight.registerLanguage("jsx", tsx);
+PrismAsyncLight.registerLanguage("ts", tsx);
+PrismAsyncLight.registerLanguage("tsx", tsx);
+PrismAsyncLight.registerLanguage("python", python);
+var makePrismAsyncLightSyntaxHighlighter = makeMakeSyntaxHighlighter(PrismAsyncLight);
+var SyntaxHighlighterBase = makePrismAsyncLightSyntaxHighlighter({
+  style: github,
+  customStyle: {
+    margin: 0,
+    width: "100%",
+    background: "var(--color-bg-darker)",
+    padding: "1.5rem 1rem",
+    fontSize: "0.875em"
+  }
+});
+var defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn(
+        "mt-[1em] mb-[0.7em] scroll-m-20 text-[1.375rem] font-bold last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: cn(
+        "text-em-xl mt-[0.8em] mb-[0.4em] scroll-m-20 font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(
+        "text-em-lg mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h4",
+    {
+      className: cn(
+        "text-em-base mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h5",
+    {
+      className: cn(
+        "text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "h6",
+    {
+      className: cn(
+        "text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-em-base my-[0.5em] first:mt-0 last:mb-0", className),
+      ...props
+    }
+  ),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn(
+        "font-medium text-blue-400 underline underline-offset-4",
+        className
+      ),
+      target: "_blank",
+      ...props
+    }
+  ),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: cn("border-l-2 pl-6 italic", className),
+      ...props
+    }
+  ),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "text-em-base my-[1em] ml-6 list-disc [&>li]:mt-2",
+        className
+      ),
+      ...props
+    }
+  ),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn(
+        "text-em-base my-[1em] ml-6 list-decimal [&>li]:mt-[0.5em]",
+        className
+      ),
+      ...props
+    }
+  ),
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: cn("border-divider my-[2.25em] border-b", className),
+      ...props
+    }
+  ),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-[1.5em] size-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "w-full border-collapse border-spacing-0", ...props }) }),
+  thead: ({ className, ...props }) => /* @__PURE__ */ jsx("thead", { className: cn("[&>tr]:border-none", className), ...props }),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "text-em-sm px-[1em] py-[0.875em] text-left font-semibold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        "text-em-sm border-divider border-b px-[1em] py-[0.875em] text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className
+      ),
+      ...props
+    }
+  ),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "sup",
+    {
+      className: cn("[&>a]:text-em-xs [&>a]:no-underline", className),
+      ...props
+    }
+  ),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: cn(
+        "bg-bg-darker text-text-default overflow-x-auto rounded-b-lg !px-[1em] !py-[0.5em]",
+        className
+      ),
+      ...props
+    }
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: cn(
+          !isCodeBlock && "bg-bg-darker text-em-sm border-divider rounded-sm p-[0.25em] font-semibold",
+          className
+        ),
+        ...props
+      }
+    );
+  },
+  CodeHeader,
+  SyntaxHighlighter: SyntaxHighlighterBase
+});
+var PreContext = createContext(null);
+var IsRunningContext = createContext(void 0);
+var useIsMarkdownCodeBlock = () => {
+  return useContext(PreContext) !== null;
+};
+var useIsRunning = () => {
+  return useContext(IsRunningContext);
+};
+var PreOverride = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(PreContext.Provider, { value: rest, children });
+};
+var DefaultPre = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx("pre", { className, ...rest });
+var DefaultCode = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx("code", { className, ...rest });
+var DefaultCodeBlockContent = ({ node, components: { Pre, Code: Code2 }, code }) => /* @__PURE__ */ jsx(Pre, { children: /* @__PURE__ */ jsx(Code2, { node, children: code }) });
+var DefaultCodeHeader = () => null;
+var DefaultCodeBlock = ({
+  node,
+  components: { Pre, Code: Code2, SyntaxHighlighter, CodeHeader: CodeHeader2 },
+  language,
+  code,
+  isRunning
+}) => {
+  const components = useMemo(() => ({ Pre, Code: Code2 }), [Pre, Code2]);
+  const SH = !!language ? SyntaxHighlighter : DefaultCodeBlockContent;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CodeHeader2, { node, language, code }),
+    /* @__PURE__ */ jsx(
+      SH,
+      {
+        node,
+        components,
+        language: language ?? "unknown",
+        code,
+        isRunning
+      }
+    )
+  ] });
+};
+var withDefaultProps = ({
+  className,
+  ...defaultProps
+}) => ({ className: classNameProp, ...props }) => {
+  return {
+    className: cn(className, classNameProp),
+    ...defaultProps,
+    ...props
+  };
+};
+var CodeBlockOverride = ({
+  node,
+  components: {
+    Pre,
+    Code: Code2,
+    SyntaxHighlighter: FallbackSyntaxHighlighter,
+    CodeHeader: FallbackCodeHeader
+  },
+  componentsByLanguage = {},
+  children,
+  ...codeProps
+}) => {
+  const preProps = useContext(PreContext);
+  const isRunning = useIsRunning();
+  const getPreProps = withDefaultProps(preProps);
+  const WrappedPre = useCallbackRef((props) => /* @__PURE__ */ jsx(Pre, { ...getPreProps(props) }));
+  const getCodeProps = withDefaultProps(codeProps);
+  const WrappedCode = useCallbackRef((props) => /* @__PURE__ */ jsx(Code2, { ...getCodeProps(props) }));
+  const language = /language-(\w+)/.exec(codeProps.className || "")?.[1] ?? "";
+  if (typeof children !== "string") {
+    return /* @__PURE__ */ jsx(
+      DefaultCodeBlockContent,
+      {
+        code: children,
+        components: { Pre: WrappedPre, Code: WrappedCode },
+        node
+      }
+    );
+  }
+  const SyntaxHighlighter = componentsByLanguage[language]?.SyntaxHighlighter ?? FallbackSyntaxHighlighter;
+  const CodeHeader2 = componentsByLanguage[language]?.CodeHeader ?? FallbackCodeHeader;
+  return /* @__PURE__ */ jsx(
+    DefaultCodeBlock,
+    {
+      node,
+      components: {
+        Pre: WrappedPre,
+        Code: WrappedCode,
+        SyntaxHighlighter,
+        CodeHeader: CodeHeader2
+      },
+      language: language || "unknown",
+      code: children,
+      isRunning
+    }
+  );
+};
+var CodeOverrideBase = ({
+  node,
+  components,
+  componentsByLanguage,
+  ...props
+}) => {
+  const isCodeBlock = useContext(PreContext) !== null;
+  if (!isCodeBlock) return /* @__PURE__ */ jsx(components.Code, { ...props });
+  return /* @__PURE__ */ jsx(
+    CodeBlockOverride,
+    {
+      components,
+      componentsByLanguage,
+      node,
+      ...props
+    }
+  );
+};
+var CodeOverride = memo(CodeOverrideBase, (prev, next) => {
+  const isEqual = prev.components === next.components && prev.componentsByLanguage === next.componentsByLanguage && memoCompareNodes(prev, next);
+  return isEqual;
+});
+var MarkdownTextPrimitive = ({
+  components: userComponents,
+  className,
+  containerProps,
+  containerComponent: Container = "div",
+  content,
+  componentsByLanguage,
+  ref,
+  isRunning,
+  ...rest
+}) => {
+  const {
+    pre = DefaultPre,
+    code = DefaultCode,
+    SyntaxHighlighter = DefaultCodeBlockContent,
+    CodeHeader: CodeHeader2 = DefaultCodeHeader
+  } = userComponents ?? {};
+  const useCodeOverrideComponents = useMemo(() => {
+    return {
+      Pre: pre,
+      Code: code,
+      SyntaxHighlighter,
+      CodeHeader: CodeHeader2
+    };
+  }, [pre, code, SyntaxHighlighter, CodeHeader2]);
+  const CodeComponent = useCallbackRef((props) => /* @__PURE__ */ jsx(
+    CodeOverride,
+    {
+      components: useCodeOverrideComponents,
+      componentsByLanguage,
+      ...props
+    }
+  ));
+  const components = useMemo(() => {
+    const { pre: pre2, code: code2, SyntaxHighlighter: SyntaxHighlighter2, CodeHeader: CodeHeader3, ...componentsRest } = userComponents ?? {};
+    return {
+      ...componentsRest,
+      pre: PreOverride,
+      code: CodeComponent
+    };
+  }, [CodeComponent, userComponents]);
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      ...containerProps,
+      className: cn(className, containerProps?.className),
+      ref,
+      children: /* @__PURE__ */ jsx(IsRunningContext.Provider, { value: isRunning, children: /* @__PURE__ */ jsx(ReactMarkdown, { components, ...rest, children: content }) })
+    }
+  );
+};
+MarkdownTextPrimitive.displayName = "MarkdownTextPrimitive";
+var MarkdownTextBase = ({
+  className,
+  isRunning,
+  components: userComponents,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    MarkdownTextPrimitive,
+    {
+      components: defaultComponents,
+      remarkPlugins: [remarkGfm, remarkMath],
+      rehypePlugins: [rehypeKatex],
+      className: cn(isRunning && "md-running", className),
+      isRunning,
+      componentsByLanguage: {
+        mermaid: {
+          SyntaxHighlighter: MermaidDiagram
+        }
+      },
+      ...rest
+    }
+  );
+};
+var MarkdownText = memo(
+  MarkdownTextBase,
+  (prev, next) => prev.content === next.content && prev.isRunning === next.isRunning && prev.className === next.className
+);
+
+export { CodeHeader, CodeOverride, CodeOverrideBase, DefaultCode, DefaultCodeBlock, DefaultCodeBlockContent, DefaultCodeHeader, DefaultPre, IsRunningContext, MarkdownText, MarkdownTextBase, MarkdownTextPrimitive, MermaidDiagram, PreContext, PreOverride, SyntaxHighlighterBase, defaultComponents, makePrismAsyncLightSyntaxHighlighter, useIsMarkdownCodeBlock, useIsRunning, withDefaultProps };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map