@scribdown/markdown-renderer 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,47 +1,277 @@
 // src/index.ts
-import {
-  CONTENT_WIDTH_STORAGE_KEY,
-  PROJECT_HOMEPAGE_URL,
-  SCRIBDOWN_MARKDOWN_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_BTN_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_MENU_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_MENU_GROUP_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_MENU_ITEM_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_TOC_PANEL_CLASS_NAME,
-  SCRIBDOWN_TOOLBAR_CURRENT_CLASS_NAME,
-  SCRIBDOWN_TOC_HOST_CLASS_NAME,
-  SCRIBDOWN_CONTENT_AREA_CLASS_NAME,
-  SCRIBDOWN_CONTENT_SCROLL_CLASS_NAME,
-  SCRIBDOWN_THIN_SCROLLBAR_CLASS_NAME,
-  SOURCE_LINE_DATA_ATTRIBUTE
-} from "@scribdown/shared";
-import DOMPurify from "dompurify";
 import rehypeRaw from "rehype-raw";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import rehypeSanitize from "rehype-sanitize";
 import rehypeStringify from "rehype-stringify";
+import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+
+// src/code/code-block-chrome.ts
+import {
+  CODE_BLOCK_BODY_CLASS_NAME,
+  CODE_BLOCK_CHROME_CLASS_NAME,
+  CODE_BLOCK_CLASS_NAME,
+  CODE_BLOCK_COPY_CLASS_NAME,
+  CODE_BLOCK_COPY_ICON_CHECK_CLASS_NAME,
+  CODE_BLOCK_COPY_ICON_CLASS_NAME,
+  CODE_BLOCK_COPY_ICON_COPY_CLASS_NAME,
+  CODE_BLOCK_GUTTER_CLASS_NAME,
+  CODE_BLOCK_GUTTER_LINE_CLASS_NAME,
+  CODE_BLOCK_LANG_CLASS_NAME,
+  CODE_BLOCK_LINE_CLASS_NAME,
+  SOURCE_LINE_DATA_ATTRIBUTE
+} from "@scribdown/shared";
+var CODE_BLOCK_EMPTY_LINE_PLACEHOLDER = "\u200B";
+var CODE_BLOCK_HYDRATED_DATA_KEY = "scribdownCodeBlockHydrated";
+var CODE_LANGUAGE_DISPLAY_NAMES = {
+  bash: "Bash",
+  c: "C",
+  cpp: "C++",
+  csharp: "C#",
+  css: "CSS",
+  diff: "Diff",
+  go: "Go",
+  graphql: "GraphQL",
+  html: "HTML",
+  java: "Java",
+  javascript: "JavaScript",
+  js: "JavaScript",
+  json: "JSON",
+  jsx: "JSX",
+  kotlin: "Kotlin",
+  less: "Less",
+  markdown: "Markdown",
+  md: "Markdown",
+  php: "PHP",
+  python: "Python",
+  py: "Python",
+  ruby: "Ruby",
+  rust: "Rust",
+  rs: "Rust",
+  sass: "Sass",
+  scss: "SCSS",
+  sh: "Shell",
+  shell: "Shell",
+  sql: "SQL",
+  swift: "Swift",
+  toml: "TOML",
+  ts: "TypeScript",
+  tsx: "TSX",
+  typescript: "TypeScript",
+  vue: "Vue",
+  xml: "XML",
+  yaml: "YAML",
+  yml: "YAML",
+  zsh: "Zsh"
+};
+var CODE_LANGUAGE_DEFAULT_LABEL = "Text";
+var CODE_BLOCK_COPY_RESTORE_DELAY_MS = 1600;
+var CODE_BLOCK_COPY_ARIA_LABEL = "\u590D\u5236\u4EE3\u7801";
+var CODE_BLOCK_COPY_ARIA_LABEL_COPIED = "\u5DF2\u590D\u5236";
+function hydrateCodeBlocks(rootElement) {
+  const preElements = rootElement.querySelectorAll("pre");
+  preElements.forEach(decorateCodeBlock);
+}
+function decorateCodeBlock(preElement) {
+  if (preElement.parentElement?.classList.contains(CODE_BLOCK_CLASS_NAME)) {
+    return;
+  }
+  if (preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] === "true") {
+    return;
+  }
+  const codeElement = preElement.querySelector(":scope > code");
+  if (!codeElement) {
+    return;
+  }
+  preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] = "true";
+  const ownerDocument = preElement.ownerDocument;
+  const languageId = resolveCodeBlockLanguageId(codeElement);
+  const languageLabel = resolveCodeBlockLanguageLabel(languageId);
+  const originalCodeText = codeElement.textContent ?? "";
+  const codeLineCount = rewriteCodeBlockLines(codeElement, ownerDocument);
+  const chromeElement = ownerDocument.createElement("div");
+  chromeElement.className = CODE_BLOCK_CHROME_CLASS_NAME;
+  const langElement = ownerDocument.createElement("span");
+  langElement.className = CODE_BLOCK_LANG_CLASS_NAME;
+  langElement.textContent = languageLabel;
+  chromeElement.append(langElement);
+  const copyButtonElement = createCodeBlockCopyButton(ownerDocument);
+  chromeElement.append(copyButtonElement);
+  const figureElement = ownerDocument.createElement("figure");
+  figureElement.className = CODE_BLOCK_CLASS_NAME;
+  figureElement.dataset.scribdownCodeLang = languageId;
+  const bodyElement = ownerDocument.createElement("div");
+  bodyElement.className = CODE_BLOCK_BODY_CLASS_NAME;
+  const gutterElement = createCodeBlockLineNumberGutter(ownerDocument, codeLineCount);
+  preElement.replaceWith(figureElement);
+  bodyElement.append(gutterElement, preElement);
+  figureElement.append(chromeElement, bodyElement);
+  const codeBlockSourceLine = codeElement.getAttribute(SOURCE_LINE_DATA_ATTRIBUTE);
+  if (codeBlockSourceLine !== null) {
+    figureElement.setAttribute(SOURCE_LINE_DATA_ATTRIBUTE, codeBlockSourceLine);
+    codeElement.removeAttribute(SOURCE_LINE_DATA_ATTRIBUTE);
+  }
+  copyButtonElement.dataset.scribdownCodeSource = originalCodeText;
+  copyButtonElement.addEventListener("click", handleCodeBlockCopyClick);
+}
+function resolveCodeBlockLanguageId(codeElement) {
+  const languageClassName = Array.from(codeElement.classList).find(
+    (className) => className.startsWith("language-")
+  );
+  if (!languageClassName) {
+    return "";
+  }
+  return languageClassName.slice("language-".length).toLowerCase();
+}
+function resolveCodeBlockLanguageLabel(languageId) {
+  if (!languageId) {
+    return CODE_LANGUAGE_DEFAULT_LABEL;
+  }
+  const mappedLabel = CODE_LANGUAGE_DISPLAY_NAMES[languageId];
+  if (mappedLabel) {
+    return mappedLabel;
+  }
+  return languageId.charAt(0).toUpperCase() + languageId.slice(1);
+}
+function rewriteCodeBlockLines(codeElement, ownerDocument) {
+  const shikiLineElements = codeElement.querySelectorAll(":scope > span.line");
+  if (shikiLineElements.length > 0) {
+    const shikiLineNodes = Array.from(shikiLineElements);
+    shikiLineElements.forEach((lineElement) => {
+      lineElement.classList.add(CODE_BLOCK_LINE_CLASS_NAME);
+      if (lineElement.textContent === "") {
+        lineElement.textContent = CODE_BLOCK_EMPTY_LINE_PLACEHOLDER;
+      }
+    });
+    codeElement.replaceChildren(...shikiLineNodes);
+    return shikiLineNodes.length;
+  }
+  const codeText = codeElement.textContent ?? "";
+  const trimmedCodeText = codeText.replace(/\n+$/u, "");
+  const codeLines = trimmedCodeText.split("\n");
+  while (codeElement.firstChild) {
+    codeElement.removeChild(codeElement.firstChild);
+  }
+  codeLines.forEach((lineText) => {
+    const lineElement = ownerDocument.createElement("span");
+    lineElement.className = CODE_BLOCK_LINE_CLASS_NAME;
+    if (lineText.length === 0) {
+      lineElement.textContent = CODE_BLOCK_EMPTY_LINE_PLACEHOLDER;
+    } else {
+      lineElement.textContent = lineText;
+    }
+    codeElement.append(lineElement);
+  });
+  return codeLines.length;
+}
+function createCodeBlockLineNumberGutter(ownerDocument, lineCount) {
+  const gutterElement = ownerDocument.createElement("div");
+  gutterElement.className = CODE_BLOCK_GUTTER_CLASS_NAME;
+  for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+    const lineNumberText = String(lineIndex + 1);
+    const lineNumberElement = ownerDocument.createElement("span");
+    lineNumberElement.className = CODE_BLOCK_GUTTER_LINE_CLASS_NAME;
+    lineNumberElement.textContent = lineNumberText;
+    gutterElement.append(lineNumberElement);
+  }
+  return gutterElement;
+}
+var CODE_BLOCK_COPY_ICON_COPY_PATHS = '<path d="M8.4 6.8 C10.4 6.5 12.6 6.7 14.6 6.6 C16 6.6 16.5 7.2 16.6 8.6 C16.7 10.8 16.6 13.2 16.6 15.4 C16.5 16.6 15.8 17.2 14.6 17.2 C12.4 17.3 10.2 17.2 8 17.2 C6.6 17.2 6.2 16.6 6.2 15.4 C6.2 13.2 6.2 11 6.2 8.8 C6.2 7.4 6.8 6.8 8.4 6.8 Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M8.6 7.4 C10.6 7.2 12.6 7.4 14.4 7.3" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/><path d="M3.6 12.8 C3.4 11.0 3.4 9.0 3.5 7.0 C3.5 5.0 3.4 3.6 5.2 3.4 C7.2 3.2 9.2 3.4 11.2 3.4 C12.6 3.4 13.2 4.0 13.3 5.0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M4.4 12.4 C4.2 10.6 4.2 8.8 4.2 7.0" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/>';
+var CODE_BLOCK_COPY_ICON_CHECK_PATHS = '<path d="M4.2 10.6 C5.6 11.8 6.8 13.2 8.2 14.6 C10.4 11.6 13.0 8.6 16.0 5.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/><path d="M4.6 11.4 C5.6 12.4 6.8 13.6 7.8 14.6 C10.2 12.2 12.6 9.6 15.2 7.0" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/>';
+function createCodeBlockCopyButton(ownerDocument) {
+  const copyButtonElement = ownerDocument.createElement("button");
+  copyButtonElement.type = "button";
+  copyButtonElement.className = CODE_BLOCK_COPY_CLASS_NAME;
+  copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL);
+  const copyIconElement = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
+  copyIconElement.setAttribute(
+    "class",
+    `${CODE_BLOCK_COPY_ICON_CLASS_NAME} ${CODE_BLOCK_COPY_ICON_COPY_CLASS_NAME}`
+  );
+  copyIconElement.setAttribute("viewBox", "0 0 20 20");
+  copyIconElement.setAttribute("aria-hidden", "true");
+  copyIconElement.setAttribute("focusable", "false");
+  copyIconElement.innerHTML = CODE_BLOCK_COPY_ICON_COPY_PATHS;
+  copyButtonElement.append(copyIconElement);
+  const checkIconElement = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
+  checkIconElement.setAttribute(
+    "class",
+    `${CODE_BLOCK_COPY_ICON_CLASS_NAME} ${CODE_BLOCK_COPY_ICON_CHECK_CLASS_NAME}`
+  );
+  checkIconElement.setAttribute("viewBox", "0 0 20 20");
+  checkIconElement.setAttribute("aria-hidden", "true");
+  checkIconElement.setAttribute("focusable", "false");
+  checkIconElement.innerHTML = CODE_BLOCK_COPY_ICON_CHECK_PATHS;
+  copyButtonElement.append(checkIconElement);
+  return copyButtonElement;
+}
+function handleCodeBlockCopyClick(event) {
+  const copyButtonElement = event.currentTarget;
+  const codeText = copyButtonElement.dataset.scribdownCodeSource ?? "";
+  void writeCodeBlockTextToClipboard(codeText).then((isSucceeded) => {
+    if (isSucceeded) {
+      flashCodeBlockCopyButton(copyButtonElement);
+    }
+  });
+}
+async function writeCodeBlockTextToClipboard(codeText) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(codeText);
+      return true;
+    } catch {
+    }
+  }
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const fallbackTextarea = document.createElement("textarea");
+  fallbackTextarea.value = codeText;
+  fallbackTextarea.setAttribute("readonly", "");
+  fallbackTextarea.style.position = "fixed";
+  fallbackTextarea.style.opacity = "0";
+  fallbackTextarea.style.pointerEvents = "none";
+  document.body.append(fallbackTextarea);
+  fallbackTextarea.select();
+  const isSucceeded = document.execCommand("copy");
+  fallbackTextarea.remove();
+  return isSucceeded;
+}
+function flashCodeBlockCopyButton(copyButtonElement) {
+  copyButtonElement.dataset.scribdownCodeCopied = "true";
+  copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL_COPIED);
+  window.setTimeout(() => {
+    delete copyButtonElement.dataset.scribdownCodeCopied;
+    copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL);
+  }, CODE_BLOCK_COPY_RESTORE_DELAY_MS);
+}
+
+// src/code/code-highlight.ts
 import githubLightTheme from "@shikijs/themes/github-light";
 import { createHighlighterCore } from "shiki/core";
 import { createOnigurumaEngine } from "shiki/engine/oniguruma";
-import { unified } from "unified";
 
-// src/code-highlighter-langs.ts
-var CODE_HIGHLIGHTER_EAGER_LOADERS = [
-  () => import("@shikijs/langs/bash"),
-  () => import("@shikijs/langs/css"),
-  () => import("@shikijs/langs/diff"),
-  () => import("@shikijs/langs/html"),
-  () => import("@shikijs/langs/javascript"),
-  () => import("@shikijs/langs/json"),
-  () => import("@shikijs/langs/markdown"),
-  () => import("@shikijs/langs/typescript"),
-  () => import("@shikijs/langs/yaml")
-];
+// src/code/code-highlighter-langs.ts
+var CODE_HIGHLIGHTER_EAGER_LOADERS = [];
 var CODE_HIGHLIGHTER_LAZY_LANGS = {
+  // 高频基础语言
+  bash: () => import("@shikijs/langs/bash"),
+  sh: () => import("@shikijs/langs/bash"),
+  shell: () => import("@shikijs/langs/bash"),
+  css: () => import("@shikijs/langs/css"),
+  diff: () => import("@shikijs/langs/diff"),
+  html: () => import("@shikijs/langs/html"),
+  js: () => import("@shikijs/langs/javascript"),
+  javascript: () => import("@shikijs/langs/javascript"),
+  json: () => import("@shikijs/langs/json"),
+  markdown: () => import("@shikijs/langs/markdown"),
+  md: () => import("@shikijs/langs/markdown"),
+  ts: () => import("@shikijs/langs/typescript"),
+  typescript: () => import("@shikijs/langs/typescript"),
+  yaml: () => import("@shikijs/langs/yaml"),
+  yml: () => import("@shikijs/langs/yaml"),
   // 前端框架与扩展
   jsx: () => import("@shikijs/langs/jsx"),
   tsx: () => import("@shikijs/langs/tsx"),
@@ -138,540 +368,59 @@ var CODE_HIGHLIGHTER_LAZY_LANGS = {
   wat: () => import("@shikijs/langs/wasm")
 };
 
-// src/index.ts
-var SOURCE_LINE_HAST_PROPERTY = SOURCE_LINE_DATA_ATTRIBUTE.replace(
-  /-([a-z])/gu,
-  (_match, letter) => letter.toUpperCase()
-);
-var TOC_MARKER_PATTERN = /^\s*\[toc]\s*$/i;
-var TOC_CLASS_NAME = "scribdown-toc";
-var FRAME_CLASS_NAME = "scribdown-frame";
-var DETAILS_CLASS_NAME = "scribdown-details";
-var TOC_SUMMARY_CLASS_NAME = "scribdown-toc-summary";
-var TOC_NAV_CLASS_NAME = "scribdown-toc-nav";
-var TOC_LIST_CLASS_NAME = "scribdown-toc-list";
-var TOC_LIST_NESTED_CLASS_NAME = "scribdown-toc-list--nested";
-var TOC_ITEM_CLASS_PREFIX = "scribdown-toc-item";
-var TOC_ITEM_BRANCH_CLASS_NAME = "scribdown-toc-item--branch";
-var TOC_ITEM_COLLAPSED_CLASS_NAME = "scribdown-toc-item--collapsed";
-var TOC_LINK_CLASS_NAME = "scribdown-toc-link";
-var TOC_LINK_ACTIVE_CLASS_NAME = "scribdown-toc-link--active";
-var TOC_TOGGLE_CLASS_NAME = "scribdown-toc-toggle";
-var TOC_TOGGLE_ARIA_LABEL = "\u5C55\u5F00\u6216\u6298\u53E0\u5B50\u76EE\u5F55";
-var TOC_TOGGLE_HYDRATED_DATA_KEY = "scribdownTocToggleHydrated";
-var TOC_LINK_HYDRATED_DATA_KEY = "scribdownTocLinkHydrated";
-var TOC_ARIA_LABEL = "\u76EE\u5F55";
-var TOC_SUMMARY_TEXT = "\u76EE\u5F55";
-var EMPTY_HEADING_SLUG_PREFIX = "section";
-var HEADING_MARK_CLASS_NAME = "scribdown-heading-mark";
-var IMAGE_FIGURE_CLASS_NAME = "scribdown-image-figure";
-var IMAGE_FRAME_CLASS_NAME = "scribdown-image-frame";
-var IMAGE_ELEMENT_CLASS_NAME = "scribdown-image";
-var IMAGE_CAPTION_CLASS_NAME = "scribdown-image-caption";
-var IMAGE_FRAME_FAILED_CLASS_NAME = "scribdown-image-frame--failed";
-var IMAGE_FRAME_LOADED_CLASS_NAME = "scribdown-image-frame--loaded";
-var IMAGE_FALLBACK_CLASS_NAME = "scribdown-image-fallback";
-var IMAGE_FALLBACK_ICON_CLASS_NAME = "scribdown-image-fallback-icon";
-var IMAGE_FALLBACK_TEXT_CLASS_NAME = "scribdown-image-fallback-text";
-var IMAGE_FALLBACK_SOURCE_CLASS_NAME = "scribdown-image-fallback-source";
-var IMAGE_HYDRATED_DATA_KEY = "scribdownImageHydrated";
-var VIDEO_FIGURE_CLASS_NAME = "scribdown-video-figure";
-var VIDEO_FRAME_CLASS_NAME = "scribdown-video-frame";
-var VIDEO_ELEMENT_CLASS_NAME = "scribdown-video";
-var VIDEO_FRAME_FAILED_CLASS_NAME = "scribdown-video-frame--failed";
-var VIDEO_FRAME_LOADED_CLASS_NAME = "scribdown-video-frame--loaded";
-var VIDEO_FALLBACK_CLASS_NAME = "scribdown-video-fallback";
-var VIDEO_FALLBACK_ICON_CLASS_NAME = "scribdown-video-fallback-icon";
-var VIDEO_FALLBACK_TEXT_CLASS_NAME = "scribdown-video-fallback-text";
-var VIDEO_FALLBACK_SOURCE_CLASS_NAME = "scribdown-video-fallback-source";
-var VIDEO_HYDRATED_DATA_KEY = "scribdownVideoHydrated";
-var VIDEO_FALLBACK_DEFAULT_TEXT = "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25";
-var MERMAID_LANGUAGE_ID = "mermaid";
-var MERMAID_FIGURE_CLASS_NAME = "scribdown-mermaid";
-var MERMAID_CHROME_CLASS_NAME = "scribdown-mermaid__chrome";
-var MERMAID_LABEL_CLASS_NAME = "scribdown-mermaid__label";
-var MERMAID_BODY_CLASS_NAME = "scribdown-mermaid__body";
-var MERMAID_CANVAS_CLASS_NAME = "scribdown-mermaid__canvas";
-var MERMAID_FALLBACK_CLASS_NAME = "scribdown-mermaid__fallback";
-var MERMAID_FALLBACK_ICON_CLASS_NAME = "scribdown-mermaid__fallback-icon";
-var MERMAID_FALLBACK_TEXT_CLASS_NAME = "scribdown-mermaid__fallback-text";
-var MERMAID_FALLBACK_SOURCE_CLASS_NAME = "scribdown-mermaid__fallback-source";
-var MERMAID_FIGURE_LOADING_CLASS_NAME = "scribdown-mermaid--loading";
-var MERMAID_FIGURE_FAILED_CLASS_NAME = "scribdown-mermaid--failed";
-var MERMAID_FIGURE_LOADED_CLASS_NAME = "scribdown-mermaid--loaded";
-var MERMAID_HYDRATED_DATA_KEY = "scribdownMermaidHydrated";
-var MERMAID_RENDER_STARTED_DATA_KEY = "scribdownMermaidRenderStarted";
-var MERMAID_SOURCE_DATA_KEY = "scribdownMermaidSourceText";
-var MERMAID_LABEL_TEXT = "Mermaid";
-var MERMAID_FALLBACK_DEFAULT_TEXT = "\u56FE\u8868\u6E32\u67D3\u5931\u8D25";
-var MERMAID_RENDER_ID_PREFIX = "scribdown-mermaid-";
-var mermaidRenderIdCounter = 0;
-var MERMAID_FULLSCREEN_BUTTON_CLASS_NAME = "scribdown-mermaid__fullscreen";
-var MERMAID_FULLSCREEN_BUTTON_ARIA_LABEL = "\u5168\u5C4F\u67E5\u770B\u56FE\u8868";
-var MERMAID_VIEWER_DIALOG_CLASS_NAME = "scribdown-mermaid-viewer";
-var MERMAID_VIEWER_ZOOMED_CLASS_NAME = "scribdown-mermaid-viewer--zoomed";
-var MERMAID_VIEWER_DRAGGING_CLASS_NAME = "scribdown-mermaid-viewer--dragging";
-var MERMAID_VIEWER_CHROME_CLASS_NAME = "scribdown-mermaid-viewer__chrome";
-var MERMAID_VIEWER_CAPTION_CLASS_NAME = "scribdown-mermaid-viewer__caption";
-var MERMAID_VIEWER_CONTROLS_CLASS_NAME = "scribdown-mermaid-viewer__controls";
-var MERMAID_VIEWER_BUTTON_CLASS_NAME = "scribdown-mermaid-viewer__button";
-var MERMAID_VIEWER_CLOSE_BUTTON_CLASS_NAME = "scribdown-mermaid-viewer__button--close";
-var MERMAID_VIEWER_VIEWPORT_CLASS_NAME = "scribdown-mermaid-viewer__viewport";
-var MERMAID_VIEWER_CANVAS_CLASS_NAME = "scribdown-mermaid-viewer__canvas";
-var MERMAID_VIEWER_ZOOM_VALUE_CLASS_NAME = "scribdown-mermaid-viewer__zoom-value";
-var MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY = "scribdownMermaidFullscreenReady";
-var MERMAID_VIEWER_SOURCE_DATA_KEY = "scribdownMermaidSource";
-var mermaidViewerStateByDocument = /* @__PURE__ */ new WeakMap();
-var mermaidViewerStateByDialogElement = /* @__PURE__ */ new WeakMap();
-var IMAGE_VIEWER_DIALOG_CLASS_NAME = "scribdown-image-viewer";
-var IMAGE_VIEWER_ZOOMED_CLASS_NAME = "scribdown-image-viewer--zoomed";
-var IMAGE_VIEWER_DRAGGING_CLASS_NAME = "scribdown-image-viewer--dragging";
-var IMAGE_VIEWER_CAPTION_GROUP_CLASS_NAME = "scribdown-image-viewer__caption-group";
-var IMAGE_VIEWER_HINT_CLASS_NAME = "scribdown-image-viewer__hint";
-var IMAGE_VIEWER_HINT_TEXT = "\u5FEB\u6377\u952E\uFF1A+/= \u653E\u5927 \xB7 - \u7F29\u5C0F \xB7 0 \u91CD\u7F6E \xB7 Esc \u5173\u95ED \xB7 \u9F20\u6807\u62D6\u62FD\u53EF\u5E73\u79FB \xB7 Ctrl/\u2318 + \u6EDA\u8F6E\u7F29\u653E";
-var IMAGE_VIEWER_CHROME_CLASS_NAME = "scribdown-image-viewer__chrome";
-var IMAGE_VIEWER_CONTROLS_CLASS_NAME = "scribdown-image-viewer__controls";
-var IMAGE_VIEWER_BUTTON_CLASS_NAME = "scribdown-image-viewer__button";
-var IMAGE_VIEWER_CLOSE_BUTTON_CLASS_NAME = "scribdown-image-viewer__button--close";
-var IMAGE_VIEWER_VIEWPORT_CLASS_NAME = "scribdown-image-viewer__viewport";
-var IMAGE_VIEWER_IMAGE_CLASS_NAME = "scribdown-image-viewer__image";
-var IMAGE_VIEWER_CAPTION_CLASS_NAME = "scribdown-image-viewer__caption";
-var IMAGE_VIEWER_ZOOM_VALUE_CLASS_NAME = "scribdown-image-viewer__zoom-value";
-var IMAGE_VIEWER_DEFAULT_ZOOM = 1;
-var IMAGE_VIEWER_MIN_ZOOM = 0.25;
-var IMAGE_VIEWER_MAX_ZOOM = 4;
-var IMAGE_VIEWER_ZOOM_STEP = 0.25;
-var IMAGE_VIEWER_WHEEL_ZOOM_FACTOR = 0.01;
-var IMAGE_VIEWER_WHEEL_ZOOM_MAX_DELTA = 0.1;
-var IMAGE_VIEWER_FIT_RATIO = 0.92;
-var IMAGE_VIEWER_FALLBACK_LABEL = "\u67E5\u770B\u5168\u56FE";
-var IMAGE_VIEWER_CLOSE_TEXT = "x";
-var IMAGE_VIEWER_ZOOM_IN_TEXT = "+";
-var IMAGE_VIEWER_ZOOM_OUT_TEXT = "-";
-var IMAGE_VIEWER_RESET_TEXT = "1:1";
-var imageViewerStateByDocument = /* @__PURE__ */ new WeakMap();
-var imageViewerStateByDialogElement = /* @__PURE__ */ new WeakMap();
-var HIGHLIGHT_MARKER_PATTERN = /==([^=\n]+?)==/g;
-var DEFINITION_LIST_PARAGRAPH_PATTERN = /^\s*([^\n:][^\n]*)\n\s*:\s+([^\n]+)\s*$/u;
-var CODE_BLOCK_CLASS_NAME = "scribdown-code-block";
-var CODE_BLOCK_CHROME_CLASS_NAME = "scribdown-code-block__chrome";
-var CODE_BLOCK_BODY_CLASS_NAME = "scribdown-code-block__body";
-var CODE_BLOCK_LANG_CLASS_NAME = "scribdown-code-block__lang";
-var CODE_BLOCK_COPY_CLASS_NAME = "scribdown-code-block__copy";
-var CODE_BLOCK_COPY_ICON_CLASS_NAME = "scribdown-code-block__copy-icon";
-var CODE_BLOCK_COPY_ICON_COPY_CLASS_NAME = "scribdown-code-block__copy-icon--copy";
-var CODE_BLOCK_COPY_ICON_CHECK_CLASS_NAME = "scribdown-code-block__copy-icon--check";
-var CODE_BLOCK_LINE_CLASS_NAME = "scribdown-code-block__line";
-var CODE_BLOCK_GUTTER_CLASS_NAME = "scribdown-code-block__gutter";
-var CODE_BLOCK_GUTTER_LINE_CLASS_NAME = "scribdown-code-block__gutter-line";
-var CODE_BLOCK_EMPTY_LINE_PLACEHOLDER = "\u200B";
-var CODE_BLOCK_HYDRATED_DATA_KEY = "scribdownCodeBlockHydrated";
-var CODE_LANGUAGE_DISPLAY_NAMES = {
-  bash: "Bash",
-  c: "C",
-  cpp: "C++",
-  csharp: "C#",
-  css: "CSS",
-  diff: "Diff",
-  go: "Go",
-  graphql: "GraphQL",
-  html: "HTML",
-  java: "Java",
-  javascript: "JavaScript",
-  js: "JavaScript",
-  json: "JSON",
-  jsx: "JSX",
-  kotlin: "Kotlin",
-  less: "Less",
-  markdown: "Markdown",
-  md: "Markdown",
-  php: "PHP",
-  python: "Python",
-  py: "Python",
-  ruby: "Ruby",
-  rust: "Rust",
-  rs: "Rust",
-  sass: "Sass",
-  scss: "SCSS",
-  sh: "Shell",
-  shell: "Shell",
-  sql: "SQL",
-  swift: "Swift",
-  toml: "TOML",
-  ts: "TypeScript",
-  tsx: "TSX",
-  typescript: "TypeScript",
-  vue: "Vue",
-  xml: "XML",
-  yaml: "YAML",
-  yml: "YAML",
-  zsh: "Zsh"
-};
-var CODE_LANGUAGE_DEFAULT_LABEL = "Text";
-var CODE_BLOCK_COPY_RESTORE_DELAY_MS = 1600;
-var CODE_BLOCK_COPY_ARIA_LABEL = "\u590D\u5236\u4EE3\u7801";
-var CODE_BLOCK_COPY_ARIA_LABEL_COPIED = "\u5DF2\u590D\u5236";
-var CODE_HIGHLIGHTER_THEME = "github-light";
-var codeHighlighterPromise;
-var codeHighlighterLazyLoadPromises = /* @__PURE__ */ new Map();
-var CODE_BLOCK_HIGHLIGHT_PATTERN = /<pre([^>]*)><code class="language-([\w-]+)"([^>]*)>([\s\S]*?)<\/code><\/pre>/g;
-var SHIKI_CODE_INNER_PATTERN = /<code[^>]*>([\s\S]*?)<\/code>/u;
-async function renderMarkdown(markdownText) {
-  const processor = unified().use(remarkParse).use(remarkGfm).use(remarkHighlightMark).use(remarkDefinitionLists).use(remarkTableOfContents).use(remarkImageFigures).use(remarkSourceLine).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(rehypeFrameClass).use(rehypeVideoFigures).use(rehypeSanitize, createScribdownSanitizeSchema()).use(rehypeStringify);
-  const renderedHtml = String(await processor.process(markdownText));
-  const sanitizedHtml = sanitizeHtmlWithDomPurify(renderedHtml);
-  return highlightMarkdownCodeBlocks(sanitizedHtml);
-}
-async function getCodeHighlighter() {
-  if (!codeHighlighterPromise) {
-    codeHighlighterPromise = createHighlighterCore({
-      themes: [githubLightTheme],
-      // eager loaders 通过动态 import 拆为独立 chunk，初始化时并发拉取；
-      // 主 bundle 不再内联 grammar JSON，体积更小，多个 grammar 也可并行加载。
-      langs: CODE_HIGHLIGHTER_EAGER_LOADERS,
-      // oniguruma 引擎 + wasm；shiki/wasm 内部走 base64 内联，扩展环境无需额外资源声明。
-      engine: createOnigurumaEngine(import("shiki/wasm"))
-    });
-  }
-  return codeHighlighterPromise;
-}
-async function highlightMarkdownCodeBlocks(html) {
-  if (!CODE_BLOCK_HIGHLIGHT_PATTERN.test(html)) {
-    return html;
-  }
-  CODE_BLOCK_HIGHLIGHT_PATTERN.lastIndex = 0;
-  const highlighter = await getCodeHighlighter();
-  let resultHtml = "";
-  let lastIndex = 0;
-  for (const match of html.matchAll(CODE_BLOCK_HIGHLIGHT_PATTERN)) {
-    const [matched, preAttributes, rawLanguage, codeAttributes, encodedCode] = match;
-    const matchStart = match.index ?? 0;
-    resultHtml += html.slice(lastIndex, matchStart);
-    resultHtml += await highlightSingleCodeBlock(highlighter, {
-      rawLanguage,
-      encodedCode,
-      matchedHtml: matched,
-      preAttributes,
-      codeAttributes
-    });
-    lastIndex = matchStart + matched.length;
-  }
-  resultHtml += html.slice(lastIndex);
-  return resultHtml;
-}
-async function highlightSingleCodeBlock(highlighter, input) {
-  const { rawLanguage, encodedCode, matchedHtml, preAttributes, codeAttributes } = input;
-  const normalizedLanguage = rawLanguage.toLowerCase();
-  if (normalizedLanguage === MERMAID_LANGUAGE_ID) {
-    return matchedHtml;
-  }
-  const resolvedLanguage = await ensureHighlighterLanguage(highlighter, normalizedLanguage);
-  const codeText = decodeHtmlEntities(encodedCode);
-  try {
-    const highlightedHtml = highlighter.codeToHtml(codeText, {
-      lang: resolvedLanguage,
-      theme: CODE_HIGHLIGHTER_THEME
-    });
-    const innerMatch = highlightedHtml.match(SHIKI_CODE_INNER_PATTERN);
-    const innerHtml = innerMatch?.[1] ?? encodedCode;
-    return `<pre${preAttributes}><code class="language-${rawLanguage}"${codeAttributes}>${innerHtml}</code></pre>`;
-  } catch {
-    return matchedHtml;
-  }
-}
-async function ensureHighlighterLanguage(highlighter, normalizedLanguage) {
-  if (normalizedLanguage.length === 0) {
-    return "text";
-  }
-  if (highlighter.getLoadedLanguages().includes(normalizedLanguage)) {
-    return normalizedLanguage;
-  }
-  const lazyLoader = CODE_HIGHLIGHTER_LAZY_LANGS[normalizedLanguage];
-  if (!lazyLoader) {
-    return "text";
-  }
-  let pending = codeHighlighterLazyLoadPromises.get(normalizedLanguage);
-  if (!pending) {
-    pending = (async () => {
-      const grammarModule = await lazyLoader();
-      await highlighter.loadLanguage(grammarModule.default);
-    })();
-    codeHighlighterLazyLoadPromises.set(normalizedLanguage, pending);
-  }
-  try {
-    await pending;
-    return normalizedLanguage;
-  } catch {
-    return "text";
-  }
-}
-var HTML_NAMED_ENTITIES = {
-  lt: "<",
-  gt: ">",
-  quot: '"',
-  apos: "'",
-  amp: "&"
-};
-var HTML_ENTITY_PATTERN = /&(?:(lt|gt|quot|apos|amp)|#x([0-9a-fA-F]+)|#(\d+));/g;
-function decodeHtmlEntities(encodedText) {
-  return encodedText.replace(
-    HTML_ENTITY_PATTERN,
-    (matched, namedEntity, hexCodePoint, decimalCodePoint) => {
-      if (namedEntity) {
-        return HTML_NAMED_ENTITIES[namedEntity] ?? matched;
-      }
-      if (hexCodePoint) {
-        return safeFromCodePoint(parseInt(hexCodePoint, 16), matched);
-      }
-      if (decimalCodePoint) {
-        return safeFromCodePoint(parseInt(decimalCodePoint, 10), matched);
-      }
-      return matched;
-    }
-  );
-}
-function safeFromCodePoint(codePoint, fallback) {
-  if (!Number.isFinite(codePoint) || codePoint < 0 || codePoint > 1114111) {
-    return fallback;
-  }
-  try {
-    return String.fromCodePoint(codePoint);
-  } catch {
-    return fallback;
-  }
-}
-function sanitizeHtmlWithDomPurify(unsafeHtml) {
-  const domPurify = DOMPurify;
-  if (typeof domPurify.sanitize !== "function") {
-    return unsafeHtml;
-  }
-  return domPurify.sanitize(unsafeHtml);
-}
-function hydrateMarkdownImages(rootElement) {
-  const imageElements = rootElement.querySelectorAll(
-    `img.${IMAGE_ELEMENT_CLASS_NAME}`
-  );
-  imageElements.forEach(bindMarkdownImageState);
-}
-function hydrateMarkdownVideos(rootElement) {
-  const videoElements = rootElement.querySelectorAll(
-    `video.${VIDEO_ELEMENT_CLASS_NAME}`
-  );
-  videoElements.forEach(bindMarkdownVideoState);
-}
-function hydrateCodeBlocks(rootElement) {
-  const preElements = rootElement.querySelectorAll("pre");
-  preElements.forEach(decorateCodeBlock);
-}
-var mermaidLoaderPromise;
-function hydrateMermaidBlocks(rootElement) {
-  const mermaidCodeElements = rootElement.querySelectorAll(
-    `pre > code.language-${MERMAID_LANGUAGE_ID}`
-  );
-  mermaidCodeElements.forEach((codeElement) => {
-    const preElement = codeElement.parentElement;
-    if (!preElement) {
-      return;
-    }
-    if (preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] === "true") {
-      return;
-    }
-    decorateMermaidBlock(preElement, codeElement);
-  });
-  kickOffPendingMermaidRenders(rootElement);
-}
-function kickOffPendingMermaidRenders(rootElement) {
-  const pendingFigures = rootElement.querySelectorAll(
-    `.${MERMAID_FIGURE_CLASS_NAME}.${MERMAID_FIGURE_LOADING_CLASS_NAME}`
-  );
-  pendingFigures.forEach((figureElement) => {
-    if (!figureElement.isConnected) {
-      return;
-    }
-    if (figureElement.dataset[MERMAID_RENDER_STARTED_DATA_KEY] === "true") {
-      return;
-    }
-    const canvasElement = figureElement.querySelector(
-      `.${MERMAID_CANVAS_CLASS_NAME}`
-    );
-    const mermaidSource = figureElement.dataset[MERMAID_SOURCE_DATA_KEY] ?? "";
-    if (!canvasElement || mermaidSource.length === 0) {
-      return;
-    }
-    figureElement.dataset[MERMAID_RENDER_STARTED_DATA_KEY] = "true";
-    void renderMermaidIntoCanvas(figureElement, canvasElement, mermaidSource);
-  });
-}
-function decorateMermaidBlock(preElement, codeElement) {
-  if (preElement.dataset[MERMAID_HYDRATED_DATA_KEY] === "true") {
-    return;
-  }
-  preElement.dataset[MERMAID_HYDRATED_DATA_KEY] = "true";
-  const ownerDocument = preElement.ownerDocument;
-  const mermaidSource = (codeElement.textContent ?? "").replace(/\n+$/u, "");
-  const figureElement = ownerDocument.createElement("figure");
-  figureElement.className = `${MERMAID_FIGURE_CLASS_NAME} ${MERMAID_FIGURE_LOADING_CLASS_NAME}`;
-  const chromeElement = ownerDocument.createElement("div");
-  chromeElement.className = MERMAID_CHROME_CLASS_NAME;
-  const labelElement = ownerDocument.createElement("span");
-  labelElement.className = MERMAID_LABEL_CLASS_NAME;
-  labelElement.textContent = MERMAID_LABEL_TEXT;
-  chromeElement.append(labelElement);
-  const bodyElement = ownerDocument.createElement("div");
-  bodyElement.className = MERMAID_BODY_CLASS_NAME;
-  const canvasElement = ownerDocument.createElement("div");
-  canvasElement.className = MERMAID_CANVAS_CLASS_NAME;
-  canvasElement.setAttribute("role", "img");
-  canvasElement.setAttribute("aria-label", MERMAID_LABEL_TEXT);
-  const fullscreenButtonElement = ownerDocument.createElement("button");
-  fullscreenButtonElement.type = "button";
-  fullscreenButtonElement.className = MERMAID_FULLSCREEN_BUTTON_CLASS_NAME;
-  fullscreenButtonElement.setAttribute("aria-label", MERMAID_FULLSCREEN_BUTTON_ARIA_LABEL);
-  fullscreenButtonElement.disabled = true;
-  fullscreenButtonElement.innerHTML = MERMAID_FULLSCREEN_ICON_SVG;
-  fullscreenButtonElement.addEventListener("click", handleMermaidFullscreenButtonClick);
-  bodyElement.append(canvasElement, fullscreenButtonElement);
-  figureElement.append(chromeElement, bodyElement);
-  const sourceLine = codeElement.getAttribute(SOURCE_LINE_DATA_ATTRIBUTE);
-  if (sourceLine !== null) {
-    figureElement.setAttribute(SOURCE_LINE_DATA_ATTRIBUTE, sourceLine);
-  }
-  figureElement.dataset[MERMAID_SOURCE_DATA_KEY] = mermaidSource;
-  preElement.replaceWith(figureElement);
-}
-async function loadMermaid() {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return void 0;
-  }
-  if (!mermaidLoaderPromise) {
-    mermaidLoaderPromise = (async () => {
-      const mermaidModule = await import("mermaid");
-      const mermaidApi = mermaidModule.default;
-      mermaidApi.initialize({
-        startOnLoad: false,
-        securityLevel: "strict",
-        theme: "default",
-        flowchart: { useMaxWidth: false },
-        sequence: { useMaxWidth: false },
-        class: { useMaxWidth: false },
-        state: { useMaxWidth: false },
-        gantt: { useMaxWidth: false },
-        er: { useMaxWidth: false },
-        journey: { useMaxWidth: false },
-        pie: { useMaxWidth: false },
-        requirement: { useMaxWidth: false },
-        c4: { useMaxWidth: false },
-        mindmap: { useMaxWidth: false },
-        timeline: { useMaxWidth: false },
-        gitGraph: { useMaxWidth: false },
-        quadrantChart: { useMaxWidth: false },
-        xyChart: { useMaxWidth: false },
-        sankey: { useMaxWidth: false },
-        block: { useMaxWidth: false }
-      });
-      return mermaidApi;
-    })().catch((loadError) => {
-      mermaidLoaderPromise = void 0;
-      throw loadError;
-    });
-  }
-  return mermaidLoaderPromise;
-}
-async function renderMermaidIntoCanvas(figureElement, canvasElement, mermaidSource) {
-  try {
-    const mermaidApi = await loadMermaid();
-    if (!mermaidApi) {
-      return;
-    }
-    mermaidRenderIdCounter += 1;
-    const renderId = `${MERMAID_RENDER_ID_PREFIX}${mermaidRenderIdCounter}`;
-    const { svg, bindFunctions } = await mermaidApi.render(renderId, mermaidSource);
-    canvasElement.innerHTML = svg;
-    bindFunctions?.(canvasElement);
-    figureElement.classList.remove(MERMAID_FIGURE_LOADING_CLASS_NAME);
-    figureElement.classList.add(MERMAID_FIGURE_LOADED_CLASS_NAME);
-    figureElement.dataset[MERMAID_VIEWER_SOURCE_DATA_KEY] = svg;
-    figureElement.dataset[MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY] = "true";
-    const fullscreenButtonElement = figureElement.querySelector(
-      `.${MERMAID_FULLSCREEN_BUTTON_CLASS_NAME}`
-    );
-    if (fullscreenButtonElement) {
-      fullscreenButtonElement.disabled = false;
-    }
-  } catch (renderError) {
-    showMermaidFallback(figureElement, canvasElement, mermaidSource, renderError);
-  }
-}
-function showMermaidFallback(figureElement, canvasElement, mermaidSource, renderError) {
-  const ownerDocument = figureElement.ownerDocument;
-  figureElement.classList.remove(MERMAID_FIGURE_LOADING_CLASS_NAME);
-  figureElement.classList.add(MERMAID_FIGURE_FAILED_CLASS_NAME);
-  const fullscreenButtonElement = figureElement.querySelector(
-    `.${MERMAID_FULLSCREEN_BUTTON_CLASS_NAME}`
-  );
-  fullscreenButtonElement?.remove();
-  canvasElement.replaceChildren();
-  cleanupOrphanMermaidNodes(ownerDocument);
-  const fallbackElement = ownerDocument.createElement("div");
-  fallbackElement.className = MERMAID_FALLBACK_CLASS_NAME;
-  const iconElement = ownerDocument.createElement("span");
-  iconElement.className = MERMAID_FALLBACK_ICON_CLASS_NAME;
-  iconElement.setAttribute("aria-hidden", "true");
-  fallbackElement.append(iconElement);
-  const textElement = ownerDocument.createElement("p");
-  textElement.className = MERMAID_FALLBACK_TEXT_CLASS_NAME;
-  textElement.textContent = MERMAID_FALLBACK_DEFAULT_TEXT;
-  fallbackElement.append(textElement);
-  const errorMessage = extractErrorMessage(renderError);
-  if (errorMessage) {
-    const messageElement = ownerDocument.createElement("p");
-    messageElement.className = MERMAID_FALLBACK_SOURCE_CLASS_NAME;
-    messageElement.textContent = errorMessage;
-    fallbackElement.append(messageElement);
-  }
-  if (mermaidSource.length > 0) {
-    const sourceElement = ownerDocument.createElement("pre");
-    sourceElement.className = MERMAID_FALLBACK_SOURCE_CLASS_NAME;
-    sourceElement.textContent = mermaidSource;
-    fallbackElement.append(sourceElement);
-  }
-  canvasElement.replaceWith(fallbackElement);
-}
-function extractErrorMessage(renderError) {
-  if (renderError instanceof Error) {
-    return renderError.message;
-  }
-  if (typeof renderError === "string") {
-    return renderError;
-  }
-  return "";
-}
-function cleanupOrphanMermaidNodes(ownerDocument) {
-  const orphanNodes = ownerDocument.querySelectorAll(
-    `body > [id^="${MERMAID_RENDER_ID_PREFIX}"], body > div[id^="d"][id*="mermaid"]`
-  );
-  orphanNodes.forEach((orphanNode) => {
-    orphanNode.remove();
-  });
-}
-var MERMAID_FULLSCREEN_ICON_SVG = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="M4 9 V4 H9 M15 4 H20 V9 M20 15 V20 H15 M9 20 H4 V15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-function handleMermaidFullscreenButtonClick(event) {
-  const buttonElement = event.currentTarget;
-  const figureElement = buttonElement.closest(`.${MERMAID_FIGURE_CLASS_NAME}`);
-  if (!figureElement) {
-    return;
-  }
-  if (figureElement.dataset[MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY] !== "true") {
-    return;
-  }
-  const svgSource = figureElement.dataset[MERMAID_VIEWER_SOURCE_DATA_KEY] ?? "";
-  if (svgSource.length === 0) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  openMarkdownMermaidViewer(figureElement.ownerDocument, svgSource);
+// src/code/mermaid.ts
+import {
+  MERMAID_BODY_CLASS_NAME,
+  MERMAID_CANVAS_CLASS_NAME,
+  MERMAID_CHROME_CLASS_NAME,
+  MERMAID_FALLBACK_CLASS_NAME,
+  MERMAID_FALLBACK_ICON_CLASS_NAME,
+  MERMAID_FALLBACK_SOURCE_CLASS_NAME,
+  MERMAID_FALLBACK_TEXT_CLASS_NAME,
+  MERMAID_FIGURE_CLASS_NAME,
+  MERMAID_FIGURE_FAILED_CLASS_NAME,
+  MERMAID_FIGURE_LOADED_CLASS_NAME,
+  MERMAID_FIGURE_LOADING_CLASS_NAME,
+  MERMAID_FULLSCREEN_BUTTON_CLASS_NAME,
+  MERMAID_LABEL_CLASS_NAME,
+  SOURCE_LINE_DATA_ATTRIBUTE as SOURCE_LINE_DATA_ATTRIBUTE2
+} from "@scribdown/shared";
+
+// src/code/mermaid-viewer.ts
+import {
+  MERMAID_VIEWER_BUTTON_CLASS_NAME,
+  MERMAID_VIEWER_CANVAS_CLASS_NAME,
+  MERMAID_VIEWER_CAPTION_CLASS_NAME,
+  MERMAID_VIEWER_CHROME_CLASS_NAME,
+  MERMAID_VIEWER_CLOSE_BUTTON_CLASS_NAME,
+  MERMAID_VIEWER_CONTROLS_CLASS_NAME,
+  MERMAID_VIEWER_DIALOG_CLASS_NAME,
+  MERMAID_VIEWER_DRAGGING_CLASS_NAME,
+  MERMAID_VIEWER_VIEWPORT_CLASS_NAME,
+  MERMAID_VIEWER_ZOOMED_CLASS_NAME,
+  MERMAID_VIEWER_ZOOM_VALUE_CLASS_NAME
+} from "@scribdown/shared";
+
+// src/core/viewer-shared.ts
+var VIEWER_DEFAULT_ZOOM = 1;
+var VIEWER_MIN_ZOOM = 0.25;
+var VIEWER_MAX_ZOOM = 4;
+var VIEWER_ZOOM_STEP = 0.25;
+var VIEWER_WHEEL_ZOOM_FACTOR = 0.01;
+var VIEWER_WHEEL_ZOOM_MAX_DELTA = 0.1;
+var VIEWER_FIT_RATIO = 0.92;
+var VIEWER_CLOSE_TEXT = "x";
+var VIEWER_ZOOM_IN_TEXT = "+";
+var VIEWER_ZOOM_OUT_TEXT = "-";
+var VIEWER_RESET_TEXT = "1:1";
+function clampMarkdownViewerZoom(zoomValue) {
+  return Math.min(VIEWER_MAX_ZOOM, Math.max(VIEWER_MIN_ZOOM, zoomValue));
 }
+
+// src/code/mermaid-viewer.ts
+var MERMAID_LABEL_TEXT = "Mermaid";
+var mermaidViewerStateByDocument = /* @__PURE__ */ new WeakMap();
+var mermaidViewerStateByDialogElement = /* @__PURE__ */ new WeakMap();
 function openMarkdownMermaidViewer(ownerDocument, svgSource) {
   const viewerState = getOrCreateMarkdownMermaidViewerState(ownerDocument);
   viewerState.canvasElement.innerHTML = svgSource;
@@ -680,7 +429,7 @@ function openMarkdownMermaidViewer(ownerDocument, svgSource) {
   viewerState.naturalHeight = svgDimensions.height;
   viewerState.viewportElement.scrollLeft = 0;
   viewerState.viewportElement.scrollTop = 0;
-  viewerState.zoomValue = IMAGE_VIEWER_DEFAULT_ZOOM;
+  viewerState.zoomValue = VIEWER_DEFAULT_ZOOM;
   showMarkdownMermaidViewerDialog(viewerState);
   requestMarkdownMermaidViewerLayout(viewerState);
 }
@@ -719,21 +468,21 @@ function createMarkdownMermaidViewerState(ownerDocument) {
   const controlsElement = ownerDocument.createElement("div");
   const zoomOutButtonElement = createMarkdownMermaidViewerButton(ownerDocument, {
     ariaLabel: "\u7F29\u5C0F\u56FE\u8868",
-    text: IMAGE_VIEWER_ZOOM_OUT_TEXT
+    text: VIEWER_ZOOM_OUT_TEXT
   });
   const zoomValueElement = ownerDocument.createElement("span");
   const zoomInButtonElement = createMarkdownMermaidViewerButton(ownerDocument, {
     ariaLabel: "\u653E\u5927\u56FE\u8868",
-    text: IMAGE_VIEWER_ZOOM_IN_TEXT
+    text: VIEWER_ZOOM_IN_TEXT
   });
   const resetButtonElement = createMarkdownMermaidViewerButton(ownerDocument, {
     ariaLabel: "\u91CD\u7F6E\u7F29\u653E",
-    text: IMAGE_VIEWER_RESET_TEXT
+    text: VIEWER_RESET_TEXT
   });
   const closeButtonElement = createMarkdownMermaidViewerButton(ownerDocument, {
     ariaLabel: "\u5173\u95ED\u5168\u5C4F\u67E5\u770B",
     className: MERMAID_VIEWER_CLOSE_BUTTON_CLASS_NAME,
-    text: IMAGE_VIEWER_CLOSE_TEXT
+    text: VIEWER_CLOSE_TEXT
   });
   const viewportElement = ownerDocument.createElement("div");
   const canvasElement = ownerDocument.createElement("div");
@@ -749,7 +498,7 @@ function createMarkdownMermaidViewerState(ownerDocument) {
     canvasElement,
     naturalWidth: 720,
     naturalHeight: 480,
-    zoomValue: IMAGE_VIEWER_DEFAULT_ZOOM,
+    zoomValue: VIEWER_DEFAULT_ZOOM,
     isDragging: false,
     dragStartClientX: 0,
     dragStartClientY: 0,
@@ -795,7 +544,7 @@ function createMarkdownMermaidViewerState(ownerDocument) {
   if (ownerWindow) {
     ownerWindow.addEventListener("resize", handleMarkdownMermaidViewerWindowResize);
   }
-  updateMarkdownMermaidViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
+  updateMarkdownMermaidViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
   return viewerState;
 }
 function createMarkdownMermaidViewerButton(ownerDocument, options) {
@@ -850,7 +599,7 @@ function resetMarkdownMermaidViewerAfterClose(viewerState) {
   viewerState.canvasElement.replaceChildren();
   viewerState.viewportElement.scrollLeft = 0;
   viewerState.viewportElement.scrollTop = 0;
-  viewerState.zoomValue = IMAGE_VIEWER_DEFAULT_ZOOM;
+  viewerState.zoomValue = VIEWER_DEFAULT_ZOOM;
   viewerState.isDragging = false;
   viewerState.dialogElement.classList.remove(MERMAID_VIEWER_DRAGGING_CLASS_NAME);
   viewerState.dialogElement.classList.remove(MERMAID_VIEWER_ZOOMED_CLASS_NAME);
@@ -862,17 +611,17 @@ function handleMarkdownMermaidViewerKeyDown(event) {
   }
   if (event.key === "+" || event.key === "=") {
     event.preventDefault();
-    updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue + IMAGE_VIEWER_ZOOM_STEP);
+    updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue + VIEWER_ZOOM_STEP);
     return;
   }
   if (event.key === "-") {
     event.preventDefault();
-    updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue - IMAGE_VIEWER_ZOOM_STEP);
+    updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue - VIEWER_ZOOM_STEP);
     return;
   }
   if (event.key === "0") {
     event.preventDefault();
-    updateMarkdownMermaidViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
+    updateMarkdownMermaidViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
     return;
   }
   if (event.key === "Escape") {
@@ -888,10 +637,10 @@ function handleMarkdownMermaidViewerWheel(event) {
   if (!viewerState) {
     return;
   }
-  const rawDelta = -event.deltaY * IMAGE_VIEWER_WHEEL_ZOOM_FACTOR;
+  const rawDelta = -event.deltaY * VIEWER_WHEEL_ZOOM_FACTOR;
   const zoomDelta = Math.max(
-    -IMAGE_VIEWER_WHEEL_ZOOM_MAX_DELTA,
-    Math.min(IMAGE_VIEWER_WHEEL_ZOOM_MAX_DELTA, rawDelta)
+    -VIEWER_WHEEL_ZOOM_MAX_DELTA,
+    Math.min(VIEWER_WHEEL_ZOOM_MAX_DELTA, rawDelta)
   );
   event.preventDefault();
   updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue + zoomDelta, {
@@ -960,21 +709,21 @@ function handleMarkdownMermaidViewerZoomOutClick(event) {
   if (!viewerState) {
     return;
   }
-  updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue - IMAGE_VIEWER_ZOOM_STEP);
+  updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue - VIEWER_ZOOM_STEP);
 }
 function handleMarkdownMermaidViewerZoomInClick(event) {
   const viewerState = getMarkdownMermaidViewerStateFromEvent(event);
   if (!viewerState) {
     return;
   }
-  updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue + IMAGE_VIEWER_ZOOM_STEP);
+  updateMarkdownMermaidViewerZoom(viewerState, viewerState.zoomValue + VIEWER_ZOOM_STEP);
 }
 function handleMarkdownMermaidViewerResetClick(event) {
   const viewerState = getMarkdownMermaidViewerStateFromEvent(event);
   if (!viewerState) {
     return;
   }
-  updateMarkdownMermaidViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
+  updateMarkdownMermaidViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
 }
 function handleMarkdownMermaidViewerCloseClick(event) {
   const viewerState = getMarkdownMermaidViewerStateFromEvent(event);
@@ -1003,17 +752,17 @@ function isMarkdownMermaidViewerOpen(viewerState) {
   return viewerState.dialogElement.open === true;
 }
 function updateMarkdownMermaidViewerZoom(viewerState, nextZoom, zoomAnchor) {
-  const normalizedZoom = clampMarkdownImageViewerZoom(nextZoom);
+  const normalizedZoom = clampMarkdownViewerZoom(nextZoom);
   const focalPoint = isMarkdownMermaidViewerOpen(viewerState) ? captureMarkdownMermaidViewerFocalPoint(viewerState, zoomAnchor) : void 0;
   viewerState.zoomValue = normalizedZoom;
   viewerState.dialogElement.classList.toggle(
     MERMAID_VIEWER_ZOOMED_CLASS_NAME,
-    normalizedZoom > IMAGE_VIEWER_DEFAULT_ZOOM
+    normalizedZoom > VIEWER_DEFAULT_ZOOM
   );
   viewerState.zoomValueElement.textContent = `${Math.round(normalizedZoom * 100)}%`;
-  viewerState.zoomOutButtonElement.disabled = normalizedZoom <= IMAGE_VIEWER_MIN_ZOOM;
-  viewerState.zoomInButtonElement.disabled = normalizedZoom >= IMAGE_VIEWER_MAX_ZOOM;
-  viewerState.resetButtonElement.disabled = normalizedZoom === IMAGE_VIEWER_DEFAULT_ZOOM;
+  viewerState.zoomOutButtonElement.disabled = normalizedZoom <= VIEWER_MIN_ZOOM;
+  viewerState.zoomInButtonElement.disabled = normalizedZoom >= VIEWER_MAX_ZOOM;
+  viewerState.resetButtonElement.disabled = normalizedZoom === VIEWER_DEFAULT_ZOOM;
   updateMarkdownMermaidViewerCanvasSize(viewerState);
   if (focalPoint) {
     applyMarkdownMermaidViewerFocalPoint(viewerState, focalPoint);
@@ -1045,11 +794,11 @@ function applyMarkdownMermaidViewerFocalPoint(viewerState, focalPoint) {
 }
 function updateMarkdownMermaidViewerCanvasSize(viewerState) {
   const viewportWidth = Math.max(
-    viewerState.viewportElement.clientWidth * IMAGE_VIEWER_FIT_RATIO,
+    viewerState.viewportElement.clientWidth * VIEWER_FIT_RATIO,
     1
   );
   const viewportHeight = Math.max(
-    viewerState.viewportElement.clientHeight * IMAGE_VIEWER_FIT_RATIO,
+    viewerState.viewportElement.clientHeight * VIEWER_FIT_RATIO,
     1
   );
   const naturalWidth = Math.max(viewerState.naturalWidth, 1);
@@ -1069,286 +818,453 @@ function updateMarkdownMermaidViewerCanvasSize(viewerState) {
     innerSvgElement.style.display = "block";
   }
 }
-function defaultScrollToHeading(targetElement) {
-  targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+
+// src/code/mermaid.ts
+var MERMAID_LANGUAGE_ID = "mermaid";
+var MERMAID_HYDRATED_DATA_KEY = "scribdownMermaidHydrated";
+var MERMAID_RENDER_STARTED_DATA_KEY = "scribdownMermaidRenderStarted";
+var MERMAID_SOURCE_DATA_KEY = "scribdownMermaidSourceText";
+var MERMAID_FALLBACK_DEFAULT_TEXT = "\u56FE\u8868\u6E32\u67D3\u5931\u8D25";
+var MERMAID_RENDER_ID_PREFIX = "scribdown-mermaid-";
+var mermaidRenderIdCounter = 0;
+var MERMAID_FULLSCREEN_BUTTON_ARIA_LABEL = "\u5168\u5C4F\u67E5\u770B\u56FE\u8868";
+var MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY = "scribdownMermaidFullscreenReady";
+var MERMAID_VIEWER_SOURCE_DATA_KEY = "scribdownMermaidSource";
+var mermaidLoaderPromise;
+function hydrateMermaidBlocks(rootElement) {
+  const mermaidCodeElements = rootElement.querySelectorAll(
+    `pre > code.language-${MERMAID_LANGUAGE_ID}`
+  );
+  mermaidCodeElements.forEach((codeElement) => {
+    const preElement = codeElement.parentElement;
+    if (!preElement) {
+      return;
+    }
+    if (preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] === "true") {
+      return;
+    }
+    decorateMermaidBlock(preElement, codeElement);
+  });
+  kickOffPendingMermaidRenders(rootElement);
 }
-function hydrateMarkdown(rootElement, options = {}) {
-  hydrateMarkdownImages(rootElement);
-  hydrateMarkdownVideos(rootElement);
-  hydrateMermaidBlocks(rootElement);
-  hydrateCodeBlocks(rootElement);
-  hydrateToc(rootElement, options.scrollToHeading ?? defaultScrollToHeading);
+function kickOffPendingMermaidRenders(rootElement) {
+  const pendingFigures = rootElement.querySelectorAll(
+    `.${MERMAID_FIGURE_CLASS_NAME}.${MERMAID_FIGURE_LOADING_CLASS_NAME}`
+  );
+  pendingFigures.forEach((figureElement) => {
+    if (!figureElement.isConnected) {
+      return;
+    }
+    if (figureElement.dataset[MERMAID_RENDER_STARTED_DATA_KEY] === "true") {
+      return;
+    }
+    const canvasElement = figureElement.querySelector(
+      `.${MERMAID_CANVAS_CLASS_NAME}`
+    );
+    const mermaidSource = figureElement.dataset[MERMAID_SOURCE_DATA_KEY] ?? "";
+    if (!canvasElement || mermaidSource.length === 0) {
+      return;
+    }
+    figureElement.dataset[MERMAID_RENDER_STARTED_DATA_KEY] = "true";
+    void renderMermaidIntoCanvas(figureElement, canvasElement, mermaidSource);
+  });
 }
-function mountMarkdownToolbar(container, options = {}) {
-  const ownerDocument = container.ownerDocument;
-  if (!ownerDocument) {
+function decorateMermaidBlock(preElement, codeElement) {
+  if (preElement.dataset[MERMAID_HYDRATED_DATA_KEY] === "true") {
     return;
   }
-  if (typeof ownerDocument.defaultView?.scrollTo !== "function") {
-    return;
+  preElement.dataset[MERMAID_HYDRATED_DATA_KEY] = "true";
+  const ownerDocument = preElement.ownerDocument;
+  const mermaidSource = (codeElement.textContent ?? "").replace(/\n+$/u, "");
+  const figureElement = ownerDocument.createElement("figure");
+  figureElement.className = `${MERMAID_FIGURE_CLASS_NAME} ${MERMAID_FIGURE_LOADING_CLASS_NAME}`;
+  const chromeElement = ownerDocument.createElement("div");
+  chromeElement.className = MERMAID_CHROME_CLASS_NAME;
+  const labelElement = ownerDocument.createElement("span");
+  labelElement.className = MERMAID_LABEL_CLASS_NAME;
+  labelElement.textContent = MERMAID_LABEL_TEXT;
+  chromeElement.append(labelElement);
+  const bodyElement = ownerDocument.createElement("div");
+  bodyElement.className = MERMAID_BODY_CLASS_NAME;
+  const canvasElement = ownerDocument.createElement("div");
+  canvasElement.className = MERMAID_CANVAS_CLASS_NAME;
+  canvasElement.setAttribute("role", "img");
+  canvasElement.setAttribute("aria-label", MERMAID_LABEL_TEXT);
+  const fullscreenButtonElement = ownerDocument.createElement("button");
+  fullscreenButtonElement.type = "button";
+  fullscreenButtonElement.className = MERMAID_FULLSCREEN_BUTTON_CLASS_NAME;
+  fullscreenButtonElement.setAttribute("aria-label", MERMAID_FULLSCREEN_BUTTON_ARIA_LABEL);
+  fullscreenButtonElement.disabled = true;
+  fullscreenButtonElement.innerHTML = MERMAID_FULLSCREEN_ICON_SVG;
+  fullscreenButtonElement.addEventListener("click", handleMermaidFullscreenButtonClick);
+  bodyElement.append(canvasElement, fullscreenButtonElement);
+  figureElement.append(chromeElement, bodyElement);
+  const sourceLine = codeElement.getAttribute(SOURCE_LINE_DATA_ATTRIBUTE2);
+  if (sourceLine !== null) {
+    figureElement.setAttribute(SOURCE_LINE_DATA_ATTRIBUTE2, sourceLine);
   }
-  applyContentWidth(ownerDocument, loadContentWidth());
-  mountPageToolbar(ownerDocument, container, options.scrollToHeading ?? defaultScrollToHeading);
+  figureElement.dataset[MERMAID_SOURCE_DATA_KEY] = mermaidSource;
+  preElement.replaceWith(figureElement);
 }
-function decorateCodeBlock(preElement) {
-  if (preElement.parentElement?.classList.contains(CODE_BLOCK_CLASS_NAME)) {
-    return;
+async function loadMermaid() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return void 0;
   }
-  if (preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] === "true") {
-    return;
+  if (!mermaidLoaderPromise) {
+    mermaidLoaderPromise = (async () => {
+      const mermaidModule = await import("mermaid");
+      const mermaidApi = mermaidModule.default;
+      mermaidApi.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: "default",
+        flowchart: { useMaxWidth: false },
+        sequence: { useMaxWidth: false },
+        class: { useMaxWidth: false },
+        state: { useMaxWidth: false },
+        gantt: { useMaxWidth: false },
+        er: { useMaxWidth: false },
+        journey: { useMaxWidth: false },
+        pie: { useMaxWidth: false },
+        requirement: { useMaxWidth: false },
+        c4: { useMaxWidth: false },
+        mindmap: { useMaxWidth: false },
+        timeline: { useMaxWidth: false },
+        gitGraph: { useMaxWidth: false },
+        quadrantChart: { useMaxWidth: false },
+        xyChart: { useMaxWidth: false },
+        sankey: { useMaxWidth: false },
+        block: { useMaxWidth: false }
+      });
+      return mermaidApi;
+    })().catch((loadError) => {
+      mermaidLoaderPromise = void 0;
+      throw loadError;
+    });
   }
-  const codeElement = preElement.querySelector(":scope > code");
-  if (!codeElement) {
-    return;
+  return mermaidLoaderPromise;
+}
+async function renderMermaidIntoCanvas(figureElement, canvasElement, mermaidSource) {
+  try {
+    const mermaidApi = await loadMermaid();
+    if (!mermaidApi) {
+      return;
+    }
+    mermaidRenderIdCounter += 1;
+    const renderId = `${MERMAID_RENDER_ID_PREFIX}${mermaidRenderIdCounter}`;
+    const { svg, bindFunctions } = await mermaidApi.render(renderId, mermaidSource);
+    canvasElement.innerHTML = svg;
+    bindFunctions?.(canvasElement);
+    figureElement.classList.remove(MERMAID_FIGURE_LOADING_CLASS_NAME);
+    figureElement.classList.add(MERMAID_FIGURE_LOADED_CLASS_NAME);
+    figureElement.dataset[MERMAID_VIEWER_SOURCE_DATA_KEY] = svg;
+    figureElement.dataset[MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY] = "true";
+    const fullscreenButtonElement = figureElement.querySelector(
+      `.${MERMAID_FULLSCREEN_BUTTON_CLASS_NAME}`
+    );
+    if (fullscreenButtonElement) {
+      fullscreenButtonElement.disabled = false;
+    }
+  } catch (renderError) {
+    showMermaidFallback(figureElement, canvasElement, mermaidSource, renderError);
   }
-  preElement.dataset[CODE_BLOCK_HYDRATED_DATA_KEY] = "true";
-  const ownerDocument = preElement.ownerDocument;
-  const languageId = resolveCodeBlockLanguageId(codeElement);
-  const languageLabel = resolveCodeBlockLanguageLabel(languageId);
-  const originalCodeText = codeElement.textContent ?? "";
-  const codeLineCount = rewriteCodeBlockLines(codeElement, ownerDocument);
-  const chromeElement = ownerDocument.createElement("div");
-  chromeElement.className = CODE_BLOCK_CHROME_CLASS_NAME;
-  const langElement = ownerDocument.createElement("span");
-  langElement.className = CODE_BLOCK_LANG_CLASS_NAME;
-  langElement.textContent = languageLabel;
-  chromeElement.append(langElement);
-  const copyButtonElement = createCodeBlockCopyButton(ownerDocument);
-  chromeElement.append(copyButtonElement);
-  const figureElement = ownerDocument.createElement("figure");
-  figureElement.className = CODE_BLOCK_CLASS_NAME;
-  figureElement.dataset.scribdownCodeLang = languageId;
-  const bodyElement = ownerDocument.createElement("div");
-  bodyElement.className = CODE_BLOCK_BODY_CLASS_NAME;
-  const gutterElement = createCodeBlockLineNumberGutter(ownerDocument, codeLineCount);
-  preElement.replaceWith(figureElement);
-  bodyElement.append(gutterElement, preElement);
-  figureElement.append(chromeElement, bodyElement);
-  const codeBlockSourceLine = codeElement.getAttribute(SOURCE_LINE_DATA_ATTRIBUTE);
-  if (codeBlockSourceLine !== null) {
-    figureElement.setAttribute(SOURCE_LINE_DATA_ATTRIBUTE, codeBlockSourceLine);
-    codeElement.removeAttribute(SOURCE_LINE_DATA_ATTRIBUTE);
+}
+function showMermaidFallback(figureElement, canvasElement, mermaidSource, renderError) {
+  const ownerDocument = figureElement.ownerDocument;
+  figureElement.classList.remove(MERMAID_FIGURE_LOADING_CLASS_NAME);
+  figureElement.classList.add(MERMAID_FIGURE_FAILED_CLASS_NAME);
+  const fullscreenButtonElement = figureElement.querySelector(
+    `.${MERMAID_FULLSCREEN_BUTTON_CLASS_NAME}`
+  );
+  fullscreenButtonElement?.remove();
+  canvasElement.replaceChildren();
+  cleanupOrphanMermaidNodes(ownerDocument);
+  const fallbackElement = ownerDocument.createElement("div");
+  fallbackElement.className = MERMAID_FALLBACK_CLASS_NAME;
+  const iconElement = ownerDocument.createElement("span");
+  iconElement.className = MERMAID_FALLBACK_ICON_CLASS_NAME;
+  iconElement.setAttribute("aria-hidden", "true");
+  fallbackElement.append(iconElement);
+  const textElement = ownerDocument.createElement("p");
+  textElement.className = MERMAID_FALLBACK_TEXT_CLASS_NAME;
+  textElement.textContent = MERMAID_FALLBACK_DEFAULT_TEXT;
+  fallbackElement.append(textElement);
+  const errorMessage = extractErrorMessage(renderError);
+  if (errorMessage) {
+    const messageElement = ownerDocument.createElement("p");
+    messageElement.className = MERMAID_FALLBACK_SOURCE_CLASS_NAME;
+    messageElement.textContent = errorMessage;
+    fallbackElement.append(messageElement);
+  }
+  if (mermaidSource.length > 0) {
+    const sourceElement = ownerDocument.createElement("pre");
+    sourceElement.className = MERMAID_FALLBACK_SOURCE_CLASS_NAME;
+    sourceElement.textContent = mermaidSource;
+    fallbackElement.append(sourceElement);
+  }
+  canvasElement.replaceWith(fallbackElement);
+}
+function extractErrorMessage(renderError) {
+  if (renderError instanceof Error) {
+    return renderError.message;
   }
-  copyButtonElement.dataset.scribdownCodeSource = originalCodeText;
-  copyButtonElement.addEventListener("click", handleCodeBlockCopyClick);
+  if (typeof renderError === "string") {
+    return renderError;
+  }
+  return "";
 }
-function resolveCodeBlockLanguageId(codeElement) {
-  const languageClassName = Array.from(codeElement.classList).find(
-    (className) => className.startsWith("language-")
+function cleanupOrphanMermaidNodes(ownerDocument) {
+  const orphanNodes = ownerDocument.querySelectorAll(
+    `body > [id^="${MERMAID_RENDER_ID_PREFIX}"], body > div[id^="d"][id*="mermaid"]`
   );
-  if (!languageClassName) {
-    return "";
-  }
-  return languageClassName.slice("language-".length).toLowerCase();
+  orphanNodes.forEach((orphanNode) => {
+    orphanNode.remove();
+  });
 }
-function resolveCodeBlockLanguageLabel(languageId) {
-  if (!languageId) {
-    return CODE_LANGUAGE_DEFAULT_LABEL;
+var MERMAID_FULLSCREEN_ICON_SVG = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="M4 9 V4 H9 M15 4 H20 V9 M20 15 V20 H15 M9 20 H4 V15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+function handleMermaidFullscreenButtonClick(event) {
+  const buttonElement = event.currentTarget;
+  const figureElement = buttonElement.closest(`.${MERMAID_FIGURE_CLASS_NAME}`);
+  if (!figureElement) {
+    return;
   }
-  const mappedLabel = CODE_LANGUAGE_DISPLAY_NAMES[languageId];
-  if (mappedLabel) {
-    return mappedLabel;
+  if (figureElement.dataset[MERMAID_FULLSCREEN_AVAILABLE_DATA_KEY] !== "true") {
+    return;
   }
-  return languageId.charAt(0).toUpperCase() + languageId.slice(1);
+  const svgSource = figureElement.dataset[MERMAID_VIEWER_SOURCE_DATA_KEY] ?? "";
+  if (svgSource.length === 0) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  openMarkdownMermaidViewer(figureElement.ownerDocument, svgSource);
 }
-function rewriteCodeBlockLines(codeElement, ownerDocument) {
-  const shikiLineElements = codeElement.querySelectorAll(":scope > span.line");
-  if (shikiLineElements.length > 0) {
-    const shikiLineNodes = Array.from(shikiLineElements);
-    shikiLineElements.forEach((lineElement) => {
-      lineElement.classList.add(CODE_BLOCK_LINE_CLASS_NAME);
-      if (lineElement.textContent === "") {
-        lineElement.textContent = CODE_BLOCK_EMPTY_LINE_PLACEHOLDER;
-      }
+
+// src/code/code-highlight.ts
+var CODE_HIGHLIGHTER_THEME = "github-light";
+var codeHighlighterPromise;
+var codeHighlighterLazyLoadPromises = /* @__PURE__ */ new Map();
+var CODE_BLOCK_HIGHLIGHT_PATTERN = /<pre([^>]*)><code class="language-([\w-]+)"([^>]*)>([\s\S]*?)<\/code><\/pre>/g;
+var SHIKI_CODE_INNER_PATTERN = /<code[^>]*>([\s\S]*?)<\/code>/u;
+async function getCodeHighlighter() {
+  if (!codeHighlighterPromise) {
+    codeHighlighterPromise = createHighlighterCore({
+      themes: [githubLightTheme],
+      // eager loaders 通过动态 import 拆为独立 chunk，初始化时并发拉取；
+      // 主 bundle 不再内联 grammar JSON，体积更小，多个 grammar 也可并行加载。
+      langs: CODE_HIGHLIGHTER_EAGER_LOADERS,
+      // oniguruma 引擎 + wasm；shiki/wasm 内部走 base64 内联，扩展环境无需额外资源声明。
+      engine: createOnigurumaEngine(import("shiki/wasm"))
     });
-    codeElement.replaceChildren(...shikiLineNodes);
-    return shikiLineNodes.length;
-  }
-  const codeText = codeElement.textContent ?? "";
-  const trimmedCodeText = codeText.replace(/\n+$/u, "");
-  const codeLines = trimmedCodeText.split("\n");
-  while (codeElement.firstChild) {
-    codeElement.removeChild(codeElement.firstChild);
   }
-  codeLines.forEach((lineText) => {
-    const lineElement = ownerDocument.createElement("span");
-    lineElement.className = CODE_BLOCK_LINE_CLASS_NAME;
-    if (lineText.length === 0) {
-      lineElement.textContent = CODE_BLOCK_EMPTY_LINE_PLACEHOLDER;
-    } else {
-      lineElement.textContent = lineText;
-    }
-    codeElement.append(lineElement);
-  });
-  return codeLines.length;
+  return codeHighlighterPromise;
 }
-function createCodeBlockLineNumberGutter(ownerDocument, lineCount) {
-  const gutterElement = ownerDocument.createElement("div");
-  gutterElement.className = CODE_BLOCK_GUTTER_CLASS_NAME;
-  for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
-    const lineNumberText = String(lineIndex + 1);
-    const lineNumberElement = ownerDocument.createElement("span");
-    lineNumberElement.className = CODE_BLOCK_GUTTER_LINE_CLASS_NAME;
-    lineNumberElement.textContent = lineNumberText;
-    gutterElement.append(lineNumberElement);
+async function highlightMarkdownCodeBlocks(html) {
+  if (!CODE_BLOCK_HIGHLIGHT_PATTERN.test(html)) {
+    return html;
   }
-  return gutterElement;
-}
-var CODE_BLOCK_COPY_ICON_COPY_PATHS = '<path d="M8.4 6.8 C10.4 6.5 12.6 6.7 14.6 6.6 C16 6.6 16.5 7.2 16.6 8.6 C16.7 10.8 16.6 13.2 16.6 15.4 C16.5 16.6 15.8 17.2 14.6 17.2 C12.4 17.3 10.2 17.2 8 17.2 C6.6 17.2 6.2 16.6 6.2 15.4 C6.2 13.2 6.2 11 6.2 8.8 C6.2 7.4 6.8 6.8 8.4 6.8 Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M8.6 7.4 C10.6 7.2 12.6 7.4 14.4 7.3" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/><path d="M3.6 12.8 C3.4 11.0 3.4 9.0 3.5 7.0 C3.5 5.0 3.4 3.6 5.2 3.4 C7.2 3.2 9.2 3.4 11.2 3.4 C12.6 3.4 13.2 4.0 13.3 5.0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M4.4 12.4 C4.2 10.6 4.2 8.8 4.2 7.0" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/>';
-var CODE_BLOCK_COPY_ICON_CHECK_PATHS = '<path d="M4.2 10.6 C5.6 11.8 6.8 13.2 8.2 14.6 C10.4 11.6 13.0 8.6 16.0 5.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/><path d="M4.6 11.4 C5.6 12.4 6.8 13.6 7.8 14.6 C10.2 12.2 12.6 9.6 15.2 7.0" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.42"/>';
-function createCodeBlockCopyButton(ownerDocument) {
-  const copyButtonElement = ownerDocument.createElement("button");
-  copyButtonElement.type = "button";
-  copyButtonElement.className = CODE_BLOCK_COPY_CLASS_NAME;
-  copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL);
-  const copyIconElement = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
-  copyIconElement.setAttribute(
-    "class",
-    `${CODE_BLOCK_COPY_ICON_CLASS_NAME} ${CODE_BLOCK_COPY_ICON_COPY_CLASS_NAME}`
-  );
-  copyIconElement.setAttribute("viewBox", "0 0 20 20");
-  copyIconElement.setAttribute("aria-hidden", "true");
-  copyIconElement.setAttribute("focusable", "false");
-  copyIconElement.innerHTML = CODE_BLOCK_COPY_ICON_COPY_PATHS;
-  copyButtonElement.append(copyIconElement);
-  const checkIconElement = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
-  checkIconElement.setAttribute(
-    "class",
-    `${CODE_BLOCK_COPY_ICON_CLASS_NAME} ${CODE_BLOCK_COPY_ICON_CHECK_CLASS_NAME}`
-  );
-  checkIconElement.setAttribute("viewBox", "0 0 20 20");
-  checkIconElement.setAttribute("aria-hidden", "true");
-  checkIconElement.setAttribute("focusable", "false");
-  checkIconElement.innerHTML = CODE_BLOCK_COPY_ICON_CHECK_PATHS;
-  copyButtonElement.append(checkIconElement);
-  return copyButtonElement;
-}
-function handleCodeBlockCopyClick(event) {
-  const copyButtonElement = event.currentTarget;
-  const codeText = copyButtonElement.dataset.scribdownCodeSource ?? "";
-  void writeCodeBlockTextToClipboard(codeText).then((isSucceeded) => {
-    if (isSucceeded) {
-      flashCodeBlockCopyButton(copyButtonElement);
-    }
-  });
+  CODE_BLOCK_HIGHLIGHT_PATTERN.lastIndex = 0;
+  const highlighter = await getCodeHighlighter();
+  let resultHtml = "";
+  let lastIndex = 0;
+  for (const match of html.matchAll(CODE_BLOCK_HIGHLIGHT_PATTERN)) {
+    const [matched, preAttributes, rawLanguage, codeAttributes, encodedCode] = match;
+    const matchStart = match.index ?? 0;
+    resultHtml += html.slice(lastIndex, matchStart);
+    resultHtml += await highlightSingleCodeBlock(highlighter, {
+      rawLanguage,
+      encodedCode,
+      matchedHtml: matched,
+      preAttributes,
+      codeAttributes
+    });
+    lastIndex = matchStart + matched.length;
+  }
+  resultHtml += html.slice(lastIndex);
+  return resultHtml;
 }
-async function writeCodeBlockTextToClipboard(codeText) {
-  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(codeText);
-      return true;
-    } catch {
-    }
+async function highlightSingleCodeBlock(highlighter, input) {
+  const { rawLanguage, encodedCode, matchedHtml, preAttributes, codeAttributes } = input;
+  const normalizedLanguage = rawLanguage.toLowerCase();
+  if (normalizedLanguage === MERMAID_LANGUAGE_ID) {
+    return matchedHtml;
   }
-  if (typeof document === "undefined") {
-    return false;
+  const resolvedLanguage = await ensureHighlighterLanguage(highlighter, normalizedLanguage);
+  const codeText = decodeHtmlEntities(encodedCode);
+  try {
+    const highlightedHtml = highlighter.codeToHtml(codeText, {
+      lang: resolvedLanguage,
+      theme: CODE_HIGHLIGHTER_THEME
+    });
+    const innerMatch = highlightedHtml.match(SHIKI_CODE_INNER_PATTERN);
+    const innerHtml = innerMatch?.[1] ?? encodedCode;
+    return `<pre${preAttributes}><code class="language-${rawLanguage}"${codeAttributes}>${innerHtml}</code></pre>`;
+  } catch {
+    return matchedHtml;
   }
-  const fallbackTextarea = document.createElement("textarea");
-  fallbackTextarea.value = codeText;
-  fallbackTextarea.setAttribute("readonly", "");
-  fallbackTextarea.style.position = "fixed";
-  fallbackTextarea.style.opacity = "0";
-  fallbackTextarea.style.pointerEvents = "none";
-  document.body.append(fallbackTextarea);
-  fallbackTextarea.select();
-  const isSucceeded = document.execCommand("copy");
-  fallbackTextarea.remove();
-  return isSucceeded;
-}
-function flashCodeBlockCopyButton(copyButtonElement) {
-  copyButtonElement.dataset.scribdownCodeCopied = "true";
-  copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL_COPIED);
-  window.setTimeout(() => {
-    delete copyButtonElement.dataset.scribdownCodeCopied;
-    copyButtonElement.setAttribute("aria-label", CODE_BLOCK_COPY_ARIA_LABEL);
-  }, CODE_BLOCK_COPY_RESTORE_DELAY_MS);
 }
-function bindMarkdownImageState(imageElement) {
-  updateMarkdownImageState(imageElement);
-  if (imageElement.dataset[IMAGE_HYDRATED_DATA_KEY] === "true") {
-    return;
+async function ensureHighlighterLanguage(highlighter, normalizedLanguage) {
+  if (normalizedLanguage.length === 0) {
+    return "text";
   }
-  imageElement.dataset[IMAGE_HYDRATED_DATA_KEY] = "true";
-  imageElement.addEventListener("load", handleMarkdownImageLoad);
-  imageElement.addEventListener("error", handleMarkdownImageError);
-  bindMarkdownImageViewer(imageElement);
+  if (highlighter.getLoadedLanguages().includes(normalizedLanguage)) {
+    return normalizedLanguage;
+  }
+  const lazyLoader = CODE_HIGHLIGHTER_LAZY_LANGS[normalizedLanguage];
+  if (!lazyLoader) {
+    return "text";
+  }
+  let pending = codeHighlighterLazyLoadPromises.get(normalizedLanguage);
+  if (!pending) {
+    pending = (async () => {
+      const grammarModule = await lazyLoader();
+      await highlighter.loadLanguage(grammarModule.default);
+    })();
+    codeHighlighterLazyLoadPromises.set(normalizedLanguage, pending);
+  }
+  try {
+    await pending;
+    return normalizedLanguage;
+  } catch {
+    codeHighlighterLazyLoadPromises.delete(normalizedLanguage);
+    return "text";
+  }
+}
+var HTML_NAMED_ENTITIES = {
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  amp: "&"
+};
+var HTML_ENTITY_PATTERN = /&(?:(lt|gt|quot|apos|amp)|#x([0-9a-fA-F]+)|#(\d+));/g;
+function decodeHtmlEntities(encodedText) {
+  return encodedText.replace(
+    HTML_ENTITY_PATTERN,
+    (matched, namedEntity, hexCodePoint, decimalCodePoint) => {
+      if (namedEntity) {
+        return HTML_NAMED_ENTITIES[namedEntity] ?? matched;
+      }
+      if (hexCodePoint) {
+        return safeFromCodePoint(parseInt(hexCodePoint, 16), matched);
+      }
+      if (decimalCodePoint) {
+        return safeFromCodePoint(parseInt(decimalCodePoint, 10), matched);
+      }
+      return matched;
+    }
+  );
 }
-function handleMarkdownImageLoad(event) {
-  const imageElement = event.currentTarget;
-  updateMarkdownImageState(imageElement);
+function safeFromCodePoint(codePoint, fallback) {
+  if (!Number.isFinite(codePoint) || codePoint < 0 || codePoint > 1114111) {
+    return fallback;
+  }
+  try {
+    return String.fromCodePoint(codePoint);
+  } catch {
+    return fallback;
+  }
 }
-function handleMarkdownImageError(event) {
-  const imageElement = event.currentTarget;
-  updateMarkdownImageState(imageElement);
+
+// src/core/source-line.ts
+import { SOURCE_LINE_DATA_ATTRIBUTE as SOURCE_LINE_DATA_ATTRIBUTE3 } from "@scribdown/shared";
+var SOURCE_LINE_HAST_PROPERTY = SOURCE_LINE_DATA_ATTRIBUTE3.replace(
+  /-([a-z])/gu,
+  (_match, letter) => letter.toUpperCase()
+);
+var BLOCK_CONTAINER_NODE_TYPES = /* @__PURE__ */ new Set(["list", "listItem", "blockquote"]);
+function remarkSourceLine() {
+  return (tree) => {
+    const blockNodes = tree.children ?? [];
+    blockNodes.forEach((blockNode) => {
+      annotateSourceLine(blockNode);
+      annotateNestedBlockSourceLines(blockNode);
+    });
+  };
 }
-function updateMarkdownImageState(imageElement) {
-  const frameElement = imageElement.closest(`.${IMAGE_FRAME_CLASS_NAME}`);
-  if (!frameElement) {
+function annotateSourceLine(node) {
+  const startLine = node.position?.start.line;
+  if (typeof startLine !== "number") {
     return;
   }
-  const isFailed = imageElement.complete && imageElement.naturalWidth === 0;
-  const isLoaded = imageElement.complete && imageElement.naturalWidth > 0;
-  frameElement.classList.toggle(IMAGE_FRAME_FAILED_CLASS_NAME, isFailed);
-  frameElement.classList.toggle(IMAGE_FRAME_LOADED_CLASS_NAME, isLoaded);
+  const nodeData = node.data ?? {};
+  const hProperties = nodeData.hProperties ?? {};
+  hProperties[SOURCE_LINE_HAST_PROPERTY] = startLine;
+  nodeData.hProperties = hProperties;
+  node.data = nodeData;
 }
-function bindMarkdownVideoState(videoElement) {
-  updateMarkdownVideoState(videoElement);
-  if (videoElement.dataset[VIDEO_HYDRATED_DATA_KEY] === "true") {
+function annotateNestedBlockSourceLines(node) {
+  if (!BLOCK_CONTAINER_NODE_TYPES.has(node.type)) {
     return;
   }
-  videoElement.dataset[VIDEO_HYDRATED_DATA_KEY] = "true";
-  videoElement.addEventListener("loadeddata", handleMarkdownVideoLoaded);
-  videoElement.addEventListener("error", handleMarkdownVideoError);
-  videoElement.querySelectorAll("source").forEach((sourceElement) => {
-    sourceElement.addEventListener("error", handleMarkdownVideoSourceError);
+  const childNodes = node.children ?? [];
+  childNodes.forEach((childNode) => {
+    annotateSourceLine(childNode);
+    annotateNestedBlockSourceLines(childNode);
   });
 }
-function handleMarkdownVideoLoaded(event) {
-  const videoElement = event.currentTarget;
-  updateMarkdownVideoState(videoElement);
-}
-function handleMarkdownVideoError(event) {
-  const videoElement = event.currentTarget;
-  markMarkdownVideoFailed(videoElement);
-}
-function handleMarkdownVideoSourceError(event) {
-  const sourceElement = event.currentTarget;
-  const videoElement = sourceElement.closest(
-    `video.${VIDEO_ELEMENT_CLASS_NAME}`
-  );
-  if (!videoElement) {
+
+// src/media/images.ts
+import {
+  IMAGE_CAPTION_CLASS_NAME,
+  IMAGE_ELEMENT_CLASS_NAME,
+  IMAGE_FALLBACK_CLASS_NAME,
+  IMAGE_FALLBACK_ICON_CLASS_NAME,
+  IMAGE_FALLBACK_SOURCE_CLASS_NAME,
+  IMAGE_FALLBACK_TEXT_CLASS_NAME,
+  IMAGE_FIGURE_CLASS_NAME,
+  IMAGE_FRAME_CLASS_NAME,
+  IMAGE_FRAME_FAILED_CLASS_NAME,
+  IMAGE_FRAME_LOADED_CLASS_NAME
+} from "@scribdown/shared";
+
+// src/core/ast.ts
+function visitMarkdownNode(node, visitor) {
+  visitor(node);
+  if (!node.children) {
     return;
   }
-  if (videoElement.networkState !== videoElement.NETWORK_NO_SOURCE) {
-    return;
+  const childNodes = node.children;
+  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
+    visitMarkdownNode(childNodes[childIndex], visitor);
   }
-  markMarkdownVideoFailed(videoElement);
 }
-function updateMarkdownVideoState(videoElement) {
-  const frameElement = videoElement.closest(
-    `.${VIDEO_FRAME_CLASS_NAME}`
-  );
-  if (!frameElement) {
-    return;
+function extractNodeText(node) {
+  if (node.type === "text" || node.type === "inlineCode") {
+    return node.value ?? "";
   }
-  const isFailed = videoElement.error !== null || videoElement.networkState === videoElement.NETWORK_NO_SOURCE;
-  const isLoaded = videoElement.readyState >= videoElement.HAVE_CURRENT_DATA;
-  frameElement.classList.toggle(VIDEO_FRAME_FAILED_CLASS_NAME, isFailed);
-  frameElement.classList.toggle(
-    VIDEO_FRAME_LOADED_CLASS_NAME,
-    isLoaded && !isFailed
-  );
-}
-function markMarkdownVideoFailed(videoElement) {
-  const frameElement = videoElement.closest(
-    `.${VIDEO_FRAME_CLASS_NAME}`
-  );
-  if (!frameElement) {
-    return;
+  if (isImageNode(node)) {
+    return node.alt ?? "";
   }
-  frameElement.classList.add(VIDEO_FRAME_FAILED_CLASS_NAME);
-  frameElement.classList.remove(VIDEO_FRAME_LOADED_CLASS_NAME);
+  if (!node.children) {
+    return "";
+  }
+  return node.children.map(extractNodeText).join("");
 }
+function isImageNode(node) {
+  return node.type === "image" || node.type === "imageReference";
+}
+
+// src/media/image-viewer.ts
+import {
+  IMAGE_VIEWER_BUTTON_CLASS_NAME,
+  IMAGE_VIEWER_CAPTION_CLASS_NAME,
+  IMAGE_VIEWER_CAPTION_GROUP_CLASS_NAME,
+  IMAGE_VIEWER_CHROME_CLASS_NAME,
+  IMAGE_VIEWER_CLOSE_BUTTON_CLASS_NAME,
+  IMAGE_VIEWER_CONTROLS_CLASS_NAME,
+  IMAGE_VIEWER_DIALOG_CLASS_NAME,
+  IMAGE_VIEWER_DRAGGING_CLASS_NAME,
+  IMAGE_VIEWER_HINT_CLASS_NAME,
+  IMAGE_VIEWER_IMAGE_CLASS_NAME,
+  IMAGE_VIEWER_VIEWPORT_CLASS_NAME,
+  IMAGE_VIEWER_ZOOMED_CLASS_NAME,
+  IMAGE_VIEWER_ZOOM_VALUE_CLASS_NAME
+} from "@scribdown/shared";
+var IMAGE_VIEWER_HINT_TEXT = "\u5FEB\u6377\u952E\uFF1A+/= \u653E\u5927 \xB7 - \u7F29\u5C0F \xB7 0 \u91CD\u7F6E \xB7 Esc \u5173\u95ED \xB7 \u9F20\u6807\u62D6\u62FD\u53EF\u5E73\u79FB \xB7 Ctrl/\u2318 + \u6EDA\u8F6E\u7F29\u653E";
+var IMAGE_VIEWER_FALLBACK_LABEL = "\u67E5\u770B\u5168\u56FE";
+var imageViewerStateByDocument = /* @__PURE__ */ new WeakMap();
+var imageViewerStateByDialogElement = /* @__PURE__ */ new WeakMap();
 function bindMarkdownImageViewer(imageElement) {
   const linkElement = imageElement.closest("a[href]");
   if (linkElement) {
@@ -1402,7 +1318,7 @@ function openMarkdownImageViewer(sourceImageElement) {
   );
   viewerState.viewportElement.scrollLeft = 0;
   viewerState.viewportElement.scrollTop = 0;
-  viewerState.zoomValue = IMAGE_VIEWER_DEFAULT_ZOOM;
+  viewerState.zoomValue = VIEWER_DEFAULT_ZOOM;
   showMarkdownImageViewerDialog(viewerState);
   requestMarkdownImageViewerLayout(viewerState);
 }
@@ -1424,21 +1340,21 @@ function createMarkdownImageViewerState(ownerDocument) {
   const controlsElement = ownerDocument.createElement("div");
   const zoomOutButtonElement = createMarkdownImageViewerButton(ownerDocument, {
     ariaLabel: "\u7F29\u5C0F\u56FE\u7247",
-    text: IMAGE_VIEWER_ZOOM_OUT_TEXT
+    text: VIEWER_ZOOM_OUT_TEXT
   });
   const zoomValueElement = ownerDocument.createElement("span");
   const zoomInButtonElement = createMarkdownImageViewerButton(ownerDocument, {
     ariaLabel: "\u653E\u5927\u56FE\u7247",
-    text: IMAGE_VIEWER_ZOOM_IN_TEXT
+    text: VIEWER_ZOOM_IN_TEXT
   });
   const resetButtonElement = createMarkdownImageViewerButton(ownerDocument, {
     ariaLabel: "\u91CD\u7F6E\u7F29\u653E",
-    text: IMAGE_VIEWER_RESET_TEXT
+    text: VIEWER_RESET_TEXT
   });
   const closeButtonElement = createMarkdownImageViewerButton(ownerDocument, {
     ariaLabel: "\u5173\u95ED\u5168\u56FE\u67E5\u770B",
     className: IMAGE_VIEWER_CLOSE_BUTTON_CLASS_NAME,
-    text: IMAGE_VIEWER_CLOSE_TEXT
+    text: VIEWER_CLOSE_TEXT
   });
   const viewportElement = ownerDocument.createElement("div");
   const imageElement = ownerDocument.createElement("img");
@@ -1459,7 +1375,7 @@ function createMarkdownImageViewerState(ownerDocument) {
     viewportElement,
     zoomInButtonElement,
     zoomOutButtonElement,
-    zoomValue: IMAGE_VIEWER_DEFAULT_ZOOM,
+    zoomValue: VIEWER_DEFAULT_ZOOM,
     zoomValueElement
   };
   const ownerWindow = ownerDocument.defaultView;
@@ -1506,7 +1422,7 @@ function createMarkdownImageViewerState(ownerDocument) {
   if (ownerWindow) {
     ownerWindow.addEventListener("resize", handleMarkdownImageViewerWindowResize);
   }
-  updateMarkdownImageViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
+  updateMarkdownImageViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
   return viewerState;
 }
 function createMarkdownImageViewerButton(ownerDocument, options) {
@@ -1555,274 +1471,670 @@ function handleMarkdownImageViewerClose(event) {
   if (!viewerState) {
     return;
   }
-  resetMarkdownImageViewerAfterClose(viewerState);
+  resetMarkdownImageViewerAfterClose(viewerState);
+}
+function handleMarkdownImageViewerKeyDown(event) {
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
+    return;
+  }
+  if (event.key === "+" || event.key === "=") {
+    event.preventDefault();
+    updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + VIEWER_ZOOM_STEP);
+    return;
+  }
+  if (event.key === "-") {
+    event.preventDefault();
+    updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue - VIEWER_ZOOM_STEP);
+    return;
+  }
+  if (event.key === "0") {
+    event.preventDefault();
+    updateMarkdownImageViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    closeMarkdownImageViewer(viewerState);
+  }
+}
+function handleMarkdownImageViewerWheel(event) {
+  if (!event.ctrlKey && !event.metaKey) {
+    return;
+  }
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
+    return;
+  }
+  const rawDelta = -event.deltaY * VIEWER_WHEEL_ZOOM_FACTOR;
+  const zoomDelta = Math.max(
+    -VIEWER_WHEEL_ZOOM_MAX_DELTA,
+    Math.min(VIEWER_WHEEL_ZOOM_MAX_DELTA, rawDelta)
+  );
+  event.preventDefault();
+  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + zoomDelta, {
+    x: event.clientX,
+    y: event.clientY
+  });
+}
+function handleMarkdownImageViewerPointerDown(event) {
+  if (event.button !== 0) {
+    return;
+  }
+  const viewportElement = event.currentTarget;
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
+    return;
+  }
+  const canScrollHorizontally = viewportElement.scrollWidth > viewportElement.clientWidth;
+  const canScrollVertically = viewportElement.scrollHeight > viewportElement.clientHeight;
+  if (!canScrollHorizontally && !canScrollVertically) {
+    return;
+  }
+  viewerState.isDragging = true;
+  viewerState.dragStartClientX = event.clientX;
+  viewerState.dragStartClientY = event.clientY;
+  viewerState.dragStartScrollLeft = viewportElement.scrollLeft;
+  viewerState.dragStartScrollTop = viewportElement.scrollTop;
+  viewerState.dialogElement.classList.add(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
+  if (typeof viewportElement.setPointerCapture === "function") {
+    viewportElement.setPointerCapture(event.pointerId);
+  }
+  event.preventDefault();
+}
+function handleMarkdownImageViewerPointerMove(event) {
+  const viewportElement = event.currentTarget;
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState || !viewerState.isDragging) {
+    return;
+  }
+  const deltaX = event.clientX - viewerState.dragStartClientX;
+  const deltaY = event.clientY - viewerState.dragStartClientY;
+  viewportElement.scrollLeft = viewerState.dragStartScrollLeft - deltaX;
+  viewportElement.scrollTop = viewerState.dragStartScrollTop - deltaY;
+}
+function handleMarkdownImageViewerPointerUp(event) {
+  const viewportElement = event.currentTarget;
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState || !viewerState.isDragging) {
+    return;
+  }
+  viewerState.isDragging = false;
+  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
+  if (typeof viewportElement.releasePointerCapture === "function" && viewportElement.hasPointerCapture(event.pointerId)) {
+    viewportElement.releasePointerCapture(event.pointerId);
+  }
+}
+function handleMarkdownImageViewerImageDragStart(event) {
+  event.preventDefault();
+}
+function handleMarkdownImageViewerImageLoad(event) {
+  const imageElement = event.currentTarget;
+  const dialogElement = imageElement.closest(
+    `.${IMAGE_VIEWER_DIALOG_CLASS_NAME}`
+  );
+  if (!dialogElement) {
+    return;
+  }
+  const viewerState = imageViewerStateByDialogElement.get(dialogElement);
+  if (!viewerState) {
+    return;
+  }
+  viewerState.naturalWidth = imageElement.naturalWidth || viewerState.naturalWidth;
+  viewerState.naturalHeight = imageElement.naturalHeight || viewerState.naturalHeight;
+  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue);
+}
+function handleMarkdownImageViewerWindowResize(event) {
+  const ownerWindow = event.currentTarget;
+  const viewerState = imageViewerStateByDocument.get(ownerWindow.document);
+  if (!viewerState || !isMarkdownImageViewerOpen(viewerState)) {
+    return;
+  }
+  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue);
+}
+function handleMarkdownImageViewerZoomOutClick(event) {
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
+    return;
+  }
+  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue - VIEWER_ZOOM_STEP);
+}
+function handleMarkdownImageViewerZoomInClick(event) {
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
+    return;
+  }
+  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + VIEWER_ZOOM_STEP);
 }
-function handleMarkdownImageViewerKeyDown(event) {
+function handleMarkdownImageViewerResetClick(event) {
   const viewerState = getMarkdownImageViewerStateFromEvent(event);
   if (!viewerState) {
     return;
   }
-  if (event.key === "+" || event.key === "=") {
-    event.preventDefault();
-    updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + IMAGE_VIEWER_ZOOM_STEP);
+  updateMarkdownImageViewerZoom(viewerState, VIEWER_DEFAULT_ZOOM);
+}
+function handleMarkdownImageViewerCloseClick(event) {
+  const viewerState = getMarkdownImageViewerStateFromEvent(event);
+  if (!viewerState) {
     return;
   }
-  if (event.key === "-") {
-    event.preventDefault();
-    updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue - IMAGE_VIEWER_ZOOM_STEP);
-    return;
+  closeMarkdownImageViewer(viewerState);
+}
+function getMarkdownImageViewerStateFromEvent(event) {
+  const currentTargetElement = event.currentTarget;
+  if (!currentTargetElement) {
+    return void 0;
   }
-  if (event.key === "0") {
-    event.preventDefault();
-    updateMarkdownImageViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
-    return;
+  const dialogElement = currentTargetElement.closest(
+    `.${IMAGE_VIEWER_DIALOG_CLASS_NAME}`
+  );
+  if (!dialogElement) {
+    return void 0;
   }
-  if (event.key === "Escape") {
-    event.preventDefault();
-    closeMarkdownImageViewer(viewerState);
+  return imageViewerStateByDialogElement.get(dialogElement);
+}
+function updateMarkdownImageViewerZoom(viewerState, nextZoom, zoomAnchor) {
+  const normalizedZoom = clampMarkdownViewerZoom(nextZoom);
+  const focalPoint = isMarkdownImageViewerOpen(viewerState) ? captureMarkdownImageViewerFocalPoint(viewerState, zoomAnchor) : void 0;
+  viewerState.zoomValue = normalizedZoom;
+  viewerState.dialogElement.classList.toggle(
+    IMAGE_VIEWER_ZOOMED_CLASS_NAME,
+    normalizedZoom > VIEWER_DEFAULT_ZOOM
+  );
+  viewerState.zoomValueElement.textContent = `${Math.round(normalizedZoom * 100)}%`;
+  viewerState.zoomOutButtonElement.disabled = normalizedZoom <= VIEWER_MIN_ZOOM;
+  viewerState.zoomInButtonElement.disabled = normalizedZoom >= VIEWER_MAX_ZOOM;
+  viewerState.resetButtonElement.disabled = normalizedZoom === VIEWER_DEFAULT_ZOOM;
+  updateMarkdownImageViewerImageSize(viewerState);
+  if (focalPoint) {
+    applyMarkdownImageViewerFocalPoint(viewerState, focalPoint);
   }
 }
-function handleMarkdownImageViewerWheel(event) {
-  if (!event.ctrlKey && !event.metaKey) {
-    return;
+function captureMarkdownImageViewerFocalPoint(viewerState, zoomAnchor) {
+  const preImageRect = viewerState.imageElement.getBoundingClientRect();
+  if (preImageRect.width <= 0 || preImageRect.height <= 0) {
+    return void 0;
   }
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
+  const viewportRect = viewerState.viewportElement.getBoundingClientRect();
+  const anchorClientX = zoomAnchor?.x ?? viewportRect.left + viewportRect.width / 2;
+  const anchorClientY = zoomAnchor?.y ?? viewportRect.top + viewportRect.height / 2;
+  const normalizedX = (anchorClientX - preImageRect.left) / preImageRect.width;
+  const normalizedY = (anchorClientY - preImageRect.top) / preImageRect.height;
+  return {
+    anchorClientX,
+    anchorClientY,
+    normalizedX,
+    normalizedY
+  };
+}
+function applyMarkdownImageViewerFocalPoint(viewerState, focalPoint) {
+  viewerState.viewportElement.scrollLeft = 0;
+  viewerState.viewportElement.scrollTop = 0;
+  const postImageRect = viewerState.imageElement.getBoundingClientRect();
+  if (postImageRect.width <= 0 || postImageRect.height <= 0) {
     return;
   }
-  const rawDelta = -event.deltaY * IMAGE_VIEWER_WHEEL_ZOOM_FACTOR;
-  const zoomDelta = Math.max(
-    -IMAGE_VIEWER_WHEEL_ZOOM_MAX_DELTA,
-    Math.min(IMAGE_VIEWER_WHEEL_ZOOM_MAX_DELTA, rawDelta)
+  const targetImageClientLeft = focalPoint.anchorClientX - focalPoint.normalizedX * postImageRect.width;
+  const targetImageClientTop = focalPoint.anchorClientY - focalPoint.normalizedY * postImageRect.height;
+  viewerState.viewportElement.scrollLeft = postImageRect.left - targetImageClientLeft;
+  viewerState.viewportElement.scrollTop = postImageRect.top - targetImageClientTop;
+}
+function updateMarkdownImageViewerImageSize(viewerState) {
+  const viewportWidth = Math.max(
+    viewerState.viewportElement.clientWidth * VIEWER_FIT_RATIO,
+    1
   );
-  event.preventDefault();
-  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + zoomDelta, {
-    x: event.clientX,
-    y: event.clientY
-  });
+  const viewportHeight = Math.max(
+    viewerState.viewportElement.clientHeight * VIEWER_FIT_RATIO,
+    1
+  );
+  const naturalWidth = Math.max(viewerState.naturalWidth, 1);
+  const naturalHeight = Math.max(viewerState.naturalHeight, 1);
+  const fitScale = Math.min(1, viewportWidth / naturalWidth, viewportHeight / naturalHeight);
+  const displayWidth = Math.max(1, Math.round(naturalWidth * fitScale * viewerState.zoomValue));
+  const displayHeight = Math.max(1, Math.round(naturalHeight * fitScale * viewerState.zoomValue));
+  viewerState.imageElement.style.width = `${displayWidth}px`;
+  viewerState.imageElement.style.height = `${displayHeight}px`;
 }
-function handleMarkdownImageViewerPointerDown(event) {
-  if (event.button !== 0) {
+function closeMarkdownImageViewer(viewerState) {
+  if (typeof viewerState.dialogElement.close === "function" && viewerState.dialogElement.open) {
+    viewerState.dialogElement.close();
     return;
   }
-  const viewportElement = event.currentTarget;
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
-    return;
+  viewerState.dialogElement.removeAttribute("open");
+  resetMarkdownImageViewerAfterClose(viewerState);
+}
+function resetMarkdownImageViewerAfterClose(viewerState) {
+  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_ZOOMED_CLASS_NAME);
+  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
+  viewerState.isDragging = false;
+  viewerState.imageElement.removeAttribute("src");
+  viewerState.imageElement.removeAttribute("alt");
+  viewerState.imageElement.removeAttribute("style");
+  viewerState.captionElement.textContent = "";
+  viewerState.viewportElement.scrollLeft = 0;
+  viewerState.viewportElement.scrollTop = 0;
+  viewerState.zoomValue = VIEWER_DEFAULT_ZOOM;
+  if (viewerState.sourceImageElement?.isConnected) {
+    viewerState.sourceImageElement.focus();
   }
-  const canScrollHorizontally = viewportElement.scrollWidth > viewportElement.clientWidth;
-  const canScrollVertically = viewportElement.scrollHeight > viewportElement.clientHeight;
-  if (!canScrollHorizontally && !canScrollVertically) {
+}
+function isMarkdownImageViewerOpen(viewerState) {
+  return viewerState.dialogElement.open || viewerState.dialogElement.hasAttribute("open");
+}
+function getMarkdownImageSource(imageElement) {
+  return imageElement.currentSrc || imageElement.getAttribute("src") || imageElement.src || "";
+}
+function createMarkdownImageViewerAriaLabel(imageElement) {
+  const imageAltText = imageElement.alt.trim();
+  if (imageAltText.length === 0) {
+    return IMAGE_VIEWER_FALLBACK_LABEL;
+  }
+  return `${IMAGE_VIEWER_FALLBACK_LABEL}\uFF1A${imageAltText}`;
+}
+function createMarkdownImageViewerCaption(imageElement, imageSource) {
+  const imageAltText = imageElement.alt.trim();
+  const imageTitleText = imageElement.title.trim();
+  return imageAltText || imageTitleText || imageSource;
+}
+
+// src/media/images.ts
+var IMAGE_HYDRATED_DATA_KEY = "scribdownImageHydrated";
+function remarkImageFigures() {
+  return (tree) => {
+    transformImageFigures(tree);
+  };
+}
+function transformImageFigures(node) {
+  if (!node.children) {
     return;
   }
-  viewerState.isDragging = true;
-  viewerState.dragStartClientX = event.clientX;
-  viewerState.dragStartClientY = event.clientY;
-  viewerState.dragStartScrollLeft = viewportElement.scrollLeft;
-  viewerState.dragStartScrollTop = viewportElement.scrollTop;
-  viewerState.dialogElement.classList.add(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
-  if (typeof viewportElement.setPointerCapture === "function") {
-    viewportElement.setPointerCapture(event.pointerId);
+  const childNodes = node.children;
+  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
+    const childNode = childNodes[childIndex];
+    const imageFigureNode = createImageFigureNode(childNode);
+    if (imageFigureNode) {
+      childNodes[childIndex] = imageFigureNode;
+      continue;
+    }
+    if (isImageNode(childNode)) {
+      decorateImageNode(childNode);
+      continue;
+    }
+    transformImageFigures(childNode);
   }
-  event.preventDefault();
 }
-function handleMarkdownImageViewerPointerMove(event) {
-  const viewportElement = event.currentTarget;
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState || !viewerState.isDragging) {
-    return;
-  }
-  const deltaX = event.clientX - viewerState.dragStartClientX;
-  const deltaY = event.clientY - viewerState.dragStartClientY;
-  viewportElement.scrollLeft = viewerState.dragStartScrollLeft - deltaX;
-  viewportElement.scrollTop = viewerState.dragStartScrollTop - deltaY;
+function createImageFigureNode(node) {
+  if (node.type !== "paragraph" || !node.children || node.children.length !== 1) {
+    return void 0;
+  }
+  const onlyChild = node.children[0];
+  if (!isImageNode(onlyChild)) {
+    return void 0;
+  }
+  decorateImageNode(onlyChild);
+  return {
+    type: "imageFigure",
+    // 关键步骤：保留原段落源码位置，使 remarkSourceLine 能为 figure 标注 data-source-line。
+    position: node.position,
+    data: {
+      hName: "figure",
+      hProperties: {
+        className: [IMAGE_FIGURE_CLASS_NAME]
+      }
+    },
+    children: [createImageFrameNode(onlyChild), ...createImageCaptionNodes(onlyChild)]
+  };
+}
+function decorateImageNode(imageNode) {
+  imageNode.data = {
+    ...imageNode.data,
+    hProperties: {
+      ...imageNode.data?.hProperties,
+      className: [IMAGE_ELEMENT_CLASS_NAME]
+    }
+  };
+}
+function createImageFrameNode(imageNode) {
+  return {
+    type: "imageFrame",
+    data: {
+      hName: "span",
+      hProperties: {
+        className: [IMAGE_FRAME_CLASS_NAME]
+      }
+    },
+    children: [imageNode, createImageFallbackNode(imageNode)]
+  };
+}
+function createImageCaptionNodes(imageNode) {
+  const imageTitle = typeof imageNode.title === "string" ? imageNode.title.trim() : "";
+  if (imageTitle.length === 0) {
+    return [];
+  }
+  return [
+    {
+      type: "imageCaption",
+      data: {
+        hName: "figcaption",
+        hProperties: {
+          className: [IMAGE_CAPTION_CLASS_NAME]
+        }
+      },
+      children: [{ type: "text", value: imageTitle }]
+    }
+  ];
+}
+function createImageFallbackNode(imageNode) {
+  const fallbackText = imageNode.alt?.trim() || "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25";
+  const fallbackSource = imageNode.url ?? imageNode.identifier ?? "";
+  return {
+    type: "imageFallback",
+    data: {
+      hName: "span",
+      hProperties: {
+        className: [IMAGE_FALLBACK_CLASS_NAME]
+      }
+    },
+    children: [
+      {
+        type: "imageFallbackIcon",
+        data: {
+          hName: "span",
+          hProperties: {
+            className: [IMAGE_FALLBACK_ICON_CLASS_NAME]
+          }
+        }
+      },
+      {
+        type: "imageFallbackText",
+        data: {
+          hName: "span",
+          hProperties: {
+            className: [IMAGE_FALLBACK_TEXT_CLASS_NAME]
+          }
+        },
+        children: [{ type: "text", value: fallbackText }]
+      },
+      {
+        type: "imageFallbackSource",
+        data: {
+          hName: "span",
+          hProperties: {
+            className: [IMAGE_FALLBACK_SOURCE_CLASS_NAME]
+          }
+        },
+        children: [{ type: "text", value: fallbackSource }]
+      }
+    ]
+  };
+}
+function hydrateMarkdownImages(rootElement) {
+  const imageElements = rootElement.querySelectorAll(
+    `img.${IMAGE_ELEMENT_CLASS_NAME}`
+  );
+  imageElements.forEach(bindMarkdownImageState);
 }
-function handleMarkdownImageViewerPointerUp(event) {
-  const viewportElement = event.currentTarget;
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState || !viewerState.isDragging) {
+function bindMarkdownImageState(imageElement) {
+  updateMarkdownImageState(imageElement);
+  if (imageElement.dataset[IMAGE_HYDRATED_DATA_KEY] === "true") {
     return;
   }
-  viewerState.isDragging = false;
-  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
-  if (typeof viewportElement.releasePointerCapture === "function" && viewportElement.hasPointerCapture(event.pointerId)) {
-    viewportElement.releasePointerCapture(event.pointerId);
-  }
+  imageElement.dataset[IMAGE_HYDRATED_DATA_KEY] = "true";
+  imageElement.addEventListener("load", handleMarkdownImageLoad);
+  imageElement.addEventListener("error", handleMarkdownImageError);
+  bindMarkdownImageViewer(imageElement);
 }
-function handleMarkdownImageViewerImageDragStart(event) {
-  event.preventDefault();
+function handleMarkdownImageLoad(event) {
+  const imageElement = event.currentTarget;
+  updateMarkdownImageState(imageElement);
 }
-function handleMarkdownImageViewerImageLoad(event) {
+function handleMarkdownImageError(event) {
   const imageElement = event.currentTarget;
-  const dialogElement = imageElement.closest(
-    `.${IMAGE_VIEWER_DIALOG_CLASS_NAME}`
-  );
-  if (!dialogElement) {
-    return;
-  }
-  const viewerState = imageViewerStateByDialogElement.get(dialogElement);
-  if (!viewerState) {
-    return;
-  }
-  viewerState.naturalWidth = imageElement.naturalWidth || viewerState.naturalWidth;
-  viewerState.naturalHeight = imageElement.naturalHeight || viewerState.naturalHeight;
-  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue);
+  updateMarkdownImageState(imageElement);
 }
-function handleMarkdownImageViewerWindowResize(event) {
-  const ownerWindow = event.currentTarget;
-  const viewerState = imageViewerStateByDocument.get(ownerWindow.document);
-  if (!viewerState || !isMarkdownImageViewerOpen(viewerState)) {
+function updateMarkdownImageState(imageElement) {
+  const frameElement = imageElement.closest(`.${IMAGE_FRAME_CLASS_NAME}`);
+  if (!frameElement) {
     return;
   }
-  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue);
+  const isFailed = imageElement.complete && imageElement.naturalWidth === 0;
+  const isLoaded = imageElement.complete && imageElement.naturalWidth > 0;
+  frameElement.classList.toggle(IMAGE_FRAME_FAILED_CLASS_NAME, isFailed);
+  frameElement.classList.toggle(IMAGE_FRAME_LOADED_CLASS_NAME, isLoaded);
 }
-function handleMarkdownImageViewerZoomOutClick(event) {
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
-    return;
-  }
-  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue - IMAGE_VIEWER_ZOOM_STEP);
+
+// src/media/videos.ts
+import {
+  VIDEO_ELEMENT_CLASS_NAME,
+  VIDEO_FALLBACK_CLASS_NAME,
+  VIDEO_FALLBACK_ICON_CLASS_NAME,
+  VIDEO_FALLBACK_SOURCE_CLASS_NAME,
+  VIDEO_FALLBACK_TEXT_CLASS_NAME,
+  VIDEO_FIGURE_CLASS_NAME,
+  VIDEO_FRAME_CLASS_NAME,
+  VIDEO_FRAME_FAILED_CLASS_NAME,
+  VIDEO_FRAME_LOADED_CLASS_NAME
+} from "@scribdown/shared";
+var VIDEO_HYDRATED_DATA_KEY = "scribdownVideoHydrated";
+var VIDEO_FALLBACK_DEFAULT_TEXT = "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25";
+function rehypeVideoFigures() {
+  return (tree) => {
+    transformVideoFigures(tree);
+  };
 }
-function handleMarkdownImageViewerZoomInClick(event) {
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
+function transformVideoFigures(node) {
+  if (!Array.isArray(node.children)) {
     return;
   }
-  updateMarkdownImageViewerZoom(viewerState, viewerState.zoomValue + IMAGE_VIEWER_ZOOM_STEP);
-}
-function handleMarkdownImageViewerResetClick(event) {
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
-    return;
+  const childNodes = node.children;
+  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
+    const childNode = childNodes[childIndex];
+    if (isHastVideoElement(childNode)) {
+      childNodes[childIndex] = createVideoFigureHast(childNode);
+      continue;
+    }
+    const standaloneVideo = extractStandaloneParagraphVideo(childNode);
+    if (standaloneVideo) {
+      childNodes[childIndex] = createVideoFigureHast(standaloneVideo);
+      continue;
+    }
+    transformVideoFigures(childNode);
   }
-  updateMarkdownImageViewerZoom(viewerState, IMAGE_VIEWER_DEFAULT_ZOOM);
 }
-function handleMarkdownImageViewerCloseClick(event) {
-  const viewerState = getMarkdownImageViewerStateFromEvent(event);
-  if (!viewerState) {
-    return;
-  }
-  closeMarkdownImageViewer(viewerState);
+function isHastVideoElement(node) {
+  return node.type === "element" && node.tagName === "video";
 }
-function getMarkdownImageViewerStateFromEvent(event) {
-  const currentTargetElement = event.currentTarget;
-  if (!currentTargetElement) {
+function extractStandaloneParagraphVideo(node) {
+  if (node.type !== "element" || node.tagName !== "p" || !Array.isArray(node.children)) {
     return void 0;
   }
-  const dialogElement = currentTargetElement.closest(
-    `.${IMAGE_VIEWER_DIALOG_CLASS_NAME}`
-  );
-  if (!dialogElement) {
-    return void 0;
+  const significantChildren = node.children.filter((childNode) => {
+    if (childNode.type === "text" && typeof childNode.value === "string") {
+      return childNode.value.trim().length > 0;
+    }
+    return true;
+  });
+  if (significantChildren.length === 1 && isHastVideoElement(significantChildren[0])) {
+    return significantChildren[0];
   }
-  return imageViewerStateByDialogElement.get(dialogElement);
+  return void 0;
 }
-function updateMarkdownImageViewerZoom(viewerState, nextZoom, zoomAnchor) {
-  const normalizedZoom = clampMarkdownImageViewerZoom(nextZoom);
-  const focalPoint = isMarkdownImageViewerOpen(viewerState) ? captureMarkdownImageViewerFocalPoint(viewerState, zoomAnchor) : void 0;
-  viewerState.zoomValue = normalizedZoom;
-  viewerState.dialogElement.classList.toggle(
-    IMAGE_VIEWER_ZOOMED_CLASS_NAME,
-    normalizedZoom > IMAGE_VIEWER_DEFAULT_ZOOM
-  );
-  viewerState.zoomValueElement.textContent = `${Math.round(normalizedZoom * 100)}%`;
-  viewerState.zoomOutButtonElement.disabled = normalizedZoom <= IMAGE_VIEWER_MIN_ZOOM;
-  viewerState.zoomInButtonElement.disabled = normalizedZoom >= IMAGE_VIEWER_MAX_ZOOM;
-  viewerState.resetButtonElement.disabled = normalizedZoom === IMAGE_VIEWER_DEFAULT_ZOOM;
-  updateMarkdownImageViewerImageSize(viewerState);
-  if (focalPoint) {
-    applyMarkdownImageViewerFocalPoint(viewerState, focalPoint);
+function createVideoFigureHast(videoNode) {
+  decorateHastVideoElement(videoNode);
+  const sourceUrl = readHastVideoSourceUrl(videoNode);
+  return {
+    type: "element",
+    tagName: "figure",
+    properties: { className: [VIDEO_FIGURE_CLASS_NAME] },
+    children: [
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: [VIDEO_FRAME_CLASS_NAME] },
+        children: [videoNode, createVideoFallbackHast(sourceUrl)]
+      }
+    ]
+  };
+}
+function decorateHastVideoElement(videoNode) {
+  const properties = videoNode.properties ?? {};
+  const existingClassName = properties.className;
+  const classList = Array.isArray(existingClassName) ? existingClassName.map(String) : typeof existingClassName === "string" ? [existingClassName] : [];
+  if (!classList.includes(VIDEO_ELEMENT_CLASS_NAME)) {
+    classList.push(VIDEO_ELEMENT_CLASS_NAME);
   }
+  properties.className = classList;
+  videoNode.properties = properties;
 }
-function captureMarkdownImageViewerFocalPoint(viewerState, zoomAnchor) {
-  const preImageRect = viewerState.imageElement.getBoundingClientRect();
-  if (preImageRect.width <= 0 || preImageRect.height <= 0) {
-    return void 0;
+function readHastVideoSourceUrl(videoNode) {
+  const properties = videoNode.properties ?? {};
+  if (typeof properties.src === "string") {
+    return properties.src;
   }
-  const viewportRect = viewerState.viewportElement.getBoundingClientRect();
-  const anchorClientX = zoomAnchor?.x ?? viewportRect.left + viewportRect.width / 2;
-  const anchorClientY = zoomAnchor?.y ?? viewportRect.top + viewportRect.height / 2;
-  const normalizedX = (anchorClientX - preImageRect.left) / preImageRect.width;
-  const normalizedY = (anchorClientY - preImageRect.top) / preImageRect.height;
+  if (Array.isArray(videoNode.children)) {
+    for (const childNode of videoNode.children) {
+      if (childNode.type === "element" && childNode.tagName === "source" && typeof childNode.properties?.src === "string") {
+        return childNode.properties.src;
+      }
+    }
+  }
+  return "";
+}
+function createVideoFallbackHast(sourceUrl) {
   return {
-    anchorClientX,
-    anchorClientY,
-    normalizedX,
-    normalizedY
+    type: "element",
+    tagName: "span",
+    properties: { className: [VIDEO_FALLBACK_CLASS_NAME] },
+    children: [
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: [VIDEO_FALLBACK_ICON_CLASS_NAME] },
+        children: []
+      },
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: [VIDEO_FALLBACK_TEXT_CLASS_NAME] },
+        children: [{ type: "text", value: VIDEO_FALLBACK_DEFAULT_TEXT }]
+      },
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: [VIDEO_FALLBACK_SOURCE_CLASS_NAME] },
+        children: [{ type: "text", value: sourceUrl }]
+      }
+    ]
   };
 }
-function applyMarkdownImageViewerFocalPoint(viewerState, focalPoint) {
-  viewerState.viewportElement.scrollLeft = 0;
-  viewerState.viewportElement.scrollTop = 0;
-  const postImageRect = viewerState.imageElement.getBoundingClientRect();
-  if (postImageRect.width <= 0 || postImageRect.height <= 0) {
+function hydrateMarkdownVideos(rootElement) {
+  const videoElements = rootElement.querySelectorAll(
+    `video.${VIDEO_ELEMENT_CLASS_NAME}`
+  );
+  videoElements.forEach(bindMarkdownVideoState);
+}
+function bindMarkdownVideoState(videoElement) {
+  updateMarkdownVideoState(videoElement);
+  if (videoElement.dataset[VIDEO_HYDRATED_DATA_KEY] === "true") {
+    return;
+  }
+  videoElement.dataset[VIDEO_HYDRATED_DATA_KEY] = "true";
+  videoElement.addEventListener("loadeddata", handleMarkdownVideoLoaded);
+  videoElement.addEventListener("error", handleMarkdownVideoError);
+  videoElement.querySelectorAll("source").forEach((sourceElement) => {
+    sourceElement.addEventListener("error", handleMarkdownVideoSourceError);
+  });
+}
+function handleMarkdownVideoLoaded(event) {
+  const videoElement = event.currentTarget;
+  updateMarkdownVideoState(videoElement);
+}
+function handleMarkdownVideoError(event) {
+  const videoElement = event.currentTarget;
+  markMarkdownVideoFailed(videoElement);
+}
+function handleMarkdownVideoSourceError(event) {
+  const sourceElement = event.currentTarget;
+  const videoElement = sourceElement.closest(
+    `video.${VIDEO_ELEMENT_CLASS_NAME}`
+  );
+  if (!videoElement) {
     return;
   }
-  const targetImageClientLeft = focalPoint.anchorClientX - focalPoint.normalizedX * postImageRect.width;
-  const targetImageClientTop = focalPoint.anchorClientY - focalPoint.normalizedY * postImageRect.height;
-  viewerState.viewportElement.scrollLeft = postImageRect.left - targetImageClientLeft;
-  viewerState.viewportElement.scrollTop = postImageRect.top - targetImageClientTop;
+  if (videoElement.networkState !== videoElement.NETWORK_NO_SOURCE) {
+    return;
+  }
+  markMarkdownVideoFailed(videoElement);
 }
-function updateMarkdownImageViewerImageSize(viewerState) {
-  const viewportWidth = Math.max(
-    viewerState.viewportElement.clientWidth * IMAGE_VIEWER_FIT_RATIO,
-    1
-  );
-  const viewportHeight = Math.max(
-    viewerState.viewportElement.clientHeight * IMAGE_VIEWER_FIT_RATIO,
-    1
+function updateMarkdownVideoState(videoElement) {
+  const frameElement = videoElement.closest(
+    `.${VIDEO_FRAME_CLASS_NAME}`
   );
-  const naturalWidth = Math.max(viewerState.naturalWidth, 1);
-  const naturalHeight = Math.max(viewerState.naturalHeight, 1);
-  const fitScale = Math.min(1, viewportWidth / naturalWidth, viewportHeight / naturalHeight);
-  const displayWidth = Math.max(1, Math.round(naturalWidth * fitScale * viewerState.zoomValue));
-  const displayHeight = Math.max(1, Math.round(naturalHeight * fitScale * viewerState.zoomValue));
-  viewerState.imageElement.style.width = `${displayWidth}px`;
-  viewerState.imageElement.style.height = `${displayHeight}px`;
-}
-function clampMarkdownImageViewerZoom(zoomValue) {
-  return Math.min(IMAGE_VIEWER_MAX_ZOOM, Math.max(IMAGE_VIEWER_MIN_ZOOM, zoomValue));
-}
-function closeMarkdownImageViewer(viewerState) {
-  if (typeof viewerState.dialogElement.close === "function" && viewerState.dialogElement.open) {
-    viewerState.dialogElement.close();
+  if (!frameElement) {
     return;
   }
-  viewerState.dialogElement.removeAttribute("open");
-  resetMarkdownImageViewerAfterClose(viewerState);
+  const isFailed = videoElement.error !== null || videoElement.networkState === videoElement.NETWORK_NO_SOURCE;
+  const isLoaded = videoElement.readyState >= videoElement.HAVE_CURRENT_DATA;
+  frameElement.classList.toggle(VIDEO_FRAME_FAILED_CLASS_NAME, isFailed);
+  frameElement.classList.toggle(
+    VIDEO_FRAME_LOADED_CLASS_NAME,
+    isLoaded && !isFailed
+  );
 }
-function resetMarkdownImageViewerAfterClose(viewerState) {
-  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_ZOOMED_CLASS_NAME);
-  viewerState.dialogElement.classList.remove(IMAGE_VIEWER_DRAGGING_CLASS_NAME);
-  viewerState.isDragging = false;
-  viewerState.imageElement.removeAttribute("src");
-  viewerState.imageElement.removeAttribute("alt");
-  viewerState.imageElement.removeAttribute("style");
-  viewerState.captionElement.textContent = "";
-  viewerState.viewportElement.scrollLeft = 0;
-  viewerState.viewportElement.scrollTop = 0;
-  viewerState.zoomValue = IMAGE_VIEWER_DEFAULT_ZOOM;
-  if (viewerState.sourceImageElement?.isConnected) {
-    viewerState.sourceImageElement.focus();
+function markMarkdownVideoFailed(videoElement) {
+  const frameElement = videoElement.closest(
+    `.${VIDEO_FRAME_CLASS_NAME}`
+  );
+  if (!frameElement) {
+    return;
   }
+  frameElement.classList.add(VIDEO_FRAME_FAILED_CLASS_NAME);
+  frameElement.classList.remove(VIDEO_FRAME_LOADED_CLASS_NAME);
 }
-function isMarkdownImageViewerOpen(viewerState) {
-  return viewerState.dialogElement.open || viewerState.dialogElement.hasAttribute("open");
-}
-function getMarkdownImageSource(imageElement) {
-  return imageElement.currentSrc || imageElement.getAttribute("src") || imageElement.src || "";
-}
-function createMarkdownImageViewerAriaLabel(imageElement) {
-  const imageAltText = imageElement.alt.trim();
-  if (imageAltText.length === 0) {
-    return IMAGE_VIEWER_FALLBACK_LABEL;
+
+// src/sanitize.ts
+import {
+  DETAILS_CLASS_NAME,
+  FRAME_CLASS_NAME,
+  FRONTMATTER_CHROME_CLASS_NAME,
+  FRONTMATTER_CLASS_NAME,
+  FRONTMATTER_LABEL_CLASS_NAME,
+  FRONTMATTER_LIST_CLASS_NAME,
+  FRONTMATTER_LIST_NESTED_CLASS_NAME,
+  HEADING_MARK_CLASS_NAME,
+  IMAGE_CAPTION_CLASS_NAME as IMAGE_CAPTION_CLASS_NAME2,
+  IMAGE_ELEMENT_CLASS_NAME as IMAGE_ELEMENT_CLASS_NAME2,
+  IMAGE_FALLBACK_CLASS_NAME as IMAGE_FALLBACK_CLASS_NAME2,
+  IMAGE_FALLBACK_ICON_CLASS_NAME as IMAGE_FALLBACK_ICON_CLASS_NAME2,
+  IMAGE_FALLBACK_SOURCE_CLASS_NAME as IMAGE_FALLBACK_SOURCE_CLASS_NAME2,
+  IMAGE_FALLBACK_TEXT_CLASS_NAME as IMAGE_FALLBACK_TEXT_CLASS_NAME2,
+  IMAGE_FIGURE_CLASS_NAME as IMAGE_FIGURE_CLASS_NAME2,
+  IMAGE_FRAME_CLASS_NAME as IMAGE_FRAME_CLASS_NAME2,
+  TOC_CLASS_NAME,
+  TOC_ITEM_CLASS_PREFIX,
+  TOC_LINK_CLASS_NAME,
+  TOC_LIST_CLASS_NAME,
+  TOC_LIST_NESTED_CLASS_NAME,
+  TOC_NAV_CLASS_NAME,
+  TOC_SUMMARY_CLASS_NAME,
+  TOC_TOGGLE_CLASS_NAME,
+  VIDEO_ELEMENT_CLASS_NAME as VIDEO_ELEMENT_CLASS_NAME2,
+  VIDEO_FALLBACK_CLASS_NAME as VIDEO_FALLBACK_CLASS_NAME2,
+  VIDEO_FALLBACK_ICON_CLASS_NAME as VIDEO_FALLBACK_ICON_CLASS_NAME2,
+  VIDEO_FALLBACK_SOURCE_CLASS_NAME as VIDEO_FALLBACK_SOURCE_CLASS_NAME2,
+  VIDEO_FALLBACK_TEXT_CLASS_NAME as VIDEO_FALLBACK_TEXT_CLASS_NAME2,
+  VIDEO_FIGURE_CLASS_NAME as VIDEO_FIGURE_CLASS_NAME2,
+  VIDEO_FRAME_CLASS_NAME as VIDEO_FRAME_CLASS_NAME2
+} from "@scribdown/shared";
+import DOMPurify from "dompurify";
+import { defaultSchema } from "rehype-sanitize";
+function sanitizeHtmlWithDomPurify(unsafeHtml) {
+  const domPurify = DOMPurify;
+  if (typeof domPurify.sanitize !== "function") {
+    return unsafeHtml;
   }
-  return `${IMAGE_VIEWER_FALLBACK_LABEL}\uFF1A${imageAltText}`;
-}
-function createMarkdownImageViewerCaption(imageElement, imageSource) {
-  const imageAltText = imageElement.alt.trim();
-  const imageTitleText = imageElement.title.trim();
-  return imageAltText || imageTitleText || imageSource;
+  return domPurify.sanitize(unsafeHtml);
 }
 function createScribdownSanitizeSchema() {
   const defaultTagNames = defaultSchema.tagNames ?? [];
@@ -1835,7 +2147,7 @@ function createScribdownSanitizeSchema() {
     ...defaultAttributes.summary ?? [],
     ["className", TOC_SUMMARY_CLASS_NAME]
   ];
-  const navAttributes = ["ariaLabel", ["className", /^scribdown-toc-nav$/u]];
+  const navAttributes = ["ariaLabel", ["className", TOC_NAV_CLASS_NAME]];
   const linkAttributes = [
     "ariaDescribedBy",
     "ariaLabel",
@@ -1855,32 +2167,40 @@ function createScribdownSanitizeSchema() {
     "ariaDescribedBy",
     "ariaLabel",
     "ariaLabelledBy",
-    ["className", "contains-task-list", /^scribdown-toc-list(?:--nested)?$/u]
+    ["className", "contains-task-list", TOC_LIST_CLASS_NAME, TOC_LIST_NESTED_CLASS_NAME]
+  ];
+  const divAttributes = [
+    ...defaultAttributes.div ?? [],
+    ["className", FRONTMATTER_CLASS_NAME, FRAME_CLASS_NAME, FRONTMATTER_CHROME_CLASS_NAME]
+  ];
+  const definitionListAttributes = [
+    ["className", FRONTMATTER_LIST_CLASS_NAME, FRONTMATTER_LIST_NESTED_CLASS_NAME]
   ];
   const spanAttributes = [
     ...defaultAttributes.span ?? [],
     [
       "className",
       HEADING_MARK_CLASS_NAME,
-      IMAGE_FRAME_CLASS_NAME,
-      IMAGE_FALLBACK_CLASS_NAME,
-      IMAGE_FALLBACK_ICON_CLASS_NAME,
-      IMAGE_FALLBACK_TEXT_CLASS_NAME,
-      IMAGE_FALLBACK_SOURCE_CLASS_NAME,
-      VIDEO_FRAME_CLASS_NAME,
-      VIDEO_FALLBACK_CLASS_NAME,
-      VIDEO_FALLBACK_ICON_CLASS_NAME,
-      VIDEO_FALLBACK_TEXT_CLASS_NAME,
-      VIDEO_FALLBACK_SOURCE_CLASS_NAME
+      FRONTMATTER_LABEL_CLASS_NAME,
+      IMAGE_FRAME_CLASS_NAME2,
+      IMAGE_FALLBACK_CLASS_NAME2,
+      IMAGE_FALLBACK_ICON_CLASS_NAME2,
+      IMAGE_FALLBACK_TEXT_CLASS_NAME2,
+      IMAGE_FALLBACK_SOURCE_CLASS_NAME2,
+      VIDEO_FRAME_CLASS_NAME2,
+      VIDEO_FALLBACK_CLASS_NAME2,
+      VIDEO_FALLBACK_ICON_CLASS_NAME2,
+      VIDEO_FALLBACK_TEXT_CLASS_NAME2,
+      VIDEO_FALLBACK_SOURCE_CLASS_NAME2
     ]
   ];
   const figureAttributes = [
-    ["className", IMAGE_FIGURE_CLASS_NAME, VIDEO_FIGURE_CLASS_NAME]
+    ["className", IMAGE_FIGURE_CLASS_NAME2, VIDEO_FIGURE_CLASS_NAME2]
   ];
-  const figcaptionAttributes = [["className", IMAGE_CAPTION_CLASS_NAME]];
+  const figcaptionAttributes = [["className", IMAGE_CAPTION_CLASS_NAME2]];
   const imageAttributes = [
     ...defaultAttributes.img ?? [],
-    ["className", IMAGE_ELEMENT_CLASS_NAME]
+    ["className", IMAGE_ELEMENT_CLASS_NAME2]
   ];
   const videoAttributes = [
     "src",
@@ -1895,13 +2215,17 @@ function createScribdownSanitizeSchema() {
     "loop",
     "autoPlay",
     "crossOrigin",
-    ["className", VIDEO_ELEMENT_CLASS_NAME]
+    ["className", VIDEO_ELEMENT_CLASS_NAME2]
   ];
   const sourceAttributes = ["src", "type", "media"];
   const abbrAttributes = ["title"];
   const listItemAttributes = [
     "dataTocIndex",
-    ["className", "task-list-item", /^scribdown-toc-item(?:--(?:branch|depth-[1-6]))?$/u]
+    [
+      "className",
+      "task-list-item",
+      new RegExp(`^${TOC_ITEM_CLASS_PREFIX}(?:--(?:branch|depth-[1-6]))?$`, "u")
+    ]
   ];
   const wildcardAttributes = [...defaultAttributes["*"] ?? [], SOURCE_LINE_HAST_PROPERTY];
   return {
@@ -1940,6 +2264,8 @@ function createScribdownSanitizeSchema() {
       a: linkAttributes,
       ol: orderedListAttributes,
       li: listItemAttributes,
+      div: divAttributes,
+      dl: definitionListAttributes,
       span: spanAttributes,
       abbr: abbrAttributes,
       figure: figureAttributes,
@@ -1950,41 +2276,235 @@ function createScribdownSanitizeSchema() {
     }
   };
 }
-function remarkHighlightMark() {
+
+// src/syntax/definition-lists.ts
+var DEFINITION_LIST_PARAGRAPH_PATTERN = /^\s*([^\n:][^\n]*)\n\s*:\s+([^\n]+)\s*$/u;
+function remarkDefinitionLists() {
   return (tree) => {
-    transformHighlightMarks(tree);
+    transformDefinitionLists(tree);
   };
 }
-var BLOCK_CONTAINER_NODE_TYPES = /* @__PURE__ */ new Set(["list", "listItem", "blockquote"]);
-function remarkSourceLine() {
+function transformDefinitionLists(node) {
+  if (!node.children) {
+    return;
+  }
+  const childNodes = node.children;
+  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
+    const childNode = childNodes[childIndex];
+    const definitionListNode = createDefinitionListNode(childNode);
+    if (definitionListNode) {
+      childNodes[childIndex] = definitionListNode;
+      continue;
+    }
+    transformDefinitionLists(childNode);
+  }
+}
+function createDefinitionListNode(node) {
+  if (node.type !== "paragraph") {
+    return void 0;
+  }
+  const paragraphText = extractNodeText(node);
+  const definitionMatch = DEFINITION_LIST_PARAGRAPH_PATTERN.exec(paragraphText);
+  if (!definitionMatch) {
+    return void 0;
+  }
+  const definitionTerm = definitionMatch[1].trim();
+  const definitionDescription = definitionMatch[2].trim();
+  if (definitionTerm.length === 0 || definitionDescription.length === 0) {
+    return void 0;
+  }
+  return {
+    type: "definitionList",
+    // 关键步骤：保留原段落源码位置，使 remarkSourceLine 能为 dl 标注 data-source-line。
+    position: node.position,
+    data: {
+      hName: "dl"
+    },
+    children: [
+      {
+        type: "definitionTerm",
+        data: {
+          hName: "dt"
+        },
+        children: [{ type: "text", value: definitionTerm }]
+      },
+      {
+        type: "definitionDescription",
+        data: {
+          hName: "dd"
+        },
+        children: [{ type: "text", value: definitionDescription }]
+      }
+    ]
+  };
+}
+
+// src/syntax/frame.ts
+import { DETAILS_CLASS_NAME as DETAILS_CLASS_NAME2, FRAME_CLASS_NAME as FRAME_CLASS_NAME2, TOC_CLASS_NAME as TOC_CLASS_NAME2 } from "@scribdown/shared";
+function rehypeFrameClass() {
   return (tree) => {
-    const blockNodes = tree.children ?? [];
-    blockNodes.forEach((blockNode) => {
-      annotateSourceLine(blockNode);
-      annotateNestedBlockSourceLines(blockNode);
-    });
+    tagContentDetails(tree);
   };
 }
-function annotateSourceLine(node) {
-  const startLine = node.position?.start.line;
-  if (typeof startLine !== "number") {
-    return;
+function tagContentDetails(node) {
+  if (node.type === "element" && node.tagName === "details") {
+    const classNames = normalizeClassNames(node.properties?.className);
+    const isTocDetails = classNames.includes(TOC_CLASS_NAME2);
+    if (!isTocDetails) {
+      addClassNames(node, [DETAILS_CLASS_NAME2, FRAME_CLASS_NAME2]);
+    }
+  }
+  if (Array.isArray(node.children)) {
+    for (const childNode of node.children) {
+      tagContentDetails(childNode);
+    }
   }
-  const nodeData = node.data ?? {};
-  const hProperties = nodeData.hProperties ?? {};
-  hProperties[SOURCE_LINE_HAST_PROPERTY] = startLine;
-  nodeData.hProperties = hProperties;
-  node.data = nodeData;
 }
-function annotateNestedBlockSourceLines(node) {
-  if (!BLOCK_CONTAINER_NODE_TYPES.has(node.type)) {
-    return;
+function normalizeClassNames(className) {
+  if (Array.isArray(className)) {
+    return className.filter((item) => typeof item === "string");
   }
-  const childNodes = node.children ?? [];
-  childNodes.forEach((childNode) => {
-    annotateSourceLine(childNode);
-    annotateNestedBlockSourceLines(childNode);
+  if (typeof className === "string") {
+    return className.split(/\s+/u).filter(Boolean);
+  }
+  return [];
+}
+function addClassNames(node, classNamesToAdd) {
+  const mergedClassNames = normalizeClassNames(node.properties?.className);
+  for (const classNameToAdd of classNamesToAdd) {
+    if (!mergedClassNames.includes(classNameToAdd)) {
+      mergedClassNames.push(classNameToAdd);
+    }
+  }
+  node.properties = { ...node.properties, className: mergedClassNames };
+}
+
+// src/syntax/frontmatter.ts
+import {
+  FRAME_CLASS_NAME as FRAME_CLASS_NAME3,
+  FRONTMATTER_CHROME_CLASS_NAME as FRONTMATTER_CHROME_CLASS_NAME2,
+  FRONTMATTER_CLASS_NAME as FRONTMATTER_CLASS_NAME2,
+  FRONTMATTER_LABEL_CLASS_NAME as FRONTMATTER_LABEL_CLASS_NAME2,
+  FRONTMATTER_LIST_CLASS_NAME as FRONTMATTER_LIST_CLASS_NAME2,
+  FRONTMATTER_LIST_NESTED_CLASS_NAME as FRONTMATTER_LIST_NESTED_CLASS_NAME2
+} from "@scribdown/shared";
+import { parse as parseYamlSource } from "yaml";
+var FRONTMATTER_LABEL_TEXT = "\u5143\u6570\u636E";
+var FRONTMATTER_ARRAY_SEPARATOR = ", ";
+var FRONTMATTER_FALLBACK_LANGUAGE_ID = "yaml";
+function remarkFrontmatterMetadata() {
+  return (tree) => {
+    const childNodes = tree.children ?? [];
+    const yamlNode = childNodes[0];
+    if (!yamlNode || yamlNode.type !== "yaml" || typeof yamlNode.value !== "string") {
+      return;
+    }
+    childNodes[0] = createFrontmatterNode(yamlNode);
+  };
+}
+function createFrontmatterNode(yamlNode) {
+  const yamlSource = yamlNode.value ?? "";
+  let parsedValue;
+  try {
+    parsedValue = parseYamlSource(yamlSource);
+  } catch {
+    parsedValue = void 0;
+  }
+  if (!isPlainRecord(parsedValue)) {
+    return {
+      type: "code",
+      lang: FRONTMATTER_FALLBACK_LANGUAGE_ID,
+      position: yamlNode.position,
+      value: yamlSource
+    };
+  }
+  return {
+    type: "frontmatterMetadata",
+    // 关键步骤：保留原节点源码位置，使 remarkSourceLine 能标注 data-source-line。
+    position: yamlNode.position,
+    data: {
+      hName: "div",
+      hProperties: { className: [FRONTMATTER_CLASS_NAME2, FRAME_CLASS_NAME3] }
+    },
+    children: [
+      {
+        type: "frontmatterChrome",
+        data: {
+          hName: "div",
+          hProperties: { className: [FRONTMATTER_CHROME_CLASS_NAME2] }
+        },
+        children: [
+          {
+            type: "frontmatterLabel",
+            data: {
+              hName: "span",
+              hProperties: { className: [FRONTMATTER_LABEL_CLASS_NAME2] }
+            },
+            children: [{ type: "text", value: FRONTMATTER_LABEL_TEXT }]
+          }
+        ]
+      },
+      createFrontmatterListNode(parsedValue, false)
+    ]
+  };
+}
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function createFrontmatterListNode(record, nested) {
+  const listClassNames = nested ? [FRONTMATTER_LIST_CLASS_NAME2, FRONTMATTER_LIST_NESTED_CLASS_NAME2] : [FRONTMATTER_LIST_CLASS_NAME2];
+  const listChildren = [];
+  Object.entries(record).forEach(([entryKey, entryValue]) => {
+    listChildren.push({
+      type: "frontmatterTerm",
+      data: { hName: "dt" },
+      children: [{ type: "text", value: entryKey }]
+    });
+    listChildren.push({
+      type: "frontmatterDescription",
+      data: { hName: "dd" },
+      children: createFrontmatterValueNodes(entryValue)
+    });
   });
+  return {
+    type: "frontmatterList",
+    data: {
+      hName: "dl",
+      hProperties: { className: listClassNames }
+    },
+    children: listChildren
+  };
+}
+function createFrontmatterValueNodes(value) {
+  if (isPlainRecord(value)) {
+    return [createFrontmatterListNode(value, true)];
+  }
+  if (Array.isArray(value)) {
+    return [
+      {
+        type: "text",
+        value: value.map(formatFrontmatterScalar).join(FRONTMATTER_ARRAY_SEPARATOR)
+      }
+    ];
+  }
+  return [{ type: "text", value: formatFrontmatterScalar(value) }];
+}
+function formatFrontmatterScalar(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+// src/syntax/highlight-mark.ts
+var HIGHLIGHT_MARKER_PATTERN = /==([^=\n]+?)==/g;
+function remarkHighlightMark() {
+  return (tree) => {
+    transformHighlightMarks(tree);
+  };
 }
 function transformHighlightMarks(node) {
   if (!node.children) {
@@ -2028,197 +2548,30 @@ function splitHighlightMarks(textValue) {
   }
   return segments;
 }
-function remarkDefinitionLists() {
-  return (tree) => {
-    transformDefinitionLists(tree);
-  };
-}
-function transformDefinitionLists(node) {
-  if (!node.children) {
-    return;
-  }
-  const childNodes = node.children;
-  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
-    const childNode = childNodes[childIndex];
-    const definitionListNode = createDefinitionListNode(childNode);
-    if (definitionListNode) {
-      childNodes[childIndex] = definitionListNode;
-      continue;
-    }
-    transformDefinitionLists(childNode);
-  }
-}
-function createDefinitionListNode(node) {
-  if (node.type !== "paragraph") {
-    return void 0;
-  }
-  const paragraphText = extractNodeText(node);
-  const definitionMatch = DEFINITION_LIST_PARAGRAPH_PATTERN.exec(paragraphText);
-  if (!definitionMatch) {
-    return void 0;
-  }
-  const definitionTerm = definitionMatch[1].trim();
-  const definitionDescription = definitionMatch[2].trim();
-  if (definitionTerm.length === 0 || definitionDescription.length === 0) {
-    return void 0;
-  }
-  return {
-    type: "definitionList",
-    // 关键步骤：保留原段落源码位置，使 remarkSourceLine 能为 dl 标注 data-source-line。
-    position: node.position,
-    data: {
-      hName: "dl"
-    },
-    children: [
-      {
-        type: "definitionTerm",
-        data: {
-          hName: "dt"
-        },
-        children: [{ type: "text", value: definitionTerm }]
-      },
-      {
-        type: "definitionDescription",
-        data: {
-          hName: "dd"
-        },
-        children: [{ type: "text", value: definitionDescription }]
-      }
-    ]
-  };
-}
-function remarkImageFigures() {
-  return (tree) => {
-    transformImageFigures(tree);
-  };
-}
-function transformImageFigures(node) {
-  if (!node.children) {
-    return;
-  }
-  const childNodes = node.children;
-  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
-    const childNode = childNodes[childIndex];
-    const imageFigureNode = createImageFigureNode(childNode);
-    if (imageFigureNode) {
-      childNodes[childIndex] = imageFigureNode;
-      continue;
-    }
-    if (isImageNode(childNode)) {
-      decorateImageNode(childNode);
-      continue;
-    }
-    transformImageFigures(childNode);
-  }
-}
-function createImageFigureNode(node) {
-  if (node.type !== "paragraph" || !node.children || node.children.length !== 1) {
-    return void 0;
-  }
-  const onlyChild = node.children[0];
-  if (!isImageNode(onlyChild)) {
-    return void 0;
-  }
-  decorateImageNode(onlyChild);
-  return {
-    type: "imageFigure",
-    // 关键步骤：保留原段落源码位置，使 remarkSourceLine 能为 figure 标注 data-source-line。
-    position: node.position,
-    data: {
-      hName: "figure",
-      hProperties: {
-        className: [IMAGE_FIGURE_CLASS_NAME]
-      }
-    },
-    children: [createImageFrameNode(onlyChild), ...createImageCaptionNodes(onlyChild)]
-  };
-}
-function decorateImageNode(imageNode) {
-  imageNode.data = {
-    ...imageNode.data,
-    hProperties: {
-      ...imageNode.data?.hProperties,
-      className: [IMAGE_ELEMENT_CLASS_NAME]
-    }
-  };
-}
-function createImageFrameNode(imageNode) {
-  return {
-    type: "imageFrame",
-    data: {
-      hName: "span",
-      hProperties: {
-        className: [IMAGE_FRAME_CLASS_NAME]
-      }
-    },
-    children: [imageNode, createImageFallbackNode(imageNode)]
-  };
-}
-function createImageCaptionNodes(imageNode) {
-  const imageTitle = typeof imageNode.title === "string" ? imageNode.title.trim() : "";
-  if (imageTitle.length === 0) {
-    return [];
-  }
-  return [
-    {
-      type: "imageCaption",
-      data: {
-        hName: "figcaption",
-        hProperties: {
-          className: [IMAGE_CAPTION_CLASS_NAME]
-        }
-      },
-      children: [{ type: "text", value: imageTitle }]
-    }
-  ];
-}
-function createImageFallbackNode(imageNode) {
-  const fallbackText = imageNode.alt?.trim() || "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25";
-  const fallbackSource = imageNode.url ?? imageNode.identifier ?? "";
-  return {
-    type: "imageFallback",
-    data: {
-      hName: "span",
-      hProperties: {
-        className: [IMAGE_FALLBACK_CLASS_NAME]
-      }
-    },
-    children: [
-      {
-        type: "imageFallbackIcon",
-        data: {
-          hName: "span",
-          hProperties: {
-            className: [IMAGE_FALLBACK_ICON_CLASS_NAME]
-          }
-        }
-      },
-      {
-        type: "imageFallbackText",
-        data: {
-          hName: "span",
-          hProperties: {
-            className: [IMAGE_FALLBACK_TEXT_CLASS_NAME]
-          }
-        },
-        children: [{ type: "text", value: fallbackText }]
-      },
-      {
-        type: "imageFallbackSource",
-        data: {
-          hName: "span",
-          hProperties: {
-            className: [IMAGE_FALLBACK_SOURCE_CLASS_NAME]
-          }
-        },
-        children: [{ type: "text", value: fallbackSource }]
-      }
-    ]
-  };
-}
-function isImageNode(node) {
-  return node.type === "image" || node.type === "imageReference";
-}
+
+// src/syntax/toc.ts
+import {
+  FRAME_CLASS_NAME as FRAME_CLASS_NAME4,
+  HEADING_MARK_CLASS_NAME as HEADING_MARK_CLASS_NAME2,
+  SCRIBDOWN_MARKDOWN_CLASS_NAME,
+  TOC_CLASS_NAME as TOC_CLASS_NAME3,
+  TOC_ITEM_BRANCH_CLASS_NAME,
+  TOC_ITEM_CLASS_PREFIX as TOC_ITEM_CLASS_PREFIX2,
+  TOC_ITEM_COLLAPSED_CLASS_NAME,
+  TOC_LINK_CLASS_NAME as TOC_LINK_CLASS_NAME2,
+  TOC_LIST_CLASS_NAME as TOC_LIST_CLASS_NAME2,
+  TOC_LIST_NESTED_CLASS_NAME as TOC_LIST_NESTED_CLASS_NAME2,
+  TOC_NAV_CLASS_NAME as TOC_NAV_CLASS_NAME2,
+  TOC_SUMMARY_CLASS_NAME as TOC_SUMMARY_CLASS_NAME2,
+  TOC_TOGGLE_CLASS_NAME as TOC_TOGGLE_CLASS_NAME2
+} from "@scribdown/shared";
+var TOC_MARKER_PATTERN = /^\s*\[toc]\s*$/i;
+var TOC_TOGGLE_ARIA_LABEL = "\u5C55\u5F00\u6216\u6298\u53E0\u5B50\u76EE\u5F55";
+var TOC_TOGGLE_HYDRATED_DATA_KEY = "scribdownTocToggleHydrated";
+var TOC_LINK_HYDRATED_DATA_KEY = "scribdownTocLinkHydrated";
+var TOC_ARIA_LABEL = "\u76EE\u5F55";
+var TOC_SUMMARY_TEXT = "\u76EE\u5F55";
+var EMPTY_HEADING_SLUG_PREFIX = "section";
 function remarkTableOfContents() {
   return (tree) => {
     const tocHeadings = collectTocHeadings(tree);
@@ -2256,7 +2609,7 @@ function collectTocHeadings(tree) {
         data: {
           hName: "span",
           hProperties: {
-            className: [HEADING_MARK_CLASS_NAME]
+            className: [HEADING_MARK_CLASS_NAME2]
           }
         },
         children: node.children ?? []
@@ -2271,16 +2624,6 @@ function collectTocHeadings(tree) {
   });
   return tocHeadings;
 }
-function visitMarkdownNode(node, visitor) {
-  visitor(node);
-  if (!node.children) {
-    return;
-  }
-  const childNodes = node.children;
-  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
-    visitMarkdownNode(childNodes[childIndex], visitor);
-  }
-}
 function replaceTocMarkers(node, tocHeadings) {
   if (!node.children) {
     return;
@@ -2312,7 +2655,7 @@ function createTocNode(tocHeadings, markerNode) {
       hName: "details",
       hProperties: {
         // 关键步骤：目录根 opt-in 手绘边框，再由 toc.css 叠加目录自身样式。
-        className: [TOC_CLASS_NAME, FRAME_CLASS_NAME]
+        className: [TOC_CLASS_NAME3, FRAME_CLASS_NAME4]
       }
     },
     children: [
@@ -2321,7 +2664,7 @@ function createTocNode(tocHeadings, markerNode) {
         data: {
           hName: "summary",
           hProperties: {
-            className: [TOC_SUMMARY_CLASS_NAME]
+            className: [TOC_SUMMARY_CLASS_NAME2]
           }
         },
         children: [
@@ -2337,7 +2680,7 @@ function createTocNode(tocHeadings, markerNode) {
           hName: "nav",
           hProperties: {
             ariaLabel: TOC_ARIA_LABEL,
-            className: [TOC_NAV_CLASS_NAME]
+            className: [TOC_NAV_CLASS_NAME2]
           }
         },
         children: [createTocListNode(tocTree, false)]
@@ -2367,7 +2710,7 @@ function createTocTree(tocHeadings) {
   return rootItems;
 }
 function createTocListNode(tocItems, isNested) {
-  const tocListClassNames = isNested ? [TOC_LIST_CLASS_NAME, TOC_LIST_NESTED_CLASS_NAME] : [TOC_LIST_CLASS_NAME];
+  const tocListClassNames = isNested ? [TOC_LIST_CLASS_NAME2, TOC_LIST_NESTED_CLASS_NAME2] : [TOC_LIST_CLASS_NAME2];
   return {
     type: "list",
     ordered: true,
@@ -2398,8 +2741,8 @@ function createTocListItem(tocItem) {
 }
 function createTocItemClassNames(depth, hasChildren) {
   return [
-    TOC_ITEM_CLASS_PREFIX,
-    `${TOC_ITEM_CLASS_PREFIX}--depth-${depth}`,
+    TOC_ITEM_CLASS_PREFIX2,
+    `${TOC_ITEM_CLASS_PREFIX2}--depth-${depth}`,
     ...hasChildren ? [TOC_ITEM_BRANCH_CLASS_NAME] : []
   ];
 }
@@ -2410,7 +2753,7 @@ function createTocToggleNode() {
       hName: "button",
       hProperties: {
         type: "button",
-        className: [TOC_TOGGLE_CLASS_NAME],
+        className: [TOC_TOGGLE_CLASS_NAME2],
         ariaExpanded: "true",
         ariaLabel: TOC_TOGGLE_ARIA_LABEL
       }
@@ -2418,22 +2761,49 @@ function createTocToggleNode() {
     children: []
   };
 }
-function createTocLinkNode(tocItem) {
-  return {
-    type: "link",
-    url: `#${tocItem.id}`,
-    data: {
-      hProperties: {
-        className: [TOC_LINK_CLASS_NAME]
-      }
-    },
-    children: [
-      {
-        type: "text",
-        value: tocItem.text
-      }
-    ]
-  };
+function createTocLinkNode(tocItem) {
+  return {
+    type: "link",
+    url: `#${tocItem.id}`,
+    data: {
+      hProperties: {
+        className: [TOC_LINK_CLASS_NAME2]
+      }
+    },
+    children: [
+      {
+        type: "text",
+        value: tocItem.text
+      }
+    ]
+  };
+}
+function createUniqueSlug(headingText, slugCounts, fallbackIndex) {
+  const normalizedSlug = normalizeSlugText(headingText);
+  const fallbackSlug = `${EMPTY_HEADING_SLUG_PREFIX}-${fallbackIndex}`;
+  const baseSlug = normalizedSlug || fallbackSlug;
+  const usedCount = slugCounts.get(baseSlug) ?? 0;
+  slugCounts.set(baseSlug, usedCount + 1);
+  if (usedCount === 0) {
+    return baseSlug;
+  }
+  return `${baseSlug}-${usedCount}`;
+}
+function createHeadingIndex(headingDepth, headingIndexCounts, rootHeadingDepth) {
+  const startDepth = Math.min(rootHeadingDepth, headingDepth);
+  headingIndexCounts[headingDepth] += 1;
+  for (let depthIndex = headingDepth + 1; depthIndex < headingIndexCounts.length; depthIndex += 1) {
+    headingIndexCounts[depthIndex] = 0;
+  }
+  for (let depthIndex = startDepth; depthIndex < headingDepth; depthIndex += 1) {
+    if (headingIndexCounts[depthIndex] === 0) {
+      headingIndexCounts[depthIndex] = 1;
+    }
+  }
+  return headingIndexCounts.slice(startDepth, headingDepth + 1).join(".");
+}
+function normalizeSlugText(headingText) {
+  return headingText.trim().toLowerCase().replace(/<[^>]+>/g, "").replace(/[^\p{L}\p{N}\s_-]+/gu, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 }
 function collectTocHeadingsFromDom(rootElement) {
   const markdownContainer = rootElement instanceof Element && rootElement.matches(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME}`) ? rootElement : rootElement.querySelector(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME}`);
@@ -2473,13 +2843,13 @@ function collectTocHeadingsFromDom(rootElement) {
 function createTocNavElement(ownerDocument, tocTreeItems) {
   const navElement = ownerDocument.createElement("nav");
   navElement.setAttribute("aria-label", TOC_ARIA_LABEL);
-  navElement.className = TOC_NAV_CLASS_NAME;
+  navElement.className = TOC_NAV_CLASS_NAME2;
   navElement.appendChild(createTocListElement(ownerDocument, tocTreeItems, false));
   return navElement;
 }
 function createTocListElement(ownerDocument, tocItems, isNested) {
   const listElement = ownerDocument.createElement("ol");
-  listElement.className = isNested ? `${TOC_LIST_CLASS_NAME} ${TOC_LIST_NESTED_CLASS_NAME}` : TOC_LIST_CLASS_NAME;
+  listElement.className = isNested ? `${TOC_LIST_CLASS_NAME2} ${TOC_LIST_NESTED_CLASS_NAME2}` : TOC_LIST_CLASS_NAME2;
   for (const tocItem of tocItems) {
     listElement.appendChild(createTocListItemElement(ownerDocument, tocItem));
   }
@@ -2493,13 +2863,13 @@ function createTocListItemElement(ownerDocument, tocItem) {
   if (hasChildren) {
     const toggleElement = ownerDocument.createElement("button");
     toggleElement.type = "button";
-    toggleElement.className = TOC_TOGGLE_CLASS_NAME;
+    toggleElement.className = TOC_TOGGLE_CLASS_NAME2;
     toggleElement.setAttribute("aria-expanded", "true");
     toggleElement.setAttribute("aria-label", TOC_TOGGLE_ARIA_LABEL);
     itemElement.appendChild(toggleElement);
   }
   const linkElement = ownerDocument.createElement("a");
-  linkElement.className = TOC_LINK_CLASS_NAME;
+  linkElement.className = TOC_LINK_CLASS_NAME2;
   linkElement.href = `#${tocItem.id}`;
   linkElement.textContent = tocItem.text;
   itemElement.appendChild(linkElement);
@@ -2510,7 +2880,7 @@ function createTocListItemElement(ownerDocument, tocItem) {
 }
 function hydrateToc(rootElement, scrollToHeading) {
   const toggleElements = rootElement.querySelectorAll(
-    `button.${TOC_TOGGLE_CLASS_NAME}`
+    `button.${TOC_TOGGLE_CLASS_NAME2}`
   );
   toggleElements.forEach((toggleElement) => {
     if (toggleElement.dataset[TOC_TOGGLE_HYDRATED_DATA_KEY] === "true") {
@@ -2518,7 +2888,7 @@ function hydrateToc(rootElement, scrollToHeading) {
     }
     toggleElement.dataset[TOC_TOGGLE_HYDRATED_DATA_KEY] = "true";
     toggleElement.addEventListener("click", () => {
-      const itemElement = toggleElement.closest(`.${TOC_ITEM_CLASS_PREFIX}`);
+      const itemElement = toggleElement.closest(`.${TOC_ITEM_CLASS_PREFIX2}`);
       if (!itemElement) {
         return;
       }
@@ -2528,7 +2898,7 @@ function hydrateToc(rootElement, scrollToHeading) {
     });
   });
   const linkElements = rootElement.querySelectorAll(
-    `a.${TOC_LINK_CLASS_NAME}`
+    `a.${TOC_LINK_CLASS_NAME2}`
   );
   linkElements.forEach((linkElement) => {
     if (linkElement.dataset[TOC_LINK_HYDRATED_DATA_KEY] === "true") {
@@ -2556,192 +2926,37 @@ function hydrateToc(rootElement, scrollToHeading) {
     });
   });
 }
-function extractNodeText(node) {
-  if (node.type === "text" || node.type === "inlineCode") {
-    return node.value ?? "";
-  }
-  if (isImageNode(node)) {
-    return node.alt ?? "";
-  }
-  if (!node.children) {
-    return "";
-  }
-  return node.children.map(extractNodeText).join("");
-}
-function createUniqueSlug(headingText, slugCounts, fallbackIndex) {
-  const normalizedSlug = normalizeSlugText(headingText);
-  const fallbackSlug = `${EMPTY_HEADING_SLUG_PREFIX}-${fallbackIndex}`;
-  const baseSlug = normalizedSlug || fallbackSlug;
-  const usedCount = slugCounts.get(baseSlug) ?? 0;
-  slugCounts.set(baseSlug, usedCount + 1);
-  if (usedCount === 0) {
-    return baseSlug;
-  }
-  return `${baseSlug}-${usedCount}`;
-}
-function createHeadingIndex(headingDepth, headingIndexCounts, rootHeadingDepth) {
-  const startDepth = Math.min(rootHeadingDepth, headingDepth);
-  headingIndexCounts[headingDepth] += 1;
-  for (let depthIndex = headingDepth + 1; depthIndex < headingIndexCounts.length; depthIndex += 1) {
-    headingIndexCounts[depthIndex] = 0;
-  }
-  for (let depthIndex = startDepth; depthIndex < headingDepth; depthIndex += 1) {
-    if (headingIndexCounts[depthIndex] === 0) {
-      headingIndexCounts[depthIndex] = 1;
-    }
-  }
-  return headingIndexCounts.slice(startDepth, headingDepth + 1).join(".");
-}
-function normalizeSlugText(headingText) {
-  return headingText.trim().toLowerCase().replace(/<[^>]+>/g, "").replace(/[^\p{L}\p{N}\s_-]+/gu, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-}
-function rehypeFrameClass() {
-  return (tree) => {
-    tagContentDetails(tree);
-  };
-}
-function tagContentDetails(node) {
-  if (node.type === "element" && node.tagName === "details") {
-    const classNames = normalizeClassNames(node.properties?.className);
-    const isTocDetails = classNames.includes(TOC_CLASS_NAME);
-    if (!isTocDetails) {
-      addClassNames(node, [DETAILS_CLASS_NAME, FRAME_CLASS_NAME]);
-    }
-  }
-  if (Array.isArray(node.children)) {
-    for (const childNode of node.children) {
-      tagContentDetails(childNode);
-    }
-  }
-}
-function normalizeClassNames(className) {
-  if (Array.isArray(className)) {
-    return className.filter((item) => typeof item === "string");
-  }
-  if (typeof className === "string") {
-    return className.split(/\s+/u).filter(Boolean);
-  }
-  return [];
-}
-function addClassNames(node, classNamesToAdd) {
-  const mergedClassNames = normalizeClassNames(node.properties?.className);
-  for (const classNameToAdd of classNamesToAdd) {
-    if (!mergedClassNames.includes(classNameToAdd)) {
-      mergedClassNames.push(classNameToAdd);
-    }
-  }
-  node.properties = { ...node.properties, className: mergedClassNames };
-}
-function rehypeVideoFigures() {
-  return (tree) => {
-    transformVideoFigures(tree);
-  };
-}
-function transformVideoFigures(node) {
-  if (!Array.isArray(node.children)) {
-    return;
-  }
-  const childNodes = node.children;
-  for (let childIndex = 0; childIndex < childNodes.length; childIndex += 1) {
-    const childNode = childNodes[childIndex];
-    if (isHastVideoElement(childNode)) {
-      childNodes[childIndex] = createVideoFigureHast(childNode);
-      continue;
-    }
-    const standaloneVideo = extractStandaloneParagraphVideo(childNode);
-    if (standaloneVideo) {
-      childNodes[childIndex] = createVideoFigureHast(standaloneVideo);
-      continue;
-    }
-    transformVideoFigures(childNode);
-  }
-}
-function isHastVideoElement(node) {
-  return node.type === "element" && node.tagName === "video";
-}
-function extractStandaloneParagraphVideo(node) {
-  if (node.type !== "element" || node.tagName !== "p" || !Array.isArray(node.children)) {
-    return void 0;
-  }
-  const significantChildren = node.children.filter((childNode) => {
-    if (childNode.type === "text" && typeof childNode.value === "string") {
-      return childNode.value.trim().length > 0;
-    }
-    return true;
-  });
-  if (significantChildren.length === 1 && isHastVideoElement(significantChildren[0])) {
-    return significantChildren[0];
-  }
-  return void 0;
-}
-function createVideoFigureHast(videoNode) {
-  decorateHastVideoElement(videoNode);
-  const sourceUrl = readHastVideoSourceUrl(videoNode);
-  return {
-    type: "element",
-    tagName: "figure",
-    properties: { className: [VIDEO_FIGURE_CLASS_NAME] },
-    children: [
-      {
-        type: "element",
-        tagName: "span",
-        properties: { className: [VIDEO_FRAME_CLASS_NAME] },
-        children: [videoNode, createVideoFallbackHast(sourceUrl)]
-      }
-    ]
-  };
-}
-function decorateHastVideoElement(videoNode) {
-  const properties = videoNode.properties ?? {};
-  const existingClassName = properties.className;
-  const classList = Array.isArray(existingClassName) ? existingClassName.map(String) : typeof existingClassName === "string" ? [existingClassName] : [];
-  if (!classList.includes(VIDEO_ELEMENT_CLASS_NAME)) {
-    classList.push(VIDEO_ELEMENT_CLASS_NAME);
-  }
-  properties.className = classList;
-  videoNode.properties = properties;
-}
-function readHastVideoSourceUrl(videoNode) {
-  const properties = videoNode.properties ?? {};
-  if (typeof properties.src === "string") {
-    return properties.src;
-  }
-  if (Array.isArray(videoNode.children)) {
-    for (const childNode of videoNode.children) {
-      if (childNode.type === "element" && childNode.tagName === "source" && typeof childNode.properties?.src === "string") {
-        return childNode.properties.src;
-      }
-    }
-  }
-  return "";
-}
-function createVideoFallbackHast(sourceUrl) {
-  return {
-    type: "element",
-    tagName: "span",
-    properties: { className: [VIDEO_FALLBACK_CLASS_NAME] },
-    children: [
-      {
-        type: "element",
-        tagName: "span",
-        properties: { className: [VIDEO_FALLBACK_ICON_CLASS_NAME] },
-        children: []
-      },
-      {
-        type: "element",
-        tagName: "span",
-        properties: { className: [VIDEO_FALLBACK_TEXT_CLASS_NAME] },
-        children: [{ type: "text", value: VIDEO_FALLBACK_DEFAULT_TEXT }]
-      },
-      {
-        type: "element",
-        tagName: "span",
-        properties: { className: [VIDEO_FALLBACK_SOURCE_CLASS_NAME] },
-        children: [{ type: "text", value: sourceUrl }]
-      }
-    ]
-  };
-}
+
+// src/toolbar.ts
+import {
+  CONTENT_WIDTH_STORAGE_KEY,
+  PROJECT_HOMEPAGE_URL,
+  SCRIBDOWN_CONTENT_AREA_CLASS_NAME,
+  SCRIBDOWN_CONTENT_SCROLL_CLASS_NAME,
+  SCRIBDOWN_MARKDOWN_CLASS_NAME as SCRIBDOWN_MARKDOWN_CLASS_NAME2,
+  SCRIBDOWN_THIN_SCROLLBAR_CLASS_NAME,
+  SCRIBDOWN_TOC_HOST_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_BTN_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_CURRENT_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_CURRENT_TEXT_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_GROUP_CHOICES_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_GROUP_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_ITEM_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SELECT_CHEVRON_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SELECT_LABEL_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SELECT_VALUE_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_LABEL_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_MARK_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_TOC_PANEL_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_TOC_PANEL_CLOSE_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_TOC_PANEL_EMPTY_CLASS_NAME,
+  SCRIBDOWN_TOOLBAR_TOC_PANEL_TITLE_CLASS_NAME,
+  TOC_LINK_ACTIVE_CLASS_NAME,
+  TOC_LINK_CLASS_NAME as TOC_LINK_CLASS_NAME3
+} from "@scribdown/shared";
 var TOOLBAR_WIDTH_PRESETS = [
   { label: "680", value: "680px" },
   { label: "840", value: "840px" },
@@ -2778,10 +2993,11 @@ var TOOLBAR_MORE_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 18 18" fil
 var TOOLBAR_BACK_TOP_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M9 14V5M9 5L5 9M9 5l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><line x1="4" y1="3.5" x2="14" y2="3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
 var TOOLBAR_WIDTH_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 6v6M15 6v6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M5.5 9H3l2.5-2.5M3 9l2.5 2.5M12.5 9H15l-2.5-2.5M15 9l-2.5 2.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 var TOOLBAR_ABOUT_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.6"/><path d="M9 8v4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="9" cy="5.6" r="0.9" fill="currentColor"/></svg>';
-var pageToolbarScrollspyTeardowns = /* @__PURE__ */ new WeakMap();
+var pageToolbarTeardowns = /* @__PURE__ */ new WeakMap();
 function mountPageToolbar(ownerDocument, container, scrollToHeading) {
-  pageToolbarScrollspyTeardowns.get(container)?.();
-  pageToolbarScrollspyTeardowns.delete(container);
+  pageToolbarTeardowns.get(container)?.();
+  pageToolbarTeardowns.delete(container);
+  const teardownCallbacks = [];
   container.querySelector(`:scope > .${SCRIBDOWN_TOOLBAR_CLASS_NAME}`)?.remove();
   container.querySelector(`:scope > .${SCRIBDOWN_TOOLBAR_TOC_PANEL_CLASS_NAME}`)?.remove();
   container.classList.add(SCRIBDOWN_TOC_HOST_CLASS_NAME);
@@ -2815,13 +3031,13 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
   const tocPanel = ownerDocument.createElement("div");
   tocPanel.className = `${SCRIBDOWN_TOOLBAR_TOC_PANEL_CLASS_NAME} ${SCRIBDOWN_THIN_SCROLLBAR_CLASS_NAME}`;
   const tocTitle = ownerDocument.createElement("div");
-  tocTitle.className = "scribdown-toolbar-toc-panel-title";
+  tocTitle.className = SCRIBDOWN_TOOLBAR_TOC_PANEL_TITLE_CLASS_NAME;
   const tocTitleText = ownerDocument.createElement("span");
   tocTitleText.textContent = "\u76EE\u5F55";
   tocTitle.appendChild(tocTitleText);
   const tocCloseBtn = ownerDocument.createElement("button");
   tocCloseBtn.type = "button";
-  tocCloseBtn.className = "scribdown-toolbar-toc-panel-close";
+  tocCloseBtn.className = SCRIBDOWN_TOOLBAR_TOC_PANEL_CLOSE_CLASS_NAME;
   tocCloseBtn.setAttribute("aria-label", "\u5173\u95ED\u76EE\u5F55");
   tocCloseBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
   const setTocOpen = (open) => {
@@ -2836,7 +3052,7 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
   const tocHeadings = collectTocHeadingsFromDom(container);
   if (tocHeadings.length === 0) {
     const emptyElement = ownerDocument.createElement("p");
-    emptyElement.className = "scribdown-toolbar-toc-panel-empty";
+    emptyElement.className = SCRIBDOWN_TOOLBAR_TOC_PANEL_EMPTY_CLASS_NAME;
     emptyElement.textContent = "\u6682\u65E0\u6807\u9898";
     tocPanel.appendChild(emptyElement);
   } else {
@@ -2866,17 +3082,17 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
   widthTrigger.setAttribute("aria-haspopup", "listbox");
   widthTrigger.setAttribute("aria-expanded", "false");
   const widthValueElement = ownerDocument.createElement("span");
-  widthValueElement.className = "scribdown-toolbar-menu-select-value";
+  widthValueElement.className = SCRIBDOWN_TOOLBAR_MENU_SELECT_VALUE_CLASS_NAME;
   widthValueElement.textContent = TOOLBAR_WIDTH_PRESETS[widthIndex].label;
-  widthTrigger.innerHTML = `${TOOLBAR_WIDTH_ICON_SVG}<span class="scribdown-toolbar-menu-select-label">\u9875\u9762\u5BBD\u5EA6</span>`;
+  widthTrigger.innerHTML = `${TOOLBAR_WIDTH_ICON_SVG}<span class="${SCRIBDOWN_TOOLBAR_MENU_SELECT_LABEL_CLASS_NAME}">\u9875\u9762\u5BBD\u5EA6</span>`;
   widthTrigger.appendChild(widthValueElement);
   widthTrigger.insertAdjacentHTML(
     "beforeend",
-    '<svg class="scribdown-toolbar-menu-select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+    `<svg class="${SCRIBDOWN_TOOLBAR_MENU_SELECT_CHEVRON_CLASS_NAME}" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`
   );
   widthGroup.appendChild(widthTrigger);
   const widthChoices = ownerDocument.createElement("div");
-  widthChoices.className = "scribdown-toolbar-menu-group-choices";
+  widthChoices.className = SCRIBDOWN_TOOLBAR_MENU_GROUP_CHOICES_CLASS_NAME;
   widthChoices.setAttribute("role", "listbox");
   const widthSubItems = [];
   TOOLBAR_WIDTH_PRESETS.forEach((preset, idx) => {
@@ -2885,7 +3101,7 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
     subItem.className = SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_CLASS_NAME;
     subItem.setAttribute("role", "option");
     subItem.setAttribute("aria-selected", String(idx === widthIndex));
-    subItem.innerHTML = `<span class="scribdown-toolbar-menu-sub-item-mark" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="scribdown-toolbar-menu-sub-item-label">${preset.label}</span>`;
+    subItem.innerHTML = `<span class="${SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_MARK_CLASS_NAME}" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="${SCRIBDOWN_TOOLBAR_MENU_SUB_ITEM_LABEL_CLASS_NAME}">${preset.label}</span>`;
     subItem.addEventListener("click", () => {
       widthIndex = idx;
       applyContentWidth(ownerDocument, preset.value);
@@ -2948,13 +3164,17 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
     const opened = menu.classList.toggle("is-open");
     moreBtn.setAttribute("aria-expanded", String(opened));
   });
-  ownerDocument.addEventListener("click", (e) => {
+  const handleDocumentClick = (e) => {
     const target = e.target;
     if (!menu.contains(target) && target !== moreBtn) {
       closeMoreMenu();
     }
+  };
+  ownerDocument.addEventListener("click", handleDocumentClick);
+  teardownCallbacks.push(() => {
+    ownerDocument.removeEventListener("click", handleDocumentClick);
   });
-  const markdownContainer = container.matches(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME}`) ? container : container.querySelector(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME}`);
+  const markdownContainer = container.matches(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME2}`) ? container : container.querySelector(`.${SCRIBDOWN_MARKDOWN_CLASS_NAME2}`);
   const headingElements = markdownContainer ? Array.from(
     markdownContainer.querySelectorAll(
       "h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]"
@@ -2967,12 +3187,12 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
     currentHeading.setAttribute("role", "button");
     currentHeading.tabIndex = 0;
     const currentHeadingText = ownerDocument.createElement("span");
-    currentHeadingText.className = "scribdown-toolbar-current-text";
+    currentHeadingText.className = SCRIBDOWN_TOOLBAR_CURRENT_TEXT_CLASS_NAME;
     currentHeading.appendChild(currentHeadingText);
     let lastHeadingText = "";
     let activeHeadingElement = headingElements[0];
     const tocLinkByHeading = /* @__PURE__ */ new Map();
-    tocPanel.querySelectorAll(`a.${TOC_LINK_CLASS_NAME}`).forEach((linkElement) => {
+    tocPanel.querySelectorAll(`a.${TOC_LINK_CLASS_NAME3}`).forEach((linkElement) => {
       const rawTargetId = (linkElement.getAttribute("href") ?? "").slice(1);
       if (!rawTargetId) {
         return;
@@ -3050,7 +3270,7 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
     });
     ownerWindow?.addEventListener("resize", onScrollOrResize, { passive: true });
     updateCurrentHeading();
-    pageToolbarScrollspyTeardowns.set(container, () => {
+    teardownCallbacks.push(() => {
       if (scrollRafId) {
         ownerWindow?.cancelAnimationFrame(scrollRafId);
       }
@@ -3064,6 +3284,40 @@ function mountPageToolbar(ownerDocument, container, scrollToHeading) {
   toolbar.appendChild(menu);
   container.appendChild(toolbar);
   container.insertBefore(tocPanel, contentArea);
+  pageToolbarTeardowns.set(container, () => {
+    teardownCallbacks.forEach((teardownCallback) => {
+      teardownCallback();
+    });
+  });
+}
+
+// src/index.ts
+async function renderMarkdown(markdownText) {
+  const processor = unified().use(remarkParse).use(remarkGfm).use(remarkFrontmatter).use(remarkFrontmatterMetadata).use(remarkHighlightMark).use(remarkDefinitionLists).use(remarkTableOfContents).use(remarkImageFigures).use(remarkSourceLine).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(rehypeFrameClass).use(rehypeVideoFigures).use(rehypeSanitize, createScribdownSanitizeSchema()).use(rehypeStringify);
+  const renderedHtml = String(await processor.process(markdownText));
+  const sanitizedHtml = sanitizeHtmlWithDomPurify(renderedHtml);
+  return highlightMarkdownCodeBlocks(sanitizedHtml);
+}
+function defaultScrollToHeading(targetElement) {
+  targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+function hydrateMarkdown(rootElement, options = {}) {
+  hydrateMarkdownImages(rootElement);
+  hydrateMarkdownVideos(rootElement);
+  hydrateMermaidBlocks(rootElement);
+  hydrateCodeBlocks(rootElement);
+  hydrateToc(rootElement, options.scrollToHeading ?? defaultScrollToHeading);
+}
+function mountMarkdownToolbar(container, options = {}) {
+  const ownerDocument = container.ownerDocument;
+  if (!ownerDocument) {
+    return;
+  }
+  if (typeof ownerDocument.defaultView?.scrollTo !== "function") {
+    return;
+  }
+  applyContentWidth(ownerDocument, loadContentWidth());
+  mountPageToolbar(ownerDocument, container, options.scrollToHeading ?? defaultScrollToHeading);
 }
 export {
   hydrateMarkdown,