@hanzo/ui 4.9.0 → 5.0.1

package/dist/markdown/index.mjs

@@ -1,635 +0,0 @@
-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