@raystack/chronicle 0.1.0-canary.e11f924 → 0.1.0-canary.f0d9bde

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.1.0-canary.e11f924",
+  "version": "0.1.0-canary.f0d9bde",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",
@@ -9,8 +9,7 @@
     "dist",
     "src",
     "templates",
-    "next.config.mjs",
-    "source.config.ts"
+    "tsconfig.json"
   ],
   "bin": {
     "chronicle": "./bin/chronicle.js"
@@ -27,7 +26,6 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
-    "openapi-types": "^12.1.3",
     "semver": "^7.7.4",
     "typescript": "5.9.3"
   },
@@ -37,26 +35,33 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.14",
     "@heroicons/react": "^2.2.0",
+    "@mdx-js/rollup": "^3.1.1",
     "@raystack/apsara": "^0.56.0",
-    "@types/unist": "^3.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",
     "class-variance-authority": "^0.7.1",
     "codemirror": "^6.0.2",
     "commander": "^14.0.2",
-    "fumadocs-core": "16.6.15",
-    "fumadocs-mdx": "^14.2.6",
+    "glob": "^11.0.0",
+    "gray-matter": "^4.0.3",
     "lodash": "^4.17.23",
     "mermaid": "^11.13.0",
-    "next": "16.1.6",
+    "openapi-types": "^12.1.3",
     "react": "^19.0.0",
-    "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
-    "remark-attr": "^0.11.1",
+    "react-router-dom": "^7.13.1",
     "remark-directive": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "@shikijs/rehype": "^4.0.2",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.2.0",
+    "satori": "^0.25.0",
+    "sirv": "^3.0.1",
     "slugify": "^1.6.6",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
-    "yaml": "^2.8.2",
-    "zod": "^4.3.6"
+    "minisearch": "^7.2.0",
+    "vite": "^8.0.0",
+    "yaml": "^2.8.2"
   }
 }

package/src/cli/__tests__/config.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { resolveContentDir } from '../utils/config'
+
+describe('resolveContentDir', () => {
+  it('returns flag value when provided', () => {
+    const result = resolveContentDir('/custom/path')
+    expect(result).toBe('/custom/path')
+  })
+
+  it('returns env var when set', () => {
+    const original = process.env.CHRONICLE_CONTENT_DIR
+    process.env.CHRONICLE_CONTENT_DIR = '/env/content'
+    const result = resolveContentDir()
+    expect(result).toContain('env/content')
+    process.env.CHRONICLE_CONTENT_DIR = original
+  })
+
+  it('defaults to content directory', () => {
+    const original = process.env.CHRONICLE_CONTENT_DIR
+    delete process.env.CHRONICLE_CONTENT_DIR
+    const result = resolveContentDir()
+    expect(result).toContain('content')
+    process.env.CHRONICLE_CONTENT_DIR = original
+  })
+})

package/src/cli/__tests__/scaffold.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest'
+import { detectPackageManager } from '../utils/scaffold'
+
+describe('detectPackageManager', () => {
+  it('returns a string', () => {
+    const result = detectPackageManager()
+    expect(typeof result).toBe('string')
+    expect(['npm', 'bun', 'pnpm', 'yarn']).toContain(result)
+  })
+})

package/src/cli/commands/build.ts

@@ -1,33 +1,80 @@
 import { Command } from 'commander'
-import { spawn } from 'child_process'
 import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
 import chalk from 'chalk'
-import { resolveContentDir, loadCLIConfig, attachLifecycleHandlers } from '@/cli/utils'
-
-const require = createRequire(import.meta.url)
-const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')
-const nextCli = require.resolve('next/dist/bin/next')
+import { resolveContentDir } from '@/cli/utils/config'
+import { PACKAGE_ROOT } from '@/cli/utils/resolve'
 
 export const buildCommand = new Command('build')
   .description('Build for production')
   .option('-c, --content <path>', 'Content directory')
-  .action((options) => {
+  .option('-o, --outDir <path>', 'Output directory', 'dist')
+  .option('--adapter <adapter>', 'Deploy adapter (vercel)')
+  .action(async (options) => {
     const contentDir = resolveContentDir(options.content)
-    loadCLIConfig(contentDir)
+    const outDir = path.resolve(options.outDir)
+
+    const VALID_ADAPTERS = ['vercel']
+    if (options.adapter && !VALID_ADAPTERS.includes(options.adapter)) {
+      console.error(chalk.red(`Unknown adapter: ${options.adapter}. Valid adapters: ${VALID_ADAPTERS.join(', ')}`))
+      process.exit(1)
+    }
+
+    process.env.CHRONICLE_PROJECT_ROOT = process.cwd()
+    process.env.CHRONICLE_CONTENT_DIR = contentDir
 
     console.log(chalk.cyan('Building for production...'))
-    console.log(chalk.gray(`Content: ${contentDir}`))
-
-    const child = spawn(process.execPath, [nextCli, 'build'], {
-      stdio: 'inherit',
-      cwd: PACKAGE_ROOT,
-      env: {
-        ...process.env,
-        CHRONICLE_CONTENT_DIR: contentDir,
+
+    const { build } = await import('vite')
+    const { createViteConfig } = await import('@/server/vite-config')
+
+    const baseConfig = await createViteConfig({ root: PACKAGE_ROOT, contentDir })
+
+    // Build client bundle
+    console.log(chalk.gray('Building client...'))
+    await build({
+      ...baseConfig,
+      build: {
+        outDir: path.join(outDir, 'client'),
+        ssrManifest: true,
+        rolldownOptions: {
+          input: path.resolve(PACKAGE_ROOT, 'src/server/index.html'),
+        },
       },
     })
 
-    attachLifecycleHandlers(child)
+    // Build server bundle
+    const serverEntry = options.adapter === 'vercel'
+      ? path.resolve(PACKAGE_ROOT, 'src/server/entry-vercel.ts')
+      : path.resolve(PACKAGE_ROOT, 'src/server/entry-prod.ts')
+
+    console.log(chalk.gray('Building server...'))
+    await build({
+      ...baseConfig,
+      ssr: {
+        noExternal: true,
+      },
+      build: {
+        outDir: path.join(outDir, 'server'),
+        ssr: serverEntry,
+        target: 'node22',
+      },
+    })
+
+    // Generate search index
+    console.log(chalk.gray('Building search index...'))
+    const { generateSearchIndex } = await import('@/server/build-search-index')
+    const docCount = await generateSearchIndex(contentDir, path.join(outDir, 'server'))
+    console.log(chalk.gray(`  Indexed ${docCount} documents`))
+
+    console.log(chalk.green('Build complete →'), outDir)
+
+    // Run Vercel adapter post-build
+    if (options.adapter === 'vercel') {
+      const { buildVercelOutput } = await import('@/server/adapters/vercel')
+      await buildVercelOutput({
+        distDir: outDir,
+        contentDir,
+        projectRoot: process.cwd(),
+      })
+    }
   })

package/src/cli/commands/dev.ts

@@ -1,34 +1,21 @@
 import { Command } from 'commander'
-import { spawn } from 'child_process'
-import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
 import chalk from 'chalk'
-import { resolveContentDir, loadCLIConfig, attachLifecycleHandlers } from '@/cli/utils'
-
-const require = createRequire(import.meta.url)
-const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')
-const nextCli = require.resolve('next/dist/bin/next')
+import { resolveContentDir } from '@/cli/utils/config'
+import { PACKAGE_ROOT } from '@/cli/utils/resolve'
 
 export const devCommand = new Command('dev')
   .description('Start development server')
   .option('-p, --port <port>', 'Port number', '3000')
   .option('-c, --content <path>', 'Content directory')
-  .action((options) => {
+  .action(async (options) => {
     const contentDir = resolveContentDir(options.content)
-    loadCLIConfig(contentDir)
+    const port = parseInt(options.port, 10)
 
-    console.log(chalk.cyan('Starting dev server...'))
-    console.log(chalk.gray(`Content: ${contentDir}`))
+    process.env.CHRONICLE_PROJECT_ROOT = process.cwd()
+    process.env.CHRONICLE_CONTENT_DIR = contentDir
 
-    const child = spawn(process.execPath, [nextCli, 'dev', '-p', options.port], {
-      stdio: 'inherit',
-      cwd: PACKAGE_ROOT,
-      env: {
-        ...process.env,
-        CHRONICLE_CONTENT_DIR: contentDir,
-      },
-    })
+    console.log(chalk.cyan('Starting dev server...'))
 
-    attachLifecycleHandlers(child)
+    const { startDevServer } = await import('@/server/dev')
+    await startDevServer({ port, root: PACKAGE_ROOT, contentDir })
   })

package/src/cli/commands/init.ts

@@ -1,9 +1,11 @@
 import { Command } from 'commander'
+import { execSync } from 'child_process'
 import fs from 'fs'
 import path from 'path'
 import chalk from 'chalk'
 import { stringify } from 'yaml'
 import type { ChronicleConfig } from '@/types'
+import { detectPackageManager, getChronicleVersion } from '@/cli/utils/scaffold'
 
 function createConfig(): ChronicleConfig {
   return {
@@ -14,6 +16,29 @@ function createConfig(): ChronicleConfig {
   }
 }
 
+function createPackageJson(name: string): Record<string, unknown> {
+  return {
+    name,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'chronicle dev',
+      build: 'chronicle build',
+      start: 'chronicle start',
+    },
+    dependencies: {
+      '@raystack/chronicle': `^${getChronicleVersion()}`,
+    },
+    devDependencies: {
+      '@raystack/tools-config': '0.56.0',
+      'openapi-types': '^12.1.3',
+      typescript: '5.9.3',
+      '@types/react': '^19.2.10',
+      '@types/node': '^25.1.0',
+    },
+  }
+}
+
 const sampleMdx = `---
 title: Welcome
 description: Getting started with your documentation
@@ -27,32 +52,103 @@ This is your documentation home page.
 
 export const initCommand = new Command('init')
   .description('Initialize a new Chronicle project')
-  .option('-d, --dir <path>', 'Content directory', '.')
+  .option('-c, --content <path>', 'Content directory name', 'content')
   .action((options) => {
-    const contentDir = path.resolve(options.dir)
+    const projectDir = process.cwd()
+    const dirName = path.basename(projectDir) || 'docs'
+    const contentDir = path.join(projectDir, options.content)
 
     // Create content directory
     if (!fs.existsSync(contentDir)) {
       fs.mkdirSync(contentDir, { recursive: true })
-      console.log(chalk.green('✓'), 'Created', contentDir)
+      console.log(chalk.green('\u2713'), 'Created', contentDir)
+    }
+
+    // Create or update package.json
+    const packageJsonPath = path.join(projectDir, 'package.json')
+    if (!fs.existsSync(packageJsonPath)) {
+      fs.writeFileSync(packageJsonPath, JSON.stringify(createPackageJson(dirName), null, 2) + '\n')
+      console.log(chalk.green('\u2713'), 'Created', packageJsonPath)
+    } else {
+      const existing = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
+      const template = createPackageJson(dirName)
+      let updated = false
+
+      if (existing.type !== 'module') {
+        existing.type = 'module'
+        updated = true
+      }
+
+      if (!existing.scripts) existing.scripts = {}
+      for (const [key, value] of Object.entries(template.scripts as Record<string, string>)) {
+        if (!existing.scripts[key]) {
+          existing.scripts[key] = value
+          updated = true
+        }
+      }
+
+      if (!existing.dependencies) existing.dependencies = {}
+      for (const [key, value] of Object.entries(template.dependencies as Record<string, string>)) {
+        if (!existing.dependencies[key]) {
+          existing.dependencies[key] = value
+          updated = true
+        }
+      }
+
+      if (!existing.devDependencies) existing.devDependencies = {}
+      for (const [key, value] of Object.entries(template.devDependencies as Record<string, string>)) {
+        if (!existing.devDependencies[key]) {
+          existing.devDependencies[key] = value
+          updated = true
+        }
+      }
+
+      if (updated) {
+        fs.writeFileSync(packageJsonPath, JSON.stringify(existing, null, 2) + '\n')
+        console.log(chalk.green('\u2713'), 'Updated', packageJsonPath)
+      } else {
+        console.log(chalk.yellow('\u26a0'), packageJsonPath, 'already has all required entries')
+      }
     }
 
     // Create chronicle.yaml
-    const configPath = path.join(contentDir, 'chronicle.yaml')
+    const configPath = path.join(projectDir, 'chronicle.yaml')
     if (!fs.existsSync(configPath)) {
       fs.writeFileSync(configPath, stringify(createConfig()))
-      console.log(chalk.green('✓'), 'Created', configPath)
+      console.log(chalk.green('\u2713'), 'Created', configPath)
     } else {
-      console.log(chalk.yellow('⚠'), configPath, 'already exists')
+      console.log(chalk.yellow('\u26a0'), configPath, 'already exists')
     }
 
     // Create sample index.mdx
-    const indexPath = path.join(contentDir, 'index.mdx')
-    if (!fs.existsSync(indexPath)) {
+    const contentFiles = fs.readdirSync(contentDir)
+    if (contentFiles.length === 0) {
+      const indexPath = path.join(contentDir, 'index.mdx')
       fs.writeFileSync(indexPath, sampleMdx)
-      console.log(chalk.green('✓'), 'Created', indexPath)
+      console.log(chalk.green('\u2713'), 'Created', indexPath)
     }
 
-    console.log(chalk.green('\n✓ Chronicle initialized!'))
-    console.log('\nRun', chalk.cyan('chronicle dev'), 'to start development server')
+    // Update .gitignore
+    const gitignorePath = path.join(projectDir, '.gitignore')
+    const gitignoreEntries = ['node_modules', 'dist']
+    if (fs.existsSync(gitignorePath)) {
+      const existing = fs.readFileSync(gitignorePath, 'utf-8')
+      const missing = gitignoreEntries.filter(e => !existing.includes(e))
+      if (missing.length > 0) {
+        fs.appendFileSync(gitignorePath, `\n${missing.join('\n')}\n`)
+        console.log(chalk.green('\u2713'), 'Added', missing.join(', '), 'to .gitignore')
+      }
+    } else {
+      fs.writeFileSync(gitignorePath, `${gitignoreEntries.join('\n')}\n`)
+      console.log(chalk.green('\u2713'), 'Created .gitignore')
+    }
+
+    // Install dependencies
+    const pm = detectPackageManager()
+    console.log(chalk.cyan(`\nInstalling dependencies with ${pm}...`))
+    execSync(`${pm} install`, { cwd: projectDir, stdio: 'inherit' })
+
+    const runCmd = pm === 'npm' ? 'npx' : pm === 'bun' ? 'bunx' : `${pm} dlx`
+    console.log(chalk.green('\n\u2713 Chronicle initialized!'))
+    console.log('\nRun', chalk.cyan(`${runCmd} chronicle dev`), 'to start development server')
   })

package/src/cli/commands/serve.ts

@@ -1,54 +1,55 @@
 import { Command } from 'commander'
-import { spawn } from 'child_process'
 import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
 import chalk from 'chalk'
-import { resolveContentDir, loadCLIConfig, attachLifecycleHandlers } from '@/cli/utils'
-
-const require = createRequire(import.meta.url)
-const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')
-const nextCli = require.resolve('next/dist/bin/next')
+import { resolveContentDir } from '@/cli/utils/config'
+import { PACKAGE_ROOT } from '@/cli/utils/resolve'
 
 export const serveCommand = new Command('serve')
   .description('Build and start production server')
   .option('-p, --port <port>', 'Port number', '3000')
   .option('-c, --content <path>', 'Content directory')
-  .action((options) => {
+  .option('-o, --outDir <path>', 'Output directory', 'dist')
+  .action(async (options) => {
     const contentDir = resolveContentDir(options.content)
-    loadCLIConfig(contentDir)
+    const port = parseInt(options.port, 10)
+    const outDir = path.resolve(options.outDir)
 
-    const env = {
-      ...process.env,
-      CHRONICLE_CONTENT_DIR: contentDir,
-    }
+    process.env.CHRONICLE_PROJECT_ROOT = process.cwd()
+    process.env.CHRONICLE_CONTENT_DIR = contentDir
 
+    // Build
     console.log(chalk.cyan('Building for production...'))
-    console.log(chalk.gray(`Content: ${contentDir}`))
 
-    const buildChild = spawn(process.execPath, [nextCli, 'build'], {
-      stdio: 'inherit',
-      cwd: PACKAGE_ROOT,
-      env,
-    })
+    const { build } = await import('vite')
+    const { createViteConfig } = await import('@/server/vite-config')
 
-    process.once('SIGINT', () => buildChild.kill('SIGINT'))
-    process.once('SIGTERM', () => buildChild.kill('SIGTERM'))
+    const baseConfig = await createViteConfig({ root: PACKAGE_ROOT, contentDir })
 
-    buildChild.on('close', (code) => {
-      if (code !== 0) {
-        console.log(chalk.red('Build failed'))
-        process.exit(code ?? 1)
-      }
+    await build({
+      ...baseConfig,
+      build: {
+        outDir: path.join(outDir, 'client'),
+        ssrManifest: true,
+        rolldownOptions: {
+          input: path.resolve(PACKAGE_ROOT, 'src/server/index.html'),
+        },
+      },
+    })
 
-      console.log(chalk.cyan('Starting production server...'))
+    await build({
+      ...baseConfig,
+      ssr: {
+        noExternal: true,
+      },
+      build: {
+        outDir: path.join(outDir, 'server'),
+        ssr: path.resolve(PACKAGE_ROOT, 'src/server/entry-prod.ts'),
+      },
+    })
 
-      const startChild = spawn(process.execPath, [nextCli, 'start', '-p', options.port], {
-        stdio: 'inherit',
-        cwd: PACKAGE_ROOT,
-        env,
-      })
+    // Start
+    console.log(chalk.cyan('Starting production server...'))
 
-      attachLifecycleHandlers(startChild)
-    })
+    const { startProdServer } = await import('@/server/prod')
+    await startProdServer({ port, root: PACKAGE_ROOT, distDir: outDir })
   })

package/src/cli/commands/start.ts

@@ -1,34 +1,24 @@
 import { Command } from 'commander'
-import { spawn } from 'child_process'
 import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
 import chalk from 'chalk'
-import { resolveContentDir, loadCLIConfig, attachLifecycleHandlers } from '@/cli/utils'
-
-const require = createRequire(import.meta.url)
-const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')
-const nextCli = require.resolve('next/dist/bin/next')
+import { resolveContentDir } from '@/cli/utils/config'
+import { PACKAGE_ROOT } from '@/cli/utils/resolve'
 
 export const startCommand = new Command('start')
   .description('Start production server')
   .option('-p, --port <port>', 'Port number', '3000')
   .option('-c, --content <path>', 'Content directory')
-  .action((options) => {
+  .option('-d, --dist <path>', 'Dist directory', 'dist')
+  .action(async (options) => {
     const contentDir = resolveContentDir(options.content)
-    loadCLIConfig(contentDir)
+    const port = parseInt(options.port, 10)
+    const distDir = path.resolve(options.dist)
 
-    console.log(chalk.cyan('Starting production server...'))
-    console.log(chalk.gray(`Content: ${contentDir}`))
+    process.env.CHRONICLE_PROJECT_ROOT = process.cwd()
+    process.env.CHRONICLE_CONTENT_DIR = contentDir
 
-    const child = spawn(process.execPath, [nextCli, 'start', '-p', options.port], {
-      stdio: 'inherit',
-      cwd: PACKAGE_ROOT,
-      env: {
-        ...process.env,
-        CHRONICLE_CONTENT_DIR: contentDir,
-      },
-    })
+    console.log(chalk.cyan('Starting production server...'))
 
-    attachLifecycleHandlers(child)
+    const { startProdServer } = await import('@/server/prod')
+    await startProdServer({ port, root: PACKAGE_ROOT, distDir })
   })

package/src/cli/utils/config.ts

@@ -13,7 +13,7 @@ export interface CLIConfig {
 export function resolveContentDir(contentFlag?: string): string {
   if (contentFlag) return path.resolve(contentFlag)
   if (process.env.CHRONICLE_CONTENT_DIR) return path.resolve(process.env.CHRONICLE_CONTENT_DIR)
-  return process.cwd()
+  return path.resolve('content')
 }
 
 function resolveConfigPath(contentDir: string): string | null {
@@ -28,7 +28,7 @@ export function loadCLIConfig(contentDir: string): CLIConfig {
   const configPath = resolveConfigPath(contentDir)
 
   if (!configPath) {
-    console.log(chalk.red('Error: chronicle.yaml not found in'), process.cwd(), 'or', contentDir)
+    console.log(chalk.red(`Error: chronicle.yaml not found in '${process.cwd()}' or '${contentDir}'`))
     console.log(chalk.gray(`Run 'chronicle init' to create one`))
     process.exit(1)
   }

package/src/cli/utils/index.ts

@@ -1,2 +1,2 @@
 export * from './config'
-export * from './process'
+export * from './resolve'

package/src/cli/utils/resolve.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// After bundling: dist/cli/index.js → ../.. = package root
+// After install: node_modules/@raystack/chronicle/dist/cli/index.js → ../.. = package root
+export const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')

package/src/cli/utils/scaffold.ts

@@ -0,0 +1,20 @@
+import fs from 'fs'
+import path from 'path'
+import { PACKAGE_ROOT } from './resolve'
+
+export function detectPackageManager(): string {
+  if (process.env.npm_config_user_agent) {
+    return process.env.npm_config_user_agent.split('/')[0]
+  }
+  const cwd = process.cwd()
+  if (fs.existsSync(path.join(cwd, 'bun.lock')) || fs.existsSync(path.join(cwd, 'bun.lockb'))) return 'bun'
+  if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))) return 'pnpm'
+  if (fs.existsSync(path.join(cwd, 'yarn.lock'))) return 'yarn'
+  return 'npm'
+}
+
+export function getChronicleVersion(): string {
+  const pkgPath = path.join(PACKAGE_ROOT, 'package.json')
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+  return pkg.version
+}

package/src/components/mdx/code.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { ComponentProps } from 'react'
+import { type ComponentProps, isValidElement, Children } from 'react'
+import { Mermaid } from './mermaid'
 import styles from './code.module.css'
 
 type PreProps = ComponentProps<'pre'> & {
@@ -16,6 +17,14 @@ export function MdxCode({ children, className, ...props }: ComponentProps<'code'
 }
 
 export function MdxPre({ children, title, className, ...props }: PreProps) {
+  // Detect mermaid code blocks
+  if (isValidElement(children)) {
+    const childProps = children.props as { className?: string; children?: string }
+    if (childProps.className?.includes('language-mermaid') && typeof childProps.children === 'string') {
+      return <Mermaid chart={childProps.children} />
+    }
+  }
+
   return (
     <div className={styles.codeBlock}>
       {title && <div className={styles.codeHeader}>{title}</div>}

package/src/components/mdx/details.module.css

@@ -4,32 +4,9 @@
   margin: var(--rs-space-5) 0;
 }
 
-.summary {
-  padding: var(--rs-space-4) var(--rs-space-5);
-  cursor: pointer;
+.trigger {
   font-weight: 500;
   font-size: var(--rs-font-size-small);
-  color: var(--rs-color-text-base-primary);
-  background: var(--rs-color-background-base-secondary);
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: var(--rs-space-3);
-}
-
-.summary::-webkit-details-marker {
-  display: none;
-}
-
-.summary::before {
-  content: '▶';
-  font-size: 10px;
-  transition: transform 0.2s ease;
-  color: var(--rs-color-text-base-secondary);
-}
-
-.details[open] > .summary::before {
-  transform: rotate(90deg);
 }
 
 .content {