@barzhsieh/nuxt-content-mermaid 3.0.4 → 4.0.0

package/README.md

@@ -8,9 +8,13 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
-[![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
+[![Mermaid](https://img.shields.io/badge/mermaid-12.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
 [![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
 
+> This README covers 4.x, which bundles Mermaid 12. The frozen 3.x line keeps its
+> [3.x contract](./docs/en/DEPENDENCY_AND_MIGRATION_CONTRACT.md); to upgrade, follow
+> [Migration to v4](https://nuxt-content-mermaid.barz.app/migration/v4).
+
 **@barzhsieh/nuxt-content-mermaid** turns `mermaid` code blocks in Nuxt
 Content Markdown into responsive, interactive diagrams. It supports lazy
 loading, light and dark themes, toolbar controls, and application-provided
@@ -38,10 +42,11 @@ Nuxt Content peer dependencies and the Nuxt Content database connector.
 - Node.js `>=22.19.0`
 - Nuxt `^4.1.0`
 - Nuxt Content `>=3.5.0 <4.0.0`
+- ES2024 browsers; Safari / iOS / iPadOS `17.4+`
 
-For dependency ownership, the Nuxt Content v2 migration boundary, and rendering
+For dependency ownership, the v4 migration boundary, and rendering
 guarantees, see the
-[Dependency and Migration Contract](./docs/en/DEPENDENCY_AND_MIGRATION_CONTRACT.md).
+[4.x Dependency and Migration Contract](./docs/en/DEPENDENCY_AND_MIGRATION_CONTRACT_V4.md).
 
 ## Quick start
 
@@ -79,6 +84,7 @@ For database connector choices and a complete first-project walkthrough, follow
 - [Configuration](https://nuxt-content-mermaid.barz.app/configuration)
 - [Troubleshooting](https://nuxt-content-mermaid.barz.app/troubleshooting)
 - [Migration to v3](https://nuxt-content-mermaid.barz.app/migration/v3)
+- [Migration to v4](https://nuxt-content-mermaid.barz.app/migration/v4)
 
 ## Support and contribution
 

package/README.zh-TW.md

@@ -8,9 +8,11 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
-[![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
+[![Mermaid](https://img.shields.io/badge/mermaid-12.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
 [![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
 
+> 本文件說明綁定 Mermaid 12 的 4.x。已凍結的 3.x 仍適用 [3.x 契約](./docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT.md)；升級請參閱[升級至 v4](https://nuxt-content-mermaid.barz.app/zh/migration/v4)。
+
 **@barzhsieh/nuxt-content-mermaid** 會將 Nuxt Content Markdown 中的
 `mermaid` 程式碼圍欄 (fence) 轉換為響應式、可互動的圖表，並支援延遲載入、深淺色
 主題、工具列控制，以及由應用程式提供的渲染元件。
@@ -38,9 +40,10 @@ dependencies，以及 Nuxt Content database connector。
 - Node.js `>=22.19.0`
 - Nuxt `^4.1.0`
 - Nuxt Content `>=3.5.0 <4.0.0`
+- ES2024 瀏覽器；Safari／iOS／iPadOS `17.4+`
 
-相依擁有權、Nuxt Content v2 遷移邊界與渲染保證，請參閱
-[相依與遷移契約](./docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT.md)。
+相依擁有權、v4 遷移邊界與渲染保證，請參閱
+[4.x 相依與遷移契約](./docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT_V4.md)。
 
 ## 快速開始
 
@@ -77,6 +80,7 @@ Mermaid 已包含在本模組中，不需要另外安裝。資料庫 connector
 - [設定](https://nuxt-content-mermaid.barz.app/zh/configuration)
 - [疑難排解](https://nuxt-content-mermaid.barz.app/zh/troubleshooting)
 - [升級至 v3](https://nuxt-content-mermaid.barz.app/zh/migration/v3)
+- [升級至 v4](https://nuxt-content-mermaid.barz.app/zh/migration/v4)
 
 ## 支持與貢獻
 

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.4",
+  "version": "4.0.0",
   "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 },

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/components/Spinner.d.vue.ts

@@ -1,3 +1,11 @@
 declare const _default: typeof __VLS_export;
 export default _default;
+export type __VLS_LocalComponents = {};
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_StyleScopedClasses = {} & {
+    "ncm-spinner": boolean;
+} & {
+    "ncm-spinner__path": boolean;
+};
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,3 +1,11 @@
 declare const _default: typeof __VLS_export;
 export default _default;
+export type __VLS_LocalComponents = {};
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_StyleScopedClasses = {} & {
+    "ncm-spinner": boolean;
+} & {
+    "ncm-spinner__path": boolean;
+};
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/icons/IconClipboard.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconClipboard.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconClipboardHover.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconClipboardHover.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconClipboardSuccess.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconClipboardSuccess.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconCollapse.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconCollapse.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconDownload.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconDownload.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconExpand.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconExpand.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconMinus.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconMinus.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconPlus.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/IconPlus.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/iconFullScreen.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/iconFullScreen.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/iconFullScreenExit.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/icons/iconFullScreenExit.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     size?: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
+    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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/constants.d.ts

@@ -45,6 +45,6 @@ export declare const DEFAULT_RUNTIME_OPTIONS: {
     toolbar: MermaidToolbarOptions;
 };
 export declare const DEFAULT_FRONTMATTER_CONFIG_KEY = "config";
-export declare const MERMAID_11_16_1_REGEXP_PATHS: readonly [readonly ["dompurifyConfig", "ALLOWED_URI_REGEXP"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "attributeNameCheck"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "tagNameCheck"]];
-export declare const MERMAID_11_16_1_FUNCTION_CAPABILITY_PATHS: readonly [readonly ["sequence", "actorFont"], readonly ["sequence", "messageFont"], readonly ["sequence", "noteFont"], readonly ["c4", "personFont"], readonly ["c4", "external_personFont"], readonly ["c4", "systemFont"], readonly ["c4", "external_systemFont"], readonly ["c4", "system_dbFont"], readonly ["c4", "external_system_dbFont"], readonly ["c4", "system_queueFont"], readonly ["c4", "external_system_queueFont"], readonly ["c4", "containerFont"], readonly ["c4", "external_containerFont"], readonly ["c4", "container_dbFont"], readonly ["c4", "external_container_dbFont"], readonly ["c4", "container_queueFont"], readonly ["c4", "external_container_queueFont"], readonly ["c4", "componentFont"], readonly ["c4", "external_componentFont"], readonly ["c4", "component_dbFont"], readonly ["c4", "external_component_dbFont"], readonly ["c4", "component_queueFont"], readonly ["c4", "external_component_queueFont"], readonly ["c4", "boundaryFont"], readonly ["c4", "messageFont"], readonly ["dompurifyConfig", "ADD_ATTR"], readonly ["dompurifyConfig", "ADD_TAGS"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "attributeNameCheck"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "tagNameCheck"]];
+export declare const MERMAID_12_2_0_REGEXP_PATHS: readonly [readonly ["dompurifyConfig", "ALLOWED_URI_REGEXP"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "attributeNameCheck"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "tagNameCheck"]];
+export declare const MERMAID_12_2_0_FUNCTION_CAPABILITY_PATHS: readonly [readonly ["sequence", "actorFont"], readonly ["sequence", "messageFont"], readonly ["sequence", "noteFont"], readonly ["c4", "personFont"], readonly ["c4", "external_personFont"], readonly ["c4", "systemFont"], readonly ["c4", "external_systemFont"], readonly ["c4", "system_dbFont"], readonly ["c4", "external_system_dbFont"], readonly ["c4", "system_queueFont"], readonly ["c4", "external_system_queueFont"], readonly ["c4", "containerFont"], readonly ["c4", "external_containerFont"], readonly ["c4", "container_dbFont"], readonly ["c4", "external_container_dbFont"], readonly ["c4", "container_queueFont"], readonly ["c4", "external_container_queueFont"], readonly ["c4", "componentFont"], readonly ["c4", "external_componentFont"], readonly ["c4", "component_dbFont"], readonly ["c4", "external_component_dbFont"], readonly ["c4", "component_queueFont"], readonly ["c4", "external_component_queueFont"], readonly ["c4", "boundaryFont"], readonly ["c4", "messageFont"], readonly ["dompurifyConfig", "ADD_ATTR"], readonly ["dompurifyConfig", "ADD_TAGS"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "attributeNameCheck"], readonly ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "tagNameCheck"]];
 export declare const DOMPURIFY_3_4_13_OPAQUE_CAPABILITY_PATHS: readonly [readonly ["dompurifyConfig", "TRUSTED_TYPES_POLICY"]];

package/dist/runtime/constants.js

@@ -9,6 +9,13 @@ export const FULLSCREEN_ZOOM_HINT_DURATION_MS = 3e3;
 export const DEFAULT_MERMAID_CONFIG = {
   startOnLoad: false,
   theme: "default",
+  layout: "dagre",
+  look: "classic",
+  // Mermaid 12 resolves a top-level layout above each diagram type's own schema
+  // default, and mindmap skips cose-bilkent whenever any top-level layout is set,
+  // so the types whose 3.x layout was never dagre keep theirs explicitly.
+  mindmap: { layout: "cose-bilkent" },
+  swimlane: { layout: "swimlane" },
   fontFamily: "Arial, sans-serif, \u5FAE\u8EDF\u6B63\u9ED1\u9AD4",
   securityLevel: "strict"
 };
@@ -84,12 +91,12 @@ export const DEFAULT_RUNTIME_OPTIONS = {
   toolbar: DEFAULT_TOOLBAR_OPTIONS
 };
 export const DEFAULT_FRONTMATTER_CONFIG_KEY = "config";
-export const MERMAID_11_16_1_REGEXP_PATHS = [
+export const MERMAID_12_2_0_REGEXP_PATHS = [
   ["dompurifyConfig", "ALLOWED_URI_REGEXP"],
   ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "attributeNameCheck"],
   ["dompurifyConfig", "CUSTOM_ELEMENT_HANDLING", "tagNameCheck"]
 ];
-export const MERMAID_11_16_1_FUNCTION_CAPABILITY_PATHS = [
+export const MERMAID_12_2_0_FUNCTION_CAPABILITY_PATHS = [
   ["sequence", "actorFont"],
   ["sequence", "messageFont"],
   ["sequence", "noteFont"],

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

@@ -1,8 +1,8 @@
 import { createMermaidComponentConfigurationError } from "./component-configuration-error.js";
 import {
   DOMPURIFY_3_4_13_OPAQUE_CAPABILITY_PATHS,
-  MERMAID_11_16_1_FUNCTION_CAPABILITY_PATHS,
-  MERMAID_11_16_1_REGEXP_PATHS
+  MERMAID_12_2_0_FUNCTION_CAPABILITY_PATHS,
+  MERMAID_12_2_0_REGEXP_PATHS
 } from "./constants.js";
 function formatConfigPath(path) {
   return path.reduce(
@@ -28,7 +28,7 @@ function matchesSupportedPath(path, supportedPaths) {
   return supportedPaths.some((supportedPath) => supportedPath.length === path.length && supportedPath.every((segment, index) => path[index] === segment));
 }
 function isFunctionCapability(value, path) {
-  return typeof value === "function" && matchesSupportedPath(path, MERMAID_11_16_1_FUNCTION_CAPABILITY_PATHS);
+  return typeof value === "function" && matchesSupportedPath(path, MERMAID_12_2_0_FUNCTION_CAPABILITY_PATHS);
 }
 function isOpaqueObjectCapability(value, path) {
   return value !== null && typeof value === "object" && matchesSupportedPath(path, DOMPURIFY_3_4_13_OPAQUE_CAPABILITY_PATHS);
@@ -37,12 +37,12 @@ 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.17.0 or DOMPurify 3.4.13 path");
+    invalidDirectConfig(path, "a supported capability at its exact Mermaid 12.2.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;
   if (value instanceof RegExp) {
-    if (!matchesSupportedPath(path, MERMAID_11_16_1_REGEXP_PATHS))
+    if (!matchesSupportedPath(path, MERMAID_12_2_0_REGEXP_PATHS))
       invalidDirectConfig(path, "a RegExp at an exact DOMPurify 3.4.13 RegExp path");
     if (Reflect.ownKeys(value).some((key) => key !== "lastIndex"))
       invalidDirectConfig(path, "a RegExp without custom properties");

package/dist/runtime/mermaid-config.js

@@ -1,5 +1,7 @@
 import { mergeByPresence } from "./configuration/core.js";
 import { mergeDirectMermaidConfigForInvocation } from "./direct-mermaid-config.js";
+import { MERMAID_LOG_PREFIX, PAGE_MERMAID_CONFIG_PHASE } from "./constants.js";
+const defaultRendererWarnings = import.meta.dev ? /* @__PURE__ */ new Set() : void 0;
 export function resolveMermaidTheme(options) {
   const {
     colorModeValue,
@@ -51,5 +53,22 @@ export function materializeMermaidConfigForInvocation(options) {
       writable: true
     });
   }
+  if (import.meta.dev && defaultRendererWarnings) {
+    const sourceLabel = options.source.kind === "page" ? PAGE_MERMAID_CONFIG_PHASE.name : "Direct Mermaid Config";
+    const sourceConfig = options.source.kind === "runtime-only" ? void 0 : options.source.config;
+    const sources = [
+      ["loader.init", options.runtimeConfig],
+      [sourceLabel, sourceConfig]
+    ];
+    for (const [source, config] of sources) {
+      for (const diagram of ["flowchart", "class", "state"]) {
+        const diagramConfig = config?.[diagram];
+        const key = `${source}.${diagram}.defaultRenderer`;
+        if (!diagramConfig || !Object.hasOwn(diagramConfig, "defaultRenderer") || defaultRendererWarnings.has(key)) continue;
+        defaultRendererWarnings.add(key);
+        console.warn(`${MERMAID_LOG_PREFIX} ${key} is ignored by Mermaid 12. Set layout: 'dagre' (previously 'dagre-wrapper') or layout: 'elk' inside ${diagram} to keep the per-type scope, or at top level for every supporting diagram type.`);
+      }
+    }
+  }
   return sourceWorkingCopy;
 }

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/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.4",
+  "version": "4.0.0",
   "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.17.0",
+    "mermaid": "~12.2.0",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
@@ -60,22 +60,23 @@
     "nuxt": "^4.1.0"
   },
   "devDependencies": {
-    "@nuxt/content": "3.15.2",
-    "@nuxt/devtools": "3.4.1",
+    "@nuxt/content": "3.16.2",
+    "@nuxt/devtools": "3.4.4",
     "@nuxt/eslint-config": "1.17.0",
     "@nuxt/module-builder": "1.0.3",
-    "@nuxt/schema": "4.5.2",
-    "@nuxt/test-utils": "^4.1.0",
+    "@nuxt/schema": "4.6.2",
+    "@nuxt/test-utils": "^4.3.4",
     "@nuxtjs/color-mode": "4.0.1",
-    "@nuxtjs/mdc": "^0.23.1",
+    "@nuxtjs/mdc": "^0.23.2",
     "@types/node": "^25.3.0",
     "changelogen": "^0.6.2",
-    "eslint": "^10.8.1",
-    "nuxt": "4.5.2",
-    "playwright": "^1.62.1",
+    "eslint": "^10.13.0",
+    "nuxt": "4.6.2",
+    "oxc-parser": "^0.143.0",
+    "playwright": "^1.64.1",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.11",
-    "vue-tsc": "^3.3.10",
+    "vitest": "^5.0.5",
+    "vue-tsc": "^3.3.13",
     "yaml": "^2.9.0"
   },
   "volta": {
@@ -85,12 +86,13 @@
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "pnpm nuxt-module-build build --stub && pnpm nuxt-module-build prepare && nuxi prepare playground",
+    "audit:published": "node scripts/release-verification/audit-published.mjs",
     "lint": "eslint .",
     "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:package-artifact": "node scripts/release-verification/package-artifact.mjs --profile v3-known-latest",
+    "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 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",
     "test:watch": "vitest watch",