@icebreakers/monorepo-templates 2.0.7 → 2.1.0

package/templates/nimbus/src/styles/site.css

@@ -0,0 +1,186 @@
+@import './base.css';
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 4.5rem;
+  padding: 0.8rem max(1.5rem, calc((100vw - 90rem) / 2));
+  border-bottom: 1px solid var(--line);
+}
+
+.brand {
+  font-weight: 650;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.language-link {
+  font-size: 0.875rem;
+}
+
+.docs-grid {
+  display: grid;
+  grid-template-columns: 15rem minmax(0, 1fr) 12rem;
+  gap: 3rem;
+  max-width: 90rem;
+  padding: 3rem 1.5rem;
+  margin: auto;
+}
+
+.site-rail, .page-rail {
+  font-size: 0.875rem;
+}
+
+.rail-title {
+  font-size: 0.75rem;
+  font-weight: 650;
+  color: var(--muted);
+  letter-spacing: 0.04em;
+}
+
+.navigation-list {
+  padding: 0;
+  list-style: none;
+}
+
+.navigation-list ul {
+  padding-left: 1rem;
+}
+
+.navigation-list a {
+  display: block;
+  padding: 0.3rem 0;
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.navigation-list a[aria-current="page"] {
+  font-weight: 650;
+  color: var(--accent);
+}
+
+.navigation-list a:hover {
+  color: var(--accent);
+}
+
+.index-link {
+  display: inline-block;
+  margin-top: 2rem;
+  font-family: ui-monospace, monospace;
+}
+
+main {
+  min-width: 0;
+  max-width: 48rem;
+}
+
+.description {
+  margin-bottom: 2.5rem;
+  font-size: 1.15rem;
+  color: var(--muted);
+}
+
+.callout {
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  background: var(--soft);
+  border-left: 3px solid var(--accent);
+}
+
+.callout p:last-child {
+  margin-bottom: 0;
+}
+
+footer {
+  padding-top: 1rem;
+  margin-top: 3rem;
+  font-size: 0.875rem;
+  border-top: 1px solid var(--line);
+}
+
+.search-panel {
+  margin-bottom: 2rem;
+}
+
+.search-panel form {
+  margin-top: 1rem;
+}
+
+.search-controls {
+  display: flex;
+  gap: 0.3rem;
+  margin-top: 0.5rem;
+}
+
+.search-results {
+  padding-left: 1.2rem;
+}
+
+.search-results li {
+  margin-bottom: 0.6rem;
+}
+
+.skip-link {
+  position: absolute;
+  top: -5rem;
+  left: 1rem;
+  padding: 0.5rem;
+  background: var(--surface);
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+@media (max-width: 72rem) {
+  .docs-grid {
+  grid-template-columns: 13rem minmax(0, 1fr);
+  gap: 2rem;
+}
+
+  .page-rail {
+  display: none;
+}
+}
+
+@media (max-width: 48rem) {
+  .docs-grid {
+  grid-template-columns: minmax(0, 1fr);
+  padding-top: 1.5rem;
+}
+
+  .site-rail {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--line);
+}
+
+  .site-rail .navigation-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+}
+
+  .site-rail .navigation-list ul {
+  padding-left: 0;
+}
+
+  .index-link {
+  margin-top: 0.5rem;
+}
+
+  .search-panel {
+  margin-bottom: 1rem;
+}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface: #141c2b;
+    --ink: #e3eaf5;
+    --muted: #a8b6cc;
+    --line: #33415a;
+    --accent: #97baff;
+    --soft: #222f46;
+  }
+}

package/templates/nimbus/stylelint.config.js

@@ -0,0 +1,3 @@
+import { defineStylelintConfig } from 'repoctl/tooling'
+
+export default await defineStylelintConfig()

package/templates/nimbus/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/templates/server/package.json

@@ -66,7 +66,7 @@
   "devDependencies": {
     "@hono/node-server": "^2.1.3",
     "consola": "^3.4.2",
-    "hono": "^4.13.11",
+    "hono": "^4.13.12",
     "tsdown": "0.23.0",
     "wrangler": "^4.135.0",
     "zod": "^4.6.5"

package/templates/vitepress/.vitepress/config.ts

@@ -1,11 +1,11 @@
 import Tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vitepress'
 import llmstxt from 'vitepress-plugin-llms'
-import { withMermaid } from 'vitepress-plugin-mermaid'
+import { mermaidMarkdown } from './mermaid/markdown'
 import { createNav, createSidebars } from './navigation/routes'
 import { createPageHead, siteOrigin } from './seo'
 
-export default withMermaid(defineConfig({
+export default defineConfig({
   outDir: '.vitepress/dist',
   srcExclude: ['CHANGELOG.md', 'learn/packages/examples/**', 'zh/learn/packages/examples/**'],
   title: 'repoctl',
@@ -69,7 +69,6 @@ export default withMermaid(defineConfig({
   },
   vite: {
     plugins: [
-      // @ts-ignore vitepress-plugin-llms currently exposes Vite 6 plugin types.
       Tailwindcss(),
       llmstxt({
         title: 'repoctl',
@@ -89,5 +88,5 @@ export default withMermaid(defineConfig({
       }),
     ],
   },
-  mermaid: {},
-}))
+  markdown: { config: mermaidMarkdown },
+})

package/templates/vitepress/.vitepress/home/content.ts

@@ -32,7 +32,7 @@ const english = {
   evidence: {
     title: 'See the plan before the repository changes',
     description: 'Preview work, redact local paths, and keep the exact command sequence with the report.',
-    code: 'pnpm exec repo new docs --template vitepress --dry-run\npnpm exec repo check --dry-run\npnpm exec repo doctor --markdown --redact',
+    code: 'pnpm exec repo new docs --template nimbus --dry-run\npnpm exec repo check --dry-run\npnpm exec repo doctor --markdown --redact',
     link: { label: 'See how diagnosis works', href: '/start/diagnose' },
   },
   layers: {
@@ -77,7 +77,7 @@ const chinese = {
   evidence: {
     title: '仓库变化前，先看清执行计划',
     description: '预览操作、脱敏本地路径，并让报告保留准确的命令顺序。',
-    code: 'pnpm exec repo new docs --template vitepress --dry-run\npnpm exec repo check --dry-run\npnpm exec repo doctor --markdown --redact',
+    code: 'pnpm exec repo new docs --template nimbus --dry-run\npnpm exec repo check --dry-run\npnpm exec repo doctor --markdown --redact',
     link: { label: '了解诊断流程', href: '/zh/start/diagnose' },
   },
   layers: {

package/templates/vitepress/.vitepress/home/faq.ts

@@ -0,0 +1,16 @@
+import type { DocsLocale } from '../navigation/routes'
+
+export const faqContent = {
+  zh: [
+    ['repoctl 是什么？', 'repoctl 是面向 pnpm 与 Turborepo monorepo 的任务型 CLI，用于初始化、诊断、创建、校验和发布工作区。'],
+    ['如何安装 repoctl？', '在项目中运行 pnpm add -D repoctl，然后使用 pnpm exec repo init 和 pnpm exec repo doctor。'],
+    ['repoctl 与 pnpm、Turborepo 是什么关系？', 'pnpm 和 Turborepo 负责包管理与任务编排，repoctl 负责把团队约定、检查和日常操作组织成可复用任务。'],
+    ['repo doctor 与 repo check 有什么区别？', 'repo doctor 诊断仓库健康状况，repo check 规划并执行 lint、类型、构建和测试校验。'],
+  ],
+  en: [
+    ['What is repoctl?', 'repoctl is a task-first CLI for initializing, diagnosing, creating, checking, and releasing pnpm and Turborepo monorepos.'],
+    ['How do I install repoctl?', 'Run pnpm add -D repoctl, then use pnpm exec repo init and pnpm exec repo doctor.'],
+    ['How does repoctl relate to pnpm and Turborepo?', 'pnpm and Turborepo provide package management and task orchestration; repoctl turns repository conventions and checks into reusable tasks.'],
+    ['What is the difference between repo doctor and repo check?', 'repo doctor diagnoses repository health, while repo check plans and runs lint, type, build, and test checks.'],
+  ],
+} satisfies Record<DocsLocale, [string, string][]>

package/templates/vitepress/.vitepress/mermaid/markdown.ts

@@ -0,0 +1,18 @@
+import type { MarkdownRenderer } from 'vitepress'
+
+export function mermaidMarkdown(md: MarkdownRenderer) {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (tokens, index, options, env, renderer) => {
+    const token = tokens[index]!
+    const language = token.info.trim()
+    if (language === 'mermaid') {
+      const graph = md.utils.escapeHtml(encodeURIComponent(token.content))
+      return `<Mermaid graph="${graph}" />\n`
+    }
+    // Keep the old plugin's escape hatch for displaying Mermaid source code.
+    if (language === 'mmd') {
+      token.info = 'mermaid'
+    }
+    return fence(tokens, index, options, env, renderer)
+  }
+}

package/templates/vitepress/.vitepress/mermaid/mermaid.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, onMounted, ref, watch } from 'vue'
+import { renderMermaid, resolveMermaidTheme } from './render'
+
+const props = defineProps<{ graph: string }>()
+const { frontmatter, isDark, lang } = useData()
+const mounted = ref(false)
+const diagram = ref<HTMLElement>()
+const error = ref('')
+const loading = ref(true)
+const theme = computed(() => resolveMermaidTheme(isDark.value, frontmatter.value.mermaidTheme))
+
+onMounted(() => {
+  mounted.value = true
+})
+
+watch([mounted, () => props.graph, theme], async ([ready, graph, selectedTheme], _, onCleanup) => {
+  if (!ready || !diagram.value) {
+    return
+  }
+  let active = true
+  onCleanup(() => {
+    active = false
+  })
+  error.value = ''
+  loading.value = true
+  diagram.value.replaceChildren()
+  try {
+    const result = await renderMermaid(decodeURIComponent(graph), selectedTheme)
+    if (active && diagram.value) {
+      // Mermaid sanitizes SVG using its strict security mode.
+      diagram.value.innerHTML = result.svg
+      result.bindFunctions?.(diagram.value)
+    }
+  }
+  catch (cause) {
+    if (active) {
+      error.value = cause instanceof Error ? cause.message : String(cause)
+    }
+  }
+  finally {
+    if (active) {
+      loading.value = false
+    }
+  }
+}, { flush: 'post' })
+</script>
+
+<template>
+  <div class="mermaid" :aria-busy="loading">
+    <p v-if="loading" role="status">
+      {{ lang === 'zh-CN' ? '正在绘制图表…' : 'Rendering diagram…' }}
+    </p>
+    <p v-if="error" role="alert">
+      {{ lang === 'zh-CN' ? '图表绘制失败：' : 'Unable to render diagram: ' }}{{ error }}
+    </p>
+    <div ref="diagram" class="mermaid__diagram" />
+  </div>
+</template>
+
+<style scoped>
+.mermaid__diagram {
+  overflow-x: auto;
+}
+</style>

package/templates/vitepress/.vitepress/mermaid/render.ts

@@ -0,0 +1,37 @@
+import type { MermaidConfig, RenderResult } from 'mermaid'
+
+let pending: Promise<unknown> = Promise.resolve()
+let sequence = 0
+
+export type MermaidTheme = NonNullable<MermaidConfig['theme']>
+const themes: readonly MermaidTheme[] = ['base', 'dark', 'default', 'forest', 'neutral', 'neo', 'neo-dark', 'redux', 'redux-dark', 'redux-color', 'redux-dark-color', 'null']
+
+export function resolveMermaidTheme(dark: boolean, theme: unknown): MermaidTheme {
+  if (dark) {
+    return 'dark'
+  }
+  return typeof theme === 'string' && themes.includes(theme as MermaidTheme)
+    ? theme as MermaidTheme
+    : 'default'
+}
+
+export function renderMermaid(source: string, theme: MermaidTheme): Promise<RenderResult> {
+  // initialize() changes global state, so it must share the render queue.
+  const result = pending.then(async () => {
+    const { default: mermaid } = await import('mermaid')
+    const container = document.createElement('div')
+    container.setAttribute('aria-hidden', 'true')
+    container.style.cssText = 'position:absolute;left:-10000px;top:0;'
+    document.body.append(container)
+    try {
+      mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true, theme })
+      return await mermaid.render(`repoctl-mermaid-${++sequence}`, source, container)
+    }
+    finally {
+      container.remove()
+    }
+  })
+  // A malformed diagram must not block later diagrams.
+  pending = result.catch(() => {})
+  return result
+}

package/templates/vitepress/.vitepress/seo.ts

@@ -1,4 +1,5 @@
 import type { HeadConfig, TransformContext } from 'vitepress'
+import { faqContent } from './home/faq'
 
 export const siteOrigin = 'https://repoctl.icebreaker.top'
 
@@ -35,6 +36,16 @@ export function createPageHead({ page, title, description }: TransformContext):
       { '@type': 'Organization', 'name': 'repoctl', 'url': siteOrigin, 'logo': `${siteOrigin}/brand/repoctl-mark.svg`, 'sameAs': ['https://github.com/icelib/repoctl', 'https://www.npmjs.com/package/repoctl'] },
       { '@type': 'SoftwareApplication', 'name': 'repoctl', 'applicationCategory': 'DeveloperApplication', 'operatingSystem': 'macOS, Linux, Windows', 'url': siteOrigin, description, 'sameAs': ['https://github.com/icelib/repoctl', 'https://www.npmjs.com/package/repoctl'], 'offers': { '@type': 'Offer', 'price': '0', 'priceCurrency': 'USD' } },
       { '@type': 'WebSite', 'name': 'repoctl', 'url': siteOrigin, 'potentialAction': { '@type': 'SearchAction', 'target': `${siteOrigin}/reference/commands?q={search_term_string}`, 'query-input': 'required name=search_term_string' } },
+      ...(page === 'index.md' || page === 'zh/index.md'
+        ? [{
+            '@type': 'FAQPage',
+            'mainEntity': faqContent[isChinese ? 'zh' : 'en'].map(([name, text]) => ({
+              '@type': 'Question',
+              name,
+              'acceptedAnswer': { '@type': 'Answer', text },
+            })),
+          }]
+        : []),
     ],
   }
 
@@ -61,6 +72,6 @@ export function createPageHead({ page, title, description }: TransformContext):
     ['meta', { name: 'twitter:description', content: description }],
     ['meta', { name: 'twitter:image', content: socialImage }],
     ['meta', { name: 'twitter:image:alt', content: socialImageAlt }],
-    ['script', { type: 'application/ld+json' }, JSON.stringify(jsonLd)],
+    ['script', { type: 'application/ld+json' }, JSON.stringify(jsonLd).replace(/</g, '\\u003c')],
   ]
 }

package/templates/vitepress/.vitepress/theme/components/HomePage.vue

@@ -2,22 +2,11 @@
 import type { DocsLocale } from '../../navigation/routes'
 import { computed } from 'vue'
 import { homeContent } from '../../home/content'
+import { faqContent } from '../../home/faq'
 
 const props = defineProps<{ locale: DocsLocale }>()
 const content = computed(() => homeContent[props.locale])
-const faq = computed(() => props.locale === 'zh'
-  ? [
-      ['repoctl 是什么？', 'repoctl 是面向 pnpm 与 Turborepo monorepo 的任务型 CLI，用于初始化、诊断、创建、校验和发布工作区。'],
-      ['如何安装 repoctl？', '在项目中运行 pnpm add -D repoctl，然后使用 pnpm exec repo init 和 pnpm exec repo doctor。'],
-      ['repoctl 与 pnpm、Turborepo 是什么关系？', 'pnpm 和 Turborepo 负责包管理与任务编排，repoctl 负责把团队约定、检查和日常操作组织成可复用任务。'],
-      ['repo doctor 与 repo check 有什么区别？', 'repo doctor 诊断仓库健康状况，repo check 规划并执行 lint、类型、构建和测试校验。'],
-    ]
-  : [
-      ['What is repoctl?', 'repoctl is a task-first CLI for initializing, diagnosing, creating, checking, and releasing pnpm and Turborepo monorepos.'],
-      ['How do I install repoctl?', 'Run pnpm add -D repoctl, then use pnpm exec repo init and pnpm exec repo doctor.'],
-      ['How does repoctl relate to pnpm and Turborepo?', 'pnpm and Turborepo provide package management and task orchestration; repoctl turns repository conventions and checks into reusable tasks.'],
-      ['What is the difference between repo doctor and repo check?', 'repo doctor diagnoses repository health, while repo check plans and runs lint, type, build, and test checks.'],
-    ])
+const faq = computed(() => faqContent[props.locale])
 </script>
 
 <template>
@@ -129,9 +118,6 @@ const faq = computed(() => props.locale === 'zh'
         <summary>{{ item[0] }}</summary>
         <p>{{ item[1] }}</p>
       </details>
-      <script type="application/ld+json">
-        {{ JSON.stringify({ '@context': 'https://schema.org', '@type': 'FAQPage', "mainEntity": faq.map(item => ({ '@type': 'Question', "name": item[0], "acceptedAnswer": { '@type': 'Answer', "text": item[1] } })) }) }}
-      </script>
     </section>
   </main>
 </template>

package/templates/vitepress/.vitepress/theme/index.ts

@@ -1,14 +1,16 @@
 import type { EnhanceAppContext, Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import Mermaid from '../mermaid/mermaid.vue'
 import HomePage from './components/HomePage.vue'
 import Layout from './Layout.vue'
 import './tailwind.css'
 import './home/index.css'
 
 export default {
-  ...DefaultTheme,
+  extends: DefaultTheme,
   Layout,
   enhanceApp({ app }: EnhanceAppContext) {
     app.component('HomePage', HomePage)
+    app.component('Mermaid', Mermaid)
   },
 } satisfies Theme

package/templates/vitepress/ai/create.md

@@ -35,7 +35,7 @@ pnpm exec repo doctor
 | API / Hono service       | `hono-server`                         |
 | TypeScript library / SDK | `tsdown`                              |
 | Vue component library    | `vue-lib`                             |
-| Documentation site       | `vitepress`                           |
+| Documentation site       | `nimbus`                              |
 | CLI                      | `cli`                                 |
 
 Omit `--templates` when the intent is unclear. After init, create a package with:

package/templates/vitepress/package.json

@@ -34,23 +34,19 @@
     "deploy:dry-run": "wrangler deploy --dry-run",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc -p tsconfig.json --noEmit"
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "vue": "^3.5.43"
   },
   "devDependencies": {
-    "@braintree/sanitize-url": "^7.1.2",
     "@tailwindcss/vite": "^4.3.3",
-    "cytoscape": "^3.34.3",
-    "cytoscape-cose-bilkent": "^4.1.0",
-    "dayjs": "^1.11.23",
-    "debug": "^4.4.3",
     "mermaid": "^12.0.0",
     "tailwindcss": "^4.3.3",
-    "vitepress": "^1.6.4",
+    "vitepress": "2.0.0-alpha.20",
     "vitepress-plugin-llms": "^1.14.0",
-    "vitepress-plugin-mermaid": "^2.0.17",
+    "vitest": "~5.0.3",
     "vue-tsc": "^3.3.11",
     "wrangler": "^4.135.0"
   }

package/templates/vitepress/reference/commands.md

@@ -64,9 +64,9 @@ Use it to discover built-in template keys, inspect metadata, verify template hea
 ```bash
 repo new
 repo new sdk --template tsdown
-repo new docs --template vitepress
-repo new docs --template vitepress --dry-run
-repo new docs --template vitepress --json --out plans/docs.json
+repo new docs --template nimbus
+repo new docs --template nimbus --dry-run
+repo new docs --template nimbus --json --out plans/docs.json
 ```
 
 Use it to create packages and apps. Explicit template keys are validated first; invalid keys fail with suggestions instead of silently falling back.

package/templates/vitepress/reference/template-assets.md

@@ -20,7 +20,7 @@ repo templates --category library
 
 ```bash
 repo new sdk --template tsdown --dry-run
-repo new docs --template vitepress --json --out plans/docs.json
+repo new docs --template nimbus --json --out plans/docs.json
 ```
 
 A plan records the selected template, source, destination, package name, workspace pattern, and whether fallback behavior was used. Unknown explicit keys fail with a suggestion.

package/templates/vitepress/reference/templates.md

@@ -4,14 +4,17 @@ repoctl templates are maintained by `@icebreakers/monorepo-templates`. The CLI,
 
 ## Built-In Templates
 
-| Key           | Category | Default target     | Use case                |
-| ------------- | -------- | ------------------ | ----------------------- |
-| `tsdown`      | library  | `packages/tsdown`  | TypeScript library      |
-| `vue-lib`     | library  | `packages/vue-lib` | Vue 3 component library |
-| `vue-hono`    | app      | `apps/client`      | Vue 3 + Hono app        |
-| `hono-server` | service  | `apps/server`      | Hono API service        |
-| `vitepress`   | docs     | `apps/website`     | VitePress docs site     |
-| `cli`         | tool     | `apps/cli`         | TypeScript CLI          |
+| Key           | Category | Default target     | Use case                               |
+| ------------- | -------- | ------------------ | -------------------------------------- |
+| `tsdown`      | library  | `packages/tsdown`  | TypeScript library                     |
+| `vue-lib`     | library  | `packages/vue-lib` | Vue 3 component library                |
+| `vue-hono`    | app      | `apps/client`      | Vue 3 + Hono app                       |
+| `hono-server` | service  | `apps/server`      | Hono API service                       |
+| `vitepress`   | docs     | `apps/website`     | VitePress docs site                    |
+| `nimbus`      | docs     | `apps/docs`        | Nimbus + Astro, default bilingual docs |
+| `cli`         | tool     | `apps/cli`         | TypeScript CLI                         |
+
+Nimbus is the default for the interactive **Docs Site** goal. It includes English at `/`, Chinese at `/zh/`, search and AI documentation endpoints. VitePress remains an explicit alternative. Their default targets are `apps/docs` and `apps/website`, so both can coexist. General creation still defaults to `tsdown`; naming a project `docs` does not infer its template. In noninteractive workflows, pass `--template nimbus` explicitly.
 
 ## Discover Templates
 
@@ -29,6 +32,7 @@ repo templates --markdown --out docs/templates.md
 repo new sdk --template tsdown
 repo new ui --template vue-lib
 repo new api --template hono-server
+repo new docs --template nimbus
 repo new website --template vitepress
 repo new toolbox --template cli
 ```
@@ -85,7 +89,7 @@ For existing projects, update these scripts and the Turbo inputs/outputs, then r
 ### Create a docs site
 
 ```bash
-repo new docs --template vitepress
+repo new docs --template nimbus
 ```
 
 Check first:

package/templates/vitepress/tasks/index.md

@@ -36,7 +36,7 @@ Continue with [Adopt an existing workspace](/tasks/adopt-existing).
 ```bash
 pnpm exec repo templates
 pnpm exec repo new sdk --template tsdown
-pnpm exec repo new docs --template vitepress --dry-run
+pnpm exec repo new docs --template nimbus --dry-run
 ```
 
 For daily development, root scripts also work:

package/templates/vitepress/test/mermaid.test.ts

@@ -0,0 +1,39 @@
+import { createMarkdownRenderer } from 'vitepress'
+import { describe, expect, it } from 'vitest'
+import { mermaidMarkdown } from '../.vitepress/mermaid/markdown'
+import { resolveMermaidTheme } from '../.vitepress/mermaid/render'
+
+describe('Mermaid Markdown integration', () => {
+  it('round-trips diagram text without injecting attributes or Vue expressions', async () => {
+    const md = await createMarkdownRenderer(process.cwd(), { config: mermaidMarkdown })
+    const source = 'flowchart LR\n A["引号 & <tag> {{ value }}"] --> B["it\'s fine"]\n'
+    const html = await md.renderAsync(`\`\`\`mermaid\n${source}\`\`\``)
+    const graph = html.match(/graph="([^"]+)"/)![1]!
+    expect(decodeURIComponent(graph)).toBe(source)
+    expect(html).not.toContain('<tag>')
+    expect(html).not.toContain('{{ value }}')
+    expect(html).toContain('<Mermaid ')
+  })
+
+  it('keeps normal fences and the mmd source-code escape hatch highlighted', async () => {
+    const md = await createMarkdownRenderer(process.cwd(), { config: mermaidMarkdown })
+    const html = await md.renderAsync('```ts\nconst answer = 42\n```\n\n```mmd\nflowchart LR\n A --> B\n```')
+    expect(html).toContain('language-ts')
+    expect(html).toContain('language-mermaid')
+    expect(html).not.toContain('<Mermaid ')
+    expect(html).toContain('shiki')
+  })
+
+  it('renders multiple independent component instances', async () => {
+    const md = await createMarkdownRenderer(process.cwd(), { config: mermaidMarkdown })
+    const html = await md.renderAsync('```mermaid\nflowchart LR\n A --> B\n```\n\n```mermaid\nsequenceDiagram\n A->>B: Hello\n```')
+    expect(html.match(/<Mermaid /g)).toHaveLength(2)
+  })
+
+  it('validates page themes and lets dark mode take precedence', () => {
+    expect(resolveMermaidTheme(false, 'forest')).toBe('forest')
+    expect(resolveMermaidTheme(true, 'forest')).toBe('dark')
+    expect(resolveMermaidTheme(false, { theme: 'forest' })).toBe('default')
+    expect(resolveMermaidTheme(false, undefined)).toBe('default')
+  })
+})