@barzhsieh/nuxt-content-mermaid 2.2.2 → 3.0.0

package/README.zh-TW.md

@@ -14,54 +14,99 @@
 專為 [**Nuxt Content v3**](https://content.nuxt.com/docs/getting-started) 整合 [**Mermaid**](https://mermaid.js.org/) 的模組。
 能自動將 Markdown 中的 \`\`\`mermaid 區塊轉換為響應式的圖表元件，並支援 Lazy Loading 與深色模式切換。
 
-## Features
+<details>
+<summary>目錄</summary>
+
+- [功能特色](#功能特色)
+- [使用前提](#使用前提)
+- [相依與遷移契約](./docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT.md)
+- [快速開始](#快速開始)
+- [設定](#設定)
+- [遷移至 v3](#遷移至-v3)
+- [樣式自訂（CSS 變數）](#樣式自訂css-變數)
+- [進階用法](#進階用法)
+  - [Debug 模式](#debug-模式)
+  - [主題與顏色模式](#主題與顏色模式-theme--color-mode)
+  - [以 frontmatter 覆寫單頁設定](#以-frontmatter-覆寫單頁設定)
+  - [Mermaid Inline attrs 與 YAML Frontmatter](#mermaid-inline-attrs-與-yaml-frontmatter)
+  - [自訂渲染元件](#自訂渲染元件-custom-component)
+  - [元件使用方式](#元件使用方式)
+  - [錯誤處理](#錯誤處理)
+- [支持專案](#支持專案)
+- [貢獻](#貢獻)
+- [授權](#授權)
+
+</details>
+
+## 功能特色
 
 - **自動轉換**：解析 Markdown 代碼區塊並替換為 `<Mermaid>` 渲染元件。
 - **效能優化**：支援 Lazy Loading，僅在元件掛載時載入 Mermaid 核心與資源。
 - **主題整合**：無縫整合 `@nuxtjs/color-mode`，自動切換 Light/Dark 對應主題。
-- **高度客製**：支援自訂渲染元件（Wrapper）、Loading Spinner、錯誤畫面以及 CDN 來源。
-- **Runtime Config**：支援透過環境變數動態覆寫設定。
+- **高度客製**：支援自訂渲染元件、Loading Spinner、錯誤畫面、主題與工具列控制。
+- **部署期設定**：可透過 public runtime config 傳遞純資料設定，並在每個 Nuxt 應用程式初始化時解析一次。
 
 ## 使用前提
 
-- `nuxt@^3.20.1 || ^4.1.0`
-- `@nuxt/content@>=3.5.0`
+- Node.js `>=22.19.0`
+- `nuxt@^4.1.0`
+- `@nuxt/content@>=3.5.0 <4.0.0`
 
-## Quick Setup
+相依擁有權、2.x 遷移方式、渲染保證與視覺快照限制，請參閱[相依與遷移契約](./docs/ch/DEPENDENCY_AND_MIGRATION_CONTRACT.md)。
 
-### 1. 安裝模組
-
-**自動設定（自動寫入 `modules`）：**
-
-```bash
-npx nuxi module add @barzhsieh/nuxt-content-mermaid
-```
+## 快速開始
 
-> Nuxt CLI 對第三方模組預設會裝到 `dependencies`。若你偏好放在 `devDependencies`，請安裝完後移動或改用下方的方式手動安裝。
+### 1. 安裝套件
 
-**裝到 `devDependencies`（需手動加入 `modules`）：**
+套件管理器安裝與 Nuxt 模組初始化是兩個不同步驟。您的應用程式擁有 Nuxt 與 Nuxt Content 這兩個 peer dependencies，因此必須自行安裝、鎖定與更新它們。請一併安裝本模組與支援範圍內的 Nuxt Content peer：
 
 ```bash
 # pnpm
-pnpm add -D @barzhsieh/nuxt-content-mermaid
+pnpm add @barzhsieh/nuxt-content-mermaid @nuxt/content
 
 # npm
-npm install -D @barzhsieh/nuxt-content-mermaid
+npm install @barzhsieh/nuxt-content-mermaid @nuxt/content
 
 # yarn
-yarn add -D @barzhsieh/nuxt-content-mermaid
+yarn add @barzhsieh/nuxt-content-mermaid @nuxt/content
 ```
 
-### 2. 配置 `nuxt.config.ts`
+Mermaid 是本模組綁定的 Module-Owned Dependency，因此不必為了本模組另行安裝。
 
-確保模組已加入 `modules` 清單（若使用 `nuxi module add` 則可略過）：
+> [!NOTE]
+> **Nuxt Content 資料庫 connector** — 在 Node.js 環境中，Nuxt Content 會由
+> 應用程式選擇資料庫 connector；可用選項包含 `better-sqlite3`、`sqlite3`，
+> 以及受支援 Node.js 版本提供的 native SQLite。本模組不要求或擁有特定
+> connector；請依已安裝版本參閱
+> [Nuxt Content 安裝指南](https://content.nuxt.com/docs/getting-started/installation)。
+>
+> **pnpm v10+** — 若選擇 `better-sqlite3` 或 `sqlite3`，pnpm v10 預設會
+> 封鎖其原生 build script。請執行 `pnpm approve-builds`，或只在
+> `package.json` 允許你選用的 connector。下例使用 `better-sqlite3`；若
+> 選用 `sqlite3`，請先將套件名稱替換為 `sqlite3`：
+>
+> ```json
+> {
+>   "pnpm": {
+>     "onlyBuiltDependencies": ["better-sqlite3"]
+>   }
+> }
+> ```
+
+### 2. 初始化 Nuxt 模組
+
+標準 `modules` 設定只需列出本模組：
 
 ```ts
 export default defineNuxtConfig({
-  modules: ["@barzhsieh/nuxt-content-mermaid", "@nuxt/content"],
+  modules: ["@barzhsieh/nuxt-content-mermaid"],
 });
 ```
 
+本模組透過 `moduleDependencies` 宣告必要的 Nuxt Content 關係與相容版本，因此 Nuxt 會依必要順序初始化已安裝的 `@nuxt/content` 模組。這項宣告不會安裝、鎖定或更新 Nuxt Content；這些套件管理器責任仍由您的應用程式承擔。
+
+若您的應用程式已在 `modules` 中手動列出 `@nuxt/content`，可以保留該項設定。手動列出仍受支援，但不再是標準設定。
+
 ### 3. 在 Markdown 中使用
 
 在 `content/` 目錄下的 `.md` 檔案中直接撰寫 Mermaid 語法：
@@ -79,10 +124,9 @@ graph LR
 
 模組會自動將其轉換為 SVG 圖表。
 
-## Configuration
+## 設定
 
-你可以透過 `contentMermaid` 選項進行全域設定。  
-（`mermaidContent` 仍會被接受以維持相容，但已棄用，未來版本會移除。）
+請透過正式的 `contentMermaid` 選項進行全域設定。舊的 `mermaidContent` alias 已在 v3 移除，使用時會得到遷移錯誤。
 
 ```ts
 // nuxt.config.ts
@@ -100,11 +144,6 @@ export default defineNuxtConfig({
       light: "default",
       dark: "dark",
     },
-    components: {
-      renderer: undefined,
-      spinner: undefined,
-      error: undefined,
-    },
     toolbar: {
       title: "mermaid",
       fontSize: "14px",
@@ -144,27 +183,42 @@ export default defineNuxtConfig({
 
 **loader**
 
-| 參數             | 類型                                   | 預設值                   | 說明                                                                  |
-| :--------------- | :------------------------------------- | :----------------------- | :---------------------------------------------------------------------- |
-| `loader.init`    | `MermaidConfig`                        | `{ startOnLoad: false }` | 直接傳遞給 `mermaid.initialize` 的原始設定。                            |
-| `loader.lazy`    | `boolean \| { threshold?: number }` | `true`                  | 元件進入 viewport 時才載入 Mermaid；設為 `false` 會在前一刻就載入。 |
+| 參數             | 類型                                   | 預設值     | 說明                                                                  |
+| :--------------- | :------------------------------------- | :--------- | :---------------------------------------------------------------------- |
+| `loader.init`    | `RuntimeMermaidConfig`（嚴格純資料）   | 套件預設值 | 傳遞至 `mermaid.initialize` 的純資料 Mermaid 設定。                     |
+| `loader.lazy`    | `boolean \| { threshold?: number }` | `true`     | 元件進入 viewport 時才載入 Mermaid；設為 `false` 會在前一刻就載入。 |
+
+`loader.init` 的 baseline 為：
+
+```ts
+{
+  startOnLoad: false,
+  theme: 'default',
+  fontFamily: 'Arial, sans-serif, 微軟正黑體',
+  securityLevel: 'strict',
+}
+```
+
+未明確設定時，`debug: false` 會解析成 `logLevel: 5` 與
+`suppressErrorRendering: true`；`debug: true` 則解析成 `logLevel: 1` 與
+`suppressErrorRendering: false`。使用者明確提供的值一律優先。
 
 **theme**
 
 若專案安裝了 `@nuxtjs/color-mode` 會自動偵測並跟隨；透過 `useMermaidTheme()` 設定的手動主題會優先。
 
-| 參數          | 類型   | 預設值      | 說明                                                                              |
-| :------------ | :----- | :---------- | :-------------------------------------------------------------------------------- |
-| `theme.light` | string | `'default'` | 當 color-mode 為 light 時的主題，若 color-mode 不存在也會回退使用。               |
-| `theme.dark`  | string | `'dark'`    | 當 color-mode 為 dark 時的主題，若 color-mode 不存在也會回退使用。                |
+| 參數          | 類型   | 預設值      | 說明                                                          |
+| :------------ | :----- | :---------- | :------------------------------------------------------------ |
+| `theme.light` | string | `'default'` | 用於 light color mode 與手動 `setMermaidTheme('light')` 策略。 |
+| `theme.dark`  | string | `'dark'`    | 用於 dark color mode 與手動 `setMermaidTheme('dark')` 策略。   |
 
 **components**
 
-| 參數                     | 類型     | 預設值     | 說明                                                   |
-| :----------------------- | :------- | :--------- | :----------------------------------------------------- |
-| `components.renderer`    | `string` | `undefined` | 指定自訂的 Mermaid 實作元件名稱（見進階用法）。        |
-| `components.spinner`     | `string` | `undefined` | 指定全域的 Loading 元件名稱。                          |
-| `components.error`       | `string` | `undefined` | 指定全域的錯誤顯示元件名稱，渲染失敗時會使用。         |
+| 參數                     | 類型     | 預設值 | 說明                                                   |
+| :----------------------- | :------- | :----- | :----------------------------------------------------- |
+| `components.renderer`    | `string` | 未設定 | 選填：指定自訂的 Mermaid 實作元件名稱（見進階用法）。  |
+| `components.spinner`     | `string` | 未設定 | 選填：指定全域的 Loading 元件名稱。                    |
+| `components.error`       | `string` | 未設定 | 選填：指定全域的錯誤顯示元件名稱，渲染失敗時會使用。   |
 
 **toolbar**
 
@@ -207,7 +261,11 @@ export default defineNuxtConfig({
 可透過 `toolbar.fullscreenToolbarScale` 調整 Fullscreen 工具列與縮放控制的尺寸。
 
 
-> **Note**: 所有設定皆可透過 `runtimeConfig.public.contentMermaid` 在部署時進行覆寫（`runtimeConfig.public.mermaidContent` 仍支援但已棄用）。
+> **注意**：`contentMermaid.enabled` 在 Nuxt setup 時決定模組啟用狀態。設為 `false` 只會停用 Mermaid 的 Content／runtime integration，不會停用 Nuxt Content。它絕不是 public runtime 設定。`runtimeConfig.public.contentMermaid` 只能傳遞嚴格純資料，並在每個 Nuxt 應用程式初始化時解析一次；之後變更它不會更新既有的 Runtime Mermaid Snapshot。
+
+## 遷移至 v3
+
+[v3 遷移指南](./docs/ch/MIGRATION_V3.md)說明移除的設定 alias、建置期 activation、純資料 runtime transport、Page 與 Direct Mermaid Config、Property-Presence Merge、expand 重設語意，以及公開的診斷與渲染保證。Playground 的 `/migration` 路徑提供可操作的對照範例。
 
 ## 樣式自訂（CSS 變數）
 
@@ -236,7 +294,6 @@ html[data-theme="dark"],
 }
 ```
 
-可覆寫的變數：
 可覆寫的變數：
 - `--ncm-code-bg`：Mermaid 區塊背景色
 - `--ncm-code-bg-hover`：工具列按鈕 hover 背景
@@ -256,16 +313,16 @@ html[data-theme="dark"],
 - `--ncm-hint-text`：縮放提示訊息文字顏色（預設 `#fff`）
 - `--ncm-hint-radius`：縮放提示訊息圓角（預設 `8px`）
 
-## Advanced Usage
+## 進階用法
 
 ### Debug 模式
 
 **`contentMermaid.debug`**（預設 `false`）：
-  - **自動配置**：若未手動設定 `loader.init.logLevel` 或 `suppressErrorRendering`，開啟 debug 模式會自動將 `logLevel` 設為 `1` (Info)，並將 `suppressErrorRendering` 設為 `false`（允許 Mermaid 在 DOM 中顯示錯誤訊息）。
+  - **自動配置**：若未明確設定 `loader.init.logLevel` 或 `suppressErrorRendering`，`debug: false` 會解析為 `logLevel: 5` 與 `suppressErrorRendering: true`；`debug: true` 會解析為 `logLevel: 1` 與 `suppressErrorRendering: false`（允許 Mermaid 在 DOM 中顯示錯誤訊息）。明確設定的值一律優先。
   - **執行行為**：
     - **Debug 開啟**：`mermaid.run` 使用 `suppressErrors: false`，發生錯誤時會拋出完整堆疊以便除錯。
     - **Debug 關閉**：`mermaid.run` 使用 `suppressErrors: true`，避免單一圖表錯誤中斷其他圖表的渲染。
-  - **主控台輸出**：模組會額外輸出渲染佇列的診斷資訊與執行時間統計。
+  - **主控台輸出**：Debug log 的文字與內部渲染排程不是公開 API。設定失敗時，應辨識文件記載的公開錯誤 fingerprint，不要解析內部訊息細節。
 
 ### 主題與顏色模式 (Theme & Color Mode)
 
@@ -276,8 +333,7 @@ html[data-theme="dark"],
 3. `@nuxtjs/color-mode`（安裝時自動偵測）：
   - `dark` → 使用 `theme.dark`
   - `light` → 使用 `theme.light`
-4. `loader.init.theme`（若有設定）
-5. 回退：`theme.light`，若無則 Mermaid 預設 `'default'`
+4. 解析後的 `loader.init.theme`（套件預設為 `'default'`）
 
 更多進階手動控制（如：強制指定特定主題、自訂切換邏輯），請參閱 [手動主題控制指南](./docs/ch/MANUAL_THEME_CONTROL.md)。
 
@@ -399,13 +455,16 @@ graph TD
 
 若需完全接管 Mermaid 的渲染行為（例如：加入外框、Expand/Collapse 功能），可指定 `components.renderer`。
 
+指定的名稱在元件解析完成前只是候選。解析期間 Built-in Renderer 會保持暫停；若找不到或無法載入該元件，模組才會回退到 Built-in Renderer。一旦解析成功，Custom Renderer 就完全擁有渲染流程，之後的 mount 或 render failure 不會觸發 Built-in fallback。
+
 1. 在 `nuxt.config.ts` 中指定元件名稱：
 
    ```ts
    contentMermaid: {
      components: {
-       renderer: "MyCustomMermaid",
-     }
+       renderer: 'MyCustomMermaid',
+       spinner: 'MySpinner', // 選填：傳入自訂渲染元件
+     },
    }
    ```
 
@@ -413,56 +472,56 @@ graph TD
 
    ```vue
    <script setup lang="ts">
-   // 你可以在此使用 slot 內容或自行呼叫 useMermaid() 等邏輯
+   import { onMounted, ref, shallowRef, useId } from 'vue'
+   import type { Component } from 'vue'
+
+   const props = defineProps<{
+     code?: string
+     spinner: Component | string
+   }>()
+
+   const loading = ref(true)
+   const error = shallowRef<unknown>()
+   const svg = ref('')
+   const renderId = `custom-mermaid-${useId().replaceAll(':', '')}`
+
+   onMounted(async () => {
+     try {
+       const mermaid = await useNuxtApp().$mermaid()
+       svg.value = (await mermaid.render(renderId, props.code ?? '')).svg
+     }
+     catch (cause) {
+       error.value = cause
+     }
+     finally {
+       loading.value = false
+     }
+   })
    </script>
 
    <template>
      <div class="custom-wrapper border rounded p-4">
-       <Mermaid>
-         <slot />
-       </Mermaid>
+       <component
+         :is="props.spinner"
+         v-if="loading"
+       />
+       <p
+         v-else-if="error"
+         role="alert"
+       >
+         圖表渲染失敗：{{ error instanceof Error ? error.message : String(error) }}
+       </p>
+       <div
+         v-else
+         v-html="svg"
+       />
      </div>
    </template>
    ```
 
-#### 載入中指示
-
-模組在首次渲染前會使用內建的 spinner，如需替換可在 `components.spinner` 指定元件名稱；該元件也會以 `spinner` prop 傳入你的自訂渲染元件，方便直接渲染。
+Custom Renderer 會收到既有的 `code`、default slot 與 `spinner` 輸入；不會收到 Built-in 的設定、主題、toolbar、loading 或 error state。`components.error` 只處理 Built-in Mermaid render failure，因此 Custom Renderer 必須自行呈現錯誤狀態，如上例所示。
 
-以下是極簡的設定與元件示例：
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  contentMermaid: {
-    components: {
-      renderer: 'MyCustomMermaid',
-      spinner: 'MySpinner', // 選填：改用自己的全域 Loading 元件
-    }
-  }
-})
-```
-
-```vue
-<!-- components/MyCustomMermaid.vue -->
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import type { Component } from 'vue'
-
-const props = defineProps<{ spinner: Component | string }>()
-const loading = ref(true)
-onMounted(() => { loading.value = false })
-</script>
-
-<template>
-  <div class="my-mermaid">
-    <component v-if="loading" :is="props.spinner" />
-    <Mermaid v-else>
-      <slot />
-    </Mermaid>
-  </div>
-</template>
-```
+目前被設定為 `components.renderer` 的元件不得渲染 `<Mermaid>`：巢狀元件會再次選中同一個 Custom Renderer。請改為直接呼叫 `$mermaid()`、其他 rendering library 或自己的 renderer。
 
 ### 元件使用方式
 
@@ -536,21 +595,46 @@ export default defineNuxtConfig({
 })
 ```
 
-## Contribution
+## 相容性
+
+公開 peer contract 支援 Nuxt `^4.1.0` 與 Nuxt Content `>=3.5.0 <4.0.0`。發布前會驗證兩個固定的 package artifact profiles：位於公開最低版本的 `v3-minimum`，以及刻意固定已知最新版本的 `v3-known-latest`。兩者都會在各自的精確 Node runtime 下驗證 clean installation、公開型別、production build 與基本瀏覽器 SVG rendering。
+
+這兩個 profiles 是完整 peer range 的代表性證據，不是唯一支援版本清單。如果 profile 失敗，必須診斷並修復相容性邊界；不能靠刪除 profile 或降低 Package User assertions 取得綠燈。
+
+請在各 profile 的精確 Node runtime 下執行：
+
+```bash
+volta run --node 22.19.0 pnpm test:compatibility-profile --profile v3-minimum
+volta run --node 24.19.0 pnpm test:package-artifact
+```
+
+## 支持專案
+
+如果這個模組對你有幫助，歡迎透過 [Ko-fi 支持我的開源工作](https://ko-fi.com/barzhsieh)。你的支持將協助專案持續維護、相容性更新、測試與文件撰寫。
+
+## 貢獻
+
+歡迎提交 Issue 回報問題或建議新功能！也歡迎直接發 Pull Request。
+
+- Commit 訊息請遵循 [Conventional Commits](https://www.conventionalcommits.org/) 格式（例如 `feat: add spinner option`、`fix: handle dark mode toggle`）。
+- PR 請附上變更摘要與測試結果。
 
 <details>
-<summary>Local Development Commands</summary>
+<summary>開發指令</summary>
 
 ```bash
-pnpm install
-pnpm dev:prepare
-pnpm dev       # Run playground
-pnpm test      # Run tests
+pnpm install        # 安裝依賴
+pnpm dev:prepare    # 建置模組 stub 並準備 playground
+pnpm dev            # 啟動 playground
+pnpm test           # 執行測試
+pnpm test:package-artifact # 驗證 known-latest package artifact profile
+pnpm lint           # 執行 ESLint
+pnpm test:types     # 型別檢查
 ```
 
 </details>
 
-## License
+## 授權
 
 [MIT License](./LICENSE)
 

package/dist/module.d.mts

@@ -26,37 +26,21 @@ declare module 'vue' {
     $mermaid: () => Promise<Mermaid>
   }
   interface GlobalComponents {
-    Mermaid: DefineComponent<{
-      config?: MermaidConfig
-      toolbar?: MermaidToolbarOptions
-      code?: string
-    }>
+    Mermaid: DefineComponent<MermaidComponentProps>
   }
 }
 
-declare module 'nuxt/schema' {
+declare module '@nuxt/schema' {
   interface NuxtConfig {
     contentMermaid?: ModuleOptions
-    /**
-     * @deprecated Use `contentMermaid`
-     */
-    mermaidContent?: ModuleOptions
   }
 
   interface NuxtOptions {
     contentMermaid?: ModuleOptions
-    /**
-     * @deprecated Use `contentMermaid`
-     */
-    mermaidContent?: ModuleOptions
   }
 
   interface PublicRuntimeConfig {
-    contentMermaid?: Partial<ModuleOptions>
-    /**
-     * @deprecated Use `contentMermaid`
-     */
-    mermaidContent?: Partial<ModuleOptions>
+    contentMermaid?: RuntimeOptions
   }
 }
 
@@ -72,12 +56,18 @@ declare global {
   }
 }
 
-interface ModuleOptions {
-    /**
-     * Whether to enable the entire Mermaid process
-     * @default true
-     */
-    enabled?: boolean;
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonValue[];
+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;
+type RuntimeMermaidConfig = RuntimeDataMember<MermaidConfig> & JsonObject;
+type PageMermaidConfig = RuntimeMermaidConfig;
+interface RuntimeOptions {
     /**
      * Enable debug mode for detailed logging and error reporting
      * @default false
@@ -88,9 +78,9 @@ interface ModuleOptions {
      */
     loader?: {
         /**
-         * Pass-through to `mermaid.initialize`
+         * Pure-data configuration passed through Nuxt public runtime config.
          */
-        init?: MermaidConfig;
+        init?: RuntimeMermaidConfig;
         /**
          * Whether to lazy load the diagram when it enters the viewport.
          * Can be a boolean or an object with IntersectionObserver options.
@@ -104,10 +94,7 @@ interface ModuleOptions {
      * Options related to theme handling
      */
     theme?: {
-        /**
-         * @deprecated The module now automatically detects and syncs with @nuxtjs/color-mode.
-         * This option no longer has any effect and will be removed in a future version.
-         */
+        /** @deprecated No effect; retained for 3.0 compatibility. */
         useColorModeTheme?: boolean;
         light?: MermaidConfig['theme'];
         dark?: MermaidConfig['theme'];
@@ -116,28 +103,10 @@ interface ModuleOptions {
      * Names for custom implementation components
      */
     components?: {
-        /**
-         * Custom Mermaid implementation component name (e.g., 'MyMermaid').
-         * The Markdown transformation phase always outputs `<Mermaid>`, this setting only affects
-         * which component implementation `Mermaid.vue` delegates to at runtime.
-         */
         renderer?: string;
-        /**
-         * Spinner component name to use while Mermaid is loading.
-         * This should be a globally available component name (e.g., under the project `components/` directory).
-         * If not provided, the module's built-in `Spinner.vue` will be used.
-         */
         spinner?: string;
-        /**
-         * Error component name to display when Mermaid rendering fails.
-         * This should be a globally available component name (e.g., under the project `components/` directory).
-         * If not provided, the module's built-in fallback message will be used.
-         */
         error?: string;
     };
-    /**
-     * Options related to SVG expand (lightbox) interactions
-     */
     /**
      * Expand configuration. `false` disables expand, `true` uses defaults.
      */
@@ -147,9 +116,26 @@ interface ModuleOptions {
      */
     toolbar?: MermaidToolbarOptions;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+interface ModuleOptions extends RuntimeOptions {
+    /**
+     * Whether to enable the entire Mermaid process at build time.
+     * @default true
+     */
+    enabled?: boolean;
+}
+interface MermaidComponentBaseProps {
+    toolbar?: MermaidToolbarOptions;
+    code?: string;
+}
+type MermaidComponentProps = MermaidComponentBaseProps & ({
+    pageConfig?: PageMermaidConfig;
+    config?: never;
+} | {
+    pageConfig?: never;
+    config?: MermaidConfig;
+});
 
-declare function transformMermaidCodeBlocks(body: string, componentName: string, frontmatterConfigKey?: string): string;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default, transformMermaidCodeBlocks };
-export type { ModuleOptions };
+export { _default as default };
+export type { MermaidComponentProps, ModuleOptions, PageMermaidConfig, RuntimeMermaidConfig, RuntimeOptions };

package/dist/module.json

@@ -2,11 +2,11 @@
   "name": "@barzhsieh/nuxt-content-mermaid",
   "configKey": "contentMermaid",
   "compatibility": {
-    "nuxt": "^3.20.1 || ^4.1.0"
+    "nuxt": "^4.1.0"
   },
-  "version": "2.2.2",
+  "version": "3.0.0",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }