vantage-md 0.1.0

package/dist/react.js

@@ -0,0 +1,826 @@
+import { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
+import rehypeSlug from 'rehype-slug';
+import YAML from 'yaml';
+import { parse } from 'smol-toml';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+
+// src/MarkdownViewer.tsx
+
+// src/rehypeSourceLines.ts
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "li",
+  "blockquote",
+  "pre",
+  "table",
+  "tr",
+  "ul",
+  "ol",
+  "hr",
+  "div"
+]);
+function visit(node) {
+  if ("children" in node) {
+    for (const child of node.children) {
+      if (child.type === "element") {
+        if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
+          child.properties = child.properties || {};
+          child.properties["dataSourceLine"] = child.position.start.line;
+        }
+        visit(child);
+      }
+    }
+  }
+}
+var rehypeSourceLines = () => {
+  return (tree) => {
+    visit(tree);
+  };
+};
+var rehypeSourceLines_default = rehypeSourceLines;
+var sanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...defaultSchema.tagNames || [],
+    // KaTeX MathML elements
+    "math",
+    "semantics",
+    "mrow",
+    "mi",
+    "mo",
+    "mn",
+    "msup",
+    "msub",
+    "mfrac",
+    "mover",
+    "munder",
+    "msqrt",
+    "mroot",
+    "mtable",
+    "mtr",
+    "mtd",
+    "mtext",
+    "mspace",
+    "annotation",
+    // Other
+    "figure",
+    "figcaption",
+    "summary",
+    "details"
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    "*": [
+      ...defaultSchema.attributes?.["*"] || [],
+      "className",
+      "style",
+      "dataSourceLine"
+    ],
+    code: [...defaultSchema.attributes?.code || [], "className"],
+    span: [...defaultSchema.attributes?.span || [], "className", "style"],
+    div: [...defaultSchema.attributes?.div || [], "className", "style"],
+    a: [...defaultSchema.attributes?.a || [], "id", "className"],
+    math: ["xmlns"],
+    annotation: ["encoding"],
+    img: [...defaultSchema.attributes?.img || [], "loading"],
+    td: [...defaultSchema.attributes?.td || [], "style"],
+    th: [...defaultSchema.attributes?.th || [], "style"]
+  }
+};
+function parseFrontmatter(content) {
+  if (content.startsWith("+++")) {
+    return parseFrontmatterWithDelimiter(content, "+++", "toml");
+  }
+  if (content.startsWith("---")) {
+    return parseFrontmatterWithDelimiter(content, "---", "yaml");
+  }
+  return { frontmatter: {}, body: content, format: "none" };
+}
+function parseFrontmatterWithDelimiter(content, delimiter, format) {
+  const searchStart = delimiter.length;
+  const endIndex = content.indexOf(`
+${delimiter}`, searchStart);
+  if (endIndex === -1) {
+    return { frontmatter: {}, body: content, format: "none" };
+  }
+  const raw = content.slice(searchStart + 1, endIndex).trim();
+  const bodyStart = endIndex + 1 + delimiter.length;
+  const body = content.slice(bodyStart).replace(/^\n/, "");
+  try {
+    const frontmatter = format === "toml" ? parse(raw) : YAML.parse(raw);
+    return { frontmatter: frontmatter || {}, body, format };
+  } catch {
+    return { frontmatter: {}, body: content, format: "none" };
+  }
+}
+
+// src/mermaidCache.ts
+var svgCache = /* @__PURE__ */ new Map();
+
+// src/mermaidLoader.ts
+var mermaidInstance = null;
+var mermaidLoading = null;
+var isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+async function getMermaid() {
+  if (mermaidInstance) return mermaidInstance;
+  if (!mermaidLoading) {
+    mermaidLoading = import('mermaid').then((mod) => {
+      const m = mod.default;
+      m.initialize({
+        startOnLoad: false,
+        theme: isDark() ? "dark" : "default",
+        securityLevel: "strict",
+        suppressErrorRendering: true
+      });
+      mermaidInstance = m;
+      return m;
+    });
+  }
+  return mermaidLoading;
+}
+var AlertTriangleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 shrink-0", children: [
+  /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+] });
+var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronUpIcon = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+var MaximizeIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 text-gray-600", children: [
+  /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
+] });
+var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+] });
+function extractErrorMessage(err) {
+  if (err instanceof Error) {
+    const msg = err.message;
+    const parseMatch = msg.match(
+      /(?:Parse error|Syntax error|Error).*?(?:line \d+.*)/i
+    );
+    if (parseMatch) return parseMatch[0];
+    return msg.split("\n")[0].slice(0, 200);
+  }
+  if (typeof err === "string") return err.split("\n")[0].slice(0, 200);
+  return "Unknown error";
+}
+function DiagramModal({
+  isOpen,
+  onClose,
+  children
+}) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handler);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-white rounded-lg shadow-xl w-full max-w-5xl max-h-[90vh] flex flex-col",
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Mermaid Diagram" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto flex-1", children })
+          ]
+        }
+      )
+    }
+  );
+}
+var MermaidDiagramInner = ({ code }) => {
+  const hasCached = svgCache.has(code);
+  const [svg, setSvg] = useState(() => svgCache.get(code) || "");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [showSource, setShowSource] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(!hasCached);
+  const [minHeight, setMinHeight] = useState("auto");
+  const containerRef = useRef(null);
+  const lastHeightRef = useRef(null);
+  const stableId = useMemo(() => {
+    let hash = 0;
+    for (let i = 0; i < code.length; i++) {
+      const char = code.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return `mermaid-${Math.abs(hash).toString(36)}`;
+  }, [code]);
+  useEffect(() => {
+    if (hasCached) return;
+    let mounted = true;
+    const renderDiagram = async () => {
+      try {
+        if (containerRef.current) {
+          const height = containerRef.current.offsetHeight;
+          lastHeightRef.current = height;
+          setMinHeight(`${height}px`);
+        }
+        const m = await getMermaid();
+        const id = `${stableId}-${Date.now()}`;
+        const { svg: renderedSvg } = await m.render(id, code);
+        if (mounted) {
+          svgCache.set(code, renderedSvg);
+          setSvg(renderedSvg);
+          setErrorMessage(null);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        console.error("Mermaid render error:", err);
+        if (mounted) {
+          setErrorMessage(extractErrorMessage(err));
+          setIsLoading(false);
+        }
+      }
+    };
+    renderDiagram();
+    return () => {
+      mounted = false;
+    };
+  }, [code, stableId, hasCached]);
+  if (errorMessage) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "mermaid-container",
+        className: "my-4 rounded-md border border-yellow-300/40 bg-yellow-50/50 dark:border-yellow-700/40 dark:bg-yellow-950/20 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200", children: [
+            /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Diagram syntax error" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-yellow-700/70 dark:text-yellow-300/60", children: [
+              "\u2014 ",
+              errorMessage
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border-t border-yellow-300/30 dark:border-yellow-700/30", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setShowSource(!showSource),
+                className: "flex items-center gap-1.5 px-4 py-1.5 text-xs text-yellow-700/60 dark:text-yellow-400/50 hover:text-yellow-800 dark:hover:text-yellow-300 transition-colors w-full",
+                children: [
+                  showSource ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+                  showSource ? "Hide source" : "Show source"
+                ]
+              }
+            ),
+            showSource && /* @__PURE__ */ jsx("pre", { className: "px-4 pb-3 text-xs font-mono text-yellow-800/70 dark:text-yellow-200/60 overflow-auto whitespace-pre-wrap", children: code })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": "mermaid-container",
+        className: "relative group inline-block max-w-full",
+        style: { minHeight: isLoading ? minHeight : "auto" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `mermaid flex justify-center my-4 overflow-x-auto transition-opacity duration-150 ${isLoading ? "opacity-50" : "opacity-100"}`,
+              dangerouslySetInnerHTML: { __html: svg }
+            }
+          ),
+          svg && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsModalOpen(true),
+              className: "absolute top-2 right-2 p-2 bg-white/90 shadow-sm border rounded-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-50",
+              "aria-label": "Maximize diagram",
+              children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DiagramModal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex justify-center items-center min-h-[50vh]",
+            dangerouslySetInnerHTML: { __html: svg }
+          }
+        )
+      }
+    )
+  ] });
+};
+var MermaidDiagram = memo(
+  MermaidDiagramInner,
+  (prevProps, nextProps) => prevProps.code === nextProps.code
+);
+var FileTextIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-400", children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
+] });
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function formatValue(value) {
+  if (value instanceof Date) {
+    return value.toISOString().split("T")[0];
+  }
+  if (Array.isArray(value)) {
+    return value.map(String).join(", ");
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (isPlainObject(value)) {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+function TagList({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+      children: item
+    },
+    item
+  )) });
+}
+function ValueCell({ value }) {
+  if (isStringArray(value) && value.length > 0) {
+    return /* @__PURE__ */ jsx(TagList, { items: value });
+  }
+  if (isPlainObject(value)) {
+    return /* @__PURE__ */ jsx("pre", { className: "bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md px-3 py-2 text-xs font-mono overflow-x-auto text-slate-600 dark:text-slate-300", children: formatValue(value) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatValue(value) });
+}
+function flattenEntries(entries) {
+  const result = [];
+  for (const [key, value] of entries) {
+    if (key === "taxonomies" && isPlainObject(value)) {
+      for (const [taxKey, taxVal] of Object.entries(value)) {
+        result.push([taxKey, taxVal]);
+      }
+    } else if (key === "extra" && isPlainObject(value)) {
+      for (const [extraKey, extraVal] of Object.entries(value)) {
+        result.push([extraKey, extraVal]);
+      }
+    } else {
+      result.push([key, value]);
+    }
+  }
+  return result;
+}
+var FrontmatterDisplayInner = ({
+  frontmatter
+}) => {
+  const raw = Object.entries(frontmatter);
+  if (raw.length === 0) return null;
+  const entries = flattenEntries(raw);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-8 rounded-lg overflow-hidden bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/80 border border-slate-200 dark:border-slate-700 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-2.5 bg-white/60 dark:bg-slate-900/40 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(FileTextIcon, {}),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider", children: "Metadata" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: "border-b border-slate-200/60 dark:border-slate-700/60 last:border-0",
+        children: [
+          /* @__PURE__ */ jsx("td", { className: "py-2 pr-4 font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap align-top w-1/4 min-w-[100px]", children: key }),
+          /* @__PURE__ */ jsx("td", { className: "py-2 text-slate-800 dark:text-slate-200 align-top", children: /* @__PURE__ */ jsx(ValueCell, { value }) })
+        ]
+      },
+      key
+    )) }) }) })
+  ] });
+};
+var FrontmatterDisplay = memo(FrontmatterDisplayInner);
+
+// src/scrollToLineAnchor.ts
+var HIGHLIGHT_CLASS = "line-anchor-highlight";
+function parseLineAnchor(hash) {
+  if (!hash) return null;
+  const frag = hash.startsWith("#") ? hash.slice(1) : hash;
+  const match = frag.match(/^L(\d+)(?:-L?(\d+))?$/);
+  if (!match) return null;
+  const start = parseInt(match[1], 10);
+  const end = match[2] ? parseInt(match[2], 10) : start;
+  return { start: Math.min(start, end), end: Math.max(start, end) };
+}
+function clearLineAnchorHighlights(container) {
+  container.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((node) => {
+    node.classList.remove(HIGHLIGHT_CLASS);
+  });
+}
+function scrollToLineAnchor(container, hash) {
+  clearLineAnchorHighlights(container);
+  const range = parseLineAnchor(hash);
+  if (!range) return null;
+  const blocks = container.querySelectorAll("[data-source-line]");
+  let firstMatch = null;
+  for (const block of blocks) {
+    const line = parseInt(
+      block.dataset.sourceLine || "0",
+      10
+    );
+    if (line >= range.start && line <= range.end) {
+      block.classList.add(HIGHLIGHT_CLASS);
+      if (!firstMatch) firstMatch = block;
+    }
+  }
+  if (!firstMatch) {
+    let closest = null;
+    let closestLine = 0;
+    for (const block of blocks) {
+      const line = parseInt(
+        block.dataset.sourceLine || "0",
+        10
+      );
+      if (line <= range.start && line > closestLine) {
+        closestLine = line;
+        closest = block;
+      }
+    }
+    if (closest) {
+      closest.classList.add(HIGHLIGHT_CLASS);
+      firstMatch = closest;
+    }
+  }
+  if (firstMatch) {
+    requestAnimationFrame(() => {
+      const scrollParent = findScrollParent(container);
+      if (scrollParent) {
+        const offset = firstMatch.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
+        scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
+      } else {
+        firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    });
+  }
+  return () => clearLineAnchorHighlights(container);
+}
+function findScrollParent(el) {
+  let node = el;
+  while (node) {
+    const overflow = getComputedStyle(node).overflowY;
+    if (overflow === "auto" || overflow === "scroll") return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+// src/useLineAnchor.ts
+var HIGHLIGHT_CLASS2 = "line-anchor-highlight";
+function useLineAnchor(containerRef, hash) {
+  const clearHighlights = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    clearLineAnchorHighlights(el);
+  }, [containerRef]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    clearHighlights();
+    const range = parseLineAnchor(hash);
+    if (!range) return;
+    const blocks = el.querySelectorAll("[data-source-line]");
+    let firstMatch = null;
+    for (const block of blocks) {
+      const line = parseInt(
+        block.dataset.sourceLine || "0",
+        10
+      );
+      if (line >= range.start && line <= range.end) {
+        block.classList.add(HIGHLIGHT_CLASS2);
+        if (!firstMatch) firstMatch = block;
+      }
+    }
+    if (!firstMatch) {
+      let closest = null;
+      let closestLine = 0;
+      for (const block of blocks) {
+        const line = parseInt(
+          block.dataset.sourceLine || "0",
+          10
+        );
+        if (line <= range.start && line > closestLine) {
+          closestLine = line;
+          closest = block;
+        }
+      }
+      if (closest) {
+        closest.classList.add(HIGHLIGHT_CLASS2);
+        firstMatch = closest;
+      }
+    }
+    if (firstMatch) {
+      let scrollParent = el;
+      while (scrollParent) {
+        const overflow = getComputedStyle(scrollParent).overflowY;
+        if (overflow === "auto" || overflow === "scroll") break;
+        scrollParent = scrollParent.parentElement;
+      }
+      if (scrollParent) {
+        const target = firstMatch;
+        requestAnimationFrame(() => {
+          const offset = target.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
+          scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
+        });
+      }
+    }
+  }, [hash, containerRef, clearHighlights]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        clearHighlights();
+        if (window.location.hash) {
+          history.replaceState(null, "", window.location.pathname);
+        }
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [clearHighlights]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (target.closest(`.${HIGHLIGHT_CLASS2}`)) {
+        clearHighlights();
+        if (window.location.hash) {
+          history.replaceState(null, "", window.location.pathname);
+        }
+      }
+    };
+    el.addEventListener("click", handler);
+    return () => el.removeEventListener("click", handler);
+  }, [containerRef, clearHighlights]);
+  return { clearHighlights };
+}
+var MarkdownViewerInner = ({
+  content,
+  currentPath = "",
+  hash = "",
+  baseUrl = "/",
+  imageApiBase,
+  className,
+  onNavigate
+}) => {
+  const containerRef = useRef(null);
+  useLineAnchor(containerRef, hash);
+  const { frontmatter, body } = useMemo(() => {
+    return parseFrontmatter(content);
+  }, [content]);
+  const handleLinkClick = useCallback(
+    (e, href) => {
+      if (href.startsWith("#")) {
+        e.preventDefault();
+        const id = href.slice(1);
+        const el = document.getElementById(id);
+        if (el) {
+          const scrollContainer = el.closest("[data-content-scroll]") || el.closest(".overflow-y-auto");
+          if (scrollContainer) {
+            const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
+            scrollContainer.scrollTo({ top: offset - 16 });
+          } else {
+            el.scrollIntoView();
+          }
+        }
+        return;
+      }
+      if (href.startsWith("http") || href.startsWith("mailto:")) return;
+      if (onNavigate) {
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        e.preventDefault();
+        const [pathPart, hashPart] = href.split("#");
+        const parts = currentPath.split("/");
+        parts.pop();
+        const dir = parts.join("/");
+        const cleanHref = pathPart.replace(/^\.\//, "");
+        const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
+        onNavigate(resolvedPath + (hashPart ? `#${hashPart}` : ""));
+      }
+    },
+    [currentPath, onNavigate]
+  );
+  const resolveHref = useCallback(
+    (href) => {
+      if (!href) return "";
+      if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.startsWith("/")) {
+        return href;
+      }
+      const [pathPart, hashPart] = href.split("#");
+      const parts = currentPath.split("/");
+      parts.pop();
+      const dir = parts.join("/");
+      const cleanHref = pathPart.replace(/^\.\//, "");
+      const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
+      return `${baseUrl}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`;
+    },
+    [currentPath, baseUrl]
+  );
+  const transformImageUri = useCallback(
+    (uri, key) => {
+      if (key === "href") return uri;
+      if (uri.startsWith("http") || uri.startsWith("data:")) return uri;
+      const parts = currentPath.split("/");
+      parts.pop();
+      const dir = parts.join("/");
+      const resolvedPath = dir ? `${dir}/${uri}` : uri;
+      if (imageApiBase) {
+        return `${imageApiBase}/content?path=${encodeURIComponent(resolvedPath)}`;
+      }
+      return `${baseUrl}${resolvedPath}`;
+    },
+    [currentPath, baseUrl, imageApiBase]
+  );
+  const markdownComponents = useMemo(
+    () => ({
+      a({
+        href,
+        children,
+        ...props
+      }) {
+        const resolvedHref = resolveHref(href);
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: resolvedHref,
+            onClick: (e) => href && handleLinkClick(e, href),
+            ...props,
+            children
+          }
+        );
+      },
+      code(props) {
+        const { children, className: codeClassName, ...rest } = props;
+        const match = /language-(\w+)/.exec(codeClassName || "");
+        if (match && match[1] === "mermaid") {
+          return /* @__PURE__ */ jsx(MermaidDiagram, { code: String(children).replace(/\n$/, "") });
+        }
+        return /* @__PURE__ */ jsx("code", { className: codeClassName, ...rest, children });
+      }
+    }),
+    [handleLinkClick, resolveHref]
+  );
+  const proseClasses = [
+    "prose prose-slate dark:prose-invert max-w-none",
+    "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-slate-100",
+    "prose-h1:text-[2em] prose-h1:mb-3 prose-h1:pb-[0.3em] prose-h1:border-b prose-h1:border-slate-200 dark:prose-h1:border-slate-700",
+    "prose-h2:text-[1.5em] prose-h2:mt-6 prose-h2:mb-3 prose-h2:pb-[0.3em] prose-h2:border-b prose-h2:border-slate-200 dark:prose-h2:border-slate-700",
+    "prose-h3:text-[1.25em] prose-h3:mt-6 prose-h3:mb-2",
+    "prose-h4:text-[1em] prose-h4:mt-6 prose-h4:mb-2",
+    "prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-[1.5] prose-p:my-[16px]",
+    "prose-ul:my-[16px] prose-ul:list-disc prose-li:my-0.5 prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
+    "prose-ol:my-[16px] prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
+    "prose-pre:bg-slate-50 dark:prose-pre:bg-slate-800 prose-pre:border prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-pre:p-4 prose-pre:rounded-md prose-pre:text-[85%] prose-pre:leading-[1.45]",
+    "prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
+    "prose-img:rounded-lg prose-img:my-4",
+    "prose-blockquote:border-l-[0.25em] prose-blockquote:border-slate-300 dark:prose-blockquote:border-slate-600 prose-blockquote:pl-4 prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400 prose-blockquote:italic",
+    "prose-code:before:content-none prose-code:after:content-none",
+    "prose-code:bg-slate-100 dark:prose-code:bg-slate-800 prose-code:px-[0.4em] prose-code:py-[0.2em] prose-code:rounded-md prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-code:font-mono prose-code:text-[85%] prose-code:font-normal prose-code:border prose-code:border-slate-200/50 dark:prose-code:border-slate-700/50",
+    "prose-table:text-sm",
+    "prose-th:px-3 prose-th:py-1.5 prose-th:border prose-th:border-slate-200 dark:prose-th:border-slate-700",
+    "prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-slate-200 dark:prose-td:border-slate-700"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `${proseClasses} ${className}` : proseClasses,
+      children: [
+        /* @__PURE__ */ jsx(FrontmatterDisplay, { frontmatter }),
+        /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            remarkPlugins: [
+              [remarkGfm, { singleTilde: false }],
+              [remarkMath, { singleDollarTextMath: false }]
+            ],
+            rehypePlugins: [
+              rehypeRaw,
+              rehypeSourceLines_default,
+              [rehypeSanitize, sanitizeSchema],
+              rehypeSlug,
+              rehypeHighlight,
+              rehypeKatex
+            ],
+            urlTransform: transformImageUri,
+            components: markdownComponents,
+            children: body
+          }
+        )
+      ]
+    }
+  );
+};
+var MarkdownViewer = memo(
+  MarkdownViewerInner,
+  (prevProps, nextProps) => prevProps.content === nextProps.content && prevProps.currentPath === nextProps.currentPath && prevProps.hash === nextProps.hash && prevProps.className === nextProps.className
+);
+async function renderMarkdown(content, options = {}) {
+  const {
+    gfm = true,
+    math = true,
+    highlight = true,
+    sourceLines = true,
+    sanitize = true,
+    frontmatter: parseFm = true
+  } = options;
+  let parsed;
+  if (parseFm) {
+    parsed = parseFrontmatter(content);
+  } else {
+    parsed = { frontmatter: {}, body: content, format: "none" };
+  }
+  const remarkPlugins = [];
+  const rehypePlugins = [];
+  if (gfm) remarkPlugins.push([remarkGfm, { singleTilde: false }]);
+  if (math) remarkPlugins.push([remarkMath, { singleDollarTextMath: false }]);
+  rehypePlugins.push([rehypeRaw]);
+  if (sourceLines) rehypePlugins.push([rehypeSourceLines_default]);
+  if (sanitize) rehypePlugins.push([rehypeSanitize, sanitizeSchema]);
+  rehypePlugins.push([rehypeSlug]);
+  if (highlight) rehypePlugins.push([rehypeHighlight]);
+  if (math) rehypePlugins.push([rehypeKatex]);
+  let processor = unified().use(remarkParse);
+  for (const [plugin, ...args] of remarkPlugins) {
+    processor = processor.use(plugin, ...args);
+  }
+  processor = processor.use(remarkRehype, { allowDangerousHtml: true });
+  for (const [plugin, ...args] of rehypePlugins) {
+    processor = processor.use(plugin, ...args);
+  }
+  processor = processor.use(rehypeStringify);
+  const result = await processor.process(parsed.body);
+  return {
+    html: String(result),
+    frontmatter: parsed.frontmatter,
+    body: parsed.body
+  };
+}
+
+export { FrontmatterDisplay, MarkdownViewer, MermaidDiagram, clearLineAnchorHighlights, parseFrontmatter, parseLineAnchor, rehypeSourceLines_default as rehypeSourceLines, renderMarkdown, sanitizeSchema, scrollToLineAnchor, useLineAnchor };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map