@barzhsieh/nuxt-content-mermaid 3.0.3 → 3.0.5

package/dist/module.d.mts

@@ -102,6 +102,7 @@ interface RuntimeOptions {
         /**
          * Whether to lazy load the diagram when it enters the viewport.
          * Can be a boolean or an object with IntersectionObserver options.
+         * The threshold must be between 0 and 1, inclusive.
          * @default true
          */
         lazy?: boolean | {

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.1.0"
   },
-  "version": "3.0.3",
+  "version": "3.0.5",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -94,7 +94,9 @@ function extractInlineAttrsBlock(info) {
   for (let i = startIndex; i < info.length; i++) {
     const char = info[i];
     if (quote) {
-      if (char === quote && info[i - 1] !== "\\")
+      if (char === "\\")
+        i += 1;
+      else if (char === quote)
         quote = null;
       continue;
     }
@@ -126,7 +128,7 @@ function parseInlineAttrsBlock(raw) {
       index += 1;
     const key = raw.slice(keyStart, index).trim();
     if (!key)
-      break;
+      return null;
     index = skipWhitespace(raw, index);
     let value = true;
     if (index < raw.length && (raw[index] === "=" || raw[index] === ":")) {
@@ -206,7 +208,9 @@ function readBalancedValue(input, start) {
   for (let i = start; i < input.length; i++) {
     const char = input[i];
     if (quote) {
-      if (char === quote && input[i - 1] !== "\\")
+      if (char === "\\")
+        i += 1;
+      else if (char === quote)
         quote = null;
       continue;
     }
@@ -434,7 +438,7 @@ function resolveMarkdownToolbar(layers) {
 }
 
 const MERMAID_COMPONENT_NAME = "ContentMermaidTransport";
-const PAGE_MERMAID_CONFIG_EXPRESSION = "config";
+const PAGE_RENDER_DATA_EXPRESSION = "runtimeData";
 function serializeInlineAttributeRecord(value) {
   return JSON.stringify(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;");
 }
@@ -484,7 +488,7 @@ function transformMarkdownDiagrams(body) {
   };
   const buildComponentTag = (encoded, toolbar) => {
     const attrs = [
-      `:page-config="${PAGE_MERMAID_CONFIG_EXPRESSION}"`
+      `:page-data="${PAGE_RENDER_DATA_EXPRESSION}"`
     ];
     if (toolbar && isNonEmptyRecord(toolbar)) {
       attrs.push(`:toolbar='${serializeInlineAttributeRecord(toolbar)}'`);

package/dist/runtime/built-in-renderer/BuiltInRenderer.vue

@@ -15,6 +15,7 @@ import { defu } from "defu";
 import { materializeMermaidConfigForInvocation, resolveMermaidTheme } from "../mermaid-config";
 import { createMermaidRenderer } from "../mermaid-rendering";
 import { getRuntimeMermaidSnapshot } from "../runtime-snapshot";
+import { createPngRasterizerLoader } from "../png-rasterizer-loader";
 import {
   createSafeStandaloneSvgClone,
   downloadBlob,
@@ -34,10 +35,7 @@ import IconCollapse from "../components/icons/IconCollapse.vue";
 import IconDownload from "../components/icons/IconDownload.vue";
 import MermaidFullscreenPresentation from "../components/MermaidFullscreenPresentation.vue";
 import { DEFAULT_TOOLBAR_LABELS } from "../constants";
-let pngRasterizerModulePromise;
-function loadPngRasterizer() {
-  return pngRasterizerModulePromise ??= import("../png-rasterizer");
-}
+const loadPngRasterizer = createPngRasterizerLoader(() => import("../png-rasterizer"));
 const props = defineProps({
   toolbar: { type: Object, required: false },
   code: { type: String, required: false },
@@ -98,7 +96,8 @@ const hasError = ref(false);
 const errorContent = shallowRef(null);
 const committedExportSnapshot = shallowRef(null);
 const isCommittedOutputSvg = ref(false);
-const downloadDisclosureId = `ncm-download-${useId()}`;
+const generatedDownloadDisclosureId = `ncm-download-${useId()}`;
+const downloadDisclosureId = ref();
 const isDownloadDisclosureOpen = ref(false);
 const isPngDownloadPending = ref(false);
 const decodedCode = computed(() => props.code ? decodeURIComponent(props.code) : "");
@@ -529,6 +528,7 @@ async function copyToClipboard(text) {
   return copied;
 }
 onMounted(() => {
+  downloadDisclosureId.value = generatedDownloadDisclosureId;
   if (!isEnabled) return;
   document.addEventListener("pointerdown", handleDocumentPointerDown);
   if (!mermaidDefinition.value && mermaidContainer.value)
@@ -619,7 +619,7 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
             <IconDownload :size="iconSize" />
           </button>
           <div
-            v-if="isDownloadDisclosureOpen"
+            v-show="isDownloadDisclosureOpen"
             :id="downloadDisclosureId"
             ref="downloadDisclosure"
             class="ncm-download-disclosure"

package/dist/runtime/components/ContentMermaidTransport.d.vue.ts

@@ -1,7 +1,9 @@
 import type { PageMermaidConfig } from '../../types/config.js';
 import type { MermaidToolbarOptions } from '../../types/mermaid.js';
 type __VLS_Props = {
-    pageConfig?: PageMermaidConfig | null;
+    pageData?: {
+        config?: PageMermaidConfig | null;
+    };
     toolbar?: MermaidToolbarOptions;
     code?: string;
 };

package/dist/runtime/components/ContentMermaidTransport.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { computed, resolveComponent } from "vue";
 const props = defineProps({
-  pageConfig: { type: [Object, null], required: false },
+  pageData: { type: Object, required: false },
   toolbar: { type: Object, required: false },
   code: { type: String, required: false }
 });
-const normalizedPageConfig = computed(
-  () => props.pageConfig === null ? void 0 : props.pageConfig
-);
+const normalizedPageConfig = computed(() => {
+  const config = props.pageData?.config;
+  return config === null ? void 0 : config;
+});
 const MermaidComponent = resolveComponent("Mermaid");
 </script>
 

package/dist/runtime/components/ContentMermaidTransport.vue.d.ts

@@ -1,7 +1,9 @@
 import type { PageMermaidConfig } from '../../types/config.js';
 import type { MermaidToolbarOptions } from '../../types/mermaid.js';
 type __VLS_Props = {
-    pageConfig?: PageMermaidConfig | null;
+    pageData?: {
+        config?: PageMermaidConfig | null;
+    };
     toolbar?: MermaidToolbarOptions;
     code?: string;
 };

package/dist/runtime/configuration/module.js

@@ -106,6 +106,10 @@ export function validateRuntimeOptions(value, phase) {
         assertPlainObject(lazy, phase);
         assertKnownKeys(lazy, /* @__PURE__ */ new Set(["threshold"]), phase, ["loader", "lazy"]);
         assertNumberProperty(lazy, "threshold", phase, ["loader", "lazy"]);
+        const threshold = descriptorValue(lazy, "threshold");
+        if (typeof threshold === "number" && (threshold < 0 || threshold > 1)) {
+          throwConfigurationIssue(phase, ["loader", "lazy", "threshold"], "INVALID_VALUE", "a number between 0 and 1", "out-of-range-number");
+        }
       }
     }
   }

package/dist/runtime/direct-mermaid-config.js

@@ -37,7 +37,7 @@ function validateDirectValue(value, path, ancestors) {
   if (isFunctionCapability(value, path) || isOpaqueObjectCapability(value, path))
     return;
   if (typeof value === "function")
-    invalidDirectConfig(path, "a supported capability at its exact Mermaid 11.16.1 or DOMPurify 3.4.13 path");
+    invalidDirectConfig(path, "a supported capability at its exact Mermaid 11.17.0 or DOMPurify 3.4.13 path");
   if (typeof value === "symbol" || typeof value === "bigint")
     invalidDirectConfig(path, "structural data");
   if (value === null || typeof value !== "object") return;

package/dist/runtime/png-font-embedding.d.ts

@@ -0,0 +1,7 @@
+import { getFontEmbedCSS } from 'html-to-image';
+type FontEmbeddingOptions = NonNullable<Parameters<typeof getFontEmbedCSS>[1]>;
+/** @internal */
+export declare function supportsScopedPngFontEmbedding(document: Document): boolean;
+/** @internal */
+export declare function getScopedPngFontEmbedCSS(captureNode: HTMLElement, options: FontEmbeddingOptions): Promise<string>;
+export {};

package/dist/runtime/png-font-embedding.js

@@ -0,0 +1,305 @@
+import { getFontEmbedCSS } from "html-to-image";
+const ERROR_PREFIX = "[nuxt-content-mermaid]";
+const CSS_IMPORT_RULE = 3;
+const CSS_FONT_FACE_RULE = 5;
+function normalizeFontFamily(value) {
+  const trimmed = value.trim();
+  const quote = trimmed[0];
+  const unquoted = (quote === '"' || quote === "'") && trimmed.at(-1) === quote ? trimmed.slice(1, -1) : trimmed;
+  return unquoted.replace(/\\([\\'" ])/g, "$1").toLocaleLowerCase();
+}
+function splitFontFamilies(value) {
+  const families = [];
+  let current = "";
+  let quote = "";
+  let escaped = false;
+  for (const character of value) {
+    if (escaped) {
+      current += character;
+      escaped = false;
+      continue;
+    }
+    if (character === "\\") {
+      current += character;
+      escaped = true;
+      continue;
+    }
+    if (quote) {
+      current += character;
+      if (character === quote) quote = "";
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      current += character;
+      quote = character;
+      continue;
+    }
+    if (character === ",") {
+      families.push(normalizeFontFamily(current));
+      current = "";
+      continue;
+    }
+    current += character;
+  }
+  families.push(normalizeFontFamily(current));
+  return families.filter(Boolean);
+}
+function directTextContent(element) {
+  return Array.from(element.childNodes).filter((node) => node.nodeType === 3).map((node) => node.textContent ?? "").join("");
+}
+function collectFontUsages(captureNode) {
+  const view = captureNode.ownerDocument.defaultView;
+  if (!view) return [];
+  const elements = [captureNode, ...Array.from(captureNode.querySelectorAll("*"))];
+  return elements.flatMap((element) => {
+    const text = directTextContent(element);
+    if (!text.trim()) return [];
+    const style = view.getComputedStyle(element);
+    const families = splitFontFamilies(style.fontFamily);
+    if (families.length === 0) return [];
+    return [{
+      families,
+      style: style.fontStyle || "normal",
+      weight: style.fontWeight || "400",
+      stretch: style.fontStretch || "normal",
+      text
+    }];
+  });
+}
+function normalizeFontStyle(value) {
+  return value.trim().toLocaleLowerCase().split(/\s+/)[0] || "normal";
+}
+function parseWeight(value) {
+  const normalized = value.trim().toLocaleLowerCase();
+  if (normalized === "normal") return 400;
+  if (normalized === "bold") return 700;
+  const parsed = Number.parseFloat(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+const stretchKeywords = {
+  "ultra-condensed": 50,
+  "extra-condensed": 62.5,
+  "condensed": 75,
+  "semi-condensed": 87.5,
+  "normal": 100,
+  "semi-expanded": 112.5,
+  "expanded": 125,
+  "extra-expanded": 150,
+  "ultra-expanded": 200
+};
+function parseStretch(value) {
+  const normalized = value.trim().toLocaleLowerCase();
+  if (stretchKeywords[normalized] !== void 0) return stretchKeywords[normalized];
+  const parsed = Number.parseFloat(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function descriptorBounds(value, parser, fallback) {
+  const parts = (value.trim() || fallback).split(/\s+/);
+  const first = parser(parts[0]);
+  const last = parser(parts[1] ?? parts[0]);
+  return first === null || last === null ? null : [Math.min(first, last), Math.max(first, last)];
+}
+function numericDescriptorContains(descriptor, actual, parser, fallback) {
+  const bounds = descriptorBounds(descriptor, parser, fallback);
+  const value = parser(actual);
+  return bounds === null || value === null ? (descriptor.trim() || fallback).toLocaleLowerCase() === actual.trim().toLocaleLowerCase() : value >= bounds[0] && value <= bounds[1];
+}
+function numericDescriptorsEqual(left, right, parser, fallback) {
+  const leftBounds = descriptorBounds(left, parser, fallback);
+  const rightBounds = descriptorBounds(right, parser, fallback);
+  if (!leftBounds || !rightBounds)
+    return (left.trim() || fallback).toLocaleLowerCase() === (right.trim() || fallback).toLocaleLowerCase();
+  return leftBounds[0] === rightBounds[0] && leftBounds[1] === rightBounds[1];
+}
+function parseUnicodeRanges(value) {
+  const source = value.trim() || "U+0-10FFFF";
+  const ranges = [];
+  for (const rawPart of source.split(",")) {
+    const part = rawPart.trim().toLocaleUpperCase();
+    const match = /^U\+([0-9A-F?]+)(?:-([0-9A-F]+))?$/.exec(part);
+    if (!match) return null;
+    const startToken = match[1];
+    const endToken = match[2];
+    const start = Number.parseInt(startToken.replaceAll("?", "0"), 16);
+    const end = Number.parseInt(
+      endToken ?? startToken.replaceAll("?", "F"),
+      16
+    );
+    if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
+    ranges.push([start, end]);
+  }
+  return ranges;
+}
+function unicodeRangeKey(value) {
+  const ranges = parseUnicodeRanges(value);
+  return ranges ? ranges.map(([start, end]) => `${start.toString(16)}-${end.toString(16)}`).join(",") : value.replace(/\s+/g, "").toLocaleLowerCase();
+}
+function unicodeRangeContainsText(value, text) {
+  const ranges = parseUnicodeRanges(value);
+  if (!ranges) return true;
+  return Array.from(text).some((character) => {
+    const codePoint = character.codePointAt(0);
+    return ranges.some(([start, end]) => codePoint >= start && codePoint <= end);
+  });
+}
+function fontFaceMatchesUsage(face, usage) {
+  return usage.families.includes(normalizeFontFamily(face.family)) && normalizeFontStyle(face.style) === normalizeFontStyle(usage.style) && numericDescriptorContains(face.weight, usage.weight, parseWeight, "normal") && numericDescriptorContains(face.stretch, usage.stretch, parseStretch, "normal") && unicodeRangeContainsText(face.unicodeRange, usage.text);
+}
+function ruleMatchesUsage(rule, usage) {
+  const style = rule.style;
+  return usage.families.includes(normalizeFontFamily(style.getPropertyValue("font-family"))) && normalizeFontStyle(style.getPropertyValue("font-style") || "normal") === normalizeFontStyle(usage.style) && numericDescriptorContains(style.getPropertyValue("font-weight"), usage.weight, parseWeight, "normal") && numericDescriptorContains(style.getPropertyValue("font-stretch"), usage.stretch, parseStretch, "normal") && unicodeRangeContainsText(style.getPropertyValue("unicode-range"), usage.text);
+}
+function ruleMatchesFontFace(rule, face) {
+  const style = rule.style;
+  return normalizeFontFamily(style.getPropertyValue("font-family")) === normalizeFontFamily(face.family) && normalizeFontStyle(style.getPropertyValue("font-style") || "normal") === normalizeFontStyle(face.style) && numericDescriptorsEqual(style.getPropertyValue("font-weight"), face.weight, parseWeight, "normal") && numericDescriptorsEqual(style.getPropertyValue("font-stretch"), face.stretch, parseStretch, "normal") && unicodeRangeKey(style.getPropertyValue("unicode-range")) === unicodeRangeKey(face.unicodeRange);
+}
+function collectFontRules(document) {
+  const candidates = [];
+  const unreadableStylesheets = [];
+  const visited = /* @__PURE__ */ new Set();
+  const visitRules = (rules, importHref) => {
+    for (const rule of Array.from(rules)) {
+      if (rule.type === CSS_FONT_FACE_RULE) {
+        candidates.push({ rule, importHref });
+        continue;
+      }
+      if (rule.type === CSS_IMPORT_RULE) {
+        const importRule = rule;
+        const href = importRule.href || importRule.styleSheet?.href || "<inline stylesheet>";
+        if (importRule.styleSheet)
+          visitStylesheet(importRule.styleSheet, href);
+        else
+          unreadableStylesheets.push(href);
+        continue;
+      }
+      if ("cssRules" in rule) {
+        try {
+          visitRules(rule.cssRules, importHref);
+        } catch {
+          unreadableStylesheets.push(rule.parentStyleSheet?.href ?? "<inline stylesheet>");
+        }
+      }
+    }
+  };
+  const visitStylesheet = (stylesheet, importHref) => {
+    if (visited.has(stylesheet)) return;
+    visited.add(stylesheet);
+    try {
+      visitRules(stylesheet.cssRules, importHref);
+    } catch {
+      unreadableStylesheets.push(stylesheet.href ?? importHref ?? "<inline stylesheet>");
+    }
+  };
+  for (const stylesheet of Array.from(document.styleSheets))
+    visitStylesheet(stylesheet);
+  return { candidates, unreadableStylesheets };
+}
+function resolveFontSourceUrls(value, baseUrl) {
+  const lowerValue = value.toLocaleLowerCase();
+  let result = "";
+  let searchFrom = 0;
+  while (searchFrom < value.length) {
+    const urlIndex = lowerValue.indexOf("url", searchFrom);
+    if (urlIndex < 0) break;
+    const previous = value[urlIndex - 1];
+    const afterUrl = urlIndex + 3;
+    if (previous !== void 0 && /[\w-]/.test(previous) || value[afterUrl] !== void 0 && /[\w-]/.test(value[afterUrl])) {
+      result += value.slice(searchFrom, afterUrl);
+      searchFrom = afterUrl;
+      continue;
+    }
+    let cursor = afterUrl;
+    while (value[cursor] !== void 0 && /[\t\n\f\r ]/.test(value[cursor]))
+      cursor++;
+    if (value[cursor] !== "(") {
+      result += value.slice(searchFrom, afterUrl);
+      searchFrom = afterUrl;
+      continue;
+    }
+    cursor++;
+    while (value[cursor] !== void 0 && /[\t\n\f\r ]/.test(value[cursor]))
+      cursor++;
+    const quote = value[cursor] === '"' || value[cursor] === "'" ? value[cursor] : null;
+    if (quote) cursor++;
+    const valueStart = cursor;
+    const valueEnd = quote ? value.indexOf(quote, valueStart) : value.indexOf(")", valueStart);
+    if (valueEnd < 0) break;
+    const rawUrl = value.slice(valueStart, valueEnd).trim();
+    cursor = valueEnd + 1;
+    if (quote) {
+      while (value[cursor] !== void 0 && /[\t\n\f\r ]/.test(value[cursor]))
+        cursor++;
+      if (value[cursor] !== ")") break;
+      cursor++;
+    }
+    result += value.slice(searchFrom, urlIndex);
+    result += `url("${new URL(rawUrl, baseUrl).href}")`;
+    searchFrom = cursor;
+  }
+  return result + value.slice(searchFrom);
+}
+function serializeFontRule(candidate, document) {
+  const descriptors = [];
+  const style = candidate.rule.style;
+  const baseUrl = candidate.rule.parentStyleSheet?.href ?? document.baseURI;
+  for (let index = 0; index < style.length; index++) {
+    const name = style.item(index);
+    const value = name === "src" ? resolveFontSourceUrls(style.getPropertyValue(name), baseUrl) : style.getPropertyValue(name);
+    descriptors.push([name, value, style.getPropertyPriority(name)]);
+  }
+  descriptors.sort(([left], [right]) => left.localeCompare(right));
+  return `@font-face { ${descriptors.map(
+    ([name, value, priority]) => `${name}: ${value}${priority ? ` !${priority}` : ""};`
+  ).join(" ")} }`;
+}
+export function supportsScopedPngFontEmbedding(document) {
+  return Boolean(
+    document.defaultView && typeof document.implementation?.createHTMLDocument === "function" && document.fonts && typeof document.fonts[Symbol.iterator] === "function"
+  );
+}
+export async function getScopedPngFontEmbedCSS(captureNode, options) {
+  const document = captureNode.ownerDocument;
+  const usages = collectFontUsages(captureNode);
+  const activeFaces = Array.from(document.fonts).filter((face) => face.status !== "unloaded").filter((face) => usages.some((usage) => fontFaceMatchesUsage(face, usage)));
+  if (activeFaces.length === 0) return "";
+  const { candidates, unreadableStylesheets } = collectFontRules(document);
+  const matchingCandidates = candidates.filter(
+    (candidate) => usages.some((usage) => ruleMatchesUsage(candidate.rule, usage)) && activeFaces.some((face) => ruleMatchesFontFace(candidate.rule, face))
+  );
+  for (const face of activeFaces) {
+    if (matchingCandidates.some((candidate) => ruleMatchesFontFace(candidate.rule, face))) continue;
+    const unreadable = unreadableStylesheets[0];
+    if (unreadable) {
+      throw new Error(
+        `${ERROR_PREFIX} Cannot read stylesheet for PNG rasterization: ${unreadable}`
+      );
+    }
+    throw new Error(
+      `${ERROR_PREFIX} Cannot access @font-face for PNG rasterization: ${face.family}`
+    );
+  }
+  const uniqueRules = /* @__PURE__ */ new Map();
+  const candidatesByPreference = [...matchingCandidates].sort((left, right) => Number(Boolean(left.importHref)) - Number(Boolean(right.importHref)));
+  for (const candidate of candidatesByPreference) {
+    const cssText = serializeFontRule(candidate, document);
+    if (!uniqueRules.has(cssText)) uniqueRules.set(cssText, candidate);
+  }
+  for (const candidate of uniqueRules.values()) {
+    if (!candidate.importHref) continue;
+    throw new Error(
+      `${ERROR_PREFIX} CSS @import is not supported for PNG rasterization: ${candidate.importHref}`
+    );
+  }
+  const isolatedDocument = document.implementation.createHTMLDocument("");
+  const styleElement = isolatedDocument.createElement("style");
+  isolatedDocument.head.appendChild(styleElement);
+  const stylesheet = styleElement.sheet;
+  if (!stylesheet) {
+    throw new Error(`${ERROR_PREFIX} Cannot create isolated stylesheet for PNG rasterization`);
+  }
+  for (const cssText of uniqueRules.keys())
+    stylesheet.insertRule(cssText, stylesheet.cssRules.length);
+  const embeddingNode = isolatedDocument.createElement("div");
+  isolatedDocument.body.appendChild(embeddingNode);
+  return getFontEmbedCSS(embeddingNode, options);
+}

package/dist/runtime/png-rasterizer-loader.d.ts

@@ -0,0 +1,3 @@
+type PngRasterizerModule = typeof import('./png-rasterizer');
+export declare function createPngRasterizerLoader(importModule: () => Promise<PngRasterizerModule>): () => Promise<typeof import("./png-rasterizer.js")>;
+export {};

package/dist/runtime/png-rasterizer-loader.js

@@ -0,0 +1,7 @@
+export function createPngRasterizerLoader(importModule) {
+  let modulePromise;
+  return () => modulePromise ??= importModule().catch((error) => {
+    modulePromise = void 0;
+    throw error;
+  });
+}

package/dist/runtime/png-rasterizer.js

@@ -1,4 +1,8 @@
 import { getFontEmbedCSS, toBlob } from "html-to-image";
+import {
+  getScopedPngFontEmbedCSS,
+  supportsScopedPngFontEmbedding
+} from "./png-font-embedding.js";
 const ERROR_PREFIX = "[nuxt-content-mermaid]";
 function validateDimensions(width, height) {
   if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
@@ -112,7 +116,8 @@ export async function rasterizePngSnapshot(input) {
   validateDimensions(input.width, input.height);
   const document = input.svg.ownerDocument;
   await document.fonts?.ready;
-  assertStylesheetsReadable(document);
+  const useScopedFontEmbedding = supportsScopedPngFontEmbedding(document);
+  if (!useScopedFontEmbedding) assertStylesheetsReadable(document);
   const captureOptions = {
     width: input.width,
     height: input.height,
@@ -127,7 +132,8 @@ export async function rasterizePngSnapshot(input) {
     input.height
   );
   try {
-    const fontEmbedCSS = await getFontEmbedCSS(captureNode, captureOptions);
+    if (useScopedFontEmbedding) await document.fonts.ready;
+    const fontEmbedCSS = useScopedFontEmbedding ? await getScopedPngFontEmbedCSS(captureNode, captureOptions) : await getFontEmbedCSS(captureNode, captureOptions);
     assertFontsEmbedded(fontEmbedCSS);
     const blob = await toBlob(captureNode, {
       ...captureOptions,

package/dist/types/config.ts

@@ -0,0 +1,91 @@
+import type { MermaidConfig } from 'mermaid'
+import type { ExpandOptions } from '../runtime/types/expand'
+import type { MermaidToolbarOptions } from './mermaid'
+
+export type JsonPrimitive = string | number | boolean | null
+export type JsonValue = JsonPrimitive | JsonObject | JsonValue[]
+export type JsonObject = { [key: string]: JsonValue }
+
+type IsAny<T> = 0 extends (1 & T) ? true : false
+
+type RuntimeDataMember<T> = IsAny<T> extends true
+  ? never
+  : T extends JsonPrimitive
+    ? T
+    : T extends (...args: never[]) => unknown
+      ? never
+      : T extends readonly (infer Item)[]
+        ? RuntimeDataMember<Item>[]
+        : T extends object
+          ? { [Key in keyof T]: RuntimeDataMember<T[Key]> }
+          : never
+
+export type RuntimeMermaidConfig = RuntimeDataMember<MermaidConfig> & JsonObject
+export type PageMermaidConfig = RuntimeMermaidConfig
+
+export interface RuntimeOptions {
+  /**
+   * Enable debug mode for detailed logging and error reporting
+   * @default false
+   */
+  debug?: boolean
+  /**
+   * Options related to loading mermaid
+   */
+  loader?: {
+    /**
+     * Pure-data configuration passed through Nuxt public runtime config.
+     */
+    init?: RuntimeMermaidConfig
+    /**
+     * Whether to lazy load the diagram when it enters the viewport.
+     * Can be a boolean or an object with IntersectionObserver options.
+     * The threshold must be between 0 and 1, inclusive.
+     * @default true
+     */
+    lazy?: boolean | { threshold?: number }
+  }
+  /**
+   * Options related to theme handling
+   */
+  theme?: {
+    /** @deprecated No effect; retained for 3.0 compatibility. */
+    useColorModeTheme?: boolean
+    light?: MermaidConfig['theme']
+    dark?: MermaidConfig['theme']
+  }
+  /**
+   * Names for custom implementation components
+   */
+  components?: {
+    renderer?: string
+    spinner?: string
+    error?: string
+  }
+  /**
+   * Expand configuration. `false` disables expand, `true` uses defaults.
+   */
+  expand?: ExpandOptions | boolean
+  /**
+   * Default toolbar settings for Mermaid component
+   */
+  toolbar?: MermaidToolbarOptions
+}
+
+export interface ModuleOptions extends RuntimeOptions {
+  /**
+   * Whether to enable the entire Mermaid process at build time.
+   * @default true
+   */
+  enabled?: boolean
+}
+
+interface MermaidComponentBaseProps {
+  toolbar?: MermaidToolbarOptions
+  code?: string
+}
+
+export type MermaidComponentProps = MermaidComponentBaseProps & (
+  | { pageConfig?: PageMermaidConfig, config?: never }
+  | { pageConfig?: never, config?: MermaidConfig }
+)

package/dist/types/mermaid.d.ts

@@ -0,0 +1,78 @@
+import type { DefineComponent } from 'vue'
+import type { Mermaid } from 'mermaid'
+import type { MermaidComponentProps, ModuleOptions, RuntimeOptions } from './config'
+import type { MermaidThemeMode, SimpleMermaidTheme } from '../runtime/composables/useMermaidTheme'
+
+export type MermaidToolbarButtons = {
+  copy?: boolean
+  fullscreen?: boolean
+  expand?: boolean
+}
+
+export type MermaidToolbarLabels = {
+  copy?: string
+  copied?: string
+  copyFailed?: string
+  expand?: string
+  collapse?: string
+  minimize?: string
+  enterFullscreen?: string
+  exitFullscreen?: string
+  zoomIn?: string
+  zoomOut?: string
+  resetZoom?: string
+  download?: string
+  downloadSvg?: string
+  downloadPng?: string
+}
+
+export type MermaidToolbarOptions = {
+  title?: string
+  fontSize?: string | number
+  fullscreenToolbarScale?: number
+  buttons?: MermaidToolbarButtons
+  labels?: MermaidToolbarLabels
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $mermaid: () => Promise<Mermaid>
+  }
+}
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $mermaid: () => Promise<Mermaid>
+  }
+  interface GlobalComponents {
+    Mermaid: DefineComponent<MermaidComponentProps>
+  }
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig {
+    contentMermaid?: ModuleOptions
+  }
+
+  interface NuxtOptions {
+    contentMermaid?: ModuleOptions
+  }
+
+  interface PublicRuntimeConfig {
+    contentMermaid?: RuntimeOptions
+  }
+}
+
+declare global {
+  interface ImportMeta {
+    glob<T = unknown>(
+      pattern: string,
+      options?: {
+        eager?: boolean
+        import?: string
+      },
+    ): Record<string, () => Promise<T>>
+  }
+}
+
+export type { MermaidThemeMode, SimpleMermaidTheme }
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barzhsieh/nuxt-content-mermaid",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.",
   "keywords": [
     "nuxt",
@@ -52,7 +52,7 @@
     "defu": "^6.1.7",
     "destr": "^2.0.5",
     "html-to-image": "1.11.11",
-    "mermaid": "~11.16.1",
+    "mermaid": "~11.17.0",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
@@ -74,8 +74,8 @@
     "nuxt": "4.5.2",
     "playwright": "^1.62.1",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.10",
-    "vue-tsc": "^3.3.9",
+    "vitest": "^4.1.11",
+    "vue-tsc": "^3.3.10",
     "yaml": "^2.9.0"
   },
   "volta": {
@@ -89,7 +89,7 @@
     "release:prepare:major": "changelogen --release --major --no-commit --no-tag --no-github && pnpm install --lockfile-only --ignore-scripts",
     "release:prepare:minor": "changelogen --release --minor --no-commit --no-tag --no-github && pnpm install --lockfile-only --ignore-scripts",
     "release:prepare:patch": "changelogen --release --patch --no-commit --no-tag --no-github && pnpm install --lockfile-only --ignore-scripts",
-    "test": "vitest run",
+    "test": "vitest run --exclude test/packagePrepack.test.ts && vitest run test/packagePrepack.test.ts",
     "test:package-artifact": "node scripts/release-verification/package-artifact.mjs --profile v3-known-latest",
     "test:compatibility-profile": "node scripts/release-verification/package-artifact.mjs",
     "test:package-contract": "pnpm prepack && vue-tsc -p test/release-verification/consumer-template/type-contracts/tsconfig.json --noEmit",